@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: 1px 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; 
        }

        .w-compact {
            width: 1%;
            white-space: nowrap;
        }

        .currency-fit {
            white-space: nowrap;
            width: 1%;
            padding-left: 15px !important; 
            padding-right: 15px !important;
        }

        .sticky-total td {
                position: sticky !important;
                top: 90px;
                z-index: 995;
                
                background-color: #727272 !important; 
                color: #ffffff !important;        
                
                border-bottom: 2px solid #818181 !important;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); 
                font-weight: 800;
        }

        .sticky-total td, 
        .sticky-total td span, 
        .sticky-total td div {
            color: #ffffff !important;
        }

        .info-tooltip {
        cursor: help;
        font-size: 13px;
        vertical-align: middle;
        margin-left: 4px;
        color: #6c757d;
        transition: color 0.2s;
        }

        .info-tooltip:hover {
            color: #0d6efd;
        }

        .bg-diff {
                background-color: #dc3545 !important; 
                color: #ffffff !important;
                font-weight: 800 !important;
        }

        .text-success-custom { color: #198754 !important; }
        .text-warning-custom { color: #ffc107 !important; }
        .text-danger-custom { color: #dc3545 !important; }

        .bg-system { background-color: #e3f2fd !important; }
        .bg-manual { background-color: #fff3e0 !important; }
        .text-system { color: #000000ff !important; }
        .text-manual { color: #000000ff !important; }
    </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">Rekap Harian By System (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" style="width: 1%; white-space: nowarp;">Leads</th>
                                    <th rowspan="2" class="text-center" style="width: 1%; white-space: nowrap;">Result</th>
                                    <th rowspan="2" class="text-center" style="width: 1%; white-space: nowarp;">Closing</th>
                                    
                                    <th rowspan="2" class="text-center">
                                        CR
                                        <i class="ti tabler-info-circle info-tooltip" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-html="true" 
                                        data-bs-placement="top"
                                        data-bs-container="body"
                                        title="<b>(Closing / Leads) × 100</b>"></i>
                                    </th>
                                    
                                    <th rowspan="2" class="text-center">
                                        CR Box
                                        <i class="ti tabler-info-circle info-tooltip" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-html="true" 
                                        data-bs-container="body"
                                        title="<b>(Total Box / Leads) × 100</b><br><small>Total Box  = Box + (Sachet / 5)</small>"></i>
                                    </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">
                                        Cost/Box
                                        <i class="ti tabler-info-circle info-tooltip" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-html="true" 
                                        data-bs-container="body"
                                        title="<b>Ads Spent / Total Box </b>"></i>
                                    </th>
                                    
                                    <th rowspan="2" class="text-center">Ads Spent (+12%)</th>
                                    
                                    <th rowspan="2" class="text-center">
                                        Cost/Kontak
                                        <i class="ti tabler-info-circle info-tooltip" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-html="true" 
                                        data-bs-container="body"
                                        title="<b>Ads Spent / Leads</b><br><small>Jika Leads 0, dibagi Result Realtime</small>"></i>
                                    </th>
                                    
                                    <th colspan="4" class="text-center">OMSET</th>
                                    
                                    <th rowspan="2" class="text-center">
                                        MARGIN PROFIT
                                        <i class="ti tabler-info-circle info-tooltip" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-html="true" 
                                        data-bs-container="body"
                                        title="<b>(Omset Everpro + Marketplace) - HPP - Ads Spent</b>"></i>
                                    </th>
                                    
                                    <th rowspan="2" class="text-center">
                                        ROAS
                                        <i class="ti tabler-info-circle info-tooltip" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-html="true" 
                                        data-bs-container="body"
                                        title="<b>Total Omset / Ads Spent</b>"></i>
                                    </th>
                                    
                                    <th colspan="3" class="text-center">RTS ~ EVP MP</th>
                                    
                                    <th rowspan="2" class="text-center">
                                        Rasio RTS
                                        <i class="ti tabler-info-circle info-tooltip" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-html="true" 
                                        data-bs-container="body"
                                        title="<b>(RTS Closing / Total Closing) × 100</b>"></i>
                                    </th>
                                </tr>
                                <tr>
                                    <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>
                                    
                                    <th class="text-center">
                                        Everpro
                                        <i class="ti tabler-info-circle info-tooltip" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-html="true" 
                                        data-bs-container="body"
                                        title="<b>Semua pesanan termasuk draft</b><br><small>Kecuali dari agent, dibatalkan, retur</small>"></i>
                                    </th>
                                    <th class="text-center">Marketplace</th>
                                    <th class="text-center">TOTAL</th>
                                    
                                    <th class="text-center">
                                        HPP
                                        <i class="ti tabler-info-circle info-tooltip" 
                                        data-bs-toggle="tooltip" 
                                        data-bs-html="true" 
                                        data-bs-container="body"
                                        title="<b>(Box × 48.500) + (Sachet × 9.700)</b><br><small>Menghitung total Box & Sachet dari WA & MP</small>"></i>
                                    </th>
                                    
                                    <th class="text-center">INV</th>
                                    <th class="text-center">Box</th>
                                    <th class="text-center">Sachet</th>
                                </tr>
                            </thead>
                            <tbody id="aggregateTableBody">
                                <tr>
                                    <td colspan="27" class="text-center py-5 text-muted">Memuat data...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <div class="space-y-4">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-bold text-gray-900">Statistik Performa</h3>
                    </div>
                    
                    <div class="relative w-full h-64">
                        <canvas id="performanceChart"></canvas>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 w-full">
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-3 w-full flex flex-col">
                        <div class="flex items-center gap-2 mb-3 border-b border-gray-50 pb-2">
                            <div class="p-1.5 bg-blue-50 rounded-lg text-blue-600 shrink-0">
                                <i class="bx bx-package text-xs"></i>
                            </div>
                            <h3 class="text-xs font-bold text-gray-800 uppercase">Top CS (Box)</h3>
                        </div>

                        <div id="rankingContainer" class="w-full flex-1 overflow-x-hidden">
                            <div class="spinner-border spinner-border-sm text-primary mx-auto my-6" role="status"></div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-3 w-full flex flex-col">
                        <div class="flex items-center gap-2 mb-3 border-b border-gray-50 pb-2">
                            <div class="p-1.5 bg-red-50 rounded-lg text-red-600 shrink-0">
                                <i class="bx bx-undo text-xs"></i>
                            </div>
                            <h3 class="text-xs font-bold text-gray-800 uppercase">Top CS (Retur)</h3>
                        </div>

                        <div id="rankingRtsContainer" class="w-full flex-1 overflow-x-hidden">
                            <div class="spinner-border spinner-border-sm text-primary mx-auto my-6" role="status"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4 border mt-4">
            <div class="card-header py-2">
                <h5 class="card-title mb-0 fs-6 fw-bold">Performa CS: Sistem vs Manual Input</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 600px; overflow: auto;">
                    <table id="combinedPerformanceTable">
                        <thead>
                            <tr>
                                <th rowspan="3" class="text-center" style="min-width: 100px;">Tanggal</th>
                                <th rowspan="3" class="text-center" style="min-width: 140px;">Nama CS</th>
                                <th rowspan="3" class="text-center" style="min-width: 80px;">Lead</th>
                                
                                <th colspan="10" class="text-center bg-system">DATA SISTEM</th>
                                <th colspan="12" class="text-center bg-manual">DATA MANUAL (CS)</th>
                            </tr>
                            <tr>
                                <th rowspan="2" class="text-center bg-system">Total<br>Closing</th>
                                <th rowspan="2" class="text-center bg-system">Dibatalkan</th>
                                <th rowspan="2" class="text-center bg-system">CR %</th>
                                <th rowspan="2" class="text-center bg-system">CR Box %</th>
                                <th colspan="3" class="text-center bg-system">WHATSAPP</th>
                                <th colspan="3" class="text-center bg-system">MARKETPLACE</th>
                                
                                <th rowspan="2" class="text-center bg-manual">Total<br>Closing</th>
                                <th rowspan="2" class="text-center bg-manual">CR %</th>
                                <th rowspan="2" class="text-center bg-manual">CR Box %</th>
                                <th colspan="3" class="text-center bg-manual">Closing</th>
                                <th colspan="3" class="text-center bg-manual">WA</th>
                                <th colspan="3" class="text-center bg-manual">MP</th>
                            </tr>
                            <tr>
                                <th class="text-center bg-system">Closing</th>
                                <th class="text-center bg-system">Box</th>
                                <th class="text-center bg-system">Sachet</th>
                                <th class="text-center bg-system">Closing</th>
                                <th class="text-center bg-system">Box</th>
                                <th class="text-center bg-system">Sachet</th>
                                
                                <th class="text-center bg-manual">Today</th>
                                <th class="text-center bg-manual">FU</th>
                                <th class="text-center bg-manual">RO</th>
                                <th class="text-center bg-manual">Closing</th>
                                <th class="text-center bg-manual">Box</th>
                                <th class="text-center bg-manual">Sachet</th>
                                <th class="text-center bg-manual">Closing</th>
                                <th class="text-center bg-manual">Box</th>
                                <th class="text-center bg-manual">Sachet</th>
                            </tr>
                        </thead>
                        <tbody id="combinedPerformanceBody">
                            <tr>
                                <td colspan="24" class="text-center py-5 text-muted">Memuat data...</td>
                            </tr>
                        </tbody>
                    </table>
                </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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.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 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();

        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl, {
                container: 'body'
            });
        });
        
        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;
                }
            }
            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': 
                    const veryOldDate = new Date('2025-01-01');
                    const todayMax = new Date();
                    startDate = formatDateApi(veryOldDate); 
                    endDate = formatDateApi(todayMax); 
                    label = "Semua (Max)";
                    window.dateFilterState.startDate = startDate;
                    window.dateFilterState.endDate = endDate;
                    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;

            document.getElementById('aggregateTableBody').innerHTML = `<tr><td colspan="27" class="py-5 text-center"><div class="spinner-border text-primary" role="status"></div></td></tr>`;
            document.getElementById('combinedPerformanceBody').innerHTML = `<tr><td colspan="24" 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) {
                        showAlert('Data tidak dapat dimuat.', 'warning');
                        return;
                    }

                    if (data.data.length === 0 && (!data.aggregate_data || data.aggregate_data.length === 0)) {
                         showAlert('Tidak ada data ditemukan untuk periode ini.', 'warning');
                         document.getElementById('aggregateTableBody').innerHTML = `<tr><td colspan="27" class="text-muted py-4 text-center">Tidak ada data.</td></tr>`;
                         document.getElementById('combinedPerformanceBody').innerHTML = `<tr><td colspan="24" class="text-muted py-4 text-center">Tidak ada data.</td></tr>`;
                         statsContainer.innerHTML = '';
                         rankingContainer.innerHTML = '';
                         destroyCharts();
                         return;
                    }

                    renderAggregateTable(data.aggregate_data, data.evp_realtime, data.omset_mp);
                    renderCombinedPerformanceTable(data.cs_performance, data.data);
                    renderStats(data.stats);
                    renderRankingCs(data.stats.cs_ranking);
                    renderRankingCsRts(data.cs_ranking_rts);
                    renderCharts(data.chart_data, data.stats);
                })
                .catch(err => {
                    console.error(err);
                    showAlert('Terjadi kesalahan server saat memuat data.', 'danger');
                });
        }

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

        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: 10;">
                            <tr>
                                <th class="px-3 py-2 text-center" style="width: 50px; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;">#</th>
                                <th class="px-3 py-2 text-start" style="background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;">Nama CS</th>
                                <th class="px-3 py-2 text-center" style="background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;">CR Box</th>
                                <th class="px-3 py-2 text-center" style="background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;">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 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>
                        <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 renderRankingCsRts(rankingData) {
            const container = document.getElementById('rankingRtsContainer');
            
            if (!rankingData || rankingData.length === 0) {
                container.innerHTML = '<div class="p-4 text-center text-muted">Belum ada data retur.</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: 10;">
                            <tr>
                                <th class="px-2 py-2 text-center" style="width: 40px; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;">#</th>
                                <th class="px-2 py-2 text-start" style="background-color: #f8f9fa; border-bottom: 1px solid #dee2e6;">Nama CS</th>
                                <th class="px-2 py-2 text-center" style="background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; font-size: 10px;">Jumlah<br>Closing</th>
                                <th class="px-2 py-2 text-center" style="background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; font-size: 10px;">Retur<br>Closing</th>
                                <th class="px-2 py-2 text-center" style="background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; font-size: 10px;">Ratio<br>RTS</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

            rankingData.forEach((cs, index) => {
                const rank = index + 1;
                let rankBadge = `<span class="fw-bold text-muted" style="font-size: 11px;">#${rank}</span>`;
                
                let ratioColor = 'bg-secondary'; 
                if(cs.rts_ratio > 10) ratioColor = 'bg-danger text-white';
                else if(cs.rts_ratio > 5) ratioColor = 'bg-warning text-dark';
                else ratioColor = 'bg-success text-white';
                
                if (rank === 1) {
                    rankBadge = `<i class="ti tabler-alert-triangle fs-5 text-danger"></i>`;
                }

                html += `
                    <tr>
                        <td class="px-2 py-2 text-center">${rankBadge}</td>
                        <td class="px-2 py-2 text-start">
                            <span class="fw-bold text-dark" style="font-size: 12px;">${cs.name}</span>
                        </td>
                        <td class="px-2 py-2 text-center font-monospace small text-muted">
                            ${cs.total_closing}
                        </td>
                        <td class="px-2 py-2 text-center font-monospace fw-bold text-danger">
                            ${cs.rts_closing}
                        </td>
                        <td class="px-2 py-2 text-center">
                            <span class="badge ${ratioColor}" style="font-size: 10px;">
                                ${cs.rts_ratio}%
                            </span>
                        </td>
                    </tr>
                `;
            });

            html += `</tbody></table></div>`;
            container.innerHTML = html;
        }

        function renderCombinedPerformanceTable(csPerformance, manualData) {
            const tbody = document.getElementById('combinedPerformanceBody');
            
            if ((!csPerformance || csPerformance.length === 0) && (!manualData || manualData.length === 0)) {
                tbody.innerHTML = `<tr><td colspan="24" class="text-center py-5 text-muted">Tidak ada data performa.</td></tr>`;
                return;
            }

            const combinedMap = {};

            // Mapping Data System
            if (csPerformance && csPerformance.length > 0) {
                csPerformance.forEach(item => {
                    const key = `${item.raw_date}_${item.cs_name}`;
                    combinedMap[key] = {
                        date: item.date,
                        raw_date: item.raw_date,
                        cs_name: item.cs_name,
                        lead: item.lead,
                        system: item,
                        manual: null
                    };
                });
            }

            // Mapping Data Manual
            if (manualData && manualData.length > 0) {
                manualData.forEach(item => {
                    const dateFormatted = new Date(item.date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
                    const key = `${item.date}_${item.customer_service?.name || 'Unknown'}`;
                    
                    if (combinedMap[key]) {
                        combinedMap[key].manual = item;
                    } else {
                        combinedMap[key] = {
                            date: dateFormatted,
                            raw_date: item.date,
                            cs_name: item.customer_service?.name || 'Unknown',
                            lead: item.total_lead,
                            system: null,
                            manual: item
                        };
                    }
                });
            }

            const sortedData = Object.values(combinedMap).sort((a, b) => {
                return new Date(b.raw_date) - new Date(a.raw_date);
            });

            let rows = '';
            
            // --- Helper Comparison Function ---
            const getDiffClass = (valSys, valMan) => {
                let s = parseFloat(valSys || 0);
                let m = parseFloat(valMan || 0);

                return s != m ? 'bg-diff' : 'text-manual';
            };

            sortedData.forEach(entry => {
                const sys = entry.system || {};
                const man = entry.manual || {};

                const manualRawBox = parseFloat(man.total_box || 0);
                const manualRawSachet = parseFloat(man.total_sachet || 0);
                const manualBoxEq = calculateBoxEquivalent(man.total_box || 0, man.total_sachet || 0);
                const manualCrBox = entry.lead > 0 ? ((manualBoxEq / entry.lead) * 100).toFixed(2) : '0.00';

                // --- Prepare Values for Comparison ---
                const s_closing     = sys.total_closing || 0;
                const s_wa_close    = sys.wa_closing || 0;
                const s_wa_box      = sys.wa_box || 0;
                const s_wa_sachet   = sys.wa_sachet || 0;
                const s_mp_close    = sys.mp_closing || 0;
                const s_mp_box      = sys.mp_box || 0;
                const s_mp_sachet   = sys.mp_sachet || 0;

                // Manual Values (Target comparison)
                const m_closing     = man.total_closing || 0;
                const m_cr          = man.closing_rate || 0;
                const m_wa_close    = man.closing_wa || 0;
                const m_wa_box      = man.wa_box || 0;
                const m_wa_sachet   = man.wa_sachet || 0;
                const m_mp_close    = man.closing_mp || 0;
                const m_mp_box      = man.mp_box || 0;
                const m_mp_sachet   = man.mp_sachet || 0;

                // --- Generate Rows ---
                rows += `
                    <tr>
                        <td class="text-center fw-bold">${entry.date}</td>
                        <td class="text-start fw-bold text-nowrap">${entry.cs_name}</td>
                        <td class="text-center fw-bold">${entry.lead || 0}</td>
                        
                        <td class="text-center fw-bold text-system">${s_closing}</td>
                        <td class="text-center fw-bold text-system">${sys.cancelled || 0}</td>
                        <td class="text-center fw-bold text-system">${parseFloat(sys.cr || 0).toFixed(2)}%</td>
                        <td class="text-center fw-bold text-system">${parseFloat(sys.cr_box || 0).toFixed(2)}%</td>
                        <td class="text-center text-system">${s_wa_close}</td>
                        <td class="text-center text-system">${s_wa_box}</td>
                        <td class="text-center text-system">${s_wa_sachet}</td>
                        <td class="text-center text-system">${s_mp_close}</td>
                        <td class="text-center text-system">${s_mp_box}</td>
                        <td class="text-center text-system">${s_mp_sachet}</td>
                        
                        <td class="text-center fw-bold ${getDiffClass(s_closing, m_closing)}">${m_closing}</td>
                        
                        <td class="text-center fw-bold text-manual">${parseFloat(m_cr).toFixed(2)}%</td>
                        <td class="text-center fw-bold text-manual">${parseFloat(manualCrBox).toFixed(2)}%</td>
                        
                        <td class="text-center text-manual">${man.closing_today || 0}</td>
                        <td class="text-center text-manual">${man.closing_follow_up || 0}</td>
                        <td class="text-center text-manual">${man.closing_repeat_order || 0}</td>
                        
                        <td class="text-center ${getDiffClass(s_wa_close, m_wa_close)}">${m_wa_close}</td>
                        <td class="text-center ${getDiffClass(s_wa_box, m_wa_box)}">${m_wa_box}</td>
                        <td class="text-center ${getDiffClass(s_wa_sachet, m_wa_sachet)}">${m_wa_sachet}</td>
                        
                        <td class="text-center ${getDiffClass(s_mp_close, m_mp_close)}">${m_mp_close}</td>
                        <td class="text-center ${getDiffClass(s_mp_box, m_mp_box)}">${m_mp_box}</td>
                        <td class="text-center ${getDiffClass(s_mp_sachet, m_mp_sachet)}">${m_mp_sachet}</td>
                    </tr>
                `;
            });

            tbody.innerHTML = rows;
        }

        function renderAggregateTable(aggregateData, evpRealtime, omsetMP) {
            const tbody = document.getElementById('aggregateTableBody');
            
            if (!aggregateData || aggregateData.length === 0) {
                tbody.innerHTML = `<tr><td colspan="27" class="text-center text-muted py-4">Tidak ada data rekap sistem.</td></tr>`;
                return;
            }

            let sum = {
                leads: 0, realtime: 0, closing: 0,
                waClosing: 0, waBox: 0, waSachet: 0,
                mpClosing: 0, mpBox: 0, mpSachet: 0,
                rawBox: 0, rawSachet: 0, boxDisplay: 0, sachetDisplay: 0, boxEquivalent: 0,
                spent: 0, omsetEvp: 0, omsetMp: 0, omsetTotal: 0, hpp: 0, margin: 0,
                rtsClosing: 0, rtsBox: 0, rtsSachet: 0
            };

            let rows = '';

            aggregateData.forEach(item => {
                const dateKey = item.date;
                const valSpent = parseFloat(item.ads_spent || 0);
                const valEvp = evpRealtime && evpRealtime[dateKey] ? parseFloat(evpRealtime[dateKey]) : 0;
                const valMp = omsetMP && omsetMP[dateKey] ? parseFloat(omsetMP[dateKey]) : 0;
                
                const valLeads = parseFloat(item.total_lead || 0);
                const valRealtime = parseFloat(item.leads_realtime || 0);
                const valClosing = parseFloat(item.total_closing || 0);
                
                const valWaClosing = parseFloat(item.closing_wa || 0);
                const valWaBox = parseFloat(item.waBox || item.wa_box || 0);
                const valWaSachet = parseFloat(item.waSachet || item.wa_sachet || 0);
                
                const valMpClosing = parseFloat(item.closing_mp || 0);
                const valMpBox = parseFloat(item.mpBox || item.mp_box || 0);
                const valMpSachet = parseFloat(item.mpSachet || item.mp_sachet || 0);
                
                const valRawBox = parseFloat(item.total_box || 0);
                const valRawSachet = parseFloat(item.total_sachet || 0);
                
                const valRtsClosing = parseFloat(item.rts_closing || 0);
                const valRtsBox = parseFloat(item.rts_box || 0);
                const valRtsSachet = parseFloat(item.rts_sachet || 0);

                const displayTotalBox = valRawBox + Math.floor(valRawSachet / 5);
                const displayTotalSachet = valRawSachet % 5;
                const rowBoxEquivalent = valRawBox + (valRawSachet / 5);

                const rowHpp = ((valWaBox + valMpBox) * 48500) + ((valWaSachet + valMpSachet) * 9700);
                const rowTotalOmset = valEvp + valMp;
                const rowMargin = rowTotalOmset - rowHpp - valSpent;
                const rowRoas = valSpent > 0 ? rowTotalOmset / valSpent : 0;
                
                const rowCr = valLeads > 0 ? (valClosing / valLeads) * 100 : 0;
                const rowCrBox = valLeads > 0 ? (rowBoxEquivalent / valLeads) * 100 : 0;
                const rowCostPerBox = rowBoxEquivalent > 0 ? valSpent / rowBoxEquivalent : 0;
                
                let rowCostPerKontak = 0;
                if (valLeads > 0) rowCostPerKontak = valSpent / valLeads;
                else if (valRealtime > 0) rowCostPerKontak = valSpent / valRealtime;

                const rowRtsRatio = valClosing > 0 ? (valRtsClosing / valClosing) * 100 : 0;
                
                sum.leads += valLeads;
                sum.realtime += valRealtime;
                sum.closing += valClosing;
                sum.waClosing += valWaClosing;
                sum.waBox += valWaBox;
                sum.waSachet += valWaSachet;
                sum.mpClosing += valMpClosing;
                sum.mpBox += valMpBox;
                sum.mpSachet += valMpSachet;
                sum.rawBox += valRawBox;
                sum.rawSachet += valRawSachet;
                sum.boxDisplay += displayTotalBox;
                sum.sachetDisplay += displayTotalSachet;
                sum.boxEquivalent += rowBoxEquivalent; 
                sum.spent += valSpent;
                sum.omsetEvp += valEvp;
                sum.omsetMp += valMp;
                sum.omsetTotal += rowTotalOmset;
                sum.hpp += rowHpp;
                sum.margin += rowMargin;
                sum.rtsClosing += valRtsClosing;
                sum.rtsBox += valRtsBox;
                sum.rtsSachet += valRtsSachet;

                const dateObj = new Date(dateKey);
                const dateFormatted = dateObj.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });

                rows += `
                    <tr>
                        <td class="text-center fw-bold">${dateFormatted}</td>
                        <td class="text-center fw-bold">${valLeads}</td>
                        <td class="text-center fw-bold">${valRealtime}</td>
                        <td class="text-center fw-bold">${valClosing}</td>
                        <td class="text-center fw-bold">${rowCr.toFixed(2)}%</td>
                        <td class="text-center fw-bold">${rowCrBox.toFixed(2)}%</td>
                        <td class="text-center fw-bold">${valWaClosing}</td>
                        <td class="text-center fw-bold">${valWaBox}</td>
                        <td class="text-center fw-bold">${valWaSachet}</td>
                        <td class="text-center fw-bold">${valMpClosing}</td>
                        <td class="text-center fw-bold">${valMpBox}</td>
                        <td class="text-center fw-bold">${valMpSachet}</td>
                        <td class="text-center fw-bold">${displayTotalBox}</td>
                        <td class="text-center fw-bold">${displayTotalSachet}</td>
                        <td class="text-center fw-bold">Rp ${Math.round(rowCostPerBox).toLocaleString('id-ID')}</td>
                        <td class="text-center fw-bold">Rp ${Math.round(valSpent).toLocaleString('id-ID')}</td>
                        <td class="text-center fw-bold">Rp ${Math.round(rowCostPerKontak).toLocaleString('id-ID')}</td>
                        <td class="text-center fw-bold">Rp ${Math.round(valEvp).toLocaleString('id-ID')}</td>
                        <td class="text-center fw-bold">Rp ${Math.round(valMp).toLocaleString('id-ID')}</td>
                        <td class="text-center fw-bold">Rp ${Math.round(rowTotalOmset).toLocaleString('id-ID')}</td>
                        <td class="text-center fw-bold">Rp ${Math.round(rowHpp).toLocaleString('id-ID')}</td>
                        <td class="text-center fw-bold">Rp ${Math.round(rowMargin).toLocaleString('id-ID')}</td>
                        <td class="text-center fw-bold">${rowRoas.toFixed(2)}</td>
                        <td class="text-center fw-bold">${valRtsClosing}</td>
                        <td class="text-center fw-bold">${valRtsBox}</td>
                        <td class="text-center fw-bold">${valRtsSachet}</td>
                        <td class="text-center fw-bold">${rowRtsRatio.toFixed(2)}%</td>
                    </tr>
                `;
            });

            const totalCr = sum.leads > 0 ? (sum.closing / sum.leads) * 100 : 0;
            const totalCrBox = sum.leads > 0 ? (sum.boxEquivalent / sum.leads) * 100 : 0;
            const totalCostPerBox = sum.boxEquivalent > 0 ? sum.spent / sum.boxEquivalent : 0;
            const totalCostPerKontak = sum.leads > 0 ? sum.spent / sum.leads : 0; 
            const totalRoas = sum.spent > 0 ? sum.omsetTotal / sum.spent : 0;
            const totalRtsRatio = sum.closing > 0 ? (sum.rtsClosing / sum.closing) * 100 : 0;

            const totalRowHtml = `
                <tr class="w-bold sticky-total">
                    <td class="text-center">TOTAL</td>
                    <td class="text-center">${sum.leads}</td>
                    <td class="text-center">${sum.realtime}</td>
                    <td class="text-center">${sum.closing}</td>
                    <td class="text-center text-primary">${totalCr.toFixed(2)}%</td>
                    <td class="text-center text-primary">${totalCrBox.toFixed(2)}%</td>
                    <td class="text-center">${sum.waClosing}</td>
                    <td class="text-center">${sum.waBox}</td>
                    <td class="text-center">${sum.waSachet}</td>
                    <td class="text-center">${sum.mpClosing}</td>
                    <td class="text-center">${sum.mpBox}</td>
                    <td class="text-center">${sum.mpSachet}</td>
                    <td class="text-center">${sum.boxDisplay}</td>
                    <td class="text-center">${sum.sachetDisplay}</td>
                    <td class="text-center currency-fit">Rp ${Math.round(totalCostPerBox).toLocaleString('id-ID')}</td>
                    <td class="text-center currency-fit">Rp ${Math.round(sum.spent).toLocaleString('id-ID')}</td>
                    <td class="text-center currency-fit">Rp ${Math.round(totalCostPerKontak).toLocaleString('id-ID')}</td>
                    <td class="text-center currency-fit text-muted">Rp ${Math.round(sum.omsetEvp).toLocaleString('id-ID')}</td>
                    <td class="text-center currency-fit text-muted">Rp ${Math.round(sum.omsetMp).toLocaleString('id-ID')}</td>
                    <td class="text-center currency-fit">Rp ${Math.round(sum.omsetTotal).toLocaleString('id-ID')}</td>
                    <td class="text-center currency-fit text-muted">Rp ${Math.round(sum.hpp).toLocaleString('id-ID')}</td>
                    <td class="text-center currency-fit ${sum.margin < 0 ? 'text-danger' : 'text-success'}">Rp ${Math.round(sum.margin).toLocaleString('id-ID')}</td>
                    <td class="text-center">${totalRoas.toFixed(2)}</td>
                    <td class="text-center text-danger">${sum.rtsClosing}</td>
                    <td class="text-center text-danger">${sum.rtsBox}</td>
                    <td class="text-center text-danger">${sum.rtsSachet}</td>
                    <td class="text-center text-danger">${totalRtsRatio.toFixed(2)}%</td>
                </tr>
            `;

            tbody.innerHTML = totalRowHtml + 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_return', label: 'Total Retur', icon: 'truck-return', color: '#696cff', value: stats.total_return, change: prev.return_change || 0, format: 'number' },
                { key: 'avg_return_ratio', label: 'Ratio Retur', icon: 'percentage', color: '#71dd37', value: stats.avg_return_ratio, change: prev.return_ratio_change || 0, format: 'percent' },
            ];
            
            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 #ffab00;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="stats-icon-wrapper" style="background:#ffab0015;">
                                        <i class="ti tabler-crown fs-4" style="color:#ffab00;"></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 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