@extends('layouts.public')
@section('content')


<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('quote-form');

    form.addEventListener('submit', function (e) {
        e.preventDefault(); // ⚠️ Evita que se recargue o lo intercepte otra función

        // Validación personalizada (si quieres)
        const isValid = form.checkValidity();
        if (!isValid) {
            form.reportValidity();
            return;
        }

        // Enviar el formulario manualmente
        form.submit(); // Este sí hace el POST nativo sin interferencias
    });
});


    </script>
<!-- Body -->
<main class='doc-body' role='main' data-navigation-section='body'>
    <!--[if lte IE 9]>
				<p class='browsehappy'>You are using an <strong>outdated</strong> browser. Please <a href='http://browsehappy.com/'>upgrade your browser</a> to improve your experience.</p>
			<![endif]-->


    <div class="page-choose-lot">
        <div class="hero-wrapper">
            <div class="hero-content">
                <div class="container text-center">
                    <div>Cotiza tu departamento</div>

                    <div class='mt-3'>Torre 1</div>
                </div>
            </div>
        </div>

        <div class="wrapper-maplayout-bg">


            <div class="section-maplayout pb-5">
                <div class="container">
                    <div class="title main-text text-center mb-4 pt-3">Vive el sueño de despertar frente al mar</div>
                </div>

                <div class="position-relative ">
                    <div class="position-absolute legend-accordion">
                        <div class="accordion" id="legend-accordion">
                            <div class="card">
                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#legend-accordion">
                                    <div class="card-body">
                                        Pulsa las zonas con colores para ver más información. <br>
                                        <div class='mt-2'>
                                            <div>
                                                <span class='circle success'>
                                                </span> Disponible
                                            </div>
                                            <div>
                                                <span class='circle unavailable'>
                                                </span> No disponible
                                            </div>
                                            <div>
                                                <span class='circle reserved'>
                                                </span> Apartado
                                            </div>
                                            <div>
                                                <span class='circle sold'>
                                                </span> Vendido
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-footer" id="headingOne">
                                    <button class="btn btn-link btn-block text-right p-0" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        <span>Ocultar</span> <i class="fa fa-chevron-down d-none">
                                        </i> <i class="fa fa-chevron-up">
                                        </i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="maplayout-actions position-absolute">
                        <button id="maplayout-zoom-in">
                            <i class="fas fa-plus">
                            </i>
                        </button>
                        <button id="maplayout-zoom-out">
                            <i class="fas fa-minus">
                            </i>
                        </button>
                    </div>

                    <div class="overflow">
                        <div id="maplayout-zoom">
                            <img src="{{ asset('storage/' . $fractional->image->path) }}"
                                alt="{{ $fractional->image->alt }}"
                                class="w-100" />

                            <div id="MediaLayout" class="media-layout">
                                <svg id="MediaLayoutSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" viewBox="0 0 1000 1196.6666666667">
                                    @foreach ($properties as $property)
                                    <polygon
                                        class="polygon-{{ $property->status }}"
                                        id="property-{{ $property->id }}"
                                        {!! $property->propertyType->svg_points !!}
                                        data-property="{{ $property->id }}"
                                        data-status="{{ $property->status }}"
                                        data-statuses="{{ ucfirst($property->status === 'reserved' ? 'Apartado' : $property->status) }}"
                                        data-size="{{ $property->propertyType->area }} m<sup>2</sup>"
                                        data-raw-size="{{ $property->propertyType->area }}"
                                        data-key="{{ $property->code }}"
                                        data-description="{{ $property->name }}"
                                        data-type="{{ $property->propertyType->name }}"
                                        data-price="${{ number_format($property->propertyType->price_january, 2) }}"
                                        data-raw-price="{{ $property->propertyType->price }}"
                                        data-alt="{{ $fractional->name }} - {{ $property->code }}"
                                        data-plan="{{ asset('storage/' .  $property->propertyType->image) }}"
                                        data-toggle="tooltip"
                                        data-placement="top"
                                        data-html="true"
                                        title='<div class="text-{{ $property->status }}"><strong>{{ $property->code }}</strong>
                                            <div><small>{{ $property->propertyType->name }}</small></div>
                                        </div>'
                                        data-max-payments="29"
                                        data-min-advance="20.00"
                                        data-max-balance="50.00"
                                        ></polygon>
                                    @endforeach


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


                </div>
            </div>

            <div class="section-info">
                <div class="container">
                    <div class="text-center">
                        <a href="contacto.html" class="btn btn-default main-btn px-4">CONTACTA A UN ASESOR</a>
                    </div>
                </div>
            </div>
        </div>




    </div>
