@extends('plantilla.app')
@section('titulo', '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

<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">Pedidos</h1>
        <p class="mt-1 text-sm text-slate-500">Administra pedidos, estados e impresión.</p>
    </div>

    <div class="flex justify-start xl:justify-end">
        <a href="{{ route('pedidos.create') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-amber-500 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-amber-200 transition hover:bg-amber-600 active:scale-[0.99]">
            <i class="fa-solid fa-plus"></i> Agregar pedido
        </a>
    </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('pedidos') }}" 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..." 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('pedidos') }}" 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">Desplazamiento vertical dentro de la tabla.</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%]"> {{-- Correlativo --}}
                <col class="w-[10%]"> {{-- Fecha --}}
                <col class="w-[10%]"> {{-- Usuario --}}
                <col class="w-[15%]"> {{-- Almacén --}}
                <col class="w-[10%]"> {{-- Total --}}
                <col class="w-[15%]"> {{-- Estado --}}
                <col class="w-[20%]"> {{-- Observación --}}
                <col class="w-[20%]">  {{-- Acciones --}}
            </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">Observación</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) {
                            'SOLICITADO' => 'bg-amber-100 text-amber-700 ring-amber-200',
                            'BORRADOR' => 'bg-slate-100 text-slate-700 ring-slate-200',
                            'ANULADO' => 'bg-rose-100 text-rose-700 ring-rose-200',
                            'APROBADO' => 'bg-sky-100 text-sky-700 ring-sky-200',
                            default => 'bg-amber-100 text-amber-700 ring-amber-200',
                        };
                    @endphp

                    <tr class="align-middle transition {{ $estado === 'ANULADO' ? 'bg-rose-100 text-rose-900 hover:bg-rose-200' : '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($pedido->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-slate-700">
                            <div class="line-clamp-2 break-words text-sm leading-5">
                                {{ $pedido->obs ?? '—' }}
                            </div>
                        </td>

                        <td class="px-4 py-3">
                            <div class="flex items-center justify-center gap-2">
                                @if ($estado !== 'ANULADO')
                                    <button
                                        type="button"
                                        class="btnVer inline-flex h-9 w-9 items-center justify-center rounded-xl bg-sky-50 text-sky-700 ring-1 ring-sky-200 transition hover:bg-sky-100"
                                        title="Ver productos"
                                        data-id="{{ $pedido->id }}"
                                        data-correlativo="{{ $pedido->correlativo }}">
                                        <i class="fa-regular fa-eye text-sm"></i>
                                    </button>
                                    <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="Imprimir PDF">
                                        <i class="fa-solid fa-print text-sm"></i>
                                    </button>
                                    @if($estado !== 'APROBADO')
                                        <a
                                            href="{{ route('pedidos.edit', $pedido->id) }}"
                                            class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 transition hover:bg-indigo-100"
                                            title="Editar">
                                            <i class="fa-regular fa-pen-to-square text-sm"></i>
                                        </a>

                                        <form method="POST" action="{{ route('pedidos.anular', $pedido->id) }}" class="formAccion inline">
                                            @csrf
                                            @method('PATCH')
                                            <button
                                                type="button"
                                                class="btnConfirmarAccion 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="Anular"
                                                data-title="Anular pedido"
                                                data-message="¿Deseas anular este pedido? Esta acción cambiará su estado."
                                                data-confirm-text="Sí, anular"
                                                data-confirm-class="bg-rose-600 hover:bg-rose-700">
                                                <i class="fa-regular fa-trash-can text-sm"></i>
                                            </button>
                                        </form>
                                    @endif
                                @else
                                    <form method="POST" action="{{ route('pedidos.reactivar', $pedido->id) }}" class="formAccion inline">
                                        @csrf
                                        @method('PATCH')
                                        <button
                                            type="button"
                                            class="btnConfirmarAccion 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="Reactivar"
                                            data-title="Reactivar pedido"
                                            data-message="¿Deseas reactivar este pedido? Volverá a estar disponible para gestión."
                                            data-confirm-text="Sí, reactivar"
                                            data-confirm-class="bg-emerald-600 hover:bg-emerald-700">
                                            <i class="fa-solid fa-rotate-left text-sm"></i>
                                        </button>
                                    </form>
                                @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 ver productos --}}
