@extends('layouts.admin')

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

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

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>IP Address</th>
            <th>Location</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="routers_table"></tbody>
</table>

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

    // ============================
    // LOAD DATA
    // ============================
    window.loadRouters = function () {
        fetch('/api/routers')
            .then(r => r.json())
            .then(rows => {
                let html = '';
                rows.forEach(rt => {
                    html += `
                        <tr>
                            <td>${rt.id}</td>
                            <td>${rt.name}</td>
                            <td>${rt.ip_address}</td>
                            <td>${rt.location ?? ''}</td>
                            <td>
                                <button class="btn btn-sm btn-warning" onclick="openEdit(${rt.id})">Edit</button>
                                <button class="btn btn-sm btn-danger" onclick="removeRouter(${rt.id})">Delete</button>
                            </td>
                        </tr>
                    `;
                });
                document.getElementById('routers_table').innerHTML = html;
            });
    };

    // ============================
    // CREATE
    // ============================
    window.openCreate = function () {
        document.getElementById('modalTitle').innerText = 'Add Router';
        document.getElementById('modalBody').innerHTML = `
            <form id="formRouter">
                <input class="form-control mb-2" name="name" placeholder="Router Name">
                <input class="form-control mb-2" name="ip_address" placeholder="IP Address">
                <input class="form-control mb-2" name="username" placeholder="Username">
                <input class="form-control mb-2" name="password" placeholder="Password">
                <input class="form-control mb-2" name="location" placeholder="Location">
                <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('formRouter'));
        fetch('/api/routers', { method: 'POST', body: form })
            .then(() => {
                loadRouters();
                bootstrap.Modal.getInstance(globalModal).hide();
            });
    };

    // ============================
    // EDIT
    // ============================
    window.openEdit = function (id) {
        fetch('/api/routers/' + id)
            .then(r => r.json())
            .then(rt => {
                document.getElementById('modalTitle').innerText = 'Edit Router';
                document.getElementById('modalBody').innerHTML = `
                    <form id="formRouter">
                        <input class="form-control mb-2" name="name" value="${rt.name}">
                        <input class="form-control mb-2" name="ip_address" value="${rt.ip_address}">
                        <input class="form-control mb-2" name="username" value="${rt.username}">
                        <input class="form-control mb-2" name="password" value="${rt.password}">
                        <input class="form-control mb-2" name="location" value="${rt.location ?? ''}">
                        <button class="btn btn-primary" type="button" onclick="saveEdit(${rt.id})">Update</button>
                    </form>
                `;

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

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

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

    // ============================
    // DELETE
    // ============================
    window.removeRouter = function (id) {
        if (!confirm('Delete this router?')) return;

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

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