@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Edit Package')
@section('page-title', 'View Package')@push('styles')
<!-- Quill.js CSS -->
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">

<style>
    .rich-text-editor {
        min-height: 120px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .rich-text-editor .ql-editor {
        min-height: 100px;
    }

    .rich-text-editor .ql-toolbar {
        border-top: 1px solid #ced4da;
        border-left: 1px solid #ced4da;
        border-right: 1px solid #ced4da;
        border-bottom: none;
        border-radius: 0.375rem 0.375rem 0 0;
    }

    .rich-text-editor .ql-container {
        border-top: none;
        border-left: 1px solid #ced4da;
        border-right: 1px solid #ced4da;
        border-bottom: 1px solid #ced4da;
        border-radius: 0 0 0.375rem 0.375rem;
    }
</style>
@endpush
@section('breadcrumb')
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('admin.dashboard') }}">
                <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                Dashboard
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('admin.tour-packages.index') }}">
                <img src="{{ asset('backend/img/ico/ico-packages.svg') }}" alt="Packages" class="breadcrumb-icon">
                Packages
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <img src="{{ asset('backend/img/ico/ico-packages.svg') }}" alt="Create Package" class="breadcrumb-icon">
            View Package
        </li>
    </ol>
</nav>

@endsection
@section('content')
<!-- Create Package Header -->
<div class="create-package-header">
    <div class="d-flex align-items-center justify-content-between">
        <h3 class="mb-0 section-title">
            <img src="{{ asset('backend/img/ico/ico-packages.svg') }}" alt="Create Package" class="section-icon">
            View Package
        </h3>
        <a href="{{ route('admin.tour-packages.index') }}" class="btn btn-add-package">
            <i class="bi bi-arrow-left"></i> Back to Packages
        </a>
    </div>
</div>

@include('admin.tour_packages.partials.view-form')

@endsection


