@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')	
    @include('layouts.navbars.auth.topnav', ['title' => ''])
	<link rel="stylesheet" href="{{ asset('assets/css/daterangepicker.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
	<style>
		.hover-card {
			transition: all 0.2s ease-in-out;
		}
		.hover-card:hover {
			transform: translateY(-4px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
		}
		.card-preview .fa-arrow-right, .card_bill .fa-arrow-right{
			transition: transform 0.2s ease;
		}
		.card-preview:hover .fa-arrow-right, .card_bill:hover .fa-arrow-right {
			transform: translateX(4px);
		}

		/* === SKELETON SHIMMER STYLE === */
		.skeleton {
		  position: relative;
		  overflow: hidden;
		  background: #e2e2e2;
		  border-radius: 6px;
		}
		.skeleton::after {
		  content: "";
		  position: absolute;
		  top: 0;
		  left: -150px;
		  height: 100%;
		  width: 150px;
		  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
		  animation: shimmer 1.3s infinite;
		}
		@keyframes shimmer {
		  100% {
			transform: translateX(100%);
		  }
		}
		.chart-skeleton {
		  height: 280px;
		  width: 100%;
		  margin-bottom: 1rem;
		}
		.table-skeleton td {
		  padding: 12px;
		}
		.table-skeleton .skeleton {
		  height: 18px;
		  width: 100%;
		}
	</style>

    {{-- JUDUL DASHBOARD --}}
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Dashboard</h6>

                        {{-- MODIFIKASI DINAMIS PERIODE TAGIHAN --}}
                        <p class="text-sm">{{ $periode_tagihan->desc_date ?? 'Tidak ada Periode Tagihan Aktif' }} <span class="badge badge-success">Aktif</span></p>
                    </div>
                </div>
            </div>
        </div>

        @php
            $isFinance = in_array('financ', $user_rules) || in_array('kasirs', $user_rules);
            $isAdminHrd = in_array('admhrd', $user_rules) || in_array('admins', $user_rules);
			$isSupervisor = in_array('superv', $user_rules);
            $colClass = ($isFinance || $isAdminHrd) ? 'col-xl-4 col-md-6 mb-4' : 'col-xl-3 col-md-6 mb-4';
        @endphp
        
        <div class="row">
            <!-- 1. APPROVED BILLS -->
			 @php 
                $linkTargetApproved = $isFinance ? url('/rpttfr') : url('/rptbil'); 
				$linkTargetAdminHrd = url('/trsbil');
				$linkTargetRejected = url('/rptbil');
				$linkTargetPending = url('/trsapp');
				$approveType = $isSupervisor ? 'approvedspv' : 'approvedheadhrd';
            @endphp
            <div class="{{ $colClass }}">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body p-3 d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <p class="text-sm text-muted mb-1">Total Tagihan Disetujui</p>
                                <h4 class="fw-bold text-success mb-0">
                                    {{ ($phone_bill->total_approve_user ?? 0) + ($phone_bill->total_approve_operasional ?? 0) }}
                                </h4>
                            </div>
                            <div class="icon d-flex align-items-center justify-content-center bg-success text-white rounded-circle shadow-sm" style="width: 45px; height: 45px;">
                                <i class="ni ni-check-bold fs-5"></i>
                            </div>
                        </div>
                        <hr class="horizontal dark my-2">
                        <div class="row g-2 mt-auto">
                            <div class="col-6">
								@if($isAdminHrd)
									<a href="{{ $linkTargetAdminHrd }}?autoLoad=true&filter=approved&tab=user" class="text-decoration-none text-dark d-block h-100">
								@else
									<a href="{{ $linkTargetApproved }}?filter={{ $approveType }}&role=user" class="text-decoration-none text-dark d-block h-100">
								@endif
									<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
										<p class="text-xs text-muted mb-0">User</p>
										<h5 class="fw-bold text-success mb-0">{{ $phone_bill->total_approve_user ?? 0 }}</h5>
										<div class="text-success fw-semibold mt-1" style="font-size: 0.75rem;">
											Lihat <i class="fas fa-arrow-right ms-1"></i>
										</div>
									</div>
								</a>
                            </div>
                            <div class="col-6">
								@if($isAdminHrd)
									<a href="{{ $linkTargetAdminHrd }}?autoLoad=true&filter=approved&tab=operasional" class="text-decoration-none text-dark d-block h-100">
								@else
									<a href="{{ $linkTargetApproved }}?filter={{ $approveType }}&role=operasional" class="text-decoration-none text-dark d-block h-100">
								@endif
									<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
										<p class="text-xs text-muted mb-0">Operasional</p>
										<h5 class="fw-bold text-success mb-0">{{ $phone_bill->total_approve_operasional ?? 0 }}</h5>
										<div class="text-success fw-semibold mt-1" style="font-size: 0.75rem;">
											Lihat <i class="fas fa-arrow-right ms-1"></i>
										</div>
									</div>
								</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2. REJECTED ATAU DITRANSFER -->
            <div class="{{ $colClass }}">
                @if(!$isFinance)
                    {{-- REJECTED BILLS --}}
                    <div class="card shadow-sm border-0 h-100">
                        <div class="card-body p-3 d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <p class="text-sm text-muted mb-1">Total Tagihan Ditolak</p>
                                    <h4 class="fw-bold text-danger mb-0">
                                        {{ ($phone_bill->total_rejected_user ?? 0) + ($phone_bill->total_rejected_operasional ?? 0) }}
                                    </h4>
                                </div>
                                <div class="icon d-flex align-items-center justify-content-center bg-danger text-white rounded-circle shadow-sm" style="width: 45px; height: 45px;">
                                    <i class="ni ni-fat-remove fs-5"></i>
                                </div>
                            </div>
                            <hr class="horizontal dark my-2">
                            <div class="row g-2 mt-auto">
                                <div class="col-6">
									@if($isAdminHrd)
										<a href="{{ $linkTargetAdminHrd }}?autoLoad=true&filter=rejected&tab=user" class="text-decoration-none text-dark d-block h-100">
									@else
										<a href="{{ $linkTargetRejected }}?filter=rejected&role=user" class="text-decoration-none text-dark d-block h-100">
									@endif
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">User</p>
											<h5 class="fw-bold text-danger mb-0">{{ $phone_bill->total_rejected_user ?? 0 }}</h5>
											<div class="text-danger fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
                                </div>
                                <div class="col-6">
									@if($isAdminHrd)
										<a href="{{ $linkTargetAdminHrd }}?autoLoad=true&filter=rejected&tab=operasional" class="text-decoration-none text-dark d-block h-100">
									@else
										<a href="{{ $linkTargetRejected }}?filter=rejected&role=operasional" class="text-decoration-none text-dark d-block h-100">
									@endif
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">Operasional</p>
											<h5 class="fw-bold text-danger mb-0">{{ $phone_bill->total_rejected_operasional ?? 0 }}</h5>
											<div class="text-danger fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    {{-- DATA TAGIHAN TELAH DITRANSFER (FINANCE) --}}
                    @php $linkTargetFinance = url('/rpttfr'); @endphp
                        <div class="card shadow-sm border-0 hover-card h-100">
                            <div class="card-body p-3 d-flex flex-column">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <p class="text-sm text-muted mb-1">Tagihan Ditransfer</p>
                                        <h4 class="fw-bold text-success mb-0">{{ $phone_bill->total_transfer_operasional + $phone_bill->total_transfer_user ?? 0 }}</h4>
                                    </div>
                                    <div class="icon d-flex align-items-center justify-content-center bg-success text-white rounded-circle shadow-sm" style="width: 45px; height: 45px;">
                                        <i class="ni ni-money-coins fs-5"></i>
                                    </div>
                                </div>
                                <hr class="horizontal dark my-2">
                                <div class="row g-2 mt-auto">
									<div class="col-6">
										<a href="{{ $linkTargetFinance }}?filter=transferred&role=user" class="text-decoration-none text-dark d-block h-100">
											<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
												<p class="text-xs text-muted mb-0">User</p>
												<h5 class="fw-bold text-success mb-0">{{ $phone_bill->total_transfer_user ?? 0 }}</h5>
												<div class="text-success fw-semibold mt-1" style="font-size: 0.75rem;">
													Lihat <i class="fas fa-arrow-right ms-1"></i>
												</div>
											</div>
										</a>
									</div>
									<div class="col-6">
										<a href="{{ $linkTargetFinance }}?filter=transferred&role=operasional" class="text-decoration-none text-dark d-block h-100">
											<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
												<p class="text-xs text-muted mb-0">Operasional</p>
												<h5 class="fw-bold text-success mb-0">{{ $phone_bill->total_transfer_operasional ?? 0 }}</h5>
												<div class="text-success fw-semibold mt-1" style="font-size: 0.75rem;">
													Lihat <i class="fas fa-arrow-right ms-1"></i>
												</div>
											</div>
										</a>
									</div>
								</div>
                        	</div>
                    	</div>
                @endif
            </div>

            <!-- 3. PENDING BILLS -->
            @if(!$isFinance)
            <div class="{{ $colClass }}">
                {{-- PENDING BILLS --}}
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body p-3 d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <p class="text-sm text-muted mb-1">Total Tagihan Pending</p>
                                <h4 class="fw-bold text-warning mb-0">
                                    {{ ($phone_bill->total_pending_user ?? 0) + ($phone_bill->total_pending_operasional ?? 0) }}
                                </h4>
                            </div>
                            <div class="icon d-flex align-items-center justify-content-center bg-warning text-white rounded-circle shadow-sm" style="width: 45px; height: 45px;">
                                <i class="ni ni-time-alarm fs-5"></i>
                            </div>
                        </div>
                        <hr class="horizontal dark my-2">
                        <div class="row g-2 mt-auto">
                            <div class="col-6">
								<a @if(!$isAdminHrd) href="{{ $linkTargetPending }}?autoLoad=true&tab=user" @endif class="text-decoration-none text-dark d-block h-100" @if($isAdminHrd) style="cursor: default; pointer-events: none;" @endif>
									<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
										<p class="text-xs text-muted mb-0">User</p>
										<h5 class="fw-bold text-warning mb-0">{{ $phone_bill->total_pending_user ?? 0 }}</h5>
										<div class="text-warning fw-semibold mt-1" style="font-size: 0.75rem;">
											Lihat <i class="fas fa-arrow-right ms-1"></i>
										</div>
									</div>
								</a>
                            </div>
                            <div class="col-6">
								<a @if(!$isAdminHrd) href="{{ $linkTargetPending }}?autoLoad=true&tab=operasional" @endif class="text-decoration-none text-dark d-block h-100" @if($isAdminHrd) style="cursor: default; pointer-events: none;" @endif>
									<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
										<p class="text-xs text-muted mb-0">Operasional</p>
										<h5 class="fw-bold text-warning mb-0">{{ $phone_bill->total_pending_operasional ?? 0 }}</h5>
										<div class="text-warning fw-semibold mt-1" style="font-size: 0.75rem;">
											Lihat <i class="fas fa-arrow-right ms-1"></i>
										</div>
									</div>
								</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- 4. TOTAL BILLS AMOUNT -->
            @if(!$isAdminHrd)
            <div class="{{ $colClass }}">
                @php $linkTarget = url('/rpttfr'); @endphp
                    <div class="card shadow-sm border-0 hover-card h-100 cursor-pointer">
                        <div class="card-body p-3 d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <p class="text-sm text-muted mb-1">Total Tagihan</p>
                                    <h4 class="fw-bold text-primary mb-0">
                                        Rp {{ number_format($phone_bill->total_tagihan_user + $phone_bill->total_tagihan_operasional ?? 0, 0, ',', '.') }}
                                    </h4>
                                </div>
                                <div class="icon d-flex align-items-center justify-content-center bg-primary text-white rounded-circle shadow-sm" style="width: 45px; height: 45px;">
                                    <i class="ni ni-collection fs-5"></i>
                                </div>
                            </div>
                            <hr class="horizontal dark my-2">
                            <div class="row g-2 mt-auto">
								<div class="col-6">
									<a href="{{ $linkTarget }}?&role=user" class="text-decoration-none text-dark d-block h-100">
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">User</p>
											<h5 class="fw-bold text-primary mb-0">Rp {{ number_format($phone_bill->total_tagihan_user ?? 0, 0, ',', '.') }}</h5>
											<div class="text-primary fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
								</div>
								<div class="col-6">
									<a href="{{ $linkTarget }}?&role=operasional" class="text-decoration-none text-dark d-block h-100">
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">Operasional</p>
											<h5 class="fw-bold text-primary mb-0">Rp {{ number_format($phone_bill->total_tagihan_operasional ?? 0, 0, ',', '.') }}</h5>
											<div class="text-primary fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
								</div>
							</div>
                        </div>
                    </div>
            </div>
            @endif
        </div>

        {{-- BARIS KEDUA (KHUSUS ADMIN HRD) --}}
        @if(in_array('admhrd', $user_rules) || in_array('admins', $user_rules))
        <div class="row mt-3">
            {{-- SUDAH DITRANSFER --}}
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4 cursor-pointer">
                    <div class="card shadow-sm border-0 hover-card h-100">
                        <div class="card-body p-3 d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <p class="text-sm text-muted mb-1">Sudah Ditransfer</p>
                                    <h4 class="fw-bold text-info mb-0">{{ $phone_bill->total_transfer_user + $phone_bill->total_transfer_operasional ?? 0 }}</h4>
                                </div>
                                <div class="icon d-flex align-items-center justify-content-center bg-info text-white rounded-circle shadow-sm" style="width: 45px; height: 45px;">
                                    <i class="fas fa-exchange-alt fs-5"></i>
                                </div>
                            </div>
                            <hr class="horizontal dark my-2">
                            <div class="row g-2 mt-auto">
								<div class="col-6">
									<a href="{{ url('/rpttfr') }}?filter=transferred&role=user" class="text-decoration-none text-dark d-block h-100">
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">User</p>
											<h5 class="fw-bold text-info mb-0">{{ $phone_bill->total_transfer_user ?? 0 }}</h5>
											<div class="text-info fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
								</div>
								<div class="col-6">
									<a href="{{ url('/rpttfr') }}?filter=transferred&role=operasional" class="text-decoration-none text-dark d-block h-100">
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">Operasional</p>
											<h5 class="fw-bold text-info mb-0">{{ $phone_bill->total_transfer_operasional ?? 0 }}</h5>
											<div class="text-info fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
								</div>
							</div>
                        </div>
                    </div>
            </div>

            {{-- BELUM DITRANSFER --}}
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4 cursor-pointer">
                    <div class="card shadow-sm border-0 hover-card h-100">
                        <div class="card-body p-3 d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <p class="text-sm text-muted mb-1">Belum Ditransfer</p>
                                    <h4 class="fw-bold text-secondary mb-0">{{ $phone_bill->total_belum_transfer_user + $phone_bill->total_belum_transfer_operasional ?? 0 }}</h4>
                                </div>
                                <div class="icon d-flex align-items-center justify-content-center bg-secondary text-white rounded-circle shadow-sm" style="width: 45px; height: 45px;">
                                    <i class="fas fa-exclamation-circle fs-5"></i>
                                </div>
                            </div>
                            <hr class="horizontal dark my-2">
                            <div class="row g-2 mt-auto">
								<div class="col-6">
									<a href="{{ url('/rpttfr') }}?filter=not_transferred&role=user" class="text-decoration-none text-dark d-block h-100">
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">User</p>
											<h5 class="fw-bold text-secondary mb-0">{{ $phone_bill->total_belum_transfer_user ?? 0 }}</h5>
											<div class="text-secondary fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
								</div>
								<div class="col-6">
									<a href="{{ url('/rpttfr') }}?filter=not_transferred&role=operasional" class="text-decoration-none text-dark d-block h-100">
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">Operasional</p>
											<h5 class="fw-bold text-secondary mb-0">{{ $phone_bill->total_belum_transfer_operasional ?? 0 }}</h5>
											<div class="text-secondary fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
								</div>
							</div>
                        </div>
                    </div>
                
            </div>

            {{-- TOTAL BILLS AMOUNT (BARIS BAWAH) --}}
            @php
                $linkTarget = url('/rpttfr');
            @endphp
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                    <div class="card shadow-sm border-0 hover-card h-100 cursor-pointer">
                        <div class="card-body p-3 d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <p class="text-sm text-muted mb-1">Total Tagihan</p>
                                    <h4 class="fw-bold text-primary mb-0">
                                        Rp {{ number_format($phone_bill->total_tagihan_user + $phone_bill->total_tagihan_operasional ?? 0, 0, ',', '.') }}
                                    </h4>
                                </div>
                                <div class="icon d-flex align-items-center justify-content-center bg-primary text-white rounded-circle shadow-sm" style="width: 45px; height: 45px;">
                                    <i class="ni ni-collection fs-5"></i>
                                </div>
                            </div>
                            <hr class="horizontal dark my-2">
                            <div class="row g-2 mt-auto">
								<div class="col-6">
									<a href="{{ $linkTarget }}?&role=user" class="text-decoration-none text-dark d-block h-100">
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">User</p>
											<h5 class="fw-bold text-primary mb-0">Rp {{ number_format($phone_bill->total_tagihan_user ?? 0, 0, ',', '.') }}</h5>
											<div class="text-primary fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
								</div>
								<div class="col-6">
									<a href="{{ $linkTarget }}?&role=operasional" class="text-decoration-none text-dark d-block h-100">
										<div class="border rounded p-2 text-center h-100 hover-card cursor-pointer bg-light">
											<p class="text-xs text-muted mb-0">Operasional</p>
											<h5 class="fw-bold text-primary mb-0">Rp {{ number_format($phone_bill->total_tagihan_operasional ?? 0, 0, ',', '.') }}</h5>
											<div class="text-primary fw-semibold mt-1" style="font-size: 0.75rem;">
												Lihat <i class="fas fa-arrow-right ms-1"></i>
											</div>
										</div>
									</a>
								</div>
							</div>
                        </div>
                    </div>
                
            </div>
        </div>
        @endif

        <style>
            .hover-card {
                transition: all 0.2s ease-in-out;
            }
            .hover-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
            }
        </style>

        {{-- SECOND CONTAINER --}}		
        <div class="row mt-4">

            {{-- CHART (LEFT) --}}
            <div class="col-lg-7 mb-lg-0 mb-4">
			  <div class="card z-index-2 h-100 shadow-sm border-0">
				
				<!-- Header -->
				<div class="card-header bg-transparent pb-2 pt-3 d-flex justify-content-between align-items-center flex-wrap">
				  <h6 class="text-capitalize mb-2 fw-bold">
					📈 Grafik Total Tagihan Bulanan
				  </h6>
				  
				  <div class="d-flex align-items-center gap-2 mt-2 mt-md-0">
					  <button id="downloadChart" class="btn btn-sm btn-outline-primary" disabled>
						⬇️ Download PNG
					  </button>
				  </div>

				  <div class="container-fluid px-0 mt-2">
				  <div class="row g-3 align-items-end">

					{{-- Bulan Awal --}}
					<div class="col-md-6 col-sm-12">
					  <label for="bulanAwal" class="form-label mb-1 fw-bold text-dark">Dari Bulan</label>
					  <div class="input-group input-group-sm">
						<span class="input-group-text bg-light">
						  <i class="fas fa-calendar-alt text-primary"></i>
						</span>
						<input type="text" id="bulanAwal" class="form-control border-start-0" placeholder="Pilih bulan awal" style="padding-left: 10px">
					  </div>
					</div>

					{{-- Bulan Akhir --}}
					<div class="col-md-6 col-sm-12">
					  <label for="bulanAkhir" class="form-label mb-1 fw-bold text-dark">Sampai Bulan</label>
					  <div class="input-group input-group-sm">
						<span class="input-group-text bg-light">
						  <i class="fas fa-calendar-alt text-primary"></i>
						</span>
						<input type="text" id="bulanAkhir" class="form-control border-start-0" placeholder="Pilih bulan akhir" style="padding-left: 10px">
					  </div>
					</div>

				  </div>
				</div>



				</div>

				<!-- Body -->
				<div class="card-body p-3">
				  <div class="chart position-relative">
					<canvas id="tagihanChart"></canvas>
				  </div>
				</div>

			  </div>
			</div>


            {{-- JUMLAH PEMAKAI TERBANYAK (RIGHT) --}}
            <div class="col-lg-5">
			  <div class="card overflow-hidden h-100 p-3">
				<h5 class="text-dark mb-3">📊 Pemakai Kartu Halo Terbanyak</h5>

				<form class="row g-2 mb-3">
				  <div class="col-12">
					<label class="form-label">Periode</label>
					<select id="periodeFilter" class="form-select form-select-sm">
					  <option value="all">Semua Periode</option>
					</select>
				  </div>
				  <div class="col-6">
					<label class="form-label">Kategori</label>
					<select id="categoryFilter" class="form-select form-select-sm">
					  <option value="all">Semua Kategori</option>
					  <option value="1" selected>User</option>
					  <option value="2">Operasional</option>
					</select>
				  </div>
				  <div class="col-6">
					<label class="form-label">Departemen</label>
					<select id="deptFilter" class="form-select form-select-sm">
					  <option value="all">Semua Departemen</option>
					</select>
				  </div>
				</form>

				<div class="table-responsive">
				  <table class="table table-sm align-middle">
					<thead class="table-light">
					  <tr>
						<th style="width: 40px;">#</th>
						<th>Nama Karyawan</th>
						<th class="text-end">Total Tagihan</th>
					  </tr>
					</thead>
					<tbody id="tagihanTable">
					  
					</tbody>
				  </table>
				</div>
			  </div>
			</div>
		</div>
			
        {{-- THIRD CONTAINER --}}
        <div class="row mt-4">
		  <div class="col-12">
			<div class="card shadow-sm border-0">
			  <!-- Header -->
			  <div class="card-header bg-transparent pb-2 pt-3 d-flex justify-content-between align-items-center flex-wrap">
				<h6 class="text-capitalize mb-2 fw-bold text-dark">
				  📊 Grafik Total Tagihan per Departemen
				</h6>

				<!-- Filter -->
				<form id="chart-filter" class="d-flex align-items-end w-100 gap-3">
  
				  <!-- Bagian Periode Tagihan -->
				  <div class="flex-grow-1">
					<label for="periodeSelect" class="form-label mb-1 fw-semibold text-dark">
					  Periode Tagihan
					</label>
					<select id="periodeSelect" class="form-select form-select-sm w-100">
						@if($periode_data->isEmpty())
							<option value="">Periode Belum Ada Data</option>
						@else
							@php
								$activePeriodeId = null;
								foreach($periode_data as $periode) {
									if($periode->isactive == '1') {
										$activePeriodeId = $periode->periode_id;
										break;
									}
								}
							@endphp
							@foreach($periode_data as $periode)
								<option value="{{ $periode->periode_id }}" @if($periode->isactive == '1') selected @endif>
									{{ $periode->desc_date }} @if($periode->isactive == '1') (Aktif) @endif
								</option>
							@endforeach
						@endif
					</select>
				  </div>

				  <!-- Bagian Jenis Chart -->
				  <div class="flex-grow-1">
					<label for="chartTypeSelect" class="form-label mb-1 fw-semibold text-dark">
					  Jenis Chart
					</label>
					<select id="chartTypeSelect" class="form-select form-select-sm w-100">
					  <option value="bar">Bar</option>
					  <option value="line">Line</option>
					  <option value="pie">Pie</option>
					  <option value="doughnut">Doughnut</option>
					</select>
				  </div>

				  <!-- Bagian Tombol Download (rata kanan) -->
				  <div class="ms-auto" style="position: relative; top: 15px;">
					<label class="form-label mb-1 fw-semibold text-dark d-block">
					  Download Gambar
					</label>
					<button type="button" id="downloadDeptChart" class="btn btn-sm btn-outline-primary" disabled>
					  📥 Download PNG
					</button>
				  </div>

				</form>

			  </div>
			  <!-- Body -->
			  <div class="card-body p-4">
				<div class="chart position-relative">
				  <!-- Loader -->
				  <div id="chart-loader" class="position-absolute top-50 start-50 translate-middle text-center" style="display:none;">
					<div class="spinner-border text-primary" role="status"></div>
					<div class="mt-2 small text-muted">Memuat data...</div>
				  </div>
				  
				  <!-- Chart -->
				  <canvas id="chart-departemen" height="400"></canvas>
				</div>
			  </div>
			</div>
		  </div>
		</div>
    </div>
