@extends('layouts.dashboard')

@section('title', __('Asistentes y check-in'))

@section('content')
    @include('dashboard.partials.bootstrap-table-assets')

    @php
        /** @var array<string,mixed> $overview */
        $ov = $overview ?? [];
        $currency = $ov['currency'] ?? 'USD';
        $money = static function (float $n) use ($currency): string {
            return '$'.number_format($n, 2).' '.$currency;
        };
    @endphp

    {{-- Markup para SweetAlert2 (tabs Asistentes / Pedidos) --}}
    <div id="rt-ev-overview-html-source" class="d-none" aria-hidden="true">
        @include('dashboard.events.partials.attendees-overview-tabs', [
            'event' => $event,
            'overview' => $ov,
            'money' => $money,
        ])
    </div>

    <div
        id="rt-ev-attendees-root"
        class="rt-ev-attendees"
        data-data-url="{{ route('dashboard.events.attendees.data', $event) }}"
        data-scan-url="{{ route('dashboard.events.attendees.scan', $event) }}"
        data-asistentes-base-url="{{ rtrim(route('dashboard.events.attendees.index', $event), '/') }}"
        data-csrf="{{ csrf_token() }}"
    >
        <div class="d-flex flex-wrap align-items-start justify-content-between rt-flex-gap-3 mb-3">
            <div>
                <nav class="rt-ev-att-breadcrumb small text-muted mb-2" aria-label="{{ __('Miga de pan') }}">
                    <a href="{{ route('dashboard.events.index') }}">{{ __('Eventos') }}</a>
                    <span class="mx-1">/</span>
                    <span class="text-dark font-weight-bold">{{ $event->title }}</span>
                </nav>
                <h1 class="h3 mb-1 text-gray-800 font-weight-bold">{{ __('Asistentes y check-in') }}</h1>
                <p class="text-muted small mb-0">
                    {{ __('Control de acceso y listado. Usa «Ver más detalles» para resumen de entradas y pedidos.') }}
                </p>
            </div>
            <div class="d-flex flex-wrap align-items-center rt-flex-gap-2">
                <a href="{{ route('dashboard.events.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left mr-1" aria-hidden="true"></i>{{ __('Volver a eventos') }}
                </a>
                @can('update', $event)
                    <a href="{{ route('dashboard.events.edit', $event) }}" class="btn btn-sm rt-btn-cherry">
                        <i class="bi bi-pencil-square mr-1" aria-hidden="true"></i>{{ __('Editar evento') }}
                    </a>
                @endcan
                <button type="button" class="btn btn-sm btn-outline-primary" id="rt-ev-overview-btn">
                    <i class="bi bi-bar-chart mr-1" aria-hidden="true"></i>{{ __('Ver más detalles') }}
                </button>
            </div>
        </div>

        <div class="rt-ev-att-hero card border-0 shadow-sm mb-4">
            <div class="card-body p-4">
                <div class="row align-items-center">
                    <div class="col-lg-7 mb-3 mb-lg-0">
                        <div class="d-flex align-items-center rt-flex-gap-2 mb-2">
                            <span class="rt-ev-att-hero-kicker text-uppercase">{{ __('Evento') }}</span>
                            @switch($event->status)
                                @case(\App\Enums\EventStatus::Published)
                                    <span class="badge badge-success rt-badge-xs">{{ __('Publicado') }}</span>
                                    @break
                                @case(\App\Enums\EventStatus::Draft)
                                @case(\App\Enums\EventStatus::Pending)
                                    <span class="badge badge-warning text-dark rt-badge-xs">{{ __('Borrador / revisión') }}</span>
                                    @break
                                @case(\App\Enums\EventStatus::Cancelled)
                                    <span class="badge badge-danger rt-badge-xs">{{ __('Cancelado') }}</span>
                                    @break
                            @endswitch
                        </div>
                        <h2 class="h5 font-weight-bold text-dark mb-2">{{ $event->title }}</h2>
                        <div class="small text-muted">
                            @if ($event->venue)
                                <i class="bi bi-geo-alt-fill mr-1" aria-hidden="true"></i>{{ $event->venue->name }}
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="rt-ev-att-scan p-3 rounded-lg border bg-white">
                            <label for="rt-ev-att-scan-input" class="small font-weight-bold text-uppercase text-muted mb-2 d-block">
                                {{ __('Manual / lector USB') }}
                            </label>
                            <div class="input-group input-group-sm">
                                <input
                                    id="rt-ev-att-scan-input"
                                    type="text"
                                    class="form-control font-monospace"
                                    placeholder="{{ __('UUID, o texto con UUID dentro…') }}"
                                    autocomplete="off"
                                    autocorrect="off"
                                    spellcheck="false"
                                >
                                <div class="input-group-append">
                                    <button type="button" class="btn rt-btn-cherry" id="rt-ev-att-scan-btn">
                                        <i class="bi bi-check-lg mr-1" aria-hidden="true"></i>{{ __('Registrar ingreso') }}
                                    </button>
                                </div>
                            </div>
                            <p class="small text-muted mb-0 mt-2" id="rt-ev-att-scan-hint">
                                {{ __('Se detecta el UUID aunque venga pegado dentro de una URL.') }}
                            </p>
                            <div class="mt-3 pt-3 border-top">
                                <div class="d-flex flex-wrap justify-content-between align-items-center mb-2 rt-flex-gap-2">
                                    <span class="small font-weight-bold text-uppercase text-muted mb-0">{{ __('Cámara QR') }}</span>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="rt-ev-att-cam-toggle" aria-pressed="false">
                                        <i class="bi bi-camera-video mr-1" aria-hidden="true"></i><span id="rt-ev-att-cam-toggle-label">{{ __('Activar cámara') }}</span>
                                    </button>
                                </div>
                                <div id="rt-ev-qr-reader" class="rt-ev-qr-reader mx-auto rounded-lg bg-dark d-none"></div>
                                <p class="small text-muted mb-0 mt-2" id="rt-ev-att-cam-hint">
                                    {{ __('Al leer el código se registra el ingreso (o aviso si ya había entrado). Requiere HTTPS o localhost.') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-6 col-xl-3 mb-3">
                <div class="card border-0 shadow-sm h-100 rt-ev-att-stat">
                    <div class="card-body py-3">
                        <div class="text-xs font-weight-bold text-uppercase text-muted mb-1">{{ __('Entradas vendidas') }}</div>
                        <div class="h4 mb-0 font-weight-bold text-dark" id="rt-ev-stat-total">—</div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-xl-3 mb-3">
                <div class="card border-0 shadow-sm h-100 rt-ev-att-stat rt-ev-att-stat--ok">
                    <div class="card-body py-3">
                        <div class="text-xs font-weight-bold text-uppercase text-muted mb-1">{{ __('Check-in hecho') }}</div>
                        <div class="h4 mb-0 font-weight-bold text-success" id="rt-ev-stat-in">—</div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-xl-3 mb-3">
                <div class="card border-0 shadow-sm h-100 rt-ev-att-stat rt-ev-att-stat--pend">
                    <div class="card-body py-3">
                        <div class="text-xs font-weight-bold text-uppercase text-muted mb-1">{{ __('Pendientes') }}</div>
                        <div class="h4 mb-0 font-weight-bold text-warning" id="rt-ev-stat-pend">—</div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-xl-3 mb-3">
                <div class="card border-0 shadow-sm h-100 rt-ev-att-stat rt-ev-att-stat--rate">
                    <div class="card-body py-3">
                        <div class="text-xs font-weight-bold text-uppercase text-muted mb-1">{{ __('Ratio ingreso') }}</div>
                        <div class="h4 mb-0 font-weight-bold text-primary" id="rt-ev-stat-rate">—</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0 mb-0">
            <div class="card-header bg-white border-bottom py-3 d-flex flex-wrap align-items-center justify-content-between">
                <div>
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Listado de asistentes') }}</h6>
                    <span class="small text-muted">{{ __('Exporta a Excel o CSV desde la barra de la tabla.') }}</span>
                </div>
                <span class="badge badge-light border text-muted font-weight-normal" id="rt-ev-att-loaded-at"></span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive rt-ev-att-table-wrap">
                    <table id="rt-ev-attendees-table" class="table table-hover align-middle mb-0"></table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('js/dashboard-event-attendees.js') }}?v=13"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof window.rtInitEventAttendees === 'function') {
                window.rtInitEventAttendees();
            }
        });
    </script>
@endpush
