@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.saldo-kas') }}" class="btn-link">
        <img alt="angle-left" src="{{ asset('asset-webview/masjid/icons/arrow-left.png') }}" height="24" width="24">
        Detail Saldo Kas
    </a>
</div>

<div class="body">
    <div class="summary-card-gold mt-3">
        <div class="sc-label" id="label-saldo">Saldo Kas ...</div>
        <div class="sc-value" id="val-saldo">Rp0</div>
        <div class="sc-note">Untuk Informasi lebih lanjut hubungi Bendahara.</div>
    </div>

    <div class="account-info-text mt-3 mb-2">
        <div>Tahun: <span id="txt-tahun" class="font-bold">-</span></div>
        <div>Akun: <span id="txt-akun" class="font-bold">-</span></div>
    </div>

    <div id="transaction-list" class="transaction-list">
        </div>

    <div class="text-center my-3" id="btn-load-more-container" style="display:none;">
        <button class="btn-load-more" id="btn-load-more">Load More</button>
    </div>
</div>

<div id="bottom-sheet-overlay" class="bs-overlay" style="display:none;"></div>
<div id="bottom-sheet" class="bs-content">
    <div class="bs-header">
        <span>Preview Dokumen</span>
        <span class="bs-close" id="bs-close">&times;</span>
    </div>
    <div class="bs-body" id="bs-body-content">
        </div>
</div>
@endsection

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

        // Ambil Parameter dari URL
        const urlParams = new URLSearchParams(window.location.search);
        const tahun = urlParams.get('tahun');
        const kode_akun = urlParams.get('kode_akun');
        
        let currentPage = 1;

        if(!tahun || !kode_akun) {
            alert("Parameter tidak lengkap!");
            window.location.href = "{{ route('masjid-mobile.page.saldo-kas') }}";
            return;
        }

        $('#txt-tahun').text(tahun);
        
        function formatRupiah(angka) {
            return new Intl.NumberFormat('id-ID', { minimumFractionDigits: 0 }).format(parseFloat(angka));
        }

        // 1. Load Header Saldo
        function loadHeader() {
            $.ajax({
                url: "{{ route('masjid-mobile.data.saldo-kas.header') }}",
                type: 'POST',
                data: { tahun: tahun, kode_akun: kode_akun },
                success: function(res) {
                    if(res.data && res.data.length > 0) {
                        let data = res.data[0];
                        $('#txt-akun').text(res.kode_akun + " - " + res.nama_akun);
                        $('#label-saldo').text("Saldo Kas " + tahun);
                        $('#val-saldo').text(formatRupiah(data.saldo));
                    }
                }
            });
        }

        // 2. Load Mutasi (Rincian)
        function loadMutasi(page) {
            if(page == 1) $('#transaction-list').html('<div class="loading-state">Memuat transaksi...</div>');
            
            $.ajax({
                url: "{{ route('masjid-mobile.data.saldo-kas.mutasi') }}",
                type: 'POST',
                data: { tahun: tahun, kode_akun: kode_akun, page: page },
                success: function(res) {
                    if(page == 1) $('#transaction-list').empty();

                    if(res.data && res.data.length > 0) {
                        let html = '';
                        res.data.forEach(item => {
                            // Icon Logic: Debit (Masuk) vs Kredit (Keluar)
                            // Di mjd lama: DC='C' -> Credit (Keluar/Merah), DC='D' -> Debit (Masuk/Hijau)
                            let isKredit = item.dc === 'C';
                            let colorClass = isKredit ? 'text-red' : 'text-green';
                            let iconImg = isKredit ? 'red4.png' : 'green4.png'; 
                            
                            // Dokumen Icon
                            let docHtml = '';
                            if(item.filedok && item.filedok !== '-') {
                                docHtml = `<div class="trans-doc-btn" data-file="${item.filedok}"><img src="{{ asset('asset-webview/masjid/icons/file-icon.png') }}" width="16"></div>`;
                            }

                            html += `
                            <div class="trans-item">
                                <div class="ti-icon">
                                    <img src="{{ asset('asset_dore/icon') }}/${iconImg}" width="36" height="36" class="rounded-circle">
                                </div>
                                <div class="ti-content">
                                    <div class="ti-desc">${item.keterangan}</div>
                                    <div class="ti-meta">
                                        <span>${item.tgl}</span> • <span>${item.no_bukti}</span>
                                    </div>
                                </div>
                                <div class="ti-amount">
                                    <div class="${colorClass}">Rp${formatRupiah(item.nilai)}</div>
                                    ${docHtml}
                                </div>
                            </div>
                            `;
                        });
                        $('#transaction-list').append(html);

                        // Handle Load More
                        if(res.load_more) {
                            $('#btn-load-more-container').show();
                            $('#btn-load-more').data('next-page', page + 1);
                        } else {
                            $('#btn-load-more-container').hide();
                        }
                    } else {
                        if(page == 1) $('#transaction-list').html('<div class="loading-state">Belum ada transaksi</div>');
                        $('#btn-load-more-container').hide();
                    }
                }
            });
        }

        // Init Load
        loadHeader();
        loadMutasi(1);

        // Load More Click
        $('#btn-load-more').click(function() {
            let next = $(this).data('next-page');
            loadMutasi(next);
        });

        // --- Bottom Sheet Logic (Manual Implementation) ---
        $(document).on('click', '.trans-doc-btn', function() {
            let filename = $(this).data('file');
            let ext = filename.split('.').pop().toLowerCase();
            // Ganti kode_lokasi sesuai session backend
            let url = "{{ url('admin-auth/storage-file') }}?kode_lokasi={{ Session::get('masjid_lokasi') }}&folder=kb&filename=" + filename;
            
            let content = '';
            if(ext === 'pdf') {
                content = `<iframe src="${url}" style="width:100%; height:500px; border:none;"></iframe>`;
            } else if (['jpg','jpeg','png'].includes(ext)) {
                content = `<img src="${url}" style="width:100%; height:auto; border-radius:8px;">`;
            } else {
                content = `<div class="text-center p-4">File tidak dapat dipreview. <a href="${url}" target="_blank">Download File</a></div>`;
            }

            $('#bs-body-content').html(content);
            $('#bottom-sheet').addClass('active');
            $('#bottom-sheet-overlay').fadeIn();
        });

        $('#bs-close, #bottom-sheet-overlay').click(function() {
            $('#bottom-sheet').removeClass('active');
            $('#bottom-sheet-overlay').fadeOut();
        });
    });
</script>
@endpush