<?= $this->extend('admin/layout'); ?> 
<?= $this->section('content'); ?> 
<div class="card">     
    <div class="card-header border-0 pt-6">         
        <div class="card-title"><h2><?= esc($title); ?></h2></div>     
    </div>     
    <form action="<?= adminUrl('web-stories/add'); ?>" method="post" enctype="multipart/form-data">         
        <?= csrf_field(); ?>         
        <div class="card-body pt-5">             
            <div class="row">                 
                <div class="col-lg-8">                     
                    <div class="mb-5">                         
                        <label class="required form-label">Title</label>                         
                        <input type="text" name="title" class="form-control" required placeholder="Story Title">                     
                    </div>                                          
                    <div class="mb-5">                         
                        <label class="form-label">Summary / Description</label>                         
                        <textarea name="summary" class="form-control" rows="3" placeholder="Brief description for SEO"></textarea>                     
                    </div>                     
                    
                    <h3 class="card-title mt-10 mb-5 fw-bold">Story Slides</h3>                     
                    
                    <div id="slidesContainer">                         
                        <div class="slide-item border rounded p-5 mb-5 bg-light position-relative">                             
                            <div class="d-flex justify-content-between mb-3">                                 
                                <h5 class="fw-bold">Slide 1</h5>                             
                            </div>                                                          
                            
                            <!-- BEAUTIFUL VISUAL BOX FOR SLIDE (Direct Upload) -->
                            <div class="mb-5">
                                <label class="required form-label text-primary">Media Image/Video</label>
                                <div class="image-input image-input-outline position-relative d-inline-block">
                                    <div class="image-input-wrapper shadow-sm w-125px h-125px">
                                        <img src="<?= base_url('assets/media/no-image.jpg'); ?>" class="w-100 h-100 object-fit-cover slide-img-preview"/>
                                    </div>
                                    <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow position-absolute" style="bottom: -10px; right: -10px;">
                                        <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></i>
                                        <!-- Real file input that sends data to controller -->
                                        <input type="file" name="slide_image_file[]" class="d-none slide-file-input" accept="image/*,video/mp4,video/webm">
                                        <!-- Empty hidden field so array size matches -->
                                        <input type="hidden" name="slide_image_url[]" value="">
                                    </label>
                                </div>
                                <div class="text-muted fs-7 mt-2">Click pencil icon to upload media.</div>
                            </div>
                            
                            <div class="mb-3">                                 
                                <label class="form-label">Slide Heading (Optional)</label>                                 
                                <input type="text" name="slide_heading[]" class="form-control" placeholder="Large text on slide">                             
                            </div>                             
                            <div class="mb-3">                                 
                                <label class="form-label">Slide Description (Optional)</label>                                 
                                <textarea name="slide_description[]" class="form-control" rows="2" placeholder="Small text below heading"></textarea>                             
                            </div>                             
                            <div class="mb-3">                                 
                                <label class="form-label">Link (Optional)</label>                                 
                                <input type="url" name="slide_link[]" class="form-control" placeholder="Swipe up link">                             
                            </div>                         
                        </div>                     
                    </div> 

                    <!-- Add Slide Button Shifted to Bottom -->
                    <div class="d-flex justify-content-center mb-10">
                        <button type="button" class="btn btn-light-primary fw-bold w-100" id="btnAddSlide">
                            <i class="ki-duotone ki-plus fs-2"><span class="path1"></span><span class="path2"></span></i> Add New Slide
                        </button>
                    </div>

                </div>                 
                <div class="col-lg-4">                     
                    <div class="card card-flush border mb-5">                         
                        <div class="card-body">                             
                            <div class="mb-5">                                 
                                <label class="required form-label">Category</label>                                 
                                <select name="category_id" class="form-select" data-control="select2" required>                                     
                                    <option value="">Select Category</option>                                     
                                    <?php if(!empty($categories)): foreach($categories as $cat): ?>                                         
                                        <option value="<?= $cat->id; ?>"><?= esc($cat->name); ?></option>                                     
                                    <?php endforeach; endif; ?>                                 
                                </select>                             
                            </div>                             
                            
                            <!-- BEAUTIFUL VISUAL BOX FOR COVER (Direct Upload) -->
                            <div class="mb-5">
                                <label class="required form-label text-primary">Cover Image</label>
                                <div class="image-input image-input-outline position-relative d-block">
                                    <div class="image-input-wrapper shadow-sm w-100 h-250px">
                                        <img src="<?= base_url('assets/media/no-image.jpg'); ?>" class="w-100 h-100 object-fit-cover cover-img-preview"/>
                                    </div>
                                    <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-30px h-30px bg-body shadow position-absolute" style="bottom: -10px; right: -10px;">
                                        <i class="ki-duotone ki-pencil fs-5"><span class="path1"></span><span class="path2"></span></i>
                                        <!-- Real file input -->
                                        <input type="file" name="cover_image_file" class="d-none cover-file-input" accept="image/*" required>
                                        <input type="hidden" name="cover_image_url" value="">
                                    </label>
                                </div>
                                <div class="text-muted fs-7 mt-2">Preferred size: 720x1280px (Vertical)</div>
                            </div>
                            
                            <div class="mb-5">                                 
                                <label class="form-label">Status</label>                                 
                                <select name="status" class="form-select">                                     
                                    <option value="1">Active</option>                                     
                                    <option value="0">Draft</option>                                 
                                </select>                             
                            </div>                             
                            <button type="submit" class="btn btn-primary w-100 fw-bold">Save Story</button>                         
                        </div>                     
                    </div>                 
                </div>             
            </div>         
        </div>     
    </form> 
