@extends('layouts.app')

@section('title', 'Admin - Registros de Campaña')
@section('content')

<div class="p-4 w-full">
    <div class="w-full mb-6 p-4 rounded-lg shadow-md bg-white dark:bg-gray-800">
        <div class="flex items-center justify-between gap-3 flex-wrap">
            <div>
                <h1 class="text-3xl font-bold dark:text-gray-400">Registros</h1>
                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    Campaña #{{ $campana->id }} — {{ $campana->nombre }}
                </p>
                <div class="flex gap-2 mr-4 mt-4 mb-4">
                    <a href="{{ route('admin.campanas') }}"
                        class="bg-sky-600 hover:bg-sky-700 text-xs text-white px-4 py-2 rounded text-sm">
                        Volver al listado
                    </a>
                </div>
            </div>

        </div>


        @if($ganador)
        <div class="mb-6 p-4 rounded-lg shadow-md bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-600">
            <div class="flex items-start justify-between flex-wrap gap-3">
                <div class="w-full">
                    <p class="text-xs font-semibold text-emerald-700 dark:text-emerald-300">GANADOR</p>

                    <p class="text-lg font-bold text-emerald-900 dark:text-emerald-200 mt-1">
                        #{{ $ganador->id }} — {{ $ganador->nombre }}
                    </p>

                    <p class="text-sm text-emerald-800/90 dark:text-emerald-200/80">
                        {{ $ganador->email }} • {{ $ganador->cel }} • Equipo: {{ $ganador->equipo }}
                        • Colegio: {{ $ganador->colegio }} • Grado: {{ $ganador->grado }}
                    </p>

                    <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                        <div class="bg-white/70 dark:bg-black/20 rounded p-3">
                            <p class="text-xs text-emerald-800/70 dark:text-emerald-300/70">Nacimiento</p>
                            <p class="text-sm font-semibold text-emerald-900 dark:text-emerald-200 mt-1">
                                {{ optional($ganador->fecha_nacimiento)->format('d/m/Y') }}
                                @if($ganador->fecha_nacimiento)
                                <span class="font-normal text-emerald-800/80 dark:text-emerald-200/80">
                                    ({{ $ganador->fecha_nacimiento->age }} años)
                                </span>
                                @endif
                            </p>
                        </div>

                        <div class="bg-white/70 dark:bg-black/20 rounded p-3">
                            <p class="text-xs text-emerald-800/70 dark:text-emerald-300/70">Registrado</p>
                            <p class="text-sm font-semibold text-emerald-900 dark:text-emerald-200 mt-1">
                                {{ $ganador->created_at->format('d/m/Y H:i') }}
                            </p>
                        </div>

                        <div class="bg-white/70 dark:bg-black/20 rounded p-3">
                            <p class="text-xs text-emerald-800/70 dark:text-emerald-300/70">Archivo</p>

                            @if($ganador->archivo)
                            <div class="mt-2 flex items-center gap-2">
                                <a target="_blank"
                                    href="{{ route('admin.campanas.registros.archivo.ver', [$campana->id, $ganador->id]) }}"
                                    class="bg-sky-600 hover:bg-sky-700 text-white px-2 py-1 rounded text-xs">
                                    Ver
                                </a>

                                <a href="{{ route('admin.campanas.registros.archivo.descargar', [$campana->id, $ganador->id]) }}"
                                    class="bg-emerald-600 hover:bg-emerald-700 text-white px-2 py-1 rounded text-xs">
                                    Descargar
                                </a>
                            </div>

                            @if($ganador->hash_archivo)
                            <p class="mt-2 text-[11px] break-all text-emerald-800/70 dark:text-emerald-300/70">
                                Hash: {{ $ganador->hash_archivo }}
                            </p>
                            @endif
                            @else
                            <span class="mt-2 inline-block text-xs bg-gray-500 text-white px-2 py-1 rounded">
                                Sin archivo
                            </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif


        <form method="GET" action="{{ route('admin.campanas.registros', $campana->id) }}" class="mt-4">
            <div class="flex flex-wrap gap-2 items-center">
                <input type="text" name="nombre" placeholder="Buscar por nombre" value="{{ request('nombre') }}" class="border border-gray-300 dark:border-gray-600 p-2 text-sm rounded-md dark:bg-gray-700 dark:text-white
                              focus:ring-2 focus:ring-blue-900 dark:focus:ring-blue-400" />

                <input type="text" name="email" placeholder="Buscar por email" value="{{ request('email') }}" class="border border-gray-300 dark:border-gray-600 p-2 text-sm rounded-md dark:bg-gray-700 dark:text-white
                              focus:ring-2 focus:ring-blue-900 dark:focus:ring-blue-400" />

                <div class="flex gap-2">
                    <button type="submit" class="bg-sky-600 hover:bg-sky-700 text-white px-3 py-2 text-sm rounded">
                        Filtrar
                    </button>

                    <a href="{{ route('admin.campanas.registros', $campana->id) }}"
                        class="bg-gray-500 hover:bg-gray-600 text-white px-3 py-2 text-sm rounded">
                        Ver todo
                    </a>

                    @if(!$campana->id_registro)
                    <button type="button" id="btnSortear"
                        data-random-url="{{ route('admin.campanas.sorteo.random', $campana->id) }}"
                        data-aceptar-url="{{ route('admin.campanas.sorteo.aceptar', $campana->id) }}"
                        class="bg-amber-600 hover:bg-amber-700 text-white px-3 py-2 text-sm rounded">
                        Sortear
                    </button>
                    @endif

                </div>

            </div>
        </form>
    </div>

    @include('../../validaciones')

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
        <div class="overflow-x-auto">
            <table class="w-full border-collapse">
                <thead>
                    <tr class="bg-gradient-to-r from-cyan-600 to-cyan-700 text-cyan-200 text-left">
                        <th class="p-3">ID</th>
                        <th class="p-3">Nombre</th>
                        <th class="p-3">Nacimiento</th>
                        <th class="p-3">Cel</th>
                        <th class="p-3">Email</th>
                        <th class="p-3">Archivo</th>
                        <th class="p-3">Creado</th>
                        <th class="p-3 text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($registros as $r)
                    <tr
                        class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition">
                        <td class="p-3 dark:text-gray-400">#{{ $r->id }}</td>
                        <td class="p-3 dark:text-gray-400">{{ $r->nombre }}</td>
                        <td class="p-3 dark:text-gray-400">
                            {{ optional($r->fecha_nacimiento)->format('d/m/Y') }}
                        </td>
                        <td class="p-3 dark:text-gray-400">{{ $r->cel }}</td>
                        <td class="p-3 dark:text-gray-400">{{ $r->email }}</td>
                        <td class="p-3 dark:text-gray-400">
                            @if($r->archivo)
                            <div class="flex items-center gap-2">
                                <a target="_blank"
                                    href="{{ route('admin.campanas.registros.archivo.ver', [$campana->id, $r->id]) }}"
                                    class="bg-sky-600 hover:bg-sky-700 text-white px-2 py-1 rounded text-xs">
                                    Ver
                                </a>

                                <a href="{{ route('admin.campanas.registros.archivo.descargar', [$campana->id, $r->id]) }}"
                                    class="bg-emerald-600 hover:bg-emerald-700 text-white px-2 py-1 rounded text-xs">
                                    Descargar
                                </a>
                            </div>
                            @else
                            <span class="text-xs bg-gray-500 text-white px-2 py-1 rounded">Sin archivo</span>
                            @endif
                        </td>

                        <td class="p-3 dark:text-gray-400">{{ $r->created_at->format('d/m/Y H:i') }}</td>
                        <td class="p-3 text-center">
                            @if((int)$campana->id_registro === (int)$r->id)
                            <span class="text-xs bg-emerald-600 text-white px-2 py-1 rounded">Ganador</span>
                            @else
                            <form action="{{ route('admin.campanas.registros.destroy', [$campana->id, $r->id]) }}"
                                method="POST" class="inline deleteRegistroForm">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                    class="text-red-600 hover:text-red-800 dark:text-red-700 mx-2 deleteRegistroButton"
                                    style="background:none;border:none;cursor:pointer;">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                            @endif
                        </td>


                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="p-4 text-center text-gray-500 dark:text-gray-300">
                            No hay registros para esta campaña.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            {{ $registros->links() }}
        </div>
    </div>
</div>

@vite('resources/js/admin/registros.js')

@endsection