@push('scripts')
<!-- Quill.js JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
    // Global variable for Quill editors
    window.quillEditors = {};

    document.addEventListener('DOMContentLoaded', function() {
        let itineraryDayCount = 1;
        let activitiesDayCount = 1;

        // Initialize Quill editors
        const quillEditors = window.quillEditors;

        // Quill toolbar configuration
        const toolbarOptions = [
            [{
                'header': [1, 2, 3, false]
            }],
            ['bold', 'italic', 'underline', 'strike'],
            [{
                'list': 'ordered'
            }, {
                'list': 'bullet'
            }],
            [{
                'indent': '-1'
            }, {
                'indent': '+1'
            }],
            [{
                'color': []
            }, {
                'background': []
            }],
            [{
                'align': []
            }],
            ['link'],
            ['clean']
        ];

        // Initialize Package Intro Editor
        if (document.getElementById('packageIntroEditor')) {
            quillEditors.packageIntro = new Quill('#packageIntroEditor', {
                theme: 'snow',
                modules: {
                    toolbar: toolbarOptions
                },
                placeholder: 'Enter package introduction...'
            });
        }

        // Initialize Tour Highlights Editor
        if (document.getElementById('tourHighlightsEditor')) {
            quillEditors.tourHighlights = new Quill('#tourHighlightsEditor', {
                theme: 'snow',
                modules: {
                    toolbar: toolbarOptions
                },
                placeholder: 'Enter tour highlights...'
            });
        }

        // Initialize Tour Attractions Editor
        if (document.getElementById('tourAttractionsEditor')) {
            quillEditors.tourAttractions = new Quill('#tourAttractionsEditor', {
                theme: 'snow',
                modules: {
                    toolbar: toolbarOptions
                },
                placeholder: 'Enter tour attractions...'
            });
        }

        // Initialize Quill editors for existing itinerary days
        const itineraryContainer = document.getElementById('itineraryContainer');
        if (itineraryContainer) {
            const existingDays = itineraryContainer.querySelectorAll('.itinerary-day');
            itineraryDayCount = existingDays.length ? existingDays.length : 1;

            existingDays.forEach((dayElement, index) => {
                const dayNumber = dayElement.getAttribute('data-day');
                const editorId = `itineraryDay${dayNumber}Editor`;

                if (document.getElementById(editorId)) {
                    window.quillEditors[`itineraryDay${dayNumber}`] = new Quill(`#${editorId}`, {
                        theme: 'snow',
                        modules: {
                            toolbar: toolbarOptions
                        },
                        placeholder: `Enter Day ${dayNumber} itinerary details...`
                    });

                    // Load existing content from textarea
                    const textarea = dayElement.querySelector(
                        `textarea[name="itinerary_days[${dayNumber}]"]`);
                    if (textarea && textarea.value.trim().length > 0) {
                        window.quillEditors[`itineraryDay${dayNumber}`].clipboard.dangerouslyPasteHTML(
                            textarea.value);
                    }

                    // Sync changes back to textarea
                    window.quillEditors[`itineraryDay${dayNumber}`].on('text-change', function() {
                        if (textarea) {
                            textarea.value = window.quillEditors[`itineraryDay${dayNumber}`]
                                .root.innerHTML;
                        }
                    });
                }
            });
        }

        // Dynamic Itinerary functionality
        const addItineraryDayBtn = document.getElementById('addItineraryDay');
        if (addItineraryDayBtn) {
            addItineraryDayBtn.addEventListener('click', function() {
                itineraryDayCount++;
                const newDay = document.createElement('div');
                newDay.className = 'itinerary-day';
                newDay.setAttribute('data-day', itineraryDayCount);
                newDay.innerHTML = `
                    <div class="itinerary-day-header">
                        <h6 class="itinerary-day-title">Day ${itineraryDayCount}</h6>
                        <button type="button" class="btn btn-sm btn-outline-danger remove-itinerary-day" onclick="removeItineraryDay(${itineraryDayCount})">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                    <div id="itineraryDay${itineraryDayCount}Editor" class="rich-text-editor"></div>
                    <textarea class="form-control d-none" name="itinerary_days[${itineraryDayCount}]" rows="3" placeholder="Enter Day ${itineraryDayCount} itinerary details"></textarea>
                `;
                itineraryContainer.appendChild(newDay);

                // Initialize Quill editor for the new day
                window.quillEditors[`itineraryDay${itineraryDayCount}`] = new Quill(
                    `#itineraryDay${itineraryDayCount}Editor`, {
                        theme: 'snow',
                        modules: {
                            toolbar: toolbarOptions
                        },
                        placeholder: `Enter Day ${itineraryDayCount} itinerary details...`
                    }
                );

                // Sync changes back to textarea
                const textarea = newDay.querySelector(
                    `textarea[name="itinerary_days[${itineraryDayCount}]"]`);
                window.quillEditors[`itineraryDay${itineraryDayCount}`].on('text-change', function() {
                    if (textarea) {
                        textarea.value = window.quillEditors[`itineraryDay${itineraryDayCount}`]
                            .root.innerHTML;
                    }
                });
            });
        }

        // Initialize Trip Notes Editor
        if (document.getElementById('tripNotesEditor')) {
            quillEditors.tripNotes = new Quill('#tripNotesEditor', {
                theme: 'snow',
                modules: {
                    toolbar: toolbarOptions
                },
                placeholder: 'Enter important trip notes...'
            });
        }

        // Initialize FAQ Editor
        if (document.getElementById('faqEditor')) {
            quillEditors.faq = new Quill('#faqEditor', {
                theme: 'snow',
                modules: {
                    toolbar: toolbarOptions
                },
                placeholder: 'Enter frequently asked questions and answers...'
            });
        }

        // Initialize Reviews Editor
        if (document.getElementById('reviewsEditor')) {
            quillEditors.reviews = new Quill('#reviewsEditor', {
                theme: 'snow',
                modules: {
                    toolbar: toolbarOptions
                },
                placeholder: 'Enter customer reviews...'
            });
        }

        // Dynamic Itinerary functionality

        // Dynamic Activities Logs functionality
        const addActivitiesDayBtn = document.getElementById('addActivitiesDay');
        const activitiesLogsContainer = document.getElementById('activitiesLogsContainer');

        if (addActivitiesDayBtn) {
            addActivitiesDayBtn.addEventListener('click', function() {
                activitiesDayCount++;

                const newDay = document.createElement('div');
                newDay.className = 'activities-log-day';
                newDay.setAttribute('data-day', activitiesDayCount);
                newDay.innerHTML = `
                <div class="activities-day-header">
                    <h5 class="activities-day-title">Day ${activitiesDayCount}</h5>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-activities-day" onclick="removeActivitiesDay(${activitiesDayCount})">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
                <div class="activities-list">
                    <!-- Empty activities list for new day -->
                </div>
                <button type="button" class="mt-2 btn btn-outline-secondary btn-sm add-activity-item" data-day="${activitiesDayCount}">
                    <i class="bi bi-plus-circle"></i> Add Feedback
                </button>
            `;

                activitiesLogsContainer.appendChild(newDay);

                // Add event listener to the new "Add Activity" button
                const newAddActivityBtn = newDay.querySelector('.add-activity-item');
                addActivityItemListener(newAddActivityBtn);

                // Show remove button for all days except Day 1 if there are multiple days
                if (activitiesDayCount > 1) {
                    const allRemoveBtns = activitiesLogsContainer.querySelectorAll(
                        '.remove-activities-day');
                    allRemoveBtns.forEach((btn, index) => {
                        if (index > 0) { // Don't show for Day 1
                            btn.style.display = 'inline-block';
                        }
                    });
                }
            });
        }

        // Add activity item functionality
        function addActivityItemListener(button) {
            button.addEventListener('click', function() {
                const dayNumber = this.getAttribute('data-day');
                const activitiesList = this.previousElementSibling;
                const activityCount = activitiesList.querySelectorAll('.activity-item').length;

                const newActivity = document.createElement('div');
                newActivity.className = 'form-check activity-item';
                newActivity.innerHTML = `
            <input class="form-check-input" type="checkbox" id="day${dayNumber}_custom${activityCount}" name="day${dayNumber}_activities[]" value="">
            <label class="form-check-label" for="day${dayNumber}_custom${activityCount}">
                <input type="text" class="form-control activity-input" placeholder="Enter feedback log" onchange="updateActivityValue(this)">
            </label>
            <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeActivity(this)">
                <i class="bi bi-trash"></i>
            </button>
        `;

                activitiesList.appendChild(newActivity);
            });
        }

        // Initialize existing "Add Activity" buttons
        const existingAddActivityBtns = document.querySelectorAll('.add-activity-item');
        existingAddActivityBtns.forEach(addActivityItemListener);

        // Featured Image Preview
        const featuredImageInput = document.getElementById('featuredImage');
        const featuredImagePreview = document.getElementById('featuredImagePreview');
        const featuredImagePreviewImg = document.getElementById('featuredImagePreviewImg');

        if (featuredImageInput) {
            featuredImageInput.addEventListener('change', function(e) {
                const file = e.target.files[0];

                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        featuredImagePreviewImg.src = e.target.result;
                        featuredImagePreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    featuredImagePreview.style.display = 'none';
                }
            });
        }

        // Thumbnail Image Preview
        const thumbnailImageInput = document.getElementById('thumbnailImage');
        const thumbnailImagePreview = document.getElementById('thumbnailImagePreview');
        const thumbnailImagePreviewImg = document.getElementById('thumbnailImagePreviewImg');

        if (thumbnailImageInput) {
            thumbnailImageInput.addEventListener('change', function(e) {
                const file = e.target.files[0];

                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        thumbnailImagePreviewImg.src = e.target.result;
                        thumbnailImagePreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    thumbnailImagePreview.style.display = 'none';
                }
            });
        }

        // Tour Map Image Preview
        const tourMapImageInput = document.getElementById('tourMapImage');
        const tourMapPreview = document.getElementById('tourMapPreview');
        const tourMapPreviewImg = document.getElementById('tourMapPreviewImg');

        if (tourMapImageInput) {
            tourMapImageInput.addEventListener('change', function(e) {
                const file = e.target.files[0];

                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        tourMapPreviewImg.src = e.target.result;
                        tourMapPreview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    tourMapPreview.style.display = 'none';
                }
            });
        }

        // Gallery Images Preview
        const galleryInput = document.getElementById('galleryImages');
        const previewContainer = document.getElementById('imagePreviewContainer');

        if (galleryInput) {
            galleryInput.addEventListener('change', function(e) {
                const files = Array.from(e.target.files);

                if (files.length > 0) {
                    // Clear placeholder
                    previewContainer.innerHTML = '';

                    // Create grid container
                    const gridContainer = document.createElement('div');
                    gridContainer.className = 'image-preview-grid';

                    files.forEach((file, index) => {
                        if (file.type.startsWith('image/')) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const previewItem = document.createElement('div');
                                previewItem.className = 'image-preview-item';
                                previewItem.innerHTML = `
                                <img src="${e.target.result}" alt="Preview ${index + 1}">
                                <button type="button" class="remove-image" onclick="removeImagePreview(this, ${index})">
                                    <i class="bi bi-x"></i>
                                </button>
                            `;
                                gridContainer.appendChild(previewItem);
                            };
                            reader.readAsDataURL(file);
                        }
                    });

                    previewContainer.appendChild(gridContainer);
                } else {
                    // Show placeholder if no files
                    previewContainer.innerHTML = `
                    <div class="image-preview-placeholder">
                        <i class="bi bi-images"></i>
                        <p>Selected images will appear here</p>
                    </div>
                `;
                }
            });
        }

        // Form submission handler to sync Quill content with textareas
        const createPackageForm = document.getElementById('createPackageForm');
        if (createPackageForm) {
            createPackageForm.addEventListener('submit', function(e) {
                // Sync all Quill editors with their corresponding textareas
                Object.keys(quillEditors).forEach(editorKey => {
                    const editor = quillEditors[editorKey];
                    let textareaId = '';

                    // Map editor keys to textarea IDs
                    switch (editorKey) {
                        case 'packageIntro':
                            textareaId = 'packageIntro';
                            break;
                        case 'tourHighlights':
                            textareaId = 'tourHighlights';
                            break;
                        case 'tourAttractions':
                            textareaId = 'tourAttractions';
                            break;
                        case 'tripNotes':
                            textareaId = 'tripNotes';
                            break;
                        case 'faq':
                            textareaId = 'faq';
                            break;
                        case 'reviews':
                            textareaId = 'reviews';
                            break;
                        default:
                            // Handle itinerary days
                            if (editorKey.startsWith('itineraryDay')) {
                                const dayNumber = editorKey.replace('itineraryDay', '');
                                const textarea = document.querySelector(
                                    `textarea[name="itinerary_days[${dayNumber}]"]`);
                                if (textarea) {
                                    textarea.value = editor.root.innerHTML;
                                }
                            }
                            return;
                    }

                    const textarea = document.getElementById(textareaId);
                    if (textarea) {
                        textarea.value = editor.root.innerHTML;
                    }
                });
            });
        }

        // Edit form submission handler
        const editPackageForm = document.getElementById('editPackageForm');
        if (editPackageForm) {
            editPackageForm.addEventListener('submit', function() {
                // Sync all Quill editors including itinerary days
                Object.keys(window.quillEditors).forEach(editorKey => {
                    const editor = window.quillEditors[editorKey];
                    let textareaId = '';

                    switch (editorKey) {
                        case 'packageIntro':
                            textareaId = 'packageIntro';
                            break;
                        case 'tourHighlights':
                            textareaId = 'tourHighlights';
                            break;
                        case 'tourAttractions':
                            textareaId = 'tourAttractions';
                            break;
                        case 'tripNotes':
                            textareaId = 'trip_notes';
                            break;
                        case 'faq':
                            textareaId = 'faq';
                            break;
                        case 'reviews':
                            textareaId = 'reviews';
                            break;
                        default:
                            if (editorKey.startsWith('itineraryDay')) {
                                const dayNumber = editorKey.replace('itineraryDay', '');
                                const textarea = editPackageForm.querySelector(
                                    `textarea[name="itinerary_days[${dayNumber}]"]`);
                                if (textarea) {
                                    textarea.value = editor.root.innerHTML;
                                }
                            }
                            return;
                    }

                    const textarea = document.getElementById(textareaId);
                    if (textarea) {
                        textarea.value = editor.root.innerHTML;
                    }
                });
            });
        }
    });

    // Helper functions
    function updateActivityValue(input) {
        const checkbox = input.closest('.activity-item').querySelector('input[type="checkbox"]');
        checkbox.value = input.value;
    }

    function removeActivity(button) {
        button.closest('.activity-item').remove();
    }

    function removeItineraryDay(dayNumber) {
        const dayElement = document.querySelector(`.itinerary-day[data-day="${dayNumber}"]`);
        if (dayElement && dayNumber > 1) { // Don't allow removing Day 1

            // Clean up the Quill editor
            const editorKey = `itineraryDay${dayNumber}`;
            if (window.quillEditors && window.quillEditors[editorKey]) {
                delete window.quillEditors[editorKey];
            }
            dayElement.remove();
        }
    }

    function removeActivitiesDay(dayNumber) {
        const dayElement = document.querySelector(`.activities-log-day[data-day="${dayNumber}"]`);
        if (dayElement && dayNumber > 1) { // Don't allow removing Day 1
            dayElement.remove();
        }
    }

    function removeFeaturedImagePreview() {
        const featuredImageInput = document.getElementById('featuredImage');
        const featuredImagePreview = document.getElementById('featuredImagePreview');

        featuredImageInput.value = '';
        featuredImagePreview.style.display = 'none';
    }

    function removeThumbnailImagePreview() {
        const thumbnailImageInput = document.getElementById('thumbnailImage');
        const thumbnailImagePreview = document.getElementById('thumbnailImagePreview');

        thumbnailImageInput.value = '';
        thumbnailImagePreview.style.display = 'none';
    }

    function removeTourMapPreview() {
        const tourMapImageInput = document.getElementById('tourMapImage');
        const tourMapPreview = document.getElementById('tourMapPreview');

        tourMapImageInput.value = '';
        tourMapPreview.style.display = 'none';
    }

    function removeImagePreview(button, index) {
        const previewItem = button.closest('.image-preview-item');
        const galleryInput = document.getElementById('galleryImages');

        // Remove the preview item
        previewItem.remove();

        // Update the file input (remove the specific file)
        const dt = new DataTransfer();
        const files = Array.from(galleryInput.files);

        files.forEach((file, i) => {
            if (i !== index) {
                dt.items.add(file);
            }
        });

        galleryInput.files = dt.files;

        // If no files left, show placeholder
        const previewContainer = document.getElementById('imagePreviewContainer');
        if (galleryInput.files.length === 0) {
            previewContainer.innerHTML = `
            <div class="image-preview-placeholder">
                <i class="bi bi-images"></i>
                <p>Selected images will appear here</p>
            </div>
        `;
        }
    }

    // Form submission
    document.getElementById('createPackageForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const createPackageForm = document.getElementById('createPackageForm');
        const submitBtn = document.querySelector('#submitButton');
        const originalText = submitBtn.innerHTML;

        Object.keys(quillEditors).forEach(editorId => {
            const quill = quillEditors[editorId];
            const day = editorId.replace('itineraryDay', '');
            const textarea = createPackageForm.querySelector(`textarea[name="itinerary_days[${day}]"]`);
            if (textarea) {
                textarea.value = quill.root.innerHTML.trim();
            }
        });

        const itineraryDaysInputs = createPackageForm.querySelectorAll('textarea[name^="itinerary_days"]');
        itineraryDaysInputs.forEach(input => {
            const nameMatch = input.name.match(/\[(\d+)\]/);
            if (nameMatch) {
                const dayNumber = nameMatch[1];
                input.name = `itinerary_days[day_${dayNumber}]`;
            }
        });

        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Creating...';
        submitBtn.disabled = true;

        const formData = new FormData(this);

        // Clear old error messages
        document.querySelectorAll('.text-danger').forEach(el => el.remove());

        axios.post(createPackageForm.action, formData)
            .then(response => {
                const data = response.data;

                if (data.success) {
                    toastr.success(data.message);
                    createPackageForm.reset();
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                } else {
                    toastr.error(data.message);

                    // If validation errors exist
                    if (data.errors) {
                        Object.keys(data.errors).forEach(field => {
                            const input = createPackageForm.querySelector(`[name="${field}"]`);
                            if (input) {
                                // Create error message element
                                const errorEl = document.createElement('div');
                                errorEl.classList.add('text-danger', 'mt-1', 'small');
                                errorEl.innerText = data.errors[field][0];
                                input.insertAdjacentElement('afterend', errorEl);
                            }
                        });
                    }
                }
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            })
            .catch(error => {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });

                console.error('Error:', error);
                toastr.error(error.response?.data?.message || error.message);

                // Handle validation errors from catch (Laravel 422)
                if (error.response?.status === 422 && error.response.data?.errors) {
                    const errors = error.response.data.errors;
                    Object.keys(errors).forEach(field => {
                        const input = createPackageForm.querySelector(`[name="${field}"]`);
                        if (input) {
                            const errorEl = document.createElement('div');
                            errorEl.classList.add('text-danger', 'mt-1', 'small');
                            errorEl.innerText = errors[field][0];
                            input.insertAdjacentElement('afterend', errorEl);
                        }
                    });
                }

                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
    });


