@extends('layouts.app')
@section('title','Comercial — Dashboard')
@section('page-title','Comercio Interior / Exterior')

@section('content')
<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner"><h3>{{ $totalClientes }}</h3><p>Clientes activos</p></div>
            <div class="icon"><i class="fas fa-users"></i></div>
            <a href="{{ route('comercial.clientes.index') }}" class="small-box-footer">Ver clientes <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner"><h3>{{ $cotizacionesMes }}</h3><p>Cotizaciones este mes</p></div>
            <div class="icon"><i class="fas fa-file-invoice-dollar"></i></div>
            <a href="{{ route('comercial.cotizaciones.index') }}" class="small-box-footer">Ver cotizaciones <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner"><h3>{{ $pedidosActivos }}</h3><p>Pedidos en curso</p></div>
            <div class="icon"><i class="fas fa-shopping-cart"></i></div>
            <a href="{{ route('comercial.pedidos.index') }}" class="small-box-footer">Ver pedidos <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-danger">
            <div class="inner"><h3>{{ $exportEnTransito }}</h3><p>Exportaciones en tránsito</p></div>
            <div class="icon"><i class="fas fa-ship"></i></div>
            <a href="{{ route('comercial.exportaciones.index') }}" class="small-box-footer">Ver exportaciones <i class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
</div>

{{-- Pipeline comercial --}}
<div class="row mb-2">
    <div class="col-12">
        <div class="card card-outline card-success mb-0">
            <div class="card-header py-2">
                <h3 class="card-title"><i class="fas fa-filter mr-1 text-success"></i> Pipeline Comercial</h3>
            </div>
            <div class="card-body py-3">
                <div class="row text-center">
                    @foreach($pipeline as $i => $stage)
                    <div class="col-md-3 col-sm-6 mb-2">
                        <div style="border:2px solid {{ $stage['color'] }};border-radius:10px;padding:16px 8px;position:relative;">
                            <i class="{{ $stage['icon'] }} fa-2x mb-2" style="color:{{ $stage['color'] }}"></i>
                            <div style="font-size:30px;font-weight:bold;color:{{ $stage['color'] }}">{{ $stage['count'] }}</div>
                            <div class="text-muted" style="font-size:12px;">{{ $stage['label'] }}</div>
                            @if($stage['valor'] > 0)
                            <div class="mt-1">
                                <span style="font-size:11px;background:{{ $stage['color'] }};color:#fff;border-radius:10px;padding:2px 8px;">
                                    S/ {{ number_format($stage['valor'],0) }}
                                </span>
                            </div>
                            @endif
                            @if($i < 3)
                            <span class="d-none d-md-block" style="position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:#ccc;font-size:18px;z-index:1;">
                                <i class="fas fa-chevron-right"></i>
                            </span>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Cotizaciones sin respuesta --}}
@if($cotizacionesSinRespuesta->count())
<div class="alert alert-warning alert-dismissible mb-3">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <i class="fas fa-clock mr-2"></i>
    <strong>{{ $cotizacionesSinRespuesta->count() }} cotización(es) sin respuesta por más de 7 días:</strong>
    <ul class="mb-0 mt-1">
        @foreach($cotizacionesSinRespuesta as $cot)
        <li>
            <a href="{{ route('comercial.cotizaciones.show', $cot) }}">{{ $cot->numero }}</a>
            — <strong>{{ $cot->cliente?->nombre_display }}</strong>
            (enviada {{ $cot->created_at->diffForHumans() }})
        </li>
        @endforeach
    </ul>
</div>
@endif

