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


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

        <!-- ---------- register_page page ----------- -->   
        <section class="form_page section_padding bg-light">
            <div class="container">
                <div class="content">
                    <div class="text-center">
                        <div class="logo_login">
                            <img src="{{url('')}}/assets/web/images/logo_login.svg" alt="">
                        </div>
                    </div>
                    <div class="form_box">
                        <form action="{{url(getCurrentLocale().'/regist')}}" enctype="multipart/form-data" onsubmit="saveFormRegist(this)" method="post" class="form_edit">
                            @CSRF
                            <div class="user_img_edit">
                                <div class="container">
                                    <div class="avatar-upload">
                                        <div class="avatar-edit">
                                            <input type='file' name="photo" id="imageUpload" accept=".png, .jpg, .jpeg" />
                                            <label for="imageUpload"></label>
                                        </div>
                                        <div class="avatar-preview">
                                            <div id="imagePreview" style="background-image: url({{url('')}}/assets/web/images/avatar.png);">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.name')}} </label>
                                        <input type="text" name="name" placeholder="{{__('web.write_here')}}..." class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.email')}} </label>
                                        <input type="text" name="email" placeholder="{{__('web.write_here')}}..." class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.phone')}} </label>
                                        <input type="text" onkeypress="return IsNumeric(event);"  name="phone" placeholder=" +966-xxxxxxxx " class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.sport_id')}} </label>
                                        <select name="sport_id" id="sport_type" class="form-select form-control">
                                            <option selected disabled> {{__('web.select')}} </option>
                                            @foreach($sports as $row)
                                            <option value="{{$row->id}}"> {{$row->descriptions()->name}} </option>
                                            @endforeach
                                            <option value="other"> {{__('web.other')}} </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.sport_time_id')}} </label>
                                        <input type="text" name="sport_time" placeholder="{{__('web.write_here')}}..." class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-6" id="another_sport">
                                    <div class="form-group">
                                        <label for=""> {{__('web.sport_other')}} </label>
                                        <input type="text" name="sport_other" placeholder="{{__('web.write_here')}}..." class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.height_id')}} </label>
                                        <select name="height_id" id="" class="form-select form-control">
                                            <option selected disabled> {{__('web.select')}} </option>
                                            @foreach($heights as $row)
                                            <option value="{{$row->id}}"> {{$row->descriptions()->name}} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.gender')}} </label>
                                        <select name="gender" id="" class="form-select form-control">
                                            <option value="male"> {{__('web.male')}} </option>
                                            <option value="female"> {{__('web.female')}} </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.date_of_birth')}} </label>
                                        <input type="text" name="date_of_birth" placeholder=" {{__('web.date_of_birth')}} " class="form-control" id="datepicker1">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.weight_id')}} </label>
                                        <input type="number" name="weight" placeholder="{{__('web.write_here')}}..." class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for=""> {{__('web.sensitive_check_q')}} </label>
                                        <div class="check_group p-1">
                                            <div class="text-center form-control bg-light mt-0">
                                                <div class="form-check form-check-inline mt-1">
                                                    <input class="form-check-input" type="radio" name="sensitive_check" id="inlineRadio1" value="yes">
                                                    <label class="form-check-label" for="inlineRadio1">{{__('web.yes')}}</label>
                                                </div>
                                                <div class="form-check form-check-inline mt-1">
                                                    <input class="form-check-input" type="radio" name="sensitive_check" id="inlineRadio2" value="no">
                                                    <label class="form-check-label" for="inlineRadio2">{{__('web.no')}}</label>
                                                </div>
                                            </div>
                                            <input type="text" name='sensitive' placeholder="{{__('web.write_here')}}..." class="form-control" id="reason_input">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group show_hide_password">
                                        <label for=""> {{__('web.password')}}  </label>
                                        <input type="password" name="password" placeholder="{{__('web.write_here')}} ... " class="form-control">
                                        <i class="show_pass bi bi-eye-slash" aria-hidden="true"></i>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group show_hide_password">
                                        <label for=""> {{__('web.password_confirmation')}} </label>
                                        <input type="password" name="password_confirmation" placeholder="{{__('web.write_here')}}... " class="form-control">
                                        <i class="show_pass bi bi-eye-slash" aria-hidden="true"></i>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="accept" id="inlineCheckbox1" value="option1">
                                        <label class="form-check-label" for="inlineCheckbox1"> {{__('web.accept_on')}}  </label> <a target="_blank" href="{{url(getCurrentLocale().'/condition')}}" class="mainColor">{{__('web.conditions')}}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="add_adress_tab mt-5">
                                <div class="adress_card">
                                    <div class="adress_title">
                                        <h5> {{__('web.address')}} </h5>
                                    </div>
                                    <div class="map colored">
                                        <input type="hidden" name="latlng" id="latlng" value="{!! '21.4989, 39.2509' !!}">
                                         <div class="map colored" id="map" style=" height: 400px;border: 1px solid #000;">
                                
                                    </div>
                                    <div class="adress_info">
                                        <div class="adress_items">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="adress_info_input">
                                                        <select name="city_id" id="" class="form-select form-control">
                                                            <option selected disabled>{{__('web.city_id')}}</option>
                                                            @foreach($cities as $row)
                                                            <option value="{{$row->id}}">{{$row->descriptions()->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="adress_info_input">
                                                        <input type="text" name="street" placeholder="{{__('web.street')}}... " class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="adress_info_input">
                                                        <input type="text" name="area" placeholder="{{__('web.area')}}..." class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="adress_info_input">
                                                        <input type="text" name="building" placeholder="{{__('web.building')}}..." class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="upload_img_content">
                                            <div class="text-center">
                                                <h5> <i class="bi bi-plus-circle me-2"></i> {{__('web.build_images')}} </h5>
                                                <div class="wrap mt-4">
                                                    <div class="file">
                                                        <div class="file__input" id="file__input">
                                                            <input class="file__input--file" id="customFile" type="file" multiple="multiple" name="photos[]" />
                                                            <label class="file__input--label" for="customFile" data-text-btn="{{__('web.show')}}"> {{__('web.show')}} </label>
                                                        </div>
                                                        <div class="file__value_content" id="file__value_content"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-center mt-5 position-relative">
                                            <button type="submit" class="butn px-lg-5 shadow-lg py-3 w-50">
                                                <span class="px-lg-5"> {{__('web.regist')}} </span>
                                            </button>
                                            <p class="text-center mt-4"> {{__('web.have_account')}} <a href="{{url(getCurrentLocale().'/login')}}" class="mainColor"> {{__('web.create_login')}} </a> </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
  
@push('js')
    <script>
        function saveFormRegist(elem)
        {
            event.preventDefault(); 
            var action = $(elem).attr('action');
            var urls = action;
            let dataform = new FormData( $(elem)[0]);
         
            $.ajax
            ({
                url : urls,
                type: 'POST',              
                data: dataform,
                contentType: false, 
                processData: false, 
                success:function(data)
                {
                    $('#modal_success').modal('show');
                    setTimeout(
                        function()
                        {
                            window.location.assign({!! json_encode(url(getCurrentLocale().'/')) !!});
                        }, 1000);
                }
                ,error:function(data) 
                {
                    $('#modal_error').modal('show');
                    $('#errors').html('');
                    $('#errors').css("display", "block");
                    $.each(data.responseJSON.errors, function(key,value) 
                    {
                        $('#errors').append('<h4 class="title text-center mt-3">'+value+'</h4>');
                    }); 
                }
            })
        }
    </script>
    <script>
        $( function() {
          $( "#datepicker , #datepicker1" ).datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            yearRange: '1940:2022'
          });
        } );
    </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 readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').css('background-image', 'url('+e.target.result +')');
                    $('#imagePreview').hide();
                    $('#imagePreview').fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imageUpload").change(function() {
            readURL(this);
        });
    </script>

    <script>
        $(document).ready(function(){
            $("#another_sport").hide();
            $('#sport_type').on('change', function() {
            if ( this.value == 'other')
            //.....................^.......
            {
                $("#another_sport").show();
            }
            else
            {
                $("#another_sport").hide();
            }
            });
        });
    </script>

    <script>
        $(document).ready(function(){
            $("#reason_input").hide();
            $("#inlineRadio1").on("click" , function(){
                $("#reason_input").show();
            })
            $("#inlineRadio2").on("click" , function(){
                $("#reason_input").hide();
            })
        });
    </script>
    
    
<script type="text/javascript">
 function IsNumeric(e) {
            var keyCode = e.which ? e.which : e.keyCode
            var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
            document.getElementById("error").style.display = ret ? "none" : "inline";
            return ret;
        }
window.onload = function() {
    var latlng = new google.maps.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;

    
});

    });
    
};

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
    });
    
  
    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);
       
        

    });
}


function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation."
  );
  infoWindow.open(map);
}

window.initMap = initMap;
</script>

@endpush
@stop