@extends('layouts.adminlte')

@section('title', 'AP - HUTANG')
@section('page_title', 'AP - HUTANG')

@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; }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Hutang (AP) - Purchase Order</h3>
            <div class="d-flex gap-2 flex-wrap">
                <a href="{{ url('/master-project/purchase-orders') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-file-invoice-dollar me-1"></i>Purchase Order (Barang)
                </a>
                <a href="{{ url('/purchase-order-jasa') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-file-contract me-1"></i>Purchase Order (Jasa)
                </a>
                <button class="btn btn-success btn-sm" id="btnExportAging">
                    <i class="fas fa-file-excel me-1"></i>Export Aging (XLSX)
                </button>
                <button class="btn btn-success btn-sm" id="btnAddPayment">
                    <i class="fas fa-money-bill-wave me-1"></i>Input Pembayaran (AP)
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-2 align-items-end mb-2">
                <div class="col-md-3">
                    <label class="form-label">As Of</label>
                    <input type="date" class="form-control" id="asOf" value="{{ now()->toDateString() }}" />
                </div>
                <div class="col-md-3">
                    <div class="form-check form-switch mt-4">
                        <input class="form-check-input" type="checkbox" id="onlyOpen" />
                        <label class="form-check-label" for="onlyOpen">Only Outstanding</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <button class="btn btn-primary mt-4" id="btnReload">Tampilkan</button>
                </div>
            </div>

            <div class="table-responsive">
                <table id="apTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>PO</th>
                        <th>Vendor</th>
                        <th>Project</th>
                        <th>Tanggal PO</th>
                        <th>Tipe</th>
                        <th>Status</th>
                        <th>Amount</th>
                        <th>Paid</th>
                        <th>Outstanding</th>
                        <th>Aging</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title m-0">Pembayaran AP (dengan alokasi PO)</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="apPayTable" class="table table-sm table-bordered align-middle w-100">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Tanggal</th>
                        <th>Vendor</th>
                        <th>Method</th>
                        <th>Ref</th>
                        <th>Status</th>
                        <th>Amount</th>
                        <th>Allocations</th>
                        <th>Aksi</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="apPayModal" 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">Input Pembayaran AP</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="apPayForm">
                    <div class="modal-body">
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Tanggal Bayar</label>
                                <input type="date" class="form-control" id="payDate" value="{{ now()->toDateString() }}" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Method</label>
                                <input type="text" class="form-control" id="payMethod" placeholder="transfer/cash/giro" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Akun Bank/Kas (Credit)</label>
                                <select class="form-select" id="bankAccountId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Akun Hutang (Debit)</label>
                                <select class="form-select" id="apAccountId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Vendor (optional)</label>
                                <select class="form-select" id="vendorId"></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Reference</label>
                                <input type="text" class="form-control" id="payRef" maxlength="120" />
                            </div>
                            <div class="col-12">
                                <label class="form-label">Notes</label>
                                <textarea class="form-control" id="payNotes" rows="2"></textarea>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="postNow" checked />
                                    <label class="form-check-label" for="postNow">Post journal sekarang (buat jurnal otomatis)</label>
                                </div>
                            </div>
                        </div>

                        <hr class="my-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="fw-semibold">Alokasi ke PO</div>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddAlloc"><i class="fas fa-plus me-1"></i>Tambah</button>
                        </div>
                        <div class="table-responsive mt-2">
                            <table class="table table-sm table-bordered align-middle" id="allocTable">
                                <thead>
                                <tr>
                                    <th style="width:60px">#</th>
                                    <th>PO</th>
                                    <th>Amount (IDR)</th>
                                    <th style="width:90px">Aksi</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="small text-muted">Tips: pilih PO yang outstanding saja, lalu isi amount sesuai pembayaran.</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>
