{{-- 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;">Dashboard Ticketing System</h6>
                        <p class="text-sm mb-0" style="color: rgba(255,255,255,0.75);">
                            <i class="ni ni-calendar-grid-58 me-1"></i> Monitoring 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">Total Tickets</p>
                            <h5 class="font-weight-bolder mt-1">{{ $ticketing_kpi['total_tickets'] ?? 0 }}</h5>
                            <p class="mb-0 text-xs text-muted">3 bulan terakhir</p>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-primary shadow-primary 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 Approval</p>
                            <h5 class="font-weight-bolder mt-1">{{ $ticketing_kpi['pending_approval'] ?? 0 }}</h5>
                            <p class="mb-0 text-xs text-muted">Menunggu approve</p>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-warning shadow-warning 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">In Progress</p>
                            <h5 class="font-weight-bolder mt-1">{{ $ticketing_kpi['in_progress'] ?? 0 }}</h5>
                            <p class="mb-0 text-xs text-muted">Sedang diproses</p>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-info shadow-info 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">Completed</p>
                            <h5 class="font-weight-bolder mt-1">{{ $ticketing_kpi['completed'] ?? 0 }}</h5>
                            <p class="mb-0 text-xs text-muted">Selesai</p>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                            <i class="ni ni-check-bold text-lg opacity-10"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Ticket Trend Full Width --}}
<div class="row mt-4">
    <div class="col-12">
        <div class="card z-index-2">
            <div class="card-header pb-0 pt-3 bg-transparent">
                <h6 class="text-capitalize mb-0">Ticket Trend</h6>
                <p class="text-sm mb-0 text-muted">Trend ticket 3 bulan</p>
            </div>
            <div class="card-body p-3">
                <div id="chart-ticket-trend" style="height: 280px;"></div>
            </div>
        </div>
    </div>
</div>

