@extends('layouts.stores_dashboard_layout')

@section('title')
    {{trans('stores_dashboard.settings')}}
@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('stores_dashboard.settings')}}</h6>
                        <p class="mb-1">{{trans('stores_dashboard.setting_store')}}</p>
                    </div>
                </div>


                <form id="postForm">
                @csrf
                    <div class=" white-bg round7 mb-3 mt-2 p-3">
                        <h6 class="bold border-bottom pt-3 pb-3 mb-4">{{trans('stores_dashboard.store_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="{{$store->IconPath}}" 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="icon" id="file1">
                                        </label>
                                    </div>
                                    <div class="col">
                                        <h6 class="bold font14">{{trans('stores_dashboard.logo')}}</h6>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="bold font14 d-block" for="coverImgcont">
                                     <div class="mb-2">
                                     {{trans('stores_dashboard.cover')}}
                                      <span style="color: #ff3333;margin: auto 20px;"> * </span>
                                     </div>

                                    <input name="cover" type="file" onchange="viewImg(event ,'#coverImg')" class="d-none w-100" id="coverImgcont" >
                                    <div class="row transition img-input align-items-center border w-100 p-2 round5">
                                        <div class="col img-input-title">{{trans('stores_dashboard.cover_req')}}</div>
                                        <div class="col  text-align2">
                                            <img id="coverImg" style="max-width: 120px;" src="{{$store->CoverPath}}" alt="">
                                        </div>
                                    </div>
                                </label>
                            </div>


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


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


                            <div class="form-group">
                                <label class="bold font14" for="exampleInputEmail1">{{trans('stores_dashboard.category')}}<span style="color: #ff3333;margin: auto 20px;"> * </span></label>
                                <select name="category" class="form-control">
                                    @foreach($categories as $category)
                                        @if($store->category == $category->slug)
                                            <option value="{{$category->slug}}" selected>{{$category->name}}</option>
                                        @else
                                            <option value="{{$category->slug}}">{{$category->name}}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>


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


                            <div class="form-group">
                                <label class="bold font14 d-block" for="coverImgcont2">
                                     <div class="mb-2">
                                     {{trans('stores_dashboard.commercial_image')}} <span style="color: #ff3333;margin: auto 20px;"> * </span>
                                     </div>

                                    <input name="commercial_image" type="file" onchange="viewImg(event ,'#coverImg2')" class="d-none w-100" id="coverImgcont2" >
                                    <div class="row transition img-input align-items-center border w-100 p-2 round5">
                                        <div class="col img-input-title">{{trans('stores_dashboard.commercial_image')}}</div>
                                        <div class="col  text-align2">
                                            <img id="coverImg2" style="max-width: 120px;" src="{{$store->CommercialImagePath}}" alt="">
                                        </div>
                                    </div>
                                </label>
                            </div>


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

                        </div>
                    </div>


                    <!-- time-cont -->
                    <div class="  m-auto round7  p-3 pl-4 pr-4 form-cont" >

                        <div class="row border-bottom  align-items-center">
                            <div class="col">
                                <h6 class="bold  pt-2 pb-2 mb-3">{{trans('stores_dashboard.timings')}}</h6>
                            </div>

                        </div>

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

                            <div class="time-slider-cont ">
                                <div class=" w-100 time-cont d-block" >
                                <a type="button" class="button1 material-button m-3" onclick="addTime()" ><i class="fa fa-plus"></i></a>

                                        @if(count($timings)!=0)
                                            @foreach($timings as $timing)
                                            <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="{{$timing->day}}" selected >{{trans('stores_dashboard.'.$timing->day)}}</option>
                                                                <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 value="{{$timing->from}}" 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 value="{{$timing->to}}" 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 type="button" class="button-error material-button" onclick="removeTime(this)" ><i class="fa fa-times"></i></a>
                                                        </div>                                                    </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        @else
                                        <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 type="button" class="button-error material-button" onclick="removeTime(this)" ><i class="fa fa-times"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                         </div>
                                        @endif
                                    </div>

                            </div>

                        </div>
                    </div>

                    <button id="postbtn" class="button1 mt-3 material-button" >{{trans('stores_dashboard.confirm')}} </button>
                </form>
            </div>


        </div>
        <!-- end of dashboard body -->

    </div>














@endsection
@section('scripts')

<script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyA9_ve_oT3ynCaAF8Ji4oBuDjOhWEHE92U'></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();

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

                    map = new google.maps.Map(document.getElementById("map"), mapOptions);
                    marker = new google.maps.Marker({
                        map: map,
                        position: myLatlng,
                        draggable: true
                    });


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


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

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


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

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





                // button alert
                    function openAlertComment(ele){
                        $(ele).siblings('.alert-comment').slideDown();
                        $('.over-lay').slideDown();
                    }

                    $('.close-btn').on('click' ,function(){
                        $(this).parent().parent().slideUp();
                        $('.over-lay').slideUp();
                    });
                    $('.over-lay').on('click' ,function(){
                        $('.over-lay').slideUp();
                        $('.alert-comment').slideUp();
                    });
    </script>

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

    <script>
        $("#postbtn").on('click',function(e){
            e.preventDefault();
            var form = $('#postForm').get(0);
            var formData = new FormData(form);
            var oldText = $(this).text();
            $(this).prop('disabled', true).css({
                opacity:'0.5'
            }).text("{{trans('stores_dashboard.loading')}}");

            $.ajax({
                url:"{{route('stores_dashboard.post_edit_store')}}",
                type:"POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    $('#postbtn').removeAttr("disabled").css({
                        opacity:'1'
                    }).text(oldText);
                    if(data.key =='success'){
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                        location.assign(data.url);
                    }else{
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>
@endsection