@extends('layouts.admin')

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

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

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Address</th><th>Action</th>
        </tr>
    </thead>
    <tbody id="customers_table"></tbody>
</table>

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

    window.loadCustomers = function () {
        fetch('/api/customers')
            .then(r => r.json())
            .then(rows => {
                let html = '';
                rows.forEach(c => {
                    html += `
                        <tr>
                            <td>${c.id}</td>
                            <td>${c.name}</td>
                            <td>${c.email ?? ''}</td>
                            <td>${c.phone ?? ''}</td>
                            <td>${c.address ?? ''}</td>
                            <td>
                                <button class="btn btn-sm btn-warning" onclick="openEdit(${c.id})">Edit</button>
                                <button class="btn btn-sm btn-danger" onclick="removeCustomer(${c.id})">Delete</button>
                            </td>
                        </tr>
                    `;
                });
                document.getElementById('customers_table').innerHTML = html;
            });
    };

    window.openCreate = function () {
        document.getElementById('modalTitle').innerText = 'Add Customer';
        document.getElementById('modalBody').innerHTML = `
            <form id="formCustomer">
                <input class="form-control mb-2" name="name" placeholder="Name">
                <input class="form-control mb-2" name="email" placeholder="Email">
                <input class="form-control mb-2" name="phone" placeholder="Phone">
                <input class="form-control mb-2" name="address" placeholder="Address">
                <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('formCustomer'));
        fetch('/api/customers', { method: 'POST', body: form })
            .then(() => {
                loadCustomers();
                bootstrap.Modal.getInstance(globalModal).hide();
            });
    };

    window.openEdit = function (id) {
        fetch('/api/customers/' + id)
            .then(r => r.json())
            .then(c => {
                document.getElementById('modalTitle').innerText = 'Edit Customer';
                document.getElementById('modalBody').innerHTML = `
                    <form id="formCustomer">
                        <input class="form-control mb-2" name="name" value="${c.name}">
                        <input class="form-control mb-2" name="email" value="${c.email ?? ''}">
                        <input class="form-control mb-2" name="phone" value="${c.phone ?? ''}">
                        <input class="form-control mb-2" name="address" value="${c.address ?? ''}">
                        <button class="btn btn-primary" type="button" onclick="saveEdit(${c.id})">Update</button>
                    </form>
                `;
                const modal = new bootstrap.Modal(globalModal);
                modal.show();
            });
    };

    window.saveEdit = function (id) {
        const form = new FormData(document.getElementById('formCustomer'));
        form.append('_method', 'PUT');
        fetch('/api/customers/' + id, { method: 'POST', body: form })
            .then(() => {
                loadCustomers();
                bootstrap.Modal.getInstance(globalModal).hide();
            });
    };

    window.removeCustomer = function (id) {
        if (!confirm('Delete this customer?')) return;
        fetch('/api/customers/' + id, { method: 'DELETE' })
            .then(() => loadCustomers());
    };

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