@extends('web.layouts.main')
@section('content')

  <main>
        <!-- ----------  inner header ----------- -->   
        
        @include('web.pages.components.headerNav')

        <!-- ---------- privacy_page_section page ----------- -->   
        <section class="order_complete section_padding bg-light">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <form method="get" action="{{url(getCurrentLocale().'/order/step/2')}}">
                        <div class="wh_card mb-5">
                            <h4 class="mb-4"> {{__('web.select_address')}} </h4>
                                <div class="form-group">
                                    <label for=""> {{__('web.address_saved_before')}} </label>
                                    <select name="address_id" class="form-control form-select bg-light mt-2">
                                        <option selected disabled>{{__('web.select')}}</option>
                                        @foreach($addresses as $row)
                                            <option value="{{$row->id}}">{{$row->street}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="butns inFlex mt-5 justify-content-center">
                                    <a href="#" class="butn mx-1"  data-bs-toggle="modal" onclick="createAddress()" data-bs-target="#addLocModal">
                                        <span>{{__('web.add_address')}}</span>
                                    </a>
                                </div>
                        </div>
                        
                        <div class="wh_card mb-5">
                            <h4 class="mb-4"> {{__('web.delivery_type')}} </h4>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" checked name="delivery_type" id="inlineRadio1" value="semsa">
                                <label class="form-check-label" for="inlineRadio1">
                                    {{__('web.delivery_semsa')}}
                                </label>
                              </div>
                              <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="delivery_type" id="inlineRadio2" value="aramex">
                                <label class="form-check-label" for="inlineRadio2">
                                   {{__('web.delivery_aramex')}}
                                </label>
                              </div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="butn py-3 px-5">
                                <span> {{__('web.continue_order')}} </span>
                            </button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
   <div class="modal editProfModal fade" id="addLocModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{__('web.add_address')}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="add_adress_tab" id="createAddress">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    
@push('js')
 <script>
 
        function createAddress()
        {
            $.ajax
            ({
              url : {!! json_encode(url(getCurrentLocale().'/createAddress')) !!},
              type: 'GET',              
              data: '',   
              success:function(data)
              {
                    $('#createAddress').html(data);
                    
    var latlng = new google.maps.LatLng({!! $product ?? ''  && $product->id ? $product->latlng : '21.4989, 39.2509' !!});
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
let infoWindow;


  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");
    locationButton.setAttribute("type", "button");  
  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          new google.maps.Marker({
                position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                map: map,
                title: 'Set lat/lon values for this property',
                draggable: true
            });
          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
    
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Set lat/lon values for this property',
        draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
        console.log(a);
        var div = document.createElement('div');
        div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
        document.getElementsByTagName('body')[0].appendChild(div);
         $("#latlng").val(function() {
    return  div.innerHTML;

    
});

    });
              }
            })
        }
        
        $(".bankTransfer-form").hide();

        $('input[type="radio"]').click(function() {
            if ($(this).attr("value") == "bankTransfer") {
                $(".bankTransfer-form").show();
            } else {
                $(".bankTransfer-form").hide();
            }
        });
    </script>
    <script>
        $('#companyFile #chooseFile').bind('change', function () {
            var filename = $("#chooseFile").val();
            if (/^\s*$/.test(filename)) {
                $("#companyFile").removeClass('active');
                $("#companyFile #noFile").text("No file chosen..."); 
            }
            else {
                $("#companyFile").addClass('active');
                $("#companyFile #noFile").text(filename.replace("C:\\fakepath\\", "")); 
            }
        });
    </script>

<script>
        
    $(document).ready(function() {

        // ------------  File upload BEGIN ------------
        $('.file__input--file').on('change', function(event) {
            var files = event.target.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                $("<div class='file__value'> <img src='images/icons/img_upload.svg' alt=''> <div class='file__value--text'>" + file.name + "</div><div class='file__value--remove' data-id='" + file.name + "' ></div></div>").appendTo('.file__value_content');
            }
        });

        //Click to remove item
        $('body').on('click', '.file__value', function() {
            $(this).remove();
        });
        // ------------ File upload END ------------ 

    });
</script>
    
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    
   
    var latlng = new google.maps.LatLng(position.coords.latitude , position.coords.longitude);
      $("#mylatlng").val(function() {
    return  latlng;

    
});
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
let infoWindow;


  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");
    locationButton.setAttribute("type", "button");  
  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          new google.maps.Marker({
                position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                map: map,
                title: 'Set lat/lon values for this property',
                draggable: true
            });
          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
    
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Set lat/lon values for this property',
        draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
        console.log(a);
        var div = document.createElement('div');alert(div);
        div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
       
        

    });
}

</script>

@endpush
@stop