</div> 
<?= $this->endSection(); ?> 
<?= $this->section('scripts'); ?> 
<script>     
    $(document).ready(function() {         
        // Instant Image Preview JS Logic
        $(document).on('change', '.slide-file-input', function(e) {
            let preview = $(this).closest('.image-input').find('.slide-img-preview');
            if (this.files && this.files[0]) {
                let reader = new FileReader();
                reader.onload = function(e) { preview.attr('src', e.target.result); }
                reader.readAsDataURL(this.files[0]);
            }
        });
        
        $(document).on('change', '.cover-file-input', function(e) {
            let preview = $(this).closest('.image-input').find('.cover-img-preview');
            if (this.files && this.files[0]) {
                let reader = new FileReader();
                reader.onload = function(e) { preview.attr('src', e.target.result); }
                reader.readAsDataURL(this.files[0]);
            }
        });

        let slideCount = 1;         
        $('#btnAddSlide').click(function() {             
            slideCount++;             
            let slideHtml = `                 
                <div class="slide-item border rounded p-5 mb-5 bg-light position-relative">                     
                    <div class="d-flex justify-content-between mb-3">                         
                        <h5 class="fw-bold">Slide ${slideCount}</h5>                         
                        <button type="button" class="btn btn-sm btn-icon btn-light-danger btnRemoveSlide"><i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i></button>                     
                    </div>                     
                    <div class="mb-5">
                        <label class="required form-label text-primary">Media Image/Video</label>
                        <div class="image-input image-input-outline position-relative d-inline-block">
                            <div class="image-input-wrapper shadow-sm w-125px h-125px">
                                <img src="<?= base_url('assets/media/no-image.jpg'); ?>" class="w-100 h-100 object-fit-cover slide-img-preview"/>
                            </div>
                            <label class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow position-absolute" style="bottom: -10px; right: -10px;">
                                <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></i>
                                <input type="file" name="slide_image_file[]" class="d-none slide-file-input" accept="image/*,video/mp4,video/webm" required>
                                <input type="hidden" name="slide_image_url[]" value="">
                            </label>
                        </div>
                    </div>                     
                    <div class="mb-3">                         
                        <label class="form-label">Slide Heading (Optional)</label>                         
                        <input type="text" name="slide_heading[]" class="form-control">                     
                    </div>                     
                    <div class="mb-3">                         
                        <label class="form-label">Slide Description (Optional)</label>                         
                        <textarea name="slide_description[]" class="form-control" rows="2"></textarea>                     
                    </div>                     
                    <div class="mb-3">                         
                        <label class="form-label">Link (Optional)</label>                         
                        <input type="url" name="slide_link[]" class="form-control">                     
                    </div>                 
                </div>`;             
            $('#slidesContainer').append(slideHtml);         
        });         
        $(document).on('click', '.btnRemoveSlide', function() {             
            $(this).closest('.slide-item').remove();         
        });     
    }); 
</script> 
<?= $this->endSection(); ?>