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


    <main>
        <!-- ---------- register_header_sec ----------- -->
        @include('web.pages.components.headerNav',['page'=>$page])

        <!-- ---------- register_form_sec ----------- -->
        <section class="register_form_sec">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <form method="POST" action="{{url(getCurrentLocale().'/regist')}}" onsubmit="saveForm(this)" enctype="multipart/form-data">
                            @CSRF
                            <div class="form">
                                <div class="avatar">
                                    <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/new_imgs/insta/insta-img-1.png);">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form_row">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <small class="label"> {{__('web.name')}} </small>
                                                <input type="text" name="name" class="form-control" placeholder="{{__('web.enter')}} {{__('web.name')}}">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <small class="label"> {{__('web.email')}}  </small>
                                                <input type="text" name="email" class="form-control" placeholder="{{__('web.enter')}} {{__('web.email')}}  ">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <small class="label"> {{__('web.phone')}}  </small>
                                                <div class="input-group">
                                                    <input type="number" name="phone" class="form-control w-75 rounded-start rounded-0" placeholder="{{__('web.enter')}} {{__('web.phone')}}  ">
                                                    <div class="flag_box form-control"> <img src="{{url('')}}/assets/web/images/new_imgs/ksa_flag.png" alt=""> <span> +966 </span> </div>
                                                    <!--<select class="form-select form-control" id="inputGroupSelect01" disabled>-->
                                                    <!--  <option selected>+966</option>-->
                                                    <!--</select>-->
                                                  </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <small class="label"> {{__('web.sport_type')}}  </small>
                                                <div class="row">
                                                    @foreach($sports as $sport)
                                                    <div class="col-4">
                                                        <div class="form-check">
                                                            <input class="form-check-input" onclick="sportCheck(this)" type="radio" name="sport_id" value="{{$sport->id}}"  id="sport{{$sport->id}}">
                                                            <label class="form-check-label" for="sport{{$sport->id}}">
                                                                {{ $sport->descriptions()->name }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                    <div class="col-4">
                                                        <div class="form-check">
                                                            <input class="form-check-input" onclick="sportCheck(this)" type="radio" name="sport_id" value="other"  id="sport0">
                                                            <label class="form-check-label" for="sport0">
                                                                {{ __('web.other') }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 d-none" id="sport_other_input">
                                            <div class="form-group">
                                                <small class="label"> {{__('web.sport_other')}} </small>
                                                <input type="text" name="sport_other" class="form-control" placeholder="{{__('web.sport_other')}}">
                                            </div>
                                        </div>
                                        <!--<div class="col-lg-6">-->
                                        <!--    <div class="form-group">-->
                                        <!--        <small class="label"> {{__('web.sport_time')}} ({{__('web.minute')}})</small>-->
                                        <!--        <input type="number" name="sport_time" class="form-control" placeholder="{{__('web.enter')}} {{__('web.sport_time')}} ">-->
                                        <!--    </div>-->
                                        <!--</div>-->
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <small class="label">  {{__('web.effort')}} </small>
                                                <select name="effort" id="" class="form-select form-control">
                                                    <option value="lazy"> {{__('members.lazy')}} </option>
                                                    <option value="light"> {{__('members.light')}} </option>
                                                    <option value="medium"> {{__('members.medium')}} </option>
                                                    <option value="active"> {{__('members.active')}} </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <small class="label">  {{__('web.user_goal')}}  </small>
                                                <select name="goal" id="" class="form-select form-control">
                                                    <option value="less_weight"> {{__('web.less_weight')}} </option>
                                                    <option value="keep_weight"> {{__('web.keep_weight')}} </option>
                                                    <option value="increase_weight"> {{__('web.increase_weight')}} </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <small class="label"> {{__('web.height')}} ({{__('web.cm')}})</small>
                                                <input type="number" name="height" class="form-control" placeholder="{{__('web.enter')}} {{__('web.height')}}">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <small class="label"> {{__('web.gender')}} </small>
                                                <div class="row">
                                                    <div class="col-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="gender" value="male" id="sex1" checked>
                                                            <label class="form-check-label" for="sex1">
                                                                {{__('web.male')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="gender" value="female" id="sex2">
                                                            <label class="form-check-label" for="sex2">
                                                                {{__('web.female')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <small class="label">{{__('web.date_of_birth')}} </small>
                                                <input type="text" id="datepicker" name="date_of_birth" class="form-control" placeholder="">
                                                <span class="float_icon"> <i class="far fa-calendar"></i> </span>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <small class="label"> {{__('web.weight')}} ({{__('web.kg')}})</small>
                                                <input type="number" name="weight" class="form-control" placeholder="{{__('web.enter')}} {{__('web.weight')}}  ">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group" id="allergens_check">
                                                <small class="label"> {{__('web.sensitive_check')}} </small>
                                                <div class="row">
                                                    <div class="col-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" onclick="senitiveCheck(this)" name="sensitive_check" value="no" id="check1" checked>
                                                            <label class="form-check-label" for="check1">
                                                                {{__('web.no')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" onclick="senitiveCheck(this)" name="sensitive_check" value="yes" id="check2">
                                                            <label class="form-check-label" for="check2">
                                                                {{__('web.yes')}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 d-none" id="allergens_input">
                                            <div class="form-group">
                                                <small class="label"> {{__('web.sensitive')}} </small>
                                                <input type="text" name="sensitive" class="form-control" placeholder="{{__('web.sensitive')}}">
                                            </div>
                                        </div>
                                        <!--<div class="col-lg-12">-->
                                        <!--    <div class="form-group">-->
                                        <!--        <small class="label">  {{__('web.address')}} </small>-->
                                                <!-- Button trigger modal -->
                                        <!--        <a href="#0" type="button" class="modal_adress_btn w-100" data-bs-toggle="modal" data-bs-target="#modal_adress">-->
                                        <!--            <span class="icon me-1 mainColor"> <i class="fas fa-plus"></i> </span> <span>  {{__('web.address_info')}}  </span>-->
                                        <!--        </a>-->
                                        <!--      </div>-->
                                        <!--</div>-->
                                        <div class="col-6">
                                            <div class="form-group show_hide_password">
                                                <small class="label">  {{__('web.password')}} </small>
                                                <input type="password" name="password" class="form-control" placeholder="{{__('web.enter')}} {{__('web.password')}}  ">
                                                <i class="bi-eye-slash show_pass float_icon"></i>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group show_hide_password">
                                                <small class="label">  {{__('web.password_confirmation')}} </small>
                                                <input type="password" name="password_confirmation" class="form-control" placeholder="{{__('web.enter')}} {{__('web.password_confirmation')}}  ">
                                                <i class="bi-eye-slash show_pass float_icon"></i>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="text-center mt-4">
                                                <p> {{__('web.accept_on')}} <a href="{{url(getCurrentLocale().'/condition')}}" target="_blank" class="mainColor"> {{__('web.conditions')}} </a> </p>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <button class="butn butn_lg w-100 mt-3">
                                                <span> {{__('web.regist')}} </span>
                                            </button>
                                        </div>
                                        <div class="col-12">
                                            <div class="text-center mt-2">
                                                <p> {{__('web.have_acc')}}  <a href="{{url(getCurrentLocale().'/login')}}" class="mainColor"> {{__('web.login')}}  </a> </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade modal_adress" id="modal_adress" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <div class="modal_adress_form form p-4">
                                            <div class="title">
                                                <small> {!! $address->descriptions()->title !!} </small>
                                                <h6> {!! $address->descriptions()->description !!}  </h6>
                                            </div>
                                            <div class="form_row">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.name')}} </small>
                                                            <input type="text" name="address[name]" class="form-control" placeholder="{{__('web.enter')}} {{__('web.name')}}">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.phone')}} </small>
                                                            <div class="input-group">
                                                                <input type="number" name="address[phone]" class="form-control rounded-start rounded-0" placeholder="{{__('web.enter')}} {{__('web.phone')}}">
                                                                <div class="flag_box form-control"> <img src="{{url('')}}/assets/web/images/new_imgs/ksa_flag.png" alt=""> <span> +966 </span> </div>
                                                                <!--<select class="form-select form-control" id="inputGroupSelect01" disabled>-->
                                                                <!--  <option selected="">+966</option>-->
                                                                <!--</select>-->
                                                              </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-lg-12">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.address_status')}} </small>
                                                            <select name="address[status]" class="form-select form-control" id="inputGroupSelect01">
                                                                <option value="address_home"> {{__('web.address_home')}} </option>
                                                                <option value="address_work"> {{__('web.address_work')}} </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.city')}} </small>
                                                            <select  onchange="selectCity(this)" class="form-select form-control" name="address[city_id]" id="inputGroupSelect01">
                                                                <option selected="" value="">{{__('web.select')}}</option>
                                                                @foreach($cities as $city)
                                                                    <option value="{{$city->id}}">{{$city->descriptions()->name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.area')}} </small>
                                                            <select name="address[area_id]" class="form-select form-control" id="area_id">
                                                                <option selected="" value="">{{__('web.select')}}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.delivery_type')}} </small>
                                                            <select name="address[delivery_type]" class="form-select form-control" id="inputGroupSelect01">
                                                                <option value="morning"> {{__('web.morning')}} </option>
                                                                <option value="night"> {{__('web.night')}} </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.phone_home')}}  </small>
                                                            <input type="number" name="address[phone_home]" min="1" class="form-control" placeholder="">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.home_num')}} </small>
                                                            <input type="number" name="address[home_num]" min="1" class="form-control" placeholder="">
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.address')}}  </small>
                                                            <input type="text" name="address[address]" class="form-control" placeholder="">
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.address_on_map')}}  </small>
                                                            <input type="hidden" name="address[latlng]" id="latlng" value="">
                                                            <div class="map_box" id="map" style="border-radius: 8px;position: inherit;overflow: inherit;">
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <small class="label"> {{__('web.address_note')}} </small>
                                                            <textarea name="address[note]" id="" rows="5" placeholder="" class="form-control"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <a href="#0" data-bs-toggle="modal" data-bs-target="#modal_adress" class="butn w-100 mt-3 ">
                                                            <span> {{__('web.save')}} </span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
                    
        </section>

    </main>
    
    @push('js')
        <script src="{{url('')}}/assets/web/js/custom/registAction.js"></script>
        
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9i5KheHihWwx0k0y0xyqWy-RVLB9AqjU&callback=initMap"></script>
<script type="text/javascript">

window.onload = function() {
    var latlng = new google.maps.LatLng({!! $provider ?? ''  && $provider->id ? $provider->latlng : '21.4989, 39.2509' !!});
    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) {
        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) {
        var div = document.createElement('div');alert(div);
        div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
       
        

    });
}

</script>

    @endpush
@stop