<?php
session_start();

if (!isset($_SESSION['id'])) {
    header("Location: login.php");
    exit();
}

include('includes/header.php');

// Directory where QR images are stored
$directory = "uploads/";
?>

<style>
    .qr-header-title {
        font-size: 1.4rem;
        font-weight: 700;
        color: #e5e7eb;
        margin-bottom: 10px;
    }
    .qr-subtitle {
        font-size: 0.9rem;
        color: #9ca3af;
        margin-bottom: 16px;
    }
    .qr-btn-primary {
        background: linear-gradient(90deg,#22c55e,#a3e635);
        border: none;
        color: #020617;
        padding: 8px 18px;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 999px;
        cursor: pointer;
    }
    .qr-btn-primary:hover {
        filter: brightness(1.05);
        box-shadow: 0 0 18px rgba(34,197,94,0.35);
    }
    .qr-btn-outline {
        background: transparent;
        border-radius: 999px;
        border: 1px solid rgba(248,250,252,0.3);
        color: #e5e7eb;
        padding: 6px 14px;
        font-size: 0.8rem;
        cursor: pointer;
    }
    .qr-btn-outline--danger {
        border-color: rgba(248,113,113,0.7);
        color: #fecaca;
    }
    .qr-btn-outline--danger:hover {
        background: rgba(248,113,113,0.12);
    }
    .qr-btn-outline--edit {
        border-color: rgba(59,130,246,0.7);
        color: #bfdbfe;
    }
    .qr-btn-outline--edit:hover {
        background: rgba(59,130,246,0.12);
    }
    .qr-table th,
    .qr-table td {
        border-top: 1px solid rgba(148,163,184,0.25);
        font-size: 0.85rem;
        vertical-align: middle;
    }
    .qr-table th {
        color: #e5e7eb;
        font-weight: 600;
        background: rgba(15,23,42,0.85);
    }
    .qr-table tbody tr {
        background: transparent;
    }
    .qr-table tbody tr:hover {
        background: rgba(15,23,42,0.75);
    }
    .qr-image {
        border-radius: 10px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.45);
    }
    .qr-form-title {
        font-size: 1rem;
        font-weight: 600;
        color: #e5e7eb;
        margin-bottom: 10px;
    }
    .qr-form-wrapper {
        margin-top: 18px;
        padding: 14px 16px;
        border-radius: 14px;
        background: radial-gradient(circle at top left, rgba(56,189,248,0.12), transparent 60%),
                    radial-gradient(circle at bottom right, rgba(59,130,246,0.18), transparent 60%),
                    rgba(15,23,42,0.85);
    }
</style>

<div class="container-fluid page-shell-esso">
    <div class="panel-card-esso">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
                <h1 class="qr-header-title">QR Code Manager</h1>
                <div class="qr-subtitle">Add, edit or remove QR codes used by your panel.</div>
            </div>
            <button class="qr-btn-primary" type="button" onclick="showForm()">
                <i class="fa fa-plus mr-1"></i> Add QR Code
            </button>
        </div>

        <!-- Add QR form -->
        <div class="qr-form-wrapper" id="bannerForm" style="display:none;">
            <div class="qr-form-title">New QR Code</div>
            <form action="upload.php" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="label-esso" for="title"><strong>Title</strong></label>
                    <input type="text" name="title" id="title" class="form-control input-esso" placeholder="Ex: WhatsApp Support" required>
                </div>
                <div class="form-group">
                    <label class="label-esso" for="banner"><strong>Image file</strong></label>
                    <input type="file" name="banner" id="banner" class="form-control input-esso" accept="image/*" required>
                </div>
                <button class="qr-btn-primary" type="submit" name="submit">Upload</button>
            </form>
        </div>

        <hr class="mt-4 mb-3" style="border-color: rgba(148,163,184,0.4);">

        <h2 class="qr-form-title">Existing QR Codes</h2>

        <div class="table-responsive">
            <table class="table table-sm qr-table text-light">
                <thead>
                    <tr class="text-center">
                        <th style="width:35%;">Title</th>
                        <th style="width:35%;">Image</th>
                        <th style="width:30%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                <?php
                if (is_dir($directory) && is_readable($directory)) {
                    $banner_files = glob($directory . "*.{jpg,jpeg,png,gif}", GLOB_BRACE);

                    if ($banner_files) {
                        foreach ($banner_files as $file) {
                            $filename      = pathinfo($file, PATHINFO_FILENAME);
                            $file_extension = pathinfo($file, PATHINFO_EXTENSION);
                            $full_filename  = $filename . '.' . $file_extension;

                            echo "<tr>";
                            echo "<td class='text-center'>" . htmlspecialchars($filename, ENT_QUOTES) . "</td>";
                            echo "<td class='text-center'><img class='qr-image' src='" . htmlspecialchars($file, ENT_QUOTES) . "' alt='" . htmlspecialchars($filename, ENT_QUOTES) . "' width='110'></td>";
                            echo "<td class='text-center'>";
                            echo "<button class='qr-btn-outline qr-btn-outline--edit mr-2' type='button' onclick='showEditForm(\"" . addslashes($filename) . "\", \"" . addslashes($filename) . "\")'>Edit</button>";
                            echo "<button class='qr-btn-outline qr-btn-outline--danger' type='button' onclick='confirmDelete(\"" . addslashes($full_filename) . "\")'>Delete</button>";
                            echo "</td>";
                            echo "</tr>";
                        }
                    } else {
                        echo "<tr><td colspan='3' class='text-center text-muted'>No QR codes found.</td></tr>";
                    }
                } else {
                    echo "<tr><td colspan='3' class='text-center text-warning'>The uploads directory does not exist or is not accessible.</td></tr>";
                }
                ?>
                </tbody>
            </table>
        </div>

        <!-- Edit QR form -->
        <div class="qr-form-wrapper" id="editBannerForm" style="display:none;">
            <div class="qr-form-title">Edit QR Code</div>
            <form action="edit.php" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="label-esso" for="editTitle"><strong>New title</strong></label>
                    <input type="text" name="editTitle" id="editTitle" class="form-control input-esso" required>
                </div>
                <div class="form-group">
                    <label class="label-esso" for="editBanner"><strong>New image (optional)</strong></label>
                    <input type="file" name="editBanner" id="editBanner" class="form-control input-esso" accept="image/*">
                </div>
                <input type="hidden" name="newTitle" id="newTitle">
                <button class="qr-btn-primary" type="submit" name="submit">Save</button>
            </form>
        </div>

        <?php
        // Deletion logic
        if (isset($_GET['delete'])) {
            $filename = basename($_GET['delete']);
            $filepath = $directory . $filename;

            if (file_exists($filepath)) {
                unlink($filepath);
                echo "<script>alert('QR code ".htmlspecialchars($filename, ENT_QUOTES)." deleted successfully.');window.location.href='qrcode.php';</script>";
            }
        }
        ?>
    </div>
</div>

<script>
function showForm() {
    document.getElementById("bannerForm").style.display = "block";
}

function showEditForm(filename, title) {
    document.getElementById("editTitle").value = title;
    document.getElementById("newTitle").value = title;
    document.getElementById("editBannerForm").style.display = "block";
}

function confirmDelete(filename) {
    if (confirm("Are you sure you want to delete the QR code '" + filename + "'?")) {
        window.location.href = "qrcode.php?delete=" + encodeURIComponent(filename);
    }
}
</script>

<?php include 'includes/footer.php'; ?>
