@extends('layouts.app', ['page' => __('Unidades'), 'pageSlug' => 'units', 'section' => 'menu'])

@section('content')

<div class="row">
        <div class="col-md-12">
            <div class="card ">
                <div class="card-header">
                    <div class="row">
                        <div class="col-4">
                            <h2>{{ __('Editar Unidad')  }} : {{ $unit->name }}</h2>
                        </div>
                        <div class="col-8 text-right">
                            <a class="btn btn-sm btn-gradient {{ $currentUnitStage->id == '2' ? '' : 'hidden-element' }}" id="cancel" style="color:#ffffff;background:linear-gradient(to right, #b94444, #995656);">{{ __('Cancelar apartado') }}</a>
                            <a class="btn btn-sm btn-gradient {{ $currentUnitStage->id == '2' ? '' : 'hidden-element' }}" id="sold" style="color:#ffffff;background:linear-gradient(to right, #50C878, #00A86B);">{{ __('Vender') }}</a>
                            <a class="btn btn-sm btn-gradient {{ $currentUnitStage->id == '3' ? '' : 'hidden-element' }}" id="unblock" style="color:#ffffff;background:linear-gradient(to right, #b94444, #995656);">{{ __('Desbloquear') }}</a>
                            <a href="{{ route('units.index', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology]) }}" class="btn btn-sm btn-gradient">{{ __('Regresar a listado de Unidades') }}</a>
                        </div>
                    </div>
                </div>

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

                    <h6 class="heading-small text-muted mb-4">{{ __('Información de Unidad') }} </h6>
                    <div class="pl-lg-4">

                      <div class="row">
                        <div class="{{ $houseDevelopment->type == 'v' ? ' col-md-6' : 'col-md-12' }}">
                          <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-name">{{ __('Nombre de Unidad') }}</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', $unit->name) }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'name'])
                          </div>
                        </div>

                        @if($houseDevelopment->type == 'v')
                        <div class="col-md-6">
                          <div class="form-group{{ $errors->has('levels') ? ' has-danger' : '' }}">
                            <label class="form-control-label" for="input-levels">{{ __('Nivel') }}</label>
                            <select name="levels" id="input-levels" class="form-control form-control-alternative{{ $errors->has('levels') ? ' is-invalid' : '' }}" placeholder="{{ __('Niveles') }}" value="{{ $houseDevelopment->levels }}" required autofocus>
                            <option value="">{{ __('Selecciona el nivel de la Unidad') }}</option>
                                @for ($i = 1; $i <= $houseDevelopment->levels; $i++)
                                  <option value="{{ $i }}" {{ $unit->levels == $i ? 'selected' : '' }}>{{ $i }}</option>
                                @endfor
                            </select>
                            @include('alerts.feedback', ['field' => 'levels'])
                          </div>
                        </div>
                        @endif
                      </div>

                      <div class="row">
                            <div class="col-md-6">
                                <div class="form-check form-check-inline form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" name="has_own_measurement" id="check-own-measurement" {{ $unit->has_own_measurement ? 'checked' : '' }}>
                                    <label class="form-check-label text-capitalize" >Diferentes medidas</label>
                                </div>
                            </div>
                        </div>

                        @if($houseDevelopment->type == 'v')
                            <div class="row" id="div-unit-area" hidden>
                                <div class="col-md-6">
                                    <div class="form-group{{ $errors->has('construction_meters') ? ' has-danger' : '' }}">
                                        <label class="form-control-label" for="input-construction-meters">{{ __('Area Interior') }}</label>
                                        <input
                                            type="number"
                                            name="construction_meters"
                                            id="input-construction-meters"
                                            class="form-control form-control-alternative{{ $errors->has('construction_meters') ? ' is-invalid' : '' }}"
                                            placeholder="{{ __('Area interior') }}"
                                            value="{{ $unit->construction_meters }}"
                                            autofocus
                                        >
                                        @include('alerts.feedback', ['field' => 'construction_meters'])
                                    </div>
                                </div>

                                <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">{{ __('Area Exterior') }}</label>
                                         <input
                                            type="number"
                                            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="{{ __('Area exterior') }}"
                                            value="{{ $unit->meters_of_free_area }}"
                                            autofocus
                                        >
                                        @include('alerts.feedback', ['field' => 'levels'])
                                    </div>
                                </div>
                            </div>
                        @endif

                      <div class="row">
                        <div class="col-md-6">
                          <div class="{{ $errors->has('unit_stage_id') ? ' has-danger' : '' }}">
                                <label class="form-control-label" for="unit_stage_id">Estado</label>
                                <select id="unit_stage_id" name="unit_stage_id" style="{{ in_array($currentUnitStage->id, [2, 3, 4]) ? 'pointer-events: none;background: #E3E3E3;border-color: rgba(29, 37, 59, 0.3);' : '' }}" class="form-control">
                                    @foreach($unitsStages as $stage)
                                        <option value="{{ $stage->id }}" {{ old('unit_stage_id', $currentUnitStage->id) == $stage->id ? 'selected' : '' }}>
                                            {{ $stage->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @include('alerts.feedback', ['field' => 'unit_stage_id'])
                          </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 de unidad') }}</label>
                            <input type="text" name="price" id="input-price" class="form-control form-control-alternative{{ $errors->has('price') ? ' is-invalid' : '' }}" placeholder="{{ __('Precio de unidad') }}" value="{{ number_format(old('price', $unit->price)) }}" required autofocus>
                            @include('alerts.feedback', ['field' => 'price'])
                          </div>
                        </div>
                      </div>

                      <br/>
                      <div class="row">
                          <div class="col-md-12">
                              <div class="{{ $errors->has('estimateImage') ? ' 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-estimate-image" style="color:#ffffff;">{{ __('Imagen de cotización') }}</label>
                                    <input type="file" name="estimateImage" id="input-estimate-image" class="form-control form-control-alternative{{ $errors->has('estimateImage') ? ' is-invalid' : '' }}" id="input-estimate-image" style="cursor: inherit;">
                                    <img id="estimate_image-preview" src="/admin/storage/{{ $unit->estimate_image }}" alt="Vista previa" style="max-width: 100px; margin-left: 10px;">
                                </div>
                              </div>
                          </div>
                      </div>
                      <br/>

                      <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 ($unitsImages 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="{{ $unit->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>

                      <div id="prospect-form" style="display: none;">
                        <br/><br/>
                        <h3 id="title-prospect-form">Información del Prospecto</h3>
                        <div class="row">
                          <div class="col-md-12" id="prospect_name">
                            <div class="form-group{{ $errors->has('prospect_name') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_name">{{ __('Nombre') }}</label>
                              <input type="text" name="prospect_name" id="input-prospect_name" class="form-control form-control-alternative{{ $errors->has('prospect_name') ? ' is-invalid' : '' }}" placeholder="{{ __('Nombre de Prospecto') }}" value="{{ old('prospect_name', $unit->prospect_name ?? '') }}">
                              @include('alerts.feedback', ['field' => 'prospect_name'])
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6" id="prospect_phone">
                            <div class="form-group{{ $errors->has('prospect_phone') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_phone">{{ __('Teléfono') }}</label>
                              <input type="tel" name="prospect_phone" id="input-prospect_phone" class="form-control form-control-alternative{{ $errors->has('prospect_phone') ? ' is-invalid' : '' }}" placeholder="{{ __('Teléfono') }}" value="{{ old('prospect_phone', $unit->prospect_phone ?? '') }}">
                              @include('alerts.feedback', ['field' => 'prospect_phone'])
                            </div>
                          </div>
                          <div class="col-md-6" id="prospect_email">
                            <div class="form-group{{ $errors->has('prospect_email') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_email">{{ __('Correo') }}</label>
                              <input type="email" name="prospect_email" id="input-prospect_email" class="form-control form-control-alternative{{ $errors->has('prospect_email') ? ' is-invalid' : '' }}" placeholder="{{ __('Correo') }}" value="{{ old('prospect_email', $unit->prospect_email ?? '') }}">
                              @include('alerts.feedback', ['field' => 'prospect_email'])
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6" id="prospect_date">
                            <div class="form-group{{ $errors->has('prospect_date') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_date">{{ __('Fecha') }}</label>
                              <input type="date" name="prospect_date" id="input-prospect_date" class="form-control form-control-alternative{{ $errors->has('prospect_date') ? ' is-invalid' : '' }}" placeholder="{{ __('Fecha') }}" value="{{ old('prospect_date', $unit->prospect_date ?? '') }}">
                              @include('alerts.feedback', ['field' => 'prospect_date'])
                            </div>
                          </div>
                          <div class="col-md-6" id="prospect_amount">
                            <div class="form-group{{ $errors->has('prospect_amount') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_amount">{{ __('Monto') }}</label>
                              <input type="text" name="prospect_amount" id="input-prospect_amount" class="form-control form-control-alternative{{ $errors->has('prospect_amount') ? ' is-invalid' : '' }}" placeholder="{{ __('Monto') }}" value="{{ old('prospect_amount', $unit->prospect_amount ?? '') }}">
                              @include('alerts.feedback', ['field' => 'prospect_amount'])
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-12" id="prospect_reference">
                            <div class="form-group{{ $errors->has('prospect_reference') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_reference">{{ __('Referencia') }}</label>
                              <input type="text" name="prospect_reference" id="input-prospect_reference" class="form-control form-control-alternative{{ $errors->has('prospect_reference') ? ' is-invalid' : '' }}" placeholder="{{ __('Referencia') }}" value="{{ old('prospect_reference', $unit->prospect_reference ?? '') }}">
                              @include('alerts.feedback', ['field' => 'prospect_reference'])
                            </div>
                          </div>
                        </div>
                      </div>

                      <div id="customer-form" style="display: none;">
                        <!-- Campos cliente -->
                        <div class="row">
                          <div class="col-md-6" id="prospect_cellphone">
                            <div class="form-group{{ $errors->has('prospect_cellphone') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_cellphone">{{ __('Celular') }}</label>
                              <input type="tel" name="prospect_cellphone" id="input-prospect_cellphone" class="form-control form-control-alternative{{ $errors->has('prospect_cellphone') ? ' is-invalid' : '' }}" placeholder="{{ __('Fecha') }}">
                              @include('alerts.feedback', ['field' => 'prospect_date'])
                            </div>
                          </div>
                          <div class="col-md-6" id="prospect_gender">
                            <div class="form-group{{ $errors->has('prospect_gender') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_gender">{{ __('Genero') }}</label>
                              <input type="text" name="prospect_gender" id="input-prospect_gender" class="form-control form-control-alternative{{ $errors->has('prospect_gender') ? ' is-invalid' : '' }}" placeholder="{{ __('Genero') }}">
                              @include('alerts.feedback', ['field' => 'prospect_gender'])
                            </div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6" id="prospect_curp">
                            <div class="form-group{{ $errors->has('prospect_curp') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_curp">{{ __('CURP') }}</label>
                              <input type="text" name="prospect_curp" id="input-prospect_curp" class="form-control form-control-alternative{{ $errors->has('prospect_curp') ? ' is-invalid' : '' }}" placeholder="{{ __('CURP') }}">
                              @include('alerts.feedback', ['field' => 'prospect_curp'])
                            </div>
                          </div>
                          <div class="col-md-6" id="prospect_birthdate">
                            <div class="form-group{{ $errors->has('prospect_birthdate') ? ' has-danger' : '' }}">
                              <label class="form-control-label" for="input-prospect_birthdate">{{ __('Fecha de nacimiento') }}</label>
                              <input type="date" name="prospect_birthdate" id="input-prospect_birthdate" class="form-control form-control-alternative{{ $errors->has('prospect_birthdate') ? ' is-invalid' : '' }}" placeholder="{{ __('Fecha de nacimniento') }}">
                              @include('alerts.feedback', ['field' => 'prospect_birthdate'])
                            </div>
                          </div>
                        </div>
                        <!-- Fin Campos cliente -->
                      </div>

                      <br/>
                      <div class="form-group">
                        <input type="hidden" name="typology_id" id="input-typology_id" class="form-control form-control-alternative" value="{{ $typology->id }}" required>
                        <input type="hidden" name="houseDevelopment_id" id="input-houseDevelopment_id" class="form-control form-control-alternative" value="{{ $houseDevelopment->id }}" required>
                        <input type="hidden" name="hidden_unit_stage_id" id="input-hidden_unit_stage_id" value="{{ $currentUnitStage->id }}">
                      </div>
                      <div class="text-center"><button type="submit" class="btn btn-sm btn-gradient">{{ __('Guardar') }}</button></div>
                    </div>
                  </form>
                </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 () {

    // Obtener referencias a los elementos
    const checkOwnMeasurement = document.getElementById('check-own-measurement');
    const divUnitArea = document.getElementById('div-unit-area');
    const inputs = divUnitArea.querySelectorAll('input[type="number"]');

    // Función para manejar el cambio de estado del checkbox
    function handleCheckboxChange() {
        if (checkOwnMeasurement.checked) {
            // Mostrar el div y hacer los inputs requeridos
            divUnitArea.hidden = false;
            inputs.forEach(input => input.required = true);
        } else {
            // Ocultar el div y quitar el required de los inputs
            divUnitArea.hidden = true;
            inputs.forEach(input => input.required = false);
        }
    }

    // Escuchar el evento change del checkbox
    checkOwnMeasurement.addEventListener('change', handleCheckboxChange);

    // Ejecutar al cargar la página por si el checkbox ya está marcado
    handleCheckboxChange();


    let estimateImagePreview = document.getElementById('estimate_image-preview');
    let estimateImageInput = document.getElementById('input-estimate-image');

    let prospectForm = document.getElementById('prospect-form');
    let soldButton = document.getElementById('sold');
    let customerForm = document.getElementById('customer-form');
    let unitStageId = document.getElementById('unit_stage_id');
    const titleElement = document.getElementById('title-prospect-form');
    const prospectAmount = document.getElementById('prospect_amount');
    const prospectReference = document.getElementById('prospect_reference');
    const prospectDate = document.getElementById('prospect_date');

    const inputProspectName = document.getElementById('input-prospect_name');
    const inputProspectEmail = document.getElementById('input-prospect_email');
    const inputProspectPhone = document.getElementById('input-prospect_phone');
    const inputProspectAmount = document.getElementById('input-prospect_amount');
    const inputProspectReference = document.getElementById('input-prospect_reference');
    const inputProspectDate = document.getElementById('input-prospect_date');

    const inputProspectGender = document.getElementById('input-prospect_gender');
    const inputProspectCellphone = document.getElementById('input-prospect_cellphone');
    const inputProspectCurp = document.getElementById('input-prospect_curp');
    const inputProspectBirthdate = document.getElementById('input-prospect_birthdate');

    let galleryContainer = document.getElementById('gallery-container');
    let galleryInput = document.getElementById('input-gallery');
    let galleryPreviews = document.getElementById('gallery-previews');

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

    estimateImageInput.addEventListener('change', function () {
        previewImage(estimateImageInput, estimateImagePreview);
    });

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

    function toggleStages() {
      if (unitStageId.value === '2') {
        prospectForm.style.display = 'block';
        prospectAmount.style.display = 'block';
        prospectReference.style.display = 'block';
        prospectDate.style.display = 'block';

        inputProspectName.required = true;
        inputProspectEmail.required = true;
        inputProspectPhone.required = true;
        inputProspectAmount.required = true;
        inputProspectReference.required = true;
        inputProspectDate.required = true;
      }
      else if (unitStageId.value === '4'){
        prospectForm.style.display = 'block';
        customerForm.style.display = 'block';
        titleElement.textContent = 'Ingresa toda la información del Cliente';
        prospectAmount.style.display = 'none';
        prospectReference.style.display = 'none';
        prospectDate.style.display = 'none';

        inputProspectName.required = true;
        inputProspectEmail.required = true;
        inputProspectPhone.required = true;
        inputProspectGender.required = true;
        inputProspectCellphone.required = true;
        inputProspectBirthdate.required = true;

        inputProspectAmount.required = false;
        inputProspectReference.required = false;
        inputProspectDate.required = false;
      }
      else {
        prospectForm.style.display = 'none';
        inputProspectName.required = false;
        inputProspectEmail.required = false;
        inputProspectPhone.required = false;
        inputProspectAmount.required = false;
        inputProspectReference.required = false;
        inputProspectDate.required = false;

        customerForm.style.display = 'none';
        inputProspectGender.required = false;
        inputProspectCellphone.required = false;
        inputProspectCurp.required = false;
        inputProspectBirthdate.required = false;
      }
    }

    toggleStages();

    unitStageId.addEventListener('change', toggleStages);

    document.getElementById('cancel').addEventListener('click', function() {
            let cancelUrl = "{{ route('units.cancel', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}";

            Swal.fire({
                title: '¿Estás seguro de que deseas cancelar el apartado?',
                text: 'Esta acción no se puede deshacer.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(cancelUrl, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                    })
                    .then(response => {
                        if (response.ok) {
                            return response.json();
                        } else {
                            throw new Error('Error al cancelar el apartado de unidad.');
                        }
                    })
                    .then(data => {
                        Swal.fire({
                            icon: 'success',
                            title: 'Éxito',
                            text: 'Proceso completado.',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            ////// Volver a habilitar el select de la etapa
                            window.location.reload();
                        });
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.message,
                            confirmButtonText: 'OK'
                        });
                    });
                }
            });
    });


    document.getElementById('unblock').addEventListener('click', function() {
            let unblockUrl = "{{ route('units.unblock', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}";

            Swal.fire({
                title: '¿Estás seguro de que deseas desbloquear la unidad?',
                text: 'Esta acción no se puede deshacer.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(unblockUrl, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                    })
                    .then(response => {
                        if (response.ok) {
                            return response.json();
                        } else {
                            throw new Error('Error al desbloquear la unidad.');
                        }
                    })
                    .then(data => {
                        Swal.fire({
                            icon: 'success',
                            title: 'Éxito',
                            text: 'Proceso completado.',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            ////// Volver a habilitar el select de la etapa
                            window.location.reload();
                        });
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: error.message,
                            confirmButtonText: 'OK'
                        });
                    });
                }
            });
    });

    document.getElementById('sold').addEventListener('click', function() {
        // Mostrar la alerta de SweetAlert
        swal.fire({
            title: "Información requerida",
            text: "Ingresa toda la información del cliente antes de continuar. Una vez que guardes los cambios no se podrá deshacer esta acción.",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willProceed) => {
            if (willProceed) {

                soldButton.style.display = 'none';
                // Si el usuario hace clic en "Ok", se cambia el valor del select

                // Obtener el select
                var selectElement = document.getElementById('unit_stage_id');

                // Cambiar el valor del select a 4 (que representa "Vendida")
                selectElement.value = 4;

                // Disparar el evento 'change' para que se aplique el cambio
                var event = new Event('change');
                selectElement.dispatchEvent(event);
            }
        });
    });

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

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

  });

</script>
@endpush