</main>


<!-- Widgets-->
<div id='property-modal' class="modal property-quote-modal" tabindex="-1" data-max-payments="29" data-interest-payments="0" data-interest="0">
    <div class="modal-dialog modal-dialog-centered mw-100">

        <div class='container secondary-bg'>
            <div class='d-flex px-md-3 justify-content-between align-items-center my-3'>
                <div class='section-description  secondary-text ml-md-3'>Cotizador / Sisal Jungle / <span class='app-property-key'>
                    </span>
                </div>
                <a href="#" data-dismiss="modal" class="d-flex align-items-center justify-content-center btn-circle-dark no-print">
                    <img src="{{ asset('assets/icons/close.png') }}" width="19px" alt="" />
                </a>
            </div>

            <div class="modal-content border-0 pb-4 secondary-bg  ">
                <div class='row'>
                    <div class="col-lg-6 align-items-center justify-content-center d-none app-property-plan-content d-flex flex-column">
                        <div class="app-property-plan h-100 d-none">
                        </div>

                        <div class="app-property-conditions-plan d-none secondary-text mt-5">
                            <ul>
                                <li>Ningún ofrecimiento tendrá validez sin estar especificado por escrito en el contrato de compraventa.</li>
                                <li>Para apartar una ubicación es necesario contar con el depósito del apartado.</li>
                                <li>Los precios están sujetos a cambio sin previo aviso.</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 app-property-content secondary-text align-self-center">
                        <div class="row">
                            <div class="col-lg-12  m-auto py-md-3">
                                <div class="d-flex flex-wrap justify-content-between align-items-end">
                                    <div class="lot-name mt-4">
                                    </div>
                                    <div class='app-fractional-input flex-fill ml-5 mx-lg-5'>
                                    </div>
                                </div>

                                <div class='status mt-1 status'>
                                    <strong>DISPONIBLE</strong>
                                </div>
                                <div class="lot-type mt-2">
                                </div>

                                <div class="mt-2">
                                    <span class='app-property-size'>
                                    </span>
                                </div>

                                <!--div class='app-general-price-info'>
                                    <div class="price h5">
                                        <span class='app-property-price'>
                                        </span> <small>MXN</small>
                                    </div>
                                </div>
                                <div class='app-quote-price-info d-none'>
                                    <div class="price app-property-price-output h5">
                                        <span class='app-property-price'>
                                        </span> <small>MXN</small>
                                    </div>
                                    <div class="price d-none">
                                        <span class='h5 app-property-discount-price'>
                                        </span>
                                    </div>
                                </div -->


                                <div id='info-section'>
                                    <a href="#" class="app-quote btn btn-default secondary-btn mt-5 d-block w-100">Cotizar</a>
                                </div>

                                <form action="{{ route('quote.store') }}" id="quote-form" novalidate="novalidate" data-reset="1"  class="" role="form" data-async="1" method="post" accept-charset="utf-8">
                                    @csrf
                                    <div style="display:none;">
                                        <input type="hidden" name="_method" value="POST" />
                                    </div>

                                    <div id='quote-section' class="d-none mt-4">
                                        <h3 class="mb-4">Tu cotización</h3>

                                        <div class="form-group mb-2">
                                            <label class="w-100 d-flex justify-content-between mb-4">
                                                <strong>Precio</strong>
                                                <strong>$<span id="price-output">{{ number_format($property->propertyType->price_january, 2) }}</span> <small>MXN</small></strong>
                                            </label>
                                            <input type="hidden" name="price" id="QuotePrice" value="{{ $property->propertyType->price_january }}">
                                        </div>

                                        <input type="hidden" name="property_id" value="{{ $property->id }}">
                                        <input type="hidden" name="base_price" value="{{ $property->propertyType->price }}">
                                        <input type="hidden" name="interest_rate" value="0">

                                        <div class="form-group mb-2">
                                            <label for="month-select" class="w-100 d-flex justify-content-between">
                                                <strong>Mes de ocupación</strong>
                                            </label>
                                            <select id="month-select" name="month" class="form-control quote-input">
                                                @foreach ([
                                                'january' => 'Enero', 'february' => 'Febrero', 'march' => 'Marzo', 'april' => 'Abril',
                                                'may' => 'Mayo', 'june' => 'Junio', 'july' => 'Julio', 'august' => 'Agosto',
                                                'september' => 'Septiembre', 'october' => 'Octubre', 'november' => 'Noviembre', 'december' => 'Diciembre'
                                                ] as $key => $label)
                                                <option value="{{ $key }}">{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        

                                        <div class="form-group mb-2">
                                            <label class="w-100 d-flex justify-content-between">
                                                <strong>Elige el enganche</strong>
                                                <strong>$<span id="down-payment">{{ number_format($property->propertyType->price_january * 0.35, 2) }}</span> <small>MXN</small></strong>
                                            </label>
                                            <input id="advance-range" type="range" min="35" max="90" value="35" class="form-control-range quote-input">
                                            <div class="text-center">
                                                <span id="advance-value">35</span>%
                                            </div>
                                            <input type="hidden" name="advance_percentage" id="advance-percentage" value="35">
                                        </div>

                                        <div class="form-group mb-2">
                                            <label class="w-100 d-flex justify-content-between">
                                                <strong>Apartado no reembolsable</strong>
                                                <strong>$30,000.00 <small>MXN</small></strong>
                                            </label>
                                        </div>

                                        <div class="form-group mb-2">
                                            <label class="w-100 d-flex justify-content-between">
                                                <strong>Total inicial (enganche + apartado)</strong>
                                                <strong>$<span id="initial-total">0.00</span> <small>MXN</small></strong>
                                            </label>
                                        </div>

                                        <div class="form-group mb-2">
                                            <label class="w-100 d-flex justify-content-between">
                                                <strong>Pago hasta en 48 mensualidades</strong>
                                                <strong>$<span id="monthly-payment">0.00</span> <small>MXN</small></strong>
                                            </label>
                                        </div>



                                        

                                        <a href="#" class="app-generate-quote btn btn-default secondary-btn mt-5 d-block w-100">Siguiente</a>
                                    </div>

                                    <div id='data-section' class="d-none mt-4">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="input text required form-group">
                                                    <label for="QuoteName" class="mb-0 control-label">Nombre*</label>
                                                    <input name="name" maxlength="255" class="form-control" type="text" id="QuoteName" required />
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="input text form-group">
                                                    <label for="QuoteLastName" class="mb-0 control-label">Apellido*</label>
                                                    <input name="last_name" class="form-control" type="text" id="QuoteLastName" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="input text required form-group">
                                            <label for="QuoteEmail" class="mb-0 control-label">Correo electrónico*</label>
                                            <input name="email" maxlength="255" class="form-control" type="email" id="QuoteEmail" required />
                                        </div>

                                        <div class="form-group">
                                            <style>
  select {
    font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
  }
</style>
  <label class="control-label">Teléfono*</label>
  <div style="display: flex; gap: 0.5rem;">
    <select name="country_code" class="form-control" required style="max-width: 150px;">
  <option value="+52">🇲🇽 México (+52)</option>
  <option value="+1">🇺🇸 USA (+1)</option>
  <option value="+1">🇨🇦 Canadá (+1)</option>
  <option value="+49">🇩🇪 Alemania (+49)</option>
  <option value="+54">🇦🇷 Argentina (+54)</option>
  <option value="+61">🇦🇺 Australia (+61)</option>
  <option value="+55">🇧🇷 Brasil (+55)</option>
    <option value="+56">🇨🇱 Chile (+56)</option>
  <option value="+86">🇨🇳 China (+86)</option>
   <option value="+57">🇨🇴 Colombia (+57)</option>
  <option value="+34">🇪🇸 España (+34)</option>
  <option value="+33">🇫🇷 Francia (+33)</option>
  <option value="+44">🇬🇧 Inglaterra (+44)</option>
  <option value="+81">🇯🇵 Japón (+81)</option>
  <option value="+51">🇵🇪 Perú (+51)</option>
  <option value="+7">🇷🇺 Rusia (+7)</option>
</select>

    <input type="tel" name="phone_number" class="form-control" placeholder="Número" required />
  </div>
</div>



                                        <div class="input text required form-group">
    <label for="QuoteLocation" class="mb-0 control-label">¿Desde qué país o estado nos contacta?*</label>
    <input name="location" maxlength="255" class="form-control" type="text" id="QuoteLocation" required />
</div>

<div class="input select required form-group">
    <label for="QuoteBroker" class="mb-0 control-label">¿Es broker?*</label>
    <select name="is_broker" class="form-control" id="QuoteBroker" required>
        <option value="">Seleccione una opción</option>
        <option value="Sí">Sí</option>
        <option value="No">No</option>
    </select>
</div>

<div class="input select required form-group">
    <label for="QuoteIntent" class="mb-0 control-label">¿Cuál es su intención de compra?*</label>
    <select name="purchase_intent" class="form-control" id="QuoteIntent" required>
        <option value="">Seleccione una opción</option>
        <option value="Invertir">Invertir</option>
        <option value="Vivir">Para vivir</option>
        <option value="Desarrollar">Desarrollar</option>
    </select>
</div>


                                        <div class="form-group">
                                            <button type="submit" class="btn btn-default secondary-btn mt-5 d-block w-100">
                                                <span class="btn-content">Generar cotización</span>
                                                <span class="btn-load-text d-none">
                                                    <i class="fas fa-spinner fa-spin"></i> Procesando
                                                </span>
                                            </button>
                                        </div>
                                    </div>

                                    
                                </form>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        updateDownPayment();

        const phoneInput = document.querySelector("#QuotePhone");

        window.intlTelInput(phoneInput, {
            initialCountry: "auto",
            separateDialCode: true, // <-- ✅ Esto separa el código en un select bonito
            geoIpLookup: function (callback) {
                fetch("https://ipapi.co/json")
                    .then(res => res.json())
                    .then(data => callback(data.country_code))
                    .catch(() => callback("mx"));
            },
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
        });
    });
