webstatement/resources/views/laporan-closing-balance/index.blade.php

@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render('laporan-closing-balance.index') }}
@endsection

@section('content')
    <div class="grid">
        <div class="min-w-full card card-grid" data-datatable="false" data-datatable-page-size="10"
            data-datatable-state-save="false" id="laporan-closing-balance-table"
            data-api-url="{{ route('laporan-closing-balance.datatables') }}">
            <div class="flex-wrap py-5 card-header">
                <h3 class="card-title">
                    Laporan Closing Balance
                </h3>
                <div class="flex flex-wrap gap-2 lg:gap-5">
                    <!-- Filter Form -->
                    <div class="flex flex-wrap gap-2.5 items-end">
                        <!-- Nomor Rekening Filter -->
                        <div class="flex flex-col">
                            <input type="text" id="account-number-filter" class="input w-[200px]"
                                placeholder="Masukkan nomor rekening">
                        </div>

                        <!-- Tanggal Mulai Filter -->
                        <div class="flex flex-col">
                            <input type="date" id="start-date-filter" class="input w-[150px]">
                        </div>

                        <!-- Tanggal Akhir Filter -->
                        <div class="flex flex-col">
                            <input type="date" id="end-date-filter" class="input w-[150px]">
                        </div>

                        <!-- Tombol Filter -->
                        <button type="button" id="apply-filter" class="btn btn-primary">
                            <i class="ki-filled ki-magnifier"></i>
                            Filter
                        </button>

                        <!-- Tombol Reset -->
                        <button type="button" id="reset-filter" class="btn btn-light">
                            <i class="ki-filled ki-arrows-circle"></i>
                            Reset
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="scrollable-x-auto">
                    <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
                        data-datatable-table="true">
                        <thead>
                            <tr>
                                <th class="w-14">
                                    <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
                                </th>
                                <th class="min-w-[200px]" data-datatable-column="account_number">
                                    <span class="sort">
                                        <span class="sort-label">Nomor Rekening</span>
                                        <span class="sort-icon"></span>
                                    </span>
                                </th>
                                <th class="min-w-[150px]" data-datatable-column="period">
                                    <span class="sort">
                                        <span class="sort-label">Periode</span>
                                        <span class="sort-icon"></span>
                                    </span>
                                </th>
                                <th class="min-w-[150px]" data-datatable-column="updated_at">
                                    <span class="sort">
                                        <span class="sort-label">Tanggal Update</span>
                                        <span class="sort-icon"></span>
                                    </span>
                                </th>
                                <th class="min-w-[100px] text-center" data-datatable-column="actions">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div
                    class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
                    <div class="flex gap-2 items-center">
                        Show
                        <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"></select> per page
                    </div>
                    <div class="flex gap-4 items-center">
                        <span data-datatable-info="true"></span>
                        <div class="pagination" data-datatable-pagination="true">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        /**
         * Fungsi untuk memformat angka menjadi format mata uang
         * @param {number} amount - Jumlah yang akan diformat
         * @returns {string} - String yang sudah diformat
         */
        function formatCurrency(amount) {
            return new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 2
            }).format(amount);
        }

        /**
         * Fungsi untuk memformat periode dari format YYYYMMDD ke format yang lebih readable
         * @param {string} period - Periode dalam format YYYYMMDD
         * @returns {string} - Periode yang sudah diformat
         */
        function formatPeriod(period) {
            if (!period || period.length !== 8) return period;

            const year = period.substring(0, 4);
            const month = period.substring(4, 6);
            const day = period.substring(6, 8);

            return `${day}/${month}/${year}`;
        }

        /**
         * Fungsi untuk memformat tanggal
         * @param {string} dateString - String tanggal
         * @returns {string} - Tanggal yang sudah diformat
         */
        function formatDate(dateString) {
            if (!dateString) return '-';

            const date = new Date(dateString);
            return date.toLocaleDateString('id-ID', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }
    </script>
    <script type="module">
        const element = document.querySelector('#laporan-closing-balance-table');
        const accountNumberFilter = document.getElementById('account-number-filter');
        const startDateFilter = document.getElementById('start-date-filter');
        const endDateFilter = document.getElementById('end-date-filter');
        const applyFilterBtn = document.getElementById('apply-filter');
        const resetFilterBtn = document.getElementById('reset-filter');
        const exportBtn = document.getElementById('export-btn');

        const apiUrl = element.getAttribute('data-api-url');

        // Set default date range (last 30 days) SEBELUM inisialisasi DataTable
        const today = new Date();
        const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));

        endDateFilter.value = today.toISOString().split('T')[0];
        startDateFilter.value = thirtyDaysAgo.toISOString().split('T')[0];

        // Prepare initial filters
        let initialFilters = {
            start_date: startDateFilter.value,
            end_date: endDateFilter.value
        };

        // Konfigurasi DataTable dengan filter awal
        const dataTableOptions = {
            apiEndpoint: apiUrl,
            pageSize: 10,
            searchParams: initialFilters, // Set filter awal di sini
            columns: {
                select: {
                    render: (item, data, context) => {
                        const checkbox = document.createElement('input');
                        checkbox.className = 'checkbox checkbox-sm';
                        checkbox.type = 'checkbox';
                        checkbox.value = data.id ? data.id.toString() : '';
                        checkbox.setAttribute('data-datatable-row-check', 'true');
                        return checkbox.outerHTML.trim();
                    },
                },
                account_number: {
                    title: 'Nomor Rekening',
                    render: (item, data) => {
                        return `<span class="font-medium">${data.account_number || '-'}</span>`;
                    }
                },
                period: {
                    title: 'Periode',
                    render: (item, data) => {
                        return `<span class="text-gray-700">${formatPeriod(data.period)}</span>`;
                    }
                },
                updated_at: {
                    title: 'Tanggal Update',
                    render: (item, data) => {
                        return `<span class="text-sm text-gray-600">${formatDate(data.created_at)}</span>`;
                    }
                },
                actions: {
                    title: 'Action',
                    render: (item, data) => {
                        const downloadUrl =
                            `{{ route('laporan-closing-balance.download', ['accountNumber' => '__ACCOUNT__', 'period' => '__PERIOD__']) }}`
                            .replace('__ACCOUNT__', data.account_number)
                            .replace('__PERIOD__', data.period);

                        return `<div class="flex flex-nowrap justify-center">
                            <a class="btn btn-sm btn-icon btn-clear btn-success"
                               href="${downloadUrl}"
                               title="Download Laporan"
                               download>
                                <i class="ki-outline ki-file-down"></i>
                            </a>
                        </div>`;
                    },
                }
            },
        };

        // Inisialisasi DataTable dengan filter awal sudah terset
        let dataTable = new KTDataTable(element, dataTableOptions);

        // Update export URL dengan filter awal
        updateExportUrl(initialFilters);

        /**
         * Fungsi untuk menerapkan filter
         */
        function applyFilters() {
            let filters = {};

            if (accountNumberFilter.value.trim()) {
                filters.account_number = accountNumberFilter.value.trim();
            }

            if (startDateFilter.value) {
                filters.start_date = startDateFilter.value;
            }

            if (endDateFilter.value) {
                filters.end_date = endDateFilter.value;
            }

            console.log('Applying filters:', filters);
            dataTable.search(filters);

            // Update export URL dengan filter
            updateExportUrl(filters);
        }

        /**
         * Fungsi untuk mereset filter
         */
        function resetFilters() {
            accountNumberFilter.value = '';
            startDateFilter.value = '';
            endDateFilter.value = '';

            dataTable.search({});
            updateExportUrl({});
        }

        /**
         * Fungsi untuk update URL export dengan parameter filter
         */
        function updateExportUrl(filters) {
            const baseUrl = '{{ route('laporan-closing-balance.export') }}';
            const params = new URLSearchParams();

            Object.keys(filters).forEach(key => {
                if (filters[key]) {
                    params.append(key, filters[key]);
                }
            });

            const newUrl = params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
            exportBtn.href = newUrl;
        }

        // Event listeners
        applyFilterBtn.addEventListener('click', applyFilters);
        resetFilterBtn.addEventListener('click', resetFilters);

        // Auto apply filter saat enter di input
        [accountNumberFilter, startDateFilter, endDateFilter].forEach(input => {
            input.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    applyFilters();
                }
            });
        });

        // HAPUS bagian ini yang menyebabkan double API call:
        // setTimeout(() => {
        //     applyFilters();
        // }, 100);
    </script>
@endpush