@extends('layouts.app')
@section('titulo', 'Reportes')

@section('contenido')

<style>
/* Estilos principales para replicar el diseño de los otros módulos */
.table-premium {
    border-collapse: collapse;
    width: 100%;
}

.table-premium thead {
    background: #f8fafc;
    text-transform: uppercase;
    font-size: .7rem;
    color: #64748b;
    letter-spacing: 0.05em;
}

.table-premium thead th {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    text-align: left;
}

.table-premium tbody td {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    vertical-align: middle;
}

.table-premium tbody tr:hover {
    background: #f8fafc;
}

/* Estilos para el contenedor de la tabla */
.table-container {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Header */
.header-section {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

.header-icon {
    width: 36px;
    height: 36px;
    background: #dbeafe;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
}

.header-icon svg {
    width: 18px;
    height: 18px;
}

/* KPI Cards */
.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

.kpi-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.kpi-card .kpi-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #94a3b8;
}

.kpi-card .kpi-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 4px;
}

.kpi-card .kpi-value.brand {
    color: #2563eb;
}

/* Pestañas */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tab-link {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tab-link.active {
    background: #0f172a;
    color: white;
}

.tab-link.inactive {
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.tab-link.inactive:hover {
    background: #f8fafc;
}

/* Filtros */
.filters-section {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group .filter-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 4px;
}

.filter-date {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fafbfc;
    transition: all 0.2s ease;
}

.filter-date:focus {
    outline: none;
    border-color: #2563eb;
    background: white;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.btn-generate {
    padding: 8px 24px;
    background: #0f172a;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-generate:hover {
    background: #1e293b;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-export:hover {
    background: #f8fafc;
}

.btn-export svg {
    color: #059669;
}

.btn-print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    background: #2563eb;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-print:hover {
    background: #1d4ed8;
}

/* Método de pago table */
.method-table td:last-child {
    text-align: right;
    font-weight: 600;
}

/* Anchos fijos para las columnas - Productos */
.col-prod-rank { width: 8%; }
.col-prod-nombre { width: 52%; }
.col-prod-unidades { width: 20%; }
.col-prod-ingresos { width: 20%; }

/* Anchos fijos para las columnas - Inventario */
.col-inv-producto { width: 30%; }
.col-inv-categoria { width: 22%; }
.col-inv-stock { width: 13%; }
.col-inv-precio { width: 17%; }
.col-inv-valor { width: 18%; }

/* Anchos fijos para las columnas - Métodos */
.col-metodo { width: 50%; }
.col-metodo-n { width: 20%; }
.col-metodo-monto { width: 30%; }

/* Breadcrumb */
.breadcrumb {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 2px;
}

@media print {
    .no-print { display: none !important; }
    aside, header, footer { display: none !important; }
    .lg\:pl-64 { padding-left: 0 !important; }
    body { background: #fff; }
    .table-container { border: 1px solid #e2e8f0; }
    .table-premium thead th,
    .table-premium tbody td {
        border-color: #e2e8f0 !important;
    }
}
</style>

<div class="max-w-[1650px] mx-auto space-y-4 px-4 sm:px-6">

    {{-- HEADER --}}
    <div class="header-section no-print">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <div class="breadcrumb">Gerencia & Control</div>
                <div class="flex items-center gap-3 mt-1">
                    <div class="header-icon">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"/>
                        </svg>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-slate-800">Reportes</h1>
                    </div>
                </div>
            </div>

            <div class="flex gap-2">
                <a href="{{ route('reportes.export', array_filter(['tipo'=>$tipo,'desde'=>$desde,'hasta'=>$hasta])) }}"
                   class="btn-export">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
                    </svg>
                    Exportar Excel (CSV)
                </a>
                <button onclick="window.print()" class="btn-print">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z"/>
                    </svg>
                    Imprimir / PDF
                </button>
            </div>
        </div>
    </div>

    {{-- PESTAÑAS --}}
    <div class="tabs no-print">
        @foreach (['ventas'=>'Ventas','productos'=>'Productos más vendidos','inventario'=>'Inventario valorizado'] as $k=>$label)
            <a href="{{ route('reportes.index', array_filter(['tipo'=>$k,'desde'=>$desde,'hasta'=>$hasta])) }}"
               class="tab-link {{ $tipo===$k ? 'active' : 'inactive' }}">
                {{ $label }}
            </a>
        @endforeach
    </div>

    {{-- FILTRO DE FECHAS --}}
    @if ($tipo !== 'inventario')
        <form method="GET" class="filters-section no-print">
            <input type="hidden" name="tipo" value="{{ $tipo }}">
            <div class="filters-row">
                <div class="filter-group">
                    <label class="filter-label">Desde</label>
                    <input type="date" name="desde" value="{{ $desde }}" class="filter-date">
                </div>
                <div class="filter-group">
                    <label class="filter-label">Hasta</label>
                    <input type="date" name="hasta" value="{{ $hasta }}" class="filter-date">
                </div>
                <button type="submit" class="btn-generate">Generar</button>
            </div>
        </form>
    @endif

    {{-- ENCABEZADO IMPRESO --}}
    <div class="hidden print:block">
        <h2 class="text-xl font-bold">Mi Botica — Reporte de {{ ucfirst($tipo) }}</h2>
        @if ($tipo !== 'inventario')
            <p class="text-sm text-slate-500">Período: {{ \Carbon\Carbon::parse($desde)->format('d/m/Y') }} a {{ \Carbon\Carbon::parse($hasta)->format('d/m/Y') }}</p>
        @endif
    </div>

    {{-- ===================== VENTAS ===================== --}}
    @if ($tipo === 'ventas')
        <div class="kpi-grid">
            <div class="kpi-card">
                <p class="kpi-label">Total vendido</p>
                <p class="kpi-value brand">S/ {{ number_format($kpis['total'],2) }}</p>
            </div>
            <div class="kpi-card">
                <p class="kpi-label">N° de ventas</p>
                <p class="kpi-value">{{ number_format($kpis['num']) }}</p>
            </div>
            <div class="kpi-card">
                <p class="kpi-label">Ticket promedio</p>
                <p class="kpi-value">S/ {{ number_format($kpis['ticket'],2) }}</p>
            </div>
            <div class="kpi-card">
                <p class="kpi-label">IGV recaudado</p>
                <p class="kpi-value">S/ {{ number_format($kpis['igv'],2) }}</p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
            <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
                <h3 class="font-semibold text-slate-700">Ventas por día</h3>
                <div class="mt-4 h-72"><canvas id="chartRep"></canvas></div>
            </div>

            <div class="table-container">
                <div class="px-5 py-4 border-b border-slate-100">
                    <h3 class="font-semibold text-slate-700">Por método de pago</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="table-premium">
                        <thead>
                            <tr>
                                <th class="col-metodo">MÉTODO</th>
                                <th class="col-metodo-n text-center">N°</th>
                                <th class="col-metodo-monto text-right">MONTO</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($porMetodo as $m)
                                <tr class="hover:bg-slate-50/60">
                                    <td class="col-metodo text-slate-600">{{ $m->metodo_pago }}</td>
                                    <td class="col-metodo-n text-center text-slate-400">{{ $m->n }}</td>
                                    <td class="col-metodo-monto text-right font-semibold text-slate-700">S/ {{ number_format($m->monto,2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="py-6 text-center text-slate-400">Sin datos en el período.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif

    {{-- ===================== PRODUCTOS ===================== --}}
    @if ($tipo === 'productos')
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
            <h3 class="font-semibold text-slate-700">Top productos (unidades)</h3>
            <div class="mt-4 h-72"><canvas id="chartRep"></canvas></div>
        </div>

        <div class="table-container">
            <div class="overflow-x-auto">
                <table class="table-premium">
                    <thead>
                        <tr>
                            <th class="col-prod-rank text-center">#</th>
                            <th class="col-prod-nombre">PRODUCTO</th>
                            <th class="col-prod-unidades text-center">UNIDADES</th>
                            <th class="col-prod-ingresos text-right">INGRESOS</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($topProductos as $i=>$p)
                            <tr class="hover:bg-slate-50/60">
                                <td class="col-prod-rank text-center text-slate-400">{{ $i+1 }}</td>
                                <td class="col-prod-nombre font-medium text-slate-700">{{ $p->nombre }}</td>
                                <td class="col-prod-unidades text-center font-semibold">{{ number_format($p->unidades) }}</td>
                                <td class="col-prod-ingresos text-right font-semibold text-slate-700">S/ {{ number_format($p->ingresos,2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="py-10 text-center text-slate-400">No hubo ventas en el período.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    {{-- ===================== INVENTARIO ===================== --}}
    @if ($tipo === 'inventario')
        <div class="kpi-grid">
            <div class="kpi-card">
                <p class="kpi-label">Unidades</p>
                <p class="kpi-value">{{ number_format($invKpis['unidades']) }}</p>
            </div>
            <div class="kpi-card">
                <p class="kpi-label">Valor a costo</p>
                <p class="kpi-value">S/ {{ number_format($invKpis['costo'],2) }}</p>
            </div>
            <div class="kpi-card">
                <p class="kpi-label">Valor a venta</p>
                <p class="kpi-value brand">S/ {{ number_format($invKpis['venta'],2) }}</p>
            </div>
        </div>

        <div class="table-container">
            <div class="overflow-x-auto">
                <table class="table-premium">
                    <thead>
                        <tr>
                            <th class="col-inv-producto">PRODUCTO</th>
                            <th class="col-inv-categoria">CATEGORÍA</th>
                            <th class="col-inv-stock text-center">STOCK</th>
                            <th class="col-inv-precio text-right">P. VENTA</th>
                            <th class="col-inv-valor text-right">VALOR</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($invProductos as $p)
                            <tr class="hover:bg-slate-50/60">
                                <td class="col-inv-producto font-medium text-slate-700">{{ $p->nombre }}</td>
                                <td class="col-inv-categoria text-slate-500">{{ $p->categoria?->nombre ?? '—' }}</td>
                                <td class="col-inv-stock text-center">{{ $p->stock }}</td>
                                <td class="col-inv-precio text-right text-slate-500">S/ {{ number_format($p->precio_venta,2) }}</td>
                                <td class="col-inv-valor text-right font-semibold text-slate-700">S/ {{ number_format($p->stock*$p->precio_venta,2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
</div>
@endsection

@push('scripts')
@if (in_array($tipo, ['ventas','productos']))
<script>
    (function(){
        const el = document.getElementById('chartRep');
        if (!el) return;
        Chart.defaults.font.family = "'Inter', sans-serif";
        Chart.defaults.color = '#64748b';
        new Chart(el, {
            type: 'bar',
            data: {
                labels: @json($chartLabels ?? []),
                datasets: [{
                    label: @json($tipo === 'productos' ? 'Unidades' : 'Ventas (S/)'),
                    data: @json($chartData ?? []),
                    backgroundColor: @json($tipo === 'productos' ? '#8b5cf6' : '#10b981'),
                    borderRadius: 6,
                    maxBarThickness: 40,
                }]
            },
            options: {
                indexAxis: @json($tipo === 'productos' ? 'y' : 'x'),
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { grid: { display: false } },
                    y: { beginAtZero: true }
                }
            }
        });
    })();
</script>
@endif
@endpush