@extends('layouts.client')

@section('title', 'Mis Reservas')

@php
    $usuario = [
        'nombre' => 'Cristian',
        'avatar' => 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=200&auto=format&fit=crop'
    ];

    $reservas = [
        [
            'id' => 'RES-9921',
            'evento' => 'Almuerzo Ejecutivo',
            'fecha' => date('Y-m-d'),
            'hora' => '13:30',
            'zona' => 'Terraza Principal',
            'personas' => 4,
            'estado' => 'en_curso',
            'total' => 420.50,
            'pagado' => 100.00,
            'pendiente' => 320.50,
            'img' => 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=600',
            'items' => [
                ['cant' => 1, 'plato' => 'Ronda Marina', 'precio' => 120.00],
                ['cant' => 4, 'plato' => 'Pisco Sour Catedral', 'precio' => 100.00],
                ['cant' => 2, 'plato' => 'Lomo Saltado', 'precio' => 110.00],
            ]
        ],
        [
            'id' => 'RES-8842',
            'evento' => 'Cena Romántica',
            'fecha' => '2026-02-14',
            'hora' => '20:00',
            'zona' => 'Salón Privado',
            'personas' => 2,
            'estado' => 'confirmada',
            'total' => 150.00,
            'pagado' => 150.00,
            'pendiente' => 0.00,
            'img' => 'https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?q=80&w=600',
            'items' => [
                ['cant' => 1, 'plato' => 'Reserva Mesa VIP', 'precio' => 150.00]
            ]
        ],
        [
            'id' => 'RES-7710',
            'evento' => 'Cumpleaños',
            'fecha' => '2025-12-20',
            'hora' => '19:00',
            'zona' => 'Box Lounge',
            'personas' => 10,
            'estado' => 'finalizada',
            'total' => 1250.00,
            'pagado' => 1250.00,
            'pendiente' => 0.00,
            'img' => 'https://images.unsplash.com/photo-1466978913421-dad938661248?q=80&w=600',
            'items' => []
        ]
    ];
@endphp

@section('client_content')

