@extends('mobile_layouts.app')

@section('modal_partials')
    @include('mobile_layouts.partials.menu_bar')
@endsection
@section('header')
    <div class="header-avt fixed-top">
        <a href="setup-profile.html" class="box-avt">
            <div class="avt">
                <img src="https://cdn-icons-png.flaticon.com/128/10612/10612550.png" alt="avt">
            </div>
            <div class="content">
                <span class="body-4 text-dark-4">Selamat Datang!</span>
                <h4 class="name">
                    {{ Auth::user()->customerService->full_name }}
                    <img class="icon" src="https://cdn-icons-png.flaticon.com/128/4325/4325956.png" alt="">
                </h4>
            </div>
        </a>

        <div class="right">
            <a class="box-icon" href="#notification" data-bs-toggle="offcanvas" aria-controls="offcanvasBottom">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 6.44043V9.77043" stroke="#1A1528" stroke-width="1.5" stroke-miterlimit="10"
                        stroke-linecap="round"></path>
                    <path
                        d="M12.0199 2C8.3399 2 5.3599 4.98 5.3599 8.66V10.76C5.3599 11.44 5.0799 12.46 4.7299 13.04L3.4599 15.16C2.6799 16.47 3.2199 17.93 4.6599 18.41C9.4399 20 14.6099 20 19.3899 18.41C20.7399 17.96 21.3199 16.38 20.5899 15.16L19.3199 13.04C18.9699 12.46 18.6899 11.43 18.6899 10.76V8.66C18.6799 5 15.6799 2 12.0199 2Z"
                        stroke="#1A1528" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"></path>
                    <path
                        d="M15.3299 18.8203C15.3299 20.6503 13.8299 22.1503 11.9999 22.1503C11.0899 22.1503 10.2499 21.7703 9.64992 21.1703C9.04992 20.5703 8.66992 19.7303 8.66992 18.8203"
                        stroke="#1A1528" stroke-width="1.5" stroke-miterlimit="10"></path>
                </svg>
            </a>
            <a class="box-icon" href="#sidebar" data-bs-toggle="modal">
                <svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g opacity="1">
                        <path d="M2.5 10H17.5" stroke="#1A1528" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path d="M2.5 5H17.5" stroke="#1A1528" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path d="M2.5 15H17.5" stroke="#1A1528" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                    </g>
                </svg>
            </a>
        </div>
    </div>
