<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= isset($tour['id']) ? 'Edit Tour' : 'Create Tour' ?> — Admin</title>
    <link rel="stylesheet" href="<?= base_url('css/uno.css') ?>">
</head>
<body class="font-sans bg-light p-5">
    <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md p-6 md:p-8">
        <a href="<?= base_url('admin/tours') ?>" class="inline-block mb-6 text-primary font-semibold hover:underline">
            ← Back to Tours
        </a>
        <h1 class="text-2xl md:text-3xl font-bold text-primary mb-6">
            <?= isset($tour['id']) ? 'Edit Tour' : 'Create New Tour' ?>
        </h1>

        <?php if (!empty($errors) && isset($errors['system'])): ?>
            <div class="bg-red-50 text-red-700 px-4 py-3 rounded-lg mb-6">
                <?= esc($errors['system']) ?>
            </div>
        <?php endif; ?>

        <form method="post" enctype="multipart/form-data" action="<?= base_url(isset($tour['id']) ? "admin/tours/update/{$tour['id']}" : 'admin/tours') ?>">
            <?= csrf_field() ?>

            <!-- Title -->
            <div class="mb-6">
                <label for="title" class="block text-sm font-semibold text-gray-700 mb-2">Tour Title *</label>
                <input 
                    type="text" 
                    id="title" 
                    name="title" 
                    required
                    value="<?= esc($tour['title'] ?? '') ?>"
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                <?php if (!empty($errors['title'])): ?>
                    <p class="mt-1 text-sm text-red-600"><?= esc($errors['title']) ?></p>
                <?php endif; ?>
            </div>

            <!-- Slug -->
            <div class="mb-6">
                <label for="slug" class="block text-sm font-semibold text-gray-700 mb-2">Slug (auto-generated)</label>
                <input 
                    type="text" 
                    id="slug" 
                    name="slug" 
                    readonly
                    value="<?= esc($tour['slug'] ?? '') ?>"
                    class="w-full px-4 py-2.5 bg-gray-100 rounded-lg"
                >
            </div>

            <!-- Grid Row: Duration, Difficulty, Route, Price -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <!-- Duration -->
                <div>
                    <label for="duration_days" class="block text-sm font-semibold text-gray-700 mb-2">Duration (Days) *</label>
                    <input 
                        type="number" 
                        id="duration_days" 
                        name="duration_days" 
                        min="1" 
                        required
                        value="<?= esc($tour['duration_days'] ?? '') ?>"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                    >
                    <?php if (!empty($errors['duration_days'])): ?>
                        <p class="mt-1 text-sm text-red-600"><?= esc($errors['duration_days']) ?></p>
                    <?php endif; ?>
                </div>

                <!-- Difficulty -->
                <div>
                    <label for="difficulty" class="block text-sm font-semibold text-gray-700 mb-2">Difficulty *</label>
                    <select 
                        id="difficulty" 
                        name="difficulty" 
                        required
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                    >
                        <option value="">-- Select --</option>
                        <option value="beginner" <?= (isset($tour['difficulty']) && $tour['difficulty'] === 'beginner') ? 'selected' : '' ?>>Beginner</option>
                        <option value="intermediate" <?= (isset($tour['difficulty']) && $tour['difficulty'] === 'intermediate') ? 'selected' : '' ?>>Intermediate</option>
                        <option value="advanced" <?= (isset($tour['difficulty']) && $tour['difficulty'] === 'advanced') ? 'selected' : '' ?>>Advanced</option>
                    </select>
                    <?php if (!empty($errors['difficulty'])): ?>
                        <p class="mt-1 text-sm text-red-600"><?= esc($errors['difficulty']) ?></p>
                    <?php endif; ?>
                </div>

                <!-- Route -->
                <div>
                    <label for="route" class="block text-sm font-semibold text-gray-700 mb-2">Route *</label>
                    <input 
                        type="text" 
                        id="route" 
                        name="route" 
                        required
                        value="<?= esc($tour['route'] ?? '') ?>"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                    >
                    <?php if (!empty($errors['route'])): ?>
                        <p class="mt-1 text-sm text-red-600"><?= esc($errors['route']) ?></p>
                    <?php endif; ?>
                </div>

                <!-- Price -->
                <div>
                    <label for="price_usd" class="block text-sm font-semibold text-gray-700 mb-2">Price (USD) *</label>
                    <input 
                        type="number" 
                        step="0.01" 
                        id="price_usd" 
                        name="price_usd" 
                        min="0" 
                        required
                        value="<?= esc($tour['price_usd'] ?? '') ?>"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                    >
                    <?php if (!empty($errors['price_usd'])): ?>
                        <p class="mt-1 text-sm text-red-600"><?= esc($errors['price_usd']) ?></p>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Description -->
            <div class="mb-6">
                <label for="description" class="block text-sm font-semibold text-gray-700 mb-2">Description *</label>
                <textarea 
                    id="description" 
                    name="description" 
                    required
                    rows="5"
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                ><?= esc($tour['description'] ?? '') ?></textarea>
                <?php if (!empty($errors['description'])): ?>
                    <p class="mt-1 text-sm text-red-600"><?= esc($errors['description']) ?></p>
                <?php endif; ?>
            </div>

            <!-- Images -->
            <div class="mb-6">
                <label for="images" class="block text-sm font-semibold text-gray-700 mb-2">Tour Images (JPG/PNG, max 2MB each)</label>
                <input 
                    type="file" 
                    id="images" 
                    name="images[]" 
                    multiple 
                    accept="image/*"
                    class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-dark"
                >
                <?php if (isset($tour['images']) && !empty($tour['images'])): ?>
                    <div class="flex flex-wrap gap-2 mt-3">
                        <?php foreach (json_decode($tour['images'], true) as $img): ?>
                            <img 
                                src="<?= base_url('assets/uploads/tours/' . $img) ?>" 
                                alt="Tour image" 
                                class="w-20 h-20 object-cover rounded border border-gray-200"
                            >
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Active Checkbox -->
            <div class="mb-8">
                <label class="flex items-center cursor-pointer">
                    <input 
                        type="checkbox" 
                        name="is_active" 
                        value="1" 
                        <?= (isset($tour['is_active']) && $tour['is_active']) ? 'checked' : '' ?>
                        class="form-checkbox h-5 w-5 text-primary rounded focus:ring-primary"
                    >
                    <span class="ml-2 text-gray-700">Active (visible on frontend)</span>
                </label>
            </div>

            <!-- Actions -->
            <div class="flex flex-col sm:flex-row gap-3">
                <button 
                    type="submit" 
                    class="flex-1 bg-primary text-white font-semibold py-2.5 px-6 rounded-lg hover:bg-primary-dark transition"
                >
                    <?= isset($tour['id']) ? 'Update Tour' : 'Create Tour' ?>
                </button>
                <a 
                    href="<?= base_url('admin/tours') ?>" 
                    class="flex-1 text-center bg-white text-primary font-semibold py-2.5 px-6 rounded-lg border border-primary hover:bg-gray-50 transition"
                >
                    Cancel
                </a>
            </div>
        </form>
    </div>
</body>
</html>