Untitled

if (id_project !=undefined && id_project !=0) {
    const url = '/var/alomrane/storage/images/media/projets2/';
    var currentLanguage = document.documentElement.lang;
    var imm_selected_layer = undefined;
    var current_imm_layer = [];
    var translations = {
        fr_FR: {
            Type: "Type",
            'Lot N°': "Lot N°",
            'Libre': "A vendre",
            Titre_foncier: "Titre foncier",
            Prix_unitaire: "Prix unitaire",
            Disponible: "Disponible",
            Non_disponible: "Non disponible",
            'Détail' : "Détail",
            'Surface': "Surface",
            'Affecté': "Affecté",
            'Prix_total': "Prix total",
            'Non commercialisé': "Non encore commercialisé",
            'Espace vert/Foret': "Espace vert/Foret",
            'Parking /Parc aménagé': "Parking /Parc aménagé",
            'Place publique': "Place publique",
            'MAD': "MAD",
            'm²': "m²",
            Produit: "Produit N°",
            Vendu : "Affecté",
            "Avendre" : "A vendre",
            floor : "Etage"
        },
        ar_SA: {
            Type: "نوع",
            'Lot N°': "رقم القطعة الرضية",
            'Libre': "متوفر",
            Titre_foncier: "سند ملكية الأرض",
            Prix_unitaire: "سعر الوحدة",
            Disponible: "متوفر",
            Non_disponible: "غير متوفر",
            'Détail' : "التفاصيل",
            'Surface': "مساحة",
            'Affecté': "مخصص",
            'Prix_total': "الثمن الجملي",
            'Non commercialisé': "غير مسوق",
            'Espace vert/Foret': "مساحة خضراء / غابة",
            'Parking /Parc aménagé': "موقف سيارات / حديقة ذات مناظر طبيعية",
            'Place publique': "مكان عمومي",
            'MAD': "درهم",
            'm²': "متر مربع",
            Produit: "رقم المنتج°",
        },
        en_US: {
            Type: "Type",
            'Lot N°': "Lot N°",
            'Libre': "A vendre",
            Titre_foncier: "Titre foncier",
            Prix_unitaire: "Prix unitaire",
            Disponible: "Disponible",
            Non_disponible: "Non disponible",
            'Détail' : "Détail",
            'Surface': "Surface",
            'Affecté': "Affecté",
            'Prix_total': "Prix total",
            'Non commercialisé': "Non encore commercialisé",
            'Espace vert/Foret': "Espace vert/Foret",
            'Parking /Parc aménagé': "Parking /Parc aménagé",
            'Place publique': "Place publique",
            'MAD': "MAD",
            'm²': "m²",
            Produit: "Produit N°",
        },
        am_ma: {
            Type: "Type",
            'Lot N°': "Lot N°",
            'Libre': "A vendre",
            Titre_foncier: "Titre foncier",
            Prix_unitaire: "Prix unitaire",
            Disponible: "Disponible",
            Non_disponible: "Non disponible",
            'Détail' : "Détail",
            'Surface': "Surface",
            'Affecté': "Affecté",
            'Prix_total': "Prix total",
            'Non commercialisé': "Non encore commercialisé",
            'Espace vert/Foret': "Espace vert/Foret",
            'Parking /Parc aménagé': "Parking /Parc aménagé",
            'Place publique': "Place publique",
            'MAD': "MAD",
            'm²': "m²",
            Produit: "Produit N°",
        }
    };
    const projet2 = {
        "id_projet": id_project,
        "id_filiale": 7,
        "id_ville": 45,
        "nom": "LOTISSEMENT AL HADIKA 2",
        "info": "Le projet Al Hadika vous offre des appartements de haut standing titrés et livrables, dans un cadre exceptionnel.\\n\\nLe projet est situé dans un complexe résidentiel sécurisé, au boulevard Mohamed VI au cSur de la ville de Marrakech.",
        "lat": 34.23290968,
        "lng": -6.632807242,
        "nom_ville": "Kenitra",
        "nom_filaile": "Rabat - Sal\u00e9 - K\u00e9nitra",
        "big_images": [
            "projets/2/images/big/1.jpg",
            "projets/2/images/big/2.jpg",
            "projets/2/images/big/3.jpg"
        ],
        "small_images": [
            "projets/2/images/small/1.jpg",
            "projets/2/images/small/2.jpg",
            "projets/2/images/small/3.jpg"
        ]
    };

    const legendes = [
        {
            text: translations[currentLanguage]["Libre"],
            fillColor: lots_libre_style.fillColor
        },
        {
            text: translations[currentLanguage]["Affecté"],
            fillColor: lots_vendu_style.fillColor
        },
        {
            text: translations[currentLanguage]["Non commercialisé"],
            fillColor: lots_other_project.fillColor
        }

    ];

    const legendBody = document.querySelector(".legend-body");
    legendes.forEach(({ text, fillColor }, index) => {
        const legendItem = document.createElement("div");
        const legendBall = document.createElement("div");
        const legendText = document.createElement("p");
        legendItem.classList.add("legend-item")
        legendBall.classList.add("legend-ball")
        legendText.classList.add("legend-text")
        legendItem.append(legendBall);
        legendItem.append(legendText);
        legendText.textContent = text;
        legendBall.style.backgroundColor = fillColor;
        legendBody.append(legendItem);

    })

    function loadProject(projet, lot = undefined, imm = undefined) {
        let lotFound = false;

        current_projet = projet;
        current_lots_layer = [];
        current_voirie_layer = [];
        current_places_layer = [];
        current_imm_layer = [];

        current_lots_layer.forEach(layer => {
            layer.remove();
        });
        current_voirie_layer.forEach(layer => {
            layer.remove();
        });
        current_places_layer.forEach(layer => {
            layer.remove();
        });
        current_imm_layer.forEach(layer => {
            layer.remove();
        });

        var geojson = new L.GeoJSON.AJAX(`${url}${projet.id_projet}/geojson/lots.geojson`, {

            onEachFeature: function (feature, layer) {
                var c_lot_data = undefined;
                layer.setStyle(lots_other_project);
                var popup_html = `<div class="tooltip-base" >
                    <b ><i class="fa-solid fa-layer-group"></i>${translations[currentLanguage]["Non commercialisé"]}</b>
                </div>`;
                lots_data.forEach(lot_data => {
                    if (lot_data.code_produit_sap == feature.properties.code_produit_sap) {

                        c_lot_data = lot_data;
                        if (lot_data.etat_stock == "Libre") {
                            layer.setStyle(lots_libre_style);
                        }
                        if (lot_data.etat_stock != "Libre") {
                            layer.setStyle(lots_vendu_style);
                        }
                    }
                });
                if (c_lot_data) {
                    var url_lot = '';

                    url_lot = `<a class="leaflet-btn btn-green" href="/project/consistency/goods/${c_lot_data.id_url_lot}">${translations[currentLanguage]["Détail"]}</a>`;
                    var total_price = `<b ><span class="icon icon-right-chevron"></span>&nbsp${translations[currentLanguage]['Prix_total']} :  ${c_lot_data.prix_total} ${translations[currentLanguage]["MAD"]}</b>`;
                    layer.text = c_lot_data.num_lot;
                    if (c_lot_data.etat_stock == 'Libre') {
                        var popup_html = `<div class="tooltip-lot-card"> 
                           <div class="tooltip-lot-header">
                            <b>${translations[currentLanguage]['Lot N°']} : ${c_lot_data.num_lot}</b>
                            <b class="status-lot" style="background-color :${layer.options.fillColor}"><b >${translations[currentLanguage][c_lot_data.etat_stock]}</b></b>
                           </div> 
                            <b ><span class="icon icon-right-chevron"></span>&nbsp${translations[currentLanguage]['Type']} : ${c_lot_data.type}</b>
                            
                            <b ><span class="icon icon-right-chevron"></span>&nbsp${translations[currentLanguage]['Surface']} : ${c_lot_data.surface} m²</b>
                            <b ><span class="icon icon-right-chevron"></span>&nbsp${translations[currentLanguage]['Titre_foncier']} : ${c_lot_data.tf ? translations[currentLanguage]['Disponible']  : translations[currentLanguage]["Non_disponible"]}</b>
                              
                            ${total_price}
                          ${url_lot} </div>`;

                    }
                    if (c_lot_data.etat_stock != 'Libre') {
                        var popup_html = `<div class="tooltip-lot-card"> 
                           <div class="tooltip-lot-header">
                            <b>${translations[currentLanguage]['Lot N°']} : ${c_lot_data.num_lot}</b>
                            <b class="status-lot" style="background-color :${layer.options.fillColor}"><b >${translations[currentLanguage]['Affecté']}</b></b>
                           </div></div>`
                    }

                    // if (c_lot_data.type != "Lots RDC habitation" || c_lot_data.etat_stock != "Libre" )

                }
                layer.bindPopup(popup_html, {
                    minWidth: 200
                });
                layer.addTo(map);

                layer.on('click', function () {
                    select_lot(layer);
                });

                /*if (lot != undefined) {
                    if (lot == c_lot_data.num_lot) {
                        if (c_lot_data.type == "Lots RDC habitation") window.location.href = "https://bendata.ma/omrane/index.php";
                        layer.openPopup();
                    }
                }*/
                current_lots_layer.push(layer);

            },
        })

        var imm_geojson = new L.GeoJSON.AJAX(`${url}${projet.id_projet}/geojson/imm.geojson`, {
              onEachFeature: function (feature, layer) {
                  layer.setStyle(imm_style);
                  var all_app = 0;
                  var imm_libre = 0;
                  lots_data.forEach(lot_data=> {
                      if (lot_data.id_imm === feature.properties.id_imm) {
                          all_app++;
                          if(( lot_data.etat_stock == "Libre" || lot_data.etat_stock == "LIBRE")){
                              imm_libre++;
                          }
                      }

                  });
                  var getDomainName = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
                  if(all_app != 0 && imm_libre != 0 ){
                      var icon = L.icon({
                          iconUrl: getDomainName+"/immeubles/marker/"+feature.properties.id_imm+"/"+all_app,
                          iconSize: [74, 140],
                          iconAnchor: [37, 140],
                          popupAnchor: [15, -34],
                      });
                      L.marker(layer.getBounds().getCenter(), {
                          icon: icon,
                          interactive: false,
                      }).addTo(map);



                  current_imm_layer.push(layer);

                  if (imm != undefined) {

                      imm_selected_layer = layer;
                      if (imm == feature.properties.id_imm) {
                          layer.setStyle(imm_selected_style);
                      }

                  }

                  layer.addTo(map);
                  layer.on("click", () => {
//get name immeuble
                    var  id_immeuble = feature.properties.id_imm;
                    var nom_imm = " ";

                    if (id_immeuble.toString().indexOf("100") == 0) {
                         nom_imm = "Immeuble A"
                      }
                      if (id_immeuble.toString().indexOf("200") == 0) {
                          nom_imm = "Immeuble B"
                      }
                      if (id_immeuble.toString().indexOf("300") == 0) {
                          nom_imm = "Immeuble C"
                      }
                      if (id_immeuble.toString().indexOf("400") == 0) {
                          nom_imm = "Immeuble D"
                      }
                      if (id_immeuble.toString().indexOf("500") == 0) {
                          nom_imm = "Immeuble E"
                      }
                      if (id_immeuble.toString().indexOf("600") == 0) {
                          nom_imm = "Immeuble F"
                      }
                      if (id_immeuble.toString().indexOf("700") == 0) {
                          nom_imm = "Immeuble G"
                      }
                      if (id_immeuble.toString().indexOf("800") == 0) {
                          nom_imm = "Immeuble H"
                      }
                      if (id_immeuble.toString().indexOf("900") == 0) {
                          nom_imm = "Immeuble I"
                      }
                      if (id_immeuble.toString().indexOf("1000") == 0) {
                          nom_imm = "Immeuble J"
                      }
                      if (id_immeuble.toString().indexOf("1100") == 0) {
                          nom_imm = "Immeuble K"
                      }
                      if (id_immeuble.toString().indexOf("1200") == 0) {
                          nom_imm = "Immeuble L"
                      }
                      if (id_immeuble.toString().indexOf("1300") == 0) {
                          nom_imm = "Immeuble M"
                      }

                      if (id_immeuble.toString().indexOf("1400") == 0) {
                          nom_imm = "Immeuble N"
                      }
                      //get number bien vendu
                      var num_vendu = 0;
                      var num_libre = 0;
                      lots_data.forEach(lot_data=> {
                          if(lot_data.id_imm === id_immeuble){
                              if (
                                  lot_data.etat_stock == "Vendu" ||
                                  lot_data.etat_stock == "VENDU"
                              ) {
                                  num_vendu++;
                              }
                              if (
                                  lot_data.etat_stock == "Libre" ||
                                  lot_data.etat_stock == "LIBRE"
                              ) {
                                  num_libre++;
                              }
                          }
                      }
                      );
                      if (nom_imm.length != 0) {
                          $name_imm = '<label style="font-size: 14px; font-weight: 700; text-align: left; padding-left:4px" class="col-6 col-form-label">Immeuble : ${nom_imm}</label>';
                      } else {
                          $name_imm = '<label style="font-size: 14px; font-weight: 700; text-align: center; padding-left:4px" class="col-6 col-form-label">${projet.nom}</label>';

                      }

                      lots_list_html = `
                                            <div class="form-group row" style="margin: unset">
                                            ${name_imm}
                                            </div>
            
                                            <div class="form-group row" style="margin: unset">        
                                            <label style="padding-left:4px ; font-size: 14px; font-weight: 700; " class="col-2 col-form-label">${translations[currentLanguage]['Vendu']} :</label>
                                            <label style="padding-left: 4px; font-size: 14px;font-weight: 700;" class="col-2 col-form-label">${num_vendu}</label>
        
        
                                            <label style="padding-left:4px; font-size: 14px; font-weight: 700;" class="col-2 col-form-label">${translations[currentLanguage]['Avendre']} :</label>
                                            <label style="padding-left: 4px; font-size: 14px; font-weight: 700;" class="col-2 col-form-label">${num_libre}</label>
        
                                            </div>
                                            <hr>
                                         
                                            <ul style="height:400px;overflow-y: auto;overflow-x: hidden; padding : 0px 27px">`;

                      lots_data.forEach(lot_data => {
                          var floor_imm = " ";
                          if (lot_data.floor.length != 0) {
                              floor_imm =` ${translations[currentLanguage]['floor']} : ${lot_data.floor} `;
                          }
                          if(lot_data.id_imm === id_immeuble){

                              var row = `<a class="item" href="/project/consistency/goods/${lot_data.id_url_lot}"><div class="row lot_row libre" id_projet="${lot_data.id_projet}"  id_lot="${lot_data.id_lot}" >
                                                    <div class="left-side">

                                                        <span style="font-weight: 700;">${translations[currentLanguage]['Produit']} :  ${lot_data.num_lot}</span>
                                                        <span>${translations[currentLanguage]['Type']} : ${lot_data.type}</span>
                                                        <span>${translations[currentLanguage]['Prix_total']} :  ${lot_data.prix_total}  ${translations[currentLanguage]["MAD"]}</span>
                                                     
                                                    </div>

                                                    <div class="right-side">
                                                        <span>${translations[currentLanguage]['Surface']} : ${lot_data.surface} m²</span>
                                                        <span> ${floor_imm}</span>
                                                    </div>
                                                    </div></a>`;


                              var rowMbile = ` <a class="item" href="/project/consistency/goods/${lot_data.id_url_lot}"><div style=" " class="row lot_row libre" id_projet="${lot_data.id_projet}"  id_lot="${lot_data.id_lot}" >
                                                   <table  style="width: 100%;border: none;">
                                                    <tbody>
                                                    <tr>
                                                    <td style="font-weight: 700;width: 402px;font-size: 14px;"><b>${translations[currentLanguage]['Produit']} :  ${lot_data.num_lot}</b></td>
                                                    </tr>
                                                    <tr>
                                                    <td style="width: 402px;font-size: 14px;">${translations[currentLanguage]['Type']} : ${lot_data.type}</td>
                                                    </tr>
                                                    <tr>
                                                    <td style="width: 402px;font-size: 14px;">${translations[currentLanguage]['Prix_total']} :  ${lot_data.prix_total}  ${translations[currentLanguage]["MAD"]}</td>
                                                    </tr>
                                                    <tr>
                                                    <td style="width: 402px;font-size: 14px;">${translations[currentLanguage]['Surface']} : ${lot_data.surface} m²</td>
                                                    </tr>
                                                    <tr>
                                                    <td style="width: 402px;font-size: 14px;">${floor_imm}</td>
                                                    </tr>                                               
                                                    </tbody>
                                                    </table>                                
                                 
                                                    </div></a>`;
                              if(( lot_data.etat_stock == "Libre" || lot_data.etat_stock == "LIBRE")) {

                                  if (window.innerWidth < 767) {
                                      lots_list_html += `<li>${rowMbile}</li>`;
                                  } else {
                                      lots_list_html += `<li>${row}</li>`;
                                  }
                              }
                          }
                      });

                      lots_list_html += "</ul>";

                      Swal.fire({
                          title: "",
                          html: lots_list_html,
                          showCloseButton: true,
                          showCancelButton: false,
                          showConfirmButton: false,
                          focusConfirm: false,
                      });


                  });
                  }
              },
          }
        );

        var voirie_geojson = new L.GeoJSON.AJAX(`${url}${projet.id_projet}/geojson/voirie.geojson`, {
            onEachFeature: function (feature, layer) {

                layer.setStyle(voirie_style);
                var popup_html = `<div class="tooltip-base" >
                    <b ><i class="fa-solid fa-layer-group"></i>&nbsp${feature.properties.description}</b>
                </div>`;

                layer.bindPopup(popup_html, {
                    minWidth: 200
                });
                layer.addTo(map);
            },
        })

        var places_geojson = new L.GeoJSON.AJAX(`${url}${projet.id_projet}/geojson/places.geojson`, {
            onEachFeature: function (feature, layer) {

                if (feature.properties.description == "Espace vert") {
                    layer.setStyle(espace_vert_style);
                }
                if (feature.properties.description == "Parking /Parc aménagé") {
                    layer.setStyle(parking_style);
                }
                if (feature.properties.description == "Place publique") {
                    layer.setStyle(place_public_style);
                }
                if (feature.properties.description == "Zone non aedificandi") {
                    layer.setStyle(zone_non_aedificandi_style);
                }
                if (feature.properties.description == "Enclave") {
                    layer.setStyle(Enclave_style);
                }
                if (feature.properties.description == "Forêt") {
                    layer.setStyle(Foret_style);
                }


                var popup_html = `<div class="tooltip-base" >
                             <b ><i class="fa-solid fa-layer-group"></i>&nbsp${feature.properties.description}</b>
                        </div>`;

                layer.bindPopup(popup_html, {
                    minWidth: 200
                });


                layer.addTo(map);

            },
        })

        geojson.on('data:loaded', function () {
            if(!lot)
            { map.fitBounds(geojson.getBounds(), {
                maxZoom: 14,
            });}
            map.flyToBounds(geojson.getBounds());
        });
        imm_geojson.on("data:loaded", function () {
            { map.fitBounds(imm_geojson.getBounds(), {
                maxZoom: 14,
            });}
            map.flyToBounds(imm_geojson.getBounds())
        });




    }

    var last_selection_layer = undefined;
    function select_lot(layer) {
        if (last_selection_layer != null) {
            last_selection_layer.remove();
        }
        last_selection_layer = L.geoJSON(layer.toGeoJSON());
        last_selection_layer.setStyle(selection_style);
        last_selection_layer.addTo(map);
    }
    const inputSearch = document.getElementById("input-map-search");
    const autoCompleteContainer = document.getElementById("autocomplete-container")
    const autoCompleteSearch = (lotNumber) => {
        autoCompleteContainer.style.display = "none";
        autoCompleteContainer.innerHTML = "";
        const splittedLotNumber = lotNumber.split("");
        $.ajax({
            url: `${url}${projet.id_projet}/geojson/lots.geojson`,
            type: 'get',
            dataType: 'json',
            success: function ({features}) {
                const lotIds = features.map(({ properties: { code_produit_sap } }) => code_produit_sap)
                const searchedLot = lots_data.filter(({ code_produit_sap }) => lotIds.includes(code_produit_sap));
                const filteredLotData =  searchedLot.filter(({ num_lot }) => {
                    const splittedNumLot = num_lot.split("");
                    return splittedNumLot.every((lotNumber) => splittedLotNumber.includes(lotNumber))
                })
                let isLotFound = false;

                filteredLotData.map(({num_lot}) => {
                    const filteredBtn = document.createElement("button");
                    filteredBtn.classList.add("filtred-btn");
                    autoCompleteContainer.style.display = "flex";
                    filteredBtn.textContent = `Lot N° : ${num_lot}`;
                    if (num_lot == lotNumber) {
                        isLotFound = true;
                        filteredBtn.setAttribute("id", "selected-filtred-btn");
                    }
                    autoCompleteContainer.append(filteredBtn);
                    filteredBtn.addEventListener("click", (e) => {

                        const oldSelectedFilter = document.getElementById("selected-filtred-btn");
                        oldSelectedFilter?.removeAttribute("id");

                        e.target.setAttribute("id", "selected-filtred-btn");
                        inputSearch.value = num_lot;
                    })
                })
                const errorMessage = document.getElementById("error-search");
                if (!isLotFound && inputSearch.value.length!==0 ) {
                    errorMessage.textContent = "This Lot is not found";
                } else {
                    errorMessage.textContent = "";
                }
            }
        });
    }
    loadProject(projet2);
}