@extends('layout.layout')

@php
    $title = 'Dashboard';
    $subTitle = 'PAMSIMAS';
@endphp

@section('content')

<div class="grid grid-cols-1 md:grid-cols-12 gap-6">

    {{-- ========================================== --}}
    {{-- STATS CARDS --}}
    {{-- ========================================== --}}
    <div class="md:col-span-12">

        {{-- ADMIN: 6 Card (3 kolom) --}}
        @if($isAdmin)
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            
            {{-- Total Pelanggan --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-primary-600/20 border border-primary-300 dark:border-primary-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="flowbite:users-group-solid" class="text-primary-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Total Pelanggan</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $totalPelanggan ?? 0 }}</h6>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Total Petugas --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-success-600/20 border border-success-300 dark:border-success-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="solar:user-check-outline" class="text-success-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Total Petugas</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $totalPetugas ?? 0 }}</h6>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tagihan Bulan Ini --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-warning-600/20 border border-warning-300 dark:border-warning-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="majesticons:shopping-cart" class="text-warning-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Tagihan Bulan Ini</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $tagihanBulanIni ?? 0 }}</h6>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Total Pemakaian Air --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-cyan-600/20 border border-cyan-300 dark:border-cyan-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="solar:water-linear" class="text-cyan-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Total Pemakaian Air</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ number_format($pemakaianBulanIni ?? 0, 0, ',', '.') }} M³</h6>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Rata-rata Pemakaian --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-teal-600/20 border border-teal-300 dark:border-teal-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="solar:chart-2-linear" class="text-teal-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Rata-rata Pemakaian</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ number_format($rataPemakaian ?? 0, 1, ',', '.') }} M³</h6>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Pemasukan Bulan Ini --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-info-600/20 border border-info-300 dark:border-info-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="solar:wallet-money-outline" class="text-info-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Pemasukan Bulan Ini</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">Rp {{ number_format($pemasukanBulanIni ?? 0, 0, ',', '.') }}</h6>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        @endif

        {{-- PETUGAS: 4 Card (4 kolom) --}}
        @if(!$isAdmin)
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            
            {{-- Total Pelanggan --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-primary-600/20 border border-primary-300 dark:border-primary-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="flowbite:users-group-solid" class="text-primary-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Total Pelanggan</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $totalPelanggan ?? 0 }}</h6>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tagihan Bulan Ini --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-warning-600/20 border border-warning-300 dark:border-warning-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="majesticons:shopping-cart" class="text-warning-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Tagihan Bulan Ini</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ $tagihanBulanIni ?? 0 }}</h6>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Total Pemakaian Air --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-cyan-600/20 border border-cyan-300 dark:border-cyan-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="solar:water-linear" class="text-cyan-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Total Pemakaian Air</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">{{ number_format($pemakaianBulanIni ?? 0, 0, ',', '.') }} M³</h6>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Pemasukan Bulan Ini --}}
            <div class="card border-0 rounded-lg">
                <div class="card-body p-6">
                    <div class="flex items-center gap-4">
                        <span class="w-[44px] h-[44px] bg-info-600/20 border border-info-300 dark:border-info-600/50 shrink-0 flex justify-center items-center rounded-lg">
                            <iconify-icon icon="solar:wallet-money-outline" class="text-info-600 text-xl"></iconify-icon>
                        </span>
                        <div>
                            <span class="text-secondary-light text-sm">Pemasukan Bulan Ini</span>
                            <h6 class="font-semibold text-neutral-900 text-lg mt-1">Rp {{ number_format($pemasukanBulanIni ?? 0, 0, ',', '.') }}</h6>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        @endif

    </div>

    {{-- ========================================== --}}
    {{-- GRAFIK PEMAKAIAN AIR 6 BULAN --}}
    {{-- ========================================== --}}
    <div class="md:col-span-12 2xl:col-span-8">
        <div class="card rounded-lg border-0 h-full">
            <div class="card-body p-6">
                <div class="flex items-center flex-wrap gap-2 justify-between mb-5">
                    <h6 class="font-bold text-lg">💧 Pemakaian Air 6 Bulan Terakhir</h6>
                </div>
                <div style="height: 300px;">
                    <canvas id="chartPemakaianAir"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- ========================================== --}}
    {{-- TAGIHAN TERBARU --}}
    {{-- ========================================== --}}
    <div class="md:col-span-12 2xl:col-span-4">
        <div class="card rounded-lg border-0 h-full">
            <div class="card-body p-6">
                <div class="flex items-center flex-wrap gap-2 justify-between mb-5">
                    <h6 class="font-bold text-lg">Tagihan Terbaru</h6>
                    <a href="{{ route('tagihan.index') }}" class="text-primary-600 hover-text-primary flex items-center gap-1 text-sm">
                        Lihat Semua
                        <iconify-icon icon="solar:alt-arrow-right-linear"></iconify-icon>
                    </a>
                </div>

                <div class="space-y-4">
                    @forelse($tagihanTerbaru ?? [] as $tagihan)
                    <div class="flex items-center justify-between border-b border-neutral-100 dark:border-neutral-700 pb-3">
                        <div>
                            <h6 class="text-sm font-semibold text-neutral-800">{{ $tagihan->user->name ?? '-' }}</h6>
                            <span class="text-xs text-secondary-light">{{ $tagihan->invoice_number }}</span>
                        </div>
                        <div class="text-right">
                            <span class="text-sm font-semibold text-neutral-800">Rp {{ number_format($tagihan->total_amount, 0, ',', '.') }}</span>
                            <br>
                            @if($tagihan->status == 'paid')
                                <span class="bg-success-100 text-success-600 px-2 py-0.5 rounded-full text-xs font-medium">Lunas</span>
                            @elseif($tagihan->status == 'unpaid')
                                <span class="bg-warning-100 text-warning-600 px-2 py-0.5 rounded-full text-xs font-medium">Belum</span>
                            @else
                                <span class="bg-neutral-100 text-neutral-600 px-2 py-0.5 rounded-full text-xs font-medium">{{ $tagihan->status }}</span>
                            @endif
                        </div>
                    </div>
                    @empty
                    <p class="text-secondary-light text-sm text-center py-6">Belum ada tagihan</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- ========================================== --}}
    {{-- PELANGGAN TERBARU (HANYA ADMIN) --}}
    {{-- ========================================== --}}
    @if($isAdmin)
    <div class="md:col-span-12 2xl:col-span-6">
        <div class="card rounded-lg border-0">
            <div class="card-body p-6">
                <div class="flex items-center flex-wrap gap-2 justify-between mb-5">
                    <h6 class="font-bold text-lg">Pelanggan Terbaru</h6>
                    <a href="{{ route('DataPelanggan') }}" class="text-primary-600 hover-text-primary flex items-center gap-1 text-sm">
                        Lihat Semua
                        <iconify-icon icon="solar:alt-arrow-right-linear"></iconify-icon>
                    </a>
                </div>
                <div class="table-responsive scroll-sm">
                    <table class="table bordered-table mb-0">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pelangganTerbaru ?? [] as $pelanggan)
                            <tr>
                                <td class="font-semibold text-sm">{{ $pelanggan->name }}</td>
                                <td class="text-sm">{{ $pelanggan->email }}</td>
                                <td>
                                    @if($pelanggan->status == 'aktif')
                                        <span class="bg-success-100 text-success-600 px-3 py-1 rounded-full text-xs font-medium">Aktif</span>
                                    @elseif($pelanggan->status == 'pending')
                                        <span class="bg-warning-100 text-warning-600 px-3 py-1 rounded-full text-xs font-medium">Pending</span>
                                    @else
                                        <span class="bg-danger-100 text-danger-600 px-3 py-1 rounded-full text-xs font-medium">Nonaktif</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="3" class="text-center text-secondary-light py-4">Belum ada pelanggan</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- ========================================== --}}
    {{-- STATUS TAGIHAN --}}
    {{-- ========================================== --}}
    <div class="md:col-span-12 2xl:col-span-{{ $isAdmin ? '6' : '6' }}">
        <div class="card rounded-lg border-0 h-full">
            <div class="card-body p-6">
                <div class="flex items-center flex-wrap gap-2 justify-between mb-5">
                    <h6 class="font-bold text-lg">Status Tagihan Bulan Ini</h6>
                </div>
                <div style="height: 250px;">
                    <canvas id="chartStatusTagihan"></canvas>
                </div>
                <ul class="flex flex-wrap items-center justify-center mt-4 gap-6">
                    <li class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-sm bg-success-600"></span>
                        <span class="text-secondary-light text-sm">Lunas: <strong>{{ $totalLunas ?? 0 }}</strong></span>
                    </li>
                    <li class="flex items-center gap-2">
                        <span class="w-3 h-3 rounded-sm bg-warning-600"></span>
                        <span class="text-secondary-light text-sm">Belum: <strong>{{ $totalBelum ?? 0 }}</strong></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>

