@extends('layouts.appPeninsula', ['title' => 'Península'])

@section('contenido')

<div class="bg-white text-center">
  <div class=" mx-auto w-full max-w-[1518px] px-4">
    <h1 class="mt-5 lg:mt-10 text-[#0E0A60] font-cormorant-500 text-[40px]">Encuentra tu espacio ideal</h1>
    <p class="mt-15 mb-8 font-normal">
      Explora nuestro masterplan interactivo y descubre la disponibilidad de lotes en Paseo Península Acqua. <br>
      Elige el terreno perfecto para construir el hogar que siempre has soñado <br>
      y asegura tu inversión en una de las zonas con mayor proyección del sureste mexicano.
    </p>
  </div>
</div>
<section class="bg-white main-bg-svg overflow-x-hidden min-h-[20svh] lg:h-[650px]">
  <div class="mx-auto h-full  w-full lg:max-w-[1518px] grid place-items-stretch lg:place-items-center px-0">
    <div class="w-full h-full">
      <div class="svg-fluid w-full">
        @include('front.cotizadores.svgs.mainPeninsula')
      </div>
    </div>
  </div>
</section>

{{-- Interactivo --}}
<div id="lotificacion">
  <div class="mx-auto w-full max-w-[1518px] px-0">
    <div class="flex justify-center">
      <div class="w-full">
        <div class="relative">
          <div class="mx-auto px-0">
            <div class="mx-auto mt-6 grid w-full grid-cols-1 gap-6 px-4 lg:grid-cols-1">
              <div id="nav-tabContent" class="w-full">
                <div id="nav-V2" class="hidden" role="tabpanel" aria-labelledby="nav-V2-tab" data-tab-content>
              <div class="w-full flex justify-center">
                            <div class="w-full max-w-[1200px] text-center space-y-5">
                            <h4 class="font-bold font-cormorant-500 text-[20px]">CLÚSTER BALI</h4>

                            <div class="flex flex-wrap items-center justify-center gap-6">
                                <div class="flex items-center gap-2">
                                <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span><span>Disponible</span>
                                </div>
                                <div class="flex items-center gap-2">
                                <span class="inline-block h-3 w-3 rounded-full bg-orange-500"></span><span>Apartado</span>
                                </div>
                                <div class="flex items-center gap-2">
                                <span class="inline-block h-3 w-3 rounded-full bg-red-500"></span><span>Vendido</span>
                                </div>
                            </div>

                            <div class="interactivo relative grid place-items-center w-full lg:w-[50%] overflow-hidden mx-auto" data-zoom-scope>
                                <div class="absolute right-0 top-0 z-10 w-[35px] space-y-2">
                                <img data-zoom-in title="Acercar" class="block cursor-pointer"
                                    src="https://app.adaracrm.com/assets/icons/zoom-in-0cdd6c42c6074a8f92d367f5fd03b1303b71da031b4953bc0e85b778b5a468d6.svg" />
                                <img data-zoom-out  title="Alejar" class="block cursor-pointer"
                                    src="https://app.adaracrm.com/assets/icons/zoom-out-7a9277d43fe7782173a403a1074c6dda611c785a0341c49f351474b61b8dfaca.svg" />
                                <img data-zoom-reset title="Restablecer zoom" class="block cursor-pointer"
                                    src="https://app.adaracrm.com/assets/icons/zoom-reset-1dd63127b5457787ed640385f8593178d022e8d037a94787cff8caed6774ff02.svg" />
                                </div>

                                <div class="w-full max-w-[1518px] mx-auto">
                                @include('front.cotizadores.svgs.closterBali')
                                </div>
                            </div>
                            </div>
                        </div>    
                </div>

                <div id="nav-V1" class="hidden" role="tabpanel" aria-labelledby="nav-V1-tab" data-tab-content>
                <div class="w-full flex justify-center">
                            <div class="w-full max-w-[1200px] text-center space-y-5">
                            <h4 class="font-bold">CLÚSTER BORA</h4>

                            <div class="flex flex-wrap items-center justify-center gap-6">
                                <div class="flex items-center gap-2">
                                <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span><span>Disponible</span>
                                </div>
                                <div class="flex items-center gap-2">
                                <span class="inline-block h-3 w-3 rounded-full bg-orange-500"></span><span>Apartado</span>
                                </div>
                                <div class="flex items-center gap-2">
                                <span class="inline-block h-3 w-3 rounded-full bg-red-500"></span><span>Vendido</span>
                                </div>
                            </div>

                            <!-- SVG centrado + controles -->
                            <div class="interactivo relative grid place-items-center w-full lg:w-[50%] overflow-hidden mx-auto" data-zoom-scope>
                                <div class="absolute right-0 top-0 z-10 w-[35px] space-y-2" >
                                <img data-zoom-in title="Acercar" class="block cursor-pointer"
                                    src="https://app.adaracrm.com/assets/icons/zoom-in-0cdd6c42c6074a8f92d367f5fd03b1303b71da031b4953bc0e85b778b5a468d6.svg" />
                                <img data-zoom-out  title="Alejar" class="block cursor-pointer"
                                    src="https://app.adaracrm.com/assets/icons/zoom-out-7a9277d43fe7782173a403a1074c6dda611c785a0341c49f351474b61b8dfaca.svg" />
                                <img data-zoom-reset title="Restablecer zoom" class="block cursor-pointer"
                                    src="https://app.adaracrm.com/assets/icons/zoom-reset-1dd63127b5457787ed640385f8593178d022e8d037a94787cff8caed6774ff02.svg" />
                                </div>

                                <div class="w-full max-w-[1518px] mx-auto">
                                @include('front.cotizadores.svgs.closterBora')
                                </div>
                            </div>
                            </div>
                        </div>
                </div>

                    <div id="nav-V3" role="tabpanel" aria-labelledby="nav-V3-tab" data-tab-content>
                        <div class="w-full flex justify-center">
                            <div class="w-full max-w-[1200px] text-center space-y-5">
                            <h4 class="font-bold font-cormorant-500 text-[20px]">CLÚSTER IBIZA</h4>

                            <div class="flex flex-wrap items-center justify-center gap-6">
                                <div class="flex items-center gap-2">
                                <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span><span>Disponible</span>
                                </div>
                                <div class="flex items-center gap-2">
                                <span class="inline-block h-3 w-3 rounded-full bg-orange-500"></span><span>Apartado</span>
                                </div>
                                <div class="flex items-center gap-2">
                                <span class="inline-block h-3 w-3 rounded-full bg-red-500"></span><span>Vendido</span>
                                </div>
                            </div>

                            <!-- SVG centrado + controles -->
                            <div class="interactivo relative grid place-items-center w-full lg:w-[50%] overflow-hidden mx-auto" data-zoom-scope>
                                <div class="absolute right-0 top-0 z-10 w-[35px] space-y-2" >
                                <img data-zoom-in title="Acercar" class="block cursor-pointer"
                                    src="https://app.adaracrm.com/assets/icons/zoom-in-0cdd6c42c6074a8f92d367f5fd03b1303b71da031b4953bc0e85b778b5a468d6.svg" />
                                <img data-zoom-out  title="Alejar" class="block cursor-pointer"
                                    src="https://app.adaracrm.com/assets/icons/zoom-out-7a9277d43fe7782173a403a1074c6dda611c785a0341c49f351474b61b8dfaca.svg" />
                                <img data-zoom-reset title="Restablecer zoom" class="block cursor-pointer"
                                    src="https://app.adaracrm.com/assets/icons/zoom-reset-1dd63127b5457787ed640385f8593178d022e8d037a94787cff8caed6774ff02.svg" />
                                </div>

                                <div class="w-full max-w-[1518px] mx-auto">
                                @include('front.cotizadores.svgs.closterIbiza')
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>

                    </div>
                    </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Modal Amenidades --}}
  <div id="amenidadesModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/90">
    <button type="button"
            class="absolute right-6 top-6 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white text-2xl"
            onclick="closeAmenidadesModal()">&times;</button>
    <div class="max-h-[90vh] max-w-[90vw]">
      <img id="amenidadesImage" class="mx-auto block max-h-[90vh] max-w-full"
           src="https://emedos.locker.agency/img/emedos/casaclub.jpg" alt="Amenidades Image">
    </div>
  </div>

  {{-- Modal Cotizador --}}
 <!-- Overlay -->