@endsection
@section('content')
    <style>
        .spending-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 25px;
            width: 100%;
            max-width: 450px;
            /* Adjust as needed */
            box-sizing: border-box;
            border: 1px solid #e0e0e0;
        }

        .spending-card h2 {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-bottom: 30px;
        }

        .chart-container {
            position: relative;
            width: 100%;
            height: 300px;
            /* Adjust height as needed */
            margin-bottom: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #orderStatusChart {
            max-width: 100%;
            max-height: 100%;
        }

        .total-balance {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #333;
            pointer-events: none;
            /* Allows clicks to pass through to the chart */
        }

        .total-balance span {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }

        .total-balance strong {
            font-size: 28px;
            font-weight: 600;
        }

        .legend-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 25px;
            margin-top: 20px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            font-size: 15px;
            color: #555;
        }

        .legend-color-box {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-right: 8px;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        /* Skeleton loader styles */
        .skeleton-loader {
            background-color: #e0e0e0;
            border-radius: 8px;
            animation: pulse 1.5s infinite ease-in-out;
        }

        .skeleton-loader.chart-placeholder {
            width: 100%;
            height: 300px;
            margin-bottom: 40px;
        }

        .skeleton-loader.text-placeholder {
            width: 120px;
            height: 20px;
            margin: 0 auto 10px;
        }

        .skeleton-loader.value-placeholder {
            width: 180px;
            height: 30px;
            margin: 0 auto;
        }

        .skeleton-loader.legend-item-placeholder {
            width: 100px;
            height: 20px;
            border-radius: 20px;
        }

        @keyframes pulse {
            0% {
                background-color: #e0e0e0;
            }

            50% {
                background-color: #f0f0f0;
            }

            100% {
                background-color: #e0e0e0;
            }
        }
    </style>

    <style>
        .skeleton {
            display: inline-block;
            width: 60%;
            height: 1.2rem;
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.2s ease-in-out infinite;
            border-radius: 4px;
            color: transparent;
        }

        @keyframes skeleton-loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }
    </style>

    <div class="search-box flex items-center gap-2">
        <a href="search-result.html" class="icon-left">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <g opacity="0.5">
                    <path
                        d="M9.58317 17.4998C13.9554 17.4998 17.4998 13.9554 17.4998 9.58317C17.4998 5.21092 13.9554 1.6665 9.58317 1.6665C5.21092 1.6665 1.6665 5.21092 1.6665 9.58317C1.6665 13.9554 5.21092 17.4998 9.58317 17.4998Z"
                        stroke="#121927" stroke-width="1.5" />
                    <path d="M18.3332 18.3332L16.6665 16.6665" stroke="#121927" stroke-width="1.5" />
                </g>
            </svg>
        </a>
        <input type="text" class="search-field form-control flex-grow" placeholder="Search...">
        <span class="right-icon cursor-pointer" data-bs-toggle="offcanvas" data-bs-target="#filter"
            aria-controls="offcanvasRight">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M8.60851 13.8269H3.35791" stroke="#2869FE" stroke-width="1.5" />
                <path d="M10.9507 5.75072H16.2013" stroke="#2869FE" stroke-width="1.5" />
                <path
                    d="M7.27207 5.70521C7.27207 4.6255 6.39027 3.75 5.30278 3.75C4.2153 3.75 3.3335 4.6255 3.3335 5.70521C3.3335 6.78492 4.2153 7.66042 5.30278 7.66042C6.39027 7.66042 7.27207 6.78492 7.27207 5.70521Z"
                    stroke="#2869FE" stroke-width="1.5" />
                <path
                    d="M16.6666 13.7951C16.6666 12.7153 15.7855 11.8398 14.698 11.8398C13.6098 11.8398 12.728 12.7153 12.728 13.7951C12.728 14.8748 13.6098 15.7503 14.698 15.7503C15.7855 15.7503 16.6666 14.8748 16.6666 13.7951Z"
                    stroke="#2869FE" stroke-width="1.5" />
            </svg>
        </span>
    </div>
    <!-- Filter Form -->
    <div class="my-4 rounded-xl shadow-md">
        <form method="GET" action="{{ route('customer_services.dashboard.index') }}" id="dateFilterForm"
            class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-end">
            <div class="sm:col-span-2">
                <label for="date_range" class="block text-sm font-medium text-gray-600 mb-1">Pilih Rentang Tanggal</label>
                <div class="relative">
                    <input type="text" name="date_range" id="date_range" value="{{ request('date_range') }}"
                        placeholder="Contoh: 2024-01-01 - 2024-01-31"
                        class="form-input w-full rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 py-2 px-3 text-gray-800 placeholder-gray-400 cursor-pointer"
                        autocomplete="off">
                </div>
            </div>
        </form>
    </div>

    <!-- Summary Cards -->
    <div class="row g-3" id="summaryContainer">
        @php
            $summaryCards = [
                ['id' => 'totalOrder', 'label' => 'Pesanan', 'img' => '679/679922.png'],
                ['id' => 'totalOrderCompleted', 'label' => 'Diterima', 'img' => '10150/10150659.png'],
                [
                    'id' => 'totalOrderProblem',
                    'label' => 'Bermasalah',
                    'img' => '12503/12503459.png',
                    'class' => 'text-warning',
                ],
                ['id' => 'totalOrderReturn', 'label' => 'Retur', 'img' => '5469/5469933.png', 'class' => 'text-danger'],
            ];
        @endphp

        @foreach ($summaryCards as $card)
            <div class="col-6">
                <div class="card h-100 p-3 shadow-sm text-center d-flex flex-column justify-content-between">
                    <img src="https://cdn-icons-png.flaticon.com/128/{{ $card['img'] }}" alt="{{ $card['label'] }}"
                        style="width: 40px;" class="mx-auto mb-2">
                    <div>
                        <h6>{{ $card['label'] }}</h6>
                        <h4 class="{{ $card['class'] ?? '' }}"><span id="{{ $card['id'] }}" class="skeleton">...</span>
                        </h4>
                    </div>
                </div>
            </div>
        @endforeach

        <div class="col-12">
            <div class="card h-100 p-3 shadow-sm text-center d-flex flex-column justify-content-between bg-light">
                <img src="https://cdn-icons-png.flaticon.com/128/18059/18059296.png" alt="Komisi CS" style="width: 40px;"
                    class="mx-auto mb-2">
                <div>
                    <h6>Komisi CS</h6>
                    <h4 class="text-success"><span id="totalIncome" class="skeleton">...</span></h4>
                </div>
            </div>
        </div>
    </div>

    <div class="spending-card mt-5">
        <h4>Data Estimasi Komisi</h4>
        <div class="chart-container mt-5">
            <div id="skeletonLoader" class="skeleton-loader chart-placeholder"></div>
            <canvas id="orderStatusChart" style="display: none;"></canvas>
            <div class="total-balance" id="totalBalanceText" style="display: none;">
                <span>Estimasi Komisi</span>
                <strong></strong>
            </div>
        </div>
        <div class="legend-container" id="legendContainer">
            @for ($i = 0; $i < 4; $i++)
                <div class="skeleton-loader legend-item-placeholder"></div>
            @endfor
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetchDashboardSummary();

            function fetchDashboardSummary() {
                const dateRange = document.getElementById('date_range')?.value ?? '';

                axios.get('{{ route('customer_services.dashboard.summary') }}', {
                        params: {
                            date_range: dateRange
                        }
                    })
                    .then(response => {
                        const data = response.data;
                        setValue('totalOrder', data.totalOrder);
                        setValue('totalOrderCompleted', data.totalOrderCompleted);
                        setValue('totalOrderProblem', data.totalOrderProblem);
                        setValue('totalOrderReturn', data.totalOrderReturn);
                        setValue('totalIncome', formatRupiah(data.totalIncome));
                    })
                    .catch(err => {
                        console.error("Gagal memuat data summary:", err);
                    });
            }

            function setValue(id, value) {
                const el = document.getElementById(id);
                if (el) {
                    el.textContent = value;
                    el.classList.remove('skeleton');
                }
            }

            function formatRupiah(angka) {
                return new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0
                }).format(angka);
            }

            window.refreshDashboardSummary = fetchDashboardSummary;
        });
    </script>

    <!-- Chart Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chartEl = document.getElementById('orderStatusChart');
            const skeleton = document.getElementById('skeletonLoader');
            const totalBalanceText = document.getElementById('totalBalanceText');
            const legendContainer = document.getElementById('legendContainer');
            const originalLegendSkeletons = Array.from(legendContainer.children);

            const colors = ['#36B9CC', '#9370DB', '#FF6384', '#FFB142'];
            const categoryOrder = ['Shopping', 'Food', 'Entertain', 'Hobby'];

            axios.get("{{ route('customer_services.dashboard.status-distribution') }}", {
                params: {
                    date_range: "{{ request('date_range') }}"
                }
            }).then(response => {
                const apiData = response.data;
                const labels = apiData.labels || categoryOrder;
                const values = apiData.values || [40, 23, 20, 17];
                const totalBalance = apiData.totalBalance;

                const sortedData = labels.map((label, index) => ({
                    label,
                    value: values[index]
                })).sort((a, b) => categoryOrder.indexOf(a.label) - categoryOrder.indexOf(b.label));

                const sortedLabels = sortedData.map(item => item.label);
                const sortedValues = sortedData.map(item => item.value);

                new Chart(chartEl.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: sortedLabels,
                        datasets: [{
                            data: sortedValues,
                            backgroundColor: colors,
                            borderColor: '#fff',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutout: '80%',
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return `${context.label}: ${context.parsed}%`;
                                    }
                                }
                            },
                            datalabels: {
                                color: '#fff',
                                font: {
                                    weight: 'bold',
                                    size: 14
                                },
                                formatter: (value) => `${value}%`
                            }
                        }
                    },
                    plugins: [ChartDataLabels]
                });

                totalBalanceText.querySelector('strong').textContent = totalBalance;

                legendContainer.innerHTML = '';
                sortedLabels.forEach((label, index) => {
                    const legendItem = document.createElement('div');
                    legendItem.classList.add('legend-item');
                    legendItem.innerHTML = `
                <div class="legend-color-box" style="background-color: ${colors[index]};"></div>
                <span>${label}</span>
            `;
                    legendContainer.appendChild(legendItem);
                });

                chartEl.style.display = 'block';
                totalBalanceText.style.display = 'block';
                skeleton.style.display = 'none';
            }).catch(error => {
                skeleton.innerHTML = '<p class="text-danger">Gagal memuat data.</p>';
                totalBalanceText.style.display = 'none';
                console.error(error);
                legendContainer.innerHTML = '';
                originalLegendSkeletons.forEach(skel => legendContainer.appendChild(skel.cloneNode(true)));
            });
        });
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById("date_range");

            // Set default value ke 1 Juli - 30 Juli 2025 jika kosong
            if (!input.value.trim()) {
                const startStr = '2025-07-01';
                const endStr = '2025-07-30';
                input.value = `${startStr} - ${endStr}`;
            }

            flatpickr(input, {
                mode: "range",
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "j F Y",
                defaultDate: input.value.split(' - '),
                locale: {
                    weekdays: {
                        shorthand: ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
                        longhand: ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"],
                    },
                    months: {
                        shorthand: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt",
                            "Nov", "Des"
                        ],
                        longhand: ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli",
                            "Agustus", "September", "Oktober", "November", "Desember"
                        ],
                    },
                    firstDayOfWeek: 1,
                    rangeSeparator: " - ",
                    time_24hr: true,
                },
                onReady: function(selectedDates, dateStr, instance) {
                    if (!instance.calendarContainer.querySelector(".flatpickr-apply")) {
                        const applyBtn = document.createElement("button");
                        applyBtn.textContent = "Apply";
                        applyBtn.type = "button";
                        applyBtn.className =
                            "flatpickr-apply mt-2 bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm";
                        applyBtn.addEventListener("click", function() {
                            instance.close();
                            document.getElementById("dateFilterForm").submit();
                        });
                        instance.calendarContainer.appendChild(applyBtn);
                    }
                },
                onChange: function(selectedDates) {
                    if (selectedDates.length === 2) {
                        input.value =
                            `${selectedDates[0].toISOString().slice(0, 10)} - ${selectedDates[1].toISOString().slice(0, 10)}`;
                    }
                }
            });
        });
    </script>
@endsection