{{-- ========================================== --}}
{{-- SCRIPT CHARTS --}}
{{-- ========================================== --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
(function() {
    // Chart Pemakaian Air
    var canvas1 = document.getElementById('chartPemakaianAir');
    if (canvas1) {
        var months = {!! json_encode($chartPemakaianAir['months'] ?? ['Nov', 'Des', 'Jan', 'Feb', 'Mar', 'Apr']) !!};
        var data = {!! json_encode($chartPemakaianAir['data'] ?? [0, 0, 0, 0, 0, 0]) !!};
        
        new Chart(canvas1.getContext('2d'), {
            type: 'bar',
            data: {
                labels: months,
                datasets: [{
                    label: 'Pemakaian Air (M³)',
                    data: data,
                    backgroundColor: '#06b6d4',
                    borderRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, ticks: { callback: function(v) { return v + ' M³'; } } },
                    x: { grid: { display: false } }
                }
            }
        });
    }

    // Chart Status Tagihan
    var canvas2 = document.getElementById('chartStatusTagihan');
    if (canvas2) {
        new Chart(canvas2.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Lunas', 'Belum Bayar'],
                datasets: [{
                    data: [{{ $totalLunas ?? 0 }}, {{ $totalBelum ?? 0 }}],
                    backgroundColor: ['#16a34a', '#d97706'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } }
            }
        });
    }
})();
</script>

@endsection