@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;
        }

        .studio-image-container {
            width: 200px;
            height: 150px;
            overflow: hidden;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }

        .studio-image-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>

    <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">
                Edit Studio: {{ $studio->name }}
            </h1>
        </div>
        <div class="card-body">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" id="basic-info-tab" data-toggle="tab" href="#basicInfo"
                        role="tab">
                        <i class="fas fa-info-circle mr-1"></i> Basic Info
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="amenities-tab" data-toggle="tab" href="#amenities" role="tab">
                        <i class="fas fa-concierge-bell mr-1"></i> Amenities
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="media-tab" data-toggle="tab" href="#media" role="tab">
                        <i class="fas fa-photo-video mr-1"></i> Media
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="availability-tab" data-toggle="tab" href="#availability" role="tab">
                        <i class="fas fa-calendar-alt mr-1"></i> Availability
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="packages-tab" data-toggle="tab" href="#packages" role="tab">
                        <i class="fas fa-box-open mr-1"></i> Packages
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="vacation-tab" data-toggle="tab" href="#vacation" role="tab">
                        <i class="fas fa-umbrella-beach mr-1"></i> Vacation
                    </a>
                </li>
            </ul>
            <form method="post" action="{{ route('admin.studios.update', $studio->id) }}"
                    enctype="multipart/form-data" id="studioForm">
                @csrf
                @method('PUT')
                <div class="tab-content mt-4">
                    <!-- Basic Info -->
                    <div class="tab-pane fade show active" id="basicInfo" role="tabpanel"
                            aria-labelledby="basic-info-tab">
                        @include('admin.studios.components.basic-info')
                    </div>

                    <div class="tab-pane fade" id="amenities" role="tabpanel" aria-labelledby="amenities-tab">
                        @include('admin.studios.components.amenities')
                    </div>

                    <!-- Media -->
                    <div class="tab-pane fade" id="media" role="tabpanel" aria-labelledby="media-tab">
                        @include('admin.studios.components.media')
                    </div>

                    <!-- Availability -->
                    <div class="tab-pane fade" id="availability" role="tabpanel"
                            aria-labelledby="availability-tab">
                        @include('admin.studios.components.availability')
                    </div>

                    <!-- Packages -->
                    <div class="tab-pane fade" id="packages" role="tabpanel" aria-labelledby="packages-tab">
                        @include('admin.studios.components.packages')
                    </div>

                    <!-- Vacation -->
                    <div class="tab-pane fade" id="vacation" role="tabpanel" aria-labelledby="vacation-tab">
                        @include('admin.studios.components.vacation')
                    </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> Update 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>
