@extends('admin.layout')

@section('title', 'Participants')

@section('content')
<div class="pg-head">
    <div>
        <h1>Participants</h1>
        <p>Manage your participants, roles and access rights.</p>
    </div>
    <div class="pg-actions">
        <a href="{{ route('mexco.admin.participants.template') }}" class="btn-outline">Download CSV template</a>
        <a href="{{ route('mexco.admin.participants.export') }}" class="btn-outline">Export</a>
        <a href="{{ route('mexco.admin.participants.create') }}" class="btn-purple">+ Add Participant</a>
    </div>
</div>

<div class="card">
    <form method="GET" class="filter-bar">
        <input type="search" name="q" value="{{ $q }}" class="filter-search" placeholder="Search by name, email or phone…">
        <select name="role" class="filter-select">
            <option value="">All Roles</option>
            @foreach($roles as $role)
                <option value="{{ $role->name }}" @selected($roleFilter === $role->name)>{{ $role->name }}</option>
            @endforeach
        </select>
        <select name="status" class="filter-select">
            <option value="">All Status</option>
            <option value="verified" @selected($statusFilter === 'verified')>Verified</option>
            <option value="pending" @selected($statusFilter === 'pending')>Pending</option>
        </select>
        <button type="submit" class="filter-btn">
            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
            Filters
        </button>
    </form>

    <div class="tbl-wrap">
        <table class="data-tbl">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>UserID</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Registered On</th>
                    <th style="text-align:right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($people as $p)
                    @php
                        $role = strtoupper($p['role'] ?? 'VISITOR');
                        $color = $roleColors[$role] ?? '#6366F1';
                        $initials = collect(explode(' ', trim($p['name'])))->filter()->take(2)->map(fn($w) => strtoupper($w[0] ?? ''))->join('');
                        $avatarBg = ['#6366F1','#10B981','#F97316','#3B82F6','#8B5CF6','#EC4899'][crc32($p['email']) % 6];
                        $reg = $p['registered_at'] ?? null;
                    @endphp
                    <tr>
                        <td>
                            <div class="cell-user">
                                <div class="avatar-sm" style="background:{{ $avatarBg }}">{{ $initials ?: '?' }}</div>
                                <span class="cell-name">{{ $p['name'] }}</span>
                            </div>
                        </td>
                        <td><span class="cell-sub" style="font-family:ui-monospace,monospace;font-weight:700;letter-spacing:.04em">{{ $p['user_id'] ?? '-' }}</span></td>
                        <td><span class="cell-sub">{{ $p['email'] }}</span></td>
                        <td><span class="status-pill" style="background:{{ $color }}20;color:{{ $color }}">{{ $role }}</span></td>
                        <td>
                            @if($p['verified'])
                                <span class="status-pill status-verified">Verified</span>
                            @else
                                <span class="status-pill status-pending">Pending</span>
                            @endif
                        </td>
                        <td>
                            @if($reg)
                                <span class="cell-sub">{{ $reg->format('d M Y') }}<br>{{ $reg->format('h:i A') }}</span>
                            @else
                                <span class="cell-sub">-</span>
                            @endif
                        </td>
                        <td>
                            <div class="tbl-actions">
                                @if(!$p['verified'])
                                    <form method="POST" action="{{ route('mexco.admin.participants.verify', $p['slug']) }}" class="d-inline">
                                        @csrf
                                        <button type="submit" class="icon-btn" title="Verify">
                                            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 12l4 4 12-12"/></svg>
                                        </button>
                                    </form>
                                @endif
                                <a href="{{ route('mexco.admin.participants.edit', $p['slug']) }}" class="icon-btn" title="Edit">
                                    <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
                                </a>
                                <form method="POST" action="{{ route('mexco.admin.participants.destroy', $p['slug']) }}" class="d-inline" onsubmit="return confirm('Remove this participant?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="icon-btn danger" title="Delete">
                                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" style="text-align:center;padding:3rem;color:var(--muted)">No participants match your filters.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="tbl-foot">
        <span>Showing {{ $people->count() ? 1 : 0 }} to {{ $people->count() }} of {{ $totalCount }} entries</span>
        <div class="pager">
            <span class="on">1</span>
        </div>
    </div>
</div>

<div class="card mt-3 p-3 no-print">
    <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
        <div>
            <div class="cell-name" style="font-size:.9rem">Import participants</div>
            <span class="cell-sub">CSV columns: name, email, organization, ic, phone, role · Requires email + IC · Duplicates are skipped</span>
        </div>
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <a href="{{ route('mexco.admin.participants.template') }}" class="btn-outline">Download template</a>
            <form method="POST" action="{{ route('mexco.admin.participants.import') }}" enctype="multipart/form-data" class="d-inline">
                @csrf
                <label class="btn-purple mb-0" style="cursor:pointer">
                    Import CSV
                    <input type="file" name="csv_file" accept=".csv,text/csv" class="d-none" onchange="this.form.submit()">
                </label>
            </form>
        </div>
    </div>
</div>
@endsection
