@extends('dashboard.body.main')

@section('container')
<style>
    .kpi-card {
        transition: all 0.25s ease;
        border: 1px solid #F1F5F9 !important;
    }
    .kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px -8px rgba(0,0,0,0.1) !important;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            @if (session()->has('success'))
                <div class="alert text-white bg-success" role="alert">
                    <div class="iq-alert-text">{{ session('success') }}</div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <i class="ri-close-line"></i>
                    </button>
                </div>
            @endif
        </div>

        {{-- Bienvenida --}}
        <div class="col-lg-12 mb-4">
            <div class="card border-0 shadow-sm rounded-xl p-3 bg-white" style="border-radius: 16px;">
                <div class="d-flex align-items-center justify-content-between flex-wrap" style="gap: 12px;">
                    <div>
                        <h3 class="font-weight-extrabold text-dark mb-1">¡Hola {{ auth()->user()->name }}! 🙂</h3>
                        <p class="text-muted mb-0 font-size-13">Te damos la bienvenida a tu panel de administración. Aquí tienes un resumen del estado de tu negocio.</p>
                    </div>
                    <a href="{{ route('pos.index') }}" class="btn btn-primary font-weight-bold px-4" style="background-color: var(--mh-pink) !important; border-color: var(--mh-pink) !important; border-radius: 10px; font-size: 13.5px; height: 38px; display: inline-flex; align-items: center;">
                        <i class="fa-solid fa-cart-shopping mr-2"></i> Abrir Punto de Venta (POS)
                    </a>
                </div>
            </div>
        </div>

        {{-- 3 Tarjetas KPI Principales (Más compactas y con iconos correctos Remixicon) --}}
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card border-0 shadow-sm rounded-xl p-3 bg-white text-dark h-100 kpi-card" style="border-radius: 14px; border-left: 5px solid var(--mh-pink) !important;">
                <div class="d-flex align-items-center">
                    <div class="rounded-circle d-inline-flex align-items-center justify-content-center mr-3 shadow-xs" style="width: 42px; height: 42px; background-color: var(--mh-pink-light); color: var(--mh-pink); flex-shrink: 0;">
                        <i class="ri-hand-coin-line" style="font-size: 20px;"></i>
                    </div>
                    <div class="text-truncate">
                        <span class="text-muted font-size-11 font-weight-bold text-uppercase d-block">Ventas de Hoy</span>
                        <h4 class="font-weight-extrabold my-0.5 text-dark" style="color: var(--mh-pink) !important; font-weight: 800;">${{ number_format((float)$today_sales, 0, ',', '.') }}</h4>
                        <small class="text-muted font-size-11">Ingresos del día</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card border-0 shadow-sm rounded-xl p-3 bg-white text-dark h-100 kpi-card" style="border-radius: 14px; border-left: 5px solid #F59E0B !important;">
                <div class="d-flex align-items-center">
                    <div class="rounded-circle d-inline-flex align-items-center justify-content-center mr-3 shadow-xs" style="width: 42px; height: 42px; background-color: #FFFBEB; color: #D97706; flex-shrink: 0;">
                        <i class="ri-coupon-3-line" style="font-size: 20px;"></i>
                    </div>
                    <div class="text-truncate">
                        <span class="text-muted font-size-11 font-weight-bold text-uppercase d-block">Venta Promedio</span>
                        <h4 class="font-weight-extrabold my-0.5 text-warning" style="font-weight: 800;">${{ number_format((float)$avg_sales, 0, ',', '.') }}</h4>
                        <small class="text-muted font-size-11">Ticket promedio de compra</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card border-0 shadow-sm rounded-xl p-3 bg-white text-dark h-100 kpi-card" style="border-radius: 14px; border-left: 5px solid #22C55E !important;">
                <div class="d-flex align-items-center">
                    <div class="rounded-circle d-inline-flex align-items-center justify-content-center mr-3 shadow-xs" style="width: 42px; height: 42px; background-color: #F0FDF4; color: #15803D; flex-shrink: 0;">
                        <i class="ri-checkbox-circle-line" style="font-size: 20px;"></i>
                    </div>
                    <div class="text-truncate">
                        <span class="text-muted font-size-11 font-weight-bold text-uppercase d-block">Pedidos Completados</span>
                        <h4 class="font-weight-extrabold my-0.5 text-success" style="font-weight: 800;">{{ count($complete_orders) }}</h4>
                        <small class="text-muted font-size-11">Ventas exitosas registradas</small>
                    </div>
                </div>
            </div>
        </div>

        {{-- Sección de Reportes y Gráficos Estadísticos Detallados --}}
        <div class="col-lg-12 mb-4">
            <div class="row">
                {{-- Flujo de Ventas Diarias --}}
                <div class="col-lg-8 mb-4">
                    <div class="card border-0 shadow-sm rounded-xl bg-white p-4" style="border-radius: 16px; min-height: 380px;">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="font-weight-bold text-dark mb-0">
                                <i class="fas fa-chart-line text-primary mr-2" style="color: var(--mh-pink) !important;"></i> Flujo de Ventas Diarias (Últimos 15 Días)
                            </h5>
                            <span class="badge badge-light border text-muted px-2.5 py-1 font-size-11" style="border-radius: 6px;">Total ingresos</span>
                        </div>
                        <div style="position: relative; height: 280px; width: 100%;">
                            <canvas id="chart-daily-sales"></canvas>
                        </div>
                    </div>
                </div>

                {{-- Distribución de Métodos de Pago --}}
                <div class="col-lg-4 mb-4">
                    <div class="card border-0 shadow-sm rounded-xl bg-white p-4" style="border-radius: 16px; min-height: 380px;">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="font-weight-bold text-dark mb-0">
                                <i class="fas fa-chart-pie text-success mr-2"></i> Métodos de Pago
                            </h5>
                        </div>
                        <div style="position: relative; height: 260px; width: 100%;" class="d-flex align-items-center justify-content-center">
                            <canvas id="chart-payment-methods"></canvas>
                        </div>
                    </div>
                </div>

                {{-- Horas Pic (Frecuencia Horaria de Ventas) --}}
                <div class="col-lg-12 mb-4">
                    <div class="card border-0 shadow-sm rounded-xl bg-white p-4" style="border-radius: 16px; min-height: 350px;">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="font-weight-bold text-dark mb-0">
                                <i class="fas fa-clock text-warning mr-2"></i> Horas Pic de Compras (Frecuencia de transacciones - Últimos 30 Días)
                            </h5>
                            <span class="badge badge-light border text-muted px-2.5 py-1 font-size-11" style="border-radius: 6px;">Cantidad de ventas</span>
                        </div>
                        <div style="position: relative; height: 250px; width: 100%;">
                            <canvas id="chart-hourly-peak"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Productos con menor stock (Crítico) --}}
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm rounded-xl bg-white p-4 h-100" style="border-radius: 16px;">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h5 class="font-weight-bold text-dark mb-0"><i class="fa-solid fa-triangle-exclamation text-danger mr-2"></i> Productos con Stock Crítico (Alerta)</h5>
                    <a href="{{ route('products.index') }}" class="btn btn-sm btn-light border font-weight-bold" style="border-radius: 8px;">Ver catálogo</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead style="background-color: #FFF9FB; border-bottom: 2px solid #FFE5EC;">
                            <tr>
                                <th>Código</th>
                                <th>Nombre</th>
                                <th class="text-center">Stock Disponible</th>
                                <th class="text-right">Precio Venta</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($products as $product)
                            <tr>
                                <td class="font-weight-bold text-muted">{{ $product->product_code }}</td>
                                <td>
                                    <strong class="text-dark font-size-13">{{ $product->product_name }}</strong>
                                </td>
                                <td class="text-center">
                                    <span class="badge {{ $product->product_store <= 2 ? 'badge-danger' : 'badge-warning' }} px-2.5 py-1 font-weight-bold" style="border-radius: 6px;">
                                        {{ $product->product_store }} unidades
                                    </span>
                                </td>
                                <td class="text-right font-weight-bold text-dark">${{ number_format($product->selling_price, 0, ',', '.') }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center py-3 text-muted">Todos los productos tienen stock normal.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Nuevos Productos Registrados --}}
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm rounded-xl bg-white p-4 h-100" style="border-radius: 16px;">
                <h5 class="font-weight-bold text-dark mb-3"><i class="fa-solid fa-box-open text-primary mr-2"></i> Últimos Registros</h5>
                <div class="d-flex flex-column" style="gap: 12px;">
                    @forelse ($new_products as $product)
                    <div class="d-flex align-items-center p-3" style="border-radius: 12px; background: linear-gradient(135deg, #FFF9FA 0%, #FFFFFF 100%); border: 1px solid #FFE5EC !important;">
                        <div class="bg-white rounded p-1 mr-3 border shadow-xs d-flex align-items-center justify-content-center" style="width: 46px; height: 46px; flex-shrink: 0; border-color: #FFE5EC !important;">
                            @if($product->product_image && file_exists(storage_path('app/public/products/'.$product->product_image)))
                                <img src="{{ asset('storage/products/'.$product->product_image) }}" class="rounded" style="width: 100%; height: 100%; object-fit: cover;">
                            @else
                                <i class="fa-solid fa-box text-muted font-size-18"></i>
                            @endif
                        </div>
                        <div class="text-truncate">
                            <strong class="text-dark font-size-13 d-block text-truncate" title="{{ $product->product_name }}">{{ $product->product_name }}</strong>
                            <span class="text-muted font-size-11 d-block">Stock: {{ $product->product_store }} unidades</span>
                            <span class="font-weight-bold text-primary font-size-12 d-block" style="color: var(--mh-pink) !important;">${{ number_format((float)$product->selling_price, 0, ',', '.') }}</span>
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-4 text-muted">No se registran productos nuevos.</div>
                    @endforelse
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('specificpagescripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        @php
            // --- 1. PROCESAR DATOS DE VENTAS DIARIAS ---
            $dailyLabels = [];
            $dailyData = [];
            for ($i = 14; $i >= 0; $i--) {
                $dateObj = now()->subDays($i);
                $dateStr = $dateObj->toDateString();
                $labelStr = $dateObj->format('d/m');
                $dailyLabels[] = $labelStr;
                
                $match = $dailySales->firstWhere('date', $dateStr);
                $dailyData[] = $match ? (float)$match->total : 0;
            }

            // --- 2. PROCESAR DATOS HORAS PIC ---
            $hourlyLabels = [];
            $hourlyData = [];
            for ($hour = 8; $hour <= 22; $hour++) {
                $hourlyLabels[] = sprintf('%02d:00', $hour);
                $match = $hourlySales->firstWhere('hour', $hour);
                $hourlyData[] = $match ? (int)$match->count : 0;
            }

            // --- 3. PROCESAR DATOS MÉTODOS DE PAGO ---
            $paymentLabels = ['Efectivo', 'Tarjeta', 'Mixto'];
            $paymentData = [0, 0, 0];
            foreach ($paymentStats as $stat) {
                if ($stat->payment_status === 'HandCash') {
                    $paymentData[0] += (float)$stat->total;
                } elseif ($stat->payment_status === 'Tarjeta') {
                    $paymentData[1] += (float)$stat->total;
                } elseif ($stat->payment_status === 'Mixto') {
                    $paymentData[2] += (float)$stat->total;
                }
            }
        @endphp

        // 1. Gráfico de Flujo de Ventas Diarias
        const ctxDaily = document.getElementById('chart-daily-sales').getContext('2d');
        new Chart(ctxDaily, {
            type: 'line',
            data: {
                labels: {!! json_encode($dailyLabels) !!},
                datasets: [{
                    label: 'Ingresos ($)',
                    data: {!! json_encode($dailyData) !!},
                    borderColor: '#FF2B66',
                    backgroundColor: 'rgba(255, 43, 102, 0.08)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.35,
                    pointBackgroundColor: '#FF2B66',
                    pointHoverRadius: 7
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { color: '#F1F5F9' },
                        ticks: {
                            callback: function(value) {
                                return '$' + value.toLocaleString('es-CL');
                            }
                        }
                    },
                    x: {
                        grid: { display: false }
                    }
                }
            }
        });

        // 2. Gráfico de Métodos de Pago
        const ctxPayment = document.getElementById('chart-payment-methods').getContext('2d');
        new Chart(ctxPayment, {
            type: 'doughnut',
            data: {
                labels: {!! json_encode($paymentLabels) !!},
                datasets: [{
                    data: {!! json_encode($paymentData) !!},
                    backgroundColor: ['#22C55E', '#3B82F6', '#F59E0B'],
                    borderWidth: 2,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12,
                            font: { size: 11 }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return ` ${context.label}: $${context.raw.toLocaleString('es-CL')}`;
                            }
                        }
                    }
                },
                cutout: '65%'
            }
        });

        // 3. Gráfico de Horas Pic de Ventas
        const ctxHourly = document.getElementById('chart-hourly-peak').getContext('2d');
        new Chart(ctxHourly, {
            type: 'bar',
            data: {
                labels: {!! json_encode($hourlyLabels) !!},
                datasets: [{
                    label: 'Frecuencia de ventas',
                    data: {!! json_encode($hourlyData) !!},
                    backgroundColor: 'rgba(245, 158, 11, 0.85)',
                    hoverBackgroundColor: '#F59E0B',
                    borderRadius: 6,
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { color: '#F1F5F9' },
                        ticks: { stepSize: 1 }
                    },
                    x: {
                        grid: { display: false }
                    }
                }
            }
        });
    });
</script>
@endsection