@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 modal = new bootstrap.Modal(document.getElementById('apPayModal'));

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

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

            const initSelect2Pos = ($el) => {
                if ($el.data('select2')) $el.select2('destroy');
                $el.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: 'Cari PO (outstanding)...',
                    ajax: {
                        url: `{{ route('accounting.ap.pos.search') }}`,
                        dataType: 'json',
                        delay: 250,
                        data: (params) => ({ q: params.term || '' }),
                        processResults: (data) => data,
                    }
                });
            };

            const apTable = $('#apTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'po_number' },
                    { data: 'vendor_name', render: (v) => v || '-' },
                    { data: null, render: (r) => `${r.project_code || ''} - ${r.project_name || ''}` },
                    { data: 'po_date', render: (v) => v || '-' },
                    { data: 'po_type', render: (v) => badge((v || 'barang').toUpperCase(), v === 'jasa' ? 'info' : 'secondary') },
                    { data: 'status', render: (v) => badge(v || '-', v === 'closed' ? 'secondary' : 'primary') },
                    { data: 'amount_idr', render: (v) => fmtRp(v) },
                    { data: 'paid_idr', render: (v) => fmtRp(v) },
                    { data: 'outstanding_idr', render: (v) => `<span class="${Number(v||0)>0?'text-danger fw-semibold':''}">${fmtRp(v)}</span>` },
                    { data: null, render: (r) => r.payment_status === 'paid'
                        ? badge('Paid', 'success')
                        : (r.payment_status === 'partial'
                            ? badge(`Partial (${r.aging_bucket})`, 'warning')
                            : badge(`${r.aging_bucket}`, 'secondary'))
                    },
                ]
            });

            const apPayTable = $('#apPayTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'pay_date', render: (v) => v || '-' },
                    { data: 'vendor_name', render: (v) => v || '-' },
                    { data: 'method', render: (v) => v || '-' },
                    { data: 'reference_number', render: (v) => v || '-' },
                    { data: 'status', render: (v) => badge(v || 'draft', v === 'posted' ? 'success' : (v === 'void' ? 'danger' : 'secondary')) },
                    { data: 'amount_idr', render: (v) => fmtRp(v) },
                    { data: 'allocations', render: (arr) => (arr || []).map((a) => `${a.po_number || ('#'+a.po_id)}: ${fmtRp(a.amount_idr)}`).join('<br>') || '-' },
                    { data: null, orderable: false, render: (r) => {
                        if (r.status === 'draft') {
                            return `
                                <div class="d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-success btn-post" data-id="${r.id}">Post</button>
                                    <button class="btn btn-sm btn-outline-danger btn-void" data-id="${r.id}">Void</button>
                                </div>
                            `;
                        }
                        return '-';
                    }},
                ]
            });

            const loadPos = () => {
                const params = new URLSearchParams();
                params.set('as_of', $('#asOf').val() || '');
                params.set('only_open', $('#onlyOpen').is(':checked') ? '1' : '0');
                $.getJSON(`{{ route('accounting.ap.pos.data') }}?${params.toString()}`)
                    .done((resp) => apTable.clear().rows.add(resp.data || []).draw())
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Load failed', 'error'));
            };
            const loadPayments = () => {
                $.getJSON(`{{ route('accounting.ap.payments.data') }}`)
                    .done((resp) => apPayTable.clear().rows.add(resp.data || []).draw())
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Load failed', 'error'));
            };

            const addAllocRow = () => {
                const idx = $('#allocTable tbody tr').length + 1;
                const $row = $(`
                    <tr>
                        <td class="text-center">${idx}</td>
                        <td><select class="form-select form-select-sm alloc-po" required></select></td>
                        <td><input type="number" min="0" step="0.01" class="form-control form-control-sm alloc-amount" placeholder="amount" required></td>
                        <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger btn-del">Hapus</button></td>
                    </tr>
                `);
                $('#allocTable tbody').append($row);
                initSelect2Pos($row.find('.alloc-po'));
            };

            $('#btnReload').on('click', loadPos);
            $('#btnExportAging').on('click', function () {
                const params = new URLSearchParams();
                params.set('as_of', $('#asOf').val() || '');
                params.set('only_open', $('#onlyOpen').is(':checked') ? '1' : '0');
                window.location.href = `{{ route('accounting.ap.export_xlsx') }}?${params.toString()}`;
            });
            $('#btnAddPayment').on('click', function () {
                $('#allocTable tbody').empty();
                addAllocRow();
                initSelect2Accounts($('#bankAccountId'));
                initSelect2Accounts($('#apAccountId'));
                initSelect2Vendors($('#vendorId'));
                modal.show();
            });
            $('#btnAddAlloc').on('click', addAllocRow);
            $('#allocTable').on('click', '.btn-del', function () {
                $(this).closest('tr').remove();
            });

            $('#apPayTable').on('click', '.btn-post', function () {
                const id = $(this).data('id');
                Swal.fire({
                    title: 'Post payment?',
                    text: 'Akan membuat jurnal otomatis. Lanjutkan?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Post',
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    $.post(`{{ url('accounting/ap/payments') }}/${id}/post`)
                        .done(() => { loadPos(); loadPayments(); Swal.fire('OK', 'Posted', 'success'); })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed', 'error'));
                });
            });

            $('#apPayTable').on('click', '.btn-void', function () {
                const id = $(this).data('id');
                Swal.fire({
                    title: 'Void payment?',
                    text: 'Status jadi void dan tidak dihitung di paid/outstanding. Lanjutkan?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Void',
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    $.post(`{{ url('accounting/ap/payments') }}/${id}/void`)
                        .done(() => { loadPos(); loadPayments(); Swal.fire('OK', 'Voided', 'success'); })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed', 'error'));
                });
            });

            $('#apPayForm').on('submit', function (e) {
                e.preventDefault();
                const allocations = [];
                $('#allocTable tbody tr').each(function () {
                    allocations.push({
                        purchase_order_id: Number($(this).find('.alloc-po').val() || 0),
                        amount_idr: Number($(this).find('.alloc-amount').val() || 0),
                    });
                });
                $.ajax({
                    url: '{{ route('accounting.ap.payments.store') }}',
                    type: 'POST',
                    data: {
                        vendor_id: $('#vendorId').val(),
                        pay_date: $('#payDate').val(),
                        method: $('#payMethod').val(),
                        bank_account_id: $('#bankAccountId').val(),
                        ap_account_id: $('#apAccountId').val(),
                        reference_number: $('#payRef').val(),
                        notes: $('#payNotes').val(),
                        post_now: $('#postNow').is(':checked') ? 1 : 0,
                        allocations,
                    }
                }).done((resp) => {
                    modal.hide();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                    loadPos();
                    loadPayments();
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            loadPos();
            loadPayments();
        });
    </script>
@endpush