@extends('layouts.app')

@section('content')
<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">Daftar Ajuan Pengeluaran Kas</h3>
            <div class="nk-block-des text-soft">
                <p>Manajemen data transaksi pengeluaran kas.</p>
            </div>
        </div>
    </div>
</div>

{{-- Tombol Aksi --}}

<div class="mb-3 d-flex gap-2">
    @if(Auth::check() && (Auth::user()->role_id === 2 || Auth::user()->role_id === 1))
    <div class="col-auto">
        {{-- Kita bungkus tetap dengan form untuk mengambil URL dan CSRF Token --}}
        <form id="syncForm" action="{{ route('yayasan.transaksi.pengeluaran-kas.sync') }}" method="POST">
            @csrf
            {{-- Tombol diubah menjadi type="button" agar tidak reload halaman secara default --}}
            <button id="syncDataBtn" type="button" class="btn btn-info">
                <em class="icon ni ni-reload"></em>
                <span>Sinkronisasi Data</span>
            </button>
            <span id="syncStatus" class="text-muted ms-2" style="display:none;"></span>
        </form>
    </div>
    <div class="col-auto">
        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <em class="icon ni ni-plus"></em>
                <span>Tambah Baru</span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="{{ route('yayasan.transaksi.pengeluaran-kas.create') }}">Pengeluaran Umum</a></li>
                <li><a class="dropdown-item" href="{{ url('/yayasan/transaksi/pengeluaran-kas-gaji') }}">Gaji Karyawan</a></li>
            </ul>
        </div>
    </div>
    @endif
    {{-- Filter Bulan --}}
    <div class="col-auto">
        <select id="filterBulan" class="form-select">
            <option value="">-- Semua Bulan --</option>
            <option value="01">Januari</option>
            <option value="02">Februari</option>
            <option value="03">Maret</option>
            <option value="04">April</option>
            <option value="05">Mei</option>
            <option value="06">Juni</option>
            <option value="07">Juli</option>
            <option value="08">Agustus</option>
            <option value="09">September</option>
            <option value="10">Oktober</option>
            <option value="11">November</option>
            <option value="12">Desember</option>
        </select>
    </div>
    {{-- Filter Unit --}}
    <div class="col-auto">
        <select id="filterUnit" class="form-select">
            <option value="">-- Semua Unit --</option>
            @foreach($units as $unit)
                <option value="{{ $unit->kode_unit }}">{{ $unit->nama_unit }}</option>
            @endforeach
        </select>
    </div>
    {{-- Input Search --}}
    <div class="col-auto flex-grow-1">
        <input type="text" id="searchInput" class="form-control" placeholder="Cari transaksi...">
    </div>
</div>

{{-- TAB STATUS (Semua diubah ke <a>) --}}
<ul class="nav nav-tabs mb-3" id="statusTabs" role="tablist">
    <li class="nav-item">
        <a href="#" class="nav-link active" data-status="">Semua</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link" data-status="draft">Draft</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link" data-status="process">Proses</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link" data-status="approval">Disetujui</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link" data-status="reject">Ditolak</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link" data-status="revision">Revisi</a>
    </li>
</ul>