<div class="row">
    {{-- Tipo de cambio --}}
    <div class="col-md-3">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-dollar-sign mr-1"></i>Tipo de Cambio</h3></div>
            <div class="card-body text-center">
                @if($tipoCambio)
                <h2 class="text-success font-weight-bold">S/ {{ number_format($tipoCambio->usd_pen,4) }}</h2>
                <small class="text-muted">por 1 USD — {{ $tipoCambio->fecha->format('d/m/Y') }}</small>
                <div class="badge badge-{{ $tipoCambio->fuente === 'bcrp' ? 'info' : 'secondary' }} mt-1">{{ strtoupper($tipoCambio->fuente) }}</div>
                @else
                <p class="text-muted">Sin registro</p>
                @endif
                <div class="mt-2">
                    <a href="{{ route('comercial.tipo-cambio.index') }}" class="btn btn-sm btn-outline-success">Registrar T/C</a>
                </div>
                <hr class="mt-2 mb-2">
                <p class="mb-0"><small class="text-muted">Ventas del mes</small></p>
                <h4 class="text-primary">S/ {{ number_format($ventasMes,2) }}</h4>
            </div>
        </div>
    </div>

    {{-- Gráfica ventas 6 meses --}}
    <div class="col-md-9">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-chart-bar mr-1"></i>Ventas últimos 6 meses (S/.)</h3></div>
            <div class="card-body">
                <canvas id="chartVentas" height="80"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {{-- Últimas cotizaciones --}}
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title"><i class="fas fa-file-alt mr-1"></i>Últimas Cotizaciones</h3>
                <a href="{{ route('comercial.cotizaciones.create') }}" class="btn btn-sm btn-success"><i class="fas fa-plus mr-1"></i>Nueva</a>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <thead class="thead-light"><tr><th>N°</th><th>Cliente</th><th>Total</th><th>Estado</th></tr></thead>
                    <tbody>
                    @forelse($ultimasCotizaciones as $cot)
                    <tr>
                        <td><a href="{{ route('comercial.cotizaciones.show', $cot) }}">{{ $cot->numero }}</a></td>
                        <td class="text-truncate" style="max-width:130px;">{{ $cot->cliente?->nombre_display }}</td>
                        <td>{{ $cot->moneda }} {{ number_format($cot->total,2) }}</td>
                        <td><span class="badge badge-{{ $cot->badge_estado }}">{{ \App\Models\CotizacionComercial::$ESTADOS[$cot->estado] }}</span></td>
                    </tr>
                    @empty
                    <tr><td colspan="4" class="text-center text-muted py-3">Sin cotizaciones</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Últimos pedidos --}}
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title"><i class="fas fa-shopping-cart mr-1"></i>Pedidos Activos</h3>
                <a href="{{ route('comercial.pedidos.create') }}" class="btn btn-sm btn-primary"><i class="fas fa-plus mr-1"></i>Nuevo</a>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <thead class="thead-light"><tr><th>N°</th><th>Cliente</th><th>Total</th><th>Estado</th></tr></thead>
                    <tbody>
                    @forelse($ultimosPedidos as $ped)
                    <tr>
                        <td><a href="{{ route('comercial.pedidos.show', $ped) }}">{{ $ped->numero }}</a></td>
                        <td class="text-truncate" style="max-width:130px;">{{ $ped->cliente?->nombre_display }}</td>
                        <td>{{ $ped->moneda }} {{ number_format($ped->total,2) }}</td>
                        <td><span class="badge badge-{{ $ped->badge_estado }}">{{ \App\Models\PedidoComercial::$ESTADOS[$ped->estado] }}</span></td>
                    </tr>
                    @empty
                    <tr><td colspan="4" class="text-center text-muted py-3">Sin pedidos activos</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Exportaciones en tránsito --}}
@if($exportaciones->count())
<div class="card">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-ship mr-1"></i>Exportaciones en tránsito</h3></div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead class="thead-light"><tr><th>N°</th><th>Cliente</th><th>Destino</th><th>B/L</th><th>Zarpe</th><th>ETA</th><th>Estado</th></tr></thead>
            <tbody>
            @foreach($exportaciones as $exp)
            <tr>
                <td><a href="{{ route('comercial.exportaciones.show',$exp) }}">{{ $exp->numero }}</a></td>
                <td>{{ $exp->cliente?->nombre_display }}</td>
                <td>{{ $exp->pais_destino ?? $exp->puerto_destino ?? '—' }}</td>
                <td><code>{{ $exp->numero_bl ?? '—' }}</code></td>
                <td>{{ $exp->fecha_zarpe?->format('d/m/Y') ?? '—' }}</td>
                <td>{{ $exp->fecha_llegada_estimada?->format('d/m/Y') ?? '—' }}</td>
                <td><span class="badge badge-{{ \App\Models\Exportacion::$BADGE[$exp->estado] ?? 'secondary' }}">{{ \App\Models\Exportacion::$ESTADOS[$exp->estado] }}</span></td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

@push('scripts')
<script>
const ctx = document.getElementById('chartVentas').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: {!! json_encode(array_column($ventasPorMes,'mes')) !!},
        datasets: [{
            label: 'Ventas S/.',
            data: {!! json_encode(array_column($ventasPorMes,'total')) !!},
            backgroundColor: 'rgba(46,125,50,0.7)',
            borderColor: '#2E7D32',
            borderWidth: 1,
        }]
    },
    options: { scales: { y: { beginAtZero: true } }, plugins: { legend: { display: false } } }
});
</script>
@endpush
@endsection