@extends('layouts.adminlte')

@section('title', 'GENERAL LEDGER')
@section('page_title', 'GENERAL LEDGER')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header">
            <div class="d-flex align-items-center justify-content-between gap-2">
                <h3 class="card-title m-0">Filter</h3>
                <button class="btn btn-success btn-sm" id="btnExportGlXlsx" disabled>
                    <i class="fas fa-file-excel me-1"></i>Export XLSX
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Akun</label>
                    <select class="form-select" id="glAccount" style="width:100%"></select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Dari</label>
                    <input type="date" class="form-control" id="glFrom" value="{{ now()->startOfMonth()->format('Y-m-d') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Sampai</label>
                    <input type="date" class="form-control" id="glTo" value="{{ now()->format('Y-m-d') }}">
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button class="btn btn-primary w-100" id="btnLoadGl"><i class="fas fa-search me-1"></i>Tampilkan</button>
                </div>
            </div>
            <div class="alert alert-light border mt-3 mb-0" id="glMeta" style="display:none"></div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title m-0">Ledger</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="glTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>No Jurnal</th>
                        <th>Source</th>
                        <th>Deskripsi</th>
                        <th class="text-end">Debit</th>
                        <th class="text-end">Kredit</th>
                        <th class="text-end">Saldo</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>

    <script>
        $(function () {
            const fmt = (n) => Number(n || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

            $('#glAccount').select2({
                ajax: {
                    url: '{{ route('accounting.accounts.search') }}',
                    dataType: 'json',
                    delay: 200,
                    data: (params) => ({ q: params.term || '' }),
                    processResults: (data) => data,
                },
                placeholder: 'Cari akun...',
                allowClear: true,
            });

            const table = $('#glTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'journal_date' },
                    { data: 'journal_number' },
                    { data: 'source' },
                    { data: 'description', render: (v) => v || '-' },
                    { data: 'debit', className: 'text-end', render: (v) => fmt(v) },
                    { data: 'credit', className: 'text-end', render: (v) => fmt(v) },
                    { data: 'running_balance', className: 'text-end', render: (v) => fmt(v) },
                ],
            });

            const load = () => {
                const accountId = ($('#glAccount').val() || '').toString();
                if (!accountId) {
                    Swal.fire('Info', 'Pilih akun dulu.', 'info');
                    return;
                }
                $.getJSON('{{ route('accounting.gl.data') }}', {
                    account_id: accountId,
                    date_from: ($('#glFrom').val() || '').toString(),
                    date_to: ($('#glTo').val() || '').toString(),
                }).done((resp) => {
                    const meta = resp.meta || {};
                    const acc = meta.account || {};
                    const open = Number(meta.opening_balance || 0);
                    $('#glMeta')
                        .html(`
                            <div class="fw-semibold">${acc.code || ''} - ${acc.name || ''}</div>
                            <div class="small text-muted">Opening balance: <strong>${fmt(open)}</strong> (normal: ${acc.normal_balance || '-'})</div>
                        `)
                        .show();
                    table.clear().rows.add(resp.data || []).draw();
                    $('#btnExportGlXlsx').prop('disabled', false);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load ledger.', 'error');
                });
            };

            $('#btnLoadGl').on('click', load);
            $('#btnExportGlXlsx').on('click', function () {
                const accountId = ($('#glAccount').val() || '').toString();
                if (!accountId) return;
                const params = new URLSearchParams();
                params.set('account_id', accountId);
                params.set('date_from', ($('#glFrom').val() || '').toString());
                params.set('date_to', ($('#glTo').val() || '').toString());
                const url = `{{ route('accounting.gl.export_xlsx') }}?${params.toString()}`;
                window.open(url, '_blank');
            });
        });
    </script>
@endpush