@extends('layouts.app', [
    'title' => 'Halaman Dashboard'
])

@section('content')

<!-- BARIS 1: STATISTIK UTAMA (4 COLUMNS) -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
    
    <!-- CARD 1: TOTAL PAKET INTERNET -->
    <div class="dashboard-card-anim card-stagger-3 bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between dashboard-card-anim stagger-1 transition-all duration-300 hover:shadow-md hover:-translate-y-1">
        <div class="text-center">
            <h3 class="text-xs font-bold text-emerald-600 uppercase tracking-wider mb-3">
                Total Paket Internet
            </h3>
            
            <div class="relative inline-flex items-center justify-center">
                <svg class="svg-circle-ring">
                    <circle class="svg-circle-bg" cx="50" cy="50" r="45"></circle>
                    <circle class="svg-circle-progress stroke-success" cx="50" cy="50" r="45"></circle>
                </svg>
                <span class="absolute text-2xl font-black text-gray-800 counter">{{ $total_internet_package }}</span>
            </div>
        </div>

        <hr class="my-4 border-gray-100">

        <div class="flex flex-col">
            <button type="button" @click="showModalPaket = true" class="w-full py-2 px-3 border border-emerald-500 text-emerald-600 hover:bg-emerald-50 text-xs font-bold rounded-xl transition flex items-center justify-center cursor-pointer">
                <i class="fas fa-list mr-1.5"></i> Lihat Paket Internet
            </button>
        </div>
    </div>

    <!-- CARD 2: TOTAL KLIEN -->
    <div class="dashboard-card-anim card-stagger-4 bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between dashboard-card-anim stagger-2 transition-all duration-300 hover:shadow-md hover:-translate-y-1">
        <div class="text-center">
            <h3 class="text-xs font-bold text-blue-600 uppercase tracking-wider mb-3">
                Total Pelanggan
            </h3>
            
            <div class="relative inline-flex items-center justify-center">
                <svg class="svg-circle-ring">
                    <circle class="svg-circle-bg" cx="50" cy="50" r="45"></circle>
                    <circle class="svg-circle-progress stroke-primary" cx="50" cy="50" r="45"></circle>
                </svg>
                <span class="absolute text-2xl font-black text-gray-800 counter">{{ $total_client }}</span>
            </div>
        </div>

        <hr class="my-4 border-gray-100">

        <div class="flex flex-col">
            <button type="button" @click="showModalTotalKlienOlt = true" class="w-full py-2 px-3 border border-blue-500 text-blue-600 hover:bg-blue-50 text-xs font-bold rounded-xl transition flex items-center justify-center cursor-pointer">
                <i class="fas fa-network-wired mr-1.5"></i> Lihat Total Pelanggan
            </button>
        </div>
    </div>

    <!-- 3. PEMASANGAN BULAN INI -->
    <div class="dashboard-card-anim card-stagger-5 bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between dashboard-card-anim stagger-3 transition-all duration-300 hover:shadow-md hover:-translate-y-1">
        <div class="text-center">
            <h3 class="text-xs font-bold text-emerald-600 uppercase tracking-wider mb-3">
                PSB Bulan Ini
            </h3>
            
            <div class="relative inline-flex items-center justify-center">
                <svg class="svg-circle-ring">
                    <circle class="svg-circle-bg" cx="50" cy="50" r="45"></circle>
                    <circle class="svg-circle-progress stroke-success" cx="50" cy="50" r="45"></circle>
                </svg>
                <span class="absolute text-2xl font-black text-gray-800 counter">{{ $count_installation_this_month }}</span>
            </div>
        </div>

        <hr class="my-4 border-gray-100">

        <div class="flex flex-col">
            <button type="button" @click="showModalPasangBulanIni = true" class="w-full py-2 px-3 border border-emerald-500 text-emerald-600 hover:bg-emerald-50 text-xs font-bold rounded-xl transition flex items-center justify-center cursor-pointer">
                <i class="fas fa-rocket mr-1.5"></i> Lihat Detail Pemasangan
            </button>
        </div>
    </div>

    <!-- 4. PELANGGAN PUTUS -->
    <div class="dashboard-card-anim card-stagger-6 bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between dashboard-card-anim stagger-4 transition-all duration-300 hover:shadow-md hover:-translate-y-1">
        <div class="text-center">
            <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3">
                Pelanggan Putus Bulan Ini
            </h3>
            
            <div class="relative inline-flex items-center justify-center">
                <svg class="svg-circle-ring">
                    <circle class="svg-circle-bg" cx="50" cy="50" r="45"></circle>
                    <circle class="svg-circle-progress stroke-secondary" cx="50" cy="50" r="45"></circle>
                </svg>
                <span class="absolute text-2xl font-black text-gray-800 counter">{{ $count_inactive_this_month ?? $total_inactive_clients }}</span>
            </div>
        </div>

        <hr class="my-4 border-gray-100">

        <div class="flex flex-col">
            <button type="button" @click="showModalKlienPutusBulanIni = true" class="w-full py-2 px-3 border border-gray-400 text-gray-600 hover:bg-gray-50 text-xs font-bold rounded-xl transition flex items-center justify-center cursor-pointer">
                <i class="fas fa-user-slash mr-1.5"></i> Lihat Pelanggan Putus
            </button>
        </div>
    </div>

    <!-- BARIS 2: KEUANGAN & BELUM DITAGIH (Dipindahkan ke dalam scope x-data yang sama agar state modal dapat diakses secara global di halaman ini) -->
    <div class="col-span-1 sm:col-span-2 xl:col-span-4 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6 mt-2 justify-center">

        <!-- 1. BELUM DITAGIH (BULAN INI) -->
        <div class="dashboard-card-anim card-stagger-7 bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between dashboard-card-anim stagger-1 transition-all duration-300 hover:shadow-md hover:-translate-y-1">
            <div class="text-center">
                <h3 class="text-xs font-bold text-red-600 uppercase tracking-wider mb-3">
                    Belum Ditagih Bulan Ini
                </h3>
                
                <div class="relative inline-flex items-center justify-center cursor-pointer" 
                    @click="showModalThisMonth = true" title="Klik untuk lihat detail">
                    <svg class="svg-circle-ring">
                        <circle class="svg-circle-bg" cx="50" cy="50" r="45"></circle>
                        <circle class="svg-circle-progress stroke-danger" cx="50" cy="50" r="45"></circle>
                    </svg>
                    <span class="absolute text-2xl font-black text-gray-800 counter">
                        {{ count($clients_who_not_paid_this_month) }}
                    </span>
                </div>
            </div>

            <hr class="my-4 border-gray-100">

            <button type="button" class="w-full py-2 px-3 border border-red-500 text-red-600 hover:bg-red-50 text-xs font-bold rounded-xl transition flex items-center justify-center cursor-pointer" 
                    @click="showModalThisMonth = true">
                <i class="fas fa-list fa-sm mr-1.5"></i> Lihat Jatuh Tempo
            </button>
        </div>

        <!-- CARD 2: TOTAL TRANSAKSI BULAN INI -->
        <div class="dashboard-card-anim card-stagger-8 bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between dashboard-card-anim stagger-2 transition-all duration-300 hover:shadow-md hover:-translate-y-1" 
            x-data="counter({{ preg_replace('/[^0-9]/', '', $sum_this_month) ?: 0 }})">
            <div class="text-center">
                <h3 class="text-xs font-bold text-amber-500 uppercase tracking-wider mb-3">
                    Total Transaksi Bulan Ini
                </h3>
                
                <div class="relative inline-flex items-center justify-center">
                    <svg class="svg-circle-ring">
                        <circle class="svg-circle-bg" cx="50" cy="50" r="45"></circle>
                        <circle class="svg-circle-progress stroke-warning" cx="50" cy="50" r="45"></circle>
                    </svg>
                    <i class="fas fa-dollar-sign fa-2x text-amber-500 absolute"></i>
                </div>
            </div>

            <hr class="my-4 border-gray-100">

            <div class="text-center py-1">
                <span class="text-xs font-semibold text-gray-400 block mb-1">Nominal Terkumpul:</span>
                <div class="text-base font-black text-gray-800" x-text="formattedValue"></div>
            </div>
        </div>

        <!-- CARD 3: TOTAL TRANSAKSI TAHUN INI -->
        <div class="dashboard-card-anim card-stagger-9 bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between dashboard-card-anim stagger-3 transition-all duration-300 hover:shadow-md hover:-translate-y-1" 
            x-data="counter({{ preg_replace('/[^0-9]/', '', $sum_this_year) ?: 0 }})">
            <div class="text-center">
                <h3 class="text-xs font-bold text-cyan-600 uppercase tracking-wider mb-3">
                    Total Transaksi Tahun Ini
                </h3>
                
                <div class="relative inline-flex items-center justify-center">
                    <svg class="svg-circle-ring">
                        <circle class="svg-circle-bg" cx="50" cy="50" r="45"></circle>
                        <circle class="svg-circle-progress stroke-info" cx="50" cy="50" r="45"></circle>
                    </svg>
                    <i class="fas fa-wallet fa-2x text-cyan-600 absolute"></i>
                </div>
            </div>

            <hr class="my-4 border-gray-100">

            <div class="text-center py-1">
                <span class="text-xs font-semibold text-gray-400 block mb-1">Nominal Terkumpul:</span>
                <div class="text-base font-black text-gray-800" x-text="formattedValue"></div>
            </div>
        </div>
    </div>

