@extends('layout.dashboard.index')

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    <h2>Detail Realisasi Anggaran</h2>
                </div>
                <div class="card-toolbar">
                    <a href="{{ route('budget-actual') }}" class="btn btn-sm btn-secondary"><i class="bi bi-chevron-left"></i> Kembali</a>
                </div>
            </div>
            <div class="card-body">
                <div id="kt_table_users_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                    <div class="table-responsive">
                        <div id="custom-loading"
                            class="position-absolute top-0 start-0 w-100 h-100 
                                d-flex justify-content-center align-items-center"
                            style="background: rgba(255,255,255,0.8); z-index: 10;">

                            <div class="text-center">
                                <div class="spinner-border text-primary" style="width:1rem;height:1rem;"></div>
                                <div class="mt-3 fw-semibold text-gray-700">
                                    Memuat data...
                                </div>
                            </div>
                        </div>
                        <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer" id="table">
                            <!--begin::Table head-->
                            <thead>
                                <tr class="">
                                    <th>Tahun</th>
                                    <th>Departemen</th>
                                    <th>Tanggal</th>
                                    <th>Aktivitas</th>
                                    <th>Nominal</th>
                                    <th>Sisa Anggaran</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-bold">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            const match = window.location.pathname.match(
                /budget-actual\/(\d+)\/(\d+)\/(\d+)\/([a-z0-9-]+)/
            );

            if (match) {
                const year = match[1];
                const month = match[2];
                const division = match[3];
                const slug = match[4];

                var table = $('#table').DataTable({
                    processing: false,
                    serverSide: true,
                    dom: 'rtip',
                    ajax: {
                        url: "{{ route('budget-actual.datatable-detail') }}",
                        data: function(d) {
                            d.year = year;
                            d.month = month;
                            d.division = division;
                            d.slug = slug;
                        }
                    },
                    columns: [{
                            data: 'year',
                            name: 'year'
                        },
                        {
                            data: 'division_name',
                            name: 'division_name'
                        },
                        {
                            data: 'transaction_date_format',
                            name: 'transaction_date'
                        },
                        {
                            data: 'item_name',
                            name: 'item_name'
                        },
                        {
                            data: 'amount_format',
                            name: 'amount',
                            className: 'text-end'
                        },
                        {
                            data: 'balance_format',
                            name: 'balance',
                            className: 'text-end'
                        }
                    ],
                    pageLength: 10,
                    responsive: true,
                    drawCallback: function() {
                        $('#custom-loading').hide();
                    }
                });

                table.on('processing.dt', function(e, settings, processing) {
                    if (processing) {
                        $('#custom-loading').removeClass('d-none');
                    } else {
                        $('#custom-loading').addClass('d-none');
                    }
                });
            }
        });
    </script>
@endsection