@extends('layouts.app', ['page' => __('Administración de Tipologias'), 'pageSlug' => 'tipologies', 'section' => 'settings'])

@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-6">
                                <h3 class="mb-0">{{ __('Editar Tipología') }} : {{ $typology->name }}</h3>
                            </div>
                            <div class="col-6 text-right">
                              <a href="{{ route('typologies.index', ['houseDevelopmentId' => $houseDevelopmentId]) }}" class="btn btn-sm btn-gradient">{{ __('Regresar a listado de Tipologías') }}</a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <form enctype="multipart/form-data" method="post" action="{{ route('typologies.update', ['typology' => $typology]) }}" autocomplete="off">
                            @csrf
                            @method('put')

                            <h6 class="heading-small text-muted mb-4">{{ __('Información de Tipología') }}</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', $typology->name) }}" required autofocus>
                                            @include('alerts.feedback', ['field' => 'name'])
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group{{ $errors->has('construction_meters') ? ' has-danger' : '' }}">
                                        <label class="form-control-label" for="input-construction_meters">{{ __('Área interior') }}</label>
                                            <input type="text" name="construction_meters" id="input-construction_meters" class="form-control form-control-alternative{{ $errors->has('construction_meters') ? ' is-invalid' : '' }}" placeholder="{{ __('Metros de construcción') }}" value="{{ old('construction_meters', $typology->construction_meters) }}">
                                            @include('alerts.feedback', ['field' => 'construction_meters'])
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group{{ $errors->has('meters_of_free_area') ? ' has-danger' : '' }}">
                                            <label class="form-control-label" for="input-meters_of_free_area">{{ __('Área exterior') }}</label>
                                            <input type="text" name="meters_of_free_area" id="input-meters_of_free_area" class="form-control form-control-alternative{{ $errors->has('meters_of_free_area') ? ' is-invalid' : '' }}" placeholder="{{ __('Metros del área libre') }}" value="{{ old('meters_of_free_area', $typology->meters_of_free_area) }}">
                                            @include('alerts.feedback', ['field' => 'meters_of_free_area'])
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-price">{{ __('Precio desde') }}</label><br/>
                                            <div class="row">
                                                <div class="col-md-6"><input id="input-price" class="form-control" value="${{ old('price', number_format($typology->price, 2)) }}" readonly></div>
                                                <div class="col-md-6"><a href="{{ route('typologies.editprice', ['typology' => $typology]) }}" type="button" class="btn btn-success btn-gradient" style="margin: 0;padding:10px 40px;width: 100%;">Editar precio</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="{{ $errors->has('characteristicsTypologies') ? ' has-danger' : '' }}">
                                            @php
                                                $predefinedOptions = ['Sala', 'Comedor', 'Cocina integral', 'Recamara', 'Área de guardado', 'Baño completo', 'Medio Baño', 'Área para escritorio / Oficina', 'Terraza', 'Balcón', 'Patio Interior', 'Circulación vertical', 'Cuarto de TV'];
                                                // Unifica las opciones predefinidas y las opciones en $characteristicsTypologies
                                                $allOptions = array_unique(array_merge($predefinedOptions, $characteristicsTypologies));
                                            @endphp
                                            <label class="form-control-label" for="characteristicsTypologies">Selecciona una o más opciones</label>
                                            <select id="characteristicsTypologies" name="characteristicsTypologies[]" class="form-control" multiple>
                                                @foreach($allOptions as $option)
                                                  <option value="{{ $option }}" {{ in_array($option, $characteristicsTypologies) ? '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>
                                            
                                            @include('alerts.feedback', ['field' => 'characteristicsTypologies'])
                                        </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-main-image" style="color:#ffffff;">Reemplazar imagen de portada</label>
                                                <input type="file" name="mainImage" id="input-main-image" class="form-control form-control-alternative" style="cursor: inherit;">
                                                <img id="main_image-preview" src="/admin/storage/{{ $typology->mainImage }}" alt="Vista previa de la imagen principal" style="max-width: 100px; margin-left: 10px;">
                                            </div>
                                            @include('alerts.feedback', ['field' => 'mainImage'])
                                        </div>
                                    </div>
                                </div>

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

                                <br/>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-gallery">{{ __('Galería de Imágenes') }}</label>
                                            <div id="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="gallery[]" id="input-gallery" class="form-control d-none" multiple>
                                                <div id="gallery-previews" class="d-flex flex-wrap mt-2"></div> <!-- Contenedor para miniaturas -->
                                            </div>
                                        </div>
                                        <div class="gallery d-flex flex-wrap mt-4">
                                            @foreach ($typologiesImages 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="{{ $typology->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>

                                <br/>
                                <div class="row">
                                    <div class="col-md-12"><h3 class="mb-0">Campos para el portal web</h3></div>
                                    <div class="col-md-12">
                                        <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-web_main_image" style="color:#ffffff;">{{ __('Imagen principal Web') }}</label>
                                                <input type="file" name="web_main_image" id="input-web_main_image" class="form-control form-control-alternative" style="cursor: inherit;">
                                                <img id="web_main_image-preview" src="/admin/storage/{{ $typology->web_main_image }}" alt="Vista previa de la imagen web" 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-secondary_image_one" style="color:#ffffff;">{{ __('Imagen secundaria web uno') }}</label>
                                                <input type="file" name="secondary_image_one" id="input-secondary_image_one" class="form-control form-control-alternative" style="cursor: inherit;">
                                                <img id="secondary_image_one-preview" src="/admin/storage/{{ $typology->secondary_image_one }}" alt="Vista previa de la imagen web" 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-secondary_image_two" style="color:#ffffff;">{{ __('Imagen secundaria web dos') }}</label>
                                                <input type="file" name="secondary_image_two" id="input-secondary_image_two" class="form-control form-control-alternative" style="cursor: inherit;">
                                                <img id="secondary_image_two-preview" src="/admin/storage/{{ $typology->secondary_image_two }}" alt="Vista previa de la imagen web" style="max-width: 100px; margin-left: 10px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <br/>
                                <div class="text-center"><button type="submit" class="btn btn-sm 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>
        document.addEventListener('DOMContentLoaded', function () {

            let webMainImagePreview = document.getElementById('web_main_image-preview');
            let webMainImageInput = document.getElementById('input-web_main_image');

            let secondaryImageOnePreview = document.getElementById('secondary_image_one-preview');
            let secondaryImageOneInput = document.getElementById('input-secondary_image_one');

            let secondaryImageTwoPreview = document.getElementById('secondary_image_two-preview');
            let secondaryImageTwoInput = document.getElementById('input-secondary_image_two');

            let mainImagePreview = document.getElementById('main_image-preview');
            let mainImageInput = document.getElementById('input-main-image');
            let galleryContainer = document.getElementById('gallery-container');//
            let galleryInput = document.getElementById('input-gallery'); //
            let galleryPreviews = document.getElementById('gallery-previews');//

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

            $('#addCharacteristic').on('click', function() {
                var newOption = $('#newCharacteristic').val().trim();
                if(newOption !== ""){
                    if($("#characteristicsTypologies option[value='" + newOption + "']").length === 0){
                        $('#characteristicsTypologies').append('<option value="' + newOption + '" selected>' + newOption + '</option>');
                        $('#characteristicsTypologies').val($('#characteristicsTypologies').val().concat(newOption));
                        $('#newCharacteristic').val('');
                        $('#characteristicsTypologies').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';
                }
            }

            mainImageInput.addEventListener('change', function () {
                previewImage(mainImageInput, mainImagePreview);
            });

            webMainImageInput.addEventListener('change', function () {
                previewImage(webMainImageInput, webMainImagePreview);
            });

            secondaryImageOneInput.addEventListener('change', function () {
                previewImage(secondaryImageOneInput, secondaryImageOnePreview);
            });

            secondaryImageTwoInput.addEventListener('change', function () {
                previewImage(secondaryImageTwoInput, secondaryImageTwoPreview);
            });

            function previewImages(input) {
                galleryPreviews.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 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);
                }
            }

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

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

            galleryInput.addEventListener('change', function () {
                if (galleryInput.files.length > 0) {
                    previewImages(galleryInput);
                }
            });

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

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

        });
    </script>
@endpush