@extends('admin.layouts.app')

@push('css')
<link href="{{ asset('velzon-assets/libs/apexcharts/apexcharts.min.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')

<!-- Page Title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Tablero</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item active">Tablero</li>
                </ol>
            </div>
        </div>
    </div>
</div>

@include('admin.message')

<!-- Main Metric Cards -->
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-uppercase fw-medium text-muted mb-0">Ordenes Totales</p>
                    </div>
                </div>
                <div class="d-flex align-items-end justify-content-between mt-4">
                    <div>
                        <h4 class="fs-22 fw-semibold ff-secondary mb-4">{{ number_format($totalOrders) }}</h4>
                        <a href="{{ route('orders.index') }}" class="text-decoration-underline text-muted">Ver todas</a>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-primary-subtle rounded fs-3">
                            <i class="ri-shopping-cart-2-line text-primary"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card card-animate">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-uppercase fw-medium text-muted mb-0">Productos</p>
                    </div>
                </div>
                <div class="d-flex align-items-end justify-content-between mt-4">
                    <div>
                        <h4 class="fs-22 fw-semibold ff-secondary mb-4">{{ number_format($totalProducts) }}</h4>
                        <a href="{{ route('products.index') }}" class="text-decoration-underline text-muted">Gestionar</a>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-success-subtle rounded fs-3">
                            <i class="ri-shopping-bag-line text-success"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card card-animate">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-uppercase fw-medium text-muted mb-0">Clientes</p>
                    </div>
                </div>
                <div class="d-flex align-items-end justify-content-between mt-4">
                    <div>
                        <h4 class="fs-22 fw-semibold ff-secondary mb-4">{{ number_format($totalCustomers) }}</h4>
                        <a href="{{ route('users.index') }}" class="text-decoration-underline text-muted">Ver clientes</a>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-warning-subtle rounded fs-3">
                            <i class="ri-group-line text-warning"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card card-animate">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-uppercase fw-medium text-muted mb-0">Stock Bajo</p>
                    </div>
                </div>
                <div class="d-flex align-items-end justify-content-between mt-4">
                    <div>
                        <h4 class="fs-22 fw-semibold ff-secondary mb-4">{{ number_format($totalLowStock) }}</h4>
                        <span class="text-muted fs-12">Stock actual &lt; Stock minimo</span>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-danger-subtle rounded fs-3">
                            <i class="ri-error-warning-line text-danger"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Revenue Cards -->
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-uppercase fw-medium text-muted mb-0">Ventas Totales</p>
                    </div>
                    <div class="flex-shrink-0">
                        <span class="badge bg-info-subtle text-info">Acumulado</span>
                    </div>
                </div>
                <div class="d-flex align-items-end justify-content-between mt-4">
                    <div>
                        <h4 class="fs-22 fw-semibold ff-secondary mb-4">${{ number_format($totalRevenue, 2) }}</h4>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-info-subtle rounded fs-3">
                            <i class="ri-line-chart-line text-info"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card card-animate">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-uppercase fw-medium text-muted mb-0">Mes Actual</p>
                    </div>
                    <div class="flex-shrink-0">
                        <span class="badge bg-success-subtle text-success">Este mes</span>
                    </div>
                </div>
                <div class="d-flex align-items-end justify-content-between mt-4">
                    <div>
                        <h4 class="fs-22 fw-semibold ff-secondary mb-4">${{ number_format($revenueThisMonth, 2) }}</h4>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-success-subtle rounded fs-3">
                            <i class="ri-calendar-check-line text-success"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card card-animate">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-uppercase fw-medium text-muted mb-0">{{ $lastMonthName }}</p>
                    </div>
                    <div class="flex-shrink-0">
                        <span class="badge bg-warning-subtle text-warning">Mes anterior</span>
                    </div>
                </div>
                <div class="d-flex align-items-end justify-content-between mt-4">
                    <div>
                        <h4 class="fs-22 fw-semibold ff-secondary mb-4">${{ number_format($revenueLastMonth, 2) }}</h4>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-warning-subtle rounded fs-3">
                            <i class="ri-calendar-line text-warning"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card card-animate">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-uppercase fw-medium text-muted mb-0">Ultimos 30 dias</p>
                    </div>
                    <div class="flex-shrink-0">
                        <span class="badge bg-danger-subtle text-danger">30 dias</span>
                    </div>
                </div>
                <div class="d-flex align-items-end justify-content-between mt-4">
                    <div>
                        <h4 class="fs-22 fw-semibold ff-secondary mb-4">${{ number_format($revenueLastThirtyDays, 2) }}</h4>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title bg-danger-subtle rounded fs-3">
                            <i class="ri-time-line text-danger"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row">
    <!-- Monthly Sales Chart -->
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header border-0 align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Ventas del Mes (Ultimos 12 meses)</h4>
            </div>
            <div class="card-body p-0 pb-2">
                <div id="monthlySalesChart" class="apex-charts" dir="ltr" style="min-height: 300px;"></div>
            </div>
        </div>
    </div>

    <!-- Category Sales Chart -->
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header border-0 align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Ventas por Categoria</h4>
            </div>
            <div class="card-body">
                <div id="categorySalesChart" class="apex-charts" dir="ltr" style="min-height: 300px;"></div>
            </div>
        </div>
    </div>
