<div class="container mx-auto px-4 py-6">
    <div class="flex items-center mb-6">
        <a href="<?= base_url('admin/contents/banners') ?>" class="text-blue-600 hover:text-blue-800 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
        </a>
        <h1 class="text-2xl font-bold text-[#333]">Edit Banner</h1>
    </div>

    <!-- Flash Messages -->
    <?php if ($this->session->flashdata('message')): ?>
        <div class="mb-4 alert flex items-center justify-between bg-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-100 border-l-4 border-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-800 px-6 py-4 rounded-lg shadow-lg transition transform duration-300">
            <div class="flex items-center">
                <i data-feather="<?php echo $this->session->flashdata('message_type') === 'success' ? 'check-circle' : 'x-circle'; ?>" class="h-6 w-6 mr-3"></i>
                <span class="font-semibold"><?php echo $this->session->flashdata('message'); ?></span>
            </div>
            <button class="ml-4 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 hover:text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-700 focus:outline-none" onclick="this.parentElement.style.display='none'">
                <i data-feather="x" class="h-5 w-5"></i>
            </button>
        </div>
    <?php endif; ?>

    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-6">
            <?= form_open_multipart('admin/contents/update_banner/' . $banner->carousel_banner_id, 'class="space-y-4"') ?>
            <!-- Hidden ID -->
            <input type="hidden" name="carousel_banner_id" value="<?= $banner->carousel_banner_id ?>">

            <!-- Banner Image -->
            <div>
                <label for="image_url" class="block text-sm font-medium text-[#333] mb-1">Banner Image / Video Link<span class="text-red-600">*</span></label>
                <textarea name="image_url" id="image_url" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Masukin link dari google cloud storage ya, panggil IT aja udeh"><?= $banner->image_url ?></textarea>
            </div>

            <!-- CTA Text -->
            <div>
                <label for="cta_text" class="block text-sm font-medium text-[#333] mb-1">CTA Text</label>
                <textarea name="cta_text" id="cta_text" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Masukkan teks CTA (Call to Action)"><?= $banner->cta_text ?></textarea>
            </div>

            <!-- CTA Button -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="cta_button_text" class="block text-sm font-medium text-[#333] mb-1">CTA Button Text</label>
                    <input type="text" name="cta_button_text" id="cta_button_text" value="<?= $banner->cta_button_text ?>" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Contoh: Beli Sekarang">
                </div>
                <div>
                    <label for="cta_button_link" class="block text-sm font-medium text-[#333] mb-1">CTA Button Link</label>
                    <input type="url" name="cta_button_link" id="cta_button_link" value="<?= $banner->cta_button_link ?>" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="https://example.com/product">
                </div>
            </div>

            <!-- Order Number -->
            <div>
                <label for="order_number" class="block text-sm font-medium text-[#333] mb-1">Urutan <span class="text-red-600">*</span></label>
                <input type="number" name="order_number" id="order_number" value="<?= $banner->order_number ?>" min="1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
                <p class="mt-1 text-xs text-gray-500">Urutan banner (urutan terkecil akan muncul pertama).</p>
            </div>

            <!-- Status -->
            <div class="flex items-center">
                <input type="checkbox" name="is_active" id="is_active" value="1" <?= $banner->is_active ? 'checked' : '' ?> class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                <label for="is_active" class="ml-2 block text-sm text-[#333]">Banner Aktif</label>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end space-x-3 pt-4">
                <a href="<?= site_url('admin/contents/banners') ?>" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-[#333] bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    Batal
                </a>
                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#7A4397] hover:bg-white hover:border-[#7A4397] hover:text-[#7A4397] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Simpan Perubahan
                </button>
            </div>
            <?= form_close() ?>
        </div>
    </div>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script>
    let ctaTextEditor;

    ClassicEditor
        .create(document.querySelector('#cta_text'), {
            toolbar: [
                'heading', '|',
                'bold', 'italic', 'link', '|',
                'bulletedList', 'numberedList', '|',
                'outdent', 'indent', '|',
                'blockQuote', '|',
                'undo', 'redo'
            ],
            htmlSupport: {
                disallow: [{
                    name: /^h[1-6]$/,
                }]
            }
        })
        .then(editor => {
            ctaTextEditor = editor;
        })
        .catch(error => {
            console.error(error);
        });
</script>