<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>

<!-- Load Esri Leaflet from CDN -->
 <script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"
    integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
    crossorigin=""></script>


<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.2.14/dist/esri-leaflet-geocoder.css"
    integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ=="
    crossorigin="">
<script src="https://unpkg.com/esri-leaflet-geocoder@2.2.14/dist/esri-leaflet-geocoder.js"
    integrity="sha512-uK5jVwR81KVTGe8KpJa1QIN4n60TsSV8+DPbL5wWlYQvb0/nYNgSOg9dZG6ViQhwx/gaMszuWllTemL+K+IXjg=="
    crossorigin=""></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<style>
    .popupGoit .leaflet-popup-content-wrapper {
        border-radius: 16px !important;
    }

    .popupGoit .leaflet-popup-content-wrapper .leaflet-popup-content {
        width: 251px !important;
        overflow: hidden; 
    }

    .popupGoit .leaflet-popup-tip-container {
    }

    select{
        width: 98px;    
    }

    input{
        width: 98px;
    }

    .component{
        padding-bottom: 2px;
        padding-top: 2px;
    }

    /** SPINNER CREATION **/
    .loader {
        position: relative;
        text-align: center;
        margin: 15px auto 35px auto;
        z-index: 9999;
        display: block;
        width: 80px;
        height: 80px;
        border: 10px solid rgba(0, 0, 0, .3);
        border-radius: 50% !important;
        border-top-color: #000;
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    .modal-dialog{
        top: 35%;
        opacity: 0.9;
    }

    .modal-content {
        border-radius: 25px !important;
        box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.7);
    }

    .resultCotization{
        text-align: right;
    }   
    .formNumber{
        text-align: right;
        height: 30px !important;
    }
</style>

<div class="row">
    <div class="col-md-12">
        <div id="mapid" style="height: 720px; z-index: 4;"></div>
    </div>
</div>
 <div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="loading">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="loader"></div>
            </div>
        </div>
    </div>
</div>

<script>
    let geomap = L.map('mapid').setView([19.432742128548597, -99.1333293914795], 12);
    let mapLayer = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png ', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    });
    let marker = false;
    let status_cat_tipo_inmueble=false;
    let status_cve_clase_inmueble=false;
    let enable_Button = false;

    mapLayer.addTo(geomap);

    var geocodeService = L.esri.Geocoding.geocodeService();
	function onMapClick(e) {
		geocodeService.reverse().latlng(e.latlng).run(function (error, dir) {
            if(marker){
                geomap.removeLayer(marker)
            }
            status_cat_tipo_inmueble=false;
            status_cve_clase_inmueble=false;
            let html = <?php include('popup.php'); ?>
            marker = L.marker(dir.latlng).addTo(geomap).bindPopup(html, { autoPanPadding: [100, 250], closeButton: false, className: "popupGoit", offset: new L.Point(0, -15) }).openPopup();
		});
    }

    geomap.on('click', onMapClick);

    function clickFunction(){
        $("#loading").modal({
            backdrop: "static", //remove ability to close modal with click
            keyboard: false, //remove option to close with keyboard
            show: true //Display loader!
        });
        setTimeout(() => {            
            var submit_data = new FormData($('form').get(0));
            $.ajax({
                url:"/RIR/index.php/go4it/cotization/",
                data: submit_data,
                cache: false,
                type: "POST",
                dataType: 'json',
                async: true,
                processData: false,
                contentType: false,
                success: function(result){
                    if(result.check==1){
                        $("#loading").modal("hide");
                        if(result.respuesta == "06" || result.respuesta == "09"){
                            $("#step4").hide();
                            $("#result").show();
                            let html = <?php include('popupError.php'); ?>
                            $("#result").html(html)
                        }
                        else{
                            $("#step4").hide();
                            $("#result").show();
                            result.valuacionComercial = new Intl.NumberFormat().format(result.valuacionComercial);
                            result.valorRentaSugerida = new Intl.NumberFormat().format(result.valorRentaSugerida);
                            result.valorDestructible = new Intl.NumberFormat().format(result.valorDestructible);
                            //result.saldoAnterior = new Intl.NumberFormat().format(result.saldoAnterior);
                            //result.costoOperacion = new Intl.NumberFormat().format(result.costoOperacion);
                            //result.saldoActual = new Intl.NumberFormat().format(result.saldoActual);
                            let html = <?php include('popupResult.php'); ?>
                            $("#result").html(html)
                        }
                        console.log(result)
                        
                    }
                },
            });
        }, 1000);
    }

    function cat_tipo_inmueble(){
        status_cat_tipo_inmueble=true;
        if(status_cat_tipo_inmueble && status_cve_clase_inmueble){
            $("#next").prop( "disabled", false );
        }
    }

    function cve_clase_inmueble(){
        status_cve_clase_inmueble=true;    
        if(status_cat_tipo_inmueble && status_cve_clase_inmueble){
            $("#next").prop( "disabled", false );
        }
    }

    function toggleStep(step){
        let elem = $(".contentStep")
        Object.keys(elem).forEach(function (key) {
            if (elem[key].id != undefined && elem[key].id != step){
                $("#" + elem[key].id).hide();
            }
            if (elem[key].id != undefined && elem[key].id == step){
                $("#" + step).show();
            }
        });
    }

    function prevCotization(){
        $("#step4").show();
        $("#result").hide();
    }
</script>