@extends('layouts.app')
@section('title','Dashboard Gerencial')
@section('page-title','Dashboard Gerencial')

@section('content')

{{-- ===== BANNER BIENVENIDA ===== --}}
<div class="card mb-4" style="
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 55%, #388E3C 100%);
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
">
    <div class="card-body py-4 px-4">
        <div class="d-flex align-items-center justify-content-between flex-wrap" style="gap:1rem">
            {{-- Izquierda: saludo --}}
            <div class="d-flex align-items-center" style="gap:1.2rem">
                <div style="
                    width:68px; height:68px;
                    background:rgba(255,255,255,.15);
                    border-radius:50%;
                    display:flex; align-items:center; justify-content:center;
                    border: 2px solid rgba(255,255,255,.35);
                    flex-shrink:0;
                ">
                    <i class="fas fa-user-tie" style="font-size:1.9rem; color:#FFA000;"></i>
                </div>
                <div>
                    <p class="mb-0" style="color:rgba(255,255,255,.75); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;">
                        Bienvenido al Panel Ejecutivo
                    </p>
                    <h2 class="mb-0 font-weight-bold" style="color:#fff; font-size:1.45rem; line-height:1.3;">
                        {{ auth()->user()->name }}
                    </h2>
                    <span style="
                        display:inline-block;
                        background:#FFA000;
                        color:#1B5E20;
                        font-size:.78rem;
                        font-weight:700;
                        border-radius:20px;
                        padding:.15rem .75rem;
                        margin-top:.3rem;
                        letter-spacing:.04em;
                    ">
                        {{ auth()->user()->cargo ?? 'Gerencia General' }}
                    </span>
                </div>
            </div>

            {{-- Centro: empresa --}}
            <div class="text-center d-none d-md-block">
                <div style="color:rgba(255,255,255,.55); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;">
                    <i class="fas fa-leaf mr-1" style="color:#FFA000"></i>Sabores MAYBELL S.A.C.
                </div>
                <div style="color:#fff; font-size:1rem; font-weight:600; margin-top:.2rem;">
                    Sistema ERP Integral
                </div>
                <div style="color:rgba(255,255,255,.6); font-size:.78rem; margin-top:.1rem;">
                    Módulos activos: 9 &nbsp;·&nbsp; Versión 2026
                </div>
            </div>

            {{-- Derecha: fecha y hora --}}
            <div class="text-right">
                <div style="color:rgba(255,255,255,.7); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;">
                    <i class="fas fa-clock mr-1"></i>Fecha y hora local
                </div>
                <div id="gerFecha" style="color:#FFA000; font-size:1.15rem; font-weight:700; margin-top:.15rem;"></div>
                <div id="gerHora"  style="color:#fff; font-size:1.55rem; font-weight:800; letter-spacing:.04em; line-height:1.1;"></div>
                <div style="color:rgba(255,255,255,.55); font-size:.75rem; margin-top:.2rem;">
                    Zona horaria: America/Lima
                </div>
            </div>
        </div>

        {{-- Línea inferior: período activo --}}
        <div class="mt-3 pt-3" style="border-top:1px solid rgba(255,255,255,.2)">
            <div class="d-flex align-items-center justify-content-between flex-wrap" style="gap:.5rem">
                <div style="color:rgba(255,255,255,.75); font-size:.82rem;">
                    <i class="fas fa-calendar-alt mr-1" style="color:#FFA000"></i>
                    Período analizado:
                    <strong style="color:#fff">
                        {{ \Carbon\Carbon::parse($desde)->format('d/m/Y') }}
                    </strong>
                    al
                    <strong style="color:#fff">
                        {{ \Carbon\Carbon::parse($hasta)->format('d/m/Y') }}
                    </strong>
                </div>
                <div style="color:rgba(255,255,255,.6); font-size:.78rem;">
                    <i class="fas fa-database mr-1"></i>Datos en tiempo real desde la base de datos
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Filtro período --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row align-items-end">
            <div class="col-md-2 form-group mb-0">
                <label class="small">Año</label>
                <select name="anio" class="form-control form-control-sm">
                    @foreach([now()->year, now()->year-1] as $y)
                    <option value="{{ $y }}" {{ $anio==$y?'selected':'' }}>{{ $y }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 form-group mb-0">
                <label class="small">Mes</label>
                <select name="mes" class="form-control form-control-sm">
                    <option value="">Todo el año</option>
                    @foreach(['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'] as $i => $m)
                    <option value="{{ $i+1 }}" {{ $mes==$i+1?'selected':'' }}>{{ $m }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 form-group mb-0">
                <button type="submit" class="btn btn-primary btn-sm btn-block">
                    <i class="fas fa-sync mr-1"></i>Actualizar
                </button>
            </div>
            <div class="col-md-4 text-right">
                <small class="text-muted">
                    Período: <strong>{{ \Carbon\Carbon::parse($desde)->format('d/m/Y') }}</strong>
                    al <strong>{{ \Carbon\Carbon::parse($hasta)->format('d/m/Y') }}</strong>
                </small>
            </div>
            <div class="col-md-2 form-group mb-0">
                <a href="{{ route('gerencial.pdf.reporte-ejecutivo', ['anio' => $anio, 'mes' => $mes]) }}"
                   target="_blank" class="btn btn-danger btn-sm btn-block">
                    <i class="fas fa-file-pdf mr-1"></i>PDF Reporte
                </a>
            </div>
        </form>
    </div>
</div>

{{-- Alertas --}}
@foreach($alertas as [$color, $msg])
<div class="alert alert-{{ $color }} py-2 mb-2">
    <i class="fas fa-exclamation-circle mr-1"></i>{{ $msg }}
</div>
@endforeach

{{-- ===== BANDEJA DE APROBACIONES ===== --}}
@php
$totalPendientes = $pendientes['oc']->count()
    + $pendientes['os']->count()
    + $pendientes['req']->count()
    + $pendientes['cert']->count()
    + $pendientes['permisos']->count()
    + $pendientes['planillas']->count();
@endphp

<div class="card mb-4 border-warning">
    <div class="card-header" style="background:#856404;border-color:#856404;">
        <h3 class="card-title text-white">
            <i class="fas fa-inbox mr-2"></i>Bandeja de Firmas y Aprobaciones
            @if($totalPendientes > 0)
            <span class="badge badge-danger ml-2" style="font-size:.85rem;">{{ $totalPendientes }}</span>
            @endif
        </h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool text-white" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
            </button>
        </div>
    </div>
    <div class="card-body p-0">

        @if($totalPendientes === 0)
        <div class="text-center text-muted py-4">
            <i class="fas fa-check-circle fa-2x text-success mb-2"></i><br>
            No hay documentos pendientes de aprobación. ¡Todo al día!
        </div>
        @else

        {{-- Tabs --}}
        <ul class="nav nav-tabs nav-justified px-0" id="tabAprobaciones" role="tablist" style="border-bottom:2px solid #dee2e6;">
            @if($pendientes['oc']->count())
            <li class="nav-item">
                <a class="nav-link active font-weight-bold" data-toggle="tab" href="#tabOC">
                    <i class="fas fa-file-invoice-dollar mr-1"></i>OC
                    <span class="badge badge-danger">{{ $pendientes['oc']->count() }}</span>
                </a>
            </li>
            @endif
            @if($pendientes['os']->count())
            <li class="nav-item">
                <a class="nav-link {{ $pendientes['oc']->isEmpty()?'active':'' }} font-weight-bold" data-toggle="tab" href="#tabOS">
                    <i class="fas fa-file-signature mr-1"></i>OS
                    <span class="badge badge-danger">{{ $pendientes['os']->count() }}</span>
                </a>
            </li>
            @endif
            @if($pendientes['req']->count())
            <li class="nav-item">
                <a class="nav-link font-weight-bold" data-toggle="tab" href="#tabREQ">
                    <i class="fas fa-tasks mr-1"></i>Requerimientos
                    <span class="badge badge-danger">{{ $pendientes['req']->count() }}</span>
                </a>
            </li>
            @endif
            @if($pendientes['cert']->count())
            <li class="nav-item">
                <a class="nav-link font-weight-bold" data-toggle="tab" href="#tabCERT">
                    <i class="fas fa-certificate mr-1"></i>Certificados
                    <span class="badge badge-danger">{{ $pendientes['cert']->count() }}</span>
                </a>
            </li>
            @endif
            @if($pendientes['permisos']->count())
            <li class="nav-item">
                <a class="nav-link font-weight-bold" data-toggle="tab" href="#tabPERM">
                    <i class="fas fa-calendar-times mr-1"></i>Permisos
                    <span class="badge badge-danger">{{ $pendientes['permisos']->count() }}</span>
                </a>
            </li>
            @endif
            @if($pendientes['planillas']->count())
            <li class="nav-item">
                <a class="nav-link font-weight-bold" data-toggle="tab" href="#tabPLAN">
                    <i class="fas fa-money-check-alt mr-1"></i>Planillas
                    <span class="badge badge-danger">{{ $pendientes['planillas']->count() }}</span>
                </a>
            </li>
            @endif
        </ul>

        <div class="tab-content px-0">

            {{-- OC --}}
            @if($pendientes['oc']->count())
            <div class="tab-pane fade show active" id="tabOC">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-light">
                        <tr><th>N° OC</th><th>Proveedor</th><th>Fecha</th><th class="text-right">Total</th><th class="text-center">Estado</th><th></th></tr>
                    </thead>
                    <tbody>
                    @foreach($pendientes['oc'] as $oc)
                    <tr>
                        <td><strong>{{ $oc->numero }}</strong></td>
                        <td>{{ $oc->proveedor?->razon_social ?? '—' }}</td>
                        <td>{{ $oc->fecha_pedido?->format('d/m/Y') ?? '—' }}</td>
                        <td class="text-right">S/ {{ number_format($oc->total,2) }}</td>
                        <td class="text-center">
                            @php $estadoLabel = ['pend_jefe'=>'Pend. Jefe','pend_adm'=>'Pend. Adm','pend_gerencia'=>'Pend. Gerencia']; @endphp
                            <span class="badge badge-warning">{{ $estadoLabel[$oc->estado] ?? $oc->estado }}</span>
                        </td>
                        <td class="text-right" style="white-space:nowrap;">
                            <a href="{{ route('logistica.ordenes-compra.show',$oc) }}" class="btn btn-xs btn-info">
                                <i class="fas fa-eye mr-1"></i>Ver / Firmar
                            </a>
                            @if($oc->estado === 'pend_gerencia')
                            <form method="POST" action="{{ route('logistica.ordenes-compra.aprobar',$oc) }}" class="d-inline">
                                @csrf
                                <input type="hidden" name="firma_nombre" value="{{ auth()->user()->name }}">
                                <button class="btn btn-xs btn-success" onclick="return confirm('¿Aprobar OC {{ $oc->numero }}?')">
                                    <i class="fas fa-check mr-1"></i>Aprobar
                                </button>
                            </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @endif

            {{-- OS --}}
            @if($pendientes['os']->count())
            <div class="tab-pane fade {{ $pendientes['oc']->isEmpty()?'show active':'' }}" id="tabOS">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-light">
                        <tr><th>N° OS</th><th>Proveedor</th><th>Fecha</th><th class="text-right">Total</th><th class="text-center">Estado</th><th></th></tr>
                    </thead>
                    <tbody>
                    @foreach($pendientes['os'] as $os)
                    <tr>
                        <td><strong>{{ $os->numero }}</strong></td>
                        <td>{{ $os->proveedor?->razon_social ?? '—' }}</td>
                        <td>{{ $os->fecha_pedido?->format('d/m/Y') ?? '—' }}</td>
                        <td class="text-right">S/ {{ number_format($os->total,2) }}</td>
                        <td class="text-center">
                            <span class="badge badge-warning">{{ $estadoLabel[$os->estado] ?? $os->estado }}</span>
                        </td>
                        <td class="text-right" style="white-space:nowrap;">
                            <a href="{{ route('logistica.ordenes-servicio.show',$os) }}" class="btn btn-xs btn-info">
                                <i class="fas fa-eye mr-1"></i>Ver / Firmar
                            </a>
                            @if($os->estado === 'pend_gerencia')
                            <form method="POST" action="{{ route('logistica.ordenes-servicio.aprobar',$os) }}" class="d-inline">
                                @csrf
                                <input type="hidden" name="firma_nombre" value="{{ auth()->user()->name }}">
                                <button class="btn btn-xs btn-success" onclick="return confirm('¿Aprobar OS {{ $os->numero }}?')">
                                    <i class="fas fa-check mr-1"></i>Aprobar
                                </button>
                            </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @endif

            {{-- Requerimientos --}}
            @if($pendientes['req']->count())
            <div class="tab-pane fade" id="tabREQ">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-light">
                        <tr><th>Código</th><th>Solicitante</th><th>Fecha</th><th>Motivo</th><th></th></tr>
                    </thead>
                    <tbody>
                    @foreach($pendientes['req'] as $req)
                    <tr>
                        <td><strong>{{ $req->codigo }}</strong></td>
                        <td>{{ $req->solicitante?->name ?? '—' }}</td>
                        <td>{{ $req->created_at->format('d/m/Y') }}</td>
                        <td><small>{{ Str::limit($req->motivo ?? '—', 50) }}</small></td>
                        <td class="text-right">
                            <a href="{{ route('logistica.requerimientos.show',$req) }}" class="btn btn-xs btn-info">
                                <i class="fas fa-eye mr-1"></i>Ver / Aprobar
                            </a>
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @endif

            {{-- Certificados de Calidad --}}
            @if($pendientes['cert']->count())
            <div class="tab-pane fade" id="tabCERT">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-light">
                        <tr><th>N° Cert.</th><th>Fruta</th><th>Lote</th><th>Inspector</th><th>Fecha</th><th></th></tr>
                    </thead>
                    <tbody>
                    @foreach($pendientes['cert'] as $cert)
                    <tr>
                        <td><strong>{{ $cert->numero }}</strong></td>
                        <td>{{ $cert->fruta?->nombre ?? '—' }}</td>
                        <td>{{ $cert->lote?->numero ?? '—' }}</td>
                        <td>{{ $cert->firma_inspector_nombre }}</td>
                        <td>{{ $cert->created_at->format('d/m/Y') }}</td>
                        <td class="text-right">
                            <a href="{{ route('calidad.certificados.show',$cert) }}" class="btn btn-xs btn-warning">
                                <i class="fas fa-signature mr-1"></i>Firmar Gerencia
                            </a>
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @endif

            {{-- Permisos --}}
            @if($pendientes['permisos']->count())
            <div class="tab-pane fade" id="tabPERM">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-light">
                        <tr><th>Código</th><th>Empleado</th><th>Tipo</th><th>Fechas</th><th>Días</th><th></th></tr>
                    </thead>
                    <tbody>
                    @foreach($pendientes['permisos'] as $perm)
                    <tr>
                        <td><strong>{{ $perm->codigo }}</strong></td>
                        <td>{{ $perm->empleado?->nombre_completo ?? '—' }}</td>
                        <td>{{ \App\Models\PermisoLicencia::$TIPOS[$perm->tipo] ?? $perm->tipo }}</td>
                        <td><small>{{ $perm->fecha_inicio->format('d/m') }} al {{ $perm->fecha_fin->format('d/m/Y') }}</small></td>
                        <td class="text-center">{{ $perm->dias_solicitados }}</td>
                        <td class="text-right" style="white-space:nowrap;">
                            <a href="{{ route('rrhh.permisos.show',$perm) }}" class="btn btn-xs btn-info">
                                <i class="fas fa-eye mr-1"></i>Ver
                            </a>
                            <form method="POST" action="{{ route('rrhh.permisos.aprobar',$perm) }}" class="d-inline">
                                @csrf
                                <button class="btn btn-xs btn-success" onclick="return confirm('¿Aprobar permiso de {{ $perm->empleado?->nombre_completo }}?')">
                                    <i class="fas fa-check"></i> Aprobar
                                </button>
                            </form>
                            <form method="POST" action="{{ route('rrhh.permisos.rechazar',$perm) }}" class="d-inline">
                                @csrf
                                <button class="btn btn-xs btn-danger" onclick="return confirm('¿Rechazar este permiso?')">
                                    <i class="fas fa-times"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @endif

            {{-- Planillas --}}
            @if($pendientes['planillas']->count())
            <div class="tab-pane fade" id="tabPLAN">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-light">
                        <tr><th>Código</th><th>Período</th><th>Tipo</th><th class="text-right">Total Neto</th><th class="text-center">Estado</th><th></th></tr>
                    </thead>
                    <tbody>
                    @foreach($pendientes['planillas'] as $plan)
                    <tr>
                        <td><strong>{{ $plan->codigo }}</strong></td>
                        <td>{{ $plan->fecha_inicio->format('d/m/Y') }} — {{ $plan->fecha_fin->format('d/m/Y') }}</td>
                        <td>{{ ucfirst($plan->tipo) }}</td>
                        <td class="text-right font-weight-bold">S/ {{ number_format($plan->total_neto,2) }}</td>
                        <td class="text-center"><span class="badge badge-info">Revisada</span></td>
                        <td class="text-right" style="white-space:nowrap;">
                            <a href="{{ route('rrhh.planillas.show',$plan) }}" class="btn btn-xs btn-info">
                                <i class="fas fa-eye mr-1"></i>Ver
                            </a>
                            <form method="POST" action="{{ route('rrhh.planillas.aprobar',$plan) }}" class="d-inline">
                                @csrf
                                <button class="btn btn-xs btn-success" onclick="return confirm('¿Aprobar planilla {{ $plan->codigo }}?')">
                                    <i class="fas fa-check mr-1"></i>Aprobar
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            @endif

        </div>{{-- /tab-content --}}
        @endif
    </div>
</div>

{{-- KPIs --}}
<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>S/ {{ number_format($kpis['ventas_pen'],0) }}</h3>
                @if($kpis['ventas_usd'] > 0)
                <small style="font-size:.75rem">+ USD {{ number_format($kpis['ventas_usd'],0) }}</small>
                @endif
                <p>Ventas del período</p>
            </div>
            <div class="icon"><i class="fas fa-dollar-sign"></i></div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-primary">
            <div class="inner">
                <h3>{{ number_format($kpis['kg_producidos'],0) }} kg</h3>
                <p>Pulpa producida ({{ $kpis['ordenes_prod'] }} OPs)</p>
            </div>
            <div class="icon"><i class="fas fa-industry"></i></div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>S/ {{ number_format($kpis['compras_pen'],0) }}</h3>
                <p>Compras registradas</p>
            </div>
            <div class="icon"><i class="fas fa-shopping-bag"></i></div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>S/ {{ number_format($kpis['por_pagar'],0) }}</h3>
                <p>Por pagar (cuentas pendientes)</p>
            </div>
            <div class="icon"><i class="fas fa-file-invoice-dollar"></i></div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner"><h3>{{ $kpis['exportaciones'] }}</h3><p>Exportaciones</p></div>
            <div class="icon"><i class="fas fa-ship"></i></div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-secondary">
            <div class="inner"><h3>{{ $kpis['cotizaciones'] }}</h3><p>Cotizaciones</p></div>
            <div class="icon"><i class="fas fa-file-invoice"></i></div>
        </div>
    </div>
</div>

{{-- Gráfico ventas/compras/producción por mes --}}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-line mr-1"></i>Ventas vs Compras — {{ $anio }}</h3>
            </div>
            <div class="card-body">
                <canvas id="chartVentasCompras" height="70"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-weight mr-1"></i>Kg Producidos / mes</h3>
            </div>
            <div class="card-body">
                <canvas id="chartKgProd" height="135"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- Gastos insumos por OP --}}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">
            <i class="fas fa-flask mr-1 text-warning"></i>
            Gastos de Insumos por Orden de Producción
        </h3>
        <div class="card-tools">
            <small class="text-muted">Basado en movimientos de inventario vinculados a cada OP</small>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
        <table class="table table-sm mb-0">
            <thead class="thead-light">
                <tr>
                    <th>OP</th><th>Fecha</th><th>Fruta</th>
                    <th class="text-right">Kg pulpa</th>
                    <th>Pedido</th><th>Cliente</th>
                    <th class="text-right">Venta</th>
                    <th class="text-right text-warning">Costo insumos S/.</th>
                    <th class="text-right">Margen</th>
                </tr>
            </thead>
            <tbody>
            @forelse($gastosPorOP as $row)
            @php
                $ventaPen = $row->ped_total ?? 0;
                $costo    = $row->costo_insumos ?? 0;
                $margen   = $ventaPen > 0 ? round(($ventaPen - $costo) / $ventaPen * 100, 1) : null;
            @endphp
            <tr>
                <td><a href="{{ route('produccion.ordenes.show', $row->op_id) }}" class="font-weight-bold">{{ $row->op_codigo }}</a></td>
                <td>{{ \Carbon\Carbon::parse($row->op_fecha)->format('d/m/Y') }}</td>
                <td>{{ $row->fruta }}</td>
                <td class="text-right">{{ $row->kg_pulpa_obtenida ? number_format($row->kg_pulpa_obtenida,0).' kg' : '—' }}</td>
                <td>
                    @if($row->ped_numero)
                    <a href="{{ route('comercial.pedidos.index') }}">{{ $row->ped_numero }}</a>
                    @else <span class="text-muted">—</span>
                    @endif
                </td>
                <td><small>{{ $row->cliente ?? '—' }}</small></td>
                <td class="text-right">
                    @if($row->ped_total)
                    {{ $row->ped_moneda }} {{ number_format($row->ped_total,2) }}
                    @else —
                    @endif
                </td>
                <td class="text-right font-weight-bold text-warning">
                    S/ {{ number_format($costo,2) }}
                    <br><small class="text-muted">{{ $row->tipos_insumo }} tipo(s)</small>
                </td>
                <td class="text-right">
                    @if($margen !== null)
                    <span class="badge badge-{{ $margen >= 20 ? 'success' : ($margen >= 0 ? 'warning' : 'danger') }}">
                        {{ $margen }}%
                    </span>
                    @else <span class="text-muted">—</span>
                    @endif
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="9" class="text-center text-muted py-4">
                    <i class="fas fa-info-circle mr-1"></i>
                    Sin datos. Los gastos aparecen cuando los movimientos de inventario están vinculados a una OP
                    (<code>referencia_tipo = 'orden_produccion'</code>).
                </td>
            </tr>
            @endforelse
            </tbody>
        </table>
        </div>
    </div>
