<?= $this->extend('layouts/admin') ?>

<?= $this->section('content') ?>

<div>
    <div style="max-width: 800px; margin: 0 auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;">
            <h1><?= $title ?></h1>
            <a href="<?= base_url('admin/gallery') ?>" class="btn" style="border: 1px solid var(--text-muted); color: var(--text-muted);">Cancel</a>
        </div>

        <div class="service-card" style="padding: 40px; background: var(--bg-card);">
            <form action="<?= base_url('admin/gallery_save') ?>" method="post" enctype="multipart/form-data">
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Media Title</label>
                    <input type="text" name="title" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;" required placeholder="Enter title for the image or video">
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                    <div>
                        <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Media Type</label>
                        <select name="type" id="media_type" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;" onchange="toggleInputs()">
                            <option value="image">Image</option>
                            <option value="video">Video</option>
                        </select>
                    </div>
                    <div>
                        <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Category</label>
                        <input type="text" name="category" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;" placeholder="e.g. Residential, Commercial">
                    </div>
                </div>

                <div id="image_input" style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Upload Image</label>
                    <input type="file" name="file" id="file_input" style="width: 100%; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;" required>
                </div>

                <div id="video_input" style="margin-bottom: 20px; display: none;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Video URL (YouTube/Vimeo)</label>
                    <input type="url" name="video_url" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;" placeholder="https://www.youtube.com/watch?v=...">
                    <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 5px;">Or upload a video file instead:</p>
                    <input type="file" name="video_file" style="width: 100%; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;">
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px;">Save Media</button>
            </form>
        </div>
    </div>
</div>

<script>
function toggleInputs() {
    const type = document.getElementById('media_type').value;
    const imageInput = document.getElementById('image_input');
    const videoInput = document.getElementById('video_input');
    const fileInput = document.getElementById('file_input');

    if (type === 'image') {
        imageInput.style.display = 'block';
        videoInput.style.display = 'none';
        fileInput.required = true;
    } else {
        imageInput.style.display = 'none';
        videoInput.style.display = 'block';
        fileInput.required = false;
    }
}
</script>

<?= $this->endSection() ?>
