@extends('layouts.app')

@section('content')
{{-- Page Title --}}
<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>

{{-- TAB STATUS --}}
<ul class="nav nav-tabs mb-4" id="statusTabs" role="tablist">
    <li class="nav-item"><button class="nav-link active" data-status="">Semua</button></li>
    <li class="nav-item"><button class="nav-link" data-status="draft">Draft</button></li>
    <li class="nav-item"><button class="nav-link" data-status="process">Proses</button></li>
    <li class="nav-item"><button class="nav-link" data-status="approval">Disetujui</button></li>
    <li class="nav-item"><button class="nav-link" data-status="reject">Ditolak</button></li>
    <li class="nav-item"><button class="nav-link" data-status="revision">Revisi</button></li>
</ul>

{{-- MAIN CARD --}}
<div class="card card-preview">
    <div class="card-inner border-bottom">
        <div class="card-title-group">
            <div class="card-title">
                <h5 class="title">Riwayat Ajuan</h5>
            </div>
            <div class="card-tools">
                <div class="form-control-wrap">
                    <div class="form-icon form-icon-left">
                        <em class="icon ni ni-search"></em>
                    </div>
                    <input type="text" id="searchInput" class="form-control" placeholder="Cari referensi/deskripsi...">
                </div>
            </div>
        </div>
    </div>
    
    {{-- CONTAINER UNTUK TABEL AJAX --}}
    <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')
<script>
    $(document).ready(function () {
        function loadTable(status = '') {
            $('#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.revisi-ajuan.list') }}", { status: status }, function (data) {
                $('#table-container').html(data);
            });
        }

        let typingTimer;
        let doneTypingInterval = 300;

        $('#searchInput').on('keyup', function() {
            clearTimeout(typingTimer);
            let keyword = $(this).val();
            typingTimer = setTimeout(function() {
                let status = $('#statusTabs .nav-link.active').data('status') || '';
                $.get("{{ route('yayasan.transaksi.revisi-ajuan.list') }}", { 
                    status: status, 
                    search: keyword 
                }, function(data) {
                    $('#table-container').html(data);
                });
            }, doneTypingInterval);
        });

        $('#searchInput').on('keypress', function(e) {
            if(e.which == 13) { 
                clearTimeout(typingTimer);
                $(this).trigger('keyup');
            }
        });


    // Default load
    loadTable();

    // Klik tab status
    $('#statusTabs .nav-link').on('click', function () {
        $('#statusTabs .nav-link').removeClass('active');
        $(this).addClass('active');
        let status = $(this).data('status');
        loadTable(status);
    });

    // Delegasi untuk pagination
    $(document).on('click', '#table-container .pagination a', function(e) {
        e.preventDefault();
        let url = $(this).attr('href');
        $.get(url, function(data) {
            $('#table-container').html(data);
        });
    });
});
</script>
@endpush