@extends('layouts.app')
@section('titulo', 'Productos')

@section('contenido')

<div class="max-w-7xl mx-auto space-y-6">


{{-- HEADER --}}
<div class="flex flex-wrap items-center justify-between gap-3">

    <div>
        <nav class="text-xs text-slate-400 mb-1">
            Logística & Inventario / Catálogo Maestro
        </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="box"/>
            </span>

            Productos

        </h1>

    </div>


    <a href="{{ route('productos.create') }}"
       class="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-white text-sm font-semibold hover:bg-brand-700">

        <x-icon name="plus"/>

        Nuevo producto

    </a>


</div>




{{-- FILTROS --}}

<form method="GET"
class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">


<div class="relative lg: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">

<path stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
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 por nombre, código o principio activo"

class="w-full rounded-lg border border-slate-200 bg-slate-50 pl-10 px-4 py-2 text-sm"

/>

</div>




<select name="categoria"
class="rounded-lg border border-slate-200 px-3 py-2 text-sm">

<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 class="flex gap-2">


<select name="filtro"
class="flex-1 rounded-lg border border-slate-200 px-3 py-2 text-sm">


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


<option value="stock_bajo"
@selected($filtro=='stock_bajo')>

Stock bajo

</option>


<option value="por_vencer"
@selected($filtro=='por_vencer')>

Por vencer

</option>


<option value="vencido"
@selected($filtro=='vencido')>

Vencidos

</option>


</select>



<button
class="bg-slate-800 text-white rounded-lg px-4">

Filtrar

</button>


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


<tr>

<th class="px-5 py-3 text-left">
Producto
</th>


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


<th class="px-5 py-3 text-right">
Precio
</th>


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


<th class="px-5 py-3 text-center">
Vencimiento
</th>


<th class="px-5 py-3 text-right">
Acciones
</th>


</tr>


</thead>





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


@forelse($productos as $p)


@php


// STOCK TOTAL

$stockTotal = $p->stocks->sum('stock');


// STOCK MINIMO

$stockMinimo = $p->stocks->sum('stock_minimo');



// AGRUPAR POR ALMACEN

$stocksAlmacen = $p->stocks
->groupBy('almacen_id')
->map(function($items){

return [

'nombre'=>$items->first()?->almacen?->nombre ?? 'Sin almacén',

'cantidad'=>$items->sum('stock')

];

});



// FECHA MAS CERCANA

$proximoVencimiento = $p->stocks

->whereNotNull('fecha_vencimiento')

->sortBy('fecha_vencimiento')

->first();


@endphp





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


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


<div class="font-semibold text-slate-700 flex gap-2">


{{ $p->nombre }}


@if($p->requiere_receta)

<span class="text-[10px] bg-red-50 text-red-600 px-2 rounded">

Rx

</span>

@endif


</div>



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

{{ $p->principio_activo }}

@if($p->concentracion)

· {{ $p->concentracion }}

@endif

</div>


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

Código:
{{ $p->codigo_barras }}

</div>



</td>





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


{{ $p->categoria?->nombre ?? '-' }}


</td>





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


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


</td>







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



@if($stockTotal <= $stockMinimo)


<span class="bg-red-50 text-red-600 px-2 py-1 rounded-full text-xs font-bold">

{{ $stockTotal }} ⚠

</span>


@else


<span class="bg-slate-100 px-2 py-1 rounded-full text-xs">

{{ $stockTotal }}

</span>


@endif





<div class="mt-2 space-y-1">


@foreach($stocksAlmacen as $almacen)


<div class="flex justify-between text-xs text-slate-500">


<span>

{{ $almacen['nombre'] }}

</span>


<strong>

{{ $almacen['cantidad'] }}

</strong>


</div>


@endforeach


</div>


</td>








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


@if($proximoVencimiento)


@php

$dias = now()
->startOfDay()
->diffInDays(
$proximoVencimiento->fecha_vencimiento,
false
);

@endphp




@if($dias < 0)


<span class="bg-red-100 text-red-700 px-2 py-1 rounded text-xs font-bold">

Vencido

</span>



@elseif($dias <=30)


<span class="bg-red-50 text-red-600 px-2 py-1 rounded text-xs font-bold">

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

</span>



@elseif($dias <=60)


<span class="bg-orange-50 text-orange-600 px-2 py-1 rounded text-xs">

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

</span>



@else


<span class="text-xs text-slate-500">

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

</span>



@endif



@else


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


@endif



</td>








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


<div class="flex justify-end gap-2">


{{-- EDITAR PRODUCTO --}}

<a href="{{ route('productos.edit',$p) }}"
   class="p-2 rounded-lg text-slate-400 hover:bg-brand-50 hover:text-brand-600"
   title="Editar producto">

    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/>
    </svg>

</a>





{{-- STOCK --}}

<a href="{{ route('stock.producto',$p) }}"
   class="p-2 rounded-lg text-slate-400 hover:bg-green-50 hover:text-green-600"
   title="Gestionar stock">

    <svg xmlns="http://www.w3.org/2000/svg"
         class="w-5 h-5"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
         stroke-width="2">
        <path stroke-linecap="round"
              stroke-linejoin="round"
              d="M20 7L12 3 4 7m16 0v10l-8 4m8-14-8 4m0 10-8-4V7m8 14V11M4 7l8 4"/>
    </svg>

</a>



</div>


</td>



</tr>



@empty


<tr>

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

No existen productos.

</td>

</tr>


@endforelse



</tbody>



</table>


</div>





@if($productos->hasPages())

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

{{ $productos->links() }}

</div>

@endif



</div>


</div>


@endsection