@extends('layouts.adminlte')

@section('title', 'PURCHASE ORDER JASA')
@section('page_title', 'PURCHASE ORDER JASA')

@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') }}" />
@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">Purchase Order Jasa (Service)</h3>
            <div class="d-flex gap-2 flex-wrap">
                <a href="{{ route('purchase_order.page') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-file-invoice-dollar me-1"></i>PO Barang
                </a>
                <a href="{{ route('master_vendor.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-truck-field me-1"></i>Master Vendor
                </a>
                <button class="btn btn-primary btn-sm" id="btnAddPO">
                    <i class="fas fa-plus me-1"></i>Tambah PO Jasa
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="poTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>PO Number</th>
                        <th>Project</th>
                        <th>Vendor</th>
                        <th>Tanggal</th>
                        <th>Status</th>
                        <th>Pembayaran</th>
                        <th>Total</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="poModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="poModalTitle">Tambah PO Jasa</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="poForm">
                    <div class="modal-body">
                        <input type="hidden" id="poId" />
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">PO Number</label>
                                <input type="text" class="form-control" id="poNumber" maxlength="80" required />
                                <small class="text-muted">Isi manual. Saran: `POJ-PRJ-YYYYMMDD-01`.</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Project</label>
                                <select class="form-select" id="poProjectId" required></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Vendor</label>
                                <select class="form-select" id="poVendorId">
                                    <option value="">- Tanpa Vendor -</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Tanggal</label>
                                <input type="date" class="form-control" id="poDate" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" id="poStatus">
                                    <option value="draft">Draft</option>
                                    <option value="approved">Approved</option>
                                    <option value="closed">Closed</option>
                                    <option value="cancelled">Cancelled</option>
                                </select>
                            </div>
                            <div class="col-md-9">
                                <label class="form-label">Notes</label>
                                <input type="text" class="form-control" id="poNotes" />
                            </div>
                        </div>

                        <hr class="my-3">

                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="fw-semibold">Item Jasa</div>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddItem">
                                <i class="fas fa-plus me-1"></i>Tambah Item
                            </button>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle" id="itemsTable">
                                <thead>
                                <tr>
                                    <th style="width:40px">#</th>
                                    <th>Deskripsi</th>
                                    <th style="width:110px">Qty</th>
                                    <th style="width:120px">Unit</th>
                                    <th style="width:140px">Harga</th>
                                    <th style="width:150px">Total</th>
                                    <th>Notes</th>
                                    <th style="width:70px">Aksi</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                <tr>
                                    <th colspan="5" class="text-end">Grand Total</th>
                                    <th id="grandTotalCell">0</th>
                                    <th colspan="2"></th>
                                </tr>
                                </tfoot>
                            </table>
                        </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-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="poPaymentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Set Pembayaran PO Jasa</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="poPaymentForm">
                    <div class="modal-body">
                        <input type="hidden" id="payPoId" />
                        <div class="mb-2">
                            <label class="form-label">PO Number</label>
                            <input type="text" class="form-control" id="payPoNumber" readonly />
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Total Amount</label>
                            <input type="text" class="form-control" id="payTotalAmount" readonly />
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Payment Status</label>
                                <select class="form-select" id="payStatus" required>
                                    <option value="unpaid">Unpaid</option>
                                    <option value="partial">Partial</option>
                                    <option value="paid">Paid</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Paid Amount</label>
                                <input type="number" min="0" step="0.01" class="form-control" id="payAmount" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Paid At</label>
                                <input type="datetime-local" class="form-control" id="payAt" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Payment Ref</label>
                                <input type="text" class="form-control" id="payRef" maxlength="120" placeholder="No transfer / voucher / memo" />
                            </div>
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control" id="payNotes" rows="3"></textarea>
                        </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>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) {
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            }

            const modal = new bootstrap.Modal(document.getElementById('poModal'));
            const paymentModal = new bootstrap.Modal(document.getElementById('poPaymentModal'));

            const rupiah = (n) => {
                const val = Number(n || 0);
                return val.toLocaleString('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 2 });
            };

            const escapeHtml = (str) => String(str ?? '').replace(/[&<>"']/g, (m) => ({
                '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'
            }[m]));

            let projects = [];
            let vendors = [];
            let rowsCache = [];

            const table = $('#poTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'po_number' },
                    { data: null, render: (r) => r.project_code ? `${r.project_code} - ${r.project_name || ''}` : '-' },
                    { data: null, render: (r) => r.vendor_code ? `${r.vendor_code} - ${r.vendor_name || ''}` : '-' },
                    { data: 'po_date', render: (v) => v || '-' },
                    { data: 'status', render: (v) => `<span class="badge text-bg-${v === 'approved' ? 'success' : (v === 'closed' ? 'secondary' : (v === 'cancelled' ? 'danger' : 'warning'))}">${escapeHtml(v || 'draft')}</span>` },
                    { data: null, render: (r) => {
                        const s = (r.payment_status || 'unpaid').toString();
                        const badge = s === 'paid'
                            ? ['Paid', 'success']
                            : s === 'partial'
                                ? ['Partial', 'warning']
                                : ['Unpaid', 'secondary'];
                        const amt = rupiah(r.paid_amount || 0);
                        return `<span class="badge text-bg-${badge[1]}">${badge[0]}</span><div class="small text-muted mt-1">${amt}</div>`;
                    }},
                    { data: 'total_amount', render: (v) => rupiah(v || 0) },
                    {
                        data: null,
                        orderable: false,
                        render: (row) => `
                            <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${row.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-success btn-payment" data-id="${row.id}">Payment</button>
                            <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${row.id}">Delete</button>
                        `
                    }
                ]
            });

            const fillProjects = (selected = '') => {
                const opts = ['<option value="">- Pilih Project -</option>'];
                projects.forEach((p) => opts.push(`<option value="${p.id}">${escapeHtml(p.code || '')} - ${escapeHtml(p.name || '')}</option>`));
                $('#poProjectId').html(opts.join(''));
                $('#poProjectId').val(selected || '');
            };

            const fillVendors = (selected = '') => {
                const opts = ['<option value="">- Tanpa Vendor -</option>'];
                vendors.forEach((v) => opts.push(`<option value="${v.id}">${escapeHtml(v.code || '')} - ${escapeHtml(v.name || '')}</option>`));
                $('#poVendorId').html(opts.join(''));
                $('#poVendorId').val(selected || '');
            };

            const loadMaster = () => $.when(
                $.getJSON('{{ route('master_project.projects.data') }}'),
                $.getJSON('{{ route('master_vendor.data') }}')
            ).done((p, v) => {
                projects = p[0]?.data || [];
                vendors = v[0]?.data || [];
                fillProjects('');
                fillVendors('');
            });

            const loadData = () => $.getJSON('{{ route('purchase_order_jasa.data') }}')
                .done((resp) => {
                    rowsCache = resp.data || [];
                    table.clear().rows.add(rowsCache).draw();
                })
                .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error'));

            const resetForm = () => {
                $('#poId').val('');
                $('#poNumber').val('');
                fillProjects('');
                fillVendors('');
                $('#poDate').val('');
                $('#poStatus').val('draft');
                $('#poNotes').val('');
                $('#itemsTable tbody').html('');
                $('#grandTotalCell').text(rupiah(0));
            };

            const openPaymentModal = (row) => {
                if (!row) return;
                $('#payPoId').val(row.id);
                $('#payPoNumber').val(row.po_number || '');
                $('#payTotalAmount').val(rupiah(row.total_amount || 0));
                $('#payStatus').val((row.payment_status || 'unpaid').toString());
                $('#payAmount').val(Number(row.paid_amount || 0));
                $('#payAt').val(row.paid_at ? String(row.paid_at).replace(' ', 'T').slice(0, 16) : '');
                $('#payRef').val(row.payment_ref || '');
                $('#payNotes').val('');
                paymentModal.show();
            };

            const calcGrandTotal = () => {
                let total = 0;
                $('#itemsTable tbody tr').each(function () {
                    const qty = Number($(this).find('.item-qty').val() || 0);
                    const price = Number($(this).find('.item-price').val() || 0);
                    total += qty * price;
                });
                $('#grandTotalCell').text(rupiah(total));
                return total;
            };

            const addItemRow = (item = {}) => {
                const idx = $('#itemsTable tbody tr').length + 1;
                const rowHtml = `
                    <tr>
                        <td class="text-center">${idx}</td>
                        <td><input type="text" class="form-control form-control-sm item-desc" value="${escapeHtml(item.description || '')}" required></td>
                        <td><input type="number" min="0" step="0.001" class="form-control form-control-sm item-qty" value="${Number(item.qty || 0)}" required></td>
                        <td><input type="text" maxlength="40" class="form-control form-control-sm item-unit" value="${escapeHtml(item.unit || '')}"></td>
                        <td><input type="number" min="0" step="0.01" class="form-control form-control-sm item-price" value="${Number(item.unit_price || 0)}" required></td>
                        <td class="item-total text-end">0</td>
                        <td><input type="text" class="form-control form-control-sm item-notes" value="${escapeHtml(item.notes || '')}"></td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-outline-danger btn-remove"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                `;
                $('#itemsTable tbody').append(rowHtml);
                refreshItemTotals();
            };

            const refreshItemTotals = () => {
                $('#itemsTable tbody tr').each(function (i) {
                    $(this).find('td:first').text(String(i + 1));
                    const qty = Number($(this).find('.item-qty').val() || 0);
                    const price = Number($(this).find('.item-price').val() || 0);
                    $(this).find('.item-total').text(rupiah(qty * price));
                });
                calcGrandTotal();
            };

            $('#btnAddPO').on('click', function () {
                $('#poModalTitle').text('Tambah PO Jasa');
                resetForm();
                addItemRow({ qty: 1, unit_price: 0 });
                modal.show();
            });

            $('#btnAddItem').on('click', () => addItemRow({ qty: 1, unit_price: 0 }));

            $('#itemsTable').on('input', '.item-qty, .item-price', refreshItemTotals);
            $('#itemsTable').on('click', '.btn-remove', function () {
                $(this).closest('tr').remove();
                refreshItemTotals();
            });

            $('#poTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((r) => Number(r.id) === id);
                if (!row) return;
                $('#poModalTitle').text('Edit PO Jasa');
                resetForm();
                $('#poId').val(row.id);
                $('#poNumber').val(row.po_number || '');
                fillProjects(row.project_id || '');
                fillVendors(row.vendor_id || '');
                $('#poDate').val(row.po_date || '');
                $('#poStatus').val(row.status || 'draft');
                $('#poNotes').val(row.notes || '');
                (row.items || []).forEach((it) => addItemRow(it));
                if (!(row.items || []).length) addItemRow({ qty: 1, unit_price: 0 });
                modal.show();
            });

            $('#poTable').on('click', '.btn-payment', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((r) => Number(r.id) === id);
                openPaymentModal(row);
            });

            $('#poTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Hapus PO Jasa?',
                    text: 'Data akan dihapus permanen.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    $.ajax({ url: `{{ url('/purchase-order-jasa') }}/${id}`, type: 'DELETE' })
                        .done((resp) => { Swal.fire('Success', resp?.message || 'Deleted', 'success'); loadData(); })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                });
            });

            $('#poForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#poId').val();
                const items = [];
                $('#itemsTable tbody tr').each(function () {
                    items.push({
                        description: $(this).find('.item-desc').val(),
                        qty: Number($(this).find('.item-qty').val() || 0),
                        unit: $(this).find('.item-unit').val(),
                        unit_price: Number($(this).find('.item-price').val() || 0),
                        notes: $(this).find('.item-notes').val()
                    });
                });
                if (!items.length) {
                    Swal.fire('Warning', 'Minimal 1 item jasa.', 'warning');
                    return;
                }

                const payload = {
                    po_number: $('#poNumber').val(),
                    project_id: $('#poProjectId').val(),
                    vendor_id: $('#poVendorId').val(),
                    po_date: $('#poDate').val(),
                    status: $('#poStatus').val(),
                    notes: $('#poNotes').val(),
                    items
                };

                $.ajax({
                    url: id ? `{{ url('/purchase-order-jasa') }}/${id}` : '{{ route('purchase_order_jasa.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    modal.hide();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                    loadData();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error');
                });
            });

            $('#poPaymentForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#payPoId').val() || 0);
                if (!id) return;

                $.ajax({
                    url: `{{ url('/purchase-order-jasa') }}/${id}/payment`,
                    type: 'POST',
                    data: {
                        payment_status: $('#payStatus').val(),
                        paid_amount: $('#payAmount').val(),
                        paid_at: $('#payAt').val() ? ($('#payAt').val().replace('T', ' ') + ':00') : '',
                        payment_ref: $('#payRef').val(),
                        payment_notes: $('#payNotes').val()
                    }
                }).done((resp) => {
                    paymentModal.hide();
                    Swal.fire('Success', resp?.message || 'Payment updated', 'success');
                    loadData();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Failed update payment', 'error');
                });
            });

            loadMaster().always(loadData);
        });
    </script>
@endpush