@extends('layouts.admin')

@section('title', 'Resumen de inventario')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Resumen de inventario</h1>
        <p class="text-secondary mb-0">Stock disponible de todos los productos, en cajas o unidades según cada uno</p>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-6 col-xl-3">
        <div class="card metric h-100"><div class="card-body">
            <span class="text-secondary">Productos</span>
            <div class="fs-3 fw-bold mt-2">{{ $totals['products'] }}</div>
            <div class="small text-secondary">En este resumen</div>
        </div></div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="card metric h-100"><div class="card-body">
            <span class="text-secondary">Valor en bodega</span>
            <div class="fs-3 fw-bold mt-2">${{ number_format($totals['value'], 2) }}</div>
            <div class="small text-secondary">Costo de stock físico</div>
        </div></div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="card metric h-100"><div class="card-body">
            <span class="text-secondary">Stock saludable</span>
            <div class="fs-3 fw-bold mt-2 text-success">{{ $totals['ok'] }}</div>
            <div class="small text-secondary">Sobre el mínimo</div>
        </div></div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="card metric h-100"><div class="card-body">
            <span class="text-secondary">Atención</span>
            <div class="fs-3 fw-bold mt-2 text-warning">{{ $totals['low'] + $totals['empty'] }}</div>
            <div class="small text-secondary">{{ $totals['low'] }} bajo mínimo · {{ $totals['empty'] }} sin stock</div>
        </div></div>
    </div>
</div>

<form class="card p-3 mb-3" method="GET" action="{{ route('inventory.summary') }}">
    <div class="row g-2 align-items-end">
        <div class="col-md-6">
            <label class="form-label">Buscar</label>
            <input class="form-control" type="search" name="q" value="{{ $q }}" placeholder="SKU, nombre, marca o categoría…">
        </div>
        <div class="col-md-3">
            <label class="form-label">Estado de stock</label>
            <select class="form-select" name="stock">
                <option value="all" @selected($filter === 'all')>Todos</option>
                <option value="ok" @selected($filter === 'ok')>Saludable</option>
                <option value="low" @selected($filter === 'low')>Bajo mínimo</option>
                <option value="empty" @selected($filter === 'empty')>Sin disponible</option>
            </select>
        </div>
        <div class="col-md-3 d-flex gap-2">
            <button class="btn btn-outline-primary flex-grow-1" type="submit"><i class="bi bi-search"></i> Filtrar</button>
            @if($q !== '' || $filter !== 'all')
                <a class="btn btn-outline-secondary" href="{{ route('inventory.summary') }}">Limpiar</a>
            @endif
        </div>
    </div>
</form>

<div class="card">
    <div class="table-responsive">
        <table class="table align-middle mb-0 inv-summary-table">
            <thead>
                <tr>
                    <th style="width:52px"></th>
                    <th>Producto</th>
                    <th>Empaque</th>
                    <th class="text-end">Disponible</th>
                    <th class="text-end">Físico</th>
                    <th class="text-end">Reservado</th>
                    <th class="text-end">Mínimo</th>
                    <th class="text-end">Valor</th>
                    <th>Estado</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($rows as $row)
                    @php
                        $p = $row['product'];
                        $levelClass = match ($row['level']) {
                            'ok' => 'success',
                            'low' => 'warning',
                            default => 'danger',
                        };
                        $levelLabel = match ($row['level']) {
                            'ok' => 'Saludable',
                            'low' => 'Bajo mínimo',
                            default => 'Sin stock',
                        };
                    @endphp
                    <tr>
                        <td>
                            @if($p->photoUrl())
                                <img class="inv-summary-thumb" src="{{ $p->photoUrl() }}" alt="">
                            @else
                                <span class="inv-summary-thumb inv-summary-thumb--empty"><i class="bi bi-image"></i></span>
                            @endif
                        </td>
                        <td>
                            <div class="fw-semibold">{{ $p->name }}</div>
                            <div class="small text-secondary">
                                <span class="font-monospace">{{ $p->sku }}</span>
                                @if($p->brand) · {{ $p->brand->name }} @endif
                                @if($p->category) · {{ $p->category->name }} @endif
                            </div>
                        </td>
                        <td>
                            @if($p->tracksByPack())
                                <div class="fw-semibold">{{ $p->packLabel() }}</div>
                                <div class="small text-secondary">1 = {{ $p->unitsPerPack() }} {{ $p->unitLabel() }}s</div>
                            @else
                                <span class="text-secondary">{{ $p->unitLabel() }}</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <div class="fw-semibold text-{{ $levelClass }}">{{ $row['qty']['primary'] }}</div>
                            @if($row['qty']['secondary'])
                                <div class="small text-secondary">{{ $row['qty']['secondary'] }}</div>
                            @endif
                        </td>
                        <td class="text-end">
                            <div>{{ $row['physQty']['primary'] }}</div>
                        </td>
                        <td class="text-end">{{ $p->displayQty($row['reserved'])['primary'] }}</td>
                        <td class="text-end small text-secondary">{{ $row['minQty']['primary'] }}</td>
                        <td class="text-end fw-semibold">${{ number_format($row['value'], 2) }}</td>
                        <td>
                            <span class="badge text-bg-{{ $levelClass }}">{{ $levelLabel }}</span>
                            @if($row['batches'] > 0)
                                <div class="small text-secondary mt-1">{{ $row['batches'] }} lote(s)</div>
                            @endif
                        </td>
                        <td class="text-nowrap text-end">
                            <a class="btn btn-sm btn-outline-primary" href="{{ route('products.inventory', $p) }}">Ver</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="text-center py-5 text-secondary">
                            No hay productos para mostrar con estos filtros.
                        </td>
                    </tr>
                @endforelse
            </tbody>
            @if($rows->isNotEmpty())
                <tfoot>
                    <tr class="inv-summary-foot">
                        <td colspan="3" class="fw-semibold">Totales</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="text-end fw-semibold">${{ number_format($totals['value'], 2) }}</td>
                        <td colspan="2" class="small text-secondary">{{ $totals['products'] }} producto(s)</td>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>
</div>
@endsection

@push('styles')
<style>
.inv-summary-thumb {
    width: 40px;
    height: 40px;
    border-radius: .65rem;
    object-fit: cover;
    border: 1px solid #E7ECF2;
    display: block;
}
.inv-summary-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F3F6;
    color: #ADB9C7;
}
.inv-summary-table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #5B6570;
    background: #F7F9FB;
    white-space: nowrap;
}
.inv-summary-foot td {
    background: #F7FBFE;
    border-top: 2px solid #1292EE;
}
</style>
@endpush