@extends('layouts.admin')

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

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

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Customer</th>
            <th>Username</th>
            <th>Type</th>
            <th>Package</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="services_table"></tbody>
</table>

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

    // ============================
    // GLOBAL FUNCTIONS
    // ============================

    window.loadServices = function () {
        fetch('/api/services')
            .then(r => r.json())
            .then(rows => {
                let html = '';
                rows.forEach(s => {
                    html += `
                        <tr>
                            <td>${s.id}</td>
                            <td>${s.customer?.name ?? ''}</td>
                            <td>${s.username}</td>
                            <td>${s.type}</td>
                            <td>${s.package?.name ?? ''}</td>
                            <td>${s.status ? 'Active' : 'Inactive'}</td>
                            <td>
                                <button class="btn btn-sm btn-danger" onclick="removeService(${s.id})">Delete</button>
                            </td>
                        </tr>
                    `;
                });
                document.getElementById('services_table').innerHTML = html;
            });
    };

    window.openCreate = function () {
        document.getElementById('modalTitle').innerText = 'Add Service';
        document.getElementById('modalBody').innerHTML = `
            <form id="formService">
                <input class="form-control mb-2" name="customer_id" placeholder="Customer ID">
                <input class="form-control mb-2" name="router_id" placeholder="Router ID">
                <input class="form-control mb-2" name="package_id" placeholder="Package ID">
                <input class="form-control mb-2" name="username" placeholder="PPPoE Username">
                <input class="form-control mb-2" name="password" placeholder="PPPoE Password">
                <select class="form-control mb-2" name="type">
                    <option value="pppoe">PPPoE</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('formService'));
        fetch('/api/services', { method: 'POST', body: form })
            .then(() => {
                loadServices();
                bootstrap.Modal.getInstance(globalModal).hide();
            });
    };

    window.removeService = function (id) {
        if (!confirm('Delete this service?')) return;

        fetch('/api/services/' + id, { method: 'DELETE' })
            .then(() => loadServices());
    };

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