@extends('plantilla.app')
@section('titulo', 'ALMACENES - Gestión de almacenes')
@section('contenido')

{{-- ALERTA --}}
@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

<div class="flex flex-col gap-3 md:flex-row md:items-end md: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">Almacenes</h1>
        <p class="mt-1 text-sm text-slate-500">Administra sedes, códigos y referencia de proyecto.</p>
    </div>

    <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
        {{-- Buscador funcional --}}
        <form method="GET" action="{{ route('almacenes') }}" class="relative">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
            <input
                type="text"
                name="q"
                value="{{ request('q') }}"
                placeholder="Buscar por nombre o código..."
                class="w-full sm:w-72 rounded-xl border border-black/10 bg-white/80 pl-9 pr-3 py-2 text-sm text-slate-700 shadow-inner shadow-indigo-50 outline-none focus:ring-4 focus:ring-indigo-100"
            >
        </form>

        {{-- Botón abre modal Agregar --}}
        <button type="button" id="btnOpenCreate"
           class="inline-flex items-center justify-center gap-2 rounded-xl bg-amber-500 px-4 py-2 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
        </button>
    </div>
</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="overflow-hidden rounded-xl border border-black/10 bg-white shadow-inner shadow-indigo-50">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 text-slate-600">
                    <tr class="border-b border-black/10">
                        <th class="px-4 py-3 text-left font-semibold">#</th>
                        <th class="px-4 py-3 text-left font-semibold">Nombre</th>
                        <th class="px-4 py-3 text-left font-semibold">Código</th>
                        <th class="px-4 py-3 text-center font-semibold">Proy ID</th>
                        <th class="px-4 py-3 text-right font-semibold">Acciones</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-black/5">
                    @forelse ($almacenes as $a)
                        <tr class="transition hover:bg-indigo-50/60 odd:bg-white even:bg-slate-50/40">
                            <td class="px-4 py-3 font-semibold text-slate-800">{{ $a->id }}</td>
                            <td class="px-4 py-3 text-slate-700">{{ $a->nombre }}</td>
                            <td class="px-4 py-3 text-slate-700">
                                <span class="inline-flex items-center rounded-full bg-slate-900/5 px-2.5 py-1 text-xs font-semibold text-slate-700 ring-1 ring-slate-200">
                                    {{ $a->codigo }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-center text-slate-700">
                                {{ $a->proy_id ?? '—' }}
                            </td>

                            <td class="px-4 py-3">
                                <div class="flex justify-end gap-2">

                                    {{-- Editar --}}
                                    <button
                                        type="button"
                                        class="btnOpenEdit inline-flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-600/10 text-indigo-700 ring-1 ring-indigo-100 transition hover:bg-indigo-600/15 hover:-translate-y-[1px] active:translate-y-0"
                                        title="Editar"
                                        data-id="{{ $a->id }}"
                                        data-nombre="{{ $a->nombre }}"
                                        data-codigo="{{ $a->codigo }}"
                                        data-proy_id="{{ $a->proy_id }}"
                                    >
                                        <i class="fa-regular fa-pen-to-square text-sm"></i>
                                    </button>

                                    @if(Auth::user()->tipo == 'ADMIN')
                                        {{-- Eliminar --}}{{-- Eliminar --}}
                                        <button
                                            type="button"
                                            class="btnOpenDelete inline-flex h-9 w-9 items-center justify-center rounded-xl bg-rose-600/10 text-rose-700 ring-1 ring-rose-100 transition hover:bg-rose-600/15 hover:-translate-y-[1px] active:translate-y-0"
                                            title="Eliminar"
                                            data-id="{{ $a->id }}"
                                            data-nombre="{{ $a->nombre }}"
                                        >
                                            <i class="fa-regular fa-trash-can text-sm"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-10 text-center text-slate-500">
                                <i class="fa-regular fa-folder-open mr-1"></i>
                                No hay almacenes registrados.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

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


{{-- ===================== MODAL CREAR ===================== --}}
<div id="modalCreate" class="fixed inset-0 z-[60] hidden">
    <div class="absolute inset-0 bg-black/35 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-16 w-[95%] max-w-xl rounded-2xl border border-white/60 bg-white/90 shadow-2xl shadow-indigo-200/40 backdrop-blur">
        <div class="flex items-center justify-between border-b border-black/5 px-5 py-4">
            <h3 class="text-base font-bold text-slate-900">
                <i class="fa-solid fa-plus mr-2 text-amber-600"></i> Agregar Almacén
            </h3>

            <button type="button" class="btnCloseCreate h-9 w-9 rounded-xl bg-slate-900/5 text-slate-700 transition hover:bg-slate-900/10">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <form method="POST" action="{{ route('almacenes.store') }}" class="p-5 space-y-4">
            @csrf

            <div class="space-y-4">
                <div>
                    <label class="text-xs font-semibold text-slate-600">Nombre</label>
                    <input name="nombre" required
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="text-xs font-semibold text-slate-600">Código</label>
                        <input name="codigo" required
                            class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                    </div>

                    <div>
                        <label class="text-xs font-semibold text-slate-600">Proy ID (opcional)</label>
                        <input name="proy_id" type="number" min="0"
                            class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                    </div>
                </div>
            </div>

            <div class="flex justify-end gap-2 pt-2">
                <button type="button" class="btnCloseCreate rounded-xl bg-slate-900/5 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-900/10">
                    Cancelar
                </button>
                <button type="submit" class="rounded-xl bg-amber-500 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-amber-200 hover:bg-amber-600">
                    Guardar
                </button>
            </div>
        </form>
    </div>
</div>


{{-- ===================== MODAL EDITAR ===================== --}}
<div id="modalEdit" class="fixed inset-0 z-[60] hidden">
    <div class="absolute inset-0 bg-black/35 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-16 w-[95%] max-w-xl rounded-2xl border border-white/60 bg-white/90 shadow-2xl shadow-indigo-200/40 backdrop-blur">
        <div class="flex items-center justify-between border-b border-black/5 px-5 py-4">
            <h3 class="text-base font-bold text-slate-900">
                <i class="fa-regular fa-pen-to-square mr-2 text-indigo-600"></i> Editar Almacén
            </h3>

            <button type="button" class="btnCloseEdit h-9 w-9 rounded-xl bg-slate-900/5 text-slate-700 transition hover:bg-slate-900/10">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <form id="formEdit" method="POST" action="#" class="p-5 space-y-4">
            @csrf
            @method('PUT')

            <div class="space-y-4">
                <div>
                    <label class="text-xs font-semibold text-slate-600">Nombre</label>
                    <input id="edit_nombre" name="nombre" required
                        class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="text-xs font-semibold text-slate-600">Código</label>
                        <input id="edit_codigo" name="codigo" required
                            class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                    </div>

                    <div>
                        <label class="text-xs font-semibold text-slate-600">Proy ID (opcional)</label>
                        <input id="edit_proy_id" name="proy_id" type="number" min="0"
                            class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                    </div>
                </div>
            </div>

            <div class="flex justify-end gap-2 pt-2">
                <button type="button" class="btnCloseEdit rounded-xl bg-slate-900/5 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-900/10">
                    Cancelar
                </button>
                <button type="submit" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-200 hover:bg-indigo-700">
                    Guardar cambios
                </button>
            </div>
        </form>
    </div>
</div>


{{-- ===================== MODAL ELIMINAR ===================== --}}
<div id="modalDelete" class="fixed inset-0 z-[60] hidden">
    <div class="absolute inset-0 bg-black/35 backdrop-blur-sm"></div>

    <div class="relative mx-auto mt-24 w-[95%] max-w-lg rounded-2xl border border-white/60 bg-white/90 shadow-2xl shadow-rose-200/40 backdrop-blur">
        <div class="flex items-center justify-between border-b border-black/5 px-5 py-4">
            <h3 class="text-base font-bold text-slate-900">
                <i class="fa-regular fa-trash-can mr-2 text-rose-600"></i> Eliminar almacén
            </h3>

            <button type="button" class="btnCloseDelete h-9 w-9 rounded-xl bg-slate-900/5 text-slate-700 transition hover:bg-slate-900/10">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <div class="p-5">
            <p class="text-sm text-slate-700">
                ¿Seguro que deseas eliminar: <span id="delete_name" class="font-semibold text-slate-900"></span>?
            </p>

            <form id="formDelete" method="POST" action="#" class="mt-5 flex justify-end gap-2">
                @csrf
                @method('DELETE')

                <button type="button" class="btnCloseDelete rounded-xl bg-slate-900/5 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-900/10">
                    Cancelar
                </button>
                <button type="submit" class="rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-rose-200 hover:bg-rose-700">
                    Eliminar
                </button>
            </form>
        </div>
    </div>
</div>


{{-- ===================== JS MODALES (sin cerrar por fuera ni ESC) ===================== --}}
<script>
  const modalCreate = document.getElementById('modalCreate');
  const modalEdit   = document.getElementById('modalEdit');
  const modalDelete = document.getElementById('modalDelete');

  const open = (m) => m.classList.remove('hidden');
  const close = (m) => m.classList.add('hidden');

  // Crear
  document.getElementById('btnOpenCreate')?.addEventListener('click', () => open(modalCreate));
  document.querySelectorAll('.btnCloseCreate').forEach(btn => btn.addEventListener('click', () => close(modalCreate)));

  // Editar
  const formEdit = document.getElementById('formEdit');
  document.querySelectorAll('.btnCloseEdit').forEach(btn => btn.addEventListener('click', () => close(modalEdit)));

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

      // Tu ruta PUT: /almacenes/{id}
      formEdit.action = `{{ url('/almacenes') }}/${id}`;

      document.getElementById('edit_nombre').value  = btn.dataset.nombre || '';
      document.getElementById('edit_codigo').value  = btn.dataset.codigo || '';
      document.getElementById('edit_proy_id').value = btn.dataset.proy_id || '';

      open(modalEdit);
    });
  });

  // Eliminar
  const formDelete = document.getElementById('formDelete');
  document.querySelectorAll('.btnCloseDelete').forEach(btn => btn.addEventListener('click', () => close(modalDelete)));

  document.querySelectorAll('.btnOpenDelete').forEach(btn => {
    btn.addEventListener('click', () => {
      const id = btn.dataset.id;
      const name = btn.dataset.nombre || '';

      // Tu ruta DELETE: /almacenes/{id}
      formDelete.action = `{{ url('/almacenes') }}/${id}`;
      document.getElementById('delete_name').textContent = name;

      open(modalDelete);
    });
  });

  // Bloquear ESC (no cerrar)
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') e.preventDefault();
  });
</script>

@endsection