</script>


                                <script>
                                    const priceMap = {
        @foreach ([
            'january', 'february', 'march', 'april', 'may', 'june',
            'july', 'august', 'september', 'october', 'november', 'december'
        ] as $key)
            "{{ $key }}": {{ $property->propertyType->{'price_'.$key} ?? 0 }},
        @endforeach
    };

                                    const monthSelect = document.getElementById('month-select');
                                    const priceOutput = document.getElementById('price-output');
                                    const priceInput = document.getElementById('QuotePrice');
                                    const downPayment = document.getElementById('down-payment');
                                    const advanceRange = document.getElementById('advance-range');
                                    const advanceValue = document.getElementById('advance-value');
                                    const advancePercentage = document.getElementById('advance-percentage');

                                    function updateDownPayment() {
    const month = monthSelect.value;
    const price = priceMap[month] || 0;
    const percentage = parseInt(advanceRange.value, 10);

    // Calcula enganche
    const enganche = price * (percentage / 100);
    const apartado = 30000;
    const inicial = enganche + apartado;
    const restante = price - enganche; // solo descuenta el enganche
    const mensualidad = restante > 0 ? (restante / 48) : 0;

    // Actualiza valores visuales
    priceOutput.textContent = price.toLocaleString('es-MX', { minimumFractionDigits: 2 });
    downPayment.textContent = enganche.toLocaleString('es-MX', { minimumFractionDigits: 2 });
    advanceValue.textContent = percentage;
    advancePercentage.value = percentage;
    priceInput.value = price;

    document.getElementById('initial-total').textContent = inicial.toLocaleString('es-MX', { minimumFractionDigits: 2 });
    document.getElementById('monthly-payment').textContent = mensualidad.toLocaleString('es-MX', { minimumFractionDigits: 2 });
}



                                    monthSelect.addEventListener('change', updateDownPayment);
                                    advanceRange.addEventListener('input', updateDownPayment);

                                    document.addEventListener('DOMContentLoaded', function () {
        updateDownPayment();
    });
                                    
                                </script>



                                <div class="app-property-conditions secondary-text mt-5">
                                    <ul>
                                        <li>Ningún ofrecimiento tendrá validez sin estar especificado por escrito en el contrato de compraventa.</li>
                                        <li>Para apartar una ubicación es necesario contar con el depósito del apartado.
                                        </li>
                                        <li>Los precios están sujetos a cambio sin previo aviso.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>








