@extends('webview.masjid.main')

@push('style')
<link rel="stylesheet" href="{{ route('masjid-mobile.sho.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">
        Laporan SHO
    </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</div>
    </div>
</div>
@endsection

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

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

        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);
        }

        function toTitleCase(str) {
            if(!str) return "";
            return str.replace(/\w\S*/g, function(txt){ return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
        }

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

        // Reuse Filter Routes (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') }}"; }
        });

        // Reuse Filter Routes (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(); });

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

            $.ajax({
                url: "{{ route('masjid-mobile.data.sho') }}",
                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>`);
                }
            });
        }

        // --- UPDATE: LOGIC RENDER HIERARKI ---
        function renderReport(data) {
            let html = '';
            
            if(!data || data.length === 0) {
                 $reportContent.html('<div class="loading-state">Data kosong.</div>');
                 return;
            }

            data.forEach(line => {
                let nilaiFormatted = formatRupiah(line.nilai);
                let cleanNama = toTitleCase(line.nama);

                // 1. HEADER (Box Cream)
                if (line.tipe === "Header") {
                    html += `
                        <div class="section-header">
                            <span>${cleanNama}</span>
                            <span>Total</span>
                        </div>
                    `;
                } 
                // 2. SUMMARY (Box Emas) - Misal: Total SHO
                else if (line.tipe === "Summary") {
                    html += `
                        <div class="summary-box">
                            <span>${cleanNama}</span>
                            <span>${nilaiFormatted}</span>
                        </div>
                    `;
                }
                // 3. POSTING / GROUP (Teks Emas)
                else if (line.tipe === "Posting") {
                    html += `
                        <div class="group-row">
                            <span class="group-title">${cleanNama}</span>
                            <span class="group-value">${nilaiFormatted}</span>
                        </div>
                    `;

                    // Render Detail (Jika API mengirimkan detail)
                    if(line.detail && line.detail.length > 0) {
                        line.detail.forEach(det => {
                            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