@extends('layouts.layoutMaster')

@section('title', 'Laporan Buku Besar')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
])
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.47.0/tabler-icons.min.css">
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/select2/select2.js',
])
@endsection

@section('page-style')
<style>
body {
    background-color: #f5f5f9;
}
.card {
    border-radius: 0.75rem;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.filter-card {
    background-color: white;
}
.balance-positive {
    color: #28c76f;
    font-weight: 600;
}
.balance-negative {
    color: #ea5455;
    font-weight: 600;
}
.balance-neutral {
    color: #697a8d;
}
.btn-light {
    background-color: #f8f9fa;
    border-color: #e9ecef;
}
.badge {
    padding: 0.4rem 0.7rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.form-control, .input-group-text {
    padding: 0.5rem 1rem;
}
.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(105, 108, 255, 0.1);
    border-color: #696cff;
}
.table th, .table td {
    padding: 1rem;
    vertical-align: middle;
}
.table thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: #5e6e82;
    border-bottom: 2px solid #e9ecef;
}
.table-responsive {
    border-radius: 0.75rem;
    overflow: hidden;
}
.summary-card {
    border-radius: 0.75rem;
    border: none;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.summary-card .card-body {
    padding: 1.5rem;
}
.rounded-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.text-decoration-none:hover {
    opacity: 0.9;
}
.dropdown-item {
    padding: 0.6rem 1.5rem;
}
.dropdown-item:active, .dropdown-item:focus {
    background-color: rgba(105, 108, 255, 0.1);
    color: #696cff;
}
.btn-outline-light {
    border-width: 2px;
}
.btn-outline-light:hover {
    background-color: rgba(255,255,255,0.2);
}
.btn-outline-primary {
    border-width: 1px;
    font-weight: 500;
}
.search-box {
    transition: all 0.3s;
    max-width: 300px;
}
.search-box:focus-within {
    max-width: 350px;
}
.toggle-btn {
    transition: all 0.2s;
}
.toggle-btn:hover {
    background-color: #e9ecef;
}
.account-name {
    color: #364168;
    font-weight: 600;
}
.sub-account-name {
    color: #555b6d;
}
.list-sub-account-name {
    color: #777;
    font-size: 0.95rem;
}
</style>
@endsection

@section('content')
<div class="container-fluid p-4">
    <!-- Page Header -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4">
        <div>
            <h2 class="fw-bold text-dark mb-1">Laporan Buku Besar</h2>
            <p class="text-muted mb-0">
                <i class="ti ti-calendar-stats text-primary me-2"></i>
                Periode: {{ $startDate->format('d M Y') }} - {{ $endDate->format('d M Y') }}
            </p>
        </div>
        <div class="d-flex mt-3 mt-md-0">
            <a href="" class="btn btn-outline-secondary me-2">
                <i class="ti ti-dashboard me-1"></i> Dashboard
            </a>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="ti ti-download me-1"></i> Ekspor Data
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="exportDropdown">
                    <li><a class="dropdown-item" href="#" id="exportExcel"><i class="ti ti-file-spreadsheet me-2 text-success"></i>Excel</a></li>
                    <li><a class="dropdown-item" href="#" id="exportPdf"><i class="ti ti-file-text me-2 text-danger"></i>PDF</a></li>
                    <li><a class="dropdown-item" href="#" id="exportCsv"><i class="ti ti-table-export me-2 text-primary"></i>CSV</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" id="printLedger"><i class="ti ti-printer me-2 text-info"></i>Print</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Filter Card -->
    <div class="card filter-card mb-4">
        <div class="card-body">
            <form id="filterForm" method="GET" class="row align-items-center">
                <div class="col-md-8">
                    <div class="row g-3">
                        <div class="col-md-5">
                            <label for="start_date" class="form-label text-muted small">Tanggal Awal</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0">
                                    <i class="ti ti-calendar-minus text-primary"></i>
                                </span>
                                <input type="date" name="start_date" id="start_date" value="{{ $startDate->format('Y-m-d') }}" class="form-control border-0 shadow-none">
                            </div>
                        </div>
                        <div class="col-md-5">
                            <label for="end_date" class="form-label text-muted small">Tanggal Akhir</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0">
                                    <i class="ti ti-calendar-plus text-primary"></i>
                                </span>
                                <input type="date" name="end_date" id="end_date" value="{{ $endDate->format('Y-m-d') }}" class="form-control border-0 shadow-none">
                            </div>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="ti ti-filter-check me-1"></i>
                                Filter
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 d-flex justify-content-md-end mt-3 mt-md-0">
                    <button type="button" id="clearFilterButton" class="btn btn-light">
                        <i class="ti ti-refresh me-1"></i>
                        Reset
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Ringkasan Keuangan Cards -->
    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card summary-card bg-primary bg-opacity-10 border-0 h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-icon bg-primary-subtle text-primary me-3">
                            <i class="ti ti-trending-up"></i>
                        </div>
                        <div>
                            <h6 class="mb-1 text-muted">Total Debit</h6>
                            <h3 class="fw-bold text-primary mb-0">{{ rupiah_format($accounts->sum('debit_total'), 0, ',', '.') }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card summary-card bg-info bg-opacity-10 border-0 h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-icon bg-info-subtle text-info me-3">
                            <i class="ti ti-trending-down"></i>
                        </div>
                        <div>
                            <h6 class="mb-1 text-muted">Total Kredit</h6>
                            <h3 class="fw-bold text-info mb-0">{{ rupiah_format($accounts->sum('credit_total'), 0, ',', '.') }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card summary-card bg-success bg-opacity-10 border-0 h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="rounded-icon bg-success-subtle text-success me-3">
                            <i class="ti ti-calculator"></i>
                        </div>
                        <div>
                            <h6 class="mb-1 text-muted">Jumlah Akun</h6>
                            <h3 class="fw-bold text-success mb-0">{{ $accounts->count() }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabel Laporan Buku Besar -->
    <div class="card">
        <div class="card-header bg-primary text-white py-3 d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <i class="ti ti-book fs-4 me-2"></i>
                <h5 class="card-title mb-0">Daftar Akun Buku Besar</h5>
            </div>
            <div class="input-group search-box ms-auto me-3" style="max-width: 300px;">
                <span class="input-group-text bg-white border border-end-0">
                    <i class="ti ti-search text-muted"></i>
                </span>
                <input type="text" id="accountSearch" class="form-control border border-start-0" placeholder="Cari akun...">
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-borderless mb-0" id="ledgerTable">
                    <thead>
                        <tr class="table-light">
                            <th class="text-uppercase">Nama Akun</th>
                            <th class="text-uppercase">Kode</th>
                            <th class="text-uppercase">Tipe</th>
                            <th class="text-end text-uppercase">Debit (Rp)</th>
                            <th class="text-end text-uppercase">Kredit (Rp)</th>
                            <th class="text-end text-uppercase">Saldo (Rp)</th>
                            <th class="text-center text-uppercase">Detail</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($accounts as $account)
                            <!-- Baris Akun Utama -->
                            <tr class="account-row">
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if ($account->subAccounts->count() > 0)
                                        <button type="button" class="btn btn-sm btn-light rounded-circle me-2 toggle-btn toggle-sub-accounts" data-account="{{ $account->id }}">
                                            <i class="ti ti-plus"></i>
                                        </button>
                                        @else
                                        <span class="ms-4"></span>
                                        @endif
                                        <span class="account-name">{{ $account->account_name }}</span>
                                    </div>
                                </td>
                                <td>{{ $account->account_code }}</td>
                                <td>
                                    <span class="badge bg-primary-subtle text-primary">
                                        {{ ucfirst($account->account_type) }}
                                    </span>
                                </td>
                                <td class="text-end fw-semibold">{{ rupiah_format($account->debit_total, 0, ',', '.') }}</td>
                                <td class="text-end fw-semibold">{{ rupiah_format($account->credit_total, 0, ',', '.') }}</td>
                                <td class="text-end fw-semibold
                                    @if($account->balance > 0) balance-positive @elseif($account->balance < 0) balance-negative @else balance-neutral @endif
                                ">
                                    {{ rupiah_format(abs($account->balance), 0, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('reports.ledger.detail', ['accountId' => $account->id, 'start_date' => $startDate->format('Y-m-d'), 'end_date' => $endDate->format('Y-m-d')]) }}" class="btn btn-sm btn-outline-primary rounded-pill">
                                        <i class="ti ti-eye me-1"></i>Detail
                                    </a>
                                </td>
                            </tr>

                            <!-- Baris Sub Akun -->
                            @foreach ($account->subAccounts as $subAccount)
                                <tr class="sub-account-row account-{{ $account->id }}" style="display: none; background-color: #fafbfc;">
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="ms-4"></div>
                                            @if ($subAccount->listSubAccounts->count() > 0)
                                            <button type="button" class="btn btn-sm btn-light rounded-circle me-2 toggle-btn toggle-list-sub-accounts" data-sub-account="{{ $subAccount->id }}">
                                                <i class="ti ti-plus"></i>
                                            </button>
                                            @else
                                            <span class="ms-4"></span>
                                            @endif
                                            <span class="sub-account-name">{{ $subAccount->name }}</span>
                                        </div>
                                    </td>
                                    <td>{{ $subAccount->sub_account_code }}</td>
                                    <td>
                                        <span class="badge bg-secondary-subtle text-secondary">
                                            Sub Akun
                                        </span>
                                    </td>
                                    <td class="text-end fw-medium">{{ rupiah_format($subAccount->debit_total, 0, ',', '.') }}</td>
                                    <td class="text-end fw-medium">{{ rupiah_format($subAccount->credit_total, 0, ',', '.') }}</td>
                                    <td class="text-end fw-medium
                                        @if($subAccount->balance > 0) balance-positive @elseif($subAccount->balance < 0) balance-negative @else balance-neutral @endif
                                    ">
                                        {{ rupiah_format(abs($subAccount->balance), 0, ',', '.') }}
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('reports.ledger.detail', ['accountId' => $account->id, 'subAccountId' => $subAccount->id, 'start_date' => $startDate->format('Y-m-d'), 'end_date' => $endDate->format('Y-m-d')]) }}" class="btn btn-sm btn-outline-primary rounded-pill">
                                            <i class="ti ti-eye me-1"></i>Detail
                                        </a>
                                    </td>
                                </tr>

                                <!-- Baris List Sub Akun -->
                                @foreach ($subAccount->listSubAccounts as $listSubAccount)
                                    <tr class="list-sub-account-row account-{{ $account->id }} sub-account-{{ $subAccount->id }}" style="display: none; background-color: #f8f9fa;">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="ms-5 me-3"></div>
                                                <i class="ti ti-corner-down-right text-muted me-2"></i>
                                                <span class="list-sub-account-name">{{ $listSubAccount->name }}</span>
                                            </div>
                                        </td>
                                        <td><span class="text-muted">-</span></td>
                                        <td>
                                            <span class="badge bg-info-subtle text-info">
                                                Detail
                                            </span>
                                        </td>
                                        <td class="text-end">{{ rupiah_format($listSubAccount->debit_total ?? 0, 0, ',', '.') }}</td>
                                        <td class="text-end">{{ rupiah_format($listSubAccount->credit_total ?? 0, 0, ',', '.') }}</td>
                                        <td class="text-end
                                            @if($listSubAccount->balance > 0) balance-positive @elseif($listSubAccount->balance < 0) balance-negative @else balance-neutral @endif
                                        ">
                                            {{ rupiah_format(abs($listSubAccount->balance ?? 0), 0, ',', '.') }}
                                        </td>
                                        <td class="text-center">
                                            <a href="{{ route('reports.ledger.detail', ['accountId' => $account->id, 'subAccountId' => $subAccount->id, 'listSubAccountId' => $listSubAccount->id, 'start_date' => $startDate->format('Y-m-d'), 'end_date' => $endDate->format('Y-m-d')]) }}" class="btn btn-sm btn-outline-primary rounded-pill">
                                                <i class="ti ti-eye me-1"></i>Detail
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="fw-bold table-light">
                            <td colspan="3" class="text-end">
                                <div class="d-flex align-items-center justify-content-end">
                                    <span class="text-uppercase fw-bold text-dark">TOTAL</span>
                                </div>
                            </td>
                            <td class="text-end fs-5">{{ rupiah_format($accounts->sum('debit_total'), 0, ',', '.') }}</td>
                            <td class="text-end fs-5">{{ rupiah_format($accounts->sum('credit_total'), 0, ',', '.') }}</td>
                            <td class="text-end fs-5">{{ rupiah_format(abs($accounts->sum('balance')), 0, ',', '.') }}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="card-footer bg-light py-3">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <span class="text-muted">
                        <i class="ti ti-info-circle me-1"></i>
                        Klik pada akun untuk melihat detail sub akun
                    </span>
                </div>
                <div class="col-md-6 text-md-end mt-2 mt-md-0">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary" id="expandAllAccounts">
                            <i class="ti ti-arrows-maximize me-1"></i> Perluas Semua
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="collapseAllAccounts">
                            <i class="ti ti-arrows-minimize me-1"></i> Ciutkan Semua
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Filter accounts by search
    const accountSearch = document.getElementById('accountSearch');
    if (accountSearch) {
        accountSearch.addEventListener('keyup', function() {
            const searchValue = this.value.toLowerCase();
            const accountRows = document.querySelectorAll('.account-row');

            accountRows.forEach(row => {
                const accountName = row.querySelector('td:first-child').textContent.toLowerCase();
                const accountCode = row.querySelector('td:nth-child(2)').textContent.toLowerCase();

                if (accountName.includes(searchValue) || accountCode.includes(searchValue)) {
                    row.style.display = 'table-row';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    }

    // Toggle sub-accounts
    document.querySelectorAll('.toggle-sub-accounts').forEach(button => {
        button.addEventListener('click', function() {
            const accountId = this.getAttribute('data-account');
            const icon = this.querySelector('i');
            const subRows = document.querySelectorAll(`.account-${accountId}`);

            // Check if sub accounts are visible
            const firstSubRow = document.querySelector(`.account-${accountId}`);
            const isVisible = firstSubRow && firstSubRow.style.display !== 'none';

            // Toggle sub accounts
            subRows.forEach(row => {
                if (row.classList.contains('list-sub-account-row')) {
                    row.style.display = 'none'; // Always hide list-sub-accounts when toggling accounts
                } else {
                    row.style.display = isVisible ? 'none' : 'table-row';
                }
            });

            // Toggle icon
            if (isVisible) {
                icon.classList.remove('ti-minus');
                icon.classList.add('ti-plus');

                // Reset all list-sub-account toggle icons
                document.querySelectorAll(`.account-${accountId} .toggle-list-sub-accounts i`).forEach(listIcon => {
                    listIcon.classList.remove('ti-minus');
                    listIcon.classList.add('ti-plus');
                });
            } else {
                icon.classList.remove('ti-plus');
                icon.classList.add('ti-minus');
            }
        });
    });

    // Toggle list-sub-accounts
    document.querySelectorAll('.toggle-list-sub-accounts').forEach(button => {
        button.addEventListener('click', function() {
            const subAccountId = this.getAttribute('data-sub-account');
            const icon = this.querySelector('i');
            const listSubRows = document.querySelectorAll(`.sub-account-${subAccountId}`);

            // Check if list sub accounts are visible
            const firstListSubRow = document.querySelector(`.sub-account-${subAccountId}`);
            const isVisible = firstListSubRow && firstListSubRow.style.display !== 'none';

            // Toggle list sub accounts
            listSubRows.forEach(row => {
                row.style.display = isVisible ? 'none' : 'table-row';
            });

            // Toggle icon
            if (isVisible) {
                icon.classList.remove('ti-minus');
                icon.classList.add('ti-plus');
            } else {
                icon.classList.remove('ti-plus');
                icon.classList.add('ti-minus');
            }
        });
    });

    // Clear filter button
    document.getElementById('clearFilterButton').addEventListener('click', function() {
        document.getElementById('start_date').value = '';
        document.getElementById('end_date').value = '';
        document.getElementById('filterForm').submit();
    });

    // Expand all accounts button
    document.getElementById('expandAllAccounts')?.addEventListener('click', function() {
        // Show all sub-accounts
        document.querySelectorAll('.sub-account-row').forEach(row => {
            row.style.display = 'table-row';
        });

        // Update icons for account toggles
        document.querySelectorAll('.toggle-sub-accounts i').forEach(icon => {
            icon.classList.remove('ti-plus');
            icon.classList.add('ti-minus');
        });
    });

    // Collapse all accounts button
    document.getElementById('collapseAllAccounts')?.addEventListener('click', function() {
        // Hide all sub-accounts and list-sub-accounts
        document.querySelectorAll('.sub-account-row, .list-sub-account-row').forEach(row => {
            row.style.display = 'none';
        });

        // Reset all icons to plus
        document.querySelectorAll('.toggle-sub-accounts i, .toggle-list-sub-accounts i').forEach(icon => {
            icon.classList.remove('ti-minus');
            icon.classList.add('ti-plus');
        });
    });

    // Add hover effect to rows
    document.querySelectorAll('tbody tr').forEach(row => {
        row.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f8f9fa';
        });

        row.addEventListener('mouseleave', function() {
            if (this.classList.contains('list-sub-account-row')) {
                this.style.backgroundColor = '#f8f9fa';
            } else if (this.classList.contains('sub-account-row')) {
                this.style.backgroundColor = '#fafbfc';
            } else {
                this.style.backgroundColor = '';
            }
        });
    });

    // Initialize DataTable if library is available
    let table;
    if (typeof $.fn !== 'undefined' && typeof $.fn.DataTable !== 'undefined') {
        table = $('#ledgerTable').DataTable({
            dom: 'Bfrtip',
            paging: false,
            info: false,
            searching: false,
            ordering: false,
            buttons: [
                {
                    extend: 'excel',
                    text: 'Excel',
                    title: 'Buku Besar ' + document.querySelector('.text-muted.mb-0').textContent.trim().replace('Periode: ', ''),
                    className: 'visually-hidden',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'pdf',
                    text: 'PDF',
                    title: 'Buku Besar ' + document.querySelector('.text-muted.mb-0').textContent.trim().replace('Periode: ', ''),
                    className: 'visually-hidden',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'csv',
                    text: 'CSV',
                    title: 'Buku Besar ' + document.querySelector('.text-muted.mb-0').textContent.trim().replace('Periode: ', ''),
                    className: 'visually-hidden',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'print',
                    text: 'Print',
                    title: 'Buku Besar ' + document.querySelector('.text-muted.mb-0').textContent.trim().replace('Periode: ', ''),
                    className: 'visually-hidden',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                }
            ]
        });
    }

    // Excel export handler - Use direct URL approach
    document.getElementById('exportExcel')?.addEventListener('click', function(e) {
        e.preventDefault();

        // Get current filter parameters
        const startDate = document.getElementById('start_date').value;
        const endDate = document.getElementById('end_date').value;

        // Build the export URL with the current filter parameters
        let exportUrl = '{{ route("reports.ledger.export") }}?';

        if (startDate) {
            exportUrl += `start_date=${startDate}&`;
        }

        if (endDate) {
            exportUrl += `end_date=${endDate}`;
        }

        // Log the URL for debugging
        console.log('Export URL:', exportUrl);

        // Navigate to the export URL (this will trigger the download)
        window.location.href = exportUrl;
    });

    // PDF export handler - Use DataTable's export button if available
    document.getElementById('exportPdf')?.addEventListener('click', function(e) {
        e.preventDefault();

        if (table) {
            table.button('.buttons-pdf').trigger();
        } else {
            alert('PDF export requires DataTables plugin. Please try Excel export instead.');
        }
    });

    // CSV export handler - Use DataTable's export button if available
    document.getElementById('exportCsv')?.addEventListener('click', function(e) {
        e.preventDefault();

        if (table) {
            table.button('.buttons-csv').trigger();
        } else {
            alert('CSV export requires DataTables plugin. Please try Excel export instead.');
        }
    });

    // Print handler - Use DataTable's print button if available
    document.getElementById('printLedger')?.addEventListener('click', function(e) {
        e.preventDefault();

        if (table) {
            table.button('.buttons-print').trigger();
        } else {
            window.print();
        }
    });

    // Apply some animations and effects
    setTimeout(() => {
        // Fade in the summary cards one by one
        const summaryCards = document.querySelectorAll('.summary-card');
        summaryCards.forEach((card, index) => {
            setTimeout(() => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.5s, transform 0.5s';

                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, 50);
            }, index * 150);
        });
    }, 300);
});
</script>
@endsection