@extends('layouts.app')

@section('titulo', 'Inventario · Stock Actual')

@section('contenido')

{{-- ========================================================= --}}
{{-- ENCABEZADO --}}
{{-- ========================================================= --}}

<div class="flex flex-wrap items-center justify-between gap-3 mb-5">

    <div>

        <nav class="text-xs text-slate-400 mb-1">
            Logística & 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>

            Stock Actual

        </h1>

        <p class="text-sm text-slate-400 mt-1">
            Consulta el stock disponible por producto y almacén.
        </p>

    </div>


    <div class="flex gap-2 text-sm">

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

            Lotes y Vencimientos

        </a>


        <a href="{{ route('inventario.ajustes') }}"
           class="rounded-lg bg-brand-600 px-4 py-2.5 font-semibold text-white hover:bg-brand-700">

            Ajustar stock

        </a>

    </div>

</div>


{{-- ========================================================= --}}
{{-- RESUMEN DEL INVENTARIO --}}
{{-- ========================================================= --}}

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-5">

    {{-- UNIDADES --}}
    <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

        <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
            Unidades en stock
        </p>

        <p class="mt-1 text-2xl font-extrabold text-slate-800">
            {{ number_format($unidades) }}
        </p>

        @if ($almacenId)
            <p class="text-xs text-slate-400 mt-1">
                Almacén seleccionado
            </p>
        @else
            <p class="text-xs text-slate-400 mt-1">
                Todos los almacenes
            </p>
        @endif

    </div>


    {{-- COSTO --}}
    <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

        <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
            Valor a costo
        </p>

        <p class="mt-1 text-2xl font-extrabold text-slate-800">
            S/ {{ number_format($valorCosto, 2) }}
        </p>

    </div>


    {{-- VENTA --}}
    <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

        <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">
            Valor a precio de venta
        </p>

        <p class="mt-1 text-2xl font-extrabold text-brand-600">
            S/ {{ number_format($valorVenta, 2) }}
        </p>

    </div>

</div>


{{-- ========================================================= --}}
{{-- FILTROS --}}
{{-- ========================================================= --}}

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

    <div class="grid grid-cols-1 md:grid-cols-4 gap-3">

        {{-- BUSCAR --}}
        <div class="relative md:col-span-2">

            <svg class="w-5 h-5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
                 stroke-width="2">

                <path stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>

            </svg>

            <input type="text"
                   name="q"
                   value="{{ $buscar }}"
                   placeholder="Buscar producto o código…"
                   class="w-full rounded-lg border border-slate-200 bg-slate-50 pl-10 pr-3 py-2 text-sm focus:bg-white focus:border-brand-500 focus:outline-none">

        </div>


        {{-- CATEGORÍA --}}
        <div>

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

                <option value="">
                    Todas las categorías
                </option>

                @foreach ($categorias as $cat)

                    <option value="{{ $cat->id }}"
                        @selected($categoriaId == $cat->id)>

                        {{ $cat->nombre }}

                    </option>

                @endforeach

            </select>

        </div>


        {{-- ALMACÉN --}}
        <div>

            <select name="almacen"
                    class="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 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 }}

                    </option>

                @endforeach

            </select>

        </div>

    </div>


    <div class="flex items-center justify-between mt-3">

        <div class="text-xs text-slate-400">

            @if ($almacenId)

                Mostrando stock del almacén seleccionado.

            @else

                Mostrando stock consolidado de todos los almacenes.

            @endif

        </div>


        <div class="flex gap-2">

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

                Limpiar

            </a>

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

                Filtrar

            </button>

        </div>

    </div>

</form>


{{-- ========================================================= --}}
{{-- TABLA DE INVENTARIO --}}
{{-- ========================================================= --}}

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

    <div class="px-5 py-4 border-b border-slate-100">

        <h2 class="font-semibold text-slate-800">
            Inventario actual
        </h2>

        <p class="text-xs text-slate-400 mt-1">
            Stock disponible por producto.
        </p>

    </div>


    <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 text-center">
                        Stock
                    </th>

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

                    <th class="px-5 py-3 font-semibold text-right">
                        Costo
                    </th>

                    <th class="px-5 py-3 font-semibold text-right">
                        Valor (venta)
                    </th>

                </tr>

            </thead>


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

                @forelse ($productos as $p)

                    @php

                        /*
                         * El stock real viene de stock_productos.
                         */
                        $stockActual = (int) ($p->stock_actual ?? 0);

                        /*
                         * El stock mínimo también viene
                         * de stock_productos.
                         */
                        $stockMinimo = (int) ($p->stock_minimo_actual ?? 0);

                        /*
                         * Valor total de venta del stock.
                         */
                        $valorProducto = $stockActual * (float) $p->precio_venta;

                    @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 ($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>


                        {{-- ================================================= --}}
                        {{-- STOCK --}}
                        {{-- ================================================= --}}

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

                            @if ($stockActual <= $stockMinimo)

                                <span class="inline-flex px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 text-xs font-semibold">

                                    {{ number_format($stockActual) }}

                                    <span class="ml-1">
                                        ⚠
                                    </span>

                                </span>

                            @else

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

                                    {{ number_format($stockActual) }}

                                </span>

                            @endif

                        </td>


                        {{-- ================================================= --}}
                        {{-- STOCK MÍNIMO --}}
                        {{-- ================================================= --}}

                        <td class="px-5 py-3 text-center text-slate-400">

                            {{ number_format($stockMinimo) }}

                        </td>


                        {{-- ================================================= --}}
                        {{-- COSTO --}}
                        {{-- ================================================= --}}

                        <td class="px-5 py-3 text-right text-slate-500">

                            S/
                            {{ number_format((float) $p->precio_compra, 2) }}

                        </td>


                        {{-- ================================================= --}}
                        {{-- VALOR DE VENTA --}}
                        {{-- ================================================= --}}

                        <td class="px-5 py-3 text-right font-semibold text-slate-700">

                            S/
                            {{ number_format($valorProducto, 2) }}

                        </td>

                    </tr>


                @empty

                    <tr>

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

                            No se encontraron productos.

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