{{-- resources/views/yayasan/laporan/arus-kas/index.blade.php --}}

@extends('layouts.app') {{-- Pastikan ini mengacu ke layout utama Dashlite Anda --}}

@section('title', 'Laporan Arus Kas Yayasan Pendidikan')

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="nk-block-head nk-block-head-sm">
                <div class="nk-block-between">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title page-title">Laporan Arus Kas</h3>
                        <div class="nk-block-des text-soft">
                            <p>Menampilkan pergerakan kas yayasan dari aktivitas operasi, investasi, dan pendanaan.</p>
                        </div>
                    </div><div class="nk-block-head-content">
                        <div class="toggle-wrap nk-block-tools-toggle">
                            <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                            <div class="toggle-expand-content" data-content="pageMenu">
                                <ul class="nk-block-tools g-3">
                                    <li><a data-export-kind="pdf" data-export-url="{{ route('yayasan.laporan.arus-kas.export_pdf', ['tahun' => request('tahun', $selectedYear), 'unit_id' => request('unit_id', $unitSelected)]) }}" href="{{ route('yayasan.laporan.arus-kas.export_pdf', ['tahun' => request('tahun', $selectedYear), 'unit_id' => request('unit_id', $unitSelected)]) }}" class="btn btn-white btn-dim btn-outline-light"><em class="icon ni ni-file-pdf"></em><span>Export PDF</span></a></li>
                                    <li><a data-export-kind="excel" data-export-url="{{ route('yayasan.laporan.arus-kas.export_excel', ['tahun' => request('tahun', $selectedYear), 'unit_id' => request('unit_id', $unitSelected)]) }}" href="{{ route('yayasan.laporan.arus-kas.export_excel', ['tahun' => request('tahun', $selectedYear), 'unit_id' => request('unit_id', $unitSelected)]) }}" class="btn btn-white btn-dim btn-outline-light"><em class="icon ni ni-file-docs"></em><span>Export Excel</span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nk-block">
                {{-- Filter Section --}}
                <div class="card card-bordered mb-4">
                    <div class="card-inner">
                        <form id="arus-kas-filter-form" method="GET" action="{{ route('yayasan.laporan.arus-kas.index') }}">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label" for="tahun">Tahun</label>
                                        <div class="form-control-wrap">
                                            <select class="form-select js-select2" id="tahun" name="tahun">
                                                @foreach ($years as $year)
                                                <option value="{{ $year }}" {{ request('tahun', $selectedYear) == $year ? 'selected' : '' }}>
                                                    Tahun {{ $year }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label" for="unit">Unit</label>
                                        <div class="form-control-wrap">
                                            <select class="form-select js-select2" id="unit" name="unit_id">
                                                <option value="">-- Semua Unit --</option>
                                                @foreach ($units as $unit)
                                                <option value="{{ $unit->kode_unit }}" {{ request('unit_id', $unitSelected) == $unit->kode_unit ? 'selected' : '' }}>
                                                    {{ $unit->nama_unit }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary w-100"><em class="icon ni ni-filter me-1"></em> Tampilkan</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Report Table --}}
                <div class="card card-preview" id="arus-kas-report-container">
                    <div id="arus-kas-report-loading" class="card-inner">
                        <div class="d-flex align-items-center justify-content-center py-5 text-soft">
                            <div class="spinner-border me-2" role="status" aria-hidden="true"></div>
                            <span>Memuat laporan arus kas...</span>
                        </div>
                    </div>
                    <div id="arus-kas-report"></div>
                </div>
            </div>    
    </div>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        const reportRoot = document.getElementById('arus-kas-report');
        const loadingState = document.getElementById('arus-kas-report-loading');
        const filterForm = document.getElementById('arus-kas-filter-form');
        const dataUrl = '{{ route('yayasan.laporan.arus-kas.data') }}';

        function syncExportLinks(params) {
            document.querySelectorAll('[data-export-url]').forEach((link) => {
                const exportUrl = new URL(link.dataset.exportUrl, window.location.origin);
                const tahun = params.get('tahun');
                const unitId = params.get('unit_id');

                if (tahun) {
                    exportUrl.searchParams.set('tahun', tahun);
                } else {
                    exportUrl.searchParams.delete('tahun');
                }

                if (unitId) {
                    exportUrl.searchParams.set('unit_id', unitId);
                } else {
                    exportUrl.searchParams.delete('unit_id');
                }

                link.href = exportUrl.toString();
            });
        }

        function loadReport() {
            const formData = filterForm ? new FormData(filterForm) : new FormData();
            const params = new URLSearchParams();

            for (const [key, value] of formData.entries()) {
                if (value !== '') {
                    params.set(key, value);
                }
            }

            syncExportLinks(params);

            const queryString = params.toString();
            const url = queryString ? `${dataUrl}?${queryString}` : dataUrl;

            if (window.history && window.history.replaceState) {
                const nextUrl = new URL(window.location.href);
                nextUrl.search = queryString;
                window.history.replaceState({}, '', nextUrl);
            }

            loadingState.hidden = false;
            reportRoot.innerHTML = '';

            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'text/html'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Request failed');
                }
                return response.text();
            })
            .then(html => {
                reportRoot.innerHTML = html;
                loadingState.hidden = true;
            })
            .catch(() => {
                reportRoot.innerHTML = '<div class="alert alert-danger m-3">Gagal memuat laporan arus kas. Silakan coba lagi.</div>';
                loadingState.hidden = true;
            });
        }

        if (filterForm) {
            filterForm.addEventListener('submit', function (event) {
                event.preventDefault();
                loadReport();
            });
        }

        loadReport();
    })();
</script>
@endpush