@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">
                                <span class="bw-card-title">{{ __('Editar desarrollo') }}</span> <span class="bw-card-title-bold"><i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i> {{ $houseDevelopment->name }}</span>
                            </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.update', $houseDevelopment->id) }}" autocomplete="off" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <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', $houseDevelopment->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="{{ $houseDevelopment->logo_path }}" alt="Vista previa del logotipo" style="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="{{ $houseDevelopment->main_image_path }}" alt="Vista previa de la imagen principal" style="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', $houseDevelopment->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', $houseDevelopment->delivery_date_normal) }}" 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', $houseDevelopment->view_3d) }}">
                                    </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', $houseDevelopment->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', $houseDevelopment->type) == 'v' ? 'selected' : '' }}>{{ __('Vertical') }}</option>
                                                <option value="h" {{ old('type', $houseDevelopment->type) == 'h' ? 'selected' : '' }}>{{ __('Horizontal') }}</option>
                                            </select>
                                            @include('alerts.feedback', ['field' => 'type'])
                                        </div>
                                    </div>

                                    <div class="col-md-6" id="levels-group" style="display: {{ old('type', $houseDevelopment->type) == 'v' ? 'block' : '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', $houseDevelopment->levels) }}">
                                            @include('alerts.feedback', ['field' => 'levels'])
                                        </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="/admin/storage/{{ $houseDevelopment->detail_development_first_image }}" alt="Vista previa de Primer imagen del detalle de desarrollo" style="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="/admin/storage/{{ $houseDevelopment->detail_development_second_image }}" alt="Vista previa de Segunda imagen del detalle de desarrollo" style="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="/admin/storage/{{ $houseDevelopment->detail_development_third_image }}" alt="Vista previa de Tercer imagen del detalle de desarrollo" style="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', $houseDevelopment->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', $houseDevelopment->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="/admin/storage/{{ $houseDevelopment->location_image }}" alt="Vista previa de la imagen de ubicacion" style="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/>
                                        <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', $houseDevelopment->floorname) }}">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <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="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 class="gallery d-flex flex-wrap mt-4">
                                            @foreach ($houseDevelopmentfloorImages as $image)
                                                <div class="position-relative m-2" style="flex: 0 0 150px;">
                                                    <img src="{{ asset('storage/' . $image->path) }}" alt="{{ $image->name }}" class="img-thumbnail img-gallery" data-id="{{ $image->id }}" id="{{ $houseDevelopment->id }}">
                                                    <i class="fa-solid fa-circle-xmark img-delete-icon" style="display: none; position: absolute; top: 5px; right: 5px; cursor: pointer; color: #a09d90;" data-id="{{ $image->id }}"></i>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div>
                                            @php
                                                $predefinedOptions = ['Lobby', 'Front desk', 'Restaurante'];
                                                $allOptions = array_unique(array_merge($predefinedOptions, $floorcharacteristics));
                                            @endphp
                                            <label class="form-control-label" for="floorcharacteristics">Selecciona una o más opciones</label>
                                            <select id="floorcharacteristics" name="floorcharacteristics[]" class="form-control" multiple>
                                                @foreach($allOptions as $option)
                                                  <option value="{{ $option }}" {{ in_array($option, old('floorcharacteristics', $floorcharacteristics)) ? 'selected' : '' }}>
                                                       {{ $option }}
                                                  </option>
                                                @endforeach
                                            </select>
                                            <br/>
                                            <input type="text" id="newCharacteristic" class="form-control mt-2" placeholder="Agregar nueva característica">
                                            <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="description">{{ __('Descripcion Desarrollo Web') }}</label>
                                            <input type="text" name="description" id="description" class="form-control form-control-alternative" value="{{ old('description', $houseDevelopment->description) }}">
                                        </div>
                                    </div>
                                </div>

                                <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>

    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <img id="imageModalSrc" src="" class="w-100" alt="">
                </div>
                <div class="modal-footer mt-5">
                    <button type="button" id="deleteImageBtn" class="btn bw-btn-danger-gradient">Eliminar Imagen</button>
                    <button type="button" class="btn btn-gradient" data-bs-dismiss="modal">Cerrar</button>
                </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 () {
            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 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 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, existingPdfUrl = null) {
                preview.innerHTML = '';

                if (existingPdfUrl) {
                    let pdfFrame = document.createElement('iframe');
                    pdfFrame.src = existingPdfUrl;
                    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);
                } else if (input.files.length > 0) {
                    let file = input.files[0];
                    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);
                }
            }

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

            let existingPdfUrl = "{{ $houseDevelopment->housedevelopments_book ? Storage::url($houseDevelopment->housedevelopments_book) : '' }}";
            if (existingPdfUrl && !existingPdfUrl.includes('null')) {
                previewPdf(housedevelopmentsBookInput, housedevelopmentsBookPreviews, existingPdfUrl);
            }

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

            function toggleViews() {
                if (document.getElementById('input-has_views').checked) {
                    document.getElementById('views-group').style.display = 'block';
                } else {
                    document.getElementById('views-group').style.display = 'none';
                }
            }

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

            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) {
                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 resetGalleryInput() {
                floorGalleryInput.value = '';
            }

            floorGalleryContainer.addEventListener('click', function () {
                resetGalleryInput();
                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;
                previewImages(floorGalleryInput);
            });

            const galleryItems = document.querySelectorAll('.img-gallery');
            galleryItems.forEach(item => {
                item.addEventListener('mouseover', function() {
                    this.style.transform = 'scale(1.1)';
                    this.style.transition = 'transform 0.3s ease';
                    const deleteIcon = this.parentElement.querySelector('.img-delete-icon');
                    deleteIcon.style.display = 'block';
                });
                item.addEventListener('mouseout', function() {
                    this.style.transform = 'scale(1)';
                    this.style.transition = 'transform 0.3s ease';
                    const deleteIcon = this.parentElement.querySelector('.img-delete-icon');
                    deleteIcon.style.display = 'none';
                });
                item.addEventListener('click', function() {
                    const modal = document.getElementById('imageModal');
                    const modalImg = document.getElementById('imageModalSrc');
                    const deleteBtn = document.getElementById('deleteImageBtn');
                    modalImg.src = this.src;
                    deleteBtn.setAttribute('data-id', this.getAttribute('data-id'));
                    $(modal).modal('show');
                });
            });

            document.getElementById('deleteImageBtn').addEventListener('click', function() {
                const imageId = this.getAttribute('data-id');

                if (imageId) {
                    fetch(`/admin/housedevelopment/destroyImage/${imageId}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        Swal.fire({
                            title: '¡Eliminado!',
                            text: data.message || 'Imagen eliminada correctamente',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            location.reload();
                        });
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        Swal.fire({
                            title: 'Error',
                            text: 'Hubo un problema al eliminar la imagen.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    });
                }
            });

            let dateInput = document.getElementById('input-delivery_date');
            dateInput.addEventListener('click', function () {
                dateInput.showPicker();
            });
        });
    </script>
@endpush