<div class="modal fade property-quote-modal" id="propertyResultQuestion" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class='pt-3 px-3 secondary-bg text-right'>
                <a href="#" data-dismiss="modal" class="btn-circle-dark no-print"><img src="{{ asset('assets/icons/close.png') }}" width="19px" alt="" />
                </a>
            </div>

            <div class="modal-body p-0">
                <div class="section-result-cuestion pb-5 pt-3 secondary-bg">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6 col-xl-7 d-flex">

                           

                                    <img src="{{ asset('storage/' .  $property->propertyType->image) }}" class="img-fluid mx-auto" alt="{{  $property->propertyType->name }}">

                            </div>
                            <div class="col-lg-6 col-xl-5 secondary-text mt-3 align-self-center">
                                <h2>Encontramos un lote para ti.</h2>
                                <h3>¡Gracias por contarnos cómo sería tu lote ideal!</h3>

                                <div>Evaluamos varias opciones y esta es la que mejor se adapta a lo que estás buscando.</div>

                                <div class="lot-name mt-4">
                                </div>

                                <a href="#" class="btn btn-default main-btn px-5 rounded-pill status mt-3 status">DISPONIBLE</a>
                                <!-- <div class="address mt-3">Calle 5, No. 88</div> -->
                                <div class="mt-3"><span class="meters">359.05</span><span>m2</span>
                                </div>
                                <div class="price">$606,794 MXN </div>

                                <div class="d-flex flex-column flex-md-row justify-content-between mt-5">
                                    <a href="#" class="btn btn-default secondary-btn px-4 mb-4 mb-md-0 mr-md-4 d-flex align-items-center">COTIZAR</a> <a href="inicio.html" class="btn btn-default secondary-btn px-4 d-flex align-items-center">NUEVA BÚSQUEDA</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!--
