@extends('webview.masjid.main')

@push('style')
<link rel="stylesheet" href="{{ route('masjid-mobile.kegiatan-donatur.css') }}" />
@endpush

@section('content')
<div class="header">
    <a href="{{ route('masjid-mobile.page.home') }}" class="btn-link">
        <img alt="angle-left" src="{{ asset('asset-webview/masjid/icons/arrow-left.png') }}" height="24" width="24">
        @if(request()->routeIs('masjid-mobile.page.kegiatan-donatur.pribadi'))
            Laporan Donasi Saya
        @else
            Laporan Kegiatan
        @endif
    </a>
</div>

<div class="body">
    <div class="filter-container">
        <div class="filter-group">
            <select id="filter-tahun" required><option value="" disabled selected>Tahun</option></select>
            <img alt="icon-select" src="{{ asset('asset-webview/masjid/icons/angle-down.png') }}" height="18" width="17">
        </div>
    </div>

    <div id="account-list" class="mt-3">
        <div class="loading-state">Silahkan pilih tahun</div>
    </div>
</div>
@endsection

@push('script')
<script>
    $(document).ready(function () {
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

        const $filterTahun = $('#filter-tahun');
        const $listContainer = $('#account-list');

        function formatRupiah(angka) {
            let value = parseFloat(angka);
            return new Intl.NumberFormat('id-ID', { minimumFractionDigits: 0 }).format(value);
        }

        // Load Filter Tahun
        $.ajax({
            url: "{{ route('masjid-mobile.data.filter-tahun') }}",
            type: 'GET',
            success: function(res) {
                if(res.status && res.data.length > 0) {
                    $filterTahun.empty();
                    let currentYear = new Date().getFullYear().toString();
                    let selectedYear = "";
                    res.data.forEach(item => {
                        $filterTahun.append(`<option value="${item.tahun}">${item.tahun}</option>`);
                        if(item.tahun == currentYear) selectedYear = item.tahun;
                    });
                    if(selectedYear === "") selectedYear = res.data[0].tahun;
                    $filterTahun.val(selectedYear);
                    loadAccounts(selectedYear);
                }
            }
        });

        $filterTahun.change(function() {
            loadAccounts($(this).val());
        });

        // DETEKSI MODE BERDASARKAN ROUTE
        // Jika route-nya yang 'pribadi', set mode PERSONAL. Selain itu GLOBAL.
        var reportMode = "{{ request()->routeIs('masjid-mobile.page.kegiatan-donatur.pribadi') ? 'PERSONAL' : 'GLOBAL' }}";

        function loadAccounts(tahun) {
            $listContainer.html('<div class="loading-state">Memuat data...</div>');

            if (reportMode === 'GLOBAL') {
                var url_list = "{{ route('masjid-mobile.page.kegiatan-donatur.detail') }}?tahun="
            } else {
                var url_list = "{{ route('masjid-mobile.page.kegiatan-donatur.pribadi.detail') }}?tahun="
            }
            
            $.ajax({
                url: "{{ route('masjid-mobile.data.kegiatan-donatur.list') }}",
                type: 'POST',
                data: { tahun: tahun, jenis_laporan: reportMode },
                success: function(res) {
                    if(res.data && res.data.length > 0) {
                        let html = '';
                        var colors = ['#ebf4ff', '#e6fffa', '#fff5f5', '#fff0f6', '#f0fff4', '#fffaf0'];
                        var textColors = ['#2b6cb0', '#285e61', '#c53030', '#97266d', '#276749', '#9c4221'];
                        
                        res.data.forEach((item, index) => {
                            // URL untuk pindah ke detail, bawa parameter tahun & kode_keg
                            let detailUrl = url_list + tahun + "&kode_keg=" + item.kode_keg;
                            
                            var initial = item.kode_keg;
                            
                            // Tentukan Warna Berdasarkan Urutan
                            var colorIndex = index % colors.length;
                            var bgColor = colors[colorIndex];
                            var txtColor = textColors[colorIndex];

                            html += `
                            <a href="${detailUrl}" class="account-card">
                            <div class="search-item" style="display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f0f0f0; gap: 15px;" onclick="...">
                                
                                <div style="
                                    width: 45px; 
                                    height: 45px; 
                                    min-width: 45px;
                                    background-color: ${bgColor}; 
                                    color: ${txtColor};
                                    border-radius: 12px; 
                                    display: flex; 
                                    align-items: center; 
                                    justify-content: center; 
                                    font-weight: 700; 
                                    font-size: 18px;">
                                    ${initial}
                                </div>

                                <div style="flex: 1;">
                                    <div style="font-weight: 600; font-size: 14px; color: #333; margin-bottom: 4px; line-height: 1.3;">
                                        ${item.nama}
                                    </div>
                                    <div style="font-size: 11px; color: #999; margin-bottom: 4px;">
                                        ${item.kode_keg}
                                    </div>
                                    <div style="font-weight: 700; color: #28C76F; font-size: 14px;">
                                        Rp${item.saldo_formatted || 0} 
                                    </div>
                                </div>
                            </div>
                            </a>`;
                        });
                        $listContainer.html(html);
                    } else {
                        $listContainer.html('<div class="loading-state">Data tidak ditemukan</div>');
                    }
                },
                error: function() {
                    $listContainer.html('<div class="loading-state text-danger">Gagal memuat data</div>');
                }
            });
        }
    });
</script>
@endpush