@extends('webview.masjid.main')

@push('style')
<link rel="stylesheet" href="{{ route('masjid-mobile.saldo-kas.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">
        Saldo Kas
    </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 (Reuse endpoint Kas DKM)
        $.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());
        });

        function loadAccounts(tahun) {
            $listContainer.html('<div class="loading-state">Memuat data...</div>');
            
            $.ajax({
                url: "{{ route('masjid-mobile.data.saldo-kas.list') }}",
                type: 'POST',
                data: { tahun: tahun },
                success: function(res) {
                    if(res.data && res.data.length > 0) {
                        let html = '';
                        res.data.forEach(item => {
                            // URL untuk pindah ke detail, bawa parameter tahun & kode_akun
                            let detailUrl = "{{ route('masjid-mobile.page.saldo-kas.detail') }}?tahun=" + tahun + "&kode_akun=" + item.kode_akun;
                            
                            html += `
                            <a href="${detailUrl}" class="account-card">
                                <div class="ac-icon" style="background-color: ${item.bgcolor || '#fff'}">
                                    <img src="{{ asset('asset_dore/icon') }}/${item.logo}" onerror="this.src='{{ asset('asset-webview/masjid/icons/user-icon.png') }}'" alt="icon">
                                </div>
                                <div class="ac-info">
                                    <div class="ac-title">${item.nama_akun}</div>
                                    <div class="ac-code">${item.kode_akun}</div>
                                    <div class="ac-balance">Rp${formatRupiah(item.saldo)}</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