
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add MAC Playlist</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- SweetAlert2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

    <style>
        :root {
            --primary-color: #4f46e5;
            --gradient-bg: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            --card-bg: #ffffff;
        }

        body {
            background: #f4f6fb;
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            padding-top: 60px;
        }

        .page-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .page-header h1 {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .page-header p {
            color: #6c757d;
            font-size: 1rem;
        }

        .card {
            max-width: 650px;
            margin: 0 auto;
            border: none;
            border-radius: 16px;
            background: var(--card-bg);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        }

        .card-header {
            background: var(--gradient-bg);
            color: white;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 1.25rem 1.5rem;
            text-align: center;
        }

        .card-header h3 {
            margin: 0;
            font-weight: 600;
            font-size: 1.5rem;
        }

        .card-body {
            padding: 2rem;
        }

        label {
            font-weight: 600;
            color: #374151;
        }

        .form-control, .form-select {
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            padding: 0.65rem 1rem;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
        }

        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            border-radius: 10px;
            padding: 0.65rem 1.5rem;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .btn-primary:hover {
            background-color: #4338ca;
            transform: translateY(-1px);
        }

        footer {
            margin-top: 50px;
            text-align: center;
            color: #9ca3af;
            font-size: 0.9rem;
        }

        @media (max-width: 576px) {
            .card-body {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>

<div class="page-header">
    <h1>MAC Playlist Manager</h1>
    <p>Add a new MAC-based user entry below.</p>
</div>

<div class="card shadow-lg">
    <div class="card-header">
        <h3>Add New Playlist</h3>
    </div>
    <div class="card-body">
        <form id="playlist_form">
            <div class="mb-3">
                <label for="dns_id" class="form-label">DNS ID</label>
                <select class="form-select" id="dns_id" required>
                    <option value="">Select DNS</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="mac_address" class="form-label">MAC Address</label>
                <input type="text" class="form-control" id="mac_address" placeholder="e.g. 00:1A:2B:3C:4D:5E" required>
            </div>
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input type="text" class="form-control" id="username" placeholder="Enter Username" required>
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password" class="form-control" id="password" placeholder="Enter Password" required>
            </div>
            <div class="mb-4">
                <label for="pin" class="form-label">PIN</label>
                <input type="text" class="form-control" id="pin" placeholder="Enter PIN" required>
            </div>
            <div class="text-end">
                <button type="button" class="btn btn-primary" onclick="savePlaylist()">💾 Save Playlist</button>
            </div>
        </form>
    </div>
</div>

<footer>
    <p>&copy; 2026 MAC Playlist System • Powered by Bootstrap 5</p>
</footer>

<!-- JS Dependencies -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
function loadDnsOptions(selectedValue = "") {
    fetch("../actions/mac_actions.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "get_dns_options" }),
    })
    .then((response) => response.json())
    .then((data) => {
        if (data.success) {
            const dnsDropdown = document.getElementById("dns_id");
            dnsDropdown.innerHTML = '<option value="">Select DNS</option>';
            data.data.forEach((dns) => {
                const selected = dns.id == selectedValue ? "selected" : "";
                dnsDropdown.innerHTML += `<option value="${dns.id}" ${selected}>${dns.title}</option>`;
            });
        }
    })
    .catch((error) => console.error("Error loading DNS options:", error));
}

function validateMACAddress(mac) {
    const regex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
    return regex.test(mac);
}

function savePlaylist() {
    const dns_id = document.getElementById("dns_id").value.trim();
    const mac_address = document.getElementById("mac_address").value.trim();
    const username = document.getElementById("username").value.trim();
    const password = document.getElementById("password").value.trim();
    const pin = document.getElementById("pin").value.trim();

    if (!dns_id || !mac_address || !username || !password || !pin) {
        Swal.fire("Error", "All fields are required!", "error");
        return;
    }

    if (!validateMACAddress(mac_address)) {
        Swal.fire("Error", "Invalid MAC Address format!", "error");
        return;
    }

    fetch("../actions/mac_actions.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            action: "add",
            dns_id,
            mac_address,
            username,
            password,
            pin
        }),
    })
    .then((response) => response.json())
    .then((data) => {
        Swal.fire(
            data.success ? "Success" : "Error",
            data.message,
            data.success ? "success" : "error"
        );
        if (data.success) {
            document.getElementById("playlist_form").reset();
        }
    })
    .catch((error) => console.error("Error saving playlist:", error));
}

document.addEventListener("DOMContentLoaded", () => {
    loadDnsOptions();
});
</script>

</body>
</html>