@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);
        }

        .custom-file-label::after {
            content: "Browse";
        }
    </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);
            });

            document.querySelector('.custom-file-input').addEventListener('change', function (e) {
                let fileName = '';
                if (this.files && this.files.length > 1) {
                    fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this
                        .files.length);
                } else {
                    fileName = e.target.value.split('\\').pop();
                }

                if (fileName) {
                    document.querySelector('.custom-file-label').textContent = fileName;
                }
            });

            dayToggles.forEach(toggle => {
                toggle.addEventListener('change', function () {
                    const dayFields = this.closest('.day-availability').querySelector(
                        '.day-time-fields');
                    if (this.checked) {
                        dayFields.style.display = 'flex';
                    } else {
                        dayFields.style.display = 'none';
                    }
                });
            });

            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 = 'flex';
                        // });
                        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 = {{ $studio->vacations->count() ?? 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();
                    }
                }
            });

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

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

                if (input && preview && container) {
                    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
                            if (this.nextElementSibling && this.nextElementSibling.classList.contains(
                                'custom-file-label')) {
                                this.nextElementSibling.textContent = file.name;
                            }
                        } else {
                            container.style.display = 'none';
                            if (this.nextElementSibling && this.nextElementSibling.classList.contains(
                                'custom-file-label')) {
                                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 = [];

                if (input && previewsContainer && container) {
                    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';
                            if (this.nextElementSibling && this.nextElementSibling.classList.contains(
                                'custom-file-label')) {
                                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';
                            if (input.nextElementSibling && input.nextElementSibling.classList.contains(
                                'custom-file-label')) {
                                input.nextElementSibling.textContent = 'Choose files';
                            }
                            input.value = '';
                        } else {
                            renderGalleryPreviews();
                            if (input.nextElementSibling && input.nextElementSibling.classList.contains(
                                'custom-file-label')) {
                                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;
                    }
                }
            }

            // Add remove functions to global scope
            window.removeVideoPreview = function () {
                const input = document.getElementById('studio_video');
                const container = document.getElementById('videoPreviewContainer');

                if (input && container) {
                    input.value = '';
                    container.style.display = 'none';
                    if (input.nextElementSibling && input.nextElementSibling.classList.contains(
                        'custom-file-label')) {
                        input.nextElementSibling.textContent = 'Choose video file';
                    }
                }
            }

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

                if (input && container) {
                    input.value = '';
                    container.style.display = 'none';
                    if (input.nextElementSibling && input.nextElementSibling.classList.contains(
                        'custom-file-label')) {
                        input.nextElementSibling.textContent = 'Choose image';
                    }
                }
            }
        });

        function deleteImage(mediaId) {
            if (confirm('Are you sure you want to delete this image?')) {
                fetch(`/admin/media/${mediaId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();
                        }
                    });
            }
        }

        let packageIndex = {{ $studio->packages->count() }};

        document.getElementById('add-package').addEventListener('click', function () {
            const newPackage = document.createElement('div');
            newPackage.className = 'package-entry card mb-3';
            let hourOptions = '<option value="">Select Hour</option>';
            for (let h = 0; h < 24; h++) {
                let hour = String(h).padStart(2, '0') + ':00';
                hourOptions += `<option value="${hour}">${hour}</option>`;
            }
            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="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Availability (in Hours)</label>
                                <input type="number" class="form-control" name="packages[${packageIndex}][availability_hours]" placeholder="e.g., 4 (hours)">
                            </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 packageEntry = container.closest('.package-entry');
                const nameInput = packageEntry.querySelector('[name^="packages["]');
                const packageIndexMatch = nameInput.name.match(/\[(\d+)\]/);
                const packageIndex = packageIndexMatch ? packageIndexMatch[1] : '0';

                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();
                }
            }
        });

        document.querySelectorAll('.custom-file-input').forEach(input => {
            input.addEventListener('change', function (e) {
                let fileName = '';
                if (this.files && this.files.length > 1) {
                    fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this
                        .files.length);
                } else {
                    fileName = e.target.value.split('\\').pop();
                }

                if (fileName) {
                    const label = this.nextElementSibling;
                    if (label && label.classList.contains('custom-file-label')) {
                        label.textContent = fileName;
                    }
                }
            });
        });

        const bookingTypeSelect = document.getElementById('booking_type');
        const availabilityContainer = document.getElementById('availability-container');

        if (bookingTypeSelect && availabilityContainer) {
            bookingTypeSelect.addEventListener('change', function () {
                const selectedType = this.value;

                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';
                        });
                    }
                }
            });
        }

        const vacationMode = document.getElementById('vacation_mode');
        const vacationContainer = document.getElementById('vacation-container');

        if (vacationMode && vacationContainer) {
            vacationMode.addEventListener('change', function () {
                vacationContainer.style.display = this.checked ? 'block' : 'none';
            });
        }

        let vacationIndex = {{ $studio->vacations->count() }};
        const addVacationBtn = document.getElementById('add-vacation');

        if (addVacationBtn) {
            addVacationBtn.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]" min="{{ \Carbon\Carbon::today()->format('Y-m-d') }}" 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('.remove-vacation')) {
                const button = e.target.classList.contains('remove-vacation') ? e.target : e.target.closest(
                    '.remove-vacation');
                button.closest('.vacation-entry').remove();
            }
        });

        let featureCount = document.querySelectorAll('#features-container .feature-item').length;
        const addFeatureBtn = document.getElementById('add-feature');

        if (addFeatureBtn) {
            addFeatureBtn.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('#features-container .feature-item').length > 1) {
                    button.closest('.feature-item').remove();
                }
            }
        });

        const studioForm = document.getElementById('studioForm');
        if (studioForm) {
            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}`;
                        }
                    }
                });
            });
        }
    </script>
@endsection