@extends('layouts.app')
@section('titulo', 'Lotes y Vencimientos')

@section('contenido')

<div class="flex flex-wrap items-center justify-between gap-3">
    <div>
        <nav class="text-xs text-slate-400 mb-1">
            Logística & Inventario / Inventario
        </nav>

        <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-3">
            <span class="w-10 h-10 rounded-xl bg-brand-100 text-brand-600 flex items-center justify-center">
                <x-icon name="layers" />
            </span>

            Lotes y Vencimientos
        </h1>

        <p class="text-sm text-slate-500">
            Control de lotes ordenado por fecha de vencimiento más próxima (FEFO).
        </p>
    </div>

    <div class="flex gap-2">

        <a href="{{ route('inventario.index', ['almacen' => $almacenId]) }}"
           class="rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50">
            ← Stock Actual
        </a>

        <a href="{{ route('inventario.ajustes', ['almacen' => $almacenId]) }}"
           class="rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">
            Ajustar stock
        </a>

    </div>
</div>


{{-- ========================================================= --}}
{{-- FILTRO POR ALMACÉN --}}
{{-- ========================================================= --}}

<form method="GET"
      action="{{ route('inventario.lotes') }}"
      class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">

    <div class="flex flex-wrap items-end gap-3">

        <div class="flex-1 min-w-[240px]">

            <label class="block text-xs font-semibold text-slate-500 mb-1">
                Almacén
            </label>

            <select name="almacen"
                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm focus:bg-white focus:border-brand-500 focus:outline-none">

                <option value="">
                    Todos los almacenes
                </option>

                @foreach ($almacenes as $almacen)

                    <option value="{{ $almacen->id }}"
                        @selected($almacenId == $almacen->id)>

                        {{ $almacen->nombre }}

                        @if ($almacen->tipo)
                            — {{ ucfirst($almacen->tipo) }}
                        @endif

                    </option>

                @endforeach

            </select>

        </div>


        <button type="submit"
                class="rounded-lg bg-slate-800 px-5 py-2.5 text-sm font-semibold text-white hover:bg-slate-900">

            Filtrar

        </button>


        @if ($almacenId)

            <a href="{{ route('inventario.lotes') }}"
               class="rounded-lg border border-slate-200 bg-white px-5 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50">

                Limpiar

            </a>

        @endif

    </div>

</form>


{{-- ========================================================= --}}
{{-- TABLA --}}
{{-- ========================================================= --}}

<div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">

    <div class="overflow-x-auto">

        <table class="w-full text-sm">

            <thead class="bg-slate-50 text-slate-500 text-left">

                <tr>

                    <th class="px-5 py-3 font-semibold">
                        Producto
                    </th>

                    <th class="px-5 py-3 font-semibold">
                        Categoría
                    </th>

                    <th class="px-5 py-3 font-semibold">
                        Almacén
                    </th>

                    <th class="px-5 py-3 font-semibold">
                        Lote
                    </th>

                    <th class="px-5 py-3 font-semibold text-center">
                        Stock
                    </th>

                    <th class="px-5 py-3 font-semibold">
                        Vencimiento
                    </th>

                    <th class="px-5 py-3 font-semibold text-center">
                        Estado
                    </th>

                </tr>

            </thead>


            <tbody class="divide-y divide-slate-100">

                @forelse ($productos as $p)

                    @php

                        /*
                         * fecha_vencimiento viene de DB::table(),
                         * por lo que normalmente es un string.
                         */

                        $fechaVencimiento = $p->fecha_vencimiento
                            ? \Carbon\Carbon::parse($p->fecha_vencimiento)
                            : null;

                        $dias = $fechaVencimiento
                            ? (int) $hoy->diffInDays($fechaVencimiento, false)
                            : null;

                    @endphp


                    <tr class="hover:bg-slate-50/60">


                        {{-- PRODUCTO --}}
                        <td class="px-5 py-3">

                            <div class="font-medium text-slate-700">
                                {{ $p->nombre }}
                            </div>

                            @if (!empty($p->codigo_barras))

                                <div class="text-xs text-slate-400 mt-0.5">
                                    Código: {{ $p->codigo_barras }}
                                </div>

                            @endif

                        </td>


                        {{-- CATEGORÍA --}}
                        <td class="px-5 py-3 text-slate-500">

                            {{ $p->categoria_nombre ?? '—' }}

                        </td>


                        {{-- ALMACÉN --}}
                        <td class="px-5 py-3">

                            @if (!empty($p->almacen_nombre))

                                <span class="inline-flex items-center rounded-lg bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">

                                    {{ $p->almacen_nombre }}

                                </span>

                            @else

                                <span class="text-slate-400">
                                    —
                                </span>

                            @endif

                        </td>


                        {{-- LOTE --}}
                        <td class="px-5 py-3 text-slate-500 font-mono">

                            {{ $p->lote ?: '—' }}

                        </td>


                        {{-- STOCK --}}
                        <td class="px-5 py-3 text-center">

                            @if ((int) $p->stock <= 0)

                                <span class="inline-flex px-2 py-0.5 rounded-full bg-red-50 text-red-700 text-xs font-semibold">

                                    0

                                </span>

                            @else

                                <span class="font-semibold text-slate-700">

                                    {{ number_format((int) $p->stock) }}

                                </span>

                            @endif

                        </td>


                        {{-- VENCIMIENTO --}}
                        <td class="px-5 py-3 text-slate-600">

                            @if ($fechaVencimiento)

                                {{ $fechaVencimiento->format('d/m/Y') }}

                            @else

                                —

                            @endif

                        </td>


                        {{-- ESTADO --}}
                        <td class="px-5 py-3 text-center">

                            @if ($dias === null)

                                <span class="inline-flex px-2 py-0.5 rounded-full bg-slate-100 text-slate-500 text-xs font-semibold">

                                    Sin fecha

                                </span>


                            @elseif ($dias < 0)

                                <span class="inline-flex px-2 py-0.5 rounded-full bg-red-50 text-red-700 text-xs font-semibold">

                                    Vencido hace {{ abs($dias) }} d

                                </span>


                            @elseif ($dias <= 30)

                                <span class="inline-flex px-2 py-0.5 rounded-full bg-red-50 text-red-600 text-xs font-semibold">

                                    Vence en {{ $dias }} d

                                </span>


                            @elseif ($dias <= 60)

                                <span class="inline-flex px-2 py-0.5 rounded-full bg-orange-50 text-orange-700 text-xs font-semibold">

                                    Vence en {{ $dias }} d

                                </span>


                            @else

                                <span class="inline-flex px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 text-xs font-semibold">

                                    Vigente

                                </span>

                            @endif

                        </td>

                    </tr>


                @empty

                    <tr>

                        <td colspan="7"
                            class="px-5 py-10 text-center text-slate-400">

                            <div class="flex flex-col items-center justify-center">

                                <div class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center mb-3">
                                    <x-icon name="layers" />
                                </div>

                                <p class="font-medium text-slate-500">
                                    No hay lotes registrados.
                                </p>

                                <p class="text-xs mt-1">
                                    No se encontraron productos con fecha de vencimiento y stock disponible.
                                </p>

                            </div>

                        </td>

                    </tr>

                @endforelse

            </tbody>

        </table>

    </div>


    {{-- ========================================================= --}}
    {{-- PAGINACIÓN --}}
    {{-- ========================================================= --}}

    @if ($productos->hasPages())

        <div class="px-5 py-3 border-t border-slate-100">

            {{ $productos->links() }}

        </div>

    @endif

</div>

@endsection