@extends('layouts.app')

@section('titulo', 'Reportes')

@section('contenido')

<style>
    .report-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
    }

    .report-tab {
        transition: all .2s ease;
    }

    .report-table {
        width: 100%;
        border-collapse: collapse;
    }

    .report-table th {
        background: #f8fafc;
        color: #64748b;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 12px;
        border-bottom: 1px solid #e2e8f0;
        white-space: nowrap;
    }

    .report-table td {
        padding: 12px;
        border-bottom: 1px solid #f1f5f9;
        font-size: 12px;
        color: #334155;
    }

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

    .kpi-card {
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        background: white;
        padding: 18px;
    }

    @media print {
        .no-print {
            display: none !important;
        }

        body {
            background: #fff !important;
        }

        .report-card {
            box-shadow: none !important;
        }
    }
</style>

@php
    $tipo = $tipo ?? 'ventas';
    $desde = $desde ?? now()->startOfMonth()->toDateString();
    $hasta = $hasta ?? now()->toDateString();
@endphp

<div class="space-y-5">

    {{-- HEADER --}}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">

        <div>
            <h1 class="text-xl font-black text-slate-800">
                Reportes
            </h1>

            <p class="text-xs text-slate-400 mt-1">
                Consulta ventas, productos, inventario y utilidad.
            </p>
        </div>

        <div class="flex gap-2 no-print">

            <a
                href="{{ route('reportes.export', array_merge(request()->query(), ['tipo' => $tipo])) }}"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-emerald-600 text-white text-xs font-black hover:bg-emerald-700"
            >
                ⬇ Exportar Excel
            </a>

            <button
                type="button"
                onclick="window.print()"
                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-slate-800 text-white text-xs font-black hover:bg-slate-900"
            >
                🖨 Imprimir
            </button>

        </div>

    </div>


    {{-- TABS --}}
    <div class="report-card p-2 no-print">

        <div class="grid grid-cols-2 md:grid-cols-4 gap-2">

            @foreach([
                'ventas' => 'Ventas',
                'productos' => 'Productos más vendidos',
                'inventario' => 'Inventario valorizado',
                'utilidades' => 'Utilidades'
            ] as $k => $label)

                <a
                    href="{{ route('reportes.index', array_merge(request()->query(), ['tipo' => $k])) }}"
                    class="report-tab rounded-xl px-4 py-3 text-xs font-black text-center
                        {{ $tipo === $k
                            ? 'bg-slate-800 text-white shadow'
                            : 'bg-slate-50 text-slate-600 hover:bg-slate-100' }}"
                >
                    {{ $label }}
                </a>

            @endforeach

        </div>

    </div>


    {{-- =========================================================
         FILTROS
    ========================================================== --}}

    @if($tipo !== 'inventario')

        <div class="report-card p-4 no-print">

            <form
                method="GET"
                action="{{ route('reportes.index') }}"
            >

                <input
                    type="hidden"
                    name="tipo"
                    value="{{ $tipo }}"
                >

                <div class="grid grid-cols-1 md:grid-cols-2
                            {{ $tipo === 'utilidades' ? 'xl:grid-cols-4' : 'xl:grid-cols-3' }}
                            gap-3">

                    {{-- DESDE --}}
                    <div>
                        <label class="block text-[10px] font-black uppercase text-slate-500 mb-1.5">
                            Desde
                        </label>

                        <input
                            type="date"
                            name="desde"
                            value="{{ $desde }}"
                            class="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:border-slate-500 focus:outline-none"
                        >
                    </div>


                    {{-- HASTA --}}
                    <div>
                        <label class="block text-[10px] font-black uppercase text-slate-500 mb-1.5">
                            Hasta
                        </label>

                        <input
                            type="date"
                            name="hasta"
                            value="{{ $hasta }}"
                            class="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:border-slate-500 focus:outline-none"
                        >
                    </div>


                    @if($tipo === 'utilidades')

                        {{-- VENDEDOR --}}
                        <div>

                            <label class="block text-[10px] font-black uppercase text-slate-500 mb-1.5">
                                Cajero / vendedor
                            </label>

                            <select
                                name="vendedor_id"
                                class="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:border-slate-500 focus:outline-none"
                            >

                                <option value="">
                                    Todos
                                </option>

                                @foreach(($vendedores ?? collect()) as $vendedor)

                                    <option
                                        value="{{ $vendedor['id'] }}"
                                        {{ (string)($vendedorSeleccionado ?? '') === (string)$vendedor['id'] ? 'selected' : '' }}
                                    >
                                        {{ $vendedor['name'] }}
                                    </option>

                                @endforeach

                            </select>

                        </div>


                        {{-- ORDEN --}}
                        <div>

                            <label class="block text-[10px] font-black uppercase text-slate-500 mb-1.5">
                                Ordenar por
                            </label>

                            <select
                                name="orden"
                                class="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:border-slate-500 focus:outline-none"
                            >

                                <option
                                    value="reciente"
                                    {{ ($ordenUtilidad ?? 'reciente') === 'reciente' ? 'selected' : '' }}
                                >
                                    Más recientes
                                </option>

                                <option
                                    value="antiguo"
                                    {{ ($ordenUtilidad ?? '') === 'antiguo' ? 'selected' : '' }}
                                >
                                    Más antiguos
                                </option>

                                <option
                                    value="utilidad_mayor"
                                    {{ ($ordenUtilidad ?? '') === 'utilidad_mayor' ? 'selected' : '' }}
                                >
                                    Mayor utilidad
                                </option>

                                <option
                                    value="utilidad_menor"
                                    {{ ($ordenUtilidad ?? '') === 'utilidad_menor' ? 'selected' : '' }}
                                >
                                    Menor utilidad
                                </option>

                                <option
                                    value="venta_mayor"
                                    {{ ($ordenUtilidad ?? '') === 'venta_mayor' ? 'selected' : '' }}
                                >
                                    Mayor venta
                                </option>

                                <option
                                    value="productos_mayor"
                                    {{ ($ordenUtilidad ?? '') === 'productos_mayor' ? 'selected' : '' }}
                                >
                                    Más productos vendidos
                                </option>

                            </select>

                        </div>

                    @endif

                </div>


                <div class="mt-3 flex justify-end">

                    <button
                        type="submit"
                        class="px-5 py-2.5 rounded-xl bg-slate-800 text-white text-xs font-black hover:bg-slate-900"
                    >
                        Generar reporte
                    </button>

                </div>

            </form>

        </div>

    @endif


    {{-- =========================================================
         VENTAS
    ========================================================== --}}

    @if($tipo === 'ventas')

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">

            <div class="kpi-card">
                <div class="text-[10px] font-black uppercase text-slate-400">
                    Ventas
                </div>

                <div class="mt-2 text-xl font-black text-slate-800">
                    S/ {{ number_format($kpis['total'] ?? 0, 2) }}
                </div>
            </div>

            <div class="kpi-card">
                <div class="text-[10px] font-black uppercase text-slate-400">
                    IGV
                </div>

                <div class="mt-2 text-xl font-black text-slate-800">
                    S/ {{ number_format($kpis['igv'] ?? 0, 2) }}
                </div>
            </div>

            <div class="kpi-card">
                <div class="text-[10px] font-black uppercase text-slate-400">
                    Operaciones
                </div>

                <div class="mt-2 text-xl font-black text-slate-800">
                    {{ number_format($kpis['num'] ?? 0) }}
                </div>
            </div>

            <div class="kpi-card">
                <div class="text-[10px] font-black uppercase text-slate-400">
                    Ticket promedio
                </div>

                <div class="mt-2 text-xl font-black text-slate-800">
                    S/ {{ number_format($kpis['ticket'] ?? 0, 2) }}
                </div>
            </div>

        </div>

        <div class="report-card p-5">

            <h2 class="text-sm font-black text-slate-800">
                Ventas por día
            </h2>

            <div class="mt-4 h-72">
                <canvas id="ventasChart"></canvas>
            </div>

        </div>

        <div class="report-card overflow-hidden">

            <div class="p-5 border-b border-slate-100">
                <h2 class="text-sm font-black text-slate-800">
                    Métodos de pago
                </h2>
            </div>

            <div class="overflow-x-auto">

                <table class="report-table">

                    <thead>
                        <tr>
                            <th>Método</th>
                            <th>Operaciones</th>
                            <th>Total</th>
                        </tr>
                    </thead>

                    <tbody>

                        @forelse(($porMetodo ?? collect()) as $row)

                            <tr>
                                <td class="font-bold">
                                    {{ $row->metodo_pago }}
                                </td>

                                <td>
                                    {{ $row->n }}
                                </td>

                                <td class="font-black">
                                    S/ {{ number_format($row->monto, 2) }}
                                </td>
                            </tr>

                        @empty

                            <tr>
                                <td colspan="3" class="text-center text-slate-400">
                                    No hay información.
                                </td>
                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    @endif


    {{-- =========================================================
         PRODUCTOS
    ========================================================== --}}

    @if($tipo === 'productos')

        <div class="report-card p-5">

            <h2 class="text-sm font-black text-slate-800">
                Productos más vendidos
            </h2>

            <div class="mt-4 h-72">
                <canvas id="productosChart"></canvas>
            </div>

        </div>

        <div class="report-card overflow-hidden">

            <div class="overflow-x-auto">

                <table class="report-table">

                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th>Unidades</th>
                            <th>Ingresos</th>
                        </tr>
                    </thead>

                    <tbody>

                        @forelse(($topProductos ?? collect()) as $producto)

                            <tr>
                                <td class="font-bold">
                                    {{ $producto->nombre }}
                                </td>

                                <td>
                                    {{ number_format($producto->unidades, 0) }}
                                </td>

                                <td class="font-black">
                                    S/ {{ number_format($producto->ingresos, 2) }}
                                </td>
                            </tr>

                        @empty

                            <tr>
                                <td colspan="3" class="text-center text-slate-400">
                                    No hay información.
                                </td>
                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    @endif


    {{-- =========================================================
         INVENTARIO
    ========================================================== --}}

    @if($tipo === 'inventario')

        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">

            <div class="kpi-card">
                <div class="text-[10px] font-black uppercase text-slate-400">
                    Valor a costo
                </div>

                <div class="mt-2 text-xl font-black text-slate-800">
                    S/ {{ number_format($invKpis['costo'] ?? 0, 2) }}
                </div>
            </div>

            <div class="kpi-card">
                <div class="text-[10px] font-black uppercase text-slate-400">
                    Valor a venta
                </div>

                <div class="mt-2 text-xl font-black text-slate-800">
                    S/ {{ number_format($invKpis['venta'] ?? 0, 2) }}
                </div>
            </div>

            <div class="kpi-card">
                <div class="text-[10px] font-black uppercase text-slate-400">
                    Unidades
                </div>

                <div class="mt-2 text-xl font-black text-slate-800">
                    {{ number_format($invKpis['unidades'] ?? 0) }}
                </div>
            </div>

        </div>

        <div class="report-card overflow-hidden">

            <div class="overflow-x-auto">

                <table class="report-table">

                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th>Categoría</th>
                            <th>Stock</th>
                            <th>P. compra</th>
                            <th>P. venta</th>
                            <th>Valor venta</th>
                        </tr>
                    </thead>

                    <tbody>

                        @forelse(($invProductos ?? collect()) as $producto)

                            <tr>

                                <td class="font-bold">
                                    {{ $producto->nombre }}
                                </td>

                                <td>
                                    {{ $producto->categoria?->nombre ?? '—' }}
                                </td>

                                <td>
                                    {{ number_format($producto->stock, 0) }}
                                </td>

                                <td>
                                    S/ {{ number_format($producto->precio_compra, 2) }}
                                </td>

                                <td>
                                    S/ {{ number_format($producto->precio_venta, 2) }}
                                </td>

                                <td class="font-black">
                                    S/
                                    {{ number_format(
                                        $producto->stock * $producto->precio_venta,
                                        2
                                    ) }}
                                </td>

                            </tr>

                        @empty

                            <tr>
                                <td colspan="6" class="text-center text-slate-400">
                                    No hay productos.
                                </td>
                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    @endif


    {{-- =========================================================
         UTILIDADES
    ========================================================== --}}

    @if($tipo === 'utilidades')

        {{-- KPIs --}}
        <div class="grid grid-cols-2 lg:grid-cols-5 gap-3">

            <div class="kpi-card">
                <div class="text-[10px] font-black uppercase text-slate-400">
                    Ventas
                </div>

                <div class="mt-2 text-lg lg:text-xl font-black text-slate-800">
                    S/ {{ number_format($utilidadKpis['ventas'] ?? 0, 2) }}
                </div>
            </div>

            <div class="kpi-card">
                <div class="text-[10px] font-black uppercase text-slate-400">
                    Costo
                </div>

                <div class="mt-2 text-lg lg:text-xl font-black text-slate-800">
                    S/ {{ number_format($utilidadKpis['costo'] ?? 0, 2) }}
                </div>
            </div>

            <div class="kpi-card">

                <div class="text-[10px] font-black uppercase text-slate-400">
                    Utilidad
                </div>

                <div class="mt-2 text-lg lg:text-xl font-black
                    {{ ($utilidadKpis['utilidad'] ?? 0) >= 0
                        ? 'text-emerald-600'
                        : 'text-red-600' }}"
                >
                    S/ {{ number_format($utilidadKpis['utilidad'] ?? 0, 2) }}
                </div>

            </div>

            <div class="kpi-card">

                <div class="text-[10px] font-black uppercase text-slate-400">
                    Margen
                </div>

                <div class="mt-2 text-lg lg:text-xl font-black text-blue-600">
                    {{ number_format($utilidadKpis['margen'] ?? 0, 2) }}%
                </div>

            </div>

            <div class="kpi-card">

                <div class="text-[10px] font-black uppercase text-slate-400">
                    Unidades
                </div>

                <div class="mt-2 text-lg lg:text-xl font-black text-slate-800">
                    {{ number_format($utilidadKpis['unidades'] ?? 0, 0) }}
                </div>

            </div>

        </div>


        {{-- INFORMACIÓN DEL IGV --}}
        <div class="rounded-xl border border-blue-100 bg-blue-50 px-4 py-3">

            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2">

                <div>

                    <div class="text-xs font-black text-blue-800">
                        Cálculo de utilidad
                    </div>

                    <div class="text-[11px] text-blue-700 mt-1">
                        La venta se calcula sin IGV antes de compararla
                        contra el costo.
                    </div>

                </div>

                <div class="text-xs font-black text-blue-800">
                    IGV aplicado:
                    {{ number_format($igvUtilidad ?? 0, 2) }}%
                </div>

            </div>

        </div>


        {{-- GRÁFICO --}}
        <div class="report-card p-5">

            <div class="flex items-center justify-between gap-3">

                <div>
                    <h2 class="text-sm font-black text-slate-800">
                        Utilidad por venta
                    </h2>

                    <p class="text-[10px] text-slate-400 mt-1">
                        Primeras 10 operaciones según el orden seleccionado.
                    </p>
                </div>

            </div>

            <div class="mt-4 h-72">
                <canvas id="utilidadesChart"></canvas>
            </div>

        </div>


        {{-- TABLA DE VENTAS --}}
        <div class="report-card overflow-hidden">

            <div class="p-5 border-b border-slate-100">

                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2">

                    <div>

                        <h2 class="text-sm font-black text-slate-800">
                            Detalle de utilidad por venta
                        </h2>

                        <p class="text-[10px] text-slate-400 mt-1">
                            {{ $utilidadKpis['operaciones'] ?? 0 }}
                            operaciones encontradas.
                        </p>

                    </div>

                    <div class="text-xs text-slate-500">
                        Margen:
                        <strong class="text-slate-800">
                            {{ number_format($utilidadKpis['margen'] ?? 0, 2) }}%
                        </strong>
                    </div>

                </div>

            </div>

            <div class="overflow-x-auto">

                <table class="report-table">

                    <thead>

                        <tr>

                            <th>Comprobante</th>

                            <th>Fecha</th>

                            <th>Cliente</th>

                            <th>Cajero</th>

                            <th>Pago</th>

                            <th>Total</th>

                            <th>Costo</th>

                            <th>Utilidad</th>

                            <th>Margen</th>

                            <th>Acción</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse(($utilidades ?? collect()) as $venta)

                            <tr>

                                <td>
                                    <span class="font-black text-slate-700">
                                        {{ $venta->numero_comprobante }}
                                    </span>
                                </td>

                                <td class="whitespace-nowrap">
                                    {{ $venta->created_at->format('d/m/Y H:i') }}
                                </td>

                                <td>
                                    {{ $venta->cliente }}
                                </td>

                                <td>
                                    {{ $venta->cajero ?: '—' }}
                                </td>

                                <td>
                                    {{ $venta->metodo_pago }}
                                </td>

                                <td class="font-black">
                                    S/ {{ number_format($venta->total, 2) }}
                                </td>

                                <td>
                                    S/ {{ number_format($venta->costo, 2) }}
                                </td>

                                <td>

                                    <span
                                        class="font-black
                                            {{ $venta->utilidad >= 0
                                                ? 'text-emerald-600'
                                                : 'text-red-600' }}"
                                    >
                                        S/ {{ number_format($venta->utilidad, 2) }}
                                    </span>

                                </td>

                                <td>
                                    {{ number_format($venta->margen, 2) }}%
                                </td>

                                <td>

                                    <a
                                        href="{{ url('/pos/ticket/' . $venta->id) }}"
                                        class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-slate-100 text-slate-700 text-[10px] font-black hover:bg-slate-200 whitespace-nowrap"
                                    >
                                        🖨 Ticket
                                    </a>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td
                                    colspan="10"
                                    class="py-10 text-center text-slate-400"
                                >
                                    No hay ventas para los filtros seleccionados.

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>


        {{-- PRODUCTOS CON MAYOR UTILIDAD --}}
        <div class="report-card overflow-hidden">

            <div class="p-5 border-b border-slate-100">

                <h2 class="text-sm font-black text-slate-800">
                    Productos con mayor utilidad
                </h2>

                <p class="text-[10px] text-slate-400 mt-1">
                    Se calcula usando el costo del lote cuando está disponible.
                </p>

            </div>

            <div class="overflow-x-auto">

                <table class="report-table">

                    <thead>

                        <tr>
                            <th>Producto</th>
                            <th>Unidades</th>
                            <th>Venta neta</th>
                            <th>Costo</th>
                            <th>Utilidad</th>
                            <th>Margen</th>
                        </tr>

                    </thead>

                    <tbody>

                        @forelse(($productosUtilidad ?? collect()) as $producto)

                            <tr>

                                <td class="font-bold">
                                    {{ $producto->nombre }}
                                </td>

                                <td>
                                    {{ number_format($producto->unidades, 0) }}
                                </td>

                                <td>
                                    S/ {{ number_format($producto->venta, 2) }}
                                </td>

                                <td>
                                    S/ {{ number_format($producto->costo, 2) }}
                                </td>

                                <td>

                                    <span
                                        class="font-black
                                            {{ $producto->utilidad >= 0
                                                ? 'text-emerald-600'
                                                : 'text-red-600' }}"
                                    >
                                        S/ {{ number_format($producto->utilidad, 2) }}
                                    </span>

                                </td>

                                <td>
                                    {{ number_format($producto->margen, 2) }}%
                                </td>

                            </tr>

                        @empty

                            <tr>
                                <td colspan="6" class="text-center text-slate-400 py-8">
                                    No hay información.
                                </td>
                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    @endif