{{-- Upcoming Tickets + Ticket Source Distribution Row --}}
<div class="row mt-4">
    {{-- Upcoming Tickets (kiri) --}}
    <div class="col-lg-4">
        <div class="card z-index-2 h-100">
            <div class="card-header pb-0 pt-3 bg-transparent">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0">Upcoming Tickets</h6>
                        <p class="text-sm mb-0 text-muted">Prioritas berdasarkan Estimasi Selesai</p>
                    </div>
                    <span class="badge bg-primary">Deadline Priority</span>
                </div>
            </div>
            <div class="card-body px-0 pt-0 pb-2" style="max-height: 370px; overflow-y: auto;">
                <div class="table-responsive p-0">
                    <table class="table align-items-center mb-0 table-hover">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3">Ticket ID</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Assigned To</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Estimasi Selesai</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($admin_upcoming_tickets ?? [] as $ticket)
                            <tr class="{{ $ticket->color_class ?? 'table-success' }}">
                                <td class="ps-3">
                                    @php
                                        $isTransfer = strtoupper(trim((string)($ticket->status_it ?? ''))) === 'T';
                                        $ticketUrl  = $isTransfer
                                            ? url('/tftick/show?idencrypt=' . encrypt($ticket->id))
                                            : url('/trtick/show?idencrypt=' . encrypt($ticket->id));
                                    @endphp
                                    <a href="{{ $ticketUrl }}"
                                       class="text-primary fw-bold text-xs text-decoration-none" style="font-family: monospace;">
                                        {{ $ticket->id }}
                                    </a>
                                    @if($isTransfer)
                                        <span class="badge bg-warning text-dark ms-1"
                                              style="font-size: 9px; font-weight: 600; letter-spacing: 0.3px;">
                                            <i class="fas fa-share-alt me-1"></i> Transfer Pending
                                        </span>
                                    @endif
                                    <br>
                                    <small class="text-muted" style="font-size: 10px;">
                                        {{ $ticket->reported_by_name ?? '-' }}
                                    </small>
                                </td>
                                <td class="text-xs">
                                    <strong>{{ $ticket->it_name ?? '-' }}</strong>
                                    <br>
                                    <small class="text-muted">{{ $ticket->kategori_name ?? '-' }}</small>
                                </td>
                                <td class="text-xs font-weight-bold">
                                    {{ $ticket->estimasi_display }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="text-center py-5 text-muted">
                                    <i class="ni ni-check-bold d-block mb-2" style="font-size: 32px; opacity: 0.4;"></i>
                                    Tidak ada ticket deadline mendekati
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Ticket Source Distribution (kanan) --}}
    <div class="col-lg-8">
        <div class="card z-index-2 h-100">
            <div class="card-header pb-0 pt-3 bg-transparent">
                <h6 class="text-capitalize mb-0">Ticket Source Distribution</h6>
                <p class="text-sm mb-0 text-muted">Perbandingan sumber ticket</p>
            </div>
            <div class="card-body p-3 pb-2">
                <div id="chart-ticket-source" style="height: 260px;"></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="prevPeriod" 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' => ($ticket_source_period_labels['all'] ?? 'All'), 'bulan_ini' => ($ticket_source_period_labels['bulan_ini'] ?? 'Bulan Ini'), 'bulan_lalu' => ($ticket_source_period_labels['bulan_lalu'] ?? 'Bulan Lalu'), 'bulan_2lalu' => ($ticket_source_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="sourceperiod-step" data-index="{{ $pi }}" data-period="{{ $pk }}">
                            {{-- connector line (kecuali item terakhir) --}}
                            @if($pi < 3)
                            <div class="sourceperiod-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="sourceperiod-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="sourceperiod-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="nextPeriod" 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>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card z-index-2">
            <div class="card-header pb-0 pt-3 bg-transparent">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-capitalize mb-0">
                            <i class="ni ni-laptop me-2" style="color: #5e72e4;"></i>Software Kategori
                        </h6>
                        <p class="text-sm mb-0 text-muted">Distribusi ticket berdasarkan kategori software 3 bulan terakhir</p>
                    </div>
                    <span class="badge bg-gradient-primary px-3 py-2" style="font-size: 11px;">
                        Total: {{ collect($software_categories ?? [])->sum('total') }} ticket
                    </span>
                </div>
            </div>
            <div class="card-body p-3">
                <div id="chart-software-kategori" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card z-index-2">
            <div class="card-header pb-0 pt-3 bg-transparent">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-capitalize mb-0">
                            <i class="ni ni-settings-gear-65 me-2" style="color: #f5365c;"></i>Hardware Kategori
                        </h6>
                        <p class="text-sm mb-0 text-muted">Distribusi ticket berdasarkan jenis hardware 3 bulan terakhir</p>
                    </div>
                    <span class="badge bg-gradient-danger px-3 py-2" style="font-size: 11px;">
                        Total: {{ collect($hardware_types ?? [])->sum('total') }} ticket
                    </span>
                </div>
            </div>
            <div class="card-body p-3">
                <div id="chart-hardware-kategori" style="height: 350px;"></div>
            </div>
        </div>
    </div>
</div>