{{-- CONTAINER UNTUK TABEL AJAX --}}
<div class="card card-preview">
    <div class="card-inner border-bottom">
        <div class="card-title-group">
            <div class="card-title">
                <h5 class="title">Riwayat Pengeluaran Kas</h5>
            </div>
        </div>
    </div>
    <div id="table-container" class="card-inner p-0">
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{{-- Sertakan SweetAlert2 untuk notifikasi --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function () {
    // Debug info
    console.log('Document ready - initializing components');

    /**
     * Fungsi untuk memuat data tabel via AJAX
     * @param {string} status - Status filter (draft, process, dll)
     * @param {string} search - Keyword pencarian
     * @param {number} page - Nomor halaman (untuk paginasi)
     */
    function loadTable(status = '', search = '', page = 1) { // Tambahkan parameter page
        let bulan = $('#filterBulan').val();
        let unit = $('#filterUnit').val();
        
        $('#table-container').html(`
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        `);

        $.get("{{ route('yayasan.transaksi.pengeluaran-kas.list') }}", { 
            status: status, 
            search: search,
            page: page, // Kirim parameter halaman
            bulan: bulan,
            unit: unit
        }, function (data) {
            $('#table-container').html(data);
        }).fail(function(xhr, status, error) {
            console.error('Error loading table:', error);
            $('#table-container').html('<div class="alert alert-danger">Gagal memuat data tabel. Silakan coba lagi.</div>');
        });
    }

    // --- LOGIKA 1: TAB STATUS (Menggunakan <a>) ---
    $(document).on('click', '#statusTabs .nav-link', function (e) {
        e.preventDefault();
        e.stopPropagation();
        
        // Atur status aktif pada tab
        $('#statusTabs .nav-link').removeClass('active');
        $(this).addClass('active');
        
        let status = $(this).data('status') || '';
        let searchKeyword = $('#searchInput').val();
        
        // Muat ulang tabel (reset halaman ke 1)
        loadTable(status, searchKeyword, 1); 
    });

    // --- LOGIKA 1.5: FILTER DROPDOWN ---
    $('#filterBulan, #filterUnit').on('change', function() {
        let activeTab = $('#statusTabs .nav-link.active');
        let status = activeTab.length ? activeTab.data('status') : '';
        let searchKeyword = $('#searchInput').val();
        loadTable(status, searchKeyword, 1);
    });

    // --- LOGIKA 2: SEARCH INPUT ---
    let typingTimer;
    let doneTypingInterval = 300;

    $('#searchInput').on('keyup', function() {
        clearTimeout(typingTimer);
        let keyword = $(this).val();
        typingTimer = setTimeout(function() {
            let activeTab = $('#statusTabs .nav-link.active');
            let status = activeTab.length ? activeTab.data('status') : '';
            // Muat ulang tabel (reset halaman ke 1)
            loadTable(status, keyword, 1); 
        }, doneTypingInterval);
    });

    // --- LOGIKA 3: PAGINASI AJAX BARU (PERBAIKAN CSS HILANG) ---
    // Gunakan 'document' karena tautan paginasi dimuat ulang oleh AJAX
    $(document).on('click', '#table-container .pagination a', function(e) {
        e.preventDefault();
        
        // Ambil URL lengkap dari link yang diklik (misal: ...list?page=2)
        const url = $(this).attr('href');
        
        // Ekstrak nomor halaman dari URL
        const pageMatch = url.match(/page=(\d+)/); 
        const page = pageMatch ? pageMatch[1] : 1; 
        
        // Ambil status dan keyword yang sedang aktif
        let activeTab = $('#statusTabs .nav-link.active');
        let status = activeTab.length ? activeTab.data('status') : '';
        let searchKeyword = $('#searchInput').val();

        // Muat ulang tabel dengan parameter yang ada dan nomor halaman baru
        loadTable(status, searchKeyword, page); 
        
        // Opsional: Gulir ke atas tabel (agar user melihat awal tabel)
        $('html, body').animate({
            scrollTop: $("#table-container").offset().top - 50 
        }, 300);
    });
    // --- AKHIR LOGIKA PAGINASI AJAX BARU ---

    // --- LOGIKA 4: SINKRONISASI AJAX ---
    $('#syncDataBtn').on('click', async function(e) {
        e.preventDefault();
        const $btn = $(this);
        const $form = $('#syncForm');
        const url = $form.attr('action');
        const csrfToken = $form.find('input[name="_token"]').val();
        const $status = $('#syncStatus');
        let limit = 50;
        let offset = 0;
        
        const originalText = $btn.html();

        Swal.fire({
            title: 'Konfirmasi Sinkronisasi',
            text: "Anda yakin ingin menjalankan proses sinkronisasi data? Proses ini mungkin membutuhkan waktu.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, Sinkronisasi',
            cancelButtonText: 'Batal',
            customClass: {
                confirmButton: 'btn btn-info',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        }).then(async (result) => {
            if (result.isConfirmed) {
                $btn.attr('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Memproses...');
                $status.show().text('Memulai sinkronisasi...');
                try {
                    while (true) {
                        $status.text(`Memproses offset ${offset} (limit ${limit})...`);
                        const resp = await $.ajax({
                            url: url,
                            type: 'POST',
                            headers: { 'X-CSRF-TOKEN': csrfToken },
                            contentType: 'application/json',
                            data: JSON.stringify({ limit, offset }),
                            dataType: 'json',
                            timeout: 180000
                        });
                        if (resp.success === false) {
                            throw new Error(resp.message || 'Gagal sinkronisasi');
                        }
                        const total = resp.total ?? 0;
                        const processed = resp.processed ?? 0;
                        const nextOffset = resp.next_offset;
                        $status.text(`Total: ${total}, Diproses: ${processed}, Next Offset: ${nextOffset ?? '-'}.`);
                        if (nextOffset === null) break;
                        offset = nextOffset;
                    }
                    Swal.fire('Sukses!', 'Sinkronisasi selesai.', 'success');
                    loadTable($('#statusTabs .nav-link.active').data('status') || '', $('#searchInput').val(), 1);
                } catch (e) {
                    Swal.fire('Gagal!', e.message || 'Terjadi kesalahan saat sinkronisasi.', 'error');
                } finally {
                    $btn.attr('disabled', false).html(originalText);
                    $status.hide();
                }
            }
        });
    });
    // --- AKHIR LOGIKA SINKRONISASI AJAX ---

    // Initial load
    loadTable();
});
</script>
@endpush