<div id="modalCotizador"
     class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/50 p-4 font-poppins py-8">

  <!-- Caja blanca: viewport del modal -->
  <div id="modalShell" data-modal-box class="relative mx-auto w-full max-w-6xl rounded-xl  md:h-[85dvh] max-h-[90dvh] overflow-y-auto lg:overflow-hidden"  data-modal-box>
    
     <!-- Cerrar -->
  <button type="button" data-close="modalCotizador"
          class="absolute right-3 top-3 z-20 bg-white grid h-8 w-8 place-items-center rounded-full border border-black/10 hover:bg-black/5"
          aria-label="Cerrar modal">×</button>

    <!-- WRAPPER: GRID + SCROLL COMPARTIDO -->
    <div id="stepMain" class="grid h-full grid-cols-1 md:grid-cols-2 overflow-visible md:overflow-y-auto min-h-0
              transition-opacity duration-300" data-scrollwrap>
              <a id="__modalTop" class="hidden" aria-hidden="true"></a>
      <!-- Columna izquierda -->
      <div id="colPlanes" class="bg-[#0E0A60] p-6 text-white transition-opacity duration-200">
        <h5 class="mb-5 font-regular font-['Monumen'] text-3xl">COTIZADOR</h5>

        <!-- Info Lote -->
        <div class="mb-5 grid grid-cols-4 gap-4 text-sm leading-tight">
          <div>
            <p class="font-light text-white/80">Lote</p>
            <p id="LoteNum" class="font-semibold">629</p>
          </div>
          <div>
            <p class="font-light text-white/80">Área</p>
            <p id="AreaM2" class="font-semibold">200.0 m²</p>
          </div>
          <div>
            <p class="font-light text-white/80">Precio m²</p>
            <p id="PrecioM2" class="font-semibold">$2,912.50</p>
          </div>
          <div>
            <p class="font-light text-white/80">Precio</p>
            <p id="PrecioLote" class="font-semibold">$711,000.00</p>
          </div>
        </div>

        <!-- Plan de pagos -->
        <div class="mb-4 pt-4 pb-4">
          <label for="paymentEnga" class="mb-1 block text-sm font-regular font-['Monumen'] text-2xl">PLAN DE PAGOS</label>
          <select id="paymentEnga" class="select-peninsula">
            <option class="text-black" value="30">30% de enganche</option>
            {{-- <option class="text-black" value="40">40% de enganche</option> --}}
          </select>
          <p id="montoEnganche" class="mt-2 text-sm">Monto de Enganche: <strong>$213,300.00 MXN</strong></p>
        </div>

        <!-- Opciones de plan -->
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
          {{-- <button id="plan12" 
            class="group w-full rounded-3xl border border-white/40 bg-transparent px-5 py-5 text-white/90 transition hover:bg-[#D4D4D44D] hover:text-white">
            <div class="text-center">
              <div class="text-[16px] tracking-[0.25em] font-regular font-['Monumen'] uppercase">Plan</div>
              <div class="mt-3 text-3xl font-bold leading-none">12</div>
              <div class="-mt-1 text-sm font-light">Meses</div>
              <div class="mx-auto my-4 w-[99%] rounded-lg border border-white/70 px-3 py-1 text-center text-sm font-medium leading-6 group-hover:border-white">
                <span id="precio_12">$16,925.00</span>
              </div>
              <div class="text-sm font-light">Mensuales</div>
            </div>
          </button>
          <button id="plan24"
            class="group w-full rounded-3xl border border-white/40 bg-transparent px-5 py-5 text-white/90 transition hover:bg-[#D4D4D44D] hover:text-white">
            <div class="text-center">
              <div class="text-[16px] tracking-[0.25em] font-regular font-['Monumen'] uppercase">Plan</div>
              <div class="mt-3 text-3xl font-bold leading-none">24</div>
              <div class="-mt-1 text-sm font-light">Meses</div>
              <div class="mx-auto my-4 w-[99%] rounded-lg border border-white/70 px-3 py-1 text-center text-sm font-medium leading-6 group-hover:border-white">
                <span id="precio_24">$16,925.00</span>
              </div>
              <div class="text-sm font-light">Mensuales</div>
            </div>
          </button>
          <button id="plan36"
            class="group w-full rounded-3xl border border-white/40 bg-transparent px-5 py-5 text-white/90 transition hover:bg-[#D4D4D44D] hover:text-white">
            <div class="text-center">
              <div class="text-[16px] tracking-[0.25em] font-regular font-['Monumen'] uppercase">Plan</div>
              <div class="mt-3 text-3xl font-bold leading-none">36</div>
              <div class="-mt-1 text-sm font-light">Meses</div>
              <div class="mx-auto my-4 w-[99%] rounded-lg border border-white/70 px-3 py-1 text-center text-sm font-medium leading-6 group-hover:border-white">
                <span id="precio_36">$16,925.00</span>
              </div>
              <div class="text-sm font-light">Mensuales</div>
            </div>
          </button> --}}
          <button id="plan60" data-default
            class="group w-full rounded-3xl border border-white/40 bg-transparent px-5 py-5 text-white/90 transition hover:bg-[#D4D4D44D] hover:text-white">
            <div class="text-center">
              <div class="text-[16px] tracking-[0.25em] font-regular font-['Monumen'] uppercase">Plan</div>
              <div class="mt-3 text-3xl font-bold leading-none">60</div>
              <div class="-mt-1 text-sm font-light">Meses</div>
              <div class="mx-auto my-4 w-[99%] rounded-lg border border-white/70 px-3 py-1 text-center text-sm font-medium leading-6 group-hover:border-white">
                <span id="precio_60">$16,925.00</span>
              </div>
              <div class="text-sm font-light">Mensuales</div>
            </div>
          </button>
        </div>
        <div class="mt-6 md:hidden">
          <button id="btnNextToResumen"
            class="w-full rounded-full bg-white text-[#0E0A60] px-6 py-3 font-medium">
            Continuar
          </button>
        </div>
      </div>

      <!-- Columna derecha -->
      <div id="colResumen" class="bg-white p-6 transition-opacity duration-200 hidden md:block" >
        <!-- Switch Resumen/Chepina -->
        <div class="mb-4 mt-5 flex items-center justify-center gap-2">
          <button id="btnResumen" aria-pressed="true"
                  class="inline-flex items-center gap-2 rounded-full px-4 py-2 md:text-[16px] text-[12px] text-black font-medium transition-colors bg-white border-2 border-[#D9D9D9]">
            <img src="{{ asset('images/locker/resumen.png') }}" alt="Resumen" class="h-3 w-3" />
            <span>Resumen Financiero</span>
          </button>
          <button id="btnChepina" aria-pressed="false"
                  class="inline-flex items-center gap-2 rounded-full md:text-[16px] text-[12px] px-4 py-2 text-black font-medium transition-colors bg-[#D9D9D9]">
            <img src="{{ asset('images/locker/chepina.png') }}" alt="Chepina" class="h-3 w-3" />
            <span>Chepina</span>
          </button>
        </div>

        <!-- Contenido Resumen -->
        <div id="contenidoResumen" >
          <h5 class="mb-3 font-regular font-['Monumen'] text-2xl">RESUMEN</h5>
          <div class="mb-3 grid md:grid-cols-3 grid-cols-2 gap-4 text-sm">
            <div>
              <p>Enganche:<br><strong><span id="REnganche">30%</span> - <span id="RMontoEnganche" class="text-blue-600">$213,300.00</span></strong></p>
              <p class="py-3">Mensualidad:<br><strong><span id="RMensualidad" class="text-blue-600">$497,700.00</span></strong></p>
            </div>
            <div>
              <p>Financimiento:<br><span id="RPlan"><strong>12 Meses</strong></span></p>
              <p class="py-3">Costo Total:<br><strong><span id="RPTotal" class="text-blue-600">$711,000.00</span></strong></p>
            </div>
            <div>
               <p>Monto Financiado:<br><span id="RMFinanciado"><strong>$497,700.00</strong></span></p>
            </div>
          </div>

          <hr class="my-4">

          <h6 class="mb-3 text-xs font-regular font-['Monumen'] text-3xl uppercase tracking-wide">Simulador de Plusvalía</h6>
          <p class="text-[14px]">Proyección de plusvalía a <strong>5 años</strong> de acuerdo al plan de pagos seleccionado</p>

          <!-- KPIs -->
          <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
            <div class="rounded-[5px] border border-black/5 bg-green-50 p-3 text-center">
              <img src="{{ asset('images/locker/VectorMoney.png') }}" alt="" class="mx-auto" />
              <span class="mt-2 block text-sm text-gray-600">Plusvalía Total</span>
              <div id="RPlusavaliTotal" class="mt-2 text-lg font-semibold text-green-600">$719,074.97</div>
            </div>

            <div class="rounded-[5px] border border-black/5 bg-blue-50 p-3 text-center">
              <img src="{{ asset('images/locker/VectorROI.png') }}" alt="" class="mx-auto" />
              <span class="mt-2 block text-sm text-gray-600">ROI Proyectado</span>
              <div id="RRoiTotal" class="mt-2 text-lg font-semibold text-blue-600">101.14%</div>
            </div>

            <div class="rounded-[5px] border border-black/5 bg-purple-50 p-3 text-center">
              <img src="{{ asset('images/locker/VectorCelandar.png') }}" alt="" class="mx-auto" />
              <span class="mt-2 block text-sm text-gray-600">Plusvalía Anual</span>
              <div class="mt-2 text-lg font-semibold text-purple-600">15%</div>
            </div>

            <div class="rounded-[5px] border border-black/5 bg-orange-50 p-3 text-center">
              <img src="{{ asset('images/locker/VectorArrow.png') }}" alt="" class="mx-auto" />
              <span class="mt-2 block text-sm text-gray-600">Valor Final</span>
              <div id="RValorFinal" class="mt-2 text-lg font-semibold text-orange-600">$1,430,074.97</div>
            </div>
          </div>
          <!-- Tabla de Plusvalía -->
          <h6 class="mb-2 text-base font-medium text-gray-800 mt-5">Tabla de Plusvalía</h6>
          <div class="overflow-x-auto">
            <table class="w-full text-sm">
              <thead class="text-gray-600 border-b border-gray-200">
                <tr>
                  <th scope="col" class="py-2 px-3 text-left font-medium">Año</th>
                  <th scope="col" class="py-2 px-3 text-right font-medium">Valor Propiedad</th>
                  <th scope="col" class="py-2 px-3 text-right font-medium">Monto Pagado</th>
                  <th scope="col" class="py-2 px-3 text-right font-medium">Plusvalía Acumulada</th>
                  <th scope="col" class="py-2 px-3 text-right font-medium">ROI (%)</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-100">
                <tr>
                  <td class="py-2 px-3">0</td>
                  <td class="py-2 px-3 text-right">$711,000.00</td>
                  <td class="py-2 px-3 text-right">$711,000.00</td>
                  <td class="py-2 px-3 text-right text-green-600 font-semibold">+$0.00</td>
                  <td class="py-2 px-3 text-right text-blue-600 font-semibold">0.00%</td>
                </tr>
                <tr>
                  <td class="py-2 px-3">1</td>
                  <td class="py-2 px-3 text-right">$817,650.00</td>
                  <td class="py-2 px-3 text-right">$711,000.00</td>
                  <td class="py-2 px-3 text-right text-green-600 font-semibold">+$106,650.00</td>
                  <td class="py-2 px-3 text-right text-blue-600 font-semibold">15.00%</td>
                </tr>
                <tr>
                  <td class="py-2 px-3">2</td>
                  <td class="py-2 px-3 text-right">$940,297.50</td>
                  <td class="py-2 px-3 text-right">$711,000.00</td>
                  <td class="py-2 px-3 text-right text-green-600 font-semibold">+$229,297.50</td>
                  <td class="py-2 px-3 text-right text-blue-600 font-semibold">32.26%</td>
                </tr>
                <tr>
                  <td class="py-2 px-3">3</td>
                  <td class="py-2 px-3 text-right">$1,081,342.13</td>
                  <td class="py-2 px-3 text-right">$711,000.00</td>
                  <td class="py-2 px-3 text-right text-green-600 font-semibold">+$370,342.13</td>
                  <td class="py-2 px-3 text-right text-blue-600 font-semibold">52.08%</td>
                </tr>
                <tr>
                  <td class="py-2 px-3">4</td>
                  <td class="py-2 px-3 text-right">$1,243,543.45</td>
                  <td class="py-2 px-3 text-right">$711,000.00</td>
                  <td class="py-2 px-3 text-right text-green-600 font-semibold">+$532,543.45</td>
                  <td class="py-2 px-3 text-right text-blue-600 font-semibold">74.89%</td>
                </tr>
                <tr>
                  <td class="py-2 px-3">5</td>
                  <td class="py-2 px-3 text-right">$1,430,074.97</td>
                  <td class="py-2 px-3 text-right">$711,000.00</td>
                  <td class="py-2 px-3 text-right text-green-600 font-semibold">+$719,074.97</td>
                  <td class="py-2 px-3 text-right text-blue-600 font-semibold">101.14%</td>
                </tr>
              </tbody>
            </table>
          </div>
          <ul class="mt-2 list-disc pl-5 text-xs text-gray-500 space-y-1">
            <li>Los cálculos consideran el plan de financiamiento y la ubicación</li>
            <li>Esta es una proyección basada en tendencias históricas del mercado</li>
          </ul>


          <div class="text-left mt-6 hidden md:block">
          <button id="btnGoForm"
            class="rounded-full bg-black px-6 py-2  text-white border border-black
                  transition-colors duration-200
                  hover:bg-white hover:text-black
                  focus:outline-none focus:ring-2 focus:ring-black/20">
            Descargar Cotización
          </button>
        </div>

        </div>
        <!-- Contenido Chepina -->
        <div id="contenidoChepina" class="hidden">
          <h4>
            <span class="font-regular font-['Monumen'] text-2xl text-black">CHEPINA</span> 
           <img id="chepina"
                src=""
                alt="Chepina"
                class="mx-auto block max-h-[70vh] w-auto">
          </div>
           <!-- Móvil: barra de navegación -->
        <div class="md:hidden mb-3 flex items-center justify-between gap-2">
          <button id="btnBackToPlanes"
                  class="rounded-full border px-4 py-2 text-sm md:text-[16px] text-[12px]">
            ← Regresar
          </button>
          <button id="btnNextToForm"
                  class="rounded-full bg-black text-white px-4 py-2 text-sm md:text-[16px] text-[12px]">
            Continuar
          </button>
        </div>    
        </div>
        <!-- end Columnade derecha -->
        
      </div>
      <!-- WRAPPER: FIN -->
      
      <div id="stepForm" class="absolute inset-0 z-10 flex items-stretch justify-stretch p-0 md:p-6
            opacity-0 pointer-events-none transition-opacity duration-300
            overflow-visible md:overflow-y-auto [-webkit-overflow-scrolling:touch]">
              <div class="w-full h-full md:h-auto md:max-w-2xl md:rounded-2xl rounded-none
                          bg-[#0b0a48] text-white p-6 shadow-xl ring-1 ring-white/10
                          md:max-h-[75vh] md:overflow-y-auto">
              <h3 class="text-2xl font-['Monumen'] tracking-wide mb-2">TUS DATOS</h3>
              <p class="text-white/80 text-sm mb-4">
                Favor de dejar tus datos para descargar la cotización y nosotros te contactaremos lo más pronto, gracias.
              </p>
              <hr class="border-white/20 my-3" />
              <h4 class="text-xl font-['Monumen'] tracking-wide mb-4">DESCARGA TU COTIZACIÓN</h4>

              <form id="leadForm" class="space-y-4 max-w-xl">
                <input id="leadNombre" type="text" placeholder="Nombre Completo"
                      class="w-full rounded-md bg-white/20 placeholder-white/70 text-white px-4 py-3 outline-none"  required/>
                <input id="leadCelular" type="tel" placeholder="Celular"
                      class="w-full rounded-md bg-white/20 placeholder-white/70 text-white px-4 py-3 outline-none" required/>
                <input id="leadCorreo" type="email" placeholder="Correo"
                      class="w-full rounded-md bg-white/20 placeholder-white/70 text-white px-4 py-3 outline-none" required/>
                <input id="leadCiudad" type="text" placeholder="Ciudad"
                      class="w-full rounded-md bg-white/20 placeholder-white/70 text-white px-4 py-3 outline-none" />
                <div class="flex gap-3 pt-2 justify-between">
                  <button type="button" id="btnBackResumen"
                          class="rounded-full bg-white/10 px-5 py-2 text-white border border-white/30 hover:bg-white/20 md:text-[16px] text-[12px]">
                    Regresar
                  </button>
                  <button type="button" id="btnEnviarDescargar"
                          class="rounded-full bg-white px-5 py-2 text-black font-medium hover:bg-white/90 md:text-[16px] text-[12px]">
                     Descargar
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
</div>

 
<!-- Toast éxito PDF -->
<div id="toastCotizacion"
     class="fixed inset-0 z-[60] hidden items-start justify-center p-4 md:p-6">
  <div class="mx-auto mt-20 w-full max-w-md rounded-xl bg-white shadow-xl ring-1 ring-black/10">
    <div class="flex items-start gap-3 p-4">
      <div class="grid h-7 w-7 place-items-center shrink-0 rounded-full bg-green-100">✓</div>
      <div class="text-sm">
        <h3 class="font-semibold text-green-700">¡Cotización generada con éxito!</h3>
        <p class="mt-1 text-gray-600">Tu PDF se descargó correctamente.</p>
      </div>
      <button id="toastClose"
              class="ml-auto rounded-full p-1 text-gray-500 hover:bg-gray-100"
              aria-label="Cerrar aviso">✕</button>
    </div>
  </div>
</div>
 {{-- Fin Cotizador) --}}
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const modal        = document.getElementById('modalCotizador');
  if (!modal) return;

  const btnResumen   = modal.querySelector('#btnResumen');
  const btnChepina   = modal.querySelector('#btnChepina');
  const contResumen  = modal.querySelector('#contenidoResumen');
  const contChepina  = modal.querySelector('#contenidoChepina');
  const scrollWrap   = modal.querySelector('[data-scrollwrap]');

  const ON  = ['bg-white','border-2','border-[#D9D9D9]'];
  const OFF = ['bg-[#D9D9D9]'];

  function setTab(tab) {
    const isResumen = tab === 'resumen';

    // alterna visibilidad
    contResumen.classList.toggle('hidden', !isResumen);
    contChepina.classList.toggle('hidden', isResumen);

    // botones
    if (isResumen) {
      btnResumen.classList.add(...ON);  btnResumen.classList.remove(...OFF);
      btnChepina.classList.add(...OFF); btnChepina.classList.remove(...ON);
      btnResumen.setAttribute('aria-pressed','true');
      btnChepina.setAttribute('aria-pressed','false');
    } else {
      btnChepina.classList.add(...ON);  btnChepina.classList.remove(...OFF);
      btnResumen.classList.add(...OFF); btnResumen.classList.remove(...ON);
      btnChepina.setAttribute('aria-pressed','true');
      btnResumen.setAttribute('aria-pressed','false');
    }

    // reset scroll al tope
    scrollWrap?.scrollTo({ top: 0, behavior: 'auto' });
  }

  // Estado inicial
  setTab('resumen');

  // Eventos
  btnResumen.addEventListener('click', (e) => { e.preventDefault(); setTab('resumen'); });
  btnChepina.addEventListener('click', (e) => { e.preventDefault(); setTab('chepina'); });
});
</script>