function updatePreview(input, imgId, btnId) {
    const img = document.getElementById(imgId);
    const btn = document.getElementById(btnId);

    if (input.files && input.files[0]) {
        let reader = new FileReader();
        reader.onload = function (e) {
            img.src = e.target.result;
            img.style.display = 'block';
            btn.style.display = 'inline-block';
        }
        reader.readAsDataURL(input.files[0]);
    }
}

function removeImage(imgId, btnId, inputId) {
    const img = document.getElementById(imgId);
    const btn = document.getElementById(btnId);
    const input = document.getElementById(inputId);

    img.src = 'https://via.placeholder.com/200';
    img.style.display = 'none';
    btn.style.display = 'none';
    input.value = ''; // clear the file input
}


const galleryInput = document.getElementById('gallery_images');
const previewContainer = document.getElementById('imagePreviewContainer');

// Track all files (new uploads + existing images)
let galleryFiles = [];
let existingGallery = [];

function createPreviewItem(src, file = null, isExisting = false) {
    const previewItem = document.createElement('div');
    previewItem.classList.add('image-preview-item', 'selected');

    previewItem.innerHTML = `
        <img src="${src}" alt="Gallery Preview">
        <button type="button" class="btn btn-danger btn-sm">&times;</button>
    `;

    // Remove button
    previewItem.querySelector('button').addEventListener('click', (e) => {
        e.stopPropagation();
        previewItem.remove();
        if (isExisting) {
            existingGallery = existingGallery.filter(f => f !== src);
        } else if (file) {
            galleryFiles = galleryFiles.filter(f => f !== file);
        }
        updateInputFiles();
    });

    // Toggle select/deselect
    previewItem.addEventListener('click', (evt) => {
        if (evt.target.tagName !== 'BUTTON') {
            previewItem.classList.toggle('selected');
            updateInputFiles();
        }
    });

    previewContainer.appendChild(previewItem);
    updateInputFiles();
}

