@extends('layouts.appNahla', ['title' => 'Nhala'])
@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-[#2E372E] text-[40px]">Cotizador Nahla</h1>
  </div>
</div>
<section class="bg-white main-bg-svg overflow-x-hidden">
  <div class="mx-auto w-full max-w-[1200px] px-4">
    <div class="grid grid-cols-1 md:grid-cols-7 gap-4">
      <!-- Columna izquierda (60%) -->
      <div class="md:col-span-3 ">
        <div id="SVGMainNahla" class="relative w-full mx-auto">
          <div class="svg-holder w-full">
            @include('front.cotizadores.svgs.mainNahla')
          </div>
        </div>
      </div>
      <!-- Columna derecha (40%) -->
      <div class="md:col-span-4 flex flex-col items-center justify-center interactivo">
        <div id="svgSatageNahla" class="w-full">
          <h1 class="text-5xl text-center p-5">Planta Baja</h1>
          @include('front.cotizadores.svgs.nahlaP1')
        </div>
        <div id="svgNahlaP2" class="w-full hidden">
          {{-- @include('front.cotizadores.svgs.nahlaP2') --}}
        </div>
      </div>

    </div>
  </div>
</section>
{{-- <section class="bg-white main-bg-svg overflow-x-hidden">
  <div class="mx-auto w-full max-w-[1200px] px-4">
    <div class="interactivo">
      <div id="svgStageVitah" class="relative w-full mx-auto">
        <div class="svg-holder w-full">
          @include('front.cotizadores.svgs.mainVitah')
        </div>
      </div>
    </div>
  </div>
</section> --}}


  {{-- 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 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-[#2E372E] 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  class="mb-1 block text-sm font-regular font-['Monumen'] text-2xl">PLAN DE PAGOS</label>
          
        </div>

        <!-- Opciones de plan -->
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
           <button id="plan20" data-enganche="20" 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-[14px] tracking-[0.25em] font-regular font-['Monumen'] uppercase">Plan 20% Enganche</div>
              <div class="mt-3 text-3xl font-bold leading-none">25</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_20">$0.00</span>
              </div>
              <div class="text-sm font-light">Mensuales</div>
            </div>
          </button>

          <!-- PLAN 30% -->
          <button id="plan30" data-enganche="30"
            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-[14px] tracking-[0.25em] font-regular font-['Monumen'] uppercase">Plan 30% Enganche</div>
              <div class="mt-3 text-3xl font-bold leading-none">25</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_30">$0.00</span>
              </div>
              <div class="text-sm font-light">Mensuales</div>
            </div>
          </button>

          <!-- PLAN 50% -->
          <button id="plan50" data-enganche="50" 
            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-[14px] tracking-[0.25em] font-regular font-['Monumen'] uppercase">Plan 50% Enganche</div>

              <!-- En lugar de "0 / Meses", mostramos el saldo -->
              <div class="mt-3 text-3xl font-bold leading-none">Saldo</div>
              <div class="-mt-1 text-sm font-light">Contra entrega</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_50">$0.00</span> <!-- aquí se mostrará el monto del saldo -->
              </div>

              <!-- En lugar de "Saldo contra entrega", mostramos "0 Mensualidades" -->
              <div class="text-sm font-light">0 Mensualidades</div>
            </div>
          </button>
        </div>
        <p id="montoEnganche" class="mt-4 text-sm">
    Monto de Enganche: <strong>$0.00 MXN</strong>
  </p>
        <div class="mt-6 md:hidden">
          <button id="btnNextToResumen"
            class="w-full rounded-full bg-white text-[#927A94] 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 id="RLabelFinanciado">Monto Financiado:</p>
            <p><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-[#927A94] 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 nahla = @json($nahla);
console.log(nahla);
</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-[#927A94]', 'text-white');
      a.classList.add('border', 'border-[#927A94]', 'text-[#927A94]');
      a.setAttribute('aria-selected','false');
    });
    const trigger = document.querySelector(`[data-tab-target="${targetId}"]`);
    if (trigger) {
      trigger.classList.remove('border','border-[#927A94]','text-[#927A94]');
      trigger.classList.add('bg-[#927A94]','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'));
    }
  });
</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>
@vite(['resources/js/appCot.js','resources/js/nahla.js'])
@endsection