@extends('layouts.delegates_dashboard_layout')

@section('title')
    {{Session::has('lang')&&Session::get('lang')=='en'?'add delegate':'  اضافة مندوب'}}

@endsection

@section('style')

@endsection

@section('content')

    <div  class="table-cont p-2 ">
        <div class="row align-items-center">
            <div class="dash-title col-md p-0 mt-0">
                <h6 class="bold">{{trans('delegates_dashboard.delegates_info')}}</h6>
                <p class="mb-1"> {{trans('delegates_dashboard.join_requests')}} / {{trans('delegates_dashboard.add_delegate')}}</p>
            </div>
        </div>


        <form id="form"  enctype="multipart/form-data">
            @csrf
            <div class=" white-bg round7 mb-3 mt-2 p-3">
                <h6 class="bold border-bottom pt-3 pb-3 mb-4">{{trans('delegates_dashboard.delegates_info')}}</h6>

                <div class="w-md-75 ">



                    <div class="form-group">
                        <div class="row align-items-center justify-content-start ">
                            <div class=" ">
                                <label for="file1">
                                    <div class="input-img-cont ">
                                        <img src="{{URL::to('site/imgs/icons/upload-img.png')}}" id="view1" class="input-img" alt="">
                                        <img src="{{URL::to('site/imgs/icons/camera.png')}}" class="input-img-camera" alt="">
                                    </div>
                                    <input onchange="viewImg(event ,'#view1')" class="d-none" type="file" name="personal_image" id="file1">
                                </label>
                            </div>
                            <div class="col">
                                <h6 class="bold font14">{{trans('delegates_dashboard.avatar')}}</h6>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.name')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input type="email" name="name" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('delegates_dashboard.name')}}">
                    </div>


                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1">{{trans('delegates_dashboard.phone')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <div class="row">
                            <div class="col-2 p-1 pr-0">
                                <select class="form-control">
                                    <option selected disabled>+966</option>
                                </select>
                            </div>
                            <div class="col pt-1 pb-1 pl-0 pr-1">
                                <input type="number" name="phone" class="form-control"  aria-describedby="emailHelp" placeholder="{{trans('delegates_dashboard.phone')}}">
                            </div>

                        </div>
                    </div>





                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.nationality')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <select name="nationality_id" class="form-control">
                            <option selected disabled>{{trans('delegates_dashboard.choose_nationality')}}</option>
                            @foreach($nationalities as $nationality)
                                <option value="{{$nationality->id}}">{{$nationality->name}}</option>
                            @endforeach
                        </select>
                    </div>




                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.fullname')}}<span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input type="text" name="fullname" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=" {{trans('delegates_dashboard.fullname')}} ">
                    </div>


                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.dateofbirth')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input type="date" name="driver_date_of_birth" class="form-control direction" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('delegates_dashboard.dateofbirth')}}">
                    </div>



                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.sponser')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input type="text" name="sponsor_name" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('delegates_dashboard.sponser')}}">
                    </div>



                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.region')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <select id="region_id" name="region_id" class="form-control">
                            <option selected disabled>{{trans('delegates_dashboard.choose_region')}}</option>
                            @foreach($regions as $region)
                                <option value="{{$region->id}}">{{$region->name}}</option>
                            @endforeach
                        </select>
                    </div>


                    <div class="form-group">
                        <label class="bold font14" for="first-name-column">{{awtTrans('المدينة')}}</label>
                        <div class="controls">
                            <select name="city_id" class="select2 form-control" required data-validation-required-message="{{awtTrans('هذا الحقل مطلوب')}}" >
                                <option value>{{awtTrans('اختر المدينه')}}</option>
                                @foreach ($cities as $city)
                                    <option value="{{$city->id}}">{{$city->name}}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                    <div class="form-group">
                        <h3>{{trans('stores_dashboard.address')}} </h3>
                        <input type="text" name="address" id="address" class="form-control" >
                        <br>
                        <div id="map" style="width: 100%;height:250px;"></div>
                        <input type="hidden" name="lat" id="lat" value="30">
                        <input type="hidden" name="long" id="long" value="30">
                    </div>

                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.national_id')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input type="text" name="identity_card" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('delegates_dashboard.national_id')}}">
                    </div>


                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.bank_number')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input type="number" name="bank_iban_number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('delegates_dashboard.bank_number')}}">
                    </div>



                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.car_type')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <select name="car_type_id" class="form-control">
                            <option selected disabled>{{trans('delegates_dashboard.choose_car_type')}}</option>
                            @foreach($cartypes as $cartype)
                                <option value="{{$cartype->id}}">{{$cartype->name}}</option>
                            @endforeach
                        </select>
                    </div>



                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1"> {{trans('delegates_dashboard.car_create_date')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input type="number" name="manufacturing_year" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=" {{trans('delegates_dashboard.car_create_date')}} ">
                    </div>


                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1">  {{trans('delegates_dashboard.car_charc')}}  <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input type="text" name="car_letters" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=" {{trans('delegates_dashboard.car_charc')}} ">
                    </div>

                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1">{{trans('delegates_dashboard.car_nums')}} <span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input name="car_numbers" type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('delegates_dashboard.car_nums')}}">
                    </div>

                    <div class="form-group">
                        <label class="bold font14" for="exampleInputEmail1">{{trans('delegates_dashboard.car_model')}}<span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                        <input name="car_model" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{trans('delegates_dashboard.car_model')}}">
                    </div>


                    <h6 class="bold -bottom pt-3 pb-3 mb-4">{{trans('delegates_dashboard.files')}}</h6>


                    <div class="row  ">
                        <div class="col-sm-6 col-md-3  p-1">
                            <div class=" round10  text-center">
                                <label for="upload1">
                                    <input type="file" name="identity_card_image" id="upload1" onchange="viewImg(event ,'#viewer1')" class="d-none">
                                    <img src="{{URL::to('site/imgs/icons/upload_image.png')}}" style="display:block;max-width: 100%;max-height:100%;" id="viewer1" class="mb-2 cp" alt="">
                                    <span class="bold font12">{{trans('delegates_dashboard.national_id_img')}}</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3  p-1">
                            <div class=" round10  text-center">
                                <label for="upload2">
                                    <input type="file" name="driving_license" id="upload2" onchange="viewImg(event ,'#viewer2')" class="d-none">
                                    <img src="{{URL::to('site/imgs/icons/upload_image.png')}}" style="display:block;max-width: 100%;max-height:100%;" id="viewer2" class="mb-2 cp" alt="">
                                    <span class="bold font12">{{trans('delegates_dashboard.driving_licence')}}</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3  p-1">
                            <div class=" round10  text-center">
                                <label for="upload3">
                                    <input type="file" name="car_front" id="upload3" onchange="viewImg(event ,'#viewer3')" class="d-none">
                                    <img src="{{URL::to('site/imgs/icons/upload_image.png')}}" style="display:block;max-width: 100%;max-height:100%;" id="viewer3" class="mb-2 cp" alt="">
                                    <span class="bold font12">{{trans('delegates_dashboard.car_front')}}</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3  p-1">
                            <div class=" round10  text-center">
                                <label for="upload4">
                                    <input type="file" name="car_back" id="upload4" onchange="viewImg(event ,'#viewer4')" class="d-none">
                                    <img src="{{URL::to('site/imgs/icons/upload_image.png')}}" style="display:block;max-width: 100%;max-height:100%;" id="viewer4" class="mb-2 cp" alt="">
                                    <span class="bold font12">{{trans('delegates_dashboard.car_back')}}</span>
                                </label>
                            </div>
                        </div>
                    </div>



                </div>
            </div>



            <button type="submit" id="submitform" class="button1 mt-3 " >  {{trans('delegates_dashboard.send')}} </button>


        </form>
    </div>