</div>

{{-- Desglose insumos por OP (top 5) --}}
@if($insumosDesglose->count())
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-list-alt mr-1"></i>Desglose de Insumos — Top 5 OPs del período</h3>
    </div>
    <div class="card-body">
        <div class="row">
        @foreach($insumosDesglose as $opCodigo => $items)
        <div class="col-md-4 mb-3">
            <h6 class="font-weight-bold text-primary">{{ $opCodigo }}</h6>
            <table class="table table-xs table-sm mb-0">
                <thead class="thead-light"><tr><th>Insumo</th><th class="text-right">Cant.</th><th class="text-right">S/.</th></tr></thead>
                <tbody>
                @foreach($items as $ins)
                <tr>
                    <td><small>{{ $ins->insumo }}</small></td>
                    <td class="text-right"><small>{{ number_format($ins->cantidad,2) }}</small></td>
                    <td class="text-right font-weight-bold"><small>{{ number_format($ins->costo,2) }}</small></td>
                </tr>
                @endforeach
                <tr class="thead-light">
                    <td colspan="2" class="text-right font-weight-bold">Total:</td>
                    <td class="text-right font-weight-bold text-warning">{{ number_format($items->sum('costo'),2) }}</td>
                </tr>
                </tbody>
            </table>
        </div>
        @endforeach
        </div>
    </div>