<div id="modalVer" class="fixed inset-0 z-[70] hidden">
    <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-12 w-[95%] max-w-4xl">
        <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-sky-50 to-indigo-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-regular fa-eye mr-2 text-sky-600"></i> Productos del pedido
                        </h3>
                        <p class="mt-1 text-sm text-slate-500">
                            Pedido N°
                            <span id="verCorrelativo" class="font-semibold text-slate-700"></span>
                        </p>
                    </div>

                    <button type="button" id="btnCloseVer" 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>

            <div class="p-6">
                <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
                    <div class="max-h-[420px] overflow-y-auto overflow-x-hidden">
                        <table class="w-full table-fixed text-sm">
                            <colgroup>
                                <col class="w-[18%]">
                                <col class="w-[50%]">
                                <col class="w-[12%]">
                                <col class="w-[20%]">
                            </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-xs font-bold uppercase tracking-wide">Código
                                    </th>
                                    <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide">
                                        Descripción</th>
                                    <th class="px-4 py-3 text-center text-xs font-bold uppercase tracking-wide">U.M.
                                    </th>
                                    <th class="px-4 py-3 text-right text-xs font-bold uppercase tracking-wide">
                                        Cantidad</th>
                                </tr>
                            </thead>

                            <tbody id="tbodyVerDetalle" class="divide-y divide-slate-100">
                                <tr>
                                    <td colspan="4" class="px-4 py-10 text-center text-slate-500">Cargando...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="button" id="btnFooterCloseVer" 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 transition hover:bg-slate-200">
                        <i class="fa-solid fa-xmark"></i> Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal confirmar acción --}}
<div id="modalConfirmacion" class="fixed inset-0 z-[80] 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 modalVer = document.getElementById('modalVer');
    const btnCloseVer = document.getElementById('btnCloseVer');
    const btnFooterCloseVer = document.getElementById('btnFooterCloseVer');
    const tbodyVerDetalle = document.getElementById('tbodyVerDetalle');
    const verCorrelativo = document.getElementById('verCorrelativo');
    const filtroAlmacen = document.getElementById('filtro_almacen_id');
    const formFiltros = document.getElementById('formFiltros');

    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;

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

            verCorrelativo.textContent = correlativo;
            tbodyVerDetalle.innerHTML = `
                    <tr>
                        <td colspan="4" class="px-4 py-10 text-center text-slate-500">Cargando...</td>
                    </tr>
                `;
            modalVer.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');

            try {
                const res = await fetch(`{{ url('/pedidos') }}/${id}/ver`);
                const data = await res.json();

                if (!data.length) {
                    tbodyVerDetalle.innerHTML = `
                            <tr>
                                <td colspan="4" class="px-4 py-10 text-center text-slate-500">No hay productos.</td>
                            </tr>
                        `;
                    return;
                }

                tbodyVerDetalle.innerHTML = data.map(item => `
                        <tr class="align-top odd:bg-white even:bg-slate-50/60">
                            <td class="px-4 py-3 font-semibold text-slate-800 break-words">${item.codigo ?? '—'}</td>
                            <td class="px-4 py-3 text-slate-700 break-words">${item.descripcion ?? '—'}</td>
                            <td class="px-4 py-3 text-center text-slate-700 break-words">${item.umedida ?? '—'}</td>
                            <td class="px-4 py-3 text-right text-slate-700 break-words">${item.cantidad ?? '—'}</td>
                        </tr>
                    `).join('');
            } catch (e) {
                tbodyVerDetalle.innerHTML = `
                        <tr>
                            <td colspan="4" class="px-4 py-10 text-center text-rose-600">No se pudo cargar el detalle.</td>
                        </tr>
                    `;
            }
        });
    });

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

    btnCloseVer?.addEventListener('click', cerrarModalVer);
    btnFooterCloseVer?.addEventListener('click', cerrarModalVer);

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

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

    document.querySelectorAll('.btnConfirmarAccion').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 (modalVer.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 (!modalVer.classList.contains('hidden')) {
                cerrarModalVer();
            }
        }
    });

</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