@endsection

@if($newPeriode)
<script>
document.addEventListener('DOMContentLoaded', function() {
    const userRole = @json($users_rules ?? []);
    const isAuthorized = userRole.includes('superv') || userRole.includes('admhrd');

    Swal.fire({
        title: '📅 Periode Baru Telah Dibuat',
        html: `
            <p class="mt-2 mb-0">Periode tagihan baru telah dibuat otomatis:</p>
            <strong>{{ $newPeriode }}</strong>
        `,
        icon: 'info',
        showCancelButton: isAuthorized, // jika role sesuai, tampilkan tombol ke-2
        confirmButtonText: 'OK',
        cancelButtonText: 'Input Data Tagihan',
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#16a34a',
        reverseButtons: true, // biar posisi: [OK] [Input Data Tagihan]
        allowOutsideClick: false,
        allowEscapeKey: false,
    }).then((result) => {
        if (result.dismiss === Swal.DismissReason.cancel) {
            // Jika klik tombol "Input Data Tagihan"
            window.location.href = '/trsbil?autoLoad=true';
        }
    });
});
</script>
@endif



@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
	
	<!-- di sebelum </body> -->
	<script src="{{ asset('assets/js/moment.min.js') }}"></script>
	<script src="{{ asset('assets/js/daterangepicker.min.js') }}"></script>
	<script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
	<script src="{{ asset('assets/js/bootstrap-datepicker.id.min.js') }}"></script>

    <script>
		// SCRIPT CALENDAR PICKER
		$(function() {
		  // Default bulan awal = bulan ini, akhir = bulan depan
		  const now = new Date();
		  const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);

		  // Inisialisasi datepicker
		  $('#bulanAwal, #bulanAkhir').datepicker({
			format: "MM yyyy",
			startView: "months",
			minViewMode: "months",
			autoclose: true,
			clearBtn: true,
			language: "id",
			todayHighlight: true
		  });
		  const startDateStrInit = "{{ $periode_tagihan->start_date ?? '' }}";
		  
		  let initStart, initEnd;
		  
		  if (startDateStrInit) {
			  const activeStartInit = new Date(startDateStrInit);
			  initStart = new Date(activeStartInit.getFullYear(), activeStartInit.getMonth() - 1, 1);
			  initEnd = new Date(activeStartInit.getFullYear(), activeStartInit.getMonth(), 1);
		  } else {
			  const nowInit = new Date();
			  initStart = new Date(nowInit.getFullYear(), nowInit.getMonth() - 1, 1);
			  initEnd = new Date(nowInit.getFullYear(), nowInit.getMonth(), 1);
		  }

		  // Set default value
		  $('#bulanAwal').datepicker('setDate', initStart);
		  $('#bulanAkhir').datepicker('setDate', initEnd);

		  // Prevent manual typing tapi biarkan klik fokus jalan
		  $('#bulanAwal, #bulanAkhir').on('keydown paste', function(e) {
			e.preventDefault();
		  });

		  // Debug: lihat perubahan
		  //$('#bulanAwal, #bulanAkhir').on('changeDate', function(e) {
			//console.log("Filter berubah:", {
			  //bulanAwal: $('#bulanAwal').val(),
			  //bulanAkhir: $('#bulanAkhir').val()
			//});
		  //});
		});
	
		// --- Fungsi bantu untuk export chart dengan background putih ---
		function downloadChartAsPNG(canvasId, fileName) {
		  const canvas = document.getElementById(canvasId);
		  if (!canvas) return;

		  // Buat canvas baru untuk menambahkan background putih
		  const tempCanvas = document.createElement('canvas');
		  const ctx = tempCanvas.getContext('2d');

		  // Samakan ukuran
		  tempCanvas.width = canvas.width;
		  tempCanvas.height = canvas.height;

		  // Tambahkan background putih
		  ctx.fillStyle = '#ffffff';
		  ctx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);

		  // Gambar chart di atas background putih
		  ctx.drawImage(canvas, 0, 0);

		  // Buat URL gambar (PNG)
		  const chartImage = tempCanvas.toDataURL('image/png', 1.0);

		  // Buat link untuk download
		  const link = document.createElement('a');
		  link.href = chartImage;
		  link.download = `${fileName}_${new Date().toISOString().slice(0,10)}.png`;
		  link.click();
		}

		// === Tombol Download Chart Bulanan ===
		const btnMainChart = document.getElementById('downloadChart');
		btnMainChart.addEventListener('click', function() {
		  if ($(this).prop('disabled')) return;
		  downloadChartAsPNG('tagihanChart', 'Grafik-Total-Tagihan-Bulanan');
		});

		// === Tombol Download Chart Departemen ===
		const btnDeptChart = document.getElementById('downloadDeptChart');
		btnDeptChart.addEventListener('click', function() {
		  if ($(this).prop('disabled')) return;
		  downloadChartAsPNG('chart-departemen', 'Grafik-Departemen');
		});

		
		document.addEventListener("DOMContentLoaded", async function () {
		  // ===== ELEMENTS =====
		  const loaderDept = document.getElementById('chart-loader');
		  const canvasDept = document.getElementById('chart-departemen');
		  const ctxDept = canvasDept.getContext('2d');
		  
		  // CHART
		  const ctxMonthly = document.getElementById('tagihanChart').getContext('2d');
		  
		  const periodeSelect = document.getElementById("periodeSelect");		  
		  const chartTypeSelect = document.getElementById("chartTypeSelect");
		  const tbody = document.getElementById("tagihanTable");
		  const periodeFilter = document.getElementById("periodeFilter");
		  const deptFilter = document.getElementById("deptFilter");

		  // ===== VAR GLOBAL =====
		  let currentChartDept, tagihanChart;
		  let allChartDataDept = {};
		  
		  let prevFilter = {};
		  let isResetting = false; // 🔹 flag untuk mencegah loop
		  let allChartDataMonthly = [];
		  
		  let allDataTopUser = [];
		  let currentType = "bar";
		  let currentPeriode;
		  let isFilterLoaded = false;

		  // ====== SKELETON PLACEHOLDER ======
		  function showSkeletons() {
			// chart skeleton
			canvasDept.style.display = "none";
			const chartPlaceholder = document.createElement("div");
			chartPlaceholder.classList.add("chart-skeleton", "skeleton");
			chartPlaceholder.id = "chartPlaceholder";
			canvasDept.parentElement.insertBefore(chartPlaceholder, canvasDept);

			const monthlyPlaceholder = document.createElement("div");
			monthlyPlaceholder.classList.add("chart-skeleton", "skeleton");
			monthlyPlaceholder.id = "monthlyPlaceholder";
			ctxMonthly.canvas.parentElement.insertBefore(monthlyPlaceholder, ctxMonthly.canvas);

			// table skeleton (3 baris dummy)
			tbody.innerHTML = `
			  <tr class="table-skeleton"><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td></tr>
			  <tr class="table-skeleton"><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td></tr>
			  <tr class="table-skeleton"><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td></tr>
			  <tr class="table-skeleton"><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td></tr>
			  <tr class="table-skeleton"><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td></tr>
			  <tr class="table-skeleton"><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td></tr>
			  <tr class="table-skeleton"><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td><td><div class="skeleton"></div></td></tr>
			`;
		  }

		  function hideSkeletons() {
			const placeholders = document.querySelectorAll("#chartPlaceholder, #monthlyPlaceholder");
			placeholders.forEach(p => p.remove());
			canvasDept.style.display = "block";
			ctxMonthly.canvas.style.display = "block";
		  }

		  // ===== FETCH SEMUA DATA =====
			async function fetchAllDashboardData() {
			  showSkeletons(); // tampilkan skeleton langsung saat load

			  try {
				// Jalankan semua fetch bersamaan
				const [deptRes, monthlyRes, topUserRes] = await Promise.all([
					fetch("{{ url('chart/departement') }}").then(r => r.json()),
					fetch("{{ url('chart/getMonthlyBills') }}").then(r => r.json()),
					fetch("{{ url('topUserBills') }}").then(r => r.json())
				]);

				// --- DATA DEPARTEMEN ---
				allChartDataDept = deptRes.data || {};
				currentPeriode = deptRes.last_periode;

				// === Simpan data bulanan ===
				if (monthlyRes.success && Array.isArray(monthlyRes.data)) {
					allChartDataMonthly = monthlyRes.data;

					const startDateStr = "{{ $periode_tagihan->start_date ?? '' }}";
					
					let defaultStart, defaultEnd;
					
					if (startDateStr) {
						const activeStart = new Date(startDateStr);
						defaultStart = new Date(activeStart.getFullYear(), activeStart.getMonth() - 1, 1);
						defaultEnd = new Date(activeStart.getFullYear(), activeStart.getMonth(), 1);
					} else {
						const now = new Date();
						defaultStart = new Date(now.getFullYear(), now.getMonth() - 1, 1);
						defaultEnd = new Date(now.getFullYear(), now.getMonth(), 1);
					}

					$('#bulanAwal').datepicker('setDate', defaultStart);
					$('#bulanAkhir').datepicker('setDate', defaultEnd);

					// render chart default
					filterAndRenderChart();
				} else {
					console.warn("⚠️ Data bulanan tidak berhasil diambil:", monthlyRes);
					renderMonthlyChart([], true);
				}

				// --- DATA TOP USERS ---
				allDataTopUser = topUserRes.data || [];
				if (!isFilterLoaded) {
				  populateFilters(topUserRes.periodeList, topUserRes.deptList);
				  isFilterLoaded = true;
				}

				hideSkeletons(); // hilangkan skeleton setelah semua data siap

			  } catch (err) {
				console.error("❌ Gagal fetch data dashboard:", err);
				tbody.innerHTML = `<tr><td colspan="3" class="text-center text-danger">Gagal memuat data</td></tr>`;
				hideSkeletons();
			  }
			}

		// ===== RENDER CHART DEPARTEMEN =====
		function renderDeptChart(type, periode) {
		  const data = allChartDataDept[periode];
		  if (!data || data.length === 0) {
			if (currentChartDept) currentChartDept.destroy();
			const ctxEmpty = ctxDept;
			ctxEmpty.clearRect(0, 0, canvasDept.width, canvasDept.height);
			ctxEmpty.font = "16px sans-serif";
			ctxEmpty.fillStyle = "#999";
			ctxEmpty.textAlign = "center";
			ctxEmpty.fillText("Tidak ada data yang tercatat dalam sistem.", canvasDept.width / 2, canvasDept.height / 2);
			return;
		  }

		  const labels = data.map(i => i.departemen);
		  const values = data.map(i => i.total_tagihan);

		  if (currentChartDept) currentChartDept.destroy();

		  // 🎨 Gradient dua warna — hijau muda → biru
		  const gradient = ctxDept.createLinearGradient(0, 0, 0, canvasDept.height);
		  gradient.addColorStop(0, 'rgba(72, 239, 128, 0.7)');  // hijau muda terang (atas)
		  gradient.addColorStop(1, 'rgba(78, 115, 223, 0.4)');  // biru lembut (bawah)

		  const datasetStyle =
			type === "line"
			  ? {
				  label: "Total Tagihan (Rp)",
				  data: values,
				  borderColor: "#3cb371", // garis hijau menonjol
				  backgroundColor: gradient, // fill gradien
				  borderWidth: 3,
				  pointBackgroundColor: "#fff",
				  pointBorderColor: "#3cb371",
				  pointRadius: 5,
				  pointHoverRadius: 7,
				  fill: true,
				  tension: 0.35,
				}
			  : {
				  label: "Total Tagihan (Rp)",
				  data: values,
				  backgroundColor: ["#4e73df", "#1cc88a", "#36b9cc", "#f6c23e", "#1a237e"],
				  borderColor: ["#2e59d9", "#17a673", "#2c9faf", "#dda20a", "#0d1442"],
				  borderWidth: 2,
				};

		  currentChartDept = new Chart(ctxDept, {
			type,
			data: {
			  labels,
			  datasets: [datasetStyle],
			},
			options: {
			  responsive: true,
			  maintainAspectRatio: false,
			  animation: {
				duration: 800,
				easing: "easeOutQuart",
			  },
			  plugins: {
				legend: {
				  position: "bottom",
				  labels: {
					font: { size: 13 },
					color: "#333",
				  },
				},
				tooltip: {
				  backgroundColor: "rgba(0,0,0,0.75)",
				  titleFont: { size: 14, weight: "bold" },
				  bodyFont: { size: 13 },
				  padding: 10,
				  callbacks: {
					label: (context) => "Rp. " + context.raw.toLocaleString("id-ID"),
				  },
				},
			  },
			  scales:
				type !== "pie" && type !== "doughnut"
				  ? {
					  y: {
						beginAtZero: true,
						ticks: {
						  callback: (val) => "Rp. " + val.toLocaleString("id-ID"),
						  font: { size: 12 },
						},
						grid: { color: "#eee" },
					  },
					  x: {
						ticks: { font: { size: 12 } },
						grid: { display: false },
					  },
					}
				  : {},
			},
		  });
		  
		  // TOGGLE DOWNLOAD PNG
		  if (currentChartDept) {
			$('#downloadDeptChart').prop('disabled', false);
		  } else {
			// kalau chart tidak generate, tetap disable
			$('#downloadDeptChart').prop('disabled', true);
		  }
		}


		// ===== RENDER CHART BULANAN DENGAN RANGE BULAN =====
		function renderMonthlyChart(data, initial = false) {
			const labels = data.map(d => d.label);
			const valuesUser = data.map(d => d.value_user);
			const valuesOperasional = data.map(d => d.value_operasional);

			if (!tagihanChart) {
			  tagihanChart = new Chart(ctxMonthly, {
				type: 'line',
				data: {
				  labels,
				  datasets: [
				  {
					label: "User (Rp)",
					data: valuesUser,
					fill: true,
					borderColor: "rgba(153, 102, 255, 1)",
					backgroundColor: "rgba(153, 102, 255, 0.2)",
					tension: 0.4,
					pointRadius: 6,
					pointHoverRadius: 8,
					pointBackgroundColor: "#9966ff"
				  },
				  {
					label: "Operasional (Rp)",
					data: valuesOperasional,
					fill: true,
					borderColor: "rgba(75, 192, 192, 1)",
					backgroundColor: "rgba(75, 192, 192, 0.2)",
					tension: 0.4,
					pointRadius: 6,
					pointHoverRadius: 8,
					pointBackgroundColor: "#4bc0c0"
				  }]
				},
				options: {
				  responsive: true,
				  animation: { duration: initial ? 1000 : 600, easing: "easeOutQuart" },
				  plugins: {
					tooltip: {
					  callbacks: {
						label: ctx => `Rp. ${ctx.parsed.y.toLocaleString()}`
					  }
					},
					legend: { display: true }
				  },
				  scales: {
					y: {
					  beginAtZero: true,
					  ticks: {
						callback: val => `Rp. ${val.toLocaleString()}`
					  },
					  grid: { color: "#eee" }
					},
					x: { grid: { display: false } }
				  }
				}
			  });
			  
			  // TOGGLE DOWNLOAD PNG
			  if (tagihanChart) {
				  $('#downloadChart').prop('disabled', false);
			  } else {
			      // kalau chart tidak generate, tetap disable
				  $('#downloadChart').prop('disabled', true);
			  }
			  
			} else {
			  tagihanChart.data.labels = labels;
			  tagihanChart.data.datasets[0].data = valuesUser;
			  tagihanChart.data.datasets[1].data = valuesOperasional;
			  tagihanChart.update();
			}
		  }



		  // ===== TOP USERS TABLE =====
		  function applyFilters() {
			const periode = periodeFilter.value;
			const dept = deptFilter.value;
			const category = document.getElementById("categoryFilter").value;
			let filtered = [...allDataTopUser];
			
			// Filter berdasarkan periode jika dipilih
			if (periode !== "all") {
				filtered = filtered.filter(i => String(i.periode_id) === String(periode));
			}
			
			// Filter berdasarkan kategori jika dipilih
			if (category !== "all") {
				filtered = filtered.filter(i => String(i.category) === String(category));
			}

			// Matikan dropdown departemen jika kategori Operasional
			if (category === "2") {
				deptFilter.disabled = true;
				deptFilter.value = "all";
			} else {
				deptFilter.disabled = false;
			}
			
			// Filter berdasarkan departemen jika dipilih (dan tidak disabled)
			if (deptFilter.value !== "all") {
				filtered = filtered.filter(i => i.departemen === deptFilter.value);
			}

			// Aggregate by nama_karyawan & departemen agar tidak dobel saat 'Semua Periode'
			const aggregatedMap = new Map();
			filtered.forEach(item => {
				const key = item.nama_karyawan + '|' + item.departemen;
				if (!aggregatedMap.has(key)) {
					aggregatedMap.set(key, { ...item, total: 0, total_tagihan: 0 });
				}
				const aggItem = aggregatedMap.get(key);
				const total = parseInt(item.total_tagihan ?? item.total ?? 0, 10);
				aggItem.total += total;
				aggItem.total_tagihan += total;
			});
			filtered = Array.from(aggregatedMap.values());
			
			// Sort by total DESC dan ambil 10 terbanyak
			filtered.sort((a, b) => {
				const totalA = parseInt(a.total_tagihan ?? a.total ?? 0, 10);
				const totalB = parseInt(b.total_tagihan ?? b.total ?? 0, 10);
				return totalB - totalA;
			});
			
			// Ambil maksimal 10 data
			filtered = filtered.slice(0, 10);
			
			renderTable(filtered);
		  }

		  document.getElementById("categoryFilter").addEventListener("change", applyFilters);

		  function populateFilters(periodeList = [], deptList = []) {
			periodeFilter.innerHTML = ``;
			deptFilter.innerHTML = `<option value="all">Semua Departemen</option>`;

			// Cari periode aktif
			const activePeriode = periodeList.find(p => p.isactive === '1' || p.isactive === 1);
			
			// Cari periode mana yang memiliki data
			const periodesWithData = new Set();
			allDataTopUser.forEach(item => {
				periodesWithData.add(String(item.periode_id));
			});
			
			// Sort berdasarkan periode_id desc (terbaru)
			periodeList.sort((a, b) => b.periode_id - a.periode_id);
			
			// Cari periode default: prioritas ke periode aktif jika ada data, jika tidak ambil periode terbaru yang ada data
			let defaultPeriode = null;
			if (activePeriode && periodesWithData.has(String(activePeriode.periode_id))) {
				defaultPeriode = activePeriode.periode_id;
			} else {
				// Cari periode terbaru yang ada data
				for (const p of periodeList) {
					if (periodesWithData.has(String(p.periode_id))) {
						defaultPeriode = p.periode_id;
						break;
					}
				}
			}
			
			periodeList.forEach((p) => {
			  const opt = document.createElement("option");
			  opt.value = p.periode_id;
			  // Tambahkan "(Aktif)" jika periode sedang aktif
			  const activeLabel = p.isactive === '1' || p.isactive === 1 ? ' (Aktif)' : '';
			  // Tambahkan tanda jika tidak ada data
			  const hasData = periodesWithData.has(String(p.periode_id));
			  opt.textContent = p.desc_date + activeLabel;
			  // Default pilih periode yang sudah ditentukan
			  if (defaultPeriode && p.periode_id === defaultPeriode) {
				  opt.selected = true;
			  }
			  periodeFilter.appendChild(opt);
			});

			deptList.forEach(d => {
			  const opt = document.createElement("option");
			  const name = d.nama ?? "Tanpa Nama";
			  opt.value = name;
			  opt.textContent = name;
			  deptFilter.appendChild(opt);
			});
		  }

		  function renderTable(data = []) {
			tbody.innerHTML = "";
			if (!data || data.length === 0) {
			  tbody.innerHTML = `<tr><td colspan="3" class="text-center text-muted">Tidak ada data</td></tr>`;
			  return;
			}

			data.forEach((item, index) => {
			  const total = parseInt(item.total_tagihan ?? item.total ?? 0, 10);
			  tbody.insertAdjacentHTML("beforeend", `
				<tr>
				  <td><span class="badge bg-primary">${index + 1}</span></td>
				  <td>${item.nama_karyawan} (${item.departemen})</td>
				  <td class="text-end">Rp. ${total.toLocaleString("id-ID")}</td>
				</tr>
			  `);
			});
		  }

		  // ===== INIT DASHBOARD =====
		  await fetchAllDashboardData();

		  // Periode sudah di-populate oleh Blade, cukup ambil value yang selected
		  const selectedOption = periodeSelect.querySelector('option:checked');
		  if (selectedOption && selectedOption.value) {
			currentPeriode = selectedOption.value;
		} else {
			// Jika tidak ada yang selected, gunakan periode pertama
			const firstOption = periodeSelect.querySelector('option:not([value=""])');
			if (firstOption) {
				currentPeriode = firstOption.value;
				periodeSelect.value = currentPeriode;
			}
		}

		// Render chart dengan periode yang dipilih
		if (currentPeriode) {
			renderDeptChart(currentType, currentPeriode);
		}
		
		// Render tabel dengan filter yang sudah diterapkan
		applyFilters();

		  // ===== EVENT LISTENER =====
		  periodeSelect.addEventListener("change", function () {
			currentPeriode = this.value || null;
			// Jika kosong, render periode pertama
			if (!currentPeriode) {
				const firstPeriode = Object.keys(allChartDataDept)[0];
				if (firstPeriode) {
					renderDeptChart(currentType, firstPeriode);
				}
			} else {
				renderDeptChart(currentType, currentPeriode);
			}
		  });
		  
		  chartTypeSelect.addEventListener("change", function () {
			currentType = this.value;
			renderDeptChart(currentType, currentPeriode);
		  });
		  
		  // === EVENT FILTER: Saat periode atau departemen berubah untuk Top Users ===
		  periodeFilter.addEventListener("change", function () {
			applyFilters();
		  });
		  
		  deptFilter.addEventListener("change", function () {
			applyFilters();
		  });
		  
		 // === EVENT FILTER: Saat bulan awal / akhir berubah ===
		  $('#bulanAwal, #bulanAkhir').on('changeDate', function() {
			filterAndRenderChart();
		  });

		// ==== Fungsi filter & render chart ====

		function filterAndRenderChart() {
			const startDate = $('#bulanAwal').datepicker('getDate');
			const endDate = $('#bulanAkhir').datepicker('getDate');
			if (!startDate || !endDate) return;

			// 🚨 hentikan fungsi jika sedang reset
			if (isResetting) return;

			const startMonth = startDate.getMonth() + 1;
			const startYear = startDate.getFullYear();
			const endMonth = endDate.getMonth() + 1;
			const endYear = endDate.getFullYear();

			const now = new Date();
			const maxYear = now.getFullYear() + 1;
			const minYear = now.getFullYear() - 1; // batas 2 tahun ke belakang

			// Validasi tahun maksimum
			if (endYear > maxYear) {
				Swal.fire({
					icon: 'warning',
					title: 'Batas tahun terlampaui',
					text: `Tidak boleh memilih lebih dari 2 tahun ke depan (max: ${maxYear}).`,
				});
				resetToPrevFilter();
				return;
			}
			
			// Validasi tahun minimum
			if (startYear < minYear) {
				Swal.fire({
					icon: 'warning',
					title: 'Batas tahun terlampaui',
					text: `Tidak boleh memilih lebih dari 2 tahun sebelumnya (min: ${minYear}).`,
				});
				resetToPrevFilter();
				return;
			}

			// Validasi urutan bulan
			if (startYear > endYear || (startYear === endYear && startMonth > endMonth)) {
				Swal.fire({
					icon: 'warning',
					title: 'Rentang bulan tidak valid',
					text: 'Bulan awal tidak boleh setelah bulan akhir.',
				});
				resetToPrevFilter();
				return;
			}

			// Validasi maksimal 12 bulan
			const totalMonths = (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
			if (totalMonths > 12) {
				Swal.fire({
					icon: 'warning',
					title: 'Rentang terlalu panjang',
					text: 'Filter maksimal 12 bulan.',
				});
				resetToPrevFilter();
				return;
			}

			// Simpan filter terakhir
			prevFilter = { startDate, endDate };

			// Filter data
			const filteredData = allChartDataMonthly.filter(d => {
				const dTime = d.year * 12 + d.month;
				const startTime = startYear * 12 + startMonth;
				const endTime = endYear * 12 + endMonth;
				return dTime >= startTime && dTime <= endTime;
			});

			renderMonthlyChart(filteredData, false);
		}

		// 🔹 fungsi reset dengan flag untuk mencegah loop
		function resetToPrevFilter() {
			if (!prevFilter.startDate) return;

			isResetting = true;
			$('#bulanAwal').datepicker('setDate', prevFilter.startDate);
			$('#bulanAkhir').datepicker('setDate', prevFilter.endDate);
			isResetting = false;
		}


		  periodeFilter.addEventListener("change", applyFilters);
		  deptFilter.addEventListener("change", applyFilters);
		});

		// AJAX CARD PENDING DATA TAGIHAN
		$('.card-preview').on('click', function () {
			let userRole = @json($role->idroles); // ambil role dari blade
			let status = $(this).data('status'); // pending / approved / rejected

			Swal.fire({
				title: 'Memuat Data...',
				text: 'Silakan tunggu',
				allowOutsideClick: false,
				didOpen: () => Swal.showLoading()
			});

			$.ajax({
				url: "{{ route('cardPreview') }}",
				type: "GET",
				data: {
					status: status,
					role: userRole,
					show_all: false
				},
				success: function (res) {
					let rows = '';

					// 🧭 Map judul popup berdasarkan status
					const titleMap = {
                        pending: 'Data Tagihan Menunggu Persetujuan (Preview)',
                        approved_user: 'Data Tagihan Disetujui - User (Preview)',
                        approved_operasional: 'Data Tagihan Disetujui - Operasional (Preview)',
    
						rejected_user: 'Data Tagihan Ditolak - User (Preview)',
						rejected_operasional: 'Data Tagihan Ditolak - Operasional (Preview)'
                    };
					let popupTitle = titleMap[status] ?? 'Data Tagihan (Preview)';

					// 🧩 Bangun isi tabel
					if (res.data.length > 0) {
						res.data.slice(0, 5).forEach(function (item, i) {
							let formattedBill = new Intl.NumberFormat('id-ID').format(item.total_bill);

							// fungsi badge dua role (transparan dan mudah dibaca)
							let badge = (status) => {
								if (status === 'approved') return `<span class="badge bg-success">Approved</span>`;
								if (status === 'pending') return `<span class="badge text-dark" style="background-color: yellow;">Pending</span>`;
								if (status === 'rejected') return `<span class="badge bg-danger">Rejected</span>`;
								return `<span class="badge bg-secondary">-</span>`;
							};

							rows += `
								<tr>
									<td>${i + 1}</td>
									<td>${item.phone_number}</td>
									<td>${item.name}</td>
									<td class="text-end">${formattedBill}</td>
									<td>${badge(item.approve_spv)}</td>
									<td>${badge(item.approve_head_hrd)}</td>
								</tr>
							`;
						});
					} else {
						rows = `<tr><td colspan="6" class="text-center text-muted py-2">Tidak ada data ${status}</td></tr>`;
					}

					// 🧭 Tentukan route tombol sesuai role & status
					let buttonRoute = '';
					let showDetailButton = false;
					const isFinance = userRole.includes('financ') || userRole.includes('kasirs');

					// Ambil segment pertama dari path
					const pathSegments = window.location.pathname.split('/').filter(Boolean); // hilangkan empty string
					const hasBasePath = pathSegments.length > 1; // jika lebih dari 1 segment, berarti ada basePath
					const basePath = hasBasePath ? `/${pathSegments[0]}` : ''; // ambil segment pertama kalau ada

                    if ((status === 'rejected_user' || status === 'rejected_operasional') && ['superv', 'admhrd', 'admins'].includes(userRole)) {
						let targetTab = (status === 'rejected_operasional') ? 'operasional' : 'user';
						buttonRoute = `${basePath}/trsbil?autoLoad=true&filter=rejected&tab=${targetTab}`;
                        showDetailButton = res.total > 0;
                    }
					else if (status === 'pending' && ['superv', 'heahrd', 'admhrd', 'admins'].includes(userRole)) {
						buttonRoute = `${basePath}/trsapp`;
						showDetailButton = res.total > 0;
					} 
					else if ((status === 'approved_user' || status === 'approved_operasional') && res.total > 0 && ['superv', 'admins'].includes(userRole)) {
						let targetRole = (status === 'approved_operasional') ? 'operasional' : 'user';
						buttonRoute = isFinance ? `${basePath}/rpttfr?filter=approvedspv&role=${targetRole}` : `${basePath}/rptbil?filter=approvedspv&role=${targetRole}`;
						showDetailButton = true;
					}
					else if ((status === 'approved_user' || status === 'approved_operasional') && res.total > 0 && ['heahrd', 'admhrd', 'admins', 'kasirs', 'financ'].includes(userRole)) {
						let targetRole = (status === 'approved_operasional') ? 'operasional' : 'user';
						buttonRoute = isFinance ? `${basePath}/rpttfr?filter=approvedheadhrd&role=${targetRole}` : `${basePath}/rptbil?filter=approvedheadhrd&role=${targetRole}`;
						showDetailButton = true;
					}

					Swal.fire({
						title: popupTitle,
						allowOutsideClick: false,
						html: `
							<div class="table-responsive">
								<table class="table table-sm table-bordered text-start align-middle">
									<thead class="table-light">
										<tr>
											<th>No</th>
											<th>Kartu Halo</th>
											<th>Nama</th>
											<th>Total Tagihan</th>
											<th>Approval Supervisor</th>
											<th>Approval HRD</th>
										</tr>
									</thead>
									<tbody>${rows}</tbody>
								</table>
							</div>
							${status === 'pending' ? `
								<div class="text-end mt-2">
									<button id="btnShowAll" class="btn btn-sm btn-outline-secondary">
										<i class="fas fa-eye"></i> Lihat Semua Pending
									</button>
								</div>
							` : ''}
						`,
						width: '850px',
						showCancelButton: true,
						showConfirmButton: showDetailButton,
						confirmButtonText: '<i class="fas fa-arrow-right"></i> Lihat Detail',
						cancelButtonText: 'Tutup',
						confirmButtonColor: '#3085d6',
						cancelButtonColor: '#aaa'
					}).then((result) => {
						if (result.isConfirmed && buttonRoute) {
							window.location.href = buttonRoute;
						}
					});

					// 🪄 Tombol Lihat Semua Pending (handler global, bind sekali)
					$(document).off('click', '#btnShowAll').on('click', '#btnShowAll', function () {
						let userRole = @json($role->name);

						// Tutup popup sebelumnya dulu
						Swal.close();

						// Loading
						Swal.fire({
							title: 'Memuat Data...',
							text: 'Silakan tunggu',
							allowOutsideClick: false,
							didOpen: () => Swal.showLoading()
						});

						$.ajax({
							url: "{{ route('cardPreview') }}",
							type: "GET",
							data: {
								status: 'pending',
								role: userRole,
								show_all: true
							},
							success: function (res2) {
								if (res2.summary) {
									let allRows = res2.summary.map((item, i) => `
										<tr>
											<td>${i + 1}</td>
											<td>${item.role}</td>
											<td class="text-center fw-bold">${item.pending}</td>
										</tr>
									`).join('');

									Swal.fire({
										title: 'Ringkasan Data Pending',
										html: `
											<div class="table-responsive">
												<table class="table table-sm table-bordered text-start align-middle">
													<thead class="table-light">
														<tr>
															<th>No</th>
															<th>Role</th>
															<th>Jumlah Pending</th>
														</tr>
													</thead>
													<tbody>${allRows}</tbody>
												</table>
											</div>
										`,
										width: '600px',
										confirmButtonText: 'Tutup',
										confirmButtonColor: '#3085d6'
									});
									return;
								}

								// fallback lama jika res2.data masih dipakai
								if (!res2.data || res2.data.length === 0) {
									Swal.fire('Info', 'Tidak ada data pending.', 'info');
									return;
								}
							},
							error: function (xhr) {
								console.error(xhr.responseText);
								Swal.fire('Error', 'Gagal mengambil data pending', 'error');
							}
						});
					});

				},
				error: function (xhr) {
					console.error(xhr.responseText);
					Swal.fire('Error', 'Gagal mengambil data', 'error');
				}
			});
		});
    </script>
@endpush