</div>


{{-- =============================================================
     CHART.JS
============================================================== --}}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

document.addEventListener('DOMContentLoaded', function () {

    @if($tipo === 'ventas')

        const ventasCanvas =
            document.getElementById('ventasChart');

        if (ventasCanvas) {

            new Chart(ventasCanvas, {
                type: 'line',

                data: {
                    labels: @json($chartLabels ?? []),

                    datasets: [{
                        label: 'Ventas',
                        data: @json($chartData ?? []),
                        borderWidth: 2,
                        tension: .35,
                        fill: false
                    }]
                },

                options: {
                    responsive: true,
                    maintainAspectRatio: false,

                    plugins: {
                        legend: {
                            display: false
                        }
                    },

                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

        }

    @endif


    @if($tipo === 'productos')

        const productosCanvas =
            document.getElementById('productosChart');

        if (productosCanvas) {

            new Chart(productosCanvas, {
                type: 'bar',

                data: {
                    labels: @json($chartLabels ?? []),

                    datasets: [{
                        label: 'Unidades',
                        data: @json($chartData ?? []),
                        borderWidth: 1
                    }]
                },

                options: {
                    responsive: true,
                    maintainAspectRatio: false,

                    plugins: {
                        legend: {
                            display: false
                        }
                    },

                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

        }

    @endif


    @if($tipo === 'utilidades')

        const utilidadesCanvas =
            document.getElementById('utilidadesChart');

        if (utilidadesCanvas) {

            new Chart(utilidadesCanvas, {
                type: 'bar',

                data: {
                    labels: @json($utilidadChartLabels ?? []),

                    datasets: [{
                        label: 'Utilidad',
                        data: @json($utilidadChartData ?? []),
                        borderWidth: 1
                    }]
                },

                options: {
                    responsive: true,
                    maintainAspectRatio: false,

                    plugins: {
                        legend: {
                            display: false
                        }
                    },

                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

        }

    @endif

});

</script>

@endsection