@extends('webview.saku.main')

@push('style')
    <link rel="stylesheet" href="{{ route('saku-mobile.saldo-kas.css') }}" />
@endpush

@section('content')
    <div class="header">
        <a href="{{ route('saku-mobile.page.home') }}" class="btn-link">
            <img alt="angle-left" src="{{ asset('asset-webview/saku/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/saku/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')
                },
                xhrFields: {
                    withCredentials: true // <--- HANYA TAMBAH BARIS INI
                }
            });

            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('saku-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('saku-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('saku-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/saku/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