@extends('layouts.appVitah', ['title' => 'Vitah'])

@section('contenido')
     <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px auto;
            font-family: 'Lato', sans-serif !important;
            font-size:12px;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 3px;
            text-align: center;
            font-family: 'Lato', sans-serif !important;
        }

        th {
            background-color: #f4f4f4;
            font-family: 'Lato', sans-serif !important;
        }
         .iti {
        width: 100% !important; /* Force full width */
    }
    .iti__flag-container {
        z-index: 1000 !important; /* Prevent dropdown from being hidden */
    }
    .iti__dropdown {
        max-width: 300px !important; /* Prevent excessive width */
    }
        .tooltip-content {
    font-family: "Roboto", serif;
    color: white;
    text-align: left;
    line-height: 1.5em;
}
.zoom-controls {
    top: 0;
    right: 0;
    width: 35px;
    position: absolute;
    z-index:9;
}
.zoom-controls img {
    cursor: pointer;
}
.blues{
    border-radius: 20px !important;
    background: #C27E81 !important;
    width: 150px !important;
}
.tooltip-inner {
    background-color: #C27E81 !important;
    color: white !important;
    padding: 10px;
    border: 0px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #C27E81;
}

.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #C27E81;
}

.tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #C27E81;
}

.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #C27E81;
}

.pointer{cursor:pointer;}
.pulse {
      fill: rgba(14, 10, 96, 0.6); 
      animation: pulse-animation 2s infinite;
    }

    @keyframes pulse-animation {
      0% {
        r: 5;
        opacity: 0.8;
      }
      100% {
        r: 20;
        opacity: 0;
      }
    }

    /* Main Path */
    .cls-2 {
      fill: red;
    }


.modal-header {
    display: flex;
    justify-content: center; /* Center the title */
    width: 100%; /* Ensure it takes full width */
}


.close {
    position: absolute; /* Position close button to the right */
    right: 20px; /* Adjust as necessary */
}
/* Modal styling specific to 'amenidades' */
        .amenidades-modal .modal-dialog {
            max-width: 90vw; /* Doubles the width of the modal */
        }

        .amenidades-modal .modal-content {
            background: transparent; /* No background */
            border: none; /* Remove borders */
            text-align: center;
        }

        .amenidades-modal .modal-body {
            padding: 0;
        }

        .amenidades-modal .modal-body img {
            max-width: 100%;
            max-height: 90vh; /* Keep image within viewport height */
            display: block;
            margin: auto;
        }
        .amenidades-modal.show {
            background-color: rgba(0, 0, 0, 0.9) !important; /* Darker backdrop */
        }

        /* Close button styling specific to 'amenidades' */
        .amenidades-close-btn {
            position: absolute;
            top: -20px; /* Moves the button outside the modal */
            right: -20px; /* Moves it outside the modal */
            font-size: 28px;
            color: white;
            background: rgba(0, 0, 0, 0.5);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1051;
        }

        .amenidades-close-btn:hover {
            background: rgba(0, 0, 0, 0.8);
        }
        .payment-close-btn{
             position: absolute;
            top: 20px; /* Moves the button outside the modal */
            right: 20px; /* Moves it outside the modal */
            font-size: 28px;
            color: white;
            background: rgba(0, 0, 0, 0.5);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1051;
        }
        .payment-close-btn:hover {
            background: rgba(0, 0, 0, 0.8);
        }
#btn-pisos img{display:block; margin:auto;}
.ctado, .ctado2, .ctado3, #generatePdfContado{ display:none;}
.men9 {
       display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#btn-pisos {
    position: relative;         
    z-index: 1000;              
    background-color: #fff;     
    padding: 20px;             
}
h1.tituloH{margin-top:140px; color: rgb(229, 153, 157);
 font-family: "Marcellus", serif !Important;
  font-weight: 400 !important;
}

@media (max-width: 768px) {
    table {
        font-size: 10px; /* Font size for mobile view */
    }
    h1.tituloH{margin-top:40px; color: rgb(229, 153, 157);}
}

        
    </style>
    <div class="bg-morado position-relative px-0 text-center" style="background-color:white; margin-bottom: 45px;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="tituloH" style="color: #e5999d; text-align: center; font-family: " >TU PRÓXIMA INVERSIÓN COMIENZA AQUÍ</h1>
                    <p style="margin-top:20px; margin-bottom:30px; font-weight:400l; color: rgb(55, 55, 55); text-align: center;"> Selecciona un lote para poder cotizarlo. </p>
                </div>
            </div>
        </div>
      <div class="container ">
        <div class="row">
          <div class="col-lg-12 col-sm-12">
        @include('front.cotizadores.svgs.mainVitah')
          </div>
          
        </div>
      </div>
    </div>
    
