@extends('admin.layouts.app')

@section('title', 'Profile')
@section('subtitle', 'Your account details')

@section('topbar-actions')
    <a href="/admin/profile/edit" class="btn-primary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 Profile
    </a>
@endsection

@push('styles')
<style>
    .btn-primary {
        display: flex; align-items: center; gap: 7px;
        padding: 9px 18px;
        background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-mid) 100%);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 9px;
        color: #fff;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px; font-weight: 500;
        cursor: pointer; text-decoration: none;
        transition: opacity 0.15s, transform 0.15s;
    }
    .btn-primary svg { width: 14px; height: 14px; }
    .btn-primary:hover { opacity: 0.85; transform: translateY(-1px); }

    .profile-grid {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 20px;
        align-items: start;
    }

    @media (max-width: 768px) {
        .profile-grid { grid-template-columns: 1fr; }
    }

    /* ── Avatar card ─────────────────────────────────────────── */
    .avatar-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 32px 24px;
        display: flex; flex-direction: column; align-items: center;
        text-align: center; gap: 14px;
    }

    .avatar-wrap {
        position: relative;
        width: 100px; height: 100px;
    }

    .avatar-img {
        width: 100px; height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--border-hover);
    }

    .avatar-fallback {
        width: 100px; height: 100px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--crimson), var(--crimson-mid));
        display: flex; align-items: center; justify-content: center;
        font-family: 'Playfair Display', serif;
        font-size: 36px; font-weight: 700; color: #fff;
        border: 3px solid rgba(139,0,0,0.4);
    }

    .avatar-name {
        font-family: 'Playfair Display', serif;
        font-size: 20px; font-weight: 700; color: var(--text);
    }

    .avatar-email { font-size: 12px; color: var(--text-muted); }

    .role-badge {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 4px 12px;
        border-radius: 100px;
        font-size: 11px; font-weight: 500;
        background: rgba(139,0,0,0.25);
        border: 1px solid rgba(139,0,0,0.35);
        color: #fca5a5;
    }

    .avatar-divider { width: 100%; height: 1px; background: var(--border); }

    .avatar-meta { width: 100%; }

    .meta-row {
        display: flex; align-items: center; justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
        font-size: 12px;
    }

    .meta-row:last-child { border-bottom: none; }
    .meta-label { color: var(--text-muted); }
    .meta-value { color: var(--text); font-weight: 500; }

    /* ── Details card ────────────────────────────────────────── */
    .details-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
    }

    .details-card-header {
        padding: 18px 24px;
        border-bottom: 1px solid var(--border);
        font-size: 13px; font-weight: 500; color: var(--text);
    }

    .details-body { padding: 8px 24px; }

    .detail-row {
        display: flex; align-items: flex-start;
        gap: 16px; padding: 16px 0;
        border-bottom: 1px solid var(--border);
    }

    .detail-row:last-child { border-bottom: none; }

    .detail-icon {
        width: 34px; height: 34px;
        border-radius: 8px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        color: var(--text-muted);
    }

    .detail-icon svg { width: 15px; height: 15px; }

    .detail-content { flex: 1; min-width: 0; }
    .detail-label { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; }
    .detail-value { font-size: 14px; color: var(--text); }
    .detail-empty { font-size: 13px; color: var(--text-dim); font-style: italic; }
</style>
@endpush

@section('content')
<div class="profile-grid">

    {{-- Avatar Card --}}
    <div class="avatar-card">
        <div class="avatar-wrap">
            @if($user->profile_image)
                <img src="{{ asset('storage/' . $user->profile_image) }}" alt="{{ $user->name }}" class="avatar-img">
            @else
                <div class="avatar-fallback">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
            @endif
        </div>

        <div class="avatar-name">{{ $user->name }}</div>
        <div class="avatar-email">{{ $user->email }}</div>
        <span class="role-badge">{{ ucfirst($user->role) }}</span>

        <div class="avatar-divider"></div>

        <div class="avatar-meta">
            <div class="meta-row">
                <span class="meta-label">Member since</span>
                <span class="meta-value">{{ $user->created_at->format('M Y') }}</span>
            </div>
            <div class="meta-row">
                <span class="meta-label">Chapter</span>
                <span class="meta-value">{{ $user->chapter_name ?? '—' }}</span>
            </div>
        </div>
    </div>

    {{-- Details Card --}}
    <div class="details-card">
        <div class="details-card-header">Account Information</div>
        <div class="details-body">

            <div class="detail-row">
                <div class="detail-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                </div>
                <div class="detail-content">
                    <div class="detail-label">Full Name</div>
                    <div class="detail-value">{{ $user->name }}</div>
                </div>
            </div>

            <div class="detail-row">
                <div class="detail-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
                </div>
                <div class="detail-content">
                    <div class="detail-label">Email Address</div>
                    <div class="detail-value">{{ $user->email }}</div>
                </div>
            </div>

            <div class="detail-row">
                <div class="detail-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.87a16 16 0 0 0 6.16 6.16l.87-.87a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 16.92z"/></svg>
                </div>
                <div class="detail-content">
                    <div class="detail-label">Phone</div>
                    @if($user->phone)
                        <div class="detail-value">{{ $user->phone }}</div>
                    @else
                        <div class="detail-empty">Not provided</div>
                    @endif
                </div>
            </div>


        </div>
    </div>

</div>
@endsection