@extends('layouts.app')
@section('title', 'Logística')
@section('page-title', 'Dashboard — Logística')
@section('breadcrumb')
    <li class="breadcrumb-item active">Logística</li>
@endsection

@push('styles')
<style>
    .kpi-box {
        border-radius: 10px;
        padding: 1.1rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,.13);
        margin-bottom: 1rem;
        transition: transform .2s, box-shadow .2s;
    }
    .kpi-box:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
    .kpi-inner h3 { font-size: 2rem; font-weight: 800; margin: 0; line-height: 1; }
    .kpi-inner p  { font-size: .82rem; font-weight: 600; margin: .3rem 0 0; opacity: .92; }
    .kpi-icon     { font-size: 2.8rem; opacity: .35; }
    .chart-card   { border-radius: 10px; }
    .highlight-bar { height: 3px; background: linear-gradient(90deg, #2E7D32, #FFA000); border-radius: 2px; margin: .4rem 0 1.2rem; }
</style>
@endpush

@section('content')

<div class="mb-1">
    <small class="text-muted">Panel integral de almacén, movimientos y gestión administrativa</small>
    <div class="highlight-bar"></div>
</div>

{{-- ===== FILA 1: KPIs principales ===== --}}
<div class="row">
    <div class="col-lg-3 col-md-6 col-12">
        <div class="kpi-box" style="background:#38B000;">
            <div class="kpi-inner">
                <h3>{{ number_format($kpis['ingresos']) }}</h3>
                <p>Ingresos</p>
            </div>
            <i class="fas fa-arrow-down kpi-icon"></i>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-12">
        <div class="kpi-box" style="background:#E4572E;">
            <div class="kpi-inner">
                <h3>{{ number_format($kpis['egresos']) }}</h3>
                <p>Egresos</p>
            </div>
            <i class="fas fa-arrow-up kpi-icon"></i>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-12">
        <div class="kpi-box" style="background:#3A86FF;">
            <div class="kpi-inner">
                <h3>{{ number_format($kpis['productos']) }}</h3>
                <p>Stock (Productos)</p>
            </div>
            <i class="fas fa-warehouse kpi-icon"></i>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-12">
        <div class="kpi-box" style="background:#7B2FF2;">
            <div class="kpi-inner">
                <h3>{{ number_format($kpis['total_inventario']) }}</h3>
                <p>Total Inventario (uds)</p>
            </div>
            <i class="fas fa-cubes kpi-icon"></i>
        </div>
    </div>
</div>

{{-- ===== FILA 2: KPIs gestión ===== --}}
<div class="row">
    <div class="col-lg-3 col-md-6 col-12">
        <div class="kpi-box" style="background:#FFBE0B;">
            <div class="kpi-inner">
                <h3>{{ number_format($kpis['requerimientos']) }}</h3>
                <p>Requerimientos</p>
            </div>
            <i class="fas fa-tasks kpi-icon"></i>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-12">
        <div class="kpi-box" style="background:#636363;">
            <div class="kpi-inner">
                <h3>{{ number_format($kpis['ordenes_compra']) }}</h3>
                <p>Órdenes de Compra</p>
            </div>
            <i class="fas fa-file-invoice-dollar kpi-icon"></i>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-12">
        <div class="kpi-box" style="background:#3E885B;">
            <div class="kpi-inner">
                <h3>{{ number_format($kpis['ordenes_servicio']) }}</h3>
                <p>Órdenes de Servicio</p>
            </div>
            <i class="fas fa-file-signature kpi-icon"></i>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 col-12">
        <div class="kpi-box" style="background:#2D3047;">
            <div class="kpi-inner">
                <h3>{{ number_format($kpis['pendientes_firma']) }}</h3>
                <p>Pendientes por Firma</p>
            </div>
            <i class="fas fa-user-check kpi-icon"></i>
        </div>
    </div>
</div>

{{-- ===== ALERTA STOCK MÍNIMO ===== --}}
@if($bajoStock->count() > 0)
<div class="alert alert-warning d-flex align-items-start py-2 mb-3">
    <i class="fas fa-exclamation-triangle fa-lg mr-3 mt-1"></i>
    <div class="w-100">
        <strong>{{ $bajoStock->count() }} producto(s) con stock bajo o agotado:</strong>
        <div class="row mt-1">
            @foreach($bajoStock as $p)
            <div class="col-md-3 col-sm-6 mb-1">
                <small>
                    <strong>{{ Str::limit($p->nombre, 28) }}</strong><br>
                    <span class="text-danger">Stock: {{ number_format($p->stock_actual, 2) }}</span>
                    <span class="text-muted"> / Mín: {{ number_format($p->stock_minimo, 2) }} {{ $p->unidadMedida?->abreviatura }}</span>
                </small>
            </div>
            @endforeach
        </div>
        <a href="{{ route('logistica.reportes.index') }}" class="btn btn-warning btn-xs mt-1">
            <i class="fas fa-eye mr-1"></i>Ver reporte completo
        </a>
    </div>
</div>
@endif

{{-- ===== ALERTA LOTES POR VENCER ===== --}}
@if($lotesVencidos > 0)
<div class="alert alert-danger py-2 mb-2">
    <i class="fas fa-skull-crossbones mr-2"></i>
    <strong>{{ $lotesVencidos }} lote(s) VENCIDOS</strong> con stock disponible. Revise y dé de baja o bloquee estos lotes.
    <a href="{{ route('logistica.inventario.index') }}" class="btn btn-danger btn-xs ml-2">
        <i class="fas fa-eye mr-1"></i>Ver Inventario
    </a>
</div>
@endif

@if($lotesPorVencer->count() > 0)
<div class="alert alert-warning d-flex align-items-start py-2 mb-3">
    <i class="fas fa-clock fa-lg mr-3 mt-1"></i>
    <div class="w-100">
        <strong>{{ $lotesPorVencer->count() }} lote(s) vencen en los próximos 30 días:</strong>
        <div class="row mt-1">
            @foreach($lotesPorVencer as $l)
            <div class="col-md-3 col-sm-6 mb-1">
                <small>
                    <strong>{{ Str::limit($l->producto?->nombre ?? $l->numero, 28) }}</strong><br>
                    <span class="text-warning">Vence: {{ \Carbon\Carbon::parse($l->fecha_vencimiento)->format('d/m/Y') }}</span>
                    <span class="badge badge-sm {{ \Carbon\Carbon::parse($l->fecha_vencimiento)->diffInDays(now()) <= 7 ? 'badge-danger' : 'badge-warning' }}">
                        {{ \Carbon\Carbon::parse($l->fecha_vencimiento)->diffInDays(now()) }}d
                    </span><br>
                    <span class="text-muted">Stock: {{ number_format($l->cantidad_actual,2) }} — Lote: {{ $l->numero }}</span>
                </small>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

{{-- ===== GRÁFICO ===== --}}
<div class="card chart-card mt-2">
    <div class="card-header">
        <h3 class="card-title">
            <i class="fas fa-chart-bar mr-1"></i> Ingresos vs Egresos por Mes (Últimos 6 meses)
        </h3>
    </div>
    <div class="card-body">
        <canvas id="ingresosEgresosChart" height="90"></canvas>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
    var labels  = {!! json_encode($meses) !!};
    var ing     = {!! json_encode($chartIng) !!};
    var egr     = {!! json_encode($chartEgr) !!};

    new Chart(document.getElementById('ingresosEgresosChart'), {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Ingresos',
                    data: ing,
                    backgroundColor: 'rgba(56,176,0,.75)',
                    borderColor: '#38B000',
                    borderWidth: 1.5,
                    borderRadius: 5,
                },
                {
                    label: 'Egresos',
                    data: egr,
                    backgroundColor: 'rgba(228,87,46,.75)',
                    borderColor: '#E4572E',
                    borderWidth: 1.5,
                    borderRadius: 5,
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' },
                tooltip: { mode: 'index', intersect: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 },
                    grid: { color: 'rgba(0,0,0,.05)' }
                },
                x: { grid: { display: false } }
            }
        }
    });
})();
</script>
@endpush