<div class="orders-wrapper pb-20 fade-in">

    {{-- HEADER TIPO APP BANCARIA --}}
    <div class="bg-white border-b border-slate-200 sticky top-0 z-30 px-4 md:px-8 h-20 flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-4">
            <a href="{{ route('client.menu') }}" class="p-2 rounded-full hover:bg-slate-100 transition-colors text-slate-500">
                <i data-lucide="arrow-left" class="w-6 h-6"></i>
            </a>
            <h1 class="text-xl font-bold text-slate-800 tracking-tight">Mis Reservas</h1>
        </div>
        <div class="flex items-center gap-4">
            <div class="hidden md:flex relative">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                <input type="text" id="searchInput" onkeyup="filterSearch()" placeholder="Buscar reserva..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-brand-blue w-64 transition-all">
            </div>
            <a href="{{ route('client.reservations') }}" class="hidden sm:flex items-center gap-2 px-5 py-2.5 bg-slate-900 text-white rounded-full text-xs font-bold uppercase tracking-wider hover:bg-slate-800 transition-all shadow-lg hover:-translate-y-0.5">
                <i data-lucide="plus" class="w-4 h-4"></i> Nueva
            </a>
            <img src="{{ $usuario['avatar'] }}" class="w-10 h-10 rounded-full border-2 border-white shadow-md cursor-pointer hover:ring-2 hover:ring-brand-blue transition-all">
        </div>
    </div>

    {{-- CONTENEDOR PRINCIPAL --}}
    <main class="max-w-5xl mx-auto px-4 sm:px-6 py-8">

        {{-- RESUMEN SUPERIOR --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
            <div class="bg-brand-blue rounded-2xl p-6 text-white shadow-lg shadow-blue-500/20 relative overflow-hidden">
                <div class="relative z-10">
                    <p class="text-blue-100 text-xs font-bold uppercase tracking-wider mb-1">Total Gastado</p>
                    <h3 class="text-3xl font-black">S/ 1,820.50</h3>
                </div>
                <i data-lucide="trending-up" class="absolute right-4 bottom-4 w-16 h-16 text-white opacity-10"></i>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 flex flex-col justify-center">
                <p class="text-slate-400 text-xs font-bold uppercase tracking-wider mb-1">Reservas Activas</p>
                <div class="flex items-baseline gap-2">
                    <h3 class="text-3xl font-black text-slate-800">2</h3>
                    <span class="text-xs font-bold text-green-600 bg-green-50 px-2 py-0.5 rounded-full">En curso</span>
                </div>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 flex flex-col justify-center">
                <p class="text-slate-400 text-xs font-bold uppercase tracking-wider mb-1">Puntos VIP</p>
                <div class="flex items-baseline gap-2">
                    <h3 class="text-3xl font-black text-slate-800">1,250</h3>
                    <span class="text-xs font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full">Nivel Gold</span>
                </div>
            </div>
        </div>

        {{-- TABS DE FILTRO --}}
        <div class="flex items-center gap-1 mb-6 bg-white p-1 rounded-xl shadow-sm border border-slate-200 w-fit">
            <button onclick="filterStatus('all')" class="filter-btn active" data-active="true">Todas</button>
            <button onclick="filterStatus('pendiente')" class="filter-btn" data-active="false">Por Pagar</button>
            <button onclick="filterStatus('finalizada')" class="filter-btn" data-active="false">Finalizadas</button>
        </div>

        {{-- LISTA DE RESERVAS --}}
        <div class="space-y-5" id="reservationsList">
            @foreach($reservas as $res)
                @php
                    $isPending = $res['pendiente'] > 0;
                    $isActive = $res['estado'] == 'en_curso';
                @endphp

                <div class="reservation-card group" 
                     data-status="{{ $isPending ? 'pendiente' : $res['estado'] }}" 
                     data-search="{{ strtolower($res['evento'] . ' ' . $res['id']) }}">
                    
                    {{-- CABECERA DE TARJETA --}}
                    <div class="p-6 flex flex-col md:flex-row gap-6 items-start">
                        
                        {{-- Imagen --}}
                        <div class="relative w-full md:w-48 h-32 rounded-xl overflow-hidden shrink-0">
                            <img src="{{ $res['img'] }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                            <div class="absolute top-2 left-2 bg-white/90 backdrop-blur px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider text-slate-800">
                                {{ $res['id'] }}
                            </div>
                            @if($isActive)
                                <div class="absolute bottom-2 right-2 flex items-center gap-1.5 bg-green-500 text-white px-2 py-1 rounded-full text-[10px] font-bold uppercase shadow-lg animate-pulse">
                                    <div class="w-2 h-2 bg-white rounded-full"></div> En Curso
                                </div>
                            @endif
                        </div>

                        {{-- Info Principal --}}
                        <div class="flex-1 w-full">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-xl font-bold text-slate-900 group-hover:text-brand-blue transition-colors">{{ $res['evento'] }}</h3>
                                    <p class="text-sm text-slate-500 flex items-center gap-2 mt-1">
                                        <i data-lucide="calendar" class="w-4 h-4"></i> {{ date('d M, Y', strtotime($res['fecha'])) }} • {{ $res['hora'] }}
                                    </p>
                                </div>
                                <div class="relative">
                                    <button class="p-2 hover:bg-slate-100 rounded-full text-slate-400 hover:text-slate-600">
                                        <i data-lucide="more-horizontal" class="w-5 h-5"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="flex items-center gap-4 text-xs font-medium text-slate-600 mb-4">
                                <span class="bg-slate-100 px-2 py-1 rounded-md flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> {{ $res['zona'] }}</span>
                                <span class="bg-slate-100 px-2 py-1 rounded-md flex items-center gap-1"><i data-lucide="users" class="w-3 h-3"></i> {{ $res['personas'] }} Pers.</span>
                            </div>

                            {{-- Barra de Progreso Financiero --}}
                            <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden mb-2">
                                @php $porcentaje = ($res['total'] > 0) ? ($res['pagado'] / $res['total']) * 100 : 0; @endphp
                                <div class="h-full bg-brand-blue rounded-full" style="width: {{ $porcentaje }}%"></div>
                            </div>
                            <div class="flex justify-between text-xs mb-4">
                                <span class="text-slate-500 font-medium">Pagado: <strong>S/ {{ number_format($res['pagado'], 2) }}</strong></span>
                                @if($res['pendiente'] > 0)
                                    <span class="text-brand-red font-bold">Pendiente: S/ {{ number_format($res['pendiente'], 2) }}</span>
                                @else
                                    <span class="text-green-600 font-bold flex items-center gap-1"><i data-lucide="check-circle" class="w-3 h-3"></i> Completado</span>
                                @endif
                            </div>

                            {{-- Botones de Acción --}}
                            <div class="flex gap-3 mt-auto">
                                <button onclick="openQR('{{ $res['id'] }}', '{{ $res['evento'] }}')" class="flex-1 py-2.5 rounded-xl bg-slate-900 text-white text-xs font-bold uppercase tracking-wide hover:bg-slate-800 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="qr-code" class="w-4 h-4"></i> Ver QR
                                </button>
                                
                                @if($isPending)
                                    <button class="flex-1 py-2.5 rounded-xl bg-brand-blue text-white text-xs font-bold uppercase tracking-wide hover:bg-blue-700 transition-all flex items-center justify-center gap-2 shadow-lg shadow-blue-500/20">
                                        <i data-lucide="credit-card" class="w-4 h-4"></i> Pagar S/ {{ number_format($res['pendiente'], 2) }}
                                    </button>
                                @endif

                                @if(!empty($res['items']))
                                    <button onclick="toggleDetails('details-{{ $res['id'] }}', this)" class="px-3 py-2.5 rounded-xl border border-slate-200 text-slate-500 hover:text-slate-800 hover:border-slate-300 transition-all">
                                        <i data-lucide="chevron-down" class="w-5 h-5 transition-transform duration-300"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- DETALLE DESPLEGABLE --}}
                    @if(!empty($res['items']))
                        <div id="details-{{ $res['id'] }}" class="details-content">
                            <div class="p-6">
                                <h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Detalle del Consumo</h4>
                                <div class="space-y-3">
                                    @foreach($res['items'] as $item)
                                        <div class="flex justify-between text-sm text-slate-700 border-b border-slate-200 pb-2 last:border-0 last:pb-0">
                                            <div class="flex items-center gap-3">
                                                <span class="w-6 h-6 bg-white rounded-md flex items-center justify-center text-xs font-bold border border-slate-200">{{ $item['cant'] }}x</span>
                                                <span>{{ $item['plato'] }}</span>
                                            </div>
                                            <span class="font-bold">S/ {{ number_format($item['precio'], 2) }}</span>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="mt-6 pt-4 border-t border-slate-200 flex justify-between items-center">
                                    <span class="text-sm font-bold text-slate-500">Total Consumido</span>
                                    <span class="text-xl font-black text-slate-900">S/ {{ number_format($res['total'], 2) }}</span>
                                </div>
                                <div class="mt-4 text-right">
                                    <button class="text-xs font-bold text-brand-blue hover:underline flex items-center justify-end gap-1 ml-auto">
                                        <i data-lucide="download" class="w-4 h-4"></i> Descargar Recibo PDF
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endif

                </div>
            @endforeach
        </div>

        {{-- ESTADO VACÍO --}}
        <div id="emptyState" class="hidden text-center py-20">
            <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i data-lucide="search-x" class="w-10 h-10 text-slate-400"></i>
            </div>
            <h3 class="text-slate-800 font-bold text-lg">No encontramos reservas</h3>
            <p class="text-slate-500 text-sm">Intenta cambiar los filtros o realiza una nueva búsqueda.</p>
        </div>

    </main>

    {{-- MODAL QR --}}
    <div id="modalQR" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4">
        <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity opacity-0" id="qrBackdrop" onclick="closeQR()"></div>
        <div class="relative z-10 bg-white rounded-3xl p-8 shadow-2xl transform scale-95 opacity-0 transition-all duration-300 max-w-sm w-full text-center" id="qrContent">
            <div class="flex justify-end">
                <button onclick="closeQR()" class="p-2 bg-slate-100 rounded-full hover:bg-slate-200 transition-colors">
                    <i data-lucide="x" class="w-4 h-4 text-slate-600"></i>
                </button>
            </div>
            <div class="mt-[-20px]">
                <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4 text-brand-blue">
                    <i data-lucide="qr-code" class="w-8 h-8"></i>
                </div>
                <h3 class="text-xl font-bold text-slate-900" id="qrTitle">Acceso Evento</h3>
                <p class="text-xs text-slate-500 mb-6">Muestra este código en la entrada</p>
                
                <div class="bg-white p-4 border-2 border-dashed border-slate-200 rounded-xl inline-block relative overflow-hidden mx-auto">
                    <img id="qrImage" src="" class="w-48 h-48 object-contain">
                    <div class="absolute top-0 left-0 w-full h-1 bg-brand-blue shadow-[0_0_15px_rgba(37,99,235,0.6)] animate-scan"></div>
                </div>
                <p class="text-[10px] text-slate-400 mt-4 uppercase font-bold tracking-widest">ID: <span id="qrID"></span></p>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
    // 1. Lógica del Acordeón
    function toggleDetails(id, btn) {
        const content = document.getElementById(id);
        const icon = btn.querySelector('i');
        
        if (content.classList.contains('open')) {
            content.classList.remove('open');
            icon.style.transform = 'rotate(0deg)';
        } else {
            content.classList.add('open');
            icon.style.transform = 'rotate(180deg)';
        }
    }

    // 2. Lógica de Filtrado
    function filterStatus(status) {
        document.querySelectorAll('.filter-btn').forEach(btn => btn.dataset.active = "false");
        event.currentTarget.dataset.active = "true";

        const cards = document.querySelectorAll('.reservation-card');
        let visibleCount = 0;

        cards.forEach(card => {
            const cardStatus = card.dataset.status;
            if (status === 'all' || cardStatus === status) {
                card.style.display = 'block';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });
        checkEmpty(visibleCount);
    }

    // 3. Lógica de Búsqueda
    function filterSearch() {
        const query = document.getElementById('searchInput').value.toLowerCase();
        const cards = document.querySelectorAll('.reservation-card');
        let visibleCount = 0;

        cards.forEach(card => {
            const searchData = card.dataset.search; 
            if (searchData.includes(query)) {
                card.style.display = 'block';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });
        checkEmpty(visibleCount);
    }

    function checkEmpty(count) {
        const emptyState = document.getElementById('emptyState');
        if(count === 0) emptyState.classList.remove('hidden');
        else emptyState.classList.add('hidden');
    }

    // 4. Modal QR
    function openQR(id, titulo) {
        const modal = document.getElementById('modalQR');
        document.getElementById('qrTitle').innerText = titulo;
        document.getElementById('qrID').innerText = id;
        document.getElementById('qrImage').src = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${id}`;
        
        modal.classList.remove('hidden');
        setTimeout(() => {
            document.getElementById('qrBackdrop').classList.remove('opacity-0');
            document.getElementById('qrContent').classList.remove('scale-95', 'opacity-0');
            document.getElementById('qrContent').classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeQR() {
        const modal = document.getElementById('modalQR');
        document.getElementById('qrBackdrop').classList.add('opacity-0');
        document.getElementById('qrContent').classList.remove('scale-100', 'opacity-100');
        document.getElementById('qrContent').classList.add('scale-95', 'opacity-0');
        setTimeout(() => { modal.classList.add('hidden'); }, 300);
    }
</script>
@endpush