</div>

<!-- Data Tables -->
<div class="row">
    <!-- Top 10 Products -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Top 10 Productos Mas Vendidos</h4>
                <div class="flex-shrink-0">
                    <span class="badge bg-info-subtle text-info">Ultimos 30 dias</span>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table table-borderless table-centered align-middle table-nowrap mb-0">
                        <thead class="text-muted table-light">
                            <tr>
                                <th>Producto</th>
                                <th class="text-center">Cantidad</th>
                                <th class="text-end">Ventas</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topProducts as $product)
                                <tr>
                                    <td><span class="fw-medium">{{ $product->name }}</span></td>
                                    <td class="text-center">
                                        <span class="badge bg-primary-subtle text-primary">{{ $product->total_qty }}</span>
                                    </td>
                                    <td class="text-end fw-medium">${{ number_format($product->total_sales, 2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center text-muted py-4">
                                        <i class="ri-information-line fs-20"></i><br>No hay datos de ventas disponibles
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Low Stock Products -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Productos con Poco Stock</h4>
                <div class="flex-shrink-0">
                    <span class="badge bg-danger-subtle text-danger">{{ $totalLowStock }} productos</span>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table table-borderless table-centered align-middle table-nowrap mb-0">
                        <thead class="text-muted table-light">
                            <tr>
                                <th>Producto</th>
                                <th class="text-center">Stock Actual</th>
                                <th class="text-center">Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($lowStockProducts->take(10) as $product)
                                <tr>
                                    <td>
                                        <span class="fw-medium">{{ $product->DE_ARTI }}</span>
                                        <br><small class="text-muted">SKU: {{ $product->CO_ARTI }}</small>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-warning-subtle text-warning">{{ $product->WW_STCK }}</span>
                                    </td>
                                    <td class="text-center">
                                        @if($product->WW_STCK == 0)
                                            <span class="badge bg-danger">Sin stock</span>
                                        @elseif($product->WW_STCK < 5)
                                            <span class="badge bg-warning">Critico</span>
                                        @else
                                            <span class="badge bg-info">Bajo</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center text-success py-4">
                                        <i class="ri-checkbox-circle-line fs-20"></i><br>Todos los productos tienen stock suficiente
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($totalLowStock > 10)
            <div class="card-footer text-center">
                <a href="{{ route('products.index') }}?filter=low_stock" class="btn btn-sm btn-warning">
                    Ver todos los {{ $totalLowStock }} productos <i class="ri-arrow-right-line align-middle"></i>
                </a>
            </div>
            @endif
        </div>
    </div>
</div>

@endsection

@push('js')
<script src="{{ asset('velzon-assets/libs/apexcharts/apexcharts.min.js') }}"></script>
<script>
// Data from PHP
var monthlySalesData = @json($monthlySales);
var categorySalesData = @json($salesByCategory);

// Monthly Sales - Column Chart
var monthlySalesOptions = {
    series: [{
        name: 'Ventas ($)',
        data: monthlySalesData.map(item => item.revenue)
    }],
    chart: {
        type: 'bar',
        height: 300,
        toolbar: { show: false }
    },
    plotOptions: {
        bar: {
            borderRadius: 4,
            columnWidth: '45%',
        }
    },
    colors: ['#405189'],
    dataLabels: { enabled: false },
    xaxis: {
        categories: monthlySalesData.map(item => item.month),
    },
    yaxis: {
        labels: {
            formatter: function(val) {
                return '$' + new Intl.NumberFormat().format(val);
            }
        }
    },
    tooltip: {
        y: {
            formatter: function(val) {
                return '$' + new Intl.NumberFormat().format(val);
            }
        }
    },
    grid: {
        borderColor: '#f1f1f1',
    }
};
var monthlySalesChart = new ApexCharts(document.querySelector("#monthlySalesChart"), monthlySalesOptions);
monthlySalesChart.render();

// Category Sales - Donut Chart
if (categorySalesData.length > 0) {
    var categorySalesOptions = {
        series: categorySalesData.map(item => item.total_sales),
        chart: {
            type: 'donut',
            height: 300,
        },
        labels: categorySalesData.map(item => item.DE_CATEGOR || item.name),
        colors: ['#405189', '#0ab39c', '#f7b84b', '#f06548', '#299cdb'],
        legend: {
            position: 'bottom'
        },
        tooltip: {
            y: {
                formatter: function(val) {
                    return '$' + new Intl.NumberFormat().format(val);
                }
            }
        },
        plotOptions: {
            pie: {
                donut: {
                    size: '65%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function(w) {
                                return '$' + new Intl.NumberFormat().format(w.globals.seriesTotals.reduce((a, b) => a + b, 0));
                            }
                        }
                    }
                }
            }
        }
    };
    var categorySalesChart = new ApexCharts(document.querySelector("#categorySalesChart"), categorySalesOptions);
    categorySalesChart.render();
} else {
    document.querySelector('#categorySalesChart').innerHTML = '<div class="d-flex align-items-center justify-content-center" style="min-height:300px"><div class="text-center text-muted"><i class="ri-pie-chart-line fs-36 mb-3"></i><br>No hay datos de ventas por categoria</div></div>';
}
</script>
@endpush