<footer>
    <div class="container">
        <div>
            <div class="row">
                <div class="col-md-4">
                    <a href="" class="mb-20">
                        <img  loading="lazy"  src="<%=infoSite.logo%>" class="logo_footer">
                    </a>
                    <ul class="social-m d-flex mt-4">
                        <% socials.forEach((item)=>{%>
                            <% console.log("linkUrl",item) %>
                            <li><a target="_blank" href="<%=item.linkUrl%>"><i class="fab fa-<%=item.linkName%>"></i></a></li>
                        <%})%>
                    </ul>
                </div>
                <div class="col-md-4">
                    <div>
                        <h6 class="Tfooter"><%=translate.introSite_quickLink%></h6>
                        <ul class="link-footer">
                            <li><i class="fas fa-angle-double-left"></i> <a href="" data-scroll="home"><%=translate.introSite_quickLink%></a></li>
                            <li><i class="fas fa-angle-double-left"></i> <a href="#connect_us" data-scroll="connect_us"><%=translate.introSite_contactUs%></a></li>
                            <!-- <li><i class="fas fa-angle-double-left"></i> <a href="{{url('provider/register')}}">تسجيل</a></li> -->
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <h6 class="Tfooter"><%=translate.introSite_contactUs%></h6>
                    <ul class="link-footer">
                        <li><i class="fas fa-map-marker-alt"></i> <a><%=infoSite.address[lang]%></a></li>
                        <li><i class="fas fa-phone"></i> <a href="tel:<%=infoSite.phoneNo%>"><%=infoSite.phone%></a></li>
                        <li><i class="far fa-envelope"></i> <a href="mailto: <%=infoSite.email%>"><%=infoSite.email%></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="under_footer">
        <p style="display: none" id="DoSendMessage"><%=translate.DoSendMessage%></p>
        <p style="display: none" id="siteSendMessage"><%=translate.siteSendMessage%></p>
        <p style="display: none" id="successSend"><%=translate.successSend%></p>
        <p style="display: none" id="errorSend"><%=translate.errorSend%></p>
        <%=translate.introSite_recives%> <%=infoSite.year%>  <%=translate.introSite_site%> <a href="">  <%= infoSite.name[lang] %>
     </a>
    </div>
</footer>

<!--========================== Start Loading Page ======================-->

<div class="loader">
    <img  loading="lazy"  src="<%=infoSite.loader%>" alt="">
</div>

<!--========================= End Loading Page =========================-->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/infoSite/js/jquery-3.2.1.min.js"></script>
<script src="/admin/app-assets/js/scripts/extensions/sweet-alerts.js"></script>
<script src="/admin/app-assets/vendors/js/extensions/sweetalert2.all.min.js"></script>
<script src="/infoSite/js/popper.min.js"></script>
<script src="/infoSite/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- plugins JS -->
<script src="/infoSite/plugins/owl-carousel/js/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- my JS -->
<script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?key=<%=googleKey%>&libraries=places&language=<%=language%>"></script>
<script src="/infoSite/js/main.js"></script>
<%- include('../../admin/layouts/partials/baseUrl.ejs') %>
<script>

    $('.js-example-basic-multiple').select2({
        placeholder : 'القسم',
        dir: "rtl",
    });

    function readURL(input) {
        console.log("input",input.target.id)
        var id = input.target.id;
        var image = $('#output-img-' + id);
        var link = $('#output-link-' + id);
        if (input.target.files && input.target.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                image.attr('src', e.target.result);
                if (link){
                    link.attr('href', e.target.result);
                }
            }
            reader.readAsDataURL(input.target.files[0])
        }
    }



</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('cform');
        const nameInput = document.getElementById('name');
        const phoneInput = document.getElementById('phone');
        const emailInput = document.getElementById('email');
        const messageInput = document.getElementById('message');
    
        function validateForm() {
            let isValid = true;
    
            if (nameInput.value.trim() === '') {
                nameInput.classList.add('is-invalid');
                isValid = false;
            } else {
                nameInput.classList.remove('is-invalid');
            }
    
            if (phoneInput.value.trim() === '') {
                phoneInput.classList.add('is-invalid');
                isValid = false;
            } else {
                phoneInput.classList.remove('is-invalid');
            }
    
            if (emailInput.value.trim() === '') {
                emailInput.classList.add('is-invalid');
                isValid = false;
            } else {
                emailInput.classList.remove('is-invalid');
            }
    
            if (messageInput.value.trim() === '') {
                messageInput.classList.add('is-invalid');
                isValid = false;
            } else {
                messageInput.classList.remove('is-invalid');
            }
    
            return isValid;
        }
    
        function sendRequest() {
            let successMessage = document.getElementById("successSend").innerText;
            let errorMessage = document.getElementById("errorSend").innerText;
    
            $.ajax({
                url: form.action,
                method: 'POST',
                data: {
                    name: nameInput.value,
                    phone: phoneInput.value,
                    email: emailInput.value,
                    description: messageInput.value
                },
                success: function(response) {
                    Swal.fire(successMessage, {
                        icon: "success",
                    });
                    form.reset();
                },
                error: function (err) {
                    console.log("err", err)
                    Swal.fire({
                        a: console.log(err),
                        icon: 'error',
                        title: `${err?.responseJSON?.message || err.responseJSON || err.message}`,
                        showConfirmButton: false,
                        timer: 1500
                     })
                },
            });
        }
    
        form.addEventListener('submit', function(event) {
            event.preventDefault();
    
            if (validateForm()) {
                let confirmationMessage = document.getElementById("DoSendMessage").innerText;
                let siteSendMessage = document.getElementById("siteSendMessage").innerText;
    
                Swal.fire({
                    title: confirmationMessage,
                    text: siteSendMessage,
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: `<%= i18n.__('contactUs.yes')%>`,
                    cancelButtonText: `<%= i18n.__('contactUs.no') %>`
                }).then((result) => {
                    if (result.value) {
                        sendRequest();
                    }
                });
            }
        });
    
        nameInput.addEventListener('input', () => nameInput.classList.remove('is-invalid'));
        phoneInput.addEventListener('input', () => phoneInput.classList.remove('is-invalid'));
        emailInput.addEventListener('input', () => emailInput.classList.remove('is-invalid'));
        messageInput.addEventListener('input', () => messageInput.classList.remove('is-invalid'));
    });
    </script>
    


