@extends('layouts.app')
@section('title','Valorización de Inventario')
@section('page-title','Valorización de Inventario')

@section('content')
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row align-items-end">
            <div class="col-md-3 form-group mb-0">
                <label class="small fw-bold">Método de Valorización</label>
                <select name="metodo" class="form-control form-control-sm">
                    <option value="peps" @selected($metodo=='peps')>PEPS (Primero en Entrar, Primero en Salir)</option>
                    <option value="promedio" @selected($metodo=='promedio')>Promedio Ponderado</option>
                </select>
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary btn-sm btn-block"><i class="fas fa-calculator mr-1"></i>Calcular</button>
            </div>
            <div class="col-md-7 text-right">
                <small class="text-muted">Fecha de consulta: {{ now()->format('d/m/Y H:i') }}</small>
            </div>
        </form>
    </div>
</div>

{{-- KPIs --}}
<div class="row">
    <div class="col-md-4">
        <div class="info-box bg-success">
            <span class="info-box-icon"><i class="fas fa-dollar-sign"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Valor Total Inventario</span>
                <span class="info-box-number">S/ {{ number_format($totalValor,2) }}</span>
                <span class="progress-description">Método: {{ strtoupper($metodo) }}</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="info-box bg-info">
            <span class="info-box-icon"><i class="fas fa-boxes"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Productos con Stock</span>
                <span class="info-box-number">{{ $totalItems }}</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="info-box bg-warning">
            <span class="info-box-icon"><i class="fas fa-warehouse"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Almacenes involucrados</span>
                <span class="info-box-number">{{ $porAlmacen->count() }}</span>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {{-- Tabla valorización --}}
    <div class="col-md-9">
        <div class="card">
            <div class="card-header py-2">
                <h3 class="card-title">Detalle por Producto — Método {{ strtoupper($metodo) }}</h3>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm table-hover mb-0" id="tablaValor">
                    <thead class="thead-dark">
                        <tr>
                            <th>Producto</th>
                            <th class="text-center">Lotes</th>
                            <th class="text-right">Cantidad</th>
                            <th>UM</th>
                            <th class="text-right">Costo Unit.</th>
                            <th class="text-right">Valor Total</th>
                            <th class="text-right">% Part.</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($productos as $p)
                        @php $pct = $totalValor > 0 ? ($p['valor_total']/$totalValor)*100 : 0; @endphp
                        <tr>
                            <td>
                                <strong>{{ $p['producto']?->nombre }}</strong>
                                <small class="text-muted d-block">{{ $p['producto']?->codigo }}</small>
                            </td>
                            <td class="text-center">
                                <span class="badge badge-secondary">{{ $p['n_lotes'] }}</span>
                            </td>
                            <td class="text-right">{{ number_format($p['cantidad_total'],3) }}</td>
                            <td><small>{{ $p['producto']?->unidadMedida?->abreviatura }}</small></td>
                            <td class="text-right">{{ number_format($p['costo_unitario'],4) }}</td>
                            <td class="text-right font-weight-bold">{{ number_format($p['valor_total'],2) }}</td>
                            <td class="text-right">
                                <div class="d-flex align-items-center justify-content-end">
                                    <small class="mr-1">{{ number_format($pct,1) }}%</small>
                                    <div class="progress progress-sm" style="width:50px">
                                        <div class="progress-bar bg-success" style="width:{{ min(100,$pct) }}%"></div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="table-dark">
                        <tr>
                            <th colspan="5" class="text-right">TOTAL VALORIZADO</th>
                            <th class="text-right">S/ {{ number_format($totalValor,2) }}</th>
                            <th class="text-right">100%</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    {{-- Distribución por almacén --}}
    <div class="col-md-3">
        <div class="card">
            <div class="card-header py-2"><h3 class="card-title">Por Almacén</h3></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    @foreach($porAlmacen as $nombre => $datos)
                    <tr>
                        <td><small><strong>{{ $nombre }}</strong></small></td>
                        <td class="text-right"><small>S/ {{ number_format($datos['valor'],2) }}</small></td>
                    </tr>
                    @endforeach
                </table>
            </div>
        </div>
        <div class="card">
            <div class="card-header py-2"><h3 class="card-title">Top 5 por Valor</h3></div>
            <div class="card-body" style="padding:8px">
                <canvas id="chartValor" height="220"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script>
const top5 = @json($productos->take(5)->map(fn($p) => ['nombre' => $p['producto']?->nombre ?? 'Sin nombre', 'valor' => $p['valor_total']]));
new Chart(document.getElementById('chartValor').getContext('2d'), {
    type: 'doughnut',
    data: {
        labels: top5.map(p => p.nombre),
        datasets: [{ data: top5.map(p => p.valor), backgroundColor: ['#28a745','#17a2b8','#ffc107','#fd7e14','#6f42c1'] }]
    },
    options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { font: { size: 10 } } } } }
});
</script>
@endpush