@extends('template.desktop.app')
@section('title', 'Laporan Harian Customer Service')

@push('styles')
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        :root {
            --bs-border-color: #dee2e6;
            --bs-border-thick: #adb5bd;
            --header-bg: #f8f9fa;
            --row-hover: #f1f3f5;
        }

        .table-responsive {
            max-height: 650px;
            overflow: auto;
            border: 1px solid var(--bs-border-color);
            scrollbar-width: thin;
            position: relative;
            background: #fff;
        }

        table {
            border-collapse: separate !important;
            border-spacing: 0;
            width: 100%;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        th, td {
            padding: 10px 8px;
            font-size: 12px;
            vertical-align: middle;
            border-right: 2px solid var(--bs-border-color);
            border-bottom: 1px solid var(--bs-border-color);
            background-clip: padding-box;
        }

        th {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.5px;
            color: #343a40;
            background-color: var(--header-bg);
        }

        thead {
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        thead tr:nth-child(1) th {
            position: sticky;
            top: 0;
            height: 50px;
            z-index: 1002;
            border-top: none;
            border-bottom: 1px solid var(--bs-border-thick);
        }

        thead tr:nth-child(2) th {
            position: sticky;
            top: 50px;
            height: 40px;
            z-index: 1001;
            border-bottom: 1px solid var(--bs-border-thick);
        }

        thead tr:nth-child(1) th[rowspan="2"] {
            top: 0;
            height: 90px;
            z-index: 1002;
            border-bottom: 1px solid var(--bs-border-thick);
        }

        tbody tr:nth-child(even) {
            background-color: #fff;
        }

        tbody tr:nth-child(odd) {
            background-color: #fdfdfd;
        }

        tbody tr:hover td {
            background-color: var(--row-hover);
            color: #000;
        }

        .col-revenue {
            text-align: right !important;
            font-family: 'Consolas', 'Monaco', monospace;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
        
        .stats-icon-wrapper {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
        }
        
        .card-stats {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: all 0.3s ease;
            height: 100%;
            background: #fff;
        }
        
        .card-stats:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }

        .bestcs-metrics.clean {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;            
            margin-top: 8px;
        }

        .bestcs-metrics.clean .bestcs-item {
            text-align: center;
            padding: 4px 2px;
        }

        .bestcs-metrics.clean .bestcs-item span {
            display: block;
            font-size: 9px;
            font-weight: 600;
            text-transform: uppercase;
            color: #6c757d;
            margin-bottom: 2px;
            letter-spacing: 0.4px;
        }

        .bestcs-metrics.clean .bestcs-item strong {
            display: block;
            font-size: 12px;
            font-weight: 700;
            color: #212529;
        }

        .dropdown-menu-calendar {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1050;
            background: white;
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            margin-top: 0.5rem;
            width: 650px; 
        }
    </style>
@endpush

@section('content')
    <div class="card mb-4 border-0 shadow-sm">
        <div class="card-header bg-white border-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
            <h4 class="card-title text-dark fw-bold mb-0 text-2xl">Laporan Harian Customer Service</h4>
        </div>

        <div class="card-body pt-3">
            <form id="filterForm" class="row g-3 align-items-end mb-4">
                
                <div class="col-md-4">
                    <label class="form-label fw-bold small text-uppercase text-muted">Periode Tanggal</label>
                    <div class="relative">
                        <button type="button" id="dateFilterBtn" class="form-control text-start d-flex justify-content-between align-items-center bg-white border border-gray-300 shadow-sm">
                            <span id="dateFilterLabel" class="text-sm">Filter Tanggal</span>
                            <i class="ti tabler-calendar text-gray-400"></i>
                        </button>

                        <div id="dateFilterDropdown" class="hidden dropdown-menu-calendar p-0">
                            <div class="flex">
                                <div class="w-48 bg-gray-50 border-r border-gray-100 p-2 space-y-1">
                                    <button type="button" onclick="applyDatePreset('today')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">Hari Ini</button>
                                    <button type="button" onclick="applyDatePreset('yesterday')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">Kemarin</button>
                                    <button type="button" onclick="applyDatePreset('last7')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">7 Hari Terakhir</button>
                                    <button type="button" onclick="applyDatePreset('last30')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">30 Hari Terakhir</button>
                                    <button type="button" onclick="applyDatePreset('this_month')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">Bulan Ini</button>
                                    <button type="button" onclick="applyDatePreset('last_month')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">Bulan Lalu</button>
                                    <button type="button" onclick="applyDatePreset('max')" class="date-preset w-full text-left px-3 py-2 text-sm rounded-md hover:bg-white hover:shadow-sm transition-all">Semua (Max)</button>
                                    <hr class="my-2 border-gray-200">
                                    <button type="button" onclick="clearDateFilter()" class="w-full text-left px-3 py-2 text-sm text-red-600 rounded-md hover:bg-red-50 transition-all">Hapus Filter</button>
                                </div>

                                <div class="flex-1 p-4">
                                    <div class="flex items-center justify-between mb-4 border-b border-gray-100 pb-3">
                                        <div class="flex gap-2">
                                            <div class="bg-gray-50 px-3 py-1.5 rounded text-xs font-medium text-gray-500 border border-gray-100">
                                                <span id="customStartDate">-</span>
                                            </div>
                                            <span class="text-gray-300 self-center">-</span>
                                            <div class="bg-gray-50 px-3 py-1.5 rounded text-xs font-medium text-gray-500 border border-gray-100">
                                                <span id="customEndDate">-</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="customCalendar" class="mb-4"></div>

                                    <div class="flex justify-end pt-3 border-t border-gray-100">
                                        <button type="button" id="applyCustomDateBtn" onclick="applyCustomDate()" disabled class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-xs font-semibold rounded shadow-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                            Terapkan
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-bold small text-uppercase text-muted">Customer Service</label>
                    <select name="cs_id" id="cs_id" class="form-select">
                        <option value="">Semua CS</option>
                        @foreach ($customer_services as $cs)
                            <option value="{{ $cs->user_id }}">{{ $cs->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4 d-flex">
                    <button type="submit" class="btn btn-primary w-100 fw-bold">
                        <i class="ti tabler-filter me-1"></i> Terapkan Filter
                    </button>
                </div>
            </form>

            <div id="alert-container"></div>
            <div class="row g-3 mb-4" id="statsContainer"></div>

            <div class="card mb-4 border">
                <div class="card-header py-2">
                    <h5 class="card-title mb-0 fs-6 fw-bold">Rekapan Total Harian (All CS)</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="aggregateTable">
                            <thead>
                                <tr>
                                    <th rowspan="2" class="text-center" style="min-width: 100px;">Tanggal</th>
                                    <th rowspan="2" class="text-center">Total Lead</th>
                                    <th rowspan="2" class="text-center">Total Closing</th>
                                    <th rowspan="2" class="text-center">CR</th>
                                    <th rowspan="2" class="text-center">CR Box</th>
                                    <th colspan="3" class="text-center">Closing</th>
                                    <th colspan="3" class="text-center">WA</th>
                                    <th colspan="3" class="text-center">MP</th>
                                    <th colspan="2" class="text-center">Jumlah</th>
                                    <th rowspan="2" class="text-center">Revenue</th>
                                </tr>
                                <tr>
                                    <th class="text-center">Today</th>
                                    <th class="text-center">FU</th>
                                    <th class="text-center">RO</th>
                                    <th class="text-center">Closing</th>
                                    <th class="text-center">Box</th>
                                    <th class="text-center">Sachet</th>
                                    <th class="text-center">Closing</th>
                                    <th class="text-center">Box</th>
                                    <th class="text-center">Sachet</th>
                                    <th class="text-center">Box</th>
                                    <th class="text-center">Sachet</th>
                                </tr>
                            </thead>
                            <tbody id="aggregateTableBody">
                                <tr>
                                    <td colspan="17" class="text-center py-5 text-muted">Memuat data...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <div class="row mb-4">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Trend Performa Harian</h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="performanceChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card h-100">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0">Ranking CS</h5>
                            <small class="text-muted">by CR Box</small>
                        </div>
                        <div class="card-body p-0" id="rankingContainer"></div>
                    </div>
                </div>
            </div>
            
            <div class="card border">
                <div class="card-header py-2">
                    <h5 class="card-title mb-0 fs-6 fw-bold">Data Detail Harian</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="reportTable">
                            <thead>
                                <tr>
                                    <th rowspan="2" class="text-center" style="min-width: 90px;">Tanggal</th>
                                    <th rowspan="2" class="text-center" style="min-width: 140px;">Nama CS</th>
                                    <th rowspan="2" class="text-center">Lead</th>
                                    <th rowspan="2" class="text-center">Total Closing</th>
                                    <th rowspan="2" class="text-center">CR</th>
                                    <th rowspan="2" class="text-center">CR Box</th>
                                    <th colspan="3" class="text-center">Closing</th>
                                    <th colspan="3" class="text-center">WA</th>
                                    <th colspan="3" class="text-center">MP</th>
                                    <th colspan="2" class="text-center">Jumlah</th>
                                    <th rowspan="2" class="text-center col-revenue">Revenue</th>
                                </tr>
                                <tr>
                                    <th class="text-center">Today</th>
                                    <th class="text-center">FU</th>
                                    <th class="text-center">RO</th>
                                    <th class="text-center">Closing</th>
                                    <th class="text-center">Box</th>
                                    <th class="text-center">Sachet</th>
                                    <th class="text-center">Closing</th>
                                    <th class="text-center">Box</th>
                                    <th class="text-center">Sachet</th>
                                    <th class="text-center">Box</th>
                                    <th class="text-center">Sachet</th>
                                </tr>
                            </thead>
                            <tbody id="tableBody">
                                <tr>
                                    <td colspan="18" class="text-muted py-5 text-center">Memuat data...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const dateBtn = document.getElementById('dateFilterBtn');
        const dateLabel = document.getElementById('dateFilterLabel');
        const dateDropdown = document.getElementById('dateFilterDropdown');
        const customStartDateEl = document.getElementById('customStartDate');
        const customEndDateEl = document.getElementById('customEndDate');
        const applyCustomDateBtn = document.getElementById('applyCustomDateBtn');
        const filterForm = document.getElementById('filterForm');
        const tableBody = document.getElementById('tableBody');
        const alertContainer = document.getElementById('alert-container');
        const statsContainer = document.getElementById('statsContainer');
        const rankingContainer = document.getElementById('rankingContainer');
        const csSelect = document.getElementById('cs_id');

        let startDate = "{{ $defaultDateRange['start_date'] }}";
        let endDate = "{{ $defaultDateRange['end_date'] }}";
        let customStart = null;
        let customEnd = null;
        
        let currentLeftMonth = new Date().getMonth();
        let currentLeftYear = new Date().getFullYear();
        let currentRightMonth = new Date().getMonth() + 1;
        let currentRightYear = new Date().getFullYear();
        
        let charts = {
            performanceChart: null,
        };

        window.dateFilterState = {
            startDate: startDate,
            endDate: endDate
        };

        dateLabel.textContent = `${formatDateDisplay(new Date(startDate))} - ${formatDateDisplay(new Date(endDate))}`;

        csSelect.addEventListener('change', function() {
            fetchData();
        });

        dateBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            dateDropdown.classList.toggle('hidden');
            
            if (!dateDropdown.classList.contains('hidden')) {
                currentLeftMonth = new Date().getMonth();
                currentLeftYear = new Date().getFullYear();
                currentRightMonth = currentLeftMonth + 1;
                currentRightYear = currentLeftYear;
                
                if (currentRightMonth > 11) {
                    currentRightMonth = 0;
                    currentRightYear++;
                }
                setTimeout(initializeDualCalendar, 100);
            }
        });

        dateDropdown.addEventListener('click', (e) => {
            e.stopPropagation();
        });

        document.addEventListener('click', (e) => {
            if (!dateBtn.contains(e.target) && !dateDropdown.contains(e.target)) {
                dateDropdown.classList.add('hidden');
            }
        });

        const formatDateApi = (date) => {
            const offset = date.getTimezoneOffset();
            date = new Date(date.getTime() - (offset * 60 * 1000));
            return date.toISOString().split('T')[0];
        };

        function formatDateDisplay(date) {
            return date.toLocaleDateString('id-ID', {
                day: 'numeric',
                month: 'short',
                year: 'numeric'
            });
        };

        function updateDateFilterIndicator(activePreset = null) {
            document.querySelectorAll('.date-preset').forEach(btn => {
                btn.classList.remove('bg-red-50', 'text-red-700', 'active');
                btn.classList.add('text-gray-700');
            });
            
            if (activePreset) {
                const activeButtons = document.querySelectorAll(`[onclick="applyDatePreset('${activePreset}')"]`);
                activeButtons.forEach(btn => {
                    btn.classList.add('bg-red-50', 'text-red-700', 'active');
                    btn.classList.remove('text-gray-700');
                });
            }
        }

        function initializeDualCalendar() {
            const calendarContainer = document.getElementById('customCalendar');
            if (!calendarContainer) return;
            
            calendarContainer.innerHTML = '';
            
            const calendarHTML = `
                <div class="flex gap-4">
                    <div class="flex-1">
                        <div class="mb-3">
                            <div class="flex items-center justify-between mb-2">
                                <button type="button" onclick="navigateMonth('left', -1)" class="p-1 hover:bg-gray-100 rounded">
                                    <i class="ti tabler-chevron-left text-gray-600"></i>
                                </button>
                                <div class="text-[13px] font-semibold text-gray-700">
                                    ${new Date(currentLeftYear, currentLeftMonth).toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}
                                </div>
                                <div class="w-6"></div>
                            </div>
                            <div class="grid grid-cols-7 gap-1 text-center">
                                ${['M', 'S', 'S', 'R', 'K', 'J', 'S'].map(day => `<div class="text-[11px] text-gray-500 py-1">${day}</div>`).join('')}
                                ${generateCalendarDays(currentLeftYear, currentLeftMonth, 'left')}
                            </div>
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="mb-3">
                            <div class="flex items-center justify-between mb-2">
                                <div class="w-6"></div>
                                <div class="text-[13px] font-semibold text-gray-700">
                                    ${new Date(currentRightYear, currentRightMonth).toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })}
                                </div>
                                <button type="button" onclick="navigateMonth('right', 1)" class="p-1 hover:bg-gray-100 rounded">
                                    <i class="ti tabler-chevron-right text-gray-600"></i>
                                </button>
                            </div>
                            <div class="grid grid-cols-7 gap-1 text-center">
                                ${['M', 'S', 'S', 'R', 'K', 'J', 'S'].map(day => `<div class="text-[11px] text-gray-500 py-1">${day}</div>`).join('')}
                                ${generateCalendarDays(currentRightYear, currentRightMonth, 'right')}
                            </div>
                        </div>
                    </div>
                </div>
            `;
            calendarContainer.innerHTML = calendarHTML;
        }

        function generateCalendarDays(year, month, calendarSide) {
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const startingDay = firstDay.getDay();
            const daysInMonth = lastDay.getDate();
            let daysHTML = '';
            
            for (let i = 0; i < startingDay; i++) {
                daysHTML += `<div class="h-7"></div>`;
            }
            
            for (let day = 1; day <= daysInMonth; day++) {
                const date = new Date(year, month, day);
                const isSelected = isDateInRange(date);
                const isToday = isTodayDate(date);
                const isInRange = isDateInSelectedRange(date);
                
                daysHTML += `
                    <button type="button" onclick="selectCustomDate('${date.toISOString()}')" 
                        class="h-7 w-7 text-[11px] rounded-full transition-all ${
                            isSelected ? 'bg-red-600 text-white' : 
                            isInRange ? 'bg-red-100 text-red-700' :
                            isToday ? 'bg-red-50 text-red-600' : 
                            'hover:bg-gray-100 text-gray-700'
                        } ${isToday ? 'font-semibold' : ''}">
                        ${day}
                    </button>
                `;
            }
            return daysHTML;
        }

        function isTodayDate(date) {
            const today = new Date();
            return date.toDateString() === today.toDateString();
        }

        function isDateInRange(date) {
            if (!customStart && !customEnd) return false;
            const dateStr = date.toISOString().split('T')[0];
            const startStr = customStart ? customStart.toISOString().split('T')[0] : null;
            const endStr = customEnd ? customEnd.toISOString().split('T')[0] : null;
            
            if (customStart && !customEnd) return dateStr === startStr;
            if (customStart && customEnd) return dateStr === startStr || dateStr === endStr;
            return false;
        }

        function isDateInSelectedRange(date) {
            if (!customStart || !customEnd) return false;
            const dateStr = date.toISOString().split('T')[0];
            const startStr = customStart.toISOString().split('T')[0];
            const endStr = customEnd.toISOString().split('T')[0];
            return dateStr > startStr && dateStr < endStr;
        }

        window.selectCustomDate = (dateString) => {
            const date = new Date(dateString);
            if (!customStart || (customStart && customEnd)) {
                customStart = date;
                customEnd = null;
            } else if (customStart && !customEnd) {
                if (date < customStart) {
                    customEnd = new Date(customStart);
                    customStart = date;
                } else {
                    customEnd = date;
                }
                setTimeout(() => { applyCustomDate(); }, 300);
            }
            updateCustomDateDisplay();
            updateApplyButton();
            initializeDualCalendar();
        }

        window.navigateMonth = (side, direction) => {
            if (side === 'left') {
                currentLeftMonth += direction;
                if (currentLeftMonth < 0) { currentLeftMonth = 11; currentLeftYear--; } 
                else if (currentLeftMonth > 11) { currentLeftMonth = 0; currentLeftYear++; }
                currentRightMonth = currentLeftMonth + 1;
                currentRightYear = currentLeftYear;
                if (currentRightMonth > 11) { currentRightMonth = 0; currentRightYear++; }
            } else {
                currentRightMonth += direction;
                if (currentRightMonth < 0) { currentRightMonth = 11; currentRightYear--; } 
                else if (currentRightMonth > 11) { currentRightMonth = 0; currentRightYear++; }
                currentLeftMonth = currentRightMonth - 1;
                currentLeftYear = currentRightYear;
                if (currentLeftMonth < 0) { currentLeftMonth = 11; currentLeftYear--; }
            }
            initializeDualCalendar();
        }

        function updateCustomDateDisplay() {
            if (customStartDateEl) customStartDateEl.textContent = customStart ? formatDateDisplay(customStart) : '-';
            if (customEndDateEl) customEndDateEl.textContent = customEnd ? formatDateDisplay(customEnd) : '-';
        }

        function updateApplyButton() {
            if (applyCustomDateBtn) applyCustomDateBtn.disabled = !customStart || !customEnd;
        }

        window.applyCustomDate = () => {
            if (!customStart || !customEnd) return;
            startDate = formatDateApi(customStart);
            endDate = formatDateApi(customEnd);
            window.dateFilterState.startDate = startDate;
            window.dateFilterState.endDate = endDate;
            dateLabel.textContent = `${formatDateDisplay(customStart)} - ${formatDateDisplay(customEnd)}`;
            updateDateFilterIndicator(null);
            dateDropdown.classList.add('hidden');
            fetchData();
        }

        window.applyDatePreset = (preset) => {
            const today = new Date();
            let start = new Date();
            let end = new Date();
            let label = "";

            customStart = null;
            customEnd = null;
            updateCustomDateDisplay();
            updateApplyButton();

            switch (preset) {
                case 'today': label = "Hari Ini"; break; 
                case 'yesterday': start.setDate(today.getDate() - 1); end.setDate(today.getDate() - 1); label = "Kemarin"; break;
                case 'last7': start.setDate(today.getDate() - 6); label = "7 Hari Terakhir"; break;
                case 'last30': start.setDate(today.getDate() - 29); label = "30 Hari Terakhir"; break;
                case 'this_month': start = new Date(today.getFullYear(), today.getMonth(), 1); label = "Bulan Ini"; break;
                case 'last_month': start = new Date(today.getFullYear(), today.getMonth() - 1, 1); end = new Date(today.getFullYear(), today.getMonth(), 0); label = "Bulan Lalu"; break;
                case 'max': 
                    startDate = null; endDate = null; label = "Semua (Max)";
                    window.dateFilterState.startDate = null;
                    window.dateFilterState.endDate = null;
                    dateLabel.textContent = label;
                    dateDropdown.classList.add('hidden');
                    updateDateFilterIndicator('max');
                    fetchData();
                    return;
            }

            startDate = formatDateApi(start);
            endDate = formatDateApi(end);
            window.dateFilterState.startDate = startDate;
            window.dateFilterState.endDate = endDate;
            updateDateFilterIndicator(preset);
            dateLabel.textContent = label;
            dateDropdown.classList.add('hidden');
            fetchData();
        };

        window.clearDateFilter = () => {
            startDate = null;
            endDate = null;
            customStart = null;
            customEnd = null;
            window.dateFilterState.startDate = null;
            window.dateFilterState.endDate = null;
            dateLabel.textContent = "Filter Tanggal";
            dateDropdown.classList.add('hidden');
            updateDateFilterIndicator(null);
            updateCustomDateDisplay();
            updateApplyButton();
            fetchData();
        };

        filterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            fetchData();
        });

        function fetchData() {
            const cs_id = document.getElementById('cs_id').value;
            const currentStartDate = window.dateFilterState.startDate;
            const currentEndDate = window.dateFilterState.endDate;

            tableBody.innerHTML = `<tr><td colspan="18" class="py-5 text-center"><div class="spinner-border text-primary" role="status"></div><br><span class="text-muted mt-2 d-block">Sedang memproses data...</span></td></tr>`;
            document.getElementById('aggregateTableBody').innerHTML = `<tr><td colspan="17" class="py-5 text-center"><div class="spinner-border text-primary" role="status"></div></td></tr>`;
            statsContainer.innerHTML = `<div class="col-12 text-center py-4"><div class="spinner-border text-primary" role="status"></div></div>`;
            rankingContainer.innerHTML = `<div class="text-center py-4"><div class="spinner-border text-primary" role="status"></div></div>`;

            axios.get("{{ route('customer-service-reports.data') }}", {
                    params: {
                        start_date: currentStartDate,
                        end_date: currentEndDate,
                        cs_id: cs_id
                    }
                })
                .then(res => {
                    const data = res.data;
                    if (!data.status || data.data.length === 0) {
                        showAlert('Tidak ada data ditemukan untuk periode ini.', 'warning');
                        tableBody.innerHTML = `<tr><td colspan="18" class="text-muted py-4 text-center">Tidak ada data ditemukan.</td></tr>`;
                        document.getElementById('aggregateTableBody').innerHTML = `<tr><td colspan="17" class="text-muted py-4 text-center">Tidak ada data.</td></tr>`;
                        statsContainer.innerHTML = '';
                        rankingContainer.innerHTML = '<p class="text-muted text-center p-4">Tidak ada data untuk ranking.</p>';
                        destroyCharts();
                        return;
                    }

                    renderTable(data.data);
                    renderAggregateTable(data.data);
                    renderStats(data.stats);
                    renderRankingCs(data.stats.cs_ranking);
                    renderCharts(data.chart_data, data.stats);
                })
                .catch(err => {
                    console.error(err);
                    showAlert('Terjadi kesalahan server saat memuat data.', 'danger');
                    tableBody.innerHTML = `<tr><td colspan="18" class="text-danger py-4 text-center">Gagal memuat data.</td></tr>`;
                    statsContainer.innerHTML = '<p class="text-danger text-center">Gagal memuat statistik.</p>';
                    destroyCharts();
                });
        }

        function calculateBoxEquivalent(box, sachet) {
            return parseFloat(box || 0) + (parseFloat(sachet || 0) / 5);
        }

        function renderTable(data) {
            let rows = '';
            data.forEach(item => {
                let crBox = 0;
                const totalBoxEquivalent = calculateBoxEquivalent(item.total_box, item.total_sachet);

                if (item.total_lead > 0) {
                    crBox = (totalBoxEquivalent / item.total_lead) * 100;
                }
                
                const dateFormatted = new Date(item.date).toLocaleDateString('id-ID');

                rows += `
                    <tr>
                        <td class="text-center fw-bold">${dateFormatted}</td>
                        <td class="text-start fw-bold text-nowrap">${item.customer_service?.name || '-'}</td>
                        <td class="text-center fw-bold">${item.total_lead}</td>
                        <td class="text-center fw-bold ">${item.total_closing}</td>
                        <td class="text-center fw-bold">${item.closing_rate}%</td>
                        <td class="text-center fw-bold">${crBox.toFixed(2)}%</td>
                        <td class="text-center text-muted fw-bold ">${item.closing_today}</td>
                        <td class="text-center text-muted fw-bold">${item.closing_follow_up}</td>
                        <td class="text-center text-muted fw-bold">${item.closing_repeat_order}</td>
                        <td class="text-center text-muted fw-bold">${item.closing_wa}</td>
                        <td class="text-center text-muted fw-bold">${item.wa_box}</td>
                        <td class="text-center text-muted fw-bold">${item.wa_sachet}</td> 
                        <td class="text-center text-muted fw-bold">${item.closing_mp}</td>
                        <td class="text-center text-muted fw-bold">${item.mp_box}</td>
                        <td class="text-center text-muted fw-bold">${item.mp_sachet}</td>
                        <td class="text-center fw-bold ">${totalBoxEquivalent.toFixed(1).replace(/\.0$/, '')}</td>
                        <td class="text-center fw-bold">${item.total_sachet}</td>
                        <td class="fw-bold text-end pe-3 col-revenue ">Rp ${item.total_revenue.toLocaleString('id-ID')}</td>
                    </tr>
                `;
            });
            tableBody.innerHTML = rows;
        }

        function renderAggregateTable(data) {
            const tbody = document.getElementById('aggregateTableBody');
            const groupedData = {};

            data.forEach(item => {
                const date = item.date;
                if (!groupedData[date]) {
                    groupedData[date] = {
                        date: date,
                        total_lead: 0, total_box: 0, total_sachet: 0, total_closing: 0,
                        closing_today: 0, closing_follow_up: 0, closing_repeat_order: 0,
                        closing_wa: 0, wa_box: 0, wa_sachet: 0,
                        closing_mp: 0, mp_box: 0, mp_sachet: 0, total_revenue: 0
                    };
                }
                groupedData[date].total_lead += parseFloat(item.total_lead || 0);
                groupedData[date].total_box += calculateBoxEquivalent(item.total_box, item.total_sachet);
                groupedData[date].total_sachet += parseFloat(item.total_sachet || 0);
                groupedData[date].total_closing += parseFloat(item.total_closing || 0);
                groupedData[date].closing_today += parseFloat(item.closing_today || 0);
                groupedData[date].closing_follow_up += parseFloat(item.closing_follow_up || 0);
                groupedData[date].closing_repeat_order += parseFloat(item.closing_repeat_order || 0);
                groupedData[date].closing_wa += parseFloat(item.closing_wa || 0);
                groupedData[date].wa_box += parseFloat(item.wa_box || 0);
                groupedData[date].wa_sachet  += parseFloat(item.wa_sachet  || 0);
                groupedData[date].closing_mp += parseFloat(item.closing_mp || 0);
                groupedData[date].mp_box += parseFloat(item.mp_box || 0);
                groupedData[date].mp_sachet += parseFloat(item.mp_sachet || 0);
                groupedData[date].total_revenue += parseFloat(item.total_revenue || 0);
            });

            let rows = '';
            const sortedDates = Object.keys(groupedData).sort().reverse();
            if (sortedDates.length === 0) {
                tbody.innerHTML = `<tr><td colspan="17" class="text-center text-muted py-4">Tidak ada data rekap.</td></tr>`;
                return;
            }

            sortedDates.forEach(dateKey => {
                const item = groupedData[dateKey];
                let closingRate = 0;
                let crBox = 0;
                
                if (item.total_lead > 0) {
                    crBox = (item.total_box / item.total_lead) * 100;
                    closingRate = (item.total_closing / item.total_lead) * 100;
                }
                const dateFormatted = new Date(item.date).toLocaleDateString('id-ID');

                rows += `
                    <tr>
                        <td class="text-center fw-bold">${dateFormatted}</td>
                        <td class="text-center fw-bold">${item.total_lead}</td>
                        <td class="text-center fw-bold ">${item.total_closing}</td>
                        <td class="text-center fw-bold">${closingRate.toFixed(2)}%</td>
                        <td class="text-center fw-bold">${crBox.toFixed(2)}%</td>
                        <td class="text-center fw-bold ">${item.closing_today}</td>
                        <td class="text-center fw-bold">${item.closing_follow_up}</td>
                        <td class="text-center fw-bold">${item.closing_repeat_order}</td>    
                        <td class="text-center fw-bold ">${item.closing_wa}</td>
                        <td class="text-center fw-bold">${item.wa_box}</td>
                        <td class="text-center fw-bold">${item.wa_sachet}</td>   
                        <td class="text-center fw-bold ">${item.closing_mp}</td>
                        <td class="text-center fw-bold">${item.mp_box}</td>
                        <td class="text-center fw-bold">${item.mp_sachet}</td>
                        <td class="text-center fw-bold ">${item.total_box.toFixed(1).replace(/\.0$/, '')}</td>
                        <td class="text-center fw-bold">${item.total_sachet}</td>   
                        <td class="text-center fw-bold ">Rp ${item.total_revenue.toLocaleString('id-ID')}</td>
                    </tr>
                `;
            });
            tbody.innerHTML = rows;
        }

        function renderStats(stats) {
            const prev = stats.previous_period;
            const bestCs = stats.best_cs;
            const statsConfig = [
                { key: 'total_lead', label: 'Total Lead', icon: 'users', color: '#696cff', value: stats.total_lead, change: prev.lead_change || 0, format: 'number' },
                { key: 'total_closing', label: 'Total Closing', icon: 'circle-check', color: '#71dd37', value: stats.total_closing, change: prev.closing_change || 0, format: 'number' },
                { key: 'total_box', label: 'Total Box', icon: 'package', color: '#ffab00', value: stats.total_box, change: prev.total_box_change || 0, format: 'number' },
                { key: 'total_sachet', label: 'Total Sachet', icon: 'packages', color: '#03c3ec', value: stats.total_sachet, change: prev.total_sachet_change || 0, format: 'number' },
                { key: 'total_closing_everpro', label: 'Closing Everpro', icon: 'message-circle', color: '#696cff', value: stats.total_closing_everpro, change: prev.total_closing_evepro_change || 0, format: 'number' },
                { key: 'total_closing_everpro_box', label: 'Box Everpro', icon: 'package', color: '#71dd37', value: stats.total_closing_everpro_box, change: prev.total_closing_evepro_box_change || 0, format: 'number' },
                { key: 'total_closing_everpro_sachet', label: 'Sachet Everpro', icon: 'packages', color: '#ffab00', value: stats.total_closing_everpro_sachet, change: prev.total_closing_evepro_sachet_change || 0, format: 'number' },
                { key: 'total_closing_marketplace', label: 'Closing MP', icon: 'shopping-cart', color: '#03c3ec', value: stats.total_closing_marketplace, change: prev.total_closing_marketplace_change || 0, format: 'number' },
                { key: 'total_closing_marketplace_box', label: 'Box MP', icon: 'package', color: '#696cff', value: stats.total_closing_marketplace_box, change: prev.total_closing_marketplace_box_change || 0, format: 'number' },
                { key: 'total_closing_marketplace_sachet', label: 'Sachet MP', icon: 'packages', color: '#71dd37', value: stats.total_closing_marketplace_sachet, change: prev.total_closing_marketplace_sachet_change || 0, format: 'number' },
                { key: 'avg_closing_rate', label: 'Closing Rate', icon: 'percentage', color: '#ffab00', value: stats.avg_closing_rate, change: prev.closing_rate_change || 0, format: 'percent' },
                { key: 'avg_closing_rate_box', label: 'CR Box', icon: 'percentage', color: '#03c3ec', value: stats.avg_closing_rate_box, change: prev.closing_rate_box_change || 0, format: 'percent' },
                { key: 'total_revenue', label: 'Total Revenue', icon: 'currency-dollar', color: '#71dd37', value: stats.total_revenue, change: prev.revenue_change || 0, format: 'currency' }
            ];
            
            let statsHtml = '';
            statsConfig.forEach(stat => {
                let displayValue;
                switch(stat.format) {
                    case 'currency': displayValue = `Rp ${stat.value.toLocaleString('id-ID')}`; break;
                    case 'percent': displayValue = `${parseFloat(stat.value).toFixed(2)}%`; break;
                    default: displayValue = stat.value;
                }
                statsHtml += `
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                        <div class="card-stats" style="border-bottom: 3px solid ${stat.color};">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="stats-icon-wrapper" style="background-color: ${stat.color}15;">
                                        <i class="ti tabler-${stat.icon} fs-4" style="color: ${stat.color};"></i>
                                    </div>
                                    <div>
                                        <h4 class="mb-0 fw-bold fs-5">${displayValue}</h4>
                                        <p class="text-muted mb-0 small text-uppercase fw-semibold">${stat.label}</p>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <span class="fw-bold small me-1 ${stat.change >= 0 ? 'text-success' : 'text-danger'}">
                                        <i class="ti ${stat.change >= 0 ? 'tabler-trending-up' : 'tabler-trending-down'}"></i>
                                        ${stat.change >= 0 ? '+' : ''}${stat.change}%
                                    </span>
                                    <small class="text-muted" style="font-size: 10px;">vs periode lalu</small>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            if (bestCs) {
                statsHtml += `
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                        <div class="card-stats" style="border-bottom:3px solid #696cff;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="stats-icon-wrapper" style="background:#696cff15;">
                                        <i class="ti tabler-crown fs-4" style="color:#696cff;"></i>
                                    </div>
                                    <div>
                                        <p class="text-muted mb-0 small text-uppercase fw-semibold">Best CS</p>
                                        <h6 class="mb-0 fw-bold">${bestCs.name}</h6>
                                    </div>
                                </div>
                                <div class="mt-2 border-top pt-2">
                                    <div class="bestcs-metrics clean">
                                        <div class="bestcs-item"><span>LEAD</span><strong>${bestCs.total_lead}</strong></div>
                                        <div class="bestcs-item"><span>CLOSING</span><strong>${bestCs.total_closing}</strong></div>
                                        <div class="bestcs-item"><span>BOX</span><strong>${bestCs.total_box.toFixed(1).replace(/\.0$/, '')}</strong></div>
                                        <div class="bestcs-item"><span>CR</span><strong>${bestCs.closing_rate}%</strong></div>
                                        <div class="bestcs-item"><span>CR BOX</span><strong>${bestCs.cr_box}%</strong></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            }
            statsContainer.innerHTML = statsHtml;
        }

        function renderRankingCs(rankingData) {
            const container = document.getElementById('rankingContainer');
            
            if (!rankingData || rankingData.length === 0) {
                container.innerHTML = '<div class="p-4 text-center text-muted">Belum ada data performa CS.</div>';
                return;
            }

            let html = `
                <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                    <table class="table table-hover mb-0 align-middle">
                        <thead class="sticky-top" style="z-index: 1;">
                            <tr>
                                <th class="px-3 py-2 text-center" style="width: 50px;">#</th>
                                <th class="px-3 py-2 text-start">Nama CS</th>
                                <th class="px-3 py-2 text-center">CR Box</th>
                                <th class="px-3 py-2 text-center">Total Box</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

            rankingData.forEach((cs, index) => {
                const rank = index + 1;
                
                let rankBadge = `<span class="fw-bold text-muted">#${rank}</span>`;
                let rowClass = '';
                let badgeStyle = 'class="badge bg-label-primary"'; 
                
                if (rank === 1) {
                    rankBadge = `<i class="ti tabler-medal fs-4" style="color: #FFD700; filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));" title="Juara 1"></i>`;
                    badgeStyle = `class="badge" style="background-color: #3fa755ff !important; color: white !important;"`;
                } else if (rank === 2) {
                    rankBadge = `<i class="ti tabler-medal fs-4 text-secondary" title="Juara 2"></i>`;
                } else if (rank === 3) {
                    rankBadge = `<i class="ti tabler-medal fs-4" style="color: #cd7f32;" title="Juara 3"></i>`;
                }

                let formattedBox = parseFloat(cs.total_box).toFixed(1).replace(/\.0$/, '');

                html += `
                    <tr class="${rowClass}">
                        <td class="px-3 py-2 text-center">${rankBadge}</td>
                        <td class="px-3 py-2 text-start">
                            <span class="fw-bold text-dark" style="font-size: 13px;">${cs.name}</span>
                        </td>
                        <td class="px-3 py-2 text-center">
                            <span ${badgeStyle}>
                                ${cs.cr_box}%
                            </span>
                        </td>
                        <td class="px-3 py-2 text-center font-monospace small fw-bold">
                            ${formattedBox}
                        </td>
                    </tr>
                `;
            });

            html += `
                        </tbody>
                    </table>
                </div>
            `;

            container.innerHTML = html;
        }

        function renderCharts(chartData, stats) {
            destroyCharts();
            const performanceCtx = document.getElementById('performanceChart').getContext('2d');
            charts.performanceChart = new Chart(performanceCtx, {
                type: 'line',
                data: {
                    labels: chartData.dates,
                    datasets: [
                        {
                            label: 'Lead', data: chartData.lead_data,
                            borderColor: '#696cff', backgroundColor: 'rgba(105, 108, 255, 0.1)',
                            tension: 0.3, borderWidth: 2, pointRadius: 3, pointHoverRadius: 5, fill: true
                        },
                        {
                            label: 'Closing', data: chartData.closing_data,
                            borderColor: '#71dd37', backgroundColor: 'rgba(113, 221, 55, 0.1)',
                            tension: 0.3, borderWidth: 2, pointRadius: 3, pointHoverRadius: 5, fill: true
                        }
                    ]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    plugins: { legend: { position: 'top', labels: { usePointStyle: false, boxWidth: 6 } } },
                    scales: {
                        y: { beginAtZero: true, grid: { color: '#f0f0f0' }, ticks: { font: { size: 10 } } },
                        x: { grid: { display: false }, ticks: { font: { size: 10 }, maxRotation: 45, minRotation: 45 } }
                    }
                }
            });
        }

        function destroyCharts() {
            Object.values(charts).forEach(chart => { if (chart) chart.destroy(); });
        }

        function showAlert(msg, type) {
            alertContainer.innerHTML = `
                <div class="alert alert-${type} alert-dismissible fade show shadow-sm" role="alert">
                    ${msg}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>`;
        }

        fetchData();
    });
</script>
@endpush