@endsection

@section('scripts')

    <script>
        $(document).on('change','#region_id',function(e){
            e.preventDefault();

            var id = $(this).val();

            var url = "{{route('delegate_join_request.join_request.change_region',['id'=>".id."])}}";
            console.log(url);
            $.ajax({
                url:'/delegate_join_request/change_region/'+id,
                type:"GET",
                dataType: "json",
                success:function(data){
                    if(data.key == 'fail'){
                        swal({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }else{
                        $('#city_id').html(data.html).fadeIn();
                    }

                }
            });
        });
    </script>

    <script>
        $(function(){
            $('.side-button .active').siblings('.side-dropdown').slideDown();
        });
    </script>


    <script>
        $(document).on('click','#submitform',function (e) {
            e.preventDefault();

            //get form data
            var form = $('#form').get(0);
            var formData = new FormData(form);

            $.ajax({
                url: "{{route('delegates_dashboard.post_delegate')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    //got a resposne?
                    if (data.key == 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: '<h5 class="bold">'+data.msg+'</h5>',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        location.assign(data.url);
                    } else {
                        swal.fire({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }
                }
            });
        });

    </script>
    <script>
        var map;
        var marker;
        var lat = document.getElementById('lat');
        var long = document.getElementById('long');
        var address = document.getElementById('address')
        var geocoder = new google.maps.Geocoder();
        var infowindow = new google.maps.InfoWindow();
        var myLatlng = new google.maps.LatLng(lat.value, long.value);



        function initMap(){
            var mapOptions = {
                zoom: 10,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map"), mapOptions);


            geocoder.geocode({'latLng': myLatlng }, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        address.value = results[0].formatted_address;
                        lat.value = marker.getPosition().lat();
                        long.value = marker.getPosition().lng();
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                    }
                }
            });

            google.maps.event.addListener(marker, 'dragend', function() {

                geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            address.value = results[0].formatted_address;
                            lat.value = marker.getPosition().lat();
                            long.value = marker.getPosition().lng();
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                        }
                    }
                });
            });

        }

        function initialize()
        {
            var input = document.getElementById('address');
            var autocomplete = new google.maps.places.Autocomplete(
                /** @type {HTMLInputElement} */(input),
                {
                    types: ['(cities)'],
                });
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    return;
                }
                lat.value = place.geometry.location.lat();
                long.value = place.geometry.location.lng();
                // initMap();
                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(' ');
                }
                initMap();
            });
        }
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }
        function showPosition(position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            map.setCenter(new google.maps.LatLng(lat, long));
            marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(lat, long),
                draggable: true
            });
        }


        google.maps.event.addDomListener(window, 'load', initialize);

        google.maps.event.addDomListener(window, 'load', initMap);

        google.maps.event.addDomListener(window, 'load', getLocation);

        google.maps.event.addDomListener(window, 'load', showPosition);



        // time
        function addNewTimes(){
            $('.time-button').animate({
                'left' : '-200%'
            });
            $('.time-cont').slideDown();
        }

        function addTime(){
            let time =    '<div class="times-cont">'+
                '<div class="container time m-auto">'+
                '<div class="row  ">'+
                '<div class="col-md  p-1">'+
                '<label class="bold">{{trans("stores_dashboard.day")}}</label>'+
                '<select name="days[]" class="form-control border no-arrow">'+
                '<option value="saturday">{{trans("stores_dashboard.saturday")}}</option>'+
                '<option value="sunday">{{trans("stores_dashboard.sunday")}}</option>'+
                '<option value="monday">{{trans("stores_dashboard.monday")}}</option>'+
                '<option value="tuesday">{{trans("stores_dashboard.tuesday")}}</option>'+
                '<option value="wednesday">{{trans("stores_dashboard.wednesday")}}</option>'+
                '<option value="thursday">{{trans("stores_dashboard.thursday")}} </option>'+
                '<option value="friday">{{trans("stores_dashboard.friday")}}</option>'+
                '</select>'+
                '</div>'+

                '<div class="col-md  p-1">'+
                '<label class="bold">{{trans("stores_dashboard.from")}} </label>'+
                '<input type="time"  class="p-3 border round5 w-100" name="from[]" id="">'+
                '</div>'+

                '<div class="col-md  p-1">'+
                '<label class="bold">{{trans("stores_dashboard.to")}}</label>'+
                '<input type="time" class="p-3 border round5 w-100" name="to[]" id="">'+
                '</div>'+

                '<div class="col-md-1  p-1">'+
                '<div class="d-flex align-items-center flex-column">'+
                '<label class="bold sn" style="color: #fff;">.</label>'+
                '<a class="button-error material-button" onclick="removeTime(this)" ><i class="fa fa-times"></i></a>'+
                '</div>'+
                '</div>'+
                '</div>'+
                '</div>'+
                '</div>';

            // cont.innerHTML += theHtml;
            $('.time-cont').append(time);

            // let times = document.getElementsByClassName('time');
            // for(let i = 0 ;i < times.length ;i++){
            //     times[i].querySelector('.time-add-button').classList.add('d-none');
            //     times[i].querySelector('.time-remove-button').classList.remove('d-none');
            // }
            // times[0].querySelector('.time-add-button').classList.remove('d-none');
            // times[0].querySelector('.time-remove-button').classList.add('d-none');
        }

        function removeTime(rmButton){
            $(rmButton).parents(".times-cont").remove();
        }


    </script>
    <script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyA9_ve_oT3ynCaAF8Ji4oBuDjOhWEHE92U'></script>
@endsection