</div>
@endif

{{-- Gastos por Contenedor --}}
@if($gastosPorContenedor->count())
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-ship mr-1"></i>Gastos de Insumos por Contenedor / Exportación</h3>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
        <table class="table table-sm mb-0">
            <thead class="thead-light">
                <tr>
                    <th>Exportación</th><th>Contenedor</th><th>B/L</th>
                    <th>Destino</th><th>Cliente</th><th>OP vinculada</th>
                    <th class="text-right">Kg</th>
                    <th class="text-right">Venta</th>
                    <th class="text-right text-warning">Insumos S/.</th>
                    <th>Estado</th>
                </tr>
            </thead>
            <tbody>
            @foreach($gastosPorContenedor as $row)
            <tr>
                <td><a href="{{ route('comercial.exportaciones.show', $row->id) }}" class="font-weight-bold">{{ $row->exp_numero }}</a></td>
                <td><code>{{ $row->numero_contenedor ?? '—' }}</code></td>
                <td><code>{{ $row->numero_bl ?? '—' }}</code></td>
                <td>{{ $row->pais_destino ?? '—' }}</td>
                <td><small>{{ $row->cliente }}</small></td>
                <td><code>{{ $row->op_codigo }}</code></td>
                <td class="text-right">{{ $row->kg_pulpa_obtenida ? number_format($row->kg_pulpa_obtenida,0).' kg' : '—' }}</td>
                <td class="text-right font-weight-bold">
                    {{ $row->moneda }} {{ number_format($row->ped_venta,2) }}
                </td>
                <td class="text-right font-weight-bold text-warning">
                    S/ {{ number_format($row->costo_insumos ?? 0,2) }}
                </td>
                <td>
                    <span class="badge badge-{{ \App\Models\Exportacion::$BADGE[$row->exp_estado] ?? 'secondary' }}">
                        {{ \App\Models\Exportacion::$ESTADOS[$row->exp_estado] ?? $row->exp_estado }}
                    </span>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
        </div>
    </div>
