{{-- KPI Cards --}}
<div class="row mt-2">
    <div class="col-12">
        <div class="card mb-4" style="background: linear-gradient(310deg,#028284,#016e70 100%);border:none;">
            <div class="card-header pb-3 p-3" style="background: transparent;">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-1 text-white" style="font-size: 16px; font-weight: 700;">My Tickets</h6>
                        <p class="text-sm mb-0" style="color: rgba(255,255,255,0.75);">
                            <i class="ni ni-folder-17 me-1"></i> Track your ticket history — 3 Bulan Terakhir ({{ now()->subMonths(3)->format('M Y') }} s/d {{ now()->format('M Y') }})
                        </p>
                    </div>
                    <span class="badge text-white px-3 py-2" style="background: rgba(255,255,255,0.2); font-size: 12px; border-radius: 12px;">
                        <i class="ni ni-time-alarm me-1"></i> {{ now()->format('H:i') }} WIB
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card h-100">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Entry / Draft</p>
                            <h5 class="font-weight-bolder mt-1">{{ $ticketing_kpi['entry_draft'] ?? 0 }}</h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-primary shadow text-center rounded-circle">
                            <i class="ni ni-single-copy-04 text-lg opacity-10"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card h-100">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Pending</p>
                            <h5 class="font-weight-bolder mt-1">{{ $ticketing_kpi['pending'] ?? 0 }}</h5>
                            {{-- <p class="mb-0 text-xs text-muted">Waiting</p> --}}
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-warning shadow text-center rounded-circle">
                            <i class="ni ni-time-alarm text-lg opacity-10"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card h-100">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Approve</p>
                            <h5 class="font-weight-bolder mt-1">{{ $ticketing_kpi['approve'] ?? 0 }}</h5>
                            {{-- <p class="mb-0 text-xs text-muted">Status A</p> --}}
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-info shadow text-center rounded-circle">
                            <i class="ni ni-settings text-lg opacity-10"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-sm-6">
        <div class="card h-100">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">In Progress</p>
                            <h5 class="font-weight-bolder mt-1">{{ $ticketing_kpi['in_progress'] ?? 0 }}</h5>
                            {{-- <p class="mb-0 text-xs text-muted">Status P</p> --}}
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-success shadow text-center rounded-circle">
                            <i class="ni ni-check-bold text-lg opacity-10"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Chart: My Ticket Status & Overdue Tickets Row --}}
<div class="row mt-4">
    {{-- My Ticket Status Distribution (Left 7 columns) --}}
    <div class="col-lg-7 mb-4">
        <div class="card z-index-2 h-100">
            <div class="card-header pb-0 pt-3 bg-transparent">
                <h6 class="text-capitalize mb-0">My Ticket Status Distribution</h6>
            </div>
            <div class="card-body p-3 pb-2">
                <div id="chart-my-ticket-status" style="height: 280px;"></div>
                {{-- Period Navigator --}}
<div class="d-flex align-items-center justify-content-center mt-3 pt-2" style="border-top: 1px solid #e9ecef;">
    <button id="prevMyStatusPeriod" class="btn btn-link btn-sm p-0 me-3" style="color: #5e72e4; font-size: 16px; line-height: 1;" title="Previous">
        <i class="ni ni-bold-left"></i>
    </button>

    <div style="display: flex; align-items: flex-start; flex: 1; max-width: 300px; position: relative;">
        @foreach(['all' => ($my_ticket_status_period_labels['all'] ?? 'All'), 'bulan_ini' => ($my_ticket_status_period_labels['bulan_ini'] ?? 'Bulan Ini'), 'bulan_lalu' => ($my_ticket_status_period_labels['bulan_lalu'] ?? 'Bulan Lalu'), 'bulan_2lalu' => ($my_ticket_status_period_labels['bulan_2lalu'] ?? '2 Bulan Lalu')] as $pk => $pl)
        @php $pi = ['all'=>0,'bulan_ini'=>1,'bulan_lalu'=>2,'bulan_2lalu'=>3][$pk]; @endphp
        <div style="flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; position: relative;"
             class="mystatusperiod-step" data-index="{{ $pi }}" data-period="{{ $pk }}">
            @if($pi < 3)
            <div class="mystatusperiod-line" data-index="{{ $pi }}"
                 style="position: absolute; top: 7px; left: 50%; right: -50%; height: 2px; background: #dee2e6; z-index: 1; transition: background .2s;"></div>
            @endif
            <div class="mystatusperiod-dot" data-index="{{ $pi }}"
                 style="width: 14px; height: 14px; border-radius: 50%; border: 2px solid #dee2e6; background: #fff; position: relative; z-index: 2; transition: all .2s; flex-shrink: 0;"></div>
            <span class="mystatusperiod-dottip" data-index="{{ $pi }}"
                  style="font-size: 10px; color: #adb5bd; white-space: nowrap; text-align: center; font-weight: 400; transition: all .2s; line-height: 1.2;">
                {{ $pl }}
            </span>
        </div>
        @endforeach
    </div>

    <button id="nextMyStatusPeriod" class="btn btn-link btn-sm p-0 ms-3" style="color: #5e72e4; font-size: 16px; line-height: 1;" title="Next">
        <i class="ni ni-bold-right"></i>
    </button>
