@extends('layouts.admin')

@section('content')
<h3 class="mb-4">Invoices</h3>

<button class="btn btn-primary mb-3" onclick="openCreate()">Add Invoice</button>

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Service</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="invoices_table"></tbody>
</table>

<script>
document.addEventListener("DOMContentLoaded", function () {

    // ============================
    // GLOBAL FUNCTIONS (WAJIB)
    // ============================

    window.loadInvoices = function () {
        fetch('/api/invoices')
            .then(r => r.json())
            .then(rows => {
                let html = '';
                rows.forEach(i => {
                    html += `
                        <tr>
                            <td>${i.id}</td>
                            <td>${i.customer?.name ?? ''}</td>
                            <td>${i.service?.username ?? ''}</td>
                            <td>${i.amount}</td>
                            <td>${i.status}</td>
                            <td>
                                <button class="btn btn-sm btn-warning" onclick="openEdit(${i.id})">Edit</button>
                                <button class="btn btn-sm btn-danger" onclick="removeInvoice(${i.id})">Delete</button>
                            </td>
                        </tr>
                    `;
                });
                document.getElementById('invoices_table').innerHTML = html;
            });
    };

    window.openCreate = function () {
        document.getElementById('modalTitle').innerText = 'Add Invoice';
        document.getElementById('modalBody').innerHTML = `
            <form id="formInvoice">
                <input class="form-control mb-2" name="customer_id" placeholder="Customer ID">
                <input class="form-control mb-2" name="service_id" placeholder="Service ID">
                <input class="form-control mb-2" name="amount" placeholder="Amount">
                <select class="form-control mb-2" name="status">
                    <option value="unpaid">Unpaid</option>
                    <option value="paid">Paid</option>
                </select>
                <button class="btn btn-primary" type="button" onclick="saveCreate()">Save</button>
            </form>
        `;

        const modal = new bootstrap.Modal(globalModal);
        modal.show();
    };

    window.saveCreate = function () {
        const form = new FormData(document.getElementById('formInvoice'));
        fetch('/api/invoices', { method: 'POST', body: form })
            .then(() => {
                loadInvoices();
                bootstrap.Modal.getInstance(globalModal).hide();
            });
    };

    window.openEdit = function (id) {
        fetch('/api/invoices/' + id)
            .then(r => r.json())
            .then(i => {
                document.getElementById('modalTitle').innerText = 'Edit Invoice';
                document.getElementById('modalBody').innerHTML = `
                    <form id="formInvoice">
                        <input class="form-control mb-2" name="amount" value="${i.amount}">
                        <select class="form-control mb-2" name="status">
                            <option value="unpaid" ${i.status === 'unpaid' ? 'selected' : ''}>Unpaid</option>
                            <option value="paid" ${i.status === 'paid' ? 'selected' : ''}>Paid</option>
                        </select>
                        <button class="btn btn-primary" type="button" onclick="saveEdit(${i.id})">Update</button>
                    </form>
                `;

                const modal = new bootstrap.Modal(globalModal);
                modal.show();
            });
    };

    window.saveEdit = function (id) {
        const form = new FormData(document.getElementById('formInvoice'));
        form.append('_method', 'PUT');

        fetch('/api/invoices/' + id, { method: 'POST', body: form })
            .then(() => {
                loadInvoices();
                bootstrap.Modal.getInstance(globalModal).hide();
            });
    };

    window.removeInvoice = function (id) {
        fetch('/api/invoices/' + id, { method: 'DELETE' })
            .then(() => loadInvoices());
    };

    loadInvoices();
});
</script>
@endsection