@extends('webview.masjid.main')

@push('style')
<link rel="stylesheet" href="{{ route('masjid-mobile.kas-dkm.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">
        Kas DKM
    </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 class="filter-group">
            <select id="filter-bulan" required>
                <option value="" disabled selected>Bulan</option>
            </select>
            <img alt="icon-select" src="{{ asset('asset-webview/masjid/icons/angle-down.png') }}" height="18"
                width="17">
        </div>
    </div>

    <div id="report-content" class="report-list">
        <div class="loading-state">Silahkan pilih periode tahun dan bulan</div>
    </div>
</div>
@endsection

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

        const $filterTahun = $('#filter-tahun');
        const $filterBulan = $('#filter-bulan');
        const $reportContent = $('#report-content');

        // Helper: Format Rupiah
        function formatRupiah(angka) {
            if (angka == null || angka == 0) return '0';
            let value = parseFloat(angka);
            return new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            }).format(value);
        }

        // Helper: Ubah Huruf Kapital API menjadi Title Case (Huruf Besar Awal Kata)
        // Contoh: "PENERIMAAN OPERASIONAL" -> "Penerimaan Operasional"
        function toTitleCase(str) {
            if(!str) return "";
            return str.replace(/\w\S*/g, function(txt){
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            });
        }

        // Helper: Load Data
        function checkAndLoadData() {
            let tahun = $filterTahun.val();
            let bulan = $filterBulan.val();
            if(tahun && bulan) loadReport(tahun, bulan);
        }

        // 2. 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);
                    checkAndLoadData();
                }
            },
            error: function(xhr) { if(xhr.status === 401) window.location.href = "{{ route('masjid-mobile.auth.login') }}"; }
        });

        // 3. Load Filter Bulan
        $.ajax({
            url: "{{ route('masjid-mobile.data.filter-bulan') }}",
            type: 'GET',
            success: function(res) {
                if(res.status && res.data.length > 0) {
                    $filterBulan.empty();
                    let currentMonthInt = new Date().getMonth() + 1; 
                    let selectedValue = "";
                    res.data.forEach(item => {
                        $filterBulan.append(`<option value="${item.bulan}">${item.nama_bulan}</option>`);
                        if(parseInt(item.bulan) == currentMonthInt) selectedValue = item.bulan;
                    });
                    if(selectedValue === "") selectedValue = res.data[0].bulan;
                    $filterBulan.val(selectedValue);
                    checkAndLoadData();
                }
            },
            error: function(xhr) { if(xhr.status === 401) window.location.href = "{{ route('masjid-mobile.auth.login') }}"; }
        });

        $filterTahun.change(function() { checkAndLoadData(); });
        $filterBulan.change(function() { checkAndLoadData(); });

        // 4. Load Data & Render
        function loadReport(tahun, bulan) {
            $reportContent.html('<div class="loading-state">Memuat data...</div>');
            let periode = tahun + bulan;

            $.ajax({
                url: "{{ route('masjid-mobile.data.kas-dkm') }}",
                type: 'POST',
                data: { periode: periode },
                success: function(res) {
                    if(res.status) {
                        renderReport(res.data);
                    } else {
                        $reportContent.html('<div class="loading-state">Data tidak ditemukan.</div>');
                    }
                },
                error: function(xhr) {
                     let msg = "Gagal mengambil data.";
                     if(xhr.status === 401) window.location.href = "{{ route('masjid-mobile.auth.login') }}";
                     $reportContent.html(`<div class="loading-state text-danger">${msg}</div>`);
                }
            });
        }

        // 5. Render HTML (Logic Sesuai Mockup)
        function renderReport(data) {
            let html = '';
            
            if(!data || data.length === 0) {
                 $reportContent.html('<div class="loading-state">Data kosong.</div>');
                 return;
            }

            data.forEach(line => {
                let rawNilai = line.nilai;
                let nilaiFormatted = formatRupiah(rawNilai);
                
                // Bersihkan teks (Title Case)
                // Hapus kata "PENERIMAAN" jika dia ada di dalam grup posting agar tidak redundant (Opsional)
                // Disini kita pakai toTitleCase murni
                let cleanNama = toTitleCase(line.nama);

                // --- TIPE 1: HEADER (Box Cream) ---
                if (line.tipe === "Header") {
                    html += `
                        <div class="section-header">
                            <span>${cleanNama}</span>
                            <span>Total</span>
                        </div>
                    `;
                } 
                // --- TIPE 2: SUMMARY TOTAL (Box Emas Gelap) ---
                else if (line.tipe === "Summary") {
                    html += `
                        <div class="summary-box">
                            <span>${cleanNama}</span>
                            <span>${nilaiFormatted}</span>
                        </div>
                    `;
                }
                // --- TIPE 3: POSTING / GROUP (Teks Emas) ---
                else if (line.tipe === "Posting") {
                    // Logic khusus: Kadang API kirim "PENERIMAAN OPERASIONAL", 
                    // Kita mau tampil "Operasional" saja jika di bawah header Penerimaan?
                    // Untuk amannya kita title case kan saja semua.
                    
                    // Buat teks "Penerimaan Operasional" -> "Operasional" (Opsional, sesuaikan kebutuhan)
                    // let displayGroup = cleanNama.replace('Penerimaan ', '').replace('Beban ', ''); 
                    let displayGroup = cleanNama; 

                    html += `
                        <div class="group-row">
                            <span class="group-title">${displayGroup}</span>
                            <span class="group-value">${nilaiFormatted}</span>
                        </div>
                    `;

                    // Render Detail (Anak)
                    if(line.detail && line.detail.length > 0) {
                        line.detail.forEach(det => {
                            // Clean detail name (Hapus kode akun jika ada, atau sekedar Title Case)
                            let detailName = toTitleCase(det.nama_akun);
                            
                            html += `
                                <div class="detail-row">
                                    <span class="detail-name">${detailName}</span>
                                    <span class="detail-value">${formatRupiah(det.nilai)}</span>
                                </div>
                            `;
                        });
                    }
                }
            });

            $reportContent.html(html);
        }
    });
</script>
@endpush