</div>

<!-- GRAFIK 1: STATISTIK PSB & PUTUS PERMANEN -->
<div class="dashboard-card-anim card-stagger-10 grid grid-cols-1 mb-6">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="py-4 px-6 border-b border-gray-100 flex flex-row items-center justify-between bg-gray-50/50">
            <h3 class="m-0 font-bold text-emerald-600 text-sm">
                Statistik Pelanggan Pasang Baru (PSB) & Putus Tahun Ini ({{ date('Y') }})
            </h3>
        </div>
        <div class="p-6">
            <!-- Menggunakan inline style untuk menjamin tinggi kontainer terbaca oleh Chart.js v4 -->
            <div style="position: relative; height: 320px; width: 100%;">
                <canvas id="psbChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- GRAFIK 2: STATISTIK TRANSAKSI TAHUN INI -->
<div class="dashboard-card-anim card-stagger-11 grid grid-cols-1 mb-6">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="py-4 px-6 border-b border-gray-100 flex flex-row items-center justify-between bg-gray-50/50">
            <h3 class="m-0 font-bold text-blue-600 text-sm">
                Statistik Transaksi Tahun Ini ({{ date('Y') }})
            </h3>
            <button type="button" class="bg-emerald-500 hover:bg-emerald-600 text-white text-xs px-3 py-1.5 rounded-lg shadow-sm transition cursor-pointer" id="refresh-chart">
                <i class="fas fa-fw fa-recycle"></i>
            </button>
        </div>
        <div class="p-6">
            <!-- Menggunakan inline style untuk menjamin tinggi kontainer terbaca oleh Chart.js v4 -->
            <div style="position: relative; height: 320px; width: 100%;">
                <canvas id="yearChart"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@push('modal')
@include('dashboard.modal.total_klien_putus_bulan_ini')
@include('dashboard.modal.total_pasang_bulan_ini')
@include('dashboard.modal.total_klien_olt')
@include('dashboard.modal.paket_internet')
@include('dashboard.modal.this_month')
@endpush

@push('js')
@include('dashboard.script')
@endpush