<script>
    console.log("fgsdgfgfsgfdgdf")
    window.onload = (event) => {
        getLocation();
    };   
    function getLocation() {
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(showPosition);
         } else {
             alert("يرجى تفعيل اللوكيشن")
         }
     }

     function showPosition(position) {
         console.log("position",position)
         initMap(position.coords.latitude,position.coords.longitude);
         var geocoder = new google.maps.Geocoder;
         document.getElementById("latitude").value   = position.coords.latitude;
         document.getElementById("longitude").value  = position.coords.longitude;
         var latlng = {lat: parseFloat(position.coords.latitude), lng: parseFloat(position.coords.longitude)};
         geocoder.geocode({'location': latlng}, function(results, status) {
             if (status === 'OK') {
                 document.getElementById("address").value  = results[1].formatted_address;
             }
         });
     }

    
     function initMap(lat,lng){
        console.log("lat",lat,"lng",lng);
        
         var latlng    = new google.maps.LatLng(lat, lng);
         var map       = new google.maps.Map(document.getElementById('map'), {
             center    : latlng,
             zoom      : 14,
             animation : google.maps.Animation.DROP,
             mapTypeId : google.maps.MapType
         });
         var input  = document.getElementById('searchTextField');
         map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
         var autocomplete = new google.maps.places.Autocomplete(input);
         autocomplete.bindTo('bounds', map);
         var infowindow = new google.maps.InfoWindow();
         var marker     = new google.maps.Marker({
             position   : new google.maps.LatLng( lat, lng),
             map        : map,
             title      : 'الاحداثيات',
             draggable  : true
             //anchorPoint: new google.maps.Point(0, 0)
         });
         autocomplete.addListener('place_changed', function() {
             infowindow.close();
             marker.setVisible(true);
             var place = autocomplete.getPlace();
             if (place.geometry.viewport) {
                 map.fitBounds(place.geometry.viewport);
             } else {
                 map.setCenter(place.geometry.location);
                 map.setZoom(17);
             }

             marker.setIcon(({
                 url        : place.icon,
                 size       : new google.maps.Size(71, 71),
                 origin     : new google.maps.Point(0, 0),
                 anchor     : new google.maps.Point(17, 34),
                 scaledSize : new google.maps.Size(35, 35)
             }));

             marker.setPosition(place.geometry.location);
             marker.setVisible(true);

             var address = '';
             if (place.address_components) {
                 address = [
                     (place.address_components[0] && place.address_components[0].short_name || ''),
                     (place.address_components[1] && place.address_components[1].short_name || ''),
                     (place.address_components[2] && place.address_components[2].short_name || '')
                 ].join(' ');
             }

             infowindow.setContent('<div style=""><strong>' + place.name + '</strong><br>' + address);
             /* Location details */
             console.log("place",place);
             document.getElementById('address').value   = place.formatted_address;
             document.getElementById('latitude').value  = place.geometry.location.lat();
             document.getElementById('longitude').value = place.geometry.location.lng();
         });
         var geocoder = new google.maps.Geocoder();
         google.maps.event.addListener(marker, 'dragend', function (event) {
             document.getElementById("latitude").value   = this.getPosition().lat();
             document.getElementById("longitude").value  = this.getPosition().lng();
             geocoder.geocode({'latLng': latlng}, function(results, status) {
                 if (status === 'OK') {
                     document.getElementById("address").value  = results[1].formatted_address;
                 }
             });
         });
    }

      
    $(document).on('submit','#createCenterMeta', function(e){

        e.preventDefault(); 

                    
        let confirm  = "<%=translate.send%>";

        const objData  = new FormData(this);

        if($('#output-img-avatar')[0]?.files.length){

            if(!(/(jpg|jpeg|png)$/).test($('#output-img-avatar')[0].files[0].type)){
                Swal.fire({
                    icon: 'error',
                    title: `<%= i18n.__('comon.avatarRequired')%>`,
                    showConfirmButton: false,
                    timer: 1500
                });

                return delete $('#output-img-avatar')[0].files;
                
            }

            $.each($('#output-img-avatar')[0].files, function(i, file) {
                objData.append('avatar', file[0]);
            });

        }

        if($('#output-img-images')[0]?.files.length){

            if(!(/(jpg|jpeg|png)$/).test($('#output-img-images')[0].files[0].type)){
                Swal.fire({
                    icon: 'error',
                    title: `<%= i18n.__('common.imagesRequired')%>`,
                    showConfirmButton: false,
                    timer: 1500
                });

                return delete $('#output-img-images')[0].files;
                
            }

            $.each($('#output-img-images')[0].files, function(i, file) {
                objData.append('images', file[0]);
            });

        }



        ajaxUpload($(this), objData, "uploadWithImage", confirm);  

        });

</script>

</body>

</html>