@extends('layouts.app')

@section('title', 'User Details')

@section('content')

<div class="page-header-bar">
    <a href="{{ route('admin.users.index') }}" class="back-link">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
        Back to Users
    </a>
    <h1 class="page-title">User Details</h1>
    <a href="{{ route('admin.users.edit', $user) }}" class="edit-user-btn" title="Edit user">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
        Edit User
    </a>
</div>

<div class="detail-layout">

    {{-- ── LEFT: Profile card ── --}}
    <div class="profile-card card">
        <div class="avatar-section">
            <div class="avatar-ring">
                <img src="{{ $user->image_url }}" alt="" class="user-detail-avatar" width="96" height="96">
                <span class="avatar-status-dot {{ $user->is_active ? 'dot-active' : 'dot-inactive' }}" title="{{ $user->is_active ? 'Active' : 'Inactive' }}"></span>
            </div>
            <h2 class="profile-name">{{ $user->name }}</h2>
            <span class="role-badge role-{{ strtolower($user->role) }}">{{ ucfirst($user->role) }}</span>
        </div>

        <div class="profile-status-row">
            @if($user->is_active)
                <span class="status-chip status-active">
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Active
                </span>
            @else
                <span class="status-chip status-inactive">
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    Inactive
                </span>
            @endif
        </div>

        @if($user->id !== request()->session()->get('user_id'))
        <form action="{{ route('admin.users.toggle-active', $user) }}" method="POST" class="js-toggle-active-form toggle-form" data-user-name="{{ e($user->name) }}" data-action="{{ $user->is_active ? 'deactivate' : 'activate' }}">
            @csrf
            @method('PATCH')
            <button type="submit" class="toggle-btn {{ $user->is_active ? 'toggle-btn-danger' : 'toggle-btn-success' }}">
                @if($user->is_active)
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                    Set Inactive
                @else
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    Set Active
                @endif
            </button>
        </form>
        @endif
    </div>

    {{-- ── RIGHT: Info card ── --}}
    <div class="info-card card">
        <div class="info-card-header">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            Account Information
        </div>

        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">User ID</span>
                <span class="info-value info-id">#{{ $user->id }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Full Name</span>
                <span class="info-value">{{ $user->name }}</span>
            </div>
            <div class="info-item ">
                <span class="info-label">Email Address</span>
                <span class="info-value">
                    <a href="mailto:{{ $user->email }}" class="email-link">{{ $user->email }}</a>
                </span>
            </div>
            <div class="info-item">
                <span class="info-label">Phone</span>
                <span class="info-value">{{ $user->phone ?? '—' }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Date of Birth</span>
                <span class="info-value">{{ $user->date_of_birth ? $user->date_of_birth->format('M j, Y') : '—' }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">AVC Id</span>
                <span class="info-value">{{ $user->avc?->avc_id ?? '—' }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Location</span>
                <span class="info-value">{{ $user->avc?->location ?? '—' }}</span>
            </div>
           
            <div class="info-item">
                <span class="info-label">Registered</span>
                <span class="info-value">{{ $user->created_at->format('M j, Y') }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Role</span>
                <span class="info-value">
                    <span class="role-badge role-{{ strtolower($user->role) }}">{{ ucfirst($user->role) }}</span>
                </span>
            </div>
        </div>
    </div>

    {{-- ── Latest activated plans (full width) ── --}}
    <div class="activated-plans-section">
        <div class="info-card card plans-card">
            <div class="info-card-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="8" y1="10" x2="16" y2="10"/></svg>
                Latest activated plans
            </div>
            @if($activatedPlans->isEmpty())
                <p class="plans-empty">No activated plans.</p>
            @else
                <div class="plans-table-wrapper">
                    <table class="plans-table">
                        <thead>
                            <tr>
                                <th>Service ID</th>
                                <th>Plan</th>
                                <th>Type</th>
                               
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($activatedPlans as $plan)
                           
                            <tr>
                                <td>
                                   <a href="{{ route('admin.broadband.show', $plan->order_id) }}" class="plan-order-id">#{{ $plan->iperium_service_id ?? $plan->order_id ?? '—' }}</a>
                                </td>
                                <td>
                                    <span class="plan-name">{{ $plan->plan_name }}</span>
                                </td>
                                <td>
                                    <span class="plan-type-badge plan-type-{{ strtolower($plan->type) }}">{{ ucfirst($plan->type) }}</span>
                                </td>
                                <td>
                                    <span class="plan-date">{{ $plan->date?->format('M j, Y') ?? '—' }}</span>
                                    @if($plan->type === 'subscription' && isset($plan->period_end) && $plan->period_end)
                                        <br><span class="plan-period-end">Renews {{ \Carbon\Carbon::parse($plan->period_end)->format('M j, Y') }}</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="plans-footer">
                    <a href="{{ route('admin.users.orders', $user) }}" class="plans-link">View all orders →</a>
                </div>
            @endif
        </div>
    </div>

</div>

@endsection

@push('styles')
<style>

/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    animation: fadeSlideDown 0.4s ease both;
    flex-wrap: wrap;
}
.edit-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.18s;
    cursor: pointer;
}
.edit-user-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
    color: #fff;
    text-decoration: none;
}
.edit-user-btn svg { flex-shrink: 0; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-decoration: none;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    border: 1.5px solid var(--border, #e0e0e0);
    transition: all 0.18s;
    flex-shrink: 0;
}
.back-link:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    transform: translateX(-2px);
    text-decoration: none;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text, #111);
    letter-spacing: -0.3px;
}

/* ─── LAYOUT ──────────────────────────────────────────── */
.detail-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.detail-layout > * {
    min-width: 0;
}

@media (max-width: 700px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
}

/* ─── PROFILE CARD ────────────────────────────────────── */
.profile-card {
    border-radius: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    animation: fadeSlideUp 0.45s ease 0.08s both;
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.avatar-ring {
    position: relative;
    display: inline-block;
}

.user-detail-avatar {
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid var(--border, #eee);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    animation: avatarPop 0.5s cubic-bezier(.34,1.56,.64,1) 0.2s both;
}

.avatar-status-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--card-bg, #fff);
}
.dot-active  { background: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,0.2); }
.dot-inactive { background: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,0.2); }