// Initialize existing images from server
@if(isset($tourPackage) && $tourPackage->tourImages->count() > 0)
    @foreach(json_decode($tourPackage->tourImages) as $imagepath)
        existingGallery.push(`{{ $imagepath->image_url }}`);
        createPreviewItem(`{{ $imagepath->image_url }}`, null, true);
    @endforeach
@endif

// Handle new file selection
galleryInput.addEventListener('change', (e) => {
    const files = Array.from(e.target.files);

    files.forEach(file => {
        const reader = new FileReader();
        reader.onload = (event) => {
            galleryFiles.push(file);
            createPreviewItem(event.target.result, file, false);
        };
        reader.readAsDataURL(file);
    });

    galleryInput.value = '';
});

new Sortable(previewContainer, { animation: 150 });

function updateInputFiles() {
    // Remove old hidden inputs
    document.querySelectorAll('input[name="gallery_previews[]"]').forEach(i => i.remove());
    document.querySelectorAll('input[name="existing_gallery[]"]').forEach(i => i.remove());

    // Add selected existing images
    existingGallery.forEach(src => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'existing_gallery[]';
        input.value = src.replace(' ' + '/', ''); // store relative path
        previewContainer.appendChild(input);
    });

    // Add selected new images
    const selectedItems = Array.from(previewContainer.querySelectorAll('.image-preview-item.selected img'));
    selectedItems.forEach(img => {
        const src = img.src;
        const file = galleryFiles.find(f => img.src.startsWith('data:') && src.startsWith('data:'));
        if (file) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'gallery_previews[]';
            input.value = src;
            previewContainer.appendChild(input);
        }
    });
}
</script>
@endpush