@extends('layouts.app')
@section('title','Comparativo Mes vs Mes')
@section('page-title','Comparativo Mes vs Mes — Dashboard Gerencial')

@section('content')
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row align-items-end g-2">
            <div class="col-md-2">
                <label class="small fw-bold">Año</label>
                <input type="number" name="anio" class="form-control form-control-sm" value="{{ $anio }}" min="2020" max="2030">
            </div>
            <div class="col-md-2">
                <label class="small fw-bold">Mes A (actual)</label>
                <select name="mes_a" class="form-control form-control-sm">
                    @foreach(['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'] as $i=>$l)
                    <option value="{{ $i+1 }}" @selected($mesA==$i+1)>{{ $l }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="small fw-bold">Mes B (comparar)</label>
                <select name="mes_b" class="form-control form-control-sm">
                    @foreach(['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'] as $i=>$l)
                    <option value="{{ $i+1 }}" @selected($mesB==$i+1)>{{ $l }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="small fw-bold">Año Mes B</label>
                <input type="number" name="anio_b" class="form-control form-control-sm" value="{{ $anioB }}" min="2020" max="2030">
            </div>
            <div class="col-md-2">
                <button class="btn btn-success btn-sm btn-block"><i class="fas fa-sync mr-1"></i>Comparar</button>
            </div>
        </form>
    </div>
</div>

{{-- Encabezados de período --}}
<div class="row mb-3">
    <div class="col-md-5 offset-md-1">
        <div class="card bg-primary text-white text-center py-2">
            <h4 class="mb-0"><i class="fas fa-calendar mr-1"></i>{{ $metricas['A']['label'] }}</h4>
            <small>Período A</small>
        </div>
    </div>
    <div class="col-md-5">
        <div class="card bg-secondary text-white text-center py-2">
            <h4 class="mb-0"><i class="fas fa-calendar-alt mr-1"></i>{{ $metricas['B']['label'] }}</h4>
            <small>Período B (base)</small>
        </div>
    </div>
</div>

{{-- Métricas comparativas --}}
@php
$rows = [
    ['key'=>'ventas',       'label'=>'Ventas Totales',     'prefix'=>'S/ ', 'icon'=>'fas fa-dollar-sign',    'color'=>'success'],
    ['key'=>'compras',      'label'=>'Compras (Insumos)',  'prefix'=>'S/ ', 'icon'=>'fas fa-shopping-cart',  'color'=>'warning'],
    ['key'=>'kg_producidos','label'=>'KG Producidos',       'prefix'=>'',   'icon'=>'fas fa-weight',          'color'=>'info'],
    ['key'=>'ops',          'label'=>'Órdenes de Prod.',   'prefix'=>'',   'icon'=>'fas fa-industry',         'color'=>'primary'],
    ['key'=>'exportaciones','label'=>'Exportaciones',      'prefix'=>'',   'icon'=>'fas fa-ship',             'color'=>'dark'],
    ['key'=>'cotizaciones', 'label'=>'Cotizaciones',       'prefix'=>'',   'icon'=>'fas fa-file-invoice',     'color'=>'secondary'],
    ['key'=>'pedidos',      'label'=>'Pedidos',            'prefix'=>'',   'icon'=>'fas fa-shopping-bag',     'color'=>'info'],
];
@endphp

<div class="card mb-3">
    <div class="card-header py-2"><h3 class="card-title"><i class="fas fa-exchange-alt mr-1"></i>Comparativo de Indicadores</h3></div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead class="thead-dark">
                <tr>
                    <th>Indicador</th>
                    <th class="text-center text-primary">{{ $metricas['A']['label'] }}</th>
                    <th class="text-center text-secondary">{{ $metricas['B']['label'] }}</th>
                    <th class="text-center">Variación</th>
                    <th class="text-center">Tendencia</th>
                </tr>
            </thead>
            <tbody>
                @foreach($rows as $r)
                @php
                    $vA  = $metricas['A'][$r['key']];
                    $vB  = $metricas['B'][$r['key']];
                    $var = $variaciones[$r['key']];
                    $positivo = $r['key'] === 'compras' ? $var <= 0 : $var >= 0;
                @endphp
                <tr>
                    <td><i class="{{ $r['icon'] }} text-{{ $r['color'] }} mr-1"></i> <strong>{{ $r['label'] }}</strong></td>
                    <td class="text-center font-weight-bold text-primary">{{ $r['prefix'] }}{{ is_float($vA+0) ? number_format($vA,0) : number_format($vA) }}</td>
                    <td class="text-center text-secondary">{{ $r['prefix'] }}{{ is_float($vB+0) ? number_format($vB,0) : number_format($vB) }}</td>
                    <td class="text-center font-weight-bold {{ $positivo ? 'text-success' : 'text-danger' }}">
                        {{ $var > 0 ? '+' : '' }}{{ $var }}%
                    </td>
                    <td class="text-center" style="font-size:1.4rem">
                        @if($var > 5)  <span class="text-success">↑</span>
                        @elseif($var < -5) <span class="text-danger">↓</span>
                        @else <span class="text-warning">→</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- Gráfico evolución anual --}}
<div class="row">
    <div class="col-md-8">
        <div class="card mb-3">
            <div class="card-header py-2">
                <h3 class="card-title">Evolución Anual {{ $anio }} — Ventas vs Compras</h3>
            </div>
            <div class="card-body"><canvas id="chartAnual" height="120"></canvas></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header py-2"><h3 class="card-title">KG Producidos por Mes</h3></div>
            <div class="card-body"><canvas id="chartKg" height="200"></canvas></div>
        </div>
    </div>
</div>

<div class="text-right mt-2">
    <a href="{{ route('gerencial.dashboard') }}" class="btn btn-secondary btn-sm"><i class="fas fa-arrow-left mr-1"></i>Volver al Dashboard</a>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script>
var meses  = @json($mesesAnio->pluck('mes'));
var ventas = @json($mesesAnio->pluck('ventas'));
var compras= @json($mesesAnio->pluck('compras'));
var kg     = @json($mesesAnio->pluck('kg'));

// Marca los dos meses seleccionados
var colorVentas = meses.map((m,i) => i+1 === {{ $mesA }} ? 'rgba(0,123,255,1)' : 'rgba(0,123,255,0.3)');
var colorCompras= meses.map((m,i) => i+1 === {{ $mesA }} ? 'rgba(255,193,7,1)' : 'rgba(255,193,7,0.3)');

new Chart(document.getElementById('chartAnual').getContext('2d'), {
    type: 'bar',
    data: {
        labels: meses,
        datasets: [
            { label: 'Ventas', data: ventas, backgroundColor: colorVentas },
            { label: 'Compras', data: compras, backgroundColor: colorCompras }
        ]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'top' } },
        scales: { y: { beginAtZero: true } }
    }
});

new Chart(document.getElementById('chartKg').getContext('2d'), {
    type: 'line',
    data: {
        labels: meses,
        datasets: [{
            label: 'KG Producidos',
            data: kg,
            borderColor: '#28a745',
            backgroundColor: 'rgba(40,167,69,.1)',
            tension: 0.3,
            pointRadius: 5,
            pointBackgroundColor: meses.map((m,i) => i+1 === {{ $mesA }} ? '#28a745' : 'rgba(40,167,69,.5)')
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true } }
    }
});
</script>
@endpush