@extends('layouts.app', ['page' => __('Administración de Desarrollos'), 'pageSlug' => 'house-developments', 'section' => 'house-developments'])
@section('content')
    <div class="container-fluid mt--7">
        <div class="row">
            <div class="col-xl-12 order-xl-1">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">{{ __('Administración de Desarrollos') }}</h3>
                            </div>
                            <div class="col-4 text-right" style="margin-bottom: 20px;">
                                <a href="{{ route('house-developments.index') }}" class="btn btn-sm btn-primary btn-gradient">{{ __('Regresar a listado') }}</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('house-developments.store') }}" autocomplete="off" enctype="multipart/form-data">
                            @csrf

                            <h6 class="heading-small text-muted mb-4">{{ __('Información del Desarrollo') }}</h6>
                            <div class="pl-lg-4">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-name">{{ __('Nombre') }}</label>
                                            <input type="text" name="name" id="input-name" class="form-control form-control-alternative{{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="{{ __('Nombre') }}" value="{{ old('name') }}" required autofocus>
                                            @include('alerts.feedback', ['field' => 'name'])
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="custom-input-file form-group image-upload-group">
                                            <div class="d-flex bw-dflex-center">
                                                <label class="form-control-label" for="input-logo">{{ __('Cargar Logotipo') }}</label>
                                                <input type="file" name="logo" id="input-logo" class="form-control form-control-alternative">
                                                <img id="logo-preview" src="" alt="Vista previa del logotipo" style="display: none; max-width: 100px; margin-left: 10px;">
                                            </div>
                                            @include('alerts.feedback', ['field' => 'logo'])
                                        </div>
                                        <br>
                                        <div class="custom-input-file form-group image-upload-group">
                                            <div class="d-flex bw-dflex-center">
                                                <label class="form-control-label" for="input-main_image">{{ __('Imagen Principal') }}</label>
                                                <input type="file" name="main_image" id="input-main_image" class="form-control form-control-alternative">
                                                <img id="main_image-preview" src="" alt="Vista previa de la imagen principal" style="display: none; max-width: 100px; margin-left: 10px;">
                                            </div>
                                            @include('alerts.feedback', ['field' => 'main_image'])
                                        </div>
                                    </div>
                                </div>

                                <hr class="bw-hr">

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group{{ $errors->has('description') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-description">{{ __('Descripción') }}</label>
                                            <textarea name="description" id="input-description" class="form-control form-control-alternative{{ $errors->has('description') ? ' is-invalid' : '' }}" placeholder="{{ __('Descripción') }}" required>{{ old('description') }}</textarea>
                                            @include('alerts.feedback', ['field' => 'description'])
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group{{ $errors->has('delivery_date') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-delivery_date">{{ __('Fecha de entrega') }}</label>
                                            <input type="date" name="delivery_date" id="input-delivery_date" class="form-control form-control-alternative{{ $errors->has('delivery_date') ? ' is-invalid' : '' }}" placeholder="{{ __('Fecha de entrega') }}" value="{{ old('delivery_date') }}" required>
                                            @include('alerts.feedback', ['field' => 'delivery_date'])
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <h5>{{ __('Recorrido 3D') }}</h5>
                                        <input type="text" name="3d_tour" class="form-control" placeholder="{{ __('URL del Recorrido 3D') }}" value="{{ old('3d_tour') }}">
                                    </div>

                                    <div class="col-md-6" style="margin-top: 8px;">
                                        <div class="form-group{{ $errors->has('address') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-address">{{ __('Ubicación') }}</label>
                                            <input type="text" name="address" id="input-address" class="form-control form-control-alternative{{ $errors->has('address') ? ' is-invalid' : '' }}" placeholder="{{ __('Nombre') }}" value="{{ old('address') }}" required autofocus>
                                            @include('alerts.feedback', ['field' => 'address'])
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group{{ $errors->has('type') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-type">{{ __('Tipo') }}</label>
                                            <select name="type" id="input-type" class="form-select form-control-alternative{{ $errors->has('type') ? ' is-invalid' : '' }}">
                                                <option value="">{{ __('Seleccionar') }}</option>
                                                <option value="v" {{ old('type') == 'v' ? 'selected' : '' }}>{{ __('Vertical') }}</option>
                                                <option value="h" {{ old('type') == 'h' ? 'selected' : '' }}>{{ __('Horizontal') }}</option>
                                            </select>
                                            @include('alerts.feedback', ['field' => 'type'])
                                        </div>
                                    </div>

                                    <div class="col-md-6" id="levels-group" style="display: none;">
                                        <div class="form-group{{ $errors->has('levels') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-levels">{{ __('Niveles') }}</label>
                                            <input type="number" name="levels" id="input-levels" min="1" class="form-control form-control-alternative{{ $errors->has('levels') ? ' is-invalid' : '' }}" placeholder="{{ __('Niveles') }}" value="{{ old('levels', 1) }}">
                                            @include('alerts.feedback', ['field' => 'levels'])
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group{{ $errors->has('has_views') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-has_views">{{ __('Tiene vistas') }}</label>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" name="has_views" id="input-has_views" class="custom-control-input" value="1" {{ old('has_views') ? 'checked' : '' }}>
                                                <label class="custom-control-label bw-custom-control-label" for="input-has_views">{{ __('Sí') }}</label>
                                            </div>
                                            @include('alerts.feedback', ['field' => 'has_views'])
                                        </div>
                                    </div>

                                    <div class="col-md-6" id="views-group" style="display: none;">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-views">{{ __('Vistas') }}</label>
                                            <div id="views-container">
                                                @foreach(old('views', ['']) as $index => $view)
                                                <div class="input-group mb-3">
                                                    <input type="text" name="views[]" class="form-control" placeholder="{{ __('Vista') }}" value="{{ $view }}">
                                                    <div class="input-group-append">
                                                        @if($index === 0)
                                                        <button class="btn btn-outline-secondary btn-sm add-view btn-gradient" type="button">+</button>
                                                        @else
                                                        <button class="btn btn-outline-secondary btn-sm remove-view btn-gradient" type="button">-</button>
                                                        @endif
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Nueva fila para Highlights y Amenities -->
                                <div class="row">
                                    <!-- Columna izquierda: Highlights -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">{{ __('Highlights') }}</label>
                                            <div id="highlights-container">
                                                @foreach(old('highlight_texts', ['']) as $index => $highlight)
                                                <div class="input-group mb-3">
                                                    <input type="text" name="highlight_texts[]" class="form-control" placeholder="{{ __('Texto') }}" value="{{ $highlight }}">
                                                    <select name="highlight_icons[]" class="select2 form-select" required>
                                                        <option value="" data-icon="">{{ __('Seleccionar icono') }}</option>
                                                        @for($i = 1; $i <= 45; $i++)
                                                        <option value="icon{{ $i }}" data-icon="/assets/icons/icon{{ $i }}.svg" {{ old('highlight_icons.'.$index) == 'icon'.$i ? 'selected' : '' }}></option>
                                                        @endfor
                                                    </select>
                                                    <div class="input-group-append">
                                                        @if($index === 0)
                                                        <button class="btn btn-outline-secondary btn-sm add-highlight btn-gradient" type="button">+</button>
                                                        @else
                                                        <button class="btn btn-outline-secondary btn-sm remove-highlight btn-gradient" type="button">-</button>
                                                        @endif
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label">{{ __('Amenities') }}</label>
                                            <div id="amenities-container">
                                                @foreach(old('amenities_text', ['']) as $index => $amenity)
                                                <div class="input-group mb-3">
                                                    <div class="col-md-4">
                                                        <input type="text" name="amenities_text[]" class="form-control" placeholder="{{ __('Texto') }}" value="{{ $amenity }}">
                                                    </div>
                                                    <div class="col-md-4 custom-input-file">
                                                        <div class="d-flex bw-dflex-center">
                                                            <label class="form-control-label">{{ __('Imagen') }}</label>
                                                            <input type="file" name="amenities_images[]" class="form-control form-control-alternative" onchange="previewAmenityImage(this)">
                                                            <img class="amenity-image-preview" src="" alt="Vista previa de la imagen" style="display: none; max-width: 100px; margin-left: 10px;">
                                                        </div>
                                                    </div>
                                                    <div class="input-group-append">
                                                        @if($index === 0)
                                                        <button class="btn btn-outline-secondary btn-sm add-amenity btn-gradient" type="button">+</button>
                                                        @else
                                                        <button class="btn btn-outline-secondary btn-sm remove-amenity btn-gradient" type="button">-</button>
                                                        @endif
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-gallery">{{ __('Galería de Imágenes') }}</label>
                                            <div id="gallery-container" class="border p-3" style="border-style: dashed; border-radius: 5px; cursor: pointer;">
                                                <p class="text-center mb-0" style="color: #6c757d;">Arrastra y suelta imágenes aquí o haz clic para seleccionar</p>
                                                <input type="file" name="gallery[]" id="input-gallery" class="form-control d-none" multiple>
                                                <div id="gallery-previews" class="d-flex flex-wrap mt-2"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-blueprints">{{ __('Planos') }}</label>
                                            <div id="blueprints-container" class="border p-3" style="border-style: dashed; border-radius: 5px; cursor: pointer;">
                                                <p class="text-center mb-0" style="color: #6c757d;">Arrastra y suelta archivos PDF aquí o haz clic para seleccionar</p>
                                                <input type="file" name="blueprints[]" id="input-blueprints" class="form-control d-none" multiple accept=".pdf">
                                                <div id="blueprints-previews" class="d-flex flex-wrap mt-2"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <br/>
                                <hr class="bw-hr">
                                <br/>
                                <div class="row">
                                    <div class="col-md-12"><h3 class="mb-0">Campos para el portal web: Detalle de desarrollo</h3></div>
                                    <br/>

                                    <div class="col-md-4">
                                        <br/><br/>
                                        <div class="custom-input-file form-group image-upload-group" style="margin: 0;width: auto;">
                                            <div class="d-flex bw-dflex-center">
                                                <label class="form-control-label" for="input-detail_development_first_image" style="color:#ffffff;">{{ __('Primer imagen del detalle de desarrollo') }}</label>
                                                <input type="file" name="detail_development_first_image" id="input-detail_development_first_image" class="form-control form-control-alternative" style="cursor: inherit;">
                                                <img id="detail_development_first_image-preview" src="" alt="Vista previa de Primer imagen del detalle de desarrollo" style="display: none; max-width: 100px; margin-left: 10px;">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <br/><br/>
                                        <div class="custom-input-file form-group image-upload-group" style="margin: 0;width: auto;">
                                            <div class="d-flex bw-dflex-center">
                                                <label class="form-control-label" for="input-detail_development_second_image" style="color:#ffffff;">{{ __('Segunda imagen del detalle de desarrollo') }}</label>
                                                <input type="file" name="detail_development_second_image" id="input-detail_development_second_image" class="form-control form-control-alternative" style="cursor: inherit;">
                                                <img id="detail_development_second_image-preview" src="" alt="Vista previa de Segunda imagen del detalle de desarrollo" style="display: none; max-width: 100px; margin-left: 10px;">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <br/><br/>
                                        <div class="custom-input-file form-group image-upload-group" style="margin: 0;width: auto;">
                                            <div class="d-flex bw-dflex-center">
                                                <label class="form-control-label" for="input-detail_development_third_image" style="color:#ffffff;">{{ __('Tercer imagen del detalle de desarrollo') }}</label>
                                                <input type="file" name="detail_development_third_image" id="input-detail_development_third_image" class="form-control form-control-alternative" style="cursor: inherit;">
                                                <img id="detail_development_third_image-preview" src="" alt="Vista previa de Tercer imagen del detalle de desarrollo" style="display: none; max-width: 100px; margin-left: 10px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-md-6">
                                        <br/>
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-location_link">{{ __('Enlace de la Ubicación') }}</label>
                                            <input type="text" name="location_link" id="input-location_link" class="form-control form-control-alternative" value="{{ old('location_link') }}">
                                        </div>
                                    </div>
                                    <br/>
                                    <div class="col-md-6">
                                        <br/>
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-location_subtitle">{{ __('Subtitulo de la Ubicación') }}</label>
                                            <input type="text" name="location_subtitle" id="input-location_subtitle" class="form-control form-control-alternative" value="{{ old('location_subtitle') }}">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <br/>
                                        <div class="custom-input-file form-group image-upload-group" style="margin: 0;width: auto;">
                                            <div class="d-flex bw-dflex-center">
                                                <label class="form-control-label" for="input-location_image" style="color:#ffffff;">{{ __('Imagen de la Ubicación') }}</label>
                                                <input type="file" name="location_image" id="input-location_image" class="form-control form-control-alternative" style="cursor: inherit;">
                                                <img id="location_image-preview" src="" alt="Vista previa de la imagen de ubicacion" style="display: none; max-width: 100px; margin-left: 10px;">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <br/>
                                        <div class="custom-input-file form-group image-upload-group" style="margin: 0;width: auto;">
                                            <div class="d-flex bw-dflex-center">
                                                <label class="form-control-label" for="input-housedevelopments_book" style="color:#ffffff;">{{ __('Book') }}</label>
                                                <input type="file" name="housedevelopments_book" id="input-housedevelopments_book" class="form-control form-control-alternative" accept=".pdf" style="cursor: inherit;">
                                                <div id="housedevelopments_book-previews" class="d-flex flex-wrap mt-2" style="margin-left: 15px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-md-6">
                                        <br/><br/>
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-floorname">{{ __('Titulo Planta') }}</label>
                                            <input type="text" name="floorname" id="input-floorname" class="form-control form-control-alternative" value="{{ old('floorname') }}">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <br/><br/>
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-floor-gallery">{{ __('Galería de Imágenes para Plantas') }}</label>
                                            <div id="floor-gallery-container" class="border p-3" style="border-style: dashed; border-radius: 5px; cursor: pointer;">
                                                <p class="text-center mb-0" style="color: #6c757d;">Arrastra y suelta imágenes aquí o haz clic para seleccionar</p>
                                                <input type="file" name="floorgallery[]" id="input-floor-gallery" class="form-control d-none" multiple>
                                                <div id="floor-gallery-previews" class="d-flex flex-wrap mt-2"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <br/>
                                        <div>
                                            <label class="form-control-label" for="floorcharacteristics">Caracteristicas de la planta</label>
                                            <select id="floorcharacteristics" name="floorcharacteristics[]" class="form-control" multiple="multiple">
                                                @foreach(['Lobby', 'Front desk', 'Restaurante'] as $option)
                                                    <option value="{{ $option }}" {{ in_array($option, old('floorcharacteristics', [])) ? 'selected' : '' }}>
                                                        {{ $option }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <br/>
                                            <input type="text" id="newCharacteristic" class="form-control mt-2" placeholder="Agregar nueva característica">
                                            <br/>
                                            <button type="button" id="addCharacteristic" class="btn btn-primary mt-2 btn-gradient">Agregar</button>
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="row">
                                    <div class="col-md-12">
                                        <br/>
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-highlights_description">{{ __('Descripcion Desarrollo Web') }}</label>
                                            <input type="text" name="highlights_description" id="input-highlights_description" class="form-control form-control-alternative" value="{{ old('highlights_description') }}">
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <div class="text-center">
                                    <button type="submit" class="btn btn-success mt-4 btn-gradient">{{ __('Guardar') }}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        new SlimSelect({
            select: '#input-type',
            searchText: "Buscar",
            searchPlaceholder: "Buscar",
            placeholder: "Buscar",
            showSearch: false
        });

        document.addEventListener('DOMContentLoaded', function () {
            function formatState(option) {
                if (!option.id) {
                    return option.text;
                }
                var iconPath = $(option.element).data('icon');
                var $option = $(
                    '<span>' +
                        (iconPath ? '<img src="' + iconPath + '" style="width: 20px; height: 20px; margin-right: 8px;" />' : '') +
                        option.text +
                    '</span>'
                );
                return $option;
            }

            $('.select2').select2({
                templateResult: formatState,
                templateSelection: formatState,
                width: '37%'
            });

            let locationImagePreview = document.getElementById('location_image-preview');
            let locationImageInput = document.getElementById('input-location_image');
            let detailDevelopmentFirstImagePreview = document.getElementById('detail_development_first_image-preview');
            let detailDevelopmentFirstImageInput = document.getElementById('input-detail_development_first_image');
            let detailDevelopmentSecondImagePreview = document.getElementById('detail_development_second_image-preview');
            let detailDevelopmentSecondImageInput = document.getElementById('input-detail_development_second_image');
            let detailDevelopmentThirdImagePreview = document.getElementById('detail_development_third_image-preview');
            let detailDevelopmentThirdImageInput = document.getElementById('input-detail_development_third_image');

            let housedevelopmentsBookPreviews = document.getElementById('housedevelopments_book-previews');
            let housedevelopmentsBookInput = document.getElementById('input-housedevelopments_book');

            let typeSelect = document.getElementById('input-type');
            let levelsGroup = document.getElementById('levels-group');
            let hasViewsCheckbox = document.getElementById('input-has_views');
            let viewsGroup = document.getElementById('views-group');
            let viewsContainer = document.getElementById('views-container');
            let galleryContainer = document.getElementById('gallery-container');
            let galleryInput = document.getElementById('input-gallery');
            let galleryPreviews = document.getElementById('gallery-previews');
            let logoInput = document.getElementById('input-logo');
            let mainImageInput = document.getElementById('input-main_image');
            let logoPreview = document.getElementById('logo-preview');
            let mainImagePreview = document.getElementById('main_image-preview');
            let blueprintsContainer = document.getElementById('blueprints-container');
            let blueprintsInput = document.getElementById('input-blueprints');
            let blueprintsPreviews = document.getElementById('blueprints-previews');

            let floorGalleryContainer = document.getElementById('floor-gallery-container');
            let floorGalleryInput = document.getElementById('input-floor-gallery');
            let floorGalleryPreviews = document.getElementById('floor-gallery-previews');

            $('#floorcharacteristics').multiSelect();

            $('#addCharacteristic').on('click', function() {
                var newOption = $('#newCharacteristic').val().trim();
                if(newOption !== ""){
                    if($("#floorcharacteristics option[value='" + newOption + "']").length === 0){
                        $('#floorcharacteristics').append('<option value="' + newOption + '" selected>' + newOption + '</option>');
                        $('#floorcharacteristics').val($('#floorcharacteristics').val().concat(newOption));
                        $('#newCharacteristic').val('');
                        $('#floorcharacteristics').multiSelect('refresh');
                    } else {
                        alert("Esta característica ya existe.");
                    }
                }
            });

            function previewImage(input, preview) {
                let file = input.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        preview.src = e.target.result;
                        preview.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    preview.style.display = 'none';
                }
            }

            locationImageInput.addEventListener('change', function () {
                previewImage(locationImageInput, locationImagePreview);
            });

            detailDevelopmentFirstImageInput.addEventListener('change', function () {
                previewImage(detailDevelopmentFirstImageInput, detailDevelopmentFirstImagePreview);
            });

            detailDevelopmentSecondImageInput.addEventListener('change', function () {
                previewImage(detailDevelopmentSecondImageInput, detailDevelopmentSecondImagePreview);
            });

            detailDevelopmentThirdImageInput.addEventListener('change', function () {
                previewImage(detailDevelopmentThirdImageInput, detailDevelopmentThirdImagePreview);
            });

            function previewPdf(input, preview) {
                let file = input.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        let pdfFrame = document.createElement('iframe');
                        pdfFrame.src = e.target.result;
                        pdfFrame.className = 'img-thumbnail';
                        pdfFrame.style.maxWidth = '100px';
                        pdfFrame.style.marginRight = '10px';
                        pdfFrame.style.border = '1px solid #ddd';
                        pdfFrame.style.borderRadius = '4px';
                        pdfFrame.style.height = '150px';
                        preview.appendChild(pdfFrame);
                    };
                    reader.readAsDataURL(file);
                } else {
                    preview.style.display = 'none';
                }
            }

            housedevelopmentsBookInput.addEventListener('change', function () {
                previewPdf(housedevelopmentsBookInput, housedevelopmentsBookPreviews);
            });

            function toggleLevels() {
                if (typeSelect.value === 'v') {
                    levelsGroup.style.display = 'block';
                    document.getElementById('input-levels').value = old('levels', 1);
                } else {
                    levelsGroup.style.display = 'none';
                    document.getElementById('input-levels').value = '';
                }
            }

            function toggleViews() {
                if (hasViewsCheckbox.checked) {
                    viewsGroup.style.display = 'block';
                } else {
                    viewsGroup.style.display = 'none';
                    while (viewsContainer.childElementCount > 1) {
                        viewsContainer.removeChild(viewsContainer.lastChild);
                    }
                    viewsContainer.querySelector('input').value = '';
                }
            }

            toggleLevels();
            toggleViews();

            typeSelect.addEventListener('change', toggleLevels);
            hasViewsCheckbox.addEventListener('change', toggleViews);

            function validateFileSize(file, maxSize) {
                return file.size <= maxSize;
            }

            function showError(message) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: message,
                    confirmButtonText: 'Aceptar'
                });
            }

            logoInput.addEventListener('change', function () {
                let file = logoInput.files[0];
                if (file && !validateFileSize(file, 5 * 1024 * 1024)) {
                    showError('No se puede cargar imágenes mayores a 5MB.');
                    logoInput.value = '';
                    logoPreview.style.display = 'none';
                } else {
                    previewImage(logoInput, logoPreview);
                }
            });

            mainImageInput.addEventListener('change', function () {
                let file = mainImageInput.files[0];
                if (file && !validateFileSize(file, 5 * 1024 * 1024)) {
                    showError('No se puede cargar imágenes mayores a 5MB.');
                    mainImageInput.value = '';
                    mainImagePreview.style.display = 'none';
                } else {
                    previewImage(mainImageInput, mainImagePreview);
                }
            });

            function previewImages(input) {
                galleryPreviews.innerHTML = '';
                let files = input.files;

                for (let i = 0; i < files.length; i++) {
                    let file = files[i];
                    if (validateFileSize(file, 5 * 1024 * 1024)) {
                        let reader = new FileReader();
                        reader.onload = function (e) {
                            let img = document.createElement('img');
                            img.src = e.target.result;
                            img.className = 'img-thumbnail';
                            img.style.maxWidth = '100px';
                            img.style.marginRight = '10px';
                            galleryPreviews.appendChild(img);
                        };
                        reader.readAsDataURL(file);
                    } else {
                        showError('No se puede cargar imágenes mayores a 5MB: ' + file.name);
                        input.value = '';
                        galleryPreviews.innerHTML = '';
                        break;
                    }
                }
            }

            galleryInput.addEventListener('change', function () {
                let files = galleryInput.files;
                let valid = true;
                for (let i = 0; i < files.length; i++) {
                    if (!validateFileSize(files[i], 5 * 1024 * 1024)) {
                        valid = false;
                        showError('No se puede cargar imágenes mayores a 5MB: ' + files[i].name);
                        break;
                    }
                }

                if (valid) {
                    previewImages(galleryInput);
                } else {
                    galleryInput.value = '';
                    galleryPreviews.innerHTML = '';
                }
            });

            function resetGalleryInput() {
                galleryInput.value = '';
            }

            galleryContainer.addEventListener('click', function () {
                resetGalleryInput();
                galleryInput.click();
            });

            galleryContainer.addEventListener('dragover', function (e) {
                e.preventDefault();
                e.stopPropagation();
                galleryContainer.style.borderColor = '#007bff';
            });

            galleryContainer.addEventListener('dragleave', function (e) {
                e.preventDefault();
                e.stopPropagation();
                galleryContainer.style.borderColor = '#ced4da';
            });

            galleryContainer.addEventListener('drop', function (e) {
                e.preventDefault();
                e.stopPropagation();
                galleryContainer.style.borderColor = '#ced4da';
                let files = e.dataTransfer.files;
                galleryInput.files = files;
                previewImages(galleryInput);
            });

            blueprintsInput.addEventListener('change', function () {
                let file = blueprintsInput.files[0];
                if (file && !validateFileSize(file, 30 * 1024 * 1024)) {
                    showError('No se puede cargar PDFs mayores a 30MB.');
                    blueprintsInput.value = '';
                } else {
                    previewBlueprints(blueprintsInput);
                }
            });

            document.addEventListener('click', function (e) {
                if (e.target.classList.contains('add-view')) {
                    let newInputGroup = document.createElement('div');
                    newInputGroup.className = 'input-group mb-3';
                    newInputGroup.innerHTML = `
                        <input type="text" name="views[]" class="form-control" placeholder="{{ __('Vista') }}">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary btn-sm remove-view btn-gradient" type="button">-</button>
                        </div>
                    `;
                    viewsContainer.appendChild(newInputGroup);
                }
                if (e.target.classList.contains('remove-view')) {
                    e.target.closest('.input-group').remove();
                }
            });

            let dateInput = document.getElementById('input-delivery_date');
            dateInput.addEventListener('click', function () {
                dateInput.showPicker();
            });

            function previewBlueprints(input) {
                blueprintsPreviews.innerHTML = '';
                let files = input.files;

                for (let i = 0; i < files.length; i++) {
                    let file = files[i];
                    let reader = new FileReader();

                    reader.onload = function (e) {
                        let pdfFrame = document.createElement('iframe');
                        pdfFrame.src = e.target.result;
                        pdfFrame.className = 'img-thumbnail';
                        pdfFrame.style.maxWidth = '100px';
                        pdfFrame.style.marginRight = '10px';
                        pdfFrame.style.border = '1px solid #ddd';
                        pdfFrame.style.borderRadius = '4px';
                        pdfFrame.style.height = '150px';
                        blueprintsPreviews.appendChild(pdfFrame);
                    };

                    reader.readAsDataURL(file);
                }
            }

            floorGalleryInput.addEventListener('change', function () {
                let files = floorGalleryInput.files;
                let valid = true;
                for (let i = 0; i < files.length; i++) {
                    if (!validateFileSize(files[i], 5 * 1024 * 1024)) {
                        valid = false;
                        showError('No se puede cargar imágenes mayores a 5MB: ' + files[i].name);
                        break;
                    }
                }

                if (valid) {
                    floorPreviewImages(floorGalleryInput);
                } else {
                    floorGalleryInput.value = '';
                    floorGalleryPreviews.innerHTML = '';
                }
            });

            function floorPreviewImages(input) {
                floorGalleryPreviews.innerHTML = '';
                let files = input.files;

                for (let i = 0; i < files.length; i++) {
                    let file = files[i];
                    if (validateFileSize(file, 5 * 1024 * 1024)) {
                        let reader = new FileReader();
                        reader.onload = function (e) {
                            let img = document.createElement('img');
                            img.src = e.target.result;
                            img.className = 'img-thumbnail';
                            img.style.maxWidth = '100px';
                            img.style.marginRight = '10px';
                            floorGalleryPreviews.appendChild(img);
                        };
                        reader.readAsDataURL(file);
                    } else {
                        showError('No se puede cargar imágenes mayores a 5MB: ' + file.name);
                        input.value = '';
                        floorGalleryPreviews.innerHTML = '';
                        break;
                    }
                }
            }

            function resetFloorGalleryInput() {
                floorGalleryInput.value = '';
            }

            floorGalleryContainer.addEventListener('click', function () {
                resetFloorGalleryInput();
                floorGalleryInput.click();
            });

            floorGalleryContainer.addEventListener('dragover', function (e) {
                e.preventDefault();
                e.stopPropagation();
                floorGalleryContainer.style.borderColor = '#007bff';
            });

            floorGalleryContainer.addEventListener('dragleave', function (e) {
                e.preventDefault();
                e.stopPropagation();
                floorGalleryContainer.style.borderColor = '#ced4da';
            });

            floorGalleryContainer.addEventListener('drop', function (e) {
                e.preventDefault();
                e.stopPropagation();
                floorGalleryContainer.style.borderColor = '#ced4da';
                let files = e.dataTransfer.files;
                floorGalleryInput.files = files;
                floorPreviewImages(floorGalleryInput);
            });

            document.addEventListener('click', function (e) {
                if (e.target.classList.contains('add-highlight')) {
                    let newInputGroup = document.createElement('div');
                    newInputGroup.className = 'input-group mb-3';
                    newInputGroup.innerHTML = `
                        <input type="text" name="highlight_texts[]" class="form-control" placeholder="{{ __('Texto') }}">
                        <select name="highlight_icons[]" class="select2 form-select" required>
                            <option value="" data-icon="">{{ __('Seleccionar icono') }}</option>
                            @for($i = 1; $i <= 45; $i++)
                            <option value="icon{{ $i }}" data-icon="/assets/icons/icon{{ $i }}.svg"></option>
                            @endfor
                        </select>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary btn-sm remove-highlight btn-gradient" type="button">-</button>
                        </div>
                    `;
                    document.getElementById('highlights-container').appendChild(newInputGroup);

                    $('.select2').select2({
                        templateResult: formatState,
                        templateSelection: formatState,
                        width: '37%'
                    });
                }

                if (e.target.classList.contains('remove-highlight')) {
                    e.target.closest('.input-group').remove();
                }
            });

            document.addEventListener('click', function (e) {
                if (e.target.classList.contains('add-amenity')) {
                    let newAmenityGroup = document.createElement('div');
                    newAmenityGroup.className = 'input-group mb-3';
                    newAmenityGroup.innerHTML = `
                        <div class="col-md-4">
                            <input type="text" name="amenities_text[]" class="form-control" placeholder="{{ __('Texto') }}">
                        </div>
                         <div class="col-md-4 custom-input-file ">
                            <div class="d-flex bw-dflex-center">
                                <label class="form-control-label">{{ __('Imagen') }}</label>
                                <input type="file" name="amenities_images[]" class="form-control form-control-alternative" onchange="previewAmenityImage(this)">
                                <img class="amenity-image-preview" src="" alt="Vista previa de la imagen" style="display: none; max-width: 100px; margin-left: 10px;">
                            </div>
                        </div>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary btn-sm remove-amenity btn-gradient" type="button">-</button>
                        </div>
                    `;
                    document.getElementById('amenities-container').appendChild(newAmenityGroup);
                }
                if (e.target.classList.contains('remove-amenity')) {
                    e.target.closest('.input-group').remove();
                }
            });

            window.previewAmenityImage = function(input) {
                let file = input.files[0];
                let preview = input.nextElementSibling;

                if (file) {
                    if (validateFileSize(file, 5 * 1024 * 1024)) {
                        let reader = new FileReader();
                        reader.onload = function (e) {
                            preview.src = e.target.result;
                            preview.style.display = 'block';
                        };
                        reader.readAsDataURL(file);
                    } else {
                        showError('No se puede cargar imágenes mayores a 5MB: ' + file.name);
                        input.value = '';
                        preview.style.display = 'none';
                    }
                } else {
                    preview.style.display = 'none';
                }
            };

            function resetBlueprintsInput() {
                blueprintsInput.value = '';
            }

            blueprintsContainer.addEventListener('click', function () {
                resetBlueprintsInput();
                blueprintsInput.click();
            });

            blueprintsContainer.addEventListener('dragover', function (e) {
                e.preventDefault();
                e.stopPropagation();
                blueprintsContainer.style.borderColor = '#007bff';
            });

            blueprintsContainer.addEventListener('dragleave', function (e) {
                e.preventDefault();
                e.stopPropagation();
                blueprintsContainer.style.borderColor = '#ced4da';
            });

            blueprintsContainer.addEventListener('drop', function (e) {
                e.preventDefault();
                e.stopPropagation();
                blueprintsContainer.style.borderColor = '#ced4da';
                let files = e.dataTransfer.files;
                blueprintsInput.files = files;
                previewBlueprints(blueprintsInput);
            });
        });
    </script>
@endpush