{{-- Recent Tickets 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">
                        <i class="ni ni-bullet-list-67 me-2"></i>Recent Tickets
                    </h6>
                    <a href="{{ URL::to('/trtick') }}" class="btn btn-sm btn-primary">
                        <i class="ni ni-bold-right me-1"></i>View All
                    </a>
                </div>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div id="recent-tickets-section">
                    <div class="table-responsive p-0" style="max-height: 600px; overflow-y: auto;">
                    <table class="table align-items-center mb-0" id="tableRecentTickets">
                        <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: 100px;">Ticket ID</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 90px;">Date</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" style="width: 150px;">Detail</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 150px;">Reported By</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 120px;">PIC (IT)</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 200px;">Problem</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center" style="width: 100px;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recent_tickets as $ticket)
                            @php
                                $isSoftware = ($ticket->jenis === 'S');
                                $picName = $isSoftware 
                                    ? ($ticket->software_it_name ?? '-') 
                                    : ($ticket->hardware_it_name ?? '-');
                            @endphp
                            <tr>
                                <td class="text-xs ps-2">
                                    <span class="badge bg-light text-dark" style="font-size: 10px; font-family: monospace;">
                                        {{ $ticket->id }}
                                    </span>
                                </td>
                                <td class="text-xs">
                                    {{ \Carbon\Carbon::parse($ticket->ticket_date)->format('d M Y') }}
                                </td>
                                <td class="text-xs">
                                    <span class="badge badge-sm bg-gradient-{{ $isSoftware ? 'info' : 'primary' }}">
                                        {{ $isSoftware ? 'Software' : 'Hardware' }}
                                    </span>
                                </td>
                                <td class="text-xs">
                                    <div style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $ticket->code ?? $ticket->detkat_name ?? '-' }}">
                                        {{ $ticket->code ?? $ticket->detkat_name ?? '-' }}
                                    </div>
                                </td>
                                <td class="text-xs">
                                    <div class="d-flex flex-column">
                                        <span class="font-weight-bold" style="font-size: 11px;">{{ $ticket->reported_by_name ?? '-' }}</span>
                                        <span class="text-secondary" style="font-size: 10px;">{{ $ticket->reported_by_dept ?? '-' }}</span>
                                    </div>
                                </td>
                                <td class="text-xs">
                                    <div style="max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $picName }}">
                                        {{ $picName }}
                                    </div>
                                </td>
                                <td class="text-xs">
                                    <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $ticket->problem ?? '-' }}">
                                        {{ $ticket->problem ?? '-' }}
                                    </div>
                                </td>
                                <td class="text-center">
                                    @php
                                        $statusClass = match($ticket->status) {
                                            'D' => 'bg-warning',
                                            'E' => 'bg-secondary',
                                            'W' => 'bg-success',
                                            'A' => 'bg-approve',
                                            'P' => 'bg-info',
                                            'C' => 'bg-gradient-success',
                                            'R' => 'bg-danger',
                                            'T' => '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="8" 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 data ticket 3 bulan terakhir
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-end px-3 py-3 border-top">
                    {{ $recent_tickets->withQueryString()->onEachSide(1)->links('pagination::numeric') }}
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Daily Activity Report 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">
                        <i class="ni ni-calendar-grid-58 me-2"></i>Daily Activity Report
                    </h6>
                    {{-- <a href="{{ URL::to('/dailya') }}" class="btn btn-sm btn-primary">
                        <i class="ni ni-bold-right me-1"></i>View All
                    </a> --}}
                </div>
            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div id="daily-activity-section">
                    <div class="table-responsive p-0" style="max-height: 600px; overflow-y: auto;">
                    <table class="table align-items-center mb-0" id="tableDailyActivity">
                        <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: 60px;">ID</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 120px;">IT Name</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 200px;">Keterangan</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 200px;">Pengerjaan</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 130px;">Start</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 130px;">Finish</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center" style="width: 70px;">Poin</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 100px;">Ticket ID</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($daily_activity as $activity)
                            <tr>
                                <td class="text-xs ps-2">
                                    <span class="badge bg-light text-dark" style="font-size: 10px;">
                                        {{ $activity->id }}
                                    </span>
                                </td>
                                <td class="text-xs">
                                    <div style="max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $activity->it_fullname ?? $activity->it_name }}">
                                        {{ $activity->it_fullname ?? $activity->it_name }}
                                    </div>
                                </td>
                                <td class="text-xs">
                                    <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $activity->ket ?? '-' }}">
                                        {{ $activity->ket ?? '-' }}
                                    </div>
                                </td>
                                <td class="text-xs">
                                    <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $activity->pengerjaan ?? '-' }}">
                                        {{ $activity->pengerjaan ?? '-' }}
                                    </div>
                                </td>
                                <td class="text-xs">
                                    {{ $activity->start ? \Carbon\Carbon::parse($activity->start)->format('d M Y H:i') : '-' }}
                                </td>
                                <td class="text-xs">
                                    {{ $activity->finish ? \Carbon\Carbon::parse($activity->finish)->format('d M Y H:i') : '-' }}
                                </td>
                                <td class="text-xs text-center">
                                    <span class="badge bg-gradient-success" style="font-size: 11px;">
                                        {{ $activity->poin ?? 0 }}
                                    </span>
                                </td>
                                <td class="text-xs">
                                    @if($activity->ticket_id)
                                        <span class="badge bg-primary" style="font-size: 10px; font-family: monospace;">
                                            {{ $activity->ticket_id }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" 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 daily activity 3 bulan terakhir
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                    <div class="px-3 py-3">
                        {{ $daily_activity->withQueryString()->links('pagination::numeric') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .bg-approve {
        background-color: #1100ffff !important;
        color: #fff !important;
    }
</style>

@push('js')
<script src="{{ asset('/') }}assets/js/vendor/echarts.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Chart: Ticket Source Distribution with Period Navigation
    var ticketSourceDatasets = {
        'all': @json($ticket_source_all ?? []),
        'bulan_ini': @json($ticket_source_bulan_ini ?? []),
        'bulan_lalu': @json($ticket_source_bulan_lalu ?? []),
        'bulan_lalu_lalu': @json($ticket_source_2bulan_lalu ?? [])
    };
    
    var periods = ['all', 'bulan_ini', 'bulan_lalu', 'bulan_lalu_lalu'];
    var periodLabelsRaw = @json($ticket_source_period_labels ?? null);
    var periodLabels = {
        'all': (periodLabelsRaw && periodLabelsRaw.all) || 'All',
        'bulan_ini': (periodLabelsRaw && periodLabelsRaw.bulan_ini) || 'Bulan Ini',
        'bulan_lalu': (periodLabelsRaw && periodLabelsRaw.bulan_lalu) || 'Bulan Lalu',
        'bulan_lalu_lalu': (periodLabelsRaw && periodLabelsRaw.bulan_2lalu) || '2 Bulan Lalu'
    };
    
    var currentPeriodIndex = 0; // Default to 'all'
    
    var chartSourceDom = document.getElementById('chart-ticket-source');
    var chartSource = echarts.init(chartSourceDom);
    
    function updateTicketSourceChart(periodKey) {
        var ticketSourceData = ticketSourceDatasets[periodKey];
        
        if (ticketSourceData.length > 0) {
            var sourceOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                legend: {
                    bottom: '0%',
                    left: 'center'
                },
                series: [{
                    name: 'Ticket Source',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {c}'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    },
                    data: ticketSourceData.map(function(item) {
                        return {
                            value: item.total,
                            name: item.ticket_source || 'Unknown'
                        };
                    })
                }]
            };
            
            chartSource.setOption(sourceOption, true); // true = notMerge
        } else {
            // No data, show empty state
            chartSource.setOption({
                title: {
                    text: 'No data available',
                    left: 'center',
                    top: 'middle',
                    textStyle: {
                        color: '#adb5bd',
                        fontSize: 14
                    }
                }
            }, true);
        }
    }
    
    // Initialize chart with default period (all)
    function updatePeriodNav(idx) {
        document.querySelectorAll('.sourceperiod-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('.sourceperiod-line').forEach(function(line) {
            line.style.background = parseInt(line.dataset.index) < idx ? '#5e72e4' : '#dee2e6';
        });

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

        var label = document.getElementById('currentPeriodLabel');
        if (label) label.textContent = periodLabels[periods[idx]];
    }

    // Dot click via step wrapper
    document.querySelectorAll('.sourceperiod-step').forEach(function(step) {
        step.addEventListener('click', function() {
            currentPeriodIndex = parseInt(this.dataset.index);
            updateTicketSourceChart(periods[currentPeriodIndex]);
            updatePeriodNav(currentPeriodIndex);
        });
    });

    updateTicketSourceChart(periods[currentPeriodIndex]);
    updatePeriodNav(currentPeriodIndex);

    // Set dot title attributes dynamically
    document.querySelectorAll('.sourceperiod-dot').forEach(function(dot) {
        var period = dot.getAttribute('data-period');
        dot.setAttribute('title', periodLabels[period] || period);
    });

    // Dot click
    document.querySelectorAll('.sourceperiod-dot').forEach(function(dot) {
        dot.addEventListener('click', function() {
            currentPeriodIndex = parseInt(this.getAttribute('data-index'));
            updateTicketSourceChart(periods[currentPeriodIndex]);
            updatePeriodNav(currentPeriodIndex);
        });
    });

    // Previous period button
    document.getElementById('prevPeriod').addEventListener('click', function() {
        currentPeriodIndex = (currentPeriodIndex - 1 + periods.length) % periods.length;
        updateTicketSourceChart(periods[currentPeriodIndex]);
        updatePeriodNav(currentPeriodIndex);
    });

    // Next period button
    document.getElementById('nextPeriod').addEventListener('click', function() {
        currentPeriodIndex = (currentPeriodIndex + 1) % periods.length;
        updateTicketSourceChart(periods[currentPeriodIndex]);
        updatePeriodNav(currentPeriodIndex);
    });

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

    var softwareColors = [
        '#5e72e4', '#2dce89', '#11cdef', '#f5365c', '#fb6340',
        '#ffd600', '#8965e0', '#f3a4b5', '#2bffc6', '#1171ef',
        '#344767', '#e14eca', '#ff8d72', '#00f2c3', '#1d8cf8'
    ];

    var hardwareColors = [
        '#f5365c', '#fb6340', '#ffd600', '#2dce89', '#11cdef',
        '#5e72e4', '#8965e0', '#f3a4b5', '#344767', '#e14eca',
        '#2bffc6', '#1171ef', '#ff8d72', '#00f2c3', '#1d8cf8'
    ];
    
    // Chart: Ticket Trend
    var ticketTrendData = @json($ticket_trend ?? []);
    
    if (ticketTrendData.length > 0) {
        var chartTrendDom = document.getElementById('chart-ticket-trend');
        var chartTrend = echarts.init(chartTrendDom);
        
        var dates = ticketTrendData.map(function(item) { return item.date; });
        var totals = ticketTrendData.map(function(item) { return item.total; });
        
        var trendOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'cross' }
            },
            grid: {
                left: '3%',
                right: '5%',
                bottom: '5%',
                top: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: dates,
                axisLabel: {
                    color: '#8898aa',
                    fontSize: 11,
                    formatter: function(value) {
                        return new Date(value).getDate();
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: 'Total Tickets',
                nameTextStyle: { color: '#8898aa', fontSize: 10 },
                axisLabel: { color: '#8898aa', fontSize: 11 },
                minInterval: 1
            },
            series: [{
                name: 'Tickets',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: { color: '#5e72e4' },
                lineStyle: { width: 3 },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(94,114,228,0.3)' },
                            { offset: 1, color: 'rgba(94,114,228,0.05)' }
                        ]
                    }
                },
                data: totals
            }]
        };
        
        chartTrend.setOption(trendOption);
        window.addEventListener('resize', function() {
            chartTrend.resize();
        });
    }

    var softwareData = @json($software_categories ?? []);
    var swChartDom = document.getElementById('chart-software-kategori');

    if (swChartDom) {
        var swChart = echarts.init(swChartDom);

        if (softwareData.length > 0) {
            var swNames = softwareData.map(function(item) { return item.label || item.detkat_name || item.kategori || 'Unknown'; });
            var swValues = softwareData.map(function(item) { return item.total; });

            // Buat data dengan warna berbeda per bar
            var swBarData = swValues.map(function(val, idx) {
                return {
                    value: val,
                    name: swNames[idx],
                    itemStyle: {
                        color: softwareColors[idx % softwareColors.length],
                        borderRadius: [5, 5, 0, 0]
                    }
                };
            });

           swChart.setOption({
            legend: {
                top: '0%',
                left: 'center',
                type: 'scroll',
                itemWidth: 12,
                itemHeight: 12,
                textStyle: { fontSize: 11, color: '#344767' }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' },
                formatter: function(params) {
                    var p = params[0];
                    return '<strong>' + p.seriesName + '</strong><br/>Jumlah: ' + p.value + ' ticket';
                }
            },
            grid: { left: '3%', right: '5%', bottom: '5%', top: '20%', containLabel: true },
            xAxis: {
                type: 'category',
                data: swNames,
                axisLabel: { show: false } // nama sudah ada di legend, xAxis label disembunyikan
            },
            yAxis: {
                type: 'value',
                name: 'Jumlah Ticket',
                nameTextStyle: { color: '#8898aa', fontSize: 10 },
                axisLabel: { color: '#8898aa', fontSize: 11 },
                minInterval: 1
            },
            series: swNames.map(function(name, idx) {
                return {
                    name: name,
                    type: 'bar',
                    barMaxWidth: 50,
                    data: swNames.map(function(_, i) { return i === idx ? swValues[idx] : null; }),
                    itemStyle: {
                        color: softwareColors[idx % softwareColors.length],
                        borderRadius: [5, 5, 0, 0]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '#344767',
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                };
            })
        });

            window.addEventListener('resize', function() { swChart.resize(); });
        } else {
            swChartDom.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#adb5bd;font-size:14px;"><div style="text-align:center;"><i class="ni ni-box-2" style="font-size:36px;opacity:0.3;display:block;margin-bottom:10px;"></i>Belum ada data software kategori 3 bulan terakhir</div></div>';
        }
    }

    var hardwareData = @json($hardware_types ?? []);
    var hwChartDom = document.getElementById('chart-hardware-kategori');

    if (hwChartDom) {
        var hwChart = echarts.init(hwChartDom);

        if (hardwareData.length > 0) {
            var hwNames = hardwareData.map(function(item) { return item.label || item.detkat_name || item.jenis_hardware || 'Unknown'; });
            var hwValues = hardwareData.map(function(item) { return item.total; });

            // Buat data dengan warna berbeda per bar
            var hwBarData = hwValues.map(function(val, idx) {
                return {
                    value: val,
                    itemStyle: {
                        color: hardwareColors[idx % hardwareColors.length],
                        borderRadius: [5, 5, 0, 0]
                    }
                };
            });

            hwChart.setOption({
                legend: {
                    top: '0%',
                    left: 'center',
                    type: 'scroll',
                    itemWidth: 12,
                    itemHeight: 12,
                    textStyle: { fontSize: 11, color: '#344767' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' },
                    formatter: function(params) {
                        var p = params[0];
                        return '<strong>' + p.seriesName + '</strong><br/>Jumlah: ' + p.value + ' ticket';
                    }
                },
                grid: { left: '3%', right: '5%', bottom: '5%', top: '20%', containLabel: true },
                xAxis: {
                    type: 'category',
                    data: hwNames,
                    axisLabel: { show: false }
                },
                yAxis: {
                    type: 'value',
                    name: 'Jumlah Ticket',
                    nameTextStyle: { color: '#8898aa', fontSize: 10 },
                    axisLabel: { color: '#8898aa', fontSize: 11 },
                    minInterval: 1
                },
                series: hwNames.map(function(name, idx) {
                    return {
                        name: name,
                        type: 'bar',
                        barMaxWidth: 50,
                        data: hwNames.map(function(_, i) { return i === idx ? hwValues[idx] : null; }),
                        itemStyle: {
                            color: hardwareColors[idx % hardwareColors.length],
                            borderRadius: [5, 5, 0, 0]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#344767',
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    };
                })
            });

            window.addEventListener('resize', function() { hwChart.resize(); });
        } else {
            hwChartDom.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#adb5bd;font-size:14px;"><div style="text-align:center;"><i class="ni ni-box-2" style="font-size:36px;opacity:0.3;display:block;margin-bottom:10px;"></i>Belum ada data hardware kategori 3 bulan terakhir</div></div>';
        }

        function initDashboardPagination(sectionId) {
            var section = document.getElementById(sectionId);
            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();
                loadDashboardSection(href, sectionId);
            });
        }

        function loadDashboardSection(url, sectionId) {
            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(sectionId);
                var currentSection = document.getElementById(sectionId);

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

        initDashboardPagination('recent-tickets-section');
        initDashboardPagination('daily-activity-section');
    }
});
</script>
@endpush