<?php
include 'auth.php';
require_once '../config/db.php';

$id = (int)($_GET['id'] ?? 0);
if (!$id) { header("Location: categories.php"); exit(); }

$category = $conn->query("SELECT * FROM local_tour_categories WHERE id = $id")->fetch_assoc();
if (!$category) { header("Location: categories.php"); exit(); }

$error = '';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name        = sanitize($conn, $_POST['name']);
    $slug        = sanitize($conn, strtolower(preg_replace('/[^a-z0-9]+/i', '-', trim($_POST['slug']))));
    $description = sanitize($conn, $_POST['description']);
    $sort_order  = (int)$_POST['sort_order'];

    if (empty($name) || empty($slug)) {
        $error = "Name and slug are required.";
    } else {
        $check = $conn->query("SELECT id FROM local_tour_categories WHERE slug = '$slug' AND id != $id");
        if ($check && $check->num_rows > 0) {
            $error = "A different category with this slug already exists.";
        } else {
            $sql = "UPDATE local_tour_categories SET name='$name', slug='$slug', description='$description', sort_order=$sort_order WHERE id=$id";
            if ($conn->query($sql)) {
                $_SESSION['success_msg'] = "Category updated successfully!";
                header("Location: categories.php");
                exit();
            } else {
                $error = "Database error: " . $conn->error;
            }
        }
    }
    // Re-populate from POST on error
    $category['name'] = $_POST['name'];
    $category['slug'] = $_POST['slug'];
    $category['description'] = $_POST['description'];
    $category['sort_order'] = $_POST['sort_order'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Category | Admin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Inter', sans-serif; }
        body { background: #f0f2f5; margin: 0; }
        .admin-sidebar { position: fixed; top: 0; left: 0; width: 260px; height: 100vh; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); z-index: 100; padding: 30px 0; display: flex; flex-direction: column; box-shadow: 4px 0 20px rgba(0,0,0,0.3); }
        .sidebar-logo { text-align: center; padding: 0 20px 30px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px; }
        .sidebar-logo img { height: 70px; filter: brightness(0) invert(1); }
        .sidebar-logo h6 { color: #aaa; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; margin-top: 8px; }
        .sidebar-nav a { display: flex; align-items: center; padding: 12px 25px; color: rgba(255,255,255,0.65); text-decoration: none; font-size: 14px; font-weight: 500; transition: 0.3s; gap: 12px; border-left: 3px solid transparent; }
        .sidebar-nav a:hover, .sidebar-nav a.active { color: #fff; background: rgba(255,255,255,0.08); border-left-color: #ff6900; }
        .sidebar-nav a i { width: 20px; text-align: center; font-size: 15px; }
        .sidebar-section { padding: 15px 25px 5px; color: rgba(255,255,255,0.3); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; }
        .sidebar-bottom { margin-top: auto; padding: 20px 25px; border-top: 1px solid rgba(255,255,255,0.1); }
        .sidebar-bottom a { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; padding: 10px; border-radius: 10px; transition: 0.3s; }
        .sidebar-bottom a:hover { color: #fff; background: rgba(255,0,0,0.2); }
        .admin-main { margin-left: 260px; min-height: 100vh; padding: 30px; }
        .admin-topbar { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 16px; padding: 15px 25px; margin-bottom: 30px; box-shadow: 0 2px 20px rgba(0,0,0,0.06); }
        .form-section { background: #fff; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: 35px; margin-bottom: 24px; }
        .form-section h6 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #ff6900; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #fff3e0; }
        .form-label { font-weight: 600; font-size: 13px; color: #444; margin-bottom: 6px; }
        .form-control, .form-select { border-radius: 12px; padding: 12px 16px; border: 1.5px solid #e8e8e8; font-size: 14px; transition: 0.2s; }
        .form-control:focus, .form-select:focus { border-color: #ff6900; box-shadow: 0 0 0 3px rgba(255,105,0,0.1); outline: none; }
        .slug-preview { background: #f8f9fa; border: 1.5px dashed #ddd; border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #666; font-family: monospace; }
    </style>
</head>
<body>

<div class="admin-sidebar">
    <div class="sidebar-logo">
        <img src="../assets/img/logo.png" alt="Logo" onerror="this.style.display='none'">
        <h6>Admin Panel</h6>
    </div>
    <div class="sidebar-nav">
        <a href="index.php"><i class="fas fa-home"></i> Dashboard</a>
        <div class="sidebar-section" style="padding-top:20px;">Tour Management</div>
        <a href="packages.php"><i class="fas fa-globe"></i> International Tours</a>
        <a href="add-package.php"><i class="fas fa-plus-circle"></i> Add Tour</a>
        <a href="local-tours.php"><i class="fas fa-map-marked-alt"></i> Local Tours</a>
        <a href="add-local-tour.php"><i class="fas fa-plus"></i> Add Local Tour</a>
        <a href="categories.php" class="active"><i class="fas fa-tags"></i> Categories</a>
        <div class="sidebar-section" style="padding-top:20px;">Homepage</div>
        <a href="destinations.php"><i class="fas fa-map-pin"></i> Destinations</a>
        <a href="add-destination.php"><i class="fas fa-plus-circle"></i> Add Destination</a>
        <a href="testimonials.php"><i class="fas fa-star"></i> Testimonials</a>
        <a href="add-testimonial.php"><i class="fas fa-plus-circle"></i> Add Testimonial</a>
        <a href="google-reviews.php"><i class="fab fa-google"></i> Google Reviews</a>
        <div class="sidebar-section" style="padding-top:20px;">Media</div>
        <a href="manage-gallery.php"><i class="fas fa-images"></i> Gallery Manager</a>
        <div class="sidebar-section" style="padding-top:20px;">Site</div>
        <a href="../index.php" target="_blank"><i class="fas fa-external-link-alt"></i> View Website</a>
    </div>
    <div class="sidebar-bottom">
        <a href="logout.php"><i class="fas fa-sign-out-alt text-danger"></i> Logout</a>
    </div>
</div>

<div class="admin-main">
    <div class="admin-topbar">
        <div>
            <a href="categories.php" class="text-decoration-none text-muted small"><i class="fas fa-arrow-left me-1"></i> Back to Categories</a>
            <h5 class="fw-bold mb-0 mt-1">Edit Category</h5>
        </div>
    </div>

    <?php if ($error): ?>
        <div class="alert alert-danger border-0 rounded-4 shadow-sm mb-4">
            <i class="fas fa-exclamation-circle me-2"></i><?= $error ?>
        </div>
    <?php endif; ?>

    <form method="POST">
        <div class="form-section">
            <h6><i class="fas fa-tag me-2"></i>Category Details</h6>
            <div class="row g-4">
                <div class="col-md-6">
                    <label class="form-label">Category Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" id="cat-name" class="form-control"
                           placeholder="e.g. Beach Tours" value="<?= htmlspecialchars($category['name']) ?>" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Slug <span class="text-danger">*</span></label>
                    <input type="text" name="slug" id="cat-slug" class="form-control"
                           placeholder="e.g. beach-tours" value="<?= htmlspecialchars($category['slug']) ?>">
                    <div class="slug-preview mt-2">
                        URL: /local-tours?category=<span id="slug-show"><?= htmlspecialchars($category['slug']) ?></span>
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Sort Order</label>
                    <input type="number" name="sort_order" class="form-control"
                           value="<?= htmlspecialchars($category['sort_order']) ?>" min="0">
                </div>
                <div class="col-md-12">
                    <label class="form-label">Description <span class="text-muted small">(optional)</span></label>
                    <textarea name="description" class="form-control" rows="3"
                              placeholder="Brief description..."><?= htmlspecialchars($category['description'] ?? '') ?></textarea>
                </div>
            </div>
        </div>

        <div class="d-flex gap-3">
            <button type="submit" class="btn btn-primary rounded-pill px-5 py-3 fw-bold shadow-sm">
                <i class="fas fa-save me-2"></i>Update Category
            </button>
            <a href="categories.php" class="btn btn-light rounded-pill px-4 py-3">Cancel</a>
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    const slugInput = document.getElementById('cat-slug');
    const slugShow  = document.getElementById('slug-show');
    slugInput.addEventListener('input', function() {
        slugShow.textContent = this.value || 'your-slug';
    });
</script>
</body>
</html>