<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl payMentmodal" role="document">
    <div class="modal-content">
      <div class="modal-body" style="padding: 0rem;">
          <button type="button" class="payment-close-btn" onclick="closePaymentModal()">&times;</button>
        <div class="row">
            <div class="col-12 col-lg-6" style ="padding: 5rem;">
        <!-- Payment Plan Selector -->
        <div class="form-group">
            <form action="" id="Cotizacion"  role="Cotizacion" name="formCotizacion">
            <h3 class="titulo" style="text-transform:uppercase;">$660,000</h3>
            <p>Precio M2: <strong><span class="preciom2"></span></strong> </p>
            <p>Costo Total: <strong><span class="costos"></span></strong> </p><br> 
        
            <h3>PLAN DE PAGOS</h3>
            <br>
           <label> Porcentaje de Enganche</label>
          <select class="form-control" id="paymentEnga" name="paymentEnga" disabled>
            <!--<option value="0">-- Seleccione un Enganche --</option>-->
            <option value="E30">30% Enganche</option>
          </select>
           <p style="display:none; padding-top:10px" class="mEnganche"></p>
        </div>
        <div class="form-group">
          <label> Plazo de Financimiento</label>    
          <select class="form-control" id="paymentPlan" name="paymentPlan" disabled>
            <!--<option value="0">-- Seleccione un enganche primero --</option>-->
            <option value="60MS">60 Meses</option>
          </select>
           <p style="display:none; padding-top:10px" class="Mmensualidades"></p>
        </div><br>

        <!-- Information Fields -->
      
                  <div class="row">
                     <div class="col-md-12">
                    <h3> Solicita tu Cotizacion</h3>
                  <input type="hidden" name="villa" id="Tvilla">    
                  <input type="hidden" name="id" id="idlote">   
                  <input type="hidden" name="precio" id="precio">
                  <input type="hidden" name="tprecio" id="tprecio">
                  <input type="hidden" name="enganche" id="enganche">
                  <input type="hidden" name="mensualidad" id="mensualidad">
                  <input type="hidden" name="nmensualidad" id="nmensualidad">
                  <input type="hidden" name="chepinaM" id="chepinaM">
                     </div>
                  <div class="col-md-12">
                                    
                    <label for="nombre">Nombre Completo</label>
                    <input type="text" class="form-control" name="nombre" id="nombre">
                  </div>
                    <div class="col-md-6">
                        <label for="countryCode">Código</label>
                        <select id="countryCode" class="form-control" name="countryCode">
                            <option value="+52" selected>MX +52 (México)</option>
                            <option value="+1">US +1 (USA)</option>
                            <option value="+34">ES+34 (España)</option>
                            <option value="+44">GB +44 (UK)</option>
                            <option value="+91">IN +91 (India)</option>
                            <option value="+55">BR +55 (Brasil)</option>
                            <option value="+81">JP +81 (Japón)</option>
                            <option value="+49">DE +49 (Alemania)</option>
                        </select>
                    </div>
            
                    <!-- Phone Number Input -->
                    <div class="col-md-6">
                        <label for="phone">Teléfono</label>
                        <input type="tel" class="form-control" name="phone" id="phone" placeholder="">
                    </div>
                  <div class="col-md-12">
                    <label for="mail">Correo</label>
                    <input type="text" class="form-control" name="mail" id="mail">
                  </div>
                  <div class="col-md-6" style="display:none">
                    <label for="ciudad">Ciudad</label>
                    <input type="text" class="form-control" name="ciudad" id="ciudad">
                  </div>
                  <div class="text-center">
                  <button id="generatePdf" class="btn btn-secondary blues">Descargar</button>
                  </div>
                   <!--<div class="text-center">-->
                <!--                    <button id="generatePdf" class="btn btn-secondary">Generar Cotización</button>-->
                <!--                    <button id="generatePdfContado" class="btn btn-secondary">Generar Cotización</button>-->
                <!--                </div>-->
                </div>
               
          
          </div>
          <div class="col-12 col-lg-6" style="background:#0E0A60">
               <img id="chepina" src="https://emedos.locker.agency/img/emedos/Lote.jpg" class="img-fluid d-block mx-auto" style ="padding:3rem" >
          </div>
          
              </form>
    </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade amenidades-modal" id="amenidadesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content amenidades">
            <button type="button" class="amenidades-close-btn" onclick="closeAmenidadesModal()">&times;</button>
            <div class="modal-body amenidades">
                <img id="amenidadesImage" src="https://emedos.locker.agency/img/emedos/casaclub.jpg" alt="Amenidades Image">
            </div>
        </div>
    </div>
</div>
<script>
   const vitah = @json($vitah);
   console.log(vitah);
</script>


@vite(['resources/js/app.js', 'resources/js/vitah.js', 'resources/js/zoomcontrol.js'])
@endsection
@push('js')
<script>
document.addEventListener("DOMContentLoaded", function () {
  const svgContainer = document.getElementById("svg_vitah").parentElement;
  const svgContent = document.getElementById("svg_vitah");
  const zoomInBtn = document.getElementById("zoomInBtn");
  const zoomOutBtn = document.getElementById("zoomOutBtn");
  const resetZoomBtn = document.getElementById("resetZoomBtn");
  new SVGZoom(svgContainer, svgContent, zoomInBtn, zoomOutBtn, resetZoomBtn);
});
    </script>

@endpush