@extends('plantilla.app')
@section('titulo', 'ATENCIÓN DE PEDIDOS')
@section('contenido')

@if (session('success'))
    <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
        <i class="fa-regular fa-circle-check mr-1"></i> {{ session('success') }}
    </div>
@endif

@if (session('error'))
    <div class="mb-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
        <i class="fa-regular fa-circle-xmark mr-1"></i> {{ session('error') }}
    </div>
@endif

@if ($errors->any())
    <div class="mb-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
        <i class="fa-regular fa-circle-xmark mr-1"></i> {{ $errors->first() }}
    </div>
@endif

<div class="mb-5 flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
    <div>
        <p class="text-xs uppercase tracking-wider text-slate-500">Gestión</p>
        <h1 class="text-2xl font-bold text-slate-900">Atención de pedidos</h1>
        <p class="mt-1 text-sm text-slate-500">Aprueba pedidos, asigna vehículo y consulta el PDF.</p>
    </div>
</div>

<div class="mb-5 glass-card rounded-2xl border border-black/10 bg-white/80 p-4 shadow-xl shadow-indigo-100 backdrop-blur">
    <form method="GET" action="{{ route('atencion') }}" id="formFiltros" class="flex flex-col gap-4">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div class="grid flex-1 grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
                @if (strtoupper($user->tipo ?? '') === 'ADMIN')
                    <div>
                        <label for="filtro_almacen_id" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">
                            Almacén
                        </label>
                        <select
                            name="almacen_id"
                            id="filtro_almacen_id"
                            class="w-full rounded-xl border border-black/10 bg-white px-4 py-2.5 text-sm text-slate-700 shadow-inner shadow-indigo-50 outline-none focus:ring-4 focus:ring-indigo-100"
                        >
                            <option value="">Todos los almacenes</option>
                            @foreach ($almacenes as $almacen)
                                <option value="{{ $almacen->id }}" {{ (string) $almacenSeleccionado === (string) $almacen->id ? 'selected' : '' }}>
                                    {{ $almacen->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <div class="{{ strtoupper($user->tipo ?? '') === 'ADMIN' ? 'md:col-span-1 xl:col-span-2' : 'md:col-span-2 xl:col-span-3' }}">
                    <label for="q" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">
                        Buscar
                    </label>
                    <div class="relative">
                        <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400"></i>
                        <input
                            id="q"
                            type="text"
                            name="q"
                            value="{{ request('q') }}"
                            placeholder="Buscar por correlativo, estado, observación, usuario, almacén, vehículo..."
                            class="w-full rounded-xl border border-black/10 bg-white py-2.5 pl-9 pr-3 text-sm text-slate-700 shadow-inner shadow-indigo-50 outline-none focus:ring-4 focus:ring-indigo-100"
                        >
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-2 lg:justify-end">
                <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-indigo-200 transition hover:bg-indigo-700">
                    <i class="fa-solid fa-filter"></i> Filtrar
                </button>

                <a href="{{ route('atencion') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-slate-100 px-4 py-2.5 text-sm font-semibold text-slate-700 shadow transition hover:bg-slate-200">
                    <i class="fa-solid fa-rotate-left"></i> Limpiar
                </a>
            </div>
        </div>
    </form>
</div>

<div class="mt-5 glass-card rounded-2xl border border-black/10 bg-white/80 p-5 shadow-xl shadow-indigo-100 backdrop-blur">
    <div class="mb-4 flex items-center justify-between">
        <div>
            <h2 class="text-sm font-semibold text-slate-800">Listado de pedidos</h2>
            <p class="text-xs text-slate-500">Atiende pedidos asignando un vehículo o cancélalos.</p>
        </div>
    </div>

    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
        <div class="max-h-[540px] overflow-y-auto overflow-x-hidden">
            <table class="w-full table-fixed text-sm">
                <colgroup>
                    <col class="w-[10%]">
                    <col class="w-[10%]">
                    <col class="w-[14%]">
                    <col class="w-[14%]">
                    <col class="w-[12%]">
                    <col class="w-[14%]">
                    <col class="w-[12%]">
                    <col class="w-[14%]">
                </colgroup>

                <thead class="sticky top-0 z-10 bg-slate-50 text-slate-600 shadow-sm">
                    <tr class="border-b border-slate-200">
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wide">Correlativo</th>
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wide">Fecha</th>
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wide">Usuario</th>
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wide">Almacén</th>
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wide">Total</th>
                        <th class="px-4 py-3 text-center text-[11px] font-bold uppercase tracking-wide">Estado</th>
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wide">Vehículo</th>
                        <th class="px-4 py-3 text-center text-[11px] font-bold uppercase tracking-wide">Acciones</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100 bg-white">
                    @forelse ($pedidos as $pedido)
                        @php
                            $estado = strtoupper($pedido->estado);

                            $estadoClass = match ($estado) {
                                'APROBADO' => 'bg-emerald-100 text-emerald-700 ring-emerald-200',
                                'CANCELADO' => 'bg-rose-100 text-rose-700 ring-rose-200',
                                'SOLICITADO' => 'bg-amber-100 text-amber-700 ring-amber-200',
                                'BORRADOR' => 'bg-slate-100 text-slate-700 ring-slate-200',
                                default => 'bg-sky-100 text-sky-700 ring-sky-200',
                            };
                        @endphp

                        <tr class="align-middle transition {{ $estado === 'CANCELADO' ? 'bg-rose-50 hover:bg-rose-100' : 'hover:bg-slate-50' }}">
                            <td class="px-4 py-3 font-semibold text-slate-800 whitespace-nowrap">
                                {{ $pedido->correlativo }}
                            </td>

                            <td class="px-4 py-3 text-slate-700 text-xs whitespace-nowrap">
                                {{ \Carbon\Carbon::parse($pedido->fecha)->format('d/m/Y') }}
                            </td>

                            <td class="px-4 py-3 text-xs text-slate-700 break-words">
                                {{ $pedido->usuario->nombres ?? '—' }}
                            </td>

                            <td class="px-4 py-3 text-xs text-slate-700 break-words">
                                {{ $pedido->almacen->nombre ?? '—' }}
                            </td>

                            <td class="px-4 py-3 text-right font-semibold text-slate-800 whitespace-nowrap">
                                S/ {{ number_format((float) $pedido->total, 2) }}
                            </td>

                            <td class="px-4 py-3 text-center">
                                <div class="flex flex-col items-center gap-1">
                                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold ring-1 {{ $estadoClass }}">
                                        {{ $pedido->estado }}
                                    </span>

                                    @if($estado === 'APROBADO')
                                        <div class="text-[11px] leading-4 text-slate-500">
                                            <div class="font-medium text-slate-600">
                                                {{ $pedido->aprobadoPor->nombres ?? '—' }}
                                            </div>
                                            <div>
                                                {{ $pedido->aprobado_en ? \Carbon\Carbon::parse($pedido->aprobado_en)->format('d/m/Y H:i') : '—' }}
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </td>

                            <td class="px-4 py-3 text-xs text-slate-700 break-words">
                                @if($pedido->vehiculo)
                                    <div class="font-medium text-slate-800">{{ $pedido->vehiculo->vehiculo }}</div>
                                    <div class="text-[11px] text-slate-500">{{ $pedido->vehiculo->placa ?? '—' }}</div>
                                @else
                                    —
                                @endif
                            </td>

                            <td class="px-4 py-3">
                                <div class="flex items-center justify-center gap-2">
                                    {{-- PDF --}}
                                    <button
                                        type="button"
                                        class="btnPdf inline-flex h-9 w-9 items-center justify-center rounded-xl bg-slate-50 text-slate-700 ring-1 ring-slate-200 transition hover:bg-slate-100"
                                        data-url="{{ route('pedidos.pdf', $pedido->id) }}"
                                        title="Ver PDF"
                                    >
                                        <i class="fa-solid fa-print text-sm"></i>
                                    </button>

                                    @if ($estado !== 'APROBADO' && $estado !== 'CANCELADO')
                                        {{-- Atender --}}
                                        <button
                                            type="button"
                                            class="btnAtender inline-flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200 transition hover:bg-emerald-100"
                                            title="Atender pedido"
                                            data-id="{{ $pedido->id }}"
                                            data-correlativo="{{ $pedido->correlativo }}"
                                        >
                                            <i class="fa-solid fa-truck-fast text-sm"></i>
                                        </button>

                                        {{-- Cancelar --}}
                                        <form method="POST" action="{{ route('atencion.cancelar', $pedido->id) }}" class="formCancelar inline">
                                            @csrf
                                            @method('PATCH')

                                            <button
                                                type="button"
                                                class="btnConfirmarCancelar inline-flex h-9 w-9 items-center justify-center rounded-xl bg-rose-50 text-rose-700 ring-1 ring-rose-200 transition hover:bg-rose-100"
                                                title="Cancelar pedido"
                                                data-title="Cancelar pedido"
                                                data-message="¿Deseas cancelar este pedido? Esta acción cambiará su estado a CANCELADO."
                                                data-confirm-text="Sí, cancelar"
                                                data-confirm-class="bg-rose-600 hover:bg-rose-700"
                                            >
                                                <i class="fa-regular fa-circle-xmark text-sm"></i>
                                            </button>
                                        </form>
                                    @else
                                        <span class="inline-flex items-center rounded-xl bg-slate-100 px-3 py-2 text-xs font-semibold text-slate-500">
                                            Sin acciones
                                        </span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-10 text-center text-slate-500">
                                <i class="fa-regular fa-folder-open mr-1"></i>
                                No hay pedidos registrados.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if (method_exists($pedidos, 'links'))
        <div class="mt-4">
            {{ $pedidos->links() }}
        </div>
    @endif
</div>

{{-- Modal atender pedido --}}
<div id="modalAtender" class="fixed inset-0 z-[80] hidden">
    <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-20 w-[92%] max-w-lg">
        <div class="overflow-hidden rounded-3xl border border-white/60 bg-white shadow-2xl">
            <div class="border-b border-slate-200 bg-gradient-to-r from-emerald-50 to-sky-50 px-6 py-4">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h3 class="text-lg font-bold text-slate-900">
                            <i class="fa-solid fa-truck-fast mr-2 text-emerald-600"></i> Atender pedido
                        </h3>
                        <p class="mt-1 text-sm text-slate-500">
                            Pedido N°
                            <span id="atenderCorrelativo" class="font-semibold text-slate-700"></span>
                        </p>
                    </div>

                    <button type="button" id="btnCerrarModalAtender" class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-white text-slate-600 ring-1 ring-slate-200 transition hover:bg-slate-50">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
            </div>

            <form id="formAtender" method="POST" action="">
                @csrf
                @method('PATCH')

                <div class="p-6">
                    <div>
                        <label for="vehiculo_id" class="mb-2 block text-xs font-semibold uppercase tracking-wide text-slate-500">
                            Seleccionar vehículo
                        </label>

                        <select
                            name="vehiculo_id"
                            id="vehiculo_id"
                            class="w-full rounded-xl border border-black/10 bg-white px-4 py-3 text-sm text-slate-700 shadow-inner shadow-indigo-50 outline-none focus:ring-4 focus:ring-indigo-100"
                            required
                        >
                            <option value="">Seleccione un vehículo</option>
                            @foreach ($vehiculos as $vehiculo)
                                <option value="{{ $vehiculo->id }}">
                                    {{ $vehiculo->vehiculo }} | {{ $vehiculo->placa ?? 'Sin placa' }} | {{ $vehiculo->chofer ?? 'Sin chofer' }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mt-6 grid grid-cols-2 gap-3">
                        <button
                            type="button"
                            id="btnCancelarAtender"
                            class="inline-flex items-center justify-center rounded-xl bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200"
                        >
                            Cancelar
                        </button>

                        <button
                            type="submit"
                            class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-emerald-700"
                        >
                            Generar atención
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal confirmar cancelación --}}
<div id="modalConfirmacion" class="fixed inset-0 z-[90] hidden">
    <div class="absolute inset-0 bg-slate-900/55 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-24 w-[92%] max-w-md">
        <div class="rounded-3xl border border-white/60 bg-white p-6 shadow-2xl">
            <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-rose-50 text-rose-600">
                <i class="fa-solid fa-triangle-exclamation text-2xl"></i>
            </div>

            <div class="text-center">
                <h3 id="confirmTitle" class="text-lg font-bold text-slate-900">Confirmar acción</h3>
                <p id="confirmMessage" class="mt-2 text-sm leading-6 text-slate-500">
                    ¿Deseas continuar con esta acción?
                </p>
            </div>

            <div class="mt-6 grid grid-cols-2 gap-3">
                <button type="button" id="btnCancelarConfirmacion" class="inline-flex items-center justify-center rounded-xl bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200">
                    Cancelar
                </button>

                <button type="button" id="btnAceptarConfirmacion" class="inline-flex items-center justify-center rounded-xl bg-rose-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-rose-700">
                    Confirmar
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    const filtroAlmacen = document.getElementById('filtro_almacen_id');
    const formFiltros = document.getElementById('formFiltros');

    const modalAtender = document.getElementById('modalAtender');
    const formAtender = document.getElementById('formAtender');
    const atenderCorrelativo = document.getElementById('atenderCorrelativo');
    const btnCerrarModalAtender = document.getElementById('btnCerrarModalAtender');
    const btnCancelarAtender = document.getElementById('btnCancelarAtender');
    const vehiculoSelect = document.getElementById('vehiculo_id');

    const modalConfirmacion = document.getElementById('modalConfirmacion');
    const confirmTitle = document.getElementById('confirmTitle');
    const confirmMessage = document.getElementById('confirmMessage');
    const btnCancelarConfirmacion = document.getElementById('btnCancelarConfirmacion');
    const btnAceptarConfirmacion = document.getElementById('btnAceptarConfirmacion');

    let formPendiente = null;

    filtroAlmacen?.addEventListener('change', () => {
        formFiltros.submit();
    });

    document.querySelectorAll('.btnAtender').forEach(btn => {
        btn.addEventListener('click', () => {
            const pedidoId = btn.dataset.id;
            const correlativo = btn.dataset.correlativo;

            atenderCorrelativo.textContent = correlativo;
            formAtender.action = `{{ url('/atencion') }}/${pedidoId}/aprobar`;
            vehiculoSelect.value = '';

            modalAtender.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        });
    });

    function cerrarModalAtender() {
        modalAtender.classList.add('hidden');

        if (modalConfirmacion.classList.contains('hidden')) {
            document.body.classList.remove('overflow-hidden');
        }
    }

    btnCerrarModalAtender?.addEventListener('click', cerrarModalAtender);
    btnCancelarAtender?.addEventListener('click', cerrarModalAtender);

    modalAtender?.addEventListener('click', (e) => {
        if (e.target === modalAtender) {
            cerrarModalAtender();
        }
    });

    document.querySelectorAll('.btnConfirmarCancelar').forEach(btn => {
        btn.addEventListener('click', () => {
            formPendiente = btn.closest('form');

            confirmTitle.textContent = btn.dataset.title || 'Confirmar acción';
            confirmMessage.textContent = btn.dataset.message || '¿Deseas continuar?';
            btnAceptarConfirmacion.textContent = btn.dataset.confirmText || 'Confirmar';

            btnAceptarConfirmacion.className =
                'inline-flex items-center justify-center rounded-xl px-4 py-3 text-sm font-semibold text-white transition ' +
                (btn.dataset.confirmClass || 'bg-rose-600 hover:bg-rose-700');

            modalConfirmacion.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        });
    });

    function cerrarModalConfirmacion() {
        modalConfirmacion.classList.add('hidden');
        formPendiente = null;

        if (modalAtender.classList.contains('hidden')) {
            document.body.classList.remove('overflow-hidden');
        }
    }

    btnCancelarConfirmacion?.addEventListener('click', cerrarModalConfirmacion);

    btnAceptarConfirmacion?.addEventListener('click', () => {
        if (formPendiente) {
            formPendiente.submit();
        }
    });

    modalConfirmacion?.addEventListener('click', (e) => {
        if (e.target === modalConfirmacion) {
            cerrarModalConfirmacion();
        }
    });

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            if (!modalConfirmacion.classList.contains('hidden')) {
                cerrarModalConfirmacion();
                return;
            }

            if (!modalAtender.classList.contains('hidden')) {
                cerrarModalAtender();
            }
        }
    });
</script>

<script>
    document.querySelectorAll('.btnPdf').forEach(btn => {
        btn.addEventListener('click', async () => {
            const url = btn.dataset.url;

            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/pdf'
                    }
                });

                if (!response.ok) {
                    throw new Error('Error al generar PDF');
                }

                const blob = await response.blob();
                const blobUrl = window.URL.createObjectURL(blob);
                window.open(blobUrl, '_blank');
            } catch (e) {
                console.error(e);
                alert('No se pudo abrir el PDF.');
            }
        });
    });
</script>

@endsection