@extends('layouts.main')

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

@section('content')
    <div class="grid">
        <div class="card card-grid min-w-full" 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="card-header py-5 flex-wrap">
                <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">
                            <label class="text-sm font-medium text-gray-700 mb-1">Nomor Rekening</label>
                            <input type="text" id="account-number-filter" class="input w-[200px]" placeholder="Masukkan nomor rekening">
                        </div>
                        
                        <!-- Tanggal Mulai Filter -->
                        <div class="flex flex-col">
                            <label class="text-sm font-medium text-gray-700 mb-1">Tanggal Mulai</label>
                            <input type="date" id="start-date-filter" class="input w-[150px]">
                        </div>
                        
                        <!-- Tanggal Akhir Filter -->
                        <div class="flex flex-col">
                            <label class="text-sm font-medium text-gray-700 mb-1">Tanggal Akhir</label>
                            <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 class="flex flex-wrap gap-2.5">
                        <div class="h-[24px] border border-r-gray-200"></div>
                        <a class="btn btn-light" href="{{ route('laporan-closing-balance.export') }}" id="export-btn">
                            <i class="ki-filled ki-file-down"></i>
                            Export to CSV
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="scrollable-x-auto">
                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" 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="cleared_balance">
                                <span class="sort">
                                    <span class="sort-label">Saldo Cleared</span>
                                    <span class="sort-icon"></span>
                                </span>
                            </th>
                            <th class="min-w-[150px]" data-datatable-column="actual_balance">
                                <span class="sort">
                                    <span class="sort-label">Saldo Akhir</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="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
                    <div class="flex items-center gap-2">
                        Show
                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"></select> per page
                    </div>
                    <div class="flex items-center gap-4">
                        <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');
        
        // Konfigurasi DataTable
        const dataTableOptions = {
            apiEndpoint: apiUrl,
            pageSize: 10,
            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>`;
                    }
                },
                cleared_balance: {
                    title: 'Saldo Cleared',
                    render: (item, data) => {
                        const amount = parseFloat(data.cleared_balance) || 0;
                        return `<span class="text-blue-600 font-medium">${formatCurrency(amount)}</span>`;
                    }
                },
                actual_balance: {
                    title: 'Saldo Akhir',
                    render: (item, data) => {
                        const amount = parseFloat(data.actual_balance) || 0;
                        return `<span class="text-green-600 font-medium">${formatCurrency(amount)}</span>`;
                    }
                },
                updated_at: {
                    title: 'Tanggal Update',
                    render: (item, data) => {
                        return `<span class="text-gray-600 text-sm">${formatDate(data.updated_at)}</span>`;
                    }
                },
                actions: {
                    title: 'Action',
                    render: (item, data) => {
                        return `<div class="flex flex-nowrap justify-center">
                            <a class="btn btn-sm btn-icon btn-clear btn-info" 
                               href="{{ route('laporan-closing-balance.show', ['accountNumber' => '__ACCOUNT__', 'period' => '__PERIOD__']) }}"
                               .replace('__ACCOUNT__', data.account_number)
                               .replace('__PERIOD__', data.period)
                               title="Lihat Detail">
                                <i class="ki-outline ki-eye"></i>
                            </a>
                        </div>`;
                    },
                }
            },
        };

        // Inisialisasi DataTable
        let dataTable = new KTDataTable(element, dataTableOptions);
        dataTable.showSpinner();

        /**
         * 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();
                }
            });
        });

        // Set default date range (last 30 days)
        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];
        
        // Apply default filter
        setTimeout(() => {
            applyFilters();
        }, 100);
    </script>
@endpush