@extends('layouts.app', ['page' => __('Listado De Tipologias'), 'pageSlug' => 'typologies', 'section' => 'menu'])

@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">{{ __('Crear Tipologia')  }} para el desarrollo {{ $houseDevelopment->name }}</h2>
                        </div>
                        <div class="col-6 text-right">
                            <a href="{{ route('typologies.index', ['houseDevelopmentId' => $houseDevelopment->id]) }}" 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.store') }}" autocomplete="off">
                    @csrf

                    <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') }}" 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') }}" required autofocus>
                            @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') }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'meters_of_free_area'])
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('price') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-price">{{ __('Precio desde') }}</label>
                            <input type="text" name="price" id="input-price" class="form-control form-control-alternative{{ $errors->has('price') ? ' is-invalid' : '' }}" placeholder="{{ __('Precio') }}" value="{{ old('price') }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'price'])
                          </div>
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-md-6">
                          <div class="{{ $errors->has('characteristicsTypologies') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="characteristicsTypologies">Selecciona una o más opciones</label>
                            <select id="characteristicsTypologies" name="characteristicsTypologies[]" class="form-control" multiple="multiple">
                              @foreach(['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'] as $option)
                                  <option value="{{ $option }}">
                                      {{ $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' => 'mainImage'])
                          </div>
                        </div>
                        <div class="col-md-6">
                          <br/>
                          <div class="{{ $errors->has('mainImage') ? ' has-danger' : '' }} 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;">Subir imagen de portada</label>
                              <input type="file" name="mainImage" class="form-control form-control-alternative{{ $errors->has('mainImage') ? ' is-invalid' : '' }}" id="input-main-image" style="cursor: inherit;">
                              <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' => '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') }}">
                        </div>
                      </div>

                      <br/>
                      <div class="row">
                        <div class="col-md-12">
                          <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/>
                      <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: 10px; 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>

                      <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="" alt="Vista previa de la imagen web" 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-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="" alt="Vista previa de la imagen web" 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-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="" alt="Vista previa de la imagen web" style="display: none; max-width: 100px; margin-left: 10px;">
                                  </div>
                              </div>
                          </div>

                      </div>

                      <div class="form-group">
                        <input type="hidden" name="house_development_id" id="input-house_development_id" class="form-control form-control-alternative" value="{{ $houseDevelopment->id }}" required autofocus>
                      </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>
@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 galleryPreviews = document.getElementById('gallery-previews');
            let galleryInput = document.getElementById('input-gallery');
            let galleryContainer = document.getElementById('gallery-container');
            let blueprintsContainer = document.getElementById('blueprints-container');
            let blueprintsInput = document.getElementById('input-blueprints');
            let blueprintsPreviews = document.getElementById('blueprints-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);
            });

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

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

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

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

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

            const inputAmount = document.getElementById("input-price");

            inputAmount.addEventListener("input", function (event) {
                let value = inputAmount.value.replace(/\D/g, ''); // Elimina caracteres no numéricos
                if (value) {
                    value = Number(value).toLocaleString("es-MX"); // Formatea con separadores de miles
                }
                inputAmount.value = value;
            });

            inputAmount.addEventListener("blur", function () {
                let value = inputAmount.value.replace(/\D/g, ''); // Asegura que solo haya números
                if (value) {
                    inputAmount.value = Number(value).toLocaleString("es-MX"); // Reaplica formato
                }
            });

        });
    </script>
@endpush