<div class="bg-gray-100 py-10">
    <div class="max-w-7xl mx-auto px-4">
        <h1 class="text-4xl font-bold text-center mb-4">{{ $fractional->name }}</h1>
        <p class="text-center text-gray-600 mb-10">{{ $fractional->description }}</p>

        <div class="relative overflow-hidden border rounded-lg shadow-lg">
            <img src="{{ asset('storage/' . $fractional->image->path) }}"
                        alt="{{ $fractional->image->alt }}"
                        class="w-48 h-48 object-cover rounded border-2 border-blue-600 shadow">
                </div>

            <div class="absolute inset-0 pointer-events-none">
                <svg viewBox="0 0 1000 1200" class="w-full h-full" preserveAspectRatio="xMidYMid meet">
                    @foreach ($properties as $property)
                        <polygon
                            class="cursor-pointer transition duration-300 ease-in-out"
                            points="{{ $property->svg_code }}"
                            fill="{{ match($property->status) {
                                'available' => '#49b678',
                                'reserved' => '#cec93b',
                                'sold'     => '#c40e0e',
                                default    => '#999999'
                            } }}"
                            opacity="0.6"
                            stroke="#000"
                            stroke-width="1"
                            data-name="{{ $property->name }}"
                            data-price="{{ number_format($property->price, 2) }}"
                            data-type="{{ $property->propertyType->name }}"
                            data-code="{{ $property->code }}"
                            onclick="window.location.href='{{ route('properties.public', $property) }}'"
                        ></polygon>
                    @endforeach
                </svg>
            </div>
        </div>

        <div class="mt-6 text-center">
            <p class="text-sm text-gray-500 mb-2">Haz clic en una propiedad para ver más detalles</p>
        </div>

        <div class="mt-10 flex justify-center space-x-4 text-sm">
            <div class="flex items-center space-x-2"><span class="w-4 h-4 bg-green-500 inline-block rounded-sm"></span> <span>Disponible</span></div>
            <div class="flex items-center space-x-2"><span class="w-4 h-4 bg-yellow-400 inline-block rounded-sm"></span> <span>Apartado</span></div>
            <div class="flex items-center space-x-2"><span class="w-4 h-4 bg-red-600 inline-block rounded-sm"></span> <span>Vendido</span></div>
        </div>
    </div>
</div>

-->
@endsection