@extends('layouts.adminlte')

@section('title', 'Rekonsiliasi Bank')
@section('page_title', 'Rekonsiliasi Bank')

@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') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
        .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Rekonsiliasi Bank (Cleared / Not Cleared)</h3>
            <button class="btn btn-success btn-sm" id="btnNewRecon">
                <i class="fas fa-plus me-1"></i>Rekonsiliasi Baru
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle w-100" id="reconTable">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Bank Account</th>
                        <th>Period</th>
                        <th>Opening</th>
                        <th>Closing</th>
                        <th>Status</th>
                        <th>Notes</th>
                        <th>Aksi</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="reconModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Buat Rekonsiliasi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="reconForm">
                    <div class="modal-body">
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Bank Account</label>
                                <select class="form-select" id="bankAccountId" required></select>
                                <div class="small text-muted">Pilih akun Cash/Bank di COA.</div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Period From</label>
                                <input type="date" class="form-control" id="periodFrom" value="{{ now()->startOfMonth()->toDateString() }}" required />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Period To</label>
                                <input type="date" class="form-control" id="periodTo" value="{{ now()->toDateString() }}" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Opening Balance</label>
                                <input type="number" step="0.01" class="form-control" id="openingBalance" value="0" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Closing Balance</label>
                                <input type="number" step="0.01" class="form-control" id="closingBalance" value="0" />
                            </div>
                            <div class="col-12">
                                <label class="form-label">Notes</label>
                                <textarea class="form-control" id="notes" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="txnModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex flex-column">
                        <h5 class="modal-title mb-0">Transaksi Bank (Clearing)</h5>
                        <div class="small text-muted" id="txnSubtitle"></div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex gap-2 flex-wrap align-items-center mb-2">
                        <button class="btn btn-outline-success btn-sm" id="btnExportTxn">
                            <i class="fas fa-file-excel me-1"></i>Export XLSX
                        </button>
                        <button class="btn btn-outline-secondary btn-sm" id="btnCloseRecon">
                            <i class="fas fa-lock me-1"></i>Close Rekonsiliasi
                        </button>
                        <div class="ms-auto small">
                            <span class="badge text-bg-success">Cleared</span>
                            <span class="badge text-bg-secondary">Not Cleared</span>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle w-100" id="txnTable">
                            <thead>
                            <tr>
                                <th style="width:60px">Cleared</th>
                                <th>Date</th>
                                <th>Journal</th>
                                <th>Source</th>
                                <th>Description</th>
                                <th>Debit</th>
                                <th>Credit</th>
                                <th>Ref</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </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 csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const fmtRp = (n) => Number(n || 0).toLocaleString('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 2 });
            const badge = (txt, cls) => `<span class="badge text-bg-${cls}">${txt}</span>`;

            const reconModal = new bootstrap.Modal(document.getElementById('reconModal'));
            const txnModal = new bootstrap.Modal(document.getElementById('txnModal'));

            const initSelect2Accounts = ($el) => {
                if ($el.data('select2')) $el.select2('destroy');
                $el.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: 'Cari akun bank/kas...',
                    allowClear: true,
                    ajax: {
                        url: `{{ route('accounting.accounts.search') }}`,
                        dataType: 'json',
                        delay: 250,
                        data: (params) => ({ q: params.term || '' }),
                        processResults: (data) => data,
                    }
                });
            };

            let activeReconId = null;
            let activeReconStatus = 'draft';

            const reconTable = $('#reconTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'bank_account', render: (v) => v || '-' },
                    { data: null, render: (r) => `${r.period_from} s/d ${r.period_to}` },
                    { data: 'opening_balance', render: (v) => fmtRp(v) },
                    { data: 'closing_balance', render: (v) => fmtRp(v) },
                    { data: 'status', render: (v) => badge(v || 'draft', v === 'closed' ? 'secondary' : 'primary') },
                    { data: 'notes', render: (v) => v || '-' },
                    { data: null, orderable: false, render: (r) => `
                        <div class="d-flex gap-1">
                            <button class="btn btn-sm btn-outline-primary btn-open" data-id="${r.id}" data-status="${r.status}">Open</button>
                            <a class="btn btn-sm btn-outline-success" href="{{ url('/accounting/bank-reconciliation') }}/${r.id}/export-xlsx">XLSX</a>
                        </div>
                    `},
                ]
            });

            const txnTable = $('#txnTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, orderable: false, render: (r) => `
                        <div class="form-check m-0">
                            <input class="form-check-input chk-clear" type="checkbox" ${r.is_cleared ? 'checked' : ''} data-id="${r.line_id}" ${activeReconStatus==='closed'?'disabled':''}>
                        </div>
                    `},
                    { data: 'journal_date' },
                    { data: 'journal_number', render: (v) => `<span class="mono">${v || ''}</span>` },
                    { data: 'source', render: (v) => v || '-' },
                    { data: 'description', render: (v) => v || '-' },
                    { data: 'debit', render: (v) => fmtRp(v) },
                    { data: 'credit', render: (v) => fmtRp(v) },
                    { data: 'reference', render: (v) => v || '-' },
                ]
            });

            const loadRecon = () => {
                $.getJSON(`{{ route('accounting.recon.data') }}`)
                    .done((resp) => reconTable.clear().rows.add(resp.data || []).draw())
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Load failed', 'error'));
            };

            const loadTransactions = () => {
                if (!activeReconId) return;
                $.getJSON(`{{ url('/accounting/bank-reconciliation') }}/${activeReconId}/transactions`)
                    .done((resp) => txnTable.clear().rows.add(resp.data || []).draw())
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Load failed', 'error'));
            };

            $('#btnNewRecon').on('click', function () {
                initSelect2Accounts($('#bankAccountId'));
                reconModal.show();
            });

            $('#reconForm').on('submit', function (e) {
                e.preventDefault();
                $.post(`{{ route('accounting.recon.store') }}`, {
                    bank_account_id: $('#bankAccountId').val(),
                    period_from: $('#periodFrom').val(),
                    period_to: $('#periodTo').val(),
                    opening_balance: $('#openingBalance').val(),
                    closing_balance: $('#closingBalance').val(),
                    notes: $('#notes').val(),
                }).done(() => {
                    reconModal.hide();
                    loadRecon();
                    Swal.fire('OK', 'Rekonsiliasi dibuat', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#reconTable').on('click', '.btn-open', function () {
                activeReconId = Number($(this).data('id') || 0);
                activeReconStatus = String($(this).data('status') || 'draft');
                $('#txnSubtitle').text(`Reconciliation #${activeReconId} (${activeReconStatus})`);
                $('#btnExportTxn').prop('disabled', !activeReconId);
                $('#btnCloseRecon').prop('disabled', activeReconStatus === 'closed');
                loadTransactions();
                txnModal.show();
            });

            $('#txnTable').on('change', '.chk-clear', function () {
                const lineId = Number($(this).data('id') || 0);
                const cleared = $(this).is(':checked');
                $.post(`{{ url('/accounting/bank-reconciliation') }}/${activeReconId}/toggle`, {
                    journal_line_id: lineId,
                    cleared: cleared ? 1 : 0,
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Update failed', 'error');
                    loadTransactions();
                });
            });

            $('#btnCloseRecon').on('click', function () {
                if (!activeReconId) return;
                Swal.fire({
                    title: 'Close rekonsiliasi?',
                    text: 'Setelah closed, clearing tidak bisa diubah.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Close',
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    $.post(`{{ url('/accounting/bank-reconciliation') }}/${activeReconId}/close`)
                        .done(() => {
                            activeReconStatus = 'closed';
                            $('#btnCloseRecon').prop('disabled', true);
                            loadRecon();
                            loadTransactions();
                            Swal.fire('OK', 'Rekonsiliasi closed', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Close failed', 'error'));
                });
            });

            $('#btnExportTxn').on('click', function () {
                if (!activeReconId) return;
                window.location.href = `{{ url('/accounting/bank-reconciliation') }}/${activeReconId}/export-xlsx`;
            });

            loadRecon();
        });
    </script>
@endpush