</div>
@else
<div class="callout callout-info">
    <p class="mb-0">
        <i class="fas fa-info-circle mr-1"></i>
        Los gastos por contenedor aparecen cuando una <strong>Exportación → Pedido → Orden de Producción</strong>
        tiene movimientos de inventario vinculados a esa OP.
        Vincule la OP al crear el pedido comercial.
    </p>
</div>
@endif

@endsection

@push('scripts')
<script>
// Reloj en tiempo real zona Lima
function actualizarReloj() {
    const ahora = new Date();
    const opts  = { timeZone: 'America/Lima' };
    const fecha = ahora.toLocaleDateString('es-PE', {
        ...opts, weekday:'long', day:'numeric', month:'long', year:'numeric'
    });
    const hora  = ahora.toLocaleTimeString('es-PE', { ...opts, hour:'2-digit', minute:'2-digit', second:'2-digit' });
    const elF   = document.getElementById('gerFecha');
    const elH   = document.getElementById('gerHora');
    if (elF) elF.textContent = fecha.charAt(0).toUpperCase() + fecha.slice(1);
    if (elH) elH.textContent = hora;
}
actualizarReloj();
setInterval(actualizarReloj, 1000);

// Gráficos
const meses   = {!! json_encode($mesesData->pluck('mes')) !!};
const ventas  = {!! json_encode($mesesData->pluck('ventas')) !!};
const compras = {!! json_encode($mesesData->pluck('compras')) !!};
const kgProd  = {!! json_encode($mesesData->pluck('kg_prod')) !!};

new Chart(document.getElementById('chartVentasCompras').getContext('2d'), {
    type: 'bar',
    data: {
        labels: meses,
        datasets: [
            { label: 'Ventas S/.', data: ventas,  backgroundColor: 'rgba(46,125,50,.7)', borderColor:'#2E7D32', borderWidth:1 },
            { label: 'Compras S/.', data: compras, backgroundColor: 'rgba(255,190,11,.6)', borderColor:'#FFBE0B', borderWidth:1 },
        ]
    },
    options: { responsive:true, plugins:{ legend:{ position:'bottom' } } }
});

new Chart(document.getElementById('chartKgProd').getContext('2d'), {
    type: 'line',
    data: {
        labels: meses,
        datasets: [{
            label: 'Kg producidos',
            data: kgProd,
            borderColor:'#FF6D00',
            backgroundColor:'rgba(255,109,0,.15)',
            fill:true, tension:.3
        }]
    },
    options: { responsive:true, plugins:{ legend:{ display:false } } }
});
</script>
@endpush