<?php $__env->startSection('content'); ?>
    <div class="side-title">
        <h3><?php echo e($head ?? ''); ?></h3>
    </div>

    <div class="border-item">
        <form class="form-row" method="post" action="<?php echo e($action); ?>" onsubmit="saveForm(this)" enctype="multipart/form-data">
            <?php if(isset($slider) && ($slider->id ?? false)): ?>
                <?php echo method_field('PUT'); ?>
            <?php endif; ?>
            <?php echo csrf_field(); ?>

            <div class="form-group col-lg-6">
                <label><?php echo e(__('sliders.type')); ?></label>
                <select name="type" class="form-control slider-type" required>
                    <option value="image" <?php echo e(old('type', optional($slider ?? null)->type) === 'image' ? 'selected' : ''); ?>><?php echo e(__('sliders.image')); ?></option>
                    <option value="video" <?php echo e(old('type', optional($slider ?? null)->type) === 'video' ? 'selected' : ''); ?>><?php echo e(__('sliders.video')); ?></option>
                </select>
            </div>

            <div class="form-group col-lg-6 slider-file-wrapper">
                <label><?php echo e(__('sliders.file')); ?></label>
                <input type="hidden" name="old_file" value="<?php echo e(optional($slider ?? null)->file_path); ?>">

                <input type="file" name="file" class="d-none slider-file <?php echo e($errors->has('file') ? 'is-invalid' : ''); ?>" accept="image/*">

                <div class="d-flex" style="gap: 10px;">
                    <button type="button" class="btn btn-primary upload-trigger upload-image"><?php echo e(__('sliders.image_upload')); ?></button>
                    <button type="button" class="btn btn-primary upload-trigger upload-video"><?php echo e(__('sliders.video_upload')); ?></button>
                </div>

                <small class="form-text text-muted mt-2 selected-file-name"></small>

                <!-- New file preview (shown when new file is selected) -->
                <div class="mt-2 new-file-preview" style="display: none;">
                    <div class="alert alert-info">
                        <strong><?php echo e(__('sliders.file_selected')); ?>:</strong> <span class="selected-file-info"></span>
                    </div>
                    <div class="preview-content"></div>
                </div>

                <!-- Existing file preview (shown when editing existing slider) -->
                <?php if(optional($slider ?? null)->file_url): ?>
                    <div class="mt-2 slider-preview">
                        <div class="alert alert-success">
                            <strong><?php echo e(__('sliders.current_file')); ?>:</strong>
                        </div>
                        <?php if(optional($slider ?? null)->type === 'video'): ?>
                            <video controls width="200">
                                <source src="<?php echo e(optional($slider ?? null)->file_url); ?>" type="video/mp4">
                            </video>
                        <?php else: ?>
                            <img src="<?php echo e(optional($slider ?? null)->file_url); ?>" alt="slider" width="200">
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
            </div>

            <?php $__currentLoopData = $languages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $language): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="form-group col-lg-6">
                    <label><?php echo e(__('sliders.title')); ?> <?php echo e(count($languages) > 1 ? "({$language->name})" : ''); ?></label>
                    <input type="text" name="title_<?php echo e($language->local); ?>" class="form-control <?php echo e($errors->has('title_' . $language->local) ? 'is-invalid' : ''); ?>" value="<?php echo e(old('title_' . $language->local, data_get($slider ?? null, $language->local . '.title'))); ?>" required>
                </div>
                <div class="form-group col-lg-6">
                    <label><?php echo e(__('sliders.subtitle')); ?> <?php echo e(count($languages) > 1 ? "({$language->name})" : ''); ?></label>
                    <textarea name="subtitle_<?php echo e($language->local); ?>" class="form-control <?php echo e($errors->has('subtitle_' . $language->local) ? 'is-invalid' : ''); ?>"><?php echo e(old('subtitle_' . $language->local, data_get($slider ?? null, $language->local . '.subtitle'))); ?></textarea>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

            <div class="text-center mt-5 col-12">
                <button class="butn"><span><?php echo e(__('dashboard.save')); ?></span></button>
            </div>
        </form>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('inner_js'); ?>
    <script>
        (function() {
            const typeSelect = document.querySelector('.slider-type');
            const fileInput = document.querySelector('.slider-file');
            const imageButton = document.querySelector('.upload-image');
            const videoButton = document.querySelector('.upload-video');
            const selectedName = document.querySelector('.selected-file-name');

            function syncFileField() {
                if (!typeSelect || !fileInput || !imageButton || !videoButton) {
                    return;
                }
                const isVideo = typeSelect.value === 'video';
                fileInput.accept = isVideo ? 'video/*' : 'image/*';
                imageButton.classList.toggle('d-none', isVideo);
                videoButton.classList.toggle('d-none', !isVideo);
                if (selectedName) {
                    selectedName.textContent = '';
                }
            }

            document.addEventListener('change', function (event) {
                if (event.target === typeSelect) {
                    syncFileField();
                    if (fileInput) {
                        fileInput.value = '';
                    }
                    // Hide preview when type changes
                    document.querySelector('.new-file-preview').style.display = 'none';
                }
                if (event.target === fileInput && selectedName) {
                    const file = event.target.files[0];
                    if (file) {
                        selectedName.textContent = file.name;

                        // Show file preview instead of loader
                        const previewDiv = document.querySelector('.new-file-preview');
                        const fileInfoSpan = document.querySelector('.selected-file-info');
                        const previewContent = document.querySelector('.preview-content');

                        if (previewDiv && fileInfoSpan && previewContent) {
                            // Show file info
                            const fileSize = (file.size / 1024 / 1024).toFixed(2);
                            fileInfoSpan.textContent = `${file.name} (${fileSize} MB)`;

                            // Show preview based on file type
                            if (file.type.startsWith('video/')) {
                                previewContent.innerHTML = `
                                    <video controls width="200" style="max-height: 150px;">
                                        <source src="${URL.createObjectURL(file)}" type="${file.type}">
                                        Your browser does not support the video tag.
                                    </video>
                                `;
                            } else if (file.type.startsWith('image/')) {
                                previewContent.innerHTML = `
                                    <img src="${URL.createObjectURL(file)}" alt="Preview" width="200" style="max-height: 150px; object-fit: cover;">
                                `;
                            } else {
                                previewContent.innerHTML = `
                                    <div class="alert alert-warning">
                                        <i class="fas fa-file"></i> ${file.name} (${fileSize} MB)
                                    </div>
                                `;
                            }

                            previewDiv.style.display = 'block';
                        }
                    } else {
                        selectedName.textContent = '';
                        document.querySelector('.new-file-preview').style.display = 'none';
                    }
                }
            });

            document.querySelectorAll('.upload-trigger').forEach(function(button) {
                button.addEventListener('click', function () {
                    if (fileInput) {
                        fileInput.click();
                    }
                });
            });

            syncFileField();
        })();
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.container', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/alyomhostorg/public_html/madar/resources/views/admin/sliders/form.blade.php ENDPATH**/ ?>