@extends('layouts.app')

@section('content')
<style>
.rep-tab {
    border: none; border-radius: 20px; padding: 6px 16px; font-size: .8rem; font-weight: 700;
    background: #fff; color: #495057; border: 1.5px solid #e9ecef; transition: all .15s; white-space: nowrap;
}
.rep-tab.active { color: #fff; border-color: transparent; }
.rep-tab:hover:not(.active) { border-color: #adb5bd; }
.kpi-card { border-radius: 14px; padding: 14px 16px; color: #fff; }
.kpi-card .kpi-label { font-size: .72rem; opacity: .9; text-transform: uppercase; letter-spacing: .3px; }
.kpi-card .kpi-value { font-size: 1.5rem; font-weight: 800; }
</style>

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h2 class="fw-bold text-dark mb-0"><i class="bi bi-bar-chart-fill me-2"></i>Reportes Gerenciales</h2>
            <p class="text-muted mb-0 small">Análisis detallado de rendimiento</p>
        </div>

        <form action="{{ route('reports.index') }}" method="GET" class="d-flex gap-2 bg-white p-2 rounded shadow-sm border align-items-end">
            <input type="hidden" name="tipo" value="{{ $tipo }}">
            <div>
                <label class="small text-muted fw-bold mb-0">Desde</label>
                <input type="date" name="start_date" class="form-control form-control-sm" value="{{ $startDate }}">
            </div>
            <div>
                <label class="small text-muted fw-bold mb-0">Hasta</label>
                <input type="date" name="end_date" class="form-control form-control-sm" value="{{ $endDate }}">
            </div>
            <button class="btn btn-primary btn-sm fw-bold px-3">
                <i class="bi bi-filter"></i> Analizar
            </button>
        </form>
    </div>

    @php
        $tabs = [
            'resumen'      => ['label' => '📊 Resumen',        'color' => '#0d6efd'],
            'diario'       => ['label' => '📅 Por día',        'color' => '#0d6efd'],
            'utilidad'     => ['label' => '💰 Utilidad',       'color' => '#198754'],
            'pagos'        => ['label' => '💳 Métodos de pago','color' => '#6f42c1'],
            'mesas'        => ['label' => '🪑 Por mesa/área',  'color' => '#fd7e14'],
            'horas'        => ['label' => '⏰ Por hora',       'color' => '#0dcaf0'],
            'comprobantes' => ['label' => '🧾 Comprobantes',   'color' => '#6610f2'],
            'gastos'       => ['label' => '💸 Gastos',         'color' => '#dc3545'],
            'personal'     => ['label' => '👤 Personal',       'color' => '#d63384'],
        ];
    @endphp
    <div class="d-flex gap-2 flex-wrap mb-3">
        @foreach($tabs as $key => $t)
            <a href="{{ route('reports.index', array_merge(request()->except('tipo','page'), ['tipo' => $key])) }}"
               class="rep-tab {{ $tipo === $key ? 'active' : '' }}"
               style="{{ $tipo === $key ? 'background:'.$t['color'] : '' }}">
                {{ $t['label'] }}
            </a>
        @endforeach
    </div>

    @if($tipo === 'resumen')
        <div class="row g-3 mb-3">
            <div class="col-6 col-md-3">
                <div class="kpi-card" style="background:linear-gradient(135deg,#0d6efd,#4dabf7)">
                    <div class="kpi-label"><i class="bi bi-receipt"></i> Ventas</div>
                    <div class="kpi-value">{{ number_format($kpiVentas) }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="kpi-card" style="background:linear-gradient(135deg,#198754,#40c057)">
                    <div class="kpi-label"><i class="bi bi-cash-stack"></i> Ingresos</div>
                    <div class="kpi-value">{{ $currency }}{{ number_format($kpiIngresos, 2) }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="kpi-card" style="background:linear-gradient(135deg,#6f42c1,#9775fa)">
                    <div class="kpi-label"><i class="bi bi-graph-up"></i> Ticket Promedio</div>
                    <div class="kpi-value">{{ $currency }}{{ number_format($kpiTicketProm, 2) }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="kpi-card" style="background:linear-gradient(135deg,#fd7e14,#ffa94d)">
                    <div class="kpi-label"><i class="bi bi-piggy-bank"></i> Propinas</div>
                    <div class="kpi-value">{{ $currency }}{{ number_format($kpiPropinas, 2) }}</div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white py-2"><h6 class="fw-bold mb-0">Ingresos por Categoría</h6></div>
                    <div class="card-body"><div style="height:280px"><canvas id="categoryChart"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header text-white py-2" style="background:#198754"><h6 class="fw-bold mb-0"><i class="bi bi-trophy-fill me-1"></i> Top 5: Platos Estrella</h6></div>
                    <div class="card-body p-0">
                        <table class="table table-hover mb-0 align-middle">
                            <thead class="table-light"><tr><th class="ps-3">Producto</th><th class="text-center">Cant.</th><th class="text-end pe-3">Ingresos</th></tr></thead>
                            <tbody>
                                @forelse($topProducts as $prod)
                                    <tr><td class="ps-3 fw-bold">{{ $prod->name }}</td><td class="text-center"><span class="badge bg-success rounded-pill">{{ $prod->qty }}</span></td><td class="text-end pe-3 text-success fw-bold">{{ $currency }}{{ number_format($prod->revenue, 2) }}</td></tr>
                                @empty
                                    <tr><td colspan="3" class="text-center text-muted py-3">Sin datos</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header text-dark py-2" style="background:#ffc107"><h6 class="fw-bold mb-0"><i class="bi bi-exclamation-circle-fill me-1"></i> Ojo: Platos Menos Vendidos</h6></div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light"><tr><th class="ps-3">Producto</th><th class="text-end pe-3">Cant. Vendida</th></tr></thead>
                    <tbody>
                        @forelse($worstProducts as $prod)
                            <tr><td class="ps-3 text-secondary">{{ $prod->name }}</td><td class="text-end pe-3 fw-bold">{{ $prod->qty }}</td></tr>
                        @empty
                            <tr><td colspan="2" class="text-center text-muted py-3">Sin datos</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    @elseif($tipo === 'diario')
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header text-white py-2" style="background:#0d6efd"><h6 class="fw-bold mb-0"><i class="bi bi-calendar3"></i> Ventas por día</h6></div>
            <div class="card-body"><div style="height:280px"><canvas id="dailyChart"></canvas></div></div>
        </div>
        <div class="card border-0 shadow-sm">
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light"><tr><th class="ps-3">Fecha</th><th class="text-center">N° Ventas</th><th class="text-end pe-3">Ingresos</th></tr></thead>
                    <tbody>
                        @forelse($ventasDiarias as $d)
                            <tr><td class="ps-3">{{ \Carbon\Carbon::parse($d->dia)->format('d/m/Y') }}</td><td class="text-center">{{ $d->num_ventas }}</td><td class="text-end pe-3 fw-bold text-primary">{{ $currency }}{{ number_format($d->ingresos, 2) }}</td></tr>
                        @empty
                            <tr><td colspan="3" class="text-center text-muted py-3">Sin datos</td></tr>
                        @endforelse
                    </tbody>
                    @if($ventasDiarias->count())
                    <tfoot class="table-primary"><tr><td class="fw-bold ps-3">TOTAL</td><td class="text-center fw-bold">{{ $ventasDiarias->sum('num_ventas') }}</td><td class="text-end pe-3 fw-bold">{{ $currency }}{{ number_format($ventasDiarias->sum('ingresos'), 2) }}</td></tr></tfoot>
                    @endif
                </table>
            </div>
        </div>

    @elseif($tipo === 'utilidad')
        @php $ti=$tc=$tu=0; @endphp
        <div class="card border-0 shadow-sm">
            <div class="card-header text-white py-2" style="background:#198754"><h6 class="fw-bold mb-0"><i class="bi bi-cash-coin"></i> Utilidad (Ingresos − Costo de productos)</h6></div>
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light"><tr><th class="ps-3">Fecha</th><th class="text-end">Ingresos</th><th class="text-end">Costos</th><th class="text-end">Utilidad</th><th class="text-center pe-3">Margen</th></tr></thead>
                    <tbody>
                        @forelse($utilidad as $d)
                            @php
                                $ti+=$d->ingresos; $tc+=$d->costos; $u=$d->ingresos-$d->costos; $tu+=$u;
                                $m = $d->ingresos>0 ? round($u/$d->ingresos*100,1) : 0;
                                $color = $u >= 0 ? 'success' : 'danger';
                            @endphp
                            <tr>
                                <td class="ps-3">{{ \Carbon\Carbon::parse($d->dia)->format('d/m/Y') }}</td>
                                <td class="text-end">{{ $currency }}{{ number_format($d->ingresos, 2) }}</td>
                                <td class="text-end text-danger">-{{ $currency }}{{ number_format($d->costos, 2) }}</td>
                                <td class="text-end fw-bold text-{{ $color }}">{{ $currency }}{{ number_format($u, 2) }}</td>
                                <td class="text-center pe-3">{{ $m }}%</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center text-muted py-3">Sin datos</td></tr>
                        @endforelse
                    </tbody>
                    @if($utilidad->count())
                    @php $tm = $ti>0?round($tu/$ti*100,1):0; @endphp
                    <tfoot class="table-{{ $tu>=0?'success':'danger' }}">
                        <tr><td class="fw-bold ps-3">TOTAL</td><td class="text-end fw-bold">{{ $currency }}{{ number_format($ti,2) }}</td><td class="text-end fw-bold">-{{ $currency }}{{ number_format($tc,2) }}</td><td class="text-end fw-bold">{{ $currency }}{{ number_format($tu,2) }}</td><td class="text-center pe-3 fw-bold">{{ $tm }}%</td></tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        </div>

    @elseif($tipo === 'pagos')
        <div class="row g-3">
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header text-white py-2" style="background:#6f42c1"><h6 class="fw-bold mb-0"><i class="bi bi-credit-card"></i> Métodos de pago</h6></div>
                    <div class="card-body"><div style="height:280px"><canvas id="paymentChart"></canvas></div></div>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm h-100">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 align-middle">
                            <thead class="table-light"><tr><th class="ps-3">Método</th><th class="text-center">N° Ventas</th><th class="text-end pe-3">Total</th></tr></thead>
                            <tbody>
                                @forelse($pagos as $p)
                                    <tr><td class="ps-3 fw-bold text-capitalize">{{ $p->payment_method ?? 'Sin especificar' }}</td><td class="text-center">{{ $p->num_ventas }}</td><td class="text-end pe-3 fw-bold" style="color:#6f42c1">{{ $currency }}{{ number_format($p->total, 2) }}</td></tr>
                                @empty
                                    <tr><td colspan="3" class="text-center text-muted py-3">Sin datos</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    @elseif($tipo === 'mesas')
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header text-white py-2" style="background:#fd7e14"><h6 class="fw-bold mb-0"><i class="bi bi-table"></i> Ventas por mesa</h6></div>
            <div class="card-body"><div style="height:280px"><canvas id="tableChart"></canvas></div></div>
        </div>
        <div class="card border-0 shadow-sm">
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light"><tr><th class="ps-3">Mesa</th><th>Área</th><th class="text-center">N° Ventas</th><th class="text-end pe-3">Total</th></tr></thead>
                    <tbody>
                        @forelse($mesas as $m)
                            <tr><td class="ps-3 fw-bold">{{ $m->mesa }}</td><td>{{ $m->area }}</td><td class="text-center">{{ $m->num_ventas }}</td><td class="text-end pe-3 fw-bold" style="color:#fd7e14">{{ $currency }}{{ number_format($m->total, 2) }}</td></tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted py-3">Sin datos (ventas de mesón, no de mesas específicas)</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    @elseif($tipo === 'horas')
        <div class="card border-0 shadow-sm">
            <div class="card-header text-white py-2" style="background:#0dcaf0"><h6 class="fw-bold mb-0"><i class="bi bi-clock-history"></i> Ventas por hora del día — identifica tus horas pico</h6></div>
            <div class="card-body"><div style="height:320px"><canvas id="hoursChart"></canvas></div></div>
        </div>

    @elseif($tipo === 'comprobantes')
        <div class="card border-0 shadow-sm">
            <div class="card-header text-white py-2" style="background:#6610f2"><h6 class="fw-bold mb-0"><i class="bi bi-receipt-cutoff"></i> Comprobantes emitidos</h6></div>
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light"><tr><th class="ps-3">Tipo</th><th>Estado SUNAT</th><th class="text-center">Cantidad</th><th class="text-end pe-3">Total</th></tr></thead>
                    <tbody>
                        @forelse($comprobantes as $c)
                            @php
                                $colorEstado = match($c->sunat_status) {
                                    'ACCEPTED' => 'success', 'OBSERVED' => 'warning', 'PENDING' => 'secondary', 'ERROR', 'REJECTED' => 'danger', default => 'secondary',
                                };
                            @endphp
                            <tr>
                                <td class="ps-3 fw-bold">{{ $c->document_type }}</td>
                                <td><span class="badge bg-{{ $colorEstado }}">{{ $c->sunat_status ?? 'N/A' }}</span></td>
                                <td class="text-center">{{ $c->cantidad }}</td>
                                <td class="text-end pe-3 fw-bold" style="color:#6610f2">{{ $currency }}{{ number_format($c->total, 2) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted py-3">Sin datos</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    @elseif($tipo === 'gastos')
        @php $utilidadNeta = $totalIngresos - $totalGastos; @endphp
        <div class="row g-3 mb-3">
            <div class="col-md-4">
                <div class="kpi-card" style="background:linear-gradient(135deg,#198754,#40c057)">
                    <div class="kpi-label">Ingresos</div>
                    <div class="kpi-value">{{ $currency }}{{ number_format($totalIngresos, 2) }}</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="kpi-card" style="background:linear-gradient(135deg,#dc3545,#ff6b6b)">
                    <div class="kpi-label">Gastos</div>
                    <div class="kpi-value">{{ $currency }}{{ number_format($totalGastos, 2) }}</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="kpi-card" style="background:linear-gradient(135deg,{{ $utilidadNeta>=0?'#0d6efd,#4dabf7':'#dc3545,#ff6b6b' }})">
                    <div class="kpi-label">Utilidad Neta</div>
                    <div class="kpi-value">{{ $currency }}{{ number_format($utilidadNeta, 2) }}</div>
                </div>
            </div>
        </div>
        <div class="card border-0 shadow-sm">
            <div class="card-header text-white py-2" style="background:#dc3545"><h6 class="fw-bold mb-0"><i class="bi bi-wallet2"></i> Detalle de gastos</h6></div>
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light"><tr><th class="ps-3">Fecha</th><th>Descripción</th><th>Registrado por</th><th class="text-end pe-3">Monto</th></tr></thead>
                    <tbody>
                        @forelse($gastos as $g)
                            <tr><td class="ps-3">{{ $g->created_at->format('d/m/Y') }}</td><td>{{ $g->description }}</td><td class="text-muted small">{{ $g->user->name ?? '—' }}</td><td class="text-end pe-3 fw-bold text-danger">-{{ $currency }}{{ number_format($g->amount, 2) }}</td></tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted py-3">Sin gastos registrados</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    @elseif($tipo === 'personal')
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header text-white py-2" style="background:#d63384"><h6 class="fw-bold mb-0"><i class="bi bi-people-fill"></i> Ranking de ventas por personal</h6></div>
            <div class="card-body"><div style="height:280px"><canvas id="waiterChart"></canvas></div></div>
        </div>
        <div class="card border-0 shadow-sm">
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light"><tr><th class="ps-3">Personal</th><th class="text-center">N° Ventas</th><th class="text-end pe-3">Total Vendido</th></tr></thead>
                    <tbody>
                        @forelse($salesByWaiter as $w)
                            <tr><td class="ps-3 fw-bold">{{ $w->name }}</td><td class="text-center">{{ $w->orders_count }}</td><td class="text-end pe-3 fw-bold" style="color:#d63384">{{ $currency }}{{ number_format($w->total_sales, 2) }}</td></tr>
                        @empty
                            <tr><td colspan="3" class="text-center text-muted py-3">Sin datos</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    @endif
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
@if($tipo === 'resumen')
    new Chart(document.getElementById('categoryChart'), {
        type: 'doughnut',
        data: { labels: @json($catLabels), datasets: [{ data: @json($catValues), backgroundColor: ['#0d6efd','#198754','#ffc107','#dc3545','#6610f2','#0dcaf0','#fd7e14','#d63384'], borderWidth: 1 }] },
        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right' } } }
    });
@elseif($tipo === 'diario')
    new Chart(document.getElementById('dailyChart'), {
        type: 'bar',
        data: {
            labels: @json($ventasDiarias->map(fn($d) => \Carbon\Carbon::parse($d->dia)->format('d/m'))),
            datasets: [{ label: 'Ingresos ({{ $currency }})', data: @json($ventasDiarias->pluck('ingresos')), backgroundColor: 'rgba(13,110,253,.7)', borderRadius: 5 }]
        },
        options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
    });
@elseif($tipo === 'pagos')
    new Chart(document.getElementById('paymentChart'), {
        type: 'pie',
        data: { labels: @json($pagos->pluck('payment_method')), datasets: [{ data: @json($pagos->pluck('total')), backgroundColor: ['#6f42c1','#9775fa','#b197fc','#d0bfff','#845ef7'] }] },
        options: { responsive: true, maintainAspectRatio: false }
    });
@elseif($tipo === 'mesas')
    new Chart(document.getElementById('tableChart'), {
        type: 'bar',
        data: { labels: @json($mesas->pluck('mesa')), datasets: [{ label: 'Total ({{ $currency }})', data: @json($mesas->pluck('total')), backgroundColor: 'rgba(253,126,20,.75)', borderRadius: 5 }] },
        options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
    });
@elseif($tipo === 'horas')
    const horasData = new Array(24).fill(0);
    @foreach($horas as $h) horasData[{{ $h->hora }}] = {{ $h->total }}; @endforeach
    new Chart(document.getElementById('hoursChart'), {
        type: 'bar',
        data: {
            labels: Array.from({length:24}, (_,i) => i + ':00'),
            datasets: [{ label: 'Ingresos ({{ $currency }})', data: horasData, backgroundColor: 'rgba(13,202,240,.75)', borderRadius: 5 }]
        },
        options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
    });
@elseif($tipo === 'personal')
    new Chart(document.getElementById('waiterChart'), {
        type: 'bar',
        data: { labels: @json($salesByWaiter->pluck('name')), datasets: [{ label: 'Ventas ({{ $currency }})', data: @json($salesByWaiter->pluck('total_sales')), backgroundColor: 'rgba(214,51,132,.75)', borderRadius: 5 }] },
        options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
    });
@endif
</script>
@endsection