.profile-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text, #111);
    margin: 0;
    line-height: 1.3;
}

/* ─── STATUS CHIP ─────────────────────────────────────── */
.profile-status-row {
    width: 100%;
    display: flex;
    justify-content: center;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.status-chip.status-active {
    background: rgba(40,167,69,0.12);
    color: #28a745;
    border: 1px solid rgba(40,167,69,0.25);
}
.status-chip.status-inactive {
    background: rgba(220,53,69,0.1);
    color: #dc3545;
    border: 1px solid rgba(220,53,69,0.25);
}

/* ─── ROLE BADGE ──────────────────────────────────────── */
.role-badge {
    display: inline-block;
    padding: 0.22rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.role-admin {
    background: color-mix(in srgb, #e31e52 12%, transparent);
    color: #e31e52;
    border-color: color-mix(in srgb, #e31e52 25%, transparent);
}

/* ─── TOGGLE BUTTON ───────────────────────────────────── */
.toggle-form { width: 100%; margin: 0; }

.toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.01em;
}
.toggle-btn:hover { transform: translateY(-1px); }
.toggle-btn:active { transform: translateY(0); }

.toggle-btn-danger {
    background: rgba(220,53,69,0.1);
    color: #dc3545;
    border: 1.5px solid rgba(220,53,69,0.3);
}
.toggle-btn-danger:hover {
    background: #dc3545;
    color: #fff;
    box-shadow: 0 4px 14px rgba(220,53,69,0.3);
}
.toggle-btn-success {
    background: rgba(40,167,69,0.1);
    color: #28a745;
    border: 1.5px solid rgba(40,167,69,0.3);
}
.toggle-btn-success:hover {
    background: #28a745;
    color: #fff;
    box-shadow: 0 4px 14px rgba(40,167,69,0.3);
}

/* ─── INFO CARD ───────────────────────────────────────── */
.info-card {
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    animation: fadeSlideUp 0.45s ease 0.14s both;
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #999);
    margin-bottom: 1.4rem;
    padding-bottom: 0.9rem;
    border-bottom: 1.5px solid var(--border, #f0f0f0);
}
.info-card-header svg { color: var(--accent); }

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
}

.info-item-full {
    grid-column: 1 / -1;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    animation: fadeIn 0.35s ease both;
}

.info-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #aaa);
}

.info-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text, #111);
}

.info-id {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 700;
}

.email-link {
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.15s;
    word-break: break-all;
}
.email-link:hover { opacity: 0.75; text-decoration: underline; }

/* ─── ACTIVATED PLANS SECTION ─────────────────────────── */
.activated-plans-section {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    min-width: 0;
}

.plans-card {
    overflow: hidden;
}

.plans-card .info-card-header {
    margin-bottom: 1rem;
}

.plans-empty {
    font-size: 0.9rem;
    color: var(--text-muted, #888);
    margin: 0;
    padding: 0.5rem 0;
}

.plans-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1.75rem;
    padding: 0 1.75rem;
}

.plans-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.plans-table th,
.plans-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #eee);
}

.plans-table th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #aaa);
}

.plans-table td {
    color: var(--text, #111);
}

.plan-name {
    font-weight: 600;
    color: var(--text, #111);
}

.plan-order-id {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--accent);
}

.plan-type-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.plan-type-subscription {
    background: rgba(40, 167, 69, 0.12);
    color: #28a745;
}
.plan-type-order {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.plan-period-end {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
}

.plans-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border, #f0f0f0);
}

.plans-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.15s;
}

.plans-link:hover {
    opacity: 0.85;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .info-grid { grid-template-columns: 1fr; }
    .info-item-full { grid-column: 1; }
    .profile-card { padding: 1.5rem 1.25rem; }
    .info-card { padding: 1.25rem; }
    .page-title { font-size: 1.25rem; }
    .plans-table th, .plans-table td { padding: 0.5rem 0.4rem; font-size: 0.85rem; }
}

/* ─── KEYFRAMES ───────────────────────────────────────── */
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes avatarPop {
    from { opacity: 0; transform: scale(0.75); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.querySelectorAll('.js-toggle-active-form').forEach(function(form) {
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        var name = form.getAttribute('data-user-name') || 'this user';
        var action = form.getAttribute('data-action') || 'change status';
        var isActivate = action === 'activate';
        Swal.fire({
            title: isActivate ? 'Activate user?' : 'Deactivate user?',
            text: isActivate
                ? 'Are you sure you want to activate ' + name + '?'
                : 'Are you sure you want to deactivate ' + name + '?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#e31e52',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, ' + (isActivate ? 'activate' : 'deactivate')
        }).then(function(result) {
            if (result.isConfirmed) form.submit();
        });
    });
});
</script>
@endpush