@extends('admin.layouts.admin')
@section('content')
    <style>
        .feature-item {
            transition: all 0.3s ease;
        }

        .remove-feature {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .video-preview-container,
        .amenities-preview-container {
            max-width: 400px;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            padding: 10px;
            background: #f8f9fa;
        }

        .gallery-preview-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            margin-top: 15px;
        }

        .gallery-preview-item {
            position: relative;
            width: 120px;
            height: 90px;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .gallery-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .gallery-preview-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px solid #dc3545;
            transition: all 0.3s ease;
        }

        .gallery-preview-remove:hover {
            background: #dc3545;
        }

        .gallery-preview-remove:hover i {
            color: white !important;
        }

        .video-preview-container video {
            border-radius: 0.25rem;
            background: #000;
        }
    </style>
    <div class="row">
        <div class="col-12">
            <div class="card card-primary" data-aos="fade-up" data-aos-duration="1000">
                <div class="card-header text-white pb-0" style="background-color: rgb(0, 0, 0);">
                    <h1 style="font-size: 24px">
                        Add New Studio
                    </h1>
                </div>

                <div class="card-body">
                    <form method="post" action="{{ route('admin.studios.store') }}" enctype="multipart/form-data"
                        id="studioForm">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name" class="form-label">Studio Name*</label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                                        id="name" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="price" class="form-label">Price*</label>
                                    <input type="number" step="0.01"
                                        class="form-control @error('price') is-invalid @enderror" id="price"
                                        name="price" value="{{ old('price') }}" required>
                                    @error('price')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="booking_type" class="form-label">Booking Type*</label>
                                    <select class="form-control @error('booking_type') is-invalid @enderror"
                                        id="booking_type" name="booking_type" required>
                                        <option value="">Select Booking Type</option>
                                        <option value="per_hour" {{ old('booking_type') == 'per_hour' ? 'selected' : '' }}>
                                            Per Hour</option>
                                        <option value="per_day" {{ old('booking_type') == 'per_day' ? 'selected' : '' }}>Per
                                            Day</option>
                                        <option value="per_week" {{ old('booking_type') == 'per_week' ? 'selected' : '' }}>
                                            Per Week</option>
                                        <option value="per_month"
                                            {{ old('booking_type') == 'per_month' ? 'selected' : '' }}>Per Month</option>
                                    </select>
                                    @error('booking_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="no_guest" class="form-label">Maximum Guests</label>
                                    <input type="number" class="form-control @error('no_guest') is-invalid @enderror"
                                        id="no_guest" name="no_guest" value="{{ old('no_guest') }}">
                                    @error('no_guest')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="description" class="form-label">Description*</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description"
                                rows="3" required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="amenities" class="form-label">Amenities*</label>
                            <textarea class="form-control @error('amenities') is-invalid @enderror" id="amenities" name="amenities" rows="3"
                                required>{{ old('amenities') }}</textarea>
                            @error('amenities')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="row">

                            <div class="col-md-6 d-none">
                                <div class="form-group">
                                    <label class="d-block mb-2">Availability Status</label>
                                    <div class="custom-control custom-switch ml-2">
                                        <input type="checkbox" class="custom-control-input" id="is_available"
                                            name="is_available" value="1"
                                            {{ old('is_available', true) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_available">Studio is available for
                                            booking</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="images" class="form-label">Studio Images</label>
                                    <div class="custom-file">
                                        <input type="file"
                                            class="custom-file-input @error('images') is-invalid @enderror" id="images"
                                            name="images[]" multiple>
                                        <label class="custom-file-label" for="images">Choose files</label>
                                        @error('images')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <small class="form-text text-muted">Upload multiple images (JPEG, PNG, JPG, GIF)</small>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Studio Video</label>
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="studio_video" class="form-label">Upload Video</label>
                                        <div class="custom-file">
                                            <input type="file"
                                                class="custom-file-input @error('studio_video') is-invalid @enderror"
                                                id="studio_video" name="studio_video" accept="video/*">
                                            <label class="custom-file-label" for="studio_video">Choose video file</label>
                                            @error('studio_video')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <small class="form-text text-muted">Upload a video (MP4, MOV, AVI, etc.) - Max:
                                            20MB</small>

                                        <!-- Video Preview -->
                                        <div id="videoPreviewContainer" class="mt-3" style="display: none;">
                                            <div class="video-preview-container">
                                                <video id="videoPreview" controls autoplay muted class="w-100">
                                                    Your browser does not support the video tag.
                                                </video>
                                                <button type="button" class="btn btn-sm btn-danger mt-2"
                                                    onclick="removeVideoPreview()">
                                                    <i class="fas fa-times"></i> Remove Video
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Studio Gallery Images</label>
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="gallery_images" class="form-label">Upload Gallery Images</label>
                                        <div class="custom-file">
                                            <input type="file"
                                                class="custom-file-input @error('gallery_images') is-invalid @enderror"
                                                id="gallery_images" name="gallery_images[]" multiple accept="image/*">
                                            <label class="custom-file-label" for="gallery_images">Choose multiple
                                                images</label>
                                            @error('gallery_images')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <small class="form-text text-muted">Upload multiple gallery images (JPEG, PNG, JPG,
                                            GIF)</small>

                                        <!-- Gallery Images Preview -->
                                        <div id="galleryPreviewContainer" class="mt-3" style="display: none;">
                                            <div class="gallery-preview-container" id="galleryPreviews"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="form-label">Amenities & Features</label>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="amenities_image" class="form-label">Amenities Image</label>
                                                <div class="custom-file">
                                                    <input type="file"
                                                        class="custom-file-input @error('amenities_image') is-invalid @enderror"
                                                        id="amenities_image" name="amenities_image" accept="image/*">
                                                    <label class="custom-file-label" for="amenities_image">Choose
                                                        image</label>
                                                    @error('amenities_image')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <small class="form-text text-muted">Upload an image for amenities (JPEG,
                                                    PNG, JPG, GIF)</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label">Features List</label>
                                                <div id="features-container">
                                                    @if (old('features') && count(old('features')) > 0)
                                                        @foreach (old('features') as $index => $feature)
                                                            <div class="input-group mb-2 feature-item">
                                                                <input type="text" class="form-control"
                                                                    name="features[]" value="{{ $feature }}"
                                                                    placeholder="Enter feature">
                                                                @if ($index > 0)
                                                                    <div class="input-group-append">
                                                                        <button
                                                                            class="btn btn-outline-danger remove-feature"
                                                                            type="button">
                                                                            <i class="fas fa-minus"></i>
                                                                        </button>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="input-group mb-2 feature-item">
                                                            <input type="text" class="form-control" name="features[]"
                                                                placeholder="Enter feature">
                                                        </div>
                                                    @endif
                                                </div>
                                                <button type="button" id="add-feature"
                                                    class="btn btn-sm btn-primary mt-2">
                                                    <i class="fas fa-plus mr-1"></i> Add Feature
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group" id="availability-container"
                                    style="{{ in_array(old('booking_type'), ['per_month', 'per_week']) ? 'display: none;' : '' }}">
                                    <label class="form-label">Availability*</label>
                                    <div class="availability-container bg-light p-3 rounded">
                                        @php
                                            $days = [
                                                'monday',
                                                'tuesday',
                                                'wednesday',
                                                'thursday',
                                                'friday',
                                                'saturday',
                                                'sunday',
                                            ];
                                            $oldAvailability = old('availability', []);
                                        @endphp

                                        @foreach ($days as $day)
                                            <div class="day-availability mb-3 p-2 border-bottom">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h6 class="text-capitalize mb-0 font-weight-bold">{{ ucfirst($day) }}
                                                    </h6>
                                                    @if (!in_array(old('booking_type'), ['per_hour']))
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input day-toggle"
                                                                id="{{ $day }}_full_day"
                                                                name="availability[{{ $day }}][full_day]"
                                                                value="1"
                                                                {{ isset($oldAvailability[$day]['full_day']) ? 'checked' : '' }}>
                                                            <label class="form-check-label small"
                                                                for="{{ $day }}_full_day">Full Day</label>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="row day-time-fields"
                                                    style="{{ isset($oldAvailability[$day]['full_day']) || in_array(old('booking_type'), ['per_day']) ? 'display: none;' : '' }}">
                                                    <div class="col-md-6">
                                                        <label class="small text-muted">Opening Time</label>
                                                        <input type="time" class="form-control time-input"
                                                            name="availability[{{ $day }}][from]"
                                                            value="{{ $oldAvailability[$day]['from'] ?? '09:00' }}">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="small text-muted">Closing Time</label>
                                                        <input type="time" class="form-control time-input"
                                                            name="availability[{{ $day }}][to]"
                                                            value="{{ $oldAvailability[$day]['to'] ?? '18:00' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    @error('availability')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="form-group mt-4">
                            <label class="form-label">Studio Packages</label>
                            <div class="card">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0 text-white">Available Packages</h5>
                                </div>
                                <div class="card-body">
                                    <div id="packages-container">
                                        <div class="package-entry card mb-3">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label class="form-label">Package Name*</label>
                                                            <input type="text" class="form-control"
                                                                name="packages[0][name]" placeholder="e.g., Basic Package"
                                                                required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label class="form-label">Price*</label>
                                                            <input type="number" step="0.01" class="form-control"
                                                                name="packages[0][price]" placeholder="0.00" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label class="form-label">Max Guests</label>
                                                            <input type="number" class="form-control"
                                                                name="packages[0][max_guests]" placeholder="Optional">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="form-label">Features</label>
                                                    <div class="package-features-container">
                                                        <div class="input-group mb-2 feature-item">
                                                            <input type="text" class="form-control"
                                                                name="packages[0][features][]"
                                                                placeholder="Enter feature">
                                                        </div>
                                                    </div>
                                                    <button type="button"
                                                        class="btn btn-sm btn-primary mt-2 add-package-feature">
                                                        <i class="fas fa-plus mr-1"></i> Add Feature
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" id="add-package" class="btn btn-primary mt-3">
                                        <i class="fas fa-plus mr-2"></i> Add Another Package
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <div class="custom-control custom-switch ml-2">
                                        <input type="checkbox" class="custom-control-input" id="vacation_mode"
                                            name="vacation_mode">
                                        <label class="custom-control-label" for="vacation_mode">Enable Vacation
                                            Mode</label>
                                    </div>

                                    <div id="vacation-container" style="display: none;">
                                        <div class="card mt-3">
                                            <div class="card-header bg-light">
                                                <h5 class="mb-0 text-white">Vacation Periods</h5>
                                            </div>
                                            <div class="card-body">
                                                <div id="vacation-entries">
                                                    <div class="vacation-entry row mb-3">
                                                        <div class="col-md-3">
                                                            <label>Date</label>
                                                            <input type="date" name="vacations[0][date]"
                                                                class="form-control">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label>From Time</label>
                                                            <input type="time" name="vacations[0][from_time]"
                                                                class="form-control">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label>To Time</label>
                                                            <input type="time" name="vacations[0][to_time]"
                                                                class="form-control">
                                                        </div>
                                                        <div
                                                            class="col-md-1 d-flex align-items-end mb-1 justify-content-center">
                                                            <button type="button"
                                                                class="btn btn-danger remove-vacation">Remove</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" id="add-vacation" class="btn btn-primary mt-2">Add
                                                    Another Vacation Period</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="fas fa-save mr-2"></i> Save Studio
                            </button>
                            <a href="{{ route('admin.studios.index') }}" class="btn btn-outline-secondary px-4">
                                <i class="fas fa-times mr-2"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style>
        .availability-container {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
        }

        .day-availability {
            transition: all 0.3s ease;
        }

        .day-time-fields {
            transition: all 0.3s ease;
        }

        .day-toggle:not(:checked)~.day-time-fields {
            opacity: 0.5;
            pointer-events: none;
        }

        .custom-switch {
            padding-left: 3.5rem;
        }

        .custom-control-label::before {
            left: -3.5rem;
            width: 3rem;
        }

        .custom-switch .custom-control-label::after {
            left: calc(-3.5rem + 2px);
            width: calc(1.5rem - 4px);
            height: calc(1.5rem - 4px);
            border-radius: .5rem;
        }

        .custom-switch .custom-control-input:checked~.custom-control-label::after {
            transform: translateX(1.25rem);
        }
    </style>
@endsection

@section('common_script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const bookingTypeSelect = document.getElementById('booking_type');
            const availabilityContainer = document.getElementById('availability-container');
            const dayToggles = document.querySelectorAll('.day-toggle');
            const timeInputs = document.querySelectorAll('.time-input');

            handleBookingTypeChange(bookingTypeSelect.value);

            bookingTypeSelect.addEventListener('change', function() {
                handleBookingTypeChange(this.value);
            });

            function handleBookingTypeChange(selectedType) {
                dayToggles.forEach(toggle => {
                    toggle.checked = false;
                });

                timeInputs.forEach(input => {
                    input.value = '';
                    input.disabled = false;
                });

                if (['per_month', 'per_week'].includes(selectedType)) {
                    availabilityContainer.style.display = 'none';
                } else {
                    availabilityContainer.style.display = 'block';

                    if (selectedType === 'per_day') {
                        document.querySelectorAll('.day-time-fields').forEach(field => {
                            field.style.display = 'none';
                        });
                        document.querySelectorAll('.form-check').forEach(el => {
                            el.style.display = 'block';
                        });
                    } else if (selectedType === 'per_hour') {
                        document.querySelectorAll('.day-time-fields').forEach(field => {
                            field.style.display = 'flex';
                        });
                        document.querySelectorAll('.form-check').forEach(el => {
                            el.style.display = 'none';
                        });

                        timeInputs.forEach(input => {
                            if (input.name.includes('[from]')) {
                                input.value = '09:00';
                            } else if (input.name.includes('[to]')) {
                                input.value = '18:00';
                            }
                        });
                    }
                }
            }

            document.getElementById('vacation_mode').addEventListener('change', function() {
                document.getElementById('vacation-container').style.display =
                    this.checked ? 'block' : 'none';
            });

            let vacationIndex = 1;
            document.getElementById('add-vacation').addEventListener('click', function() {
                const entry = document.createElement('div');
                entry.className = 'vacation-entry row mb-3';
                entry.innerHTML = `
                <div class="col-md-3">
                    <label>Date</label>
                    <input type="date" name="vacations[${vacationIndex}][date]" class="form-control">
                </div>
                <div class="col-md-4">
                    <label>From Time</label>
                    <input type="time" name="vacations[${vacationIndex}][from_time]" class="form-control">
                </div>
                <div class="col-md-4">
                    <label>To Time</label>
                    <input type="time" name="vacations[${vacationIndex}][to_time]" class="form-control">
                </div>
                <div class="col-md-1 d-flex align-items-end mb-1 justify-content-center">
                    <button type="button" class="btn btn-danger remove-vacation">Remove</button>
                </div>
            `;
                document.getElementById('vacation-entries').appendChild(entry);
                vacationIndex++;
            });

            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-vacation')) {
                    e.target.closest('.vacation-entry').remove();
                }
            });

            document.querySelectorAll('input[type="time"]').forEach(input => {
                if (input.value) {
                    const timeParts = input.value.split(':');
                    if (timeParts.length >= 2) {
                        const hours = timeParts[0].padStart(2, '0');
                        const minutes = timeParts[1].padStart(2, '0');
                        input.value = `${hours}:${minutes}`;
                    }
                }
            });

            document.getElementById('studioForm').addEventListener('submit', function() {
                document.querySelectorAll('input[type="time"]').forEach(input => {
                    if (input.value) {
                        const timeParts = input.value.split(':');
                        if (timeParts.length >= 2) {
                            const hours = timeParts[0].padStart(2, '0');
                            const minutes = timeParts[1].padStart(2, '0');
                            input.value = `${hours}:${minutes}`;
                        }
                    }
                });
            });

            let featureCount = document.querySelectorAll('.feature-item').length;

            document.getElementById('add-feature').addEventListener('click', function() {
                const newFeature = document.createElement('div');
                newFeature.className = 'input-group mb-2 feature-item';
                newFeature.innerHTML = `
                <input type="text" class="form-control" name="features[]" placeholder="Enter feature">
                <div class="input-group-append">
                    <button class="btn btn-outline-danger remove-feature" type="button">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            `;
                document.getElementById('features-container').appendChild(newFeature);
                featureCount++;
            });

            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-feature') || e.target.closest('.remove-feature')) {
                    const button = e.target.classList.contains('remove-feature') ? e.target : e.target
                        .closest('.remove-feature');
                    if (document.querySelectorAll('.feature-item').length > 1) {
                        button.closest('.feature-item').remove();
                    }
                }
            });

            // File input label update
            document.getElementById('amenities_image').addEventListener('change', function(e) {
                const fileName = e.target.files[0] ? e.target.files[0].name : 'Choose image';
                this.nextElementSibling.textContent = fileName;
            });

            setupFilePreview('amenities_image', 'amenitiesPreview', 'amenitiesPreviewContainer');
            setupFilePreview('studio_video', 'videoPreview', 'videoPreviewContainer');
            setupMultipleFilePreview('gallery_images', 'galleryPreviews', 'galleryPreviewContainer');

            function setupFilePreview(inputId, previewId, containerId) {
                const input = document.getElementById(inputId);
                const preview = document.getElementById(previewId);
                const container = document.getElementById(containerId);

                input.addEventListener('change', function(e) {
                    const file = this.files[0];

                    if (file) {
                        const reader = new FileReader();

                        reader.onload = function(e) {
                            if (inputId === 'studio_video') {
                                preview.src = e.target.result;
                                preview.autoplay = true;
                                preview.muted = true;
                            } else {
                                preview.src = e.target.result;
                            }
                            container.style.display = 'block';
                        }

                        reader.readAsDataURL(file);

                        // Update file label
                        this.nextElementSibling.textContent = file.name;
                    } else {
                        container.style.display = 'none';
                        this.nextElementSibling.textContent = 'Choose file';
                    }
                });
            }

            function setupMultipleFilePreview(inputId, previewsContainerId, containerId) {
                const input = document.getElementById(inputId);
                const previewsContainer = document.getElementById(previewsContainerId);
                const container = document.getElementById(containerId);
                let selectedFiles = [];

                input.addEventListener('change', function(e) {
                    const files = Array.from(this.files);

                    if (files.length > 0) {
                        // Add new files to selectedFiles array
                        selectedFiles = [...selectedFiles, ...files];

                        renderGalleryPreviews();

                        container.style.display = 'block';
                        this.nextElementSibling.textContent = `${selectedFiles.length} file(s) selected`;

                        // Create a new FileList-like object and assign it to input
                        updateInputFiles(selectedFiles);
                    }
                });

                function renderGalleryPreviews() {
                    previewsContainer.innerHTML = '';

                    selectedFiles.forEach((file, index) => {
                        if (file.type.startsWith('image/')) {
                            const reader = new FileReader();

                            reader.onload = function(e) {
                                const previewItem = document.createElement('div');
                                previewItem.className = 'gallery-preview-item';
                                previewItem.innerHTML = `
                                <img src="${e.target.result}" alt="Preview ${index + 1}">
                                <div class="gallery-preview-remove" onclick="removeGalleryPreview(${index})">
                                    <i class="fas fa-times text-danger"></i>
                                </div>
                            `;
                                previewsContainer.appendChild(previewItem);
                            }

                            reader.readAsDataURL(file);
                        }
                    });
                }

                window.removeGalleryPreview = function(index) {
                    // Remove the specific file from selectedFiles
                    selectedFiles.splice(index, 1);

                    if (selectedFiles.length === 0) {
                        container.style.display = 'none';
                        input.nextElementSibling.textContent = 'Choose files';
                        input.value = '';
                    } else {
                        renderGalleryPreviews();
                        input.nextElementSibling.textContent = `${selectedFiles.length} file(s) selected`;

                        // Update the input files
                        updateInputFiles(selectedFiles);
                    }
                };

                function updateInputFiles(files) {
                    const dataTransfer = new DataTransfer();
                    files.forEach(file => dataTransfer.items.add(file));
                    input.files = dataTransfer.files;
                }
            }
        });

        function removeVideoPreview() {
            const input = document.getElementById('studio_video');
            const container = document.getElementById('videoPreviewContainer');

            input.value = '';
            container.style.display = 'none';
            input.nextElementSibling.textContent = 'Choose video file';
        }

        function removeAmenitiesPreview() {
            const input = document.getElementById('amenities_image');
            const container = document.getElementById('amenitiesPreviewContainer');

            input.value = '';
            container.style.display = 'none';
            input.nextElementSibling.textContent = 'Choose image';
        }

        let packageIndex = 1;

        document.getElementById('add-package').addEventListener('click', function() {
            const newPackage = document.createElement('div');
            newPackage.className = 'package-entry card mb-3';
            newPackage.innerHTML = `
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Package Name*</label>
                            <input type="text" class="form-control" name="packages[${packageIndex}][name]" placeholder="e.g., Basic Package" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Price*</label>
                            <input type="number" step="0.01" class="form-control" name="packages[${packageIndex}][price]" placeholder="0.00" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Max Guests</label>
                            <input type="number" class="form-control" name="packages[${packageIndex}][max_guests]" placeholder="Optional">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Features</label>
                    <div class="package-features-container">
                        <div class="input-group mb-2 feature-item">
                            <input type="text" class="form-control" name="packages[${packageIndex}][features][]" placeholder="Enter feature">
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-primary mt-2 add-package-feature">
                        <i class="fas fa-plus mr-1"></i> Add Feature
                    </button>
                </div>

                <button type="button" class="btn btn-danger btn-sm remove-package">
                    <i class="fas fa-trash mr-1"></i> Remove Package
                </button>
            </div>
        `;

            document.getElementById('packages-container').appendChild(newPackage);
            packageIndex++;
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-package') || e.target.closest('.remove-package')) {
                const button = e.target.classList.contains('remove-package') ? e.target : e.target.closest(
                    '.remove-package');
                if (document.querySelectorAll('.package-entry').length > 1) {
                    button.closest('.package-entry').remove();
                }
            }

            if (e.target.classList.contains('add-package-feature') || e.target.closest('.add-package-feature')) {
                const button = e.target.classList.contains('add-package-feature') ? e.target : e.target.closest(
                    '.add-package-feature');
                const container = button.previousElementSibling;
                const packageIndex = container.closest('.package-entry').querySelector('[name^="packages["]').name
                    .match(/\[(\d+)\]/)[1];

                const newFeature = document.createElement('div');
                newFeature.className = 'input-group mb-2 feature-item';
                newFeature.innerHTML = `
                <input type="text" class="form-control" name="packages[${packageIndex}][features][]" placeholder="Enter feature">
                <div class="input-group-append">
                    <button class="btn btn-outline-danger remove-package-feature" type="button">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            `;

                container.appendChild(newFeature);
            }

            if (e.target.classList.contains('remove-package-feature') || e.target.closest(
                    '.remove-package-feature')) {
                const button = e.target.classList.contains('remove-package-feature') ? e.target : e.target.closest(
                    '.remove-package-feature');
                const container = button.closest('.package-features-container');
                if (container.querySelectorAll('.feature-item').length > 1) {
                    button.closest('.feature-item').remove();
                }
            }
        });
    </script>
@endsection