{{-- Datos desde el controlador --}}
<script>
  const bora = @json($bora);
  const bali = @json($bali);
  const ibiza = @json($ibiza);
  console.log(ibiza);
</script>

{{-- JS de la página (vanilla para tabs y modales Tailwind) --}}
<script>
  // Tabs sin Bootstrap
  function showTab(targetId) {
    document.querySelectorAll('[data-tab-content]').forEach(pane => {
      pane.classList.add('hidden');
    });
    const pane = document.querySelector(targetId);
    if (pane) pane.classList.remove('hidden');

    // Actualiza estado visual de links
    document.querySelectorAll('#btn-pisos a[id$="-tab"]').forEach(a => {
      a.classList.remove('bg-[#0E0A60]', 'text-white');
      a.classList.add('border', 'border-[#0E0A60]', 'text-[#0E0A60]');
      a.setAttribute('aria-selected','false');
    });
    const trigger = document.querySelector(`[data-tab-target="${targetId}"]`);
    if (trigger) {
      trigger.classList.remove('border','border-[#0E0A60]','text-[#0E0A60]');
      trigger.classList.add('bg-[#0E0A60]','text-white');
      trigger.setAttribute('aria-selected','true');
    }
    // scroll suave a la sección
    const lot = document.getElementById('lotificacion');
    if (lot) lot.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  // Bind a los links (si están visibles)
  document.addEventListener('click', (e) => {
    const a = e.target.closest('#btn-pisos a[data-tab-target]');
    if (a) {
      e.preventDefault();
      showTab(a.getAttribute('data-tab-target'));
    }
  });

 
  // Amenidades modal (Tailwind)
  function openAmenidadesModal(tipo) {
    const modal = document.getElementById('amenidadesModal');
    const img = document.getElementById('amenidadesImage');
    const map = {
      kayak: 'https://emedos.locker.agency/img/emedos/18.MIRADOR.jpg',
      casaclub: 'https://emedos.locker.agency/img/emedos/1.CASACLUB.jpg',
      terraza: 'https://emedos.locker.agency/img/emedos/2.-TERRAZAjpg.jpg',
      albercaAdultos: 'https://emedos.locker.agency/img/emedos/3.-BAR---ALBERCA-ADULTOS.jpg',
      salonEvento: 'https://emedos.locker.agency/img/emedos/5.SALONEVENTO.jpg',
      tirolesa: 'https://emedos.locker.agency/img/emedos/6.TIROLESA.jpg',
      ccdeportiva: 'https://emedos.locker.agency/img/emedos/7.CCDEPORTIVA.jpg',
      gym: 'https://emedos.locker.agency/img/emedos/8.GYM.jpg',
      piscina: 'https://emedos.locker.agency/img/emedos/9.PISCINASEMI.jpg',
      tenis: 'https://emedos.locker.agency/img/emedos/11.TENIS.jpg',
      usomultiple: 'https://emedos.locker.agency/img/emedos/12.USOSMULTIPLES.jpg',
      jardinzen: 'https://emedos.locker.agency/img/emedos/13.JARDINZEN.jpg',
      juegosinfantiles: 'https://emedos.locker.agency/img/emedos/14.JUEGOSINFANTILES.jpg',
      areacomercial: 'https://emedos.locker.agency/img/emedos/15.AREACOMERCIAL.jpg',
      petpark: 'https://emedos.locker.agency/img/emedos/16.PETPARK.jpg',
      parque: 'https://emedos.locker.agency/img/emedos/17.PARQUECENTRAL.jpg',
      mirador: 'https://emedos.locker.agency/img/emedos/18.MIRADOR.jpg',
      default: 'https://emedos.locker.agency/img/emedos/casaclub.jpg',
    };
    img.src = map[tipo] || map.default;
    modal.classList.remove('hidden');
    modal.classList.add('flex');
  }
  function closeAmenidadesModal() {
    const modal = document.getElementById('amenidadesModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
  }
  window.openAmenidadesModal = openAmenidadesModal;
  window.closeAmenidadesModal = closeAmenidadesModal;

  // Zoom (usa tu SVGZoom existente)
  document.addEventListener('DOMContentLoaded', function () {
    const svg = document.getElementById('svg_ibiza');
    if (svg) {
      const container = svg.parentElement;
      const zoomInBtn = document.getElementById('zoomInBtn');
      const zoomOutBtn = document.getElementById('zoomOutBtn');
      const resetZoomBtn = document.getElementById('resetZoomBtn');
      // SVGZoom proviene de tu resources/js/zoomcontrol.js
      if (window.SVGZoom) new SVGZoom(container, svg, zoomInBtn, zoomOutBtn, resetZoomBtn);
    }
  });
</script>
<script>
(function () {
  const modalId = 'modalCotizador';
  const modal = document.getElementById(modalId);
  if (!modal) return;

  const openers = document.querySelectorAll('[data-open="' + modalId + '"]');
  const closers = document.querySelectorAll('[data-close="' + modalId + '"]');
  const modalBox = modal.querySelector('.bg-white');

  function openModal() {
    modal.classList.remove('hidden');
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('overflow-hidden');
  }

  function closeModal() {
    modal.classList.add('hidden');
    modal.setAttribute('aria-hidden', 'true');
    document.body.classList.remove('overflow-hidden');
  }

  openers.forEach(el => el.addEventListener('click', (e) => {
    e.preventDefault();
    openModal();
  }));

  closers.forEach(el => el.addEventListener('click', (e) => {
    e.preventDefault();
    closeModal();
  }));

  // Cerrar al hacer click fuera de la caja blanca
  modal.addEventListener('click', (e) => {
    if (!modalBox) return;
    if (!modalBox.contains(e.target)) closeModal();
  });

  // Cerrar con ESC
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
      closeModal();
    }
  });
})();
</script>


{{-- Carga de assets del FRONT (no usar app.js del backend) --}}
@vite(['resources/js/appCot.js','resources/js/peninsula.js'])
@endsection