</div>
            </div>
        </div>
    </div>

    {{-- Overdue Tickets Table (Right 5 columns) --}}
    <div class="col-lg-5 mb-4">
        <div class="card h-100">
            <div class="card-header pb-0 p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0">
                            <i class="ni ni-time-alarm me-1" style="color: #f5365c;"></i>Overdue Tickets
                        </h6>
                        <p class="text-xs text-muted mb-0">Ticket yang melewati estimasi selesai</p>
                    </div>
                    <span class="badge bg-gradient-danger px-2 py-1" style="font-size: 11px;">
                        {{ count($overdue_tickets ?? []) }}
                    </span>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                    <table class="table align-items-center mb-0 table-sm">
                        <thead style="position: sticky; top: 0; background-color: #f8f9fa; z-index: 10;">
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" style="width: 70px;">Ticket</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 80px;">Jenis</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Problem</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center" style="width: 80px;">Overdue</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($overdue_tickets ?? [] as $ticket)
                            <tr>
                                <td class="text-xs ps-2">
                                    <span class="badge bg-light text-dark" style="font-size: 9px; font-family: monospace;">
                                        {{ $ticket->id }}
                                    </span>
                                </td>
                                <td class="text-xs">
                                    <div style="max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $ticket->jenis_name ?? $ticket->jenis ?? '-' }}">
                                        {{ $ticket->jenis_name ?? $ticket->jenis ?? '-' }}
                                    </div>
                                </td>
                                <td class="text-xs">
                                    <div style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $ticket->problem ?? '-' }}">
                                        {{ $ticket->problem ?? '-' }}
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-danger text-white" style="font-size: 10px;">
                                        {{ $ticket->days_overdue }} hari
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-xs py-5 text-secondary">
                                    <i class="ni ni-check-bold d-block mb-2" style="font-size: 24px; opacity: 0.3; color: #2dce89;"></i>
                                    Tidak ada ticket yang overdue
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- My Tickets History Table --}}
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header pb-0 p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">My Tickets History</h6>
                    <a href="{{ URL::to('/trtick') }}" class="btn btn-sm btn-primary">View All</a>
                </div>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div id="guest-history-section">
                <div class="table-responsive p-0">
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Ticket ID</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Date</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Kategori</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Code/Software</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Problem</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($my_tickets_history ?? [] as $ticket)
                            <tr>
                                <td class="text-xs ps-3">{{ $ticket->id }}</td>
                                <td class="text-xs">{{ \Carbon\Carbon::parse($ticket->ticket_date)->format('d M Y') }}</td>
                                <td class="text-xs">{{ $ticket->kategori_name ?? '-' }}</td>
                                <td class="text-xs">{{ $ticket->code ?? $ticket->software_name ?? '-' }}</td>
                                <td class="text-xs" style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                    {{ $ticket->problem ?? '-' }}
                                </td>
                                <td class="text-center">
                                    @php
                                        $statusClass = match($ticket->status) {
                                            'E' => 'bg-secondary',
                                            'W' => 'bg-warning',
                                            'A' => 'bg-success',
                                            'P' => 'bg-info',
                                            'C' => 'bg-gradient-success',
                                            'R' => 'bg-danger',
                                            default => 'bg-secondary'
                                        };
                                    @endphp
                                    <span class="badge {{ $statusClass }} text-white" style="font-size: 10px;">
                                        {{ $ticket->status_name }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-xs py-5 text-secondary">
                                    <i class="ni ni-box-2 d-block mb-2" style="font-size: 24px; opacity: 0.3;"></i>
                                    Belum ada ticket
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-end px-3 py-3 border-top">
                        {{ $my_tickets_history->withQueryString()->links('pagination::numeric') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('js')
<script src="{{ asset('/') }}assets/js/vendor/echarts.min.js"></script>
<script>
// AJAX pagination untuk My Tickets History
function initGuestHistoryPagination() {
    var section = document.getElementById('guest-history-section');
    if (!section) return;

    section.addEventListener('click', function(event) {
        var link = event.target.closest('a');
        if (!link || !section.contains(link)) return;

        var href = link.getAttribute('href');
        if (!href || href.indexOf('page=') === -1) return;

        event.preventDefault();
        loadGuestHistorySection(href);
    });
}

function loadGuestHistorySection(url) {
    fetch(url, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(function(response) {
        return response.text();
    })
    .then(function(html) {
        var parser = new DOMParser();
        var doc = parser.parseFromString(html, 'text/html');
        var newSection = doc.getElementById('guest-history-section');
        var currentSection = document.getElementById('guest-history-section');

        if (newSection && currentSection) {
            currentSection.innerHTML = newSection.innerHTML;
            window.history.replaceState(null, '', url);
        } else {
            window.location.href = url;
        }
    })
    .catch(function() {
        window.location.href = url;
    });
}

document.addEventListener("DOMContentLoaded", function() {
    // My Ticket Status Distribution with Period Navigation
    var myTicketStatusDatasets = {
        'all': @json($my_ticket_status_all ?? []),
        'bulan_ini': @json($my_ticket_status_bulan_ini ?? []),
        'bulan_lalu': @json($my_ticket_status_bulan_lalu ?? []),
        'bulan_lalu_lalu': @json($my_ticket_status_2bulan_lalu ?? [])
    };
    
    var myStatusPeriods = ['all', 'bulan_ini', 'bulan_lalu', 'bulan_lalu_lalu'];
    var myStatusPeriodLabelsRaw = @json($my_ticket_status_period_labels ?? null);
    var myStatusPeriodLabels = {
        'all': (myStatusPeriodLabelsRaw && myStatusPeriodLabelsRaw.all) || 'All',
        'bulan_ini': (myStatusPeriodLabelsRaw && myStatusPeriodLabelsRaw.bulan_ini) || 'Bulan Ini',
        'bulan_lalu': (myStatusPeriodLabelsRaw && myStatusPeriodLabelsRaw.bulan_lalu) || 'Bulan Lalu',
        'bulan_lalu_lalu': (myStatusPeriodLabelsRaw && myStatusPeriodLabelsRaw.bulan_2lalu) || '2 Bulan Lalu'
    };
    
    var currentMyStatusPeriodIndex = 0; // Default to 'all'
    
    var chartStatusDom = document.getElementById('chart-my-ticket-status');
    var chartStatus = echarts.init(chartStatusDom);
    
    function updateMyTicketStatusChart(periodKey) {
        var myTicketStatusData = myTicketStatusDatasets[periodKey];
        
        if (myTicketStatusData.length > 0) {
            var statusOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                legend: {
                    bottom: '0%',
                    left: 'center'
                },
                series: [{
                    name: 'Status',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {c}'
                    },
                    data: myTicketStatusData.map(function(item) {
                        return {
                            value: item.total,
                            name: item.status_name
                        };
                    })
                }]
            };
            
            chartStatus.setOption(statusOption, true); // true = notMerge
        } else {
            // No data, show empty state
            chartStatus.setOption({
                title: {
                    text: 'No data available',
                    left: 'center',
                    top: 'middle',
                    textStyle: {
                        color: '#adb5bd',
                        fontSize: 14
                    }
                }
            }, true);
        }
    }
    
    function updateMyStatusPeriodNav(idx) {
        document.querySelectorAll('.mystatusperiod-dot').forEach(function(dot) {
            var i = parseInt(dot.dataset.index);
            if (i === idx) {
                dot.style.background = '#5e72e4';
                dot.style.borderColor = '#5e72e4';
                dot.style.boxShadow = '0 0 0 3px rgba(94,114,228,.2)';
            } else if (i < idx) {
                dot.style.background = '#5e72e4';
                dot.style.borderColor = '#5e72e4';
                dot.style.boxShadow = 'none';
            } else {
                dot.style.background = '#fff';
                dot.style.borderColor = '#dee2e6';
                dot.style.boxShadow = 'none';
            }
        });

        document.querySelectorAll('.mystatusperiod-line').forEach(function(line) {
            line.style.background = parseInt(line.dataset.index) < idx ? '#5e72e4' : '#dee2e6';
        });

        document.querySelectorAll('.mystatusperiod-dottip').forEach(function(tip) {
            var i = parseInt(tip.dataset.index);
            tip.style.color = i === idx ? '#5e72e4' : '#adb5bd';
            tip.style.fontWeight = i === idx ? '600' : '400';
        });
    }

    // Event listeners — masing-masing cukup SEKALI
    document.querySelectorAll('.mystatusperiod-step').forEach(function(step) {
        step.addEventListener('click', function() {
            currentMyStatusPeriodIndex = parseInt(this.dataset.index);
            updateMyTicketStatusChart(myStatusPeriods[currentMyStatusPeriodIndex]);
            updateMyStatusPeriodNav(currentMyStatusPeriodIndex);
        });
    });

    document.getElementById('prevMyStatusPeriod').addEventListener('click', function() {
        currentMyStatusPeriodIndex = (currentMyStatusPeriodIndex - 1 + myStatusPeriods.length) % myStatusPeriods.length;
        updateMyTicketStatusChart(myStatusPeriods[currentMyStatusPeriodIndex]);
        updateMyStatusPeriodNav(currentMyStatusPeriodIndex);
    });

    document.getElementById('nextMyStatusPeriod').addEventListener('click', function() {
        currentMyStatusPeriodIndex = (currentMyStatusPeriodIndex + 1) % myStatusPeriods.length;
        updateMyTicketStatusChart(myStatusPeriods[currentMyStatusPeriodIndex]);
        updateMyStatusPeriodNav(currentMyStatusPeriodIndex);
    });

    window.addEventListener('resize', function() { chartStatus.resize(); });

    // Init
    updateMyTicketStatusChart(myStatusPeriods[currentMyStatusPeriodIndex]);
    updateMyStatusPeriodNav(currentMyStatusPeriodIndex);

    window.addEventListener('resize', function() {
        chartStatus.resize();
    });

    // init AJAX pagination
    initGuestHistoryPagination();
});
</script>
@endpush