@extends('admin.layout')

@section('title', 'Dashboard')

@push('styles')
<style>
    .od {
        --od-ink: #0F172A;
        --od-muted: #64748B;
        --od-line: #E2E8F0;
        --od-soft: #F8FAFC;
        --od-violet: #7C3AED;
        --od-deep: #5B21B6;
    }

    .od-hero {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        padding: 1.5rem 1.6rem 1.45rem;
        margin-bottom: 1.25rem;
        color: #fff;
        background:
            radial-gradient(ellipse 70% 90% at 0% 0%, rgba(6,182,212,.28), transparent 55%),
            radial-gradient(ellipse 55% 70% at 100% 20%, rgba(167,139,250,.35), transparent 50%),
            linear-gradient(135deg, #4C1D95 0%, #5B21B6 42%, #312E81 100%);
        box-shadow: 0 18px 40px rgba(76, 29, 149, .22);
        animation: odIn .45s ease both;
    }
    .od-hero::after {
        content: "";
        position: absolute; inset: 0; pointer-events: none;
        background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
        background-size: 18px 18px;
        mask-image: linear-gradient(120deg, #000 20%, transparent 75%);
        opacity: .45;
    }
    .od-hero-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: flex-end; }
    .od-kicker {
        display: inline-flex; align-items: center; gap: .4rem;
        font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
        color: #DDD6FE; margin-bottom: .55rem;
    }
    .od-kicker i {
        width: 7px; height: 7px; border-radius: 50%; background: #34D399;
        box-shadow: 0 0 0 0 rgba(52,211,153,.45);
        animation: odPulse 1.8s ease infinite;
    }
    .od-hero h1 {
        margin: 0 0 .35rem; font-size: clamp(1.45rem, 2.4vw, 1.85rem);
        font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
    }
    .od-hero-meta {
        margin: 0; color: rgba(237,233,254,.88); font-size: .9rem; line-height: 1.45;
        max-width: 36rem;
    }
    .od-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
    .od-hero-btn {
        display: inline-flex; align-items: center; gap: .4rem;
        padding: .65rem 1rem; border-radius: 12px; font-size: .84rem; font-weight: 700;
        border: 1px solid transparent; transition: transform .15s ease, background .15s ease;
    }
    .od-hero-btn:hover { transform: translateY(-1px); color: inherit; }
    .od-hero-btn.primary { background: #fff; color: #4C1D95; }
    .od-hero-btn.ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.18); }
    .od-hero-btn.ghost:hover { background: rgba(255,255,255,.2); }

    .od-verify {
        margin-top: 1.15rem; position: relative; z-index: 1;
        background: rgba(15,23,42,.22); border: 1px solid rgba(255,255,255,.12);
        border-radius: 14px; padding: .85rem 1rem;
        display: grid; grid-template-columns: 1fr auto; gap: .65rem 1rem; align-items: center;
    }
    .od-verify-label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #C4B5FD; }
    .od-verify-text { font-size: .9rem; font-weight: 600; margin-top: .15rem; }
    .od-verify-pct { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; }
    .od-verify-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
    .od-verify-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #67E8F9, #A78BFA, #C4B5FD); }

    .od-metrics {
        display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; margin-bottom: 1.25rem;
    }
    .od-metric {
        background: #fff; border: 1px solid var(--od-line); border-radius: 16px;
        padding: 1.05rem 1.05rem 1rem; box-shadow: 0 1px 2px rgba(15,23,42,.04);
        animation: odIn .5s ease both;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .od-metric:nth-child(2) { animation-delay: .04s; }
    .od-metric:nth-child(3) { animation-delay: .08s; }
    .od-metric:nth-child(4) { animation-delay: .12s; }
    .od-metric:nth-child(5) { animation-delay: .16s; }
    .od-metric:hover {
        transform: translateY(-3px);
        border-color: #DDD6FE;
        box-shadow: 0 12px 28px rgba(91,33,182,.08);
    }
    .od-metric-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .7rem; }
    .od-metric-ico {
        width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    }
    .od-metric-ico svg { width: 20px; height: 20px; }
    .od-metric-label { font-size: .72rem; font-weight: 700; color: var(--od-muted); text-transform: uppercase; letter-spacing: .05em; }
    .od-metric-num { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--od-ink); margin-top: .25rem; }
    .od-metric-sub { font-size: .75rem; color: #94A3B8; margin-top: .4rem; }

    .od-usage {
        background: #fff; border: 1px solid var(--od-line); border-radius: 16px;
        padding: 1.1rem 1.2rem; margin-bottom: 1.25rem;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
    }
    .od-usage-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .9rem; }
    .od-usage-head h2 { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
    .od-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .od-usage-item .meta { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .35rem; }
    .od-usage-item .name { font-weight: 700; color: var(--od-ink); }
    .od-usage-item .count { color: var(--od-muted); font-weight: 600; }
    .od-bar { height: 8px; background: #F1F5F9; border-radius: 99px; overflow: hidden; }
    .od-bar span { display: block; height: 100%; border-radius: 99px; }
    .od-usage-note { font-size: .72rem; margin-top: .3rem; font-weight: 600; }

    .od-grid {
        display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
        gap: 1.15rem; align-items: start;
    }
    .od-panel {
        background: #fff; border: 1px solid var(--od-line); border-radius: 16px;
        padding: 1.2rem 1.25rem; box-shadow: 0 1px 2px rgba(15,23,42,.04);
    }
    .od-panel-head {
        display: flex; justify-content: space-between; align-items: center; gap: .75rem;
        margin-bottom: 1rem;
    }
    .od-panel-head h2 {
        margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
        display: flex; align-items: center; gap: .5rem;
    }
    .od-panel-head a { font-size: .8rem; font-weight: 700; color: var(--od-violet); }
    .od-stack { display: flex; flex-direction: column; gap: 1.15rem; }

    .od-role { margin-bottom: .95rem; }
    .od-role:last-of-type { margin-bottom: 0; }
    .od-role-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; margin-bottom: .35rem; }
    .od-role-name { font-weight: 700; }
    .od-role-count { color: var(--od-muted); font-weight: 600; }

    .od-actions {
        display: grid; grid-template-columns: 1fr 1fr; gap: .65rem;
    }
    .od-action {
        display: flex; align-items: center; gap: .7rem;
        padding: .8rem .85rem; border-radius: 14px;
        border: 1px solid var(--od-line); background: var(--od-soft);
        color: var(--od-ink); font-size: .82rem; font-weight: 700;
        transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .od-action:hover {
        transform: translateY(-2px); background: #fff; border-color: #DDD6FE;
        box-shadow: 0 10px 22px rgba(91,33,182,.08); color: var(--od-ink);
    }
    .od-action-ico {
        width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
    }
    .od-action-ico svg { width: 18px; height: 18px; }
    .od-action span { line-height: 1.25; }

    .od-activity { list-style: none; padding: 0; margin: 0; }
    .od-activity li {
        display: flex; gap: .8rem; padding: .8rem 0;
        border-bottom: 1px solid #F1F5F9;
    }
    .od-activity li:last-child { border-bottom: 0; padding-bottom: 0; }
    .od-activity-dot {
        width: 36px; height: 36px; border-radius: 11px; flex: none;
        display: grid; place-items: center;
    }
    .od-activity-dot svg { width: 16px; height: 16px; }
    .od-activity-title { margin: 0 0 .15rem; font-size: .86rem; font-weight: 700; }
    .od-activity-desc { margin: 0 0 .2rem; font-size: .78rem; color: var(--od-muted); }
    .od-activity-time { font-size: .72rem; color: #94A3B8; }

    .od-empty { font-size: .85rem; color: var(--od-muted); margin: 0; }

    @keyframes odIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes odPulse {
        0% { box-shadow: 0 0 0 0 rgba(52,211,153,.45); }
        70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
        100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
    }
    @media (max-width: 1200px) {
        .od-metrics { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 1100px) {
        .od-grid { grid-template-columns: 1fr; }
        .od-usage-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
        .od-metrics { grid-template-columns: 1fr 1fr; }
        .od-hero { padding: 1.25rem; }
        .od-actions { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
        .od-hero, .od-metric, .od-kicker i { animation: none; }
        .od-metric:hover, .od-action:hover, .od-hero-btn:hover { transform: none; }
    }
</style>
@endpush

@section('content')
@php
    $verifiedPct = $stats['total'] > 0 ? round(($stats['verified'] / $stats['total']) * 100) : 0;
    $pending = max(0, ($stats['total'] ?? 0) - ($stats['verified'] ?? 0));
    $eventMeta = collect([
        $event->venue ?: null,
        $event->dates ?: null,
        $event->is_virtual ? 'Online' : null,
    ])->filter()->implode(' · ');
    $usageLabels = ['participants' => 'Participants', 'sessions' => 'Sessions', 'booths' => 'Booths'];
@endphp

<div class="od">
    <section class="od-hero">
        <div class="od-hero-inner">
            <div>
                <div class="od-kicker"><i aria-hidden="true"></i> Live event desk</div>
                <h1>{{ $event->fullName() ?: $event->name }}</h1>
                <p class="od-hero-meta">
                    {{ $eventMeta ?: 'Manage participants, sessions, booths, and check-in from one place.' }}
                </p>
            </div>
            <div class="od-hero-actions">
                <a href="{{ route('mexco.admin.participants.create') }}" class="od-hero-btn primary">+ Add participant</a>
                <a href="{{ route('mexco.committee', ['switch' => 1]) }}" class="od-hero-btn ghost" target="_blank" rel="noopener">Open Attend</a>
            </div>
        </div>
        <div class="od-verify">
            <div>
                <div class="od-verify-label">Check-in progress</div>
                <div class="od-verify-text">{{ $stats['verified'] }} verified · {{ $pending }} pending</div>
            </div>
            <div class="od-verify-pct">{{ $verifiedPct }}%</div>
            <div class="od-verify-bar" aria-hidden="true"><span style="width:{{ max($verifiedPct, $stats['verified'] ? 3 : 0) }}%"></span></div>
        </div>
    </section>

    <div class="od-metrics">
        @foreach([
            ['Participants', $stats['total'], 'Registered for this event', '#EEF2FF', '#4F46E5', '<path d="M12 12a4 4 0 100-8 4 4 0 000 8z"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>'],
            ['Verified', $stats['verified'], $verifiedPct.'% of total', '#ECFDF5', '#059669', '<path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/>'],
            ['Certificates', $stats['certificates_ready'], 'Ready to issue', '#EFF6FF', '#2563EB', '<rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/>'],
            ['Sessions', $stats['sessions'], 'On the programme', '#FFF7ED', '#EA580C', '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>'],
            ['Booths', $stats['booths'], 'Exhibition spaces', '#F5F3FF', '#7C3AED', '<path d="M3 9l2-5h14l2 5"/><path d="M3 9h18v10H3z"/>'],
        ] as [$label, $num, $sub, $bg, $color, $iconPath])
            <article class="od-metric">
                <div class="od-metric-top">
                    <div class="od-metric-ico" style="background:{{ $bg }};color:{{ $color }}">
                        <svg fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">{!! $iconPath !!}</svg>
                    </div>
                </div>
                <div class="od-metric-label">{{ $label }}</div>
                <div class="od-metric-num">{{ $num }}</div>
                <div class="od-metric-sub">{{ $sub }}</div>
            </article>
        @endforeach
    </div>

    @if(!empty($usageSummary))
        @php
            $usageRows = collect($usageLabels)->map(function ($label, $key) use ($usageSummary) {
                $u = $usageSummary[$key] ?? null;
                return ($u && ($u['limit'] ?? null)) ? ['key' => $key, 'label' => $label, 'u' => $u] : null;
            })->filter()->values();
        @endphp
        @if($usageRows->isNotEmpty())
            <section class="od-usage">
                <div class="od-usage-head">
                    <h2>Plan usage</h2>
                </div>
                <div class="od-usage-grid">
                    @foreach($usageRows as $row)
                        @php
                            $u = $row['u'];
                            $barColor = match($u['level']) {
                                'limit100' => '#DC2626',
                                'warn90' => '#D97706',
                                'warn80' => '#F59E0B',
                                default => '#7C3AED',
                            };
                            $pct = $u['percent'] ?? 0;
                        @endphp
                        <div class="od-usage-item">
                            <div class="meta">
                                <span class="name">{{ $row['label'] }}</span>
                                <span class="count">{{ $u['current'] }} / {{ $u['limit'] }}</span>
                            </div>
                            <div class="od-bar"><span style="width:{{ max($pct, 2) }}%;background:{{ $barColor }}"></span></div>
                            @if($u['level'] === 'limit100')
                                <div class="od-usage-note" style="color:#DC2626">Limit reached</div>
                            @elseif($u['level'] === 'warn90')
                                <div class="od-usage-note" style="color:#D97706">{{ $pct }}% used</div>
                            @elseif($u['level'] === 'warn80')
                                <div class="od-usage-note" style="color:#B4690E">{{ $pct }}% used</div>
                            @else
                                <div class="od-usage-note" style="color:#64748B">{{ $pct }}% used</div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </section>
        @endif
    @endif

    <div class="od-grid">
        <section class="od-panel">
            <div class="od-panel-head">
                <h2>
                    <svg width="18" height="18" fill="none" stroke="#7C3AED" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 12a4 4 0 100-8 4 4 0 000 8z"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                    Participants by role
                </h2>
                <a href="{{ route('mexco.admin.participants') }}">View all</a>
            </div>
            @forelse($stats['role_names'] as $roleName)
                @php
                    $n = $stats['by_role'][$roleName] ?? 0;
                    $pct = $stats['total'] ? round($n / $stats['total'] * 100, 1) : 0;
                    $barPct = $stats['total'] ? ($n / $stats['total'] * 100) : 0;
                    $color = $roleColors[$roleName] ?? '#7C3AED';
                @endphp
                <div class="od-role">
                    <div class="od-role-meta">
                        <span class="od-role-name" style="color:{{ $color }}">{{ $roleName }}</span>
                        <span class="od-role-count">{{ $n }} · {{ $pct }}%</span>
                    </div>
                    <div class="od-bar"><span style="width:{{ max($barPct, $n ? 4 : 0) }}%;background:{{ $color }}"></span></div>
                </div>
            @empty
                <p class="od-empty">No roles configured yet.</p>
            @endforelse
        </section>

        <div class="od-stack">
            <section class="od-panel">
                <div class="od-panel-head">
                    <h2>
                        <svg width="18" height="18" fill="none" stroke="#7C3AED" stroke-width="1.8" viewBox="0 0 24 24"><path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z"/></svg>
                        Quick actions
                    </h2>
                </div>
                <div class="od-actions">
                    <a href="{{ route('mexco.admin.participants.create') }}" class="od-action">
                        <span class="od-action-ico" style="background:#ECFDF5;color:#059669">
                            <svg fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
                        </span>
                        <span>Add participant</span>
                    </a>
                    <a href="{{ route('mexco.admin.sessions.create') }}" class="od-action">
                        <span class="od-action-ico" style="background:#EFF6FF;color:#2563EB">
                            <svg fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18"/></svg>
                        </span>
                        <span>Create session</span>
                    </a>
                    <a href="{{ route('mexco.admin.booths.create') }}" class="od-action">
                        <span class="od-action-ico" style="background:#F5F3FF;color:#7C3AED">
                            <svg fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 9l2-5h14l2 5"/><path d="M3 9h18v10H3z"/></svg>
                        </span>
                        <span>Add booth</span>
                    </a>
                    <a href="{{ route('mexco.admin.certificates') }}" class="od-action">
                        <span class="od-action-ico" style="background:#FEF2F2;color:#DC2626">
                            <svg fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4.5"/><path d="M8.5 13.5L7 20l5-2.5L17 20l-1.5-6.5"/></svg>
                        </span>
                        <span>Certificates</span>
                    </a>
                    <a href="{{ route('mexco.admin.committee.create') }}" class="od-action">
                        <span class="od-action-ico" style="background:#EEF2FF;color:#4F46E5">
                            <svg fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 7V5a2 2 0 012-2h2"/><path d="M17 3h2a2 2 0 012 2v2"/><path d="M21 17v2a2 2 0 01-2 2h-2"/><path d="M7 21H5a2 2 0 01-2-2v-2"/><path d="M7 8h10v8H7z"/></svg>
                        </span>
                        <span>Register committee</span>
                    </a>
                    <a href="{{ route('mexco.committee', ['switch' => 1]) }}" class="od-action" target="_blank" rel="noopener">
                        <span class="od-action-ico" style="background:#F3EEFF;color:#7C3AED">
                            <svg fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 7V5a2 2 0 012-2h2"/><path d="M17 3h2a2 2 0 012 2v2"/><path d="M21 17v2a2 2 0 01-2 2h-2"/><path d="M7 21H5a2 2 0 01-2-2v-2"/><path d="M7 8h10v8H7z"/></svg>
                        </span>
                        <span>MeXCo Attend</span>
                    </a>
                </div>
            </section>

            <section class="od-panel">
                <div class="od-panel-head">
                    <h2>
                        <svg width="18" height="18" fill="none" stroke="#7C3AED" stroke-width="1.8" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                        Recent activity
                    </h2>
                    <a href="{{ route('mexco.admin.participants') }}">View all</a>
                </div>
                <ul class="od-activity">
                    @forelse($recentActivity as $item)
                        <li>
                            <div class="od-activity-dot" style="background:{{ $item['bg'] }};color:{{ $item['color'] }}">
                                @if($item['icon'] === 'user')
                                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 12a3 3 0 100-6 3 3 0 000 6z"/><path d="M6 19c0-2.5 2.7-4 6-4s6 1.5 6 4"/></svg>
                                @elseif($item['icon'] === 'calendar')
                                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg>
                                @else
                                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 9h18v10H3z"/><path d="M10 19v-4h4v4"/></svg>
                                @endif
                            </div>
                            <div>
                                <p class="od-activity-title">{{ $item['title'] }}</p>
                                <p class="od-activity-desc">{{ $item['desc'] }}</p>
                                <span class="od-activity-time">{{ $item['at']->diffForHumans() }}</span>
                            </div>
                        </li>
                    @empty
                        <li><p class="od-empty">No recent activity yet.</p></li>
                    @endforelse
                </ul>
            </section>
        </div>
    </div>
</div>
@endsection
