@extends('library.layouts.container')

@section('content')
<div class="side-title">
    <h3>{{ $head ?? '' }}</h3>
</div>

<div class="border-item">
    <form class="form-row" method="post" action="{{ $action }}" enctype="multipart/form-data">
        @CSRF   
        @if(Session::has('error'))
        <div class="form-group col-lg-12">
            <p class="alert {{ Session::get('alert-class', 'alert-danger') }}">{{ Session::get('error') }}</p>
        </div>
        @endif
        <div class="form-group col-lg-6">
            <label>{{ meta('active', getCurrentLocale()) ?? __('providers.active') }} </label>
            <select  class="form-control {{ $errors->has('active') ? 'is-invalid' : '' }}"  name="active">               
                <option @if($profile ?? ''  && $profile->id) @if($profile->active == 'active') selected @endif @endif  value="active">{{__('providers.active')}}</option>
                <option @if($profile ?? ''  && $profile->id) @if($profile->active == 'inactive') selected @endif @endif  value="inactive">{{__('providers.inactive')}}</option>
            </select>
        </div>
        
        <div class="form-group col-lg-6">
            <label>{{ meta('name', getCurrentLocale()) ?? __('profile.name') }} </label>
            <input type="text" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" name="name" placeholder="{{ meta('name', getCurrentLocale()) ??__('profile.name') }}" value='{{ old("name", $profile->name ?? "") }}'/>
        </div>

        <div class="form-group col-lg-6">
            <label>{{ meta('email', getCurrentLocale()) ?? __('profile.email') }} </label>
            <input type="text" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" name="email" placeholder="{{ meta('email', getCurrentLocale()) ?? __('profile.email') }}" value='{{ old("email", $profile->email ?? "") }}'/>
        </div>
        <div class="form-group col-lg-6">
            <label>{{ meta('password', getCurrentLocale()) ?? __('profile.password') }} </label>
            <input type="password" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" name="password" placeholder="{{ meta('password', getCurrentLocale()) ?? __('profile.password') }}" />
        </div>
        <div class="form-group col-lg-6">
            <label>{{ meta('password_confirmation', getCurrentLocale()) ?? __('profile.password_confirmation') }} </label>
            <input type="password" class="form-control {{ $errors->has('password_confirmation') ? 'is-invalid' : '' }}" name="password_confirmation" placeholder="{{ meta('password_confirmation', getCurrentLocale()) ?? __('profile.password_confirmation') }}" />
        </div>

        <div class="form-group col-lg-6">
            <label>{{ meta('phone', getCurrentLocale()) ?? __('profile.phone') }} </label>
            <input type="number" class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }}" disabled placeholder="{{ meta('phone', getCurrentLocale()) ?? __('profile.phone') }}" value='{{ old("phone", $profile->phone ?? "") }}'/>
            <div class="ksa_key"> <span class="ml-2"> +966 </span> <img src="{{asset('/assets/ksa.png')}}" alt="key" /> </div>          
        </div>
       <div class="form-group col-lg-6">
            <p>{{__('profile.change_phone')}}</p>
            <a href="{{url('library/change/phone')}}" class="butn">{{__('profile.change_phone')}}</a>
        </div>
        <div class="form-group col-lg-6">
            <label>{{ meta('brand_name', getCurrentLocale()) ?? __('profile.brand_name') }} </label>
            <input type="text" class="form-control {{ $errors->has('brand_name') ? 'is-invalid' : '' }}" name="brand_name" placeholder="{{ meta('brand_name', getCurrentLocale()) ?? __('profile.brand_name') }}" value='{{ old("brand_name", $profile->brand_name ?? "") }}'/>
        </div>
        <div class="form-group col-lg-6">
            <label>{{ meta('address', getCurrentLocale()) ?? __('profile.address') }} </label>
            <input type="text" class="form-control {{ $errors->has('address') ? 'is-invalid' : '' }}" name="address" placeholder="{{ meta('address', getCurrentLocale()) ?? __('profile.address') }}" value='{{ old("address", $profile->address ?? "") }}'/>
        </div>
        <div class="form-group col-lg-6">
            <label>{{ meta('city_id', getCurrentLocale()) ?? __('providers.city_id') }} </label>
            <select  class="form-control {{ $errors->has('city_id') ? 'is-invalid' : '' }}"  name="city_id">               
                <option  selected value="">{{__('dashboard.select')}}</option>
                @foreach($cities as $city)
                    <option @if($profile ?? ''  && $profile->id) @if($profile->city_id == $city->id) selected @endif @endif  value="{{$city->id}}">{{ $city->descriptions()->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-lg-6">
            <label>{{ meta('delivery', getCurrentLocale()) ?? __('profile.delivery') }} </label>
            <select  class="form-control {{ $errors->has('delivery') ? 'is-invalid' : '' }}" onchange="deliverySelect(this)" name="delivery">
                <option @if($profile ?? ''  && $profile->id) @if($profile->delivery == 'false') selected @endif @endif  value="false">{{__('profile.false')}}</option>
                <option @if($profile ?? ''  && $profile->id) @if($profile->delivery == 'true') selected @endif @endif  value="true">{{__('profile.true')}}</option>
            </select>
        </div>
       
        <div class="form-group col-lg-6" id="cost_delivery" @if($profile ?? ''  && $profile->id) @if($profile->delivery != 'true')  style="display:none" @endif @else style="display:none" @endif >
            <label>{{ meta('cost', getCurrentLocale()) ?? __('profile.cost') }} </label>
            <input type="number" class="form-control {{ $errors->has('cost') ? 'is-invalid' : '' }}" name="cost" placeholder="{{ meta('cost', getCurrentLocale()) ?? __('profile.cost') }}" value='{{ old("cost", $profile->cost ?? "") }}'/>
        </div>
        
        
       
  
        <div class="form-group col-lg-6">
            <label>{{ meta('photo', getCurrentLocale()) ?? __('profile.photo') }} </label>
           <div class="uploading_img_box">
                <input type="file" onchange="readURL(this);"  class="form-control {{ $errors->has('photo') ? 'is-invalid' : '' }}" name="photo" placeholder="{{ meta('photo', getCurrentLocale()) ?? __('profile.photo') }}" value='{{ old("photo", $profile->photo ?? "") }}'/>
                <img id="uploaded_img" src="https://i.pinimg.com/originals/cf/fd/a9/cffda9925a591d3830050131f4492639.jpg" alt="" class="uploaded_img" />
            </div>
        </div>

        <div class="form-group col-lg-6">
            <label>{{ meta('library_image', getCurrentLocale()) ?? __('profile.library_image') }} </label>
            <div class="uploading_img_box">
                <input type="file"  onchange="readURL2(this);" class="form-control {{ $errors->has('library_image') ? 'is-invalid' : '' }}" name="library_image" placeholder="{{ meta('library_image', getCurrentLocale()) ?? __('profile.library_image') }}" value='{{ old("library_image", $profile->library_image ?? "") }}'/>
                <img id="uploaded_img2" src="https://i.pinimg.com/originals/cf/fd/a9/cffda9925a591d3830050131f4492639.jpg" alt="" class="uploaded_img" />
            </div>
        </div>
        
        <div id="selectTime" class="col-12">
            
            <div class="row pricing-list-item border-item mb-4" style="background-color: rgba(21,97,203,0.1);height:auto;width:100%">
                <div class="col-lg-12">
                    <h3> <button class="btn btn-link btn-block text-left"  type="button" onclick="collapseDataAll(this)">{{__('profile.work_hours')}}</button></h3>
                </div>
                <div class="col-lg-12"id="All" style="height:100%;display:none">
                    
                @foreach($days as $keyday=>$day)
                    <div  class="row pricing-list-item border-item mb-4" style="background-color: white;height:auto">
                        <div class="col-lg-12">
                            <h3><button class="btn btn-link btn-block text-left"  type="button" onclick="collapseData(this)" target-id="{{$day}}Day">{{__('profile.'.$day)}}</button></h3>
                            <div class="col-lg-12" style="height:100%;display:none" id="data{{$day}}Day">
                                <div class="row pricing-list-item border-item mb-4"  style="background-color: rgba(21,97,203,0.1);height:auto">
                                    
                                        <div class="form-group col-lg-12">
                                            <textarea name="work[{{ $day }}]" class="form-control" placeholder="{{ __('profile.work_'.$day) }}">@if($profile ?? ''  && $profile->id){{  $profile->workDay($day)  }}@endif</textarea>
      
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                </div>
             </div>
        </div>
        
        
        
        
        <div class="col-md-12"><input type="hidden" name="latlng" id="latlng" value="@if($profile ?? ''  && $profile->id){{$profile->latlng}}@endif">
			<div id="address-canvas">
				<div id="map" style=" height: 400px;border: 1px solid #000;"></div>
			</div>
		</div>
        <div class="text-center mt-5 col-12">
            <button class="butn"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </form>
</div>

@endsection

@section('inner_js')

    <!-- Editor JS files -->
{{--    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>--}}
            <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
            
<script type="text/javascript">

window.onload = function() {
    var latlng = new google.maps.LatLng({!! $profile ?? ''  && $profile->id ? $profile->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) {
        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);
       
        

    });
}

</script>
            
            <script>
            

    function deliverySelect(elem)
    {
       let data = $(elem).val();
       if(data == 'true')
       {
           $('#cost_delivery').show();
       }
       else
       {
           $('#cost_delivery').hide();
       }
    }
    
   
</script>

    	
    <script>
        $(".form-group").delegate( ".edit_btn", "click", function() {
            $(this).parentsUntil(".form-group").siblings(".box").toggleClass("d-block");
        })
         function collapseDataAll(elem){
            let data = $(elem).attr('target-id');
            $('#All').fadeToggle(500);
        }
        function collapseData(elem){
            let data = $(elem).attr('target-id');
            $('#data'+data).fadeToggle(500);
        }
    </script>
    <script>
        var route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}",
            url_city = {!! json_encode(url(getCurrentLocale().'/admin/areaSelect/')) !!},
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#uploaded_img')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
        
        function readURL2(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#uploaded_img2')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
</script>


@endsection