@extends('layouts.admin')

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

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

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Speed</th>
            <th>Price</th>
            <th>Validity (days)</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="packages_table"></tbody>
</table>

<script>
function loadPackages() {
    fetch('/api/packages')
        .then(r => r.json())
        .then(rows => {
            let html = '';
            rows.forEach(p => {
                html += `
                    <tr>
                        <td>${p.id}</td>
                        <td>${p.name}</td>
                        <td>${p.speed ?? ''}</td>
                        <td>${p.price}</td>
                        <td>${p.validity_days ?? ''}</td>
                        <td>
                            <button class="btn btn-sm btn-warning" onclick="openEdit(${p.id})">Edit</button>
                            <button class="btn btn-sm btn-danger" onclick="removePackage(${p.id})">Delete</button>
                        </td>
                    </tr>
                `;
            });
            document.getElementById('packages_table').innerHTML = html;
        });
}

function openCreate() {
    document.getElementById('modalTitle').innerText = 'Add Package';
    document.getElementById('modalBody').innerHTML = `
        <form id="formPackage">
            <input class="form-control mb-2" name="name" placeholder="Name">
            <input class="form-control mb-2" name="speed" placeholder="Speed (e.g. 10Mbps)">
            <input class="form-control mb-2" name="price" placeholder="Price">
            <input class="form-control mb-2" name="validity_days" placeholder="Validity Days">
            <button class="btn btn-primary" type="button" onclick="saveCreate()">Save</button>
        </form>
    `;
    const modal = new bootstrap.Modal(globalModal);
    modal.show();
}

function saveCreate() {
    const form = new FormData(document.getElementById('formPackage'));
    fetch('/api/packages', { method: 'POST', body: form })
        .then(r => {
            if (!r.ok) return r.json().then(e => Promise.reject(e));
            return r.json();
        })
        .then(() => {
            loadPackages();
            bootstrap.Modal.getInstance(globalModal).hide();
        })
        .catch(err => {
            alert('Error: ' + JSON.stringify(err));
        });
}

function openEdit(id) {
    fetch('/api/packages/' + id)
        .then(r => r.json())
        .then(p => {
            document.getElementById('modalTitle').innerText = 'Edit Package';
            document.getElementById('modalBody').innerHTML = `
                <form id="formPackage">
                    <input class="form-control mb-2" name="name" value="${p.name}">
                    <input class="form-control mb-2" name="speed" value="${p.speed ?? ''}">
                    <input class="form-control mb-2" name="price" value="${p.price}">
                    <input class="form-control mb-2" name="validity_days" value="${p.validity_days ?? ''}">
                    <button class="btn btn-primary" type="button" onclick="saveEdit(${p.id})">Update</button>
                </form>
            `;
            const modal = new bootstrap.Modal(globalModal);
            modal.show();
        });
}

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

    fetch('/api/packages/' + id, { method: 'POST', body: form })
        .then(r => {
            if (!r.ok) return r.json().then(e => Promise.reject(e));
            return r.json();
        })
        .then(() => {
            loadPackages();
            bootstrap.Modal.getInstance(globalModal).hide();
        })
        .catch(err => {
            alert('Error: ' + JSON.stringify(err));
        });
}

function removePackage(id) {
    if (!confirm('Delete this package?')) return;

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

loadPackages();
</script>
@endsection