@extends('template.desktop.app')

@section('content')
    <div class="row g-6">
        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-primary h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-primary"><i
                                    class="icon-base ti tabler-shopping-cart-check icon-28px"></i></span>
                        </div>
                        <h4 class="mb-0">{{ $card_order['count_order_today'] }}</h4>
                    </div>
                    <p class="mb-1">Pesanan Hari ini</p>
                    <p class="mb-0">
                        @php
                            $percentage = $card_order['percentage_change'];
                            $isPositive = $percentage >= 0;
                        @endphp

                        <span class="fw-medium me-2 {{ $isPositive ? 'text-success' : 'text-danger' }}">
                            {{ $isPositive ? '+' : '' }}{{ $percentage }}%
                        </span>
                        <small class="text-body-secondary">Dibandingkan Hari kemarin</small>
                    </p>

                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-warning h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-warning">
                                <i class="icon-base ti tabler-users icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0">{{ $card_agents['count_active_agents'] }}</h4>
                    </div>
                    <p class="mb-1">Total Agen Aktif</p>

                    @php
                        $isPositive = $card_agents['percentage_change'] >= 0;
                    @endphp

                    <p class="mb-0">
                        <span class="fw-medium me-2 {{ $isPositive ? 'text-success' : 'text-danger' }}">
                            {{ $isPositive ? '+' : '' }}{{ $card_agents['percentage_change'] }}%
                        </span>
                        <small class="text-body-secondary">dibanding bulan lalu</small>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-danger h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-danger">
                                <i class="icon-base ti tabler-building-warehouse icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0">{{ $card_partners['count_active_partners'] }}</h4>
                    </div>
                    <p class="mb-1">Total Mitra Aktif</p>

                    @php
                        $isPositive = $card_partners['percentage_change'] >= 0;
                    @endphp

                    <p class="mb-0">
                        <span class="fw-medium me-2 {{ $isPositive ? 'text-success' : 'text-danger' }}">
                            {{ $isPositive ? '+' : '' }}{{ $card_partners['percentage_change'] }}%
                        </span>
                        <small class="text-body-secondary">dibanding bulan lalu</small>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-info h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-info">
                                <i class="icon-base ti tabler-moneybag icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0">Rp {{ $card_revenue['revenue_total'] }}</h4>
                    </div>
                    <p class="mb-1">Total Pendapatan</p>

                    @php
                        $isPositive = $card_revenue['revenue_change'] >= 0;
                    @endphp

                    <p class="mb-0">
                        <span class="fw-medium me-2 {{ $isPositive ? 'text-success' : 'text-danger' }}">
                            {{ $isPositive ? '+' : '' }}{{ $card_revenue['revenue_change'] }}%
                        </span>
                        <small class="text-body-secondary">dibanding bulan lalu</small>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-success h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-success">
                                <i class="icon-base ti tabler-circle-dashed-check icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0">{{ $card_completed['completed_total'] }}</h4>
                    </div>
                    <p class="mb-1">Total Pesanan Selesai</p>

                    @php
                        $isPositive = $card_completed['completed_change'] >= 0;
                    @endphp

                    <p class="mb-0">
                        <span class="fw-medium me-2 {{ $isPositive ? 'text-success' : 'text-danger' }}">
                            {{ $isPositive ? '+' : '' }}{{ $card_completed['completed_change'] }}%
                        </span>
                        <small class="text-body-secondary">dibanding bulan lalu</small>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-danger h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-danger">
                                <i class="icon-base ti tabler-arrow-back-up icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0">{{ $card_returned['returned_total'] }}</h4>
                    </div>
                    <p class="mb-1">Pesanan Dikembalikan</p>

                    @php
                        $isPositive = $card_returned['returned_change'] >= 0;
                    @endphp

                    <p class="mb-0">
                        <span class="fw-medium me-2 {{ $isPositive ? 'text-success' : 'text-danger' }}">
                            {{ $isPositive ? '+' : '' }}{{ $card_returned['returned_change'] }}%
                        </span>
                        <small class="text-body-secondary">dibanding bulan lalu</small>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-primary h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-primary">
                                <i class="icon-base ti tabler-package icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0">
                            {{ $card_box_sales['total_box'] > 0 ? $card_box_sales['total_box'] . ' Box' : '0 Box' }}, {{ $card_box_sales['remaining_sachet'] > 0 ? $card_box_sales['remaining_sachet'] . ' Sachet' : '0 Sachet' }}
                        </h4>
                    </div>
                    <p class="mb-1">Penjualan Box</p>
                    <p class="mb-0">
                        @php $isPositive = $card_box_sales['percentage_change'] >= 0; @endphp
                        <span class="fw-medium me-2 {{ $isPositive ? 'text-success' : 'text-danger' }}">
                            {{ $isPositive ? '+' : '' }}{{ $card_box_sales['percentage_change'] }}%
                        </span>
                        <small class="text-body-secondary">dibanding bulan lalu</small>
                    </p>

                    @if ($card_box_sales['total_box'] == 0 && $card_box_sales['has_sales'])
                        <p class="text-warning mt-1 small mb-0">
                            *Penjualan terjadi, namun belum mencapai 1 box
                        </p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6">
            <div class="card card-border-shadow-secondary h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar me-4">
                            <span class="avatar-initial rounded bg-label-secondary">
                                <i class="icon-base ti tabler-user-plus icon-28px"></i>
                            </span>
                        </div>
                        <h4 class="mb-0">{{ $card_new_customers['count'] }}</h4>
                    </div>
                    <p class="mb-1">Pelanggan Baru</p>
                    @php $isPositive = $card_new_customers['percentage_change'] >= 0; @endphp
                    <p class="mb-0">
                        <span class="fw-medium me-2 {{ $isPositive ? 'text-success' : 'text-danger' }}">
                            {{ $isPositive ? '+' : '' }}{{ $card_new_customers['percentage_change'] }}%
                        </span>
                        <small class="text-body-secondary">dibanding bulan lalu</small>
                    </p>
                </div>
            </div>
        </div>

    </div>

    <div class="row g-6 mt-3">
        <div class="col-xxl-8 col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">Tren Penjualan Harian</h5>
                    <p class="card-subtitle">Mengingat statistik penjualan harian dalam bulan ini.</p>
                </div>
                <div class="card-body">
                    <div id="lineChart"></div>
                </div>
            </div>
        </div>

        <div class="col-xxl-4 col-md-6">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title m-0 me-2">
                        <h5 class="mb-1">Top 10 Wilayah Order</h5>
                        <p class="card-subtitle">Wilayah dengan jumlah order terbanyak</p>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="p-0 m-0" id="topAreaList">
                        <li class="d-flex mb-6">
                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                <div class="me-2">
                                    <h6 class="mb-0">Memuat data...</h6>
                                </div>
                                <div class="user-progress d-flex align-items-center gap-1">
                                    <p class="mb-0">&nbsp;</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const chartEl = document.querySelector("#lineChart");

            if (!chartEl) return;

            axios.get("/admin/dashboard/sales-trend-daily")
                .then(response => {
                    const {
                        categories,
                        data
                    } = response.data;

                    const lineChartOptions = {
                        chart: {
                            height: 300,
                            type: "line",
                            parentHeightOffset: 0,
                            zoom: {
                                enabled: false
                            },
                            toolbar: {
                                show: false
                            }
                        },
                        series: [{
                            name: "Pesanan",
                            data: data
                        }],
                        markers: {
                            strokeWidth: 7,
                            strokeOpacity: 1,
                            strokeColors: [config.colors.warning],
                            colors: [config.colors.warning]
                        },
                        dataLabels: {
                            enabled: false
                        },
                        stroke: {
                            curve: "straight"
                        },
                        colors: [config.colors.warning],
                        grid: {
                            borderColor: '#ebe9f1',
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -20
                            }
                        },
                        tooltip: {
                            custom: function({
                                series,
                                seriesIndex,
                                dataPointIndex
                            }) {
                                return `<div class="px-3 py-2"><span>${series[seriesIndex][dataPointIndex]} pesanan</span></div>`;
                            }
                        },
                        xaxis: {
                            categories: categories,
                            axisBorder: {
                                show: false
                            },
                            axisTicks: {
                                show: false
                            },
                            labels: {
                                style: {
                                    colors: '#6e6b7b',
                                    fontSize: "13px"
                                }
                            }
                        },
                        yaxis: {
                            min: 0,
                            tickAmount: 5,
                            labels: {
                                style: {
                                    colors: '#6e6b7b',
                                    fontSize: "13px"
                                }
                            }
                        }
                    };

                    const chart = new ApexCharts(chartEl, lineChartOptions);
                    chart.render();
                })
                .catch(error => {
                    console.error("Gagal ambil data chart:", error);
                });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const list = document.getElementById("topAreaList");

            axios.get("/admin/dashboard/top-order-cities")
                .then(response => {
                    const cities = response.data;
                    const list = document.getElementById("topAreaList");
                    list.innerHTML = "";

                    cities.forEach((city, index) => {
                        const li = `
                            <li class="d-flex mb-6">
                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                    <div class="me-2">
                                    <h6 class="mb-0">${city.city}</h6>
                                    <small class="text-body d-block">Jumlah order: ${city.total_orders}</small>
                                    </div>
                                    <div class="user-progress d-flex align-items-center gap-1">
                                    <p class="mb-0">#${index + 1}</p>
                                    </div>
                                </div>
                            </li>
                        `;
                        list.innerHTML += li;
                    });
                })
                .catch(() => {
                    const list = document.getElementById("topAreaList");
                    list.innerHTML = `
                        <li class="d-flex mb-6">
                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                <div class="me-2">
                                    <h6 class="mb-0">Gagal memuat data.</h6>
                                </div>
                            </div>
                        </li>
                    `;
                });

        });
    </script>
@endpush