@extends('admin.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">
        @if($provider ?? ''  && $provider->id)
            @method('PUT')
        @endif
        @CSRF
        
 <!--<div class="form-group col-lg-6">-->
 <!--           <label>{{ meta('points', getCurrentLocale()) ?? __('providers.points') }} </label>-->
 <!--           <input type="text" class="form-control {{ $errors->has('points') ? 'is-invalid' : '' }}" name="points" placeholder="{{ meta('points', getCurrentLocale()) ??__('providers.points') }}" value='{{ old("points", $provider->points ?? "") }}'/>-->
 <!--       </div>-->
 <!--       <div class="form-group col-lg-6"></div>-->

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

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

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

         
        <div class="form-group col-lg-6">
            <label>{{ meta('address', getCurrentLocale()) ?? __('providers.address') }} </label>
            <input type="text" class="form-control {{ $errors->has('address') ? 'is-invalid' : '' }}" name="address" placeholder="{{ meta('address', getCurrentLocale()) ?? __('providers.address') }}" value='{{ old("address", $provider->address ?? "") }}'/>
        </div>
{{--Start image container--}}
        <div class="form-group col-lg-6">
            <label>{{ meta('photo', getCurrentLocale()) ?? __('providers.photo') }} </label>
            <input id="photo_thumbnail" class="photo_thumbnail" type="hidden" name="photo" value="{{old("photo", $provider->photo ?? "")}}"/>

            <div class="photos main_photo {{ old('photo', $provider->photo ?? '') ? ' wow fadeInUp' : 'hide' }}">
                <div class="col-lg-4">
                    <div class="items">
                        <div class="img">
                            <a href="#" id="lfm" data-input=".photo_thumbnail" data-preview=".photo_holder" class="lfm" data-hide=".photo_button">
                                <img src="{{asset(old('photo', $provider->photo ?? ''))}} "  id="photo_holder" class="photo_holder"/>
                            </a>
                        </div>
                        <a href="#" class="showHide resetImage close" data-empty=".photo_thumbnail" data-hide=".main_photo" data-show=".photo_button"><i class="fas fa-times"></i></a>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>
            <span class="input-group-btn photo_button {{ old('photo', $provider->photo ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".photo_thumbnail" data-preview=".photo_holder" data-show=".main_photo" data-hide=".photo_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
        </div>
        {{--End image container--}}
        {{--Start image container--}}
        <div class="form-group col-lg-6">
            <label>{{ meta('image', getCurrentLocale()) ?? __('providers.image') }} </label>
            <input id="image_thumbnail" class="image_thumbnail" type="hidden" name="image" value="{{old("image", $provider->image ?? "")}}"/>

            <div class="images main_image {{ old('image', $provider->image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                <div class="col-lg-4">
                    <div class="items">
                        <div class="img">
                            <a href="#" id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" class="lfm" data-hide=".pick_button">
                                <img src="{{asset(old('image', $provider->image ?? ''))}} "  id="image_holder" class="image_holder"/>
                            </a>
                        </div>
                        <a href="#" class="showHide resetImage close" data-empty=".image_thumbnail" data-hide=".main_image" data-show=".pick_button"><i class="fas fa-times"></i></a>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>
            <span class="input-group-btn pick_button {{ old('image', $provider->image ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" data-show=".main_image" data-hide=".pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
        </div>
        {{--End image container--}}
       
        <div class="form-group col-lg-6">
            <label>{{ meta('num_id', getCurrentLocale()) ?? __('providers.num_id') }} </label>
            <input type="text" class="form-control {{ $errors->has('num_id') ? 'is-invalid' : '' }}" name="num_id" placeholder="{{ meta('num_id', getCurrentLocale()) ?? __('providers.num_id') }}" value='{{ old("num_id", $provider->num_id ?? "") }}'/>
        </div>
        <div class="form-group col-lg-6">
            <label>{{ meta('acc_num', getCurrentLocale()) ?? __('providers.acc_num') }} </label>
            <input type="text" class="form-control {{ $errors->has('acc_num') ? 'is-invalid' : '' }}" name="acc_num" placeholder="{{ meta('acc_num', getCurrentLocale()) ?? __('providers.acc_num') }}" value='{{ old("acc_num", $provider->acc_num ?? "") }}'/>
        </div>
        <div class="form-group col-lg-6">
            <label>{{ meta('description', getCurrentLocale()) ?? __('providers.description') }} </label>
            <input type="text" class="form-control {{ $errors->has('description') ? 'is-invalid' : '' }}" name="description" placeholder="{{ meta('description', getCurrentLocale()) ?? __('providers.description') }}" value='{{ old("description", $provider->description ?? "") }}'/>
        </div>
       
        <div class="form-group col-lg-6">
            <label>{{ meta('date_of_birth', getCurrentLocale()) ?? __('providers.date_of_birth') }} </label>
            <input type="date" class="form-control {{ $errors->has('date_of_birth') ? 'is-invalid' : '' }}" name="date_of_birth" placeholder="{{ meta('date_of_birth', getCurrentLocale()) ?? __('providers.date_of_birth') }}" value='{{ old("date_of_birth", $provider->date_of_birth ?? "") }}'/>
        </div>
       
               <div class="form-group col-lg-6">
            <label>{{ meta('bank', getCurrentLocale()) ?? __('providers.bank') }} </label>
            <input type="text" class="form-control {{ $errors->has('bank') ? 'is-invalid' : '' }}" name="bank" placeholder="{{ meta('bank', getCurrentLocale()) ?? __('providers.bank') }}" value='{{ old("bank", $provider->bank ?? "") }}'/>
        </div>  
          
           <div class="form-group col-lg-6">
            <label>{{ meta('iban', getCurrentLocale()) ?? __('providers.iban') }} </label>
            <input type="text" class="form-control {{ $errors->has('iban') ? 'is-invalid' : '' }}" name="iban" placeholder="{{ meta('iban', getCurrentLocale()) ?? __('providers.iban') }}" value='{{ old("iban", $provider->iban ?? "") }}'/>
        </div>
        
        
        <div class="form-group col-lg-6">
            <label>{{ meta('city', getCurrentLocale()) ?? __('providers.city') }} </label>
            <select  class="form-control {{ $errors->has('city_id') ? 'is-invalid' : '' }}" name="city_id">
                <option disabled selected>{{__('providers.select')}}</option>
                @foreach($cities as $row)
                         <option @if($provider ?? ''  && $provider->id) @if($provider->city_id == $row->id) selected @endif @endif  value="{{$row->id}}">{{cityname($row->id)}}</option>
                         @endforeach
                          </select>
                        </div>
        
        
        
         <div class="form-group col-sm-6">
                   
                        <label>{{__('providers.gender')}}</label>
                        <select  class="form-control {{ $errors->has('gender') ? 'is-invalid' : '' }}" name="gender">
                            <option selected disabled value="">{{__('providers.select')}}</option>
                           <option @if($provider ?? ''  && $provider->id) @if($provider->gender == 'male') selected @endif @endif  value="male">{{__('providers.male')}}</option>
                         <option @if($provider ?? ''  && $provider->id) @if($provider->gender == 'female') selected @endif @endif  value="female">{{__('providers.female')}}</option>
                         
                          </select>
                        
                </div>
                   <div class="form-group col-lg-6">
            <label>{{ meta('cost_hour', getCurrentLocale()) ?? __('providers.cost_hour') }} </label>
            <input type="text" class="form-control {{ $errors->has('cost_hour') ? 'is-invalid' : '' }}" name="cost_hour" placeholder="{{ meta('cost_hour', getCurrentLocale()) ?? __('providers.cost_hour') }}" value='{{ old("cost_hour", $provider->cost_hour ?? "") }}'/>
        </div>
         <div class="form-group col-lg-6">
            <label>{{ meta('cost_day', getCurrentLocale()) ?? __('providers.cost_day') }} </label>
            <input type="text" class="form-control {{ $errors->has('cost_day') ? 'is-invalid' : '' }}" name="cost_day" placeholder="{{ meta('cost_day', getCurrentLocale()) ?? __('providers.cost_day') }}" value='{{ old("cost_day", $provider->cost_day ?? "") }}'/>
        </div>
         <div class="form-group col-lg-6">
            <label>{{ meta('cost_week', getCurrentLocale()) ?? __('providers.cost_week') }} </label>
            <input type="text" class="form-control {{ $errors->has('cost_week') ? 'is-invalid' : '' }}" name="cost_week" placeholder="{{ meta('cost_week', getCurrentLocale()) ?? __('providers.cost_week') }}" value='{{ old("cost_week", $provider->cost_week ?? "") }}'/>
        </div>
         <div class="form-group col-lg-6">
            <label>{{ meta('cost_month', getCurrentLocale()) ?? __('providers.cost_month') }} </label>
            <input type="text" class="form-control {{ $errors->has('cost_month') ? 'is-invalid' : '' }}" name="cost_month" placeholder="{{ meta('cost_month', getCurrentLocale()) ?? __('providers.cost_month') }}" value='{{ old("cost_month", $provider->cost_month ?? "") }}'/>
        </div>
         <div class="form-group col-lg-6">
            <label>{{ meta('cost_course', getCurrentLocale()) ?? __('providers.cost_course') }} </label>
            <input type="text" class="form-control {{ $errors->has('cost_course') ? 'is-invalid' : '' }}" name="cost_course" placeholder="{{ meta('cost_course', getCurrentLocale()) ?? __('providers.cost_course') }}" value='{{ old("cost_course", $provider->cost_course ?? "") }}'/>
        </div>
               
              <div class="col-md-12"><input type="hidden" name="latlng" id="latlng" value="@if($provider ?? ''  && $provider->id){{$provider->latlng}}@endif">
						 <div id="address-canvas">
						     <div id="map" style=" height: 400px;border: 1px solid #000;"></div>
						     </div>
                             
						</div>
        <br>
        <br>
         @if($provider ?? ''  && $provider->id)
        <div class="form-group col-lg-6">
            <a class="butn" target="_blank" href="{{ asset($provider->cv) }}">تحميل CV</a>
        </div>
         <div class="form-group col-lg-6">
            <a class="butn" target="_blank" href="{{ asset($provider->pdf) }}">تحميل ملف العمل الحر </a>
        </div>
        @endif
       <!--<div class="border-item photos certifications_images col-md-12 other_image_container">-->
       <!--         <div class="row">-->
       <!--             @if ($certifications ?? false)-->
       <!--                 @foreach ($certifications as $photo)-->
       <!--                     <div class="col-md-4" class="itemsData">-->
       <!--                         <div class="items">-->
       <!--                             <div class="img">-->
       <!--                                 <a href="{{ asset($photo->image ?? '')}}" data-fancybox="gallery"><img src="{{ asset($photo->image ?? '')}}" alt=""></a>-->
       <!--                             </div>-->
       <!--                             <input type="hidden" name="certifications[]" value="{{ $photo->image ?? "" }}">-->
       <!--                             <a href="#" onclick="deleteimage(this)" class="close"><i class="fas fa-times"></i></a>-->
       <!--                         </div>-->
       <!--                     </div>-->
       <!--                 @endforeach-->
       <!--             @endif-->
       <!--         </div>-->
       <!--         <div class="text-center">-->
       <!--             <input id="other_image_thumbnail" class="other_image_thumbnail" type="hidden"/>-->
       <!--             <div class="clearfix"></div>-->
       <!--             <span id="add">-->
       <!--         <a id="lfm" data-selector=".certifications_images" data-input-name="certifications[]" data-width="" data-cache="article_gallery" data-input=".other_image_thumbnail" data-preview="" data-show="" data-hide="" class="lfm add">-->
       <!--             {{__('providers.certifications')}}-->
       <!--         </a>-->
       <!--     </span>-->
       <!--         </div>-->
       <!--     </div>-->

       <!-- <div class="border-item photos experiences_images col-md-12 other_image_container">-->
       <!--         <div class="row">-->
       <!--             @if ($experiences ?? false)-->
       <!--                 @foreach ($experiences as $photo)-->
       <!--                     <div class="col-md-4"  class="itemsData">-->
       <!--                         <div class="items">-->
       <!--                             <div class="img">-->
       <!--                                 <a href="{{ asset($photo->image ?? '')}}" data-fancybox="gallery"><img src="{{ asset($photo->image ?? '')}}" alt=""></a>-->
       <!--                             </div>-->
       <!--                             <input type="hidden" name="experiences[]" value="{{ $photo->image ?? "" }}">-->
       <!--                             <a href="#" onclick="deleteimage(this)" class="close"><i class="fas fa-times"></i></a>-->
       <!--                         </div>-->
       <!--                     </div>-->
       <!--                 @endforeach-->
       <!--             @endif-->
       <!--         </div>-->
       <!--         <div class="text-center">-->
       <!--             <input id="other_image_thumbnail" class="other_image_thumbnail" type="hidden"/>-->
       <!--             <div class="clearfix"></div>-->
       <!--             <span id="add">-->
       <!--         <a id="lfm" data-selector=".experiences_images" data-input-name="experiences[]" data-width="" data-cache="article_gallery" data-input=".other_image_thumbnail" data-preview="" data-show="" data-hide="" class="lfm add">-->
       <!--            {{__('providers.experiences')}}-->
       <!--         </a>-->
       <!--     </span>-->
       <!--         </div>-->
       <!--     </div>-->

        <div class="text-center mt-5 col-12">
            <button class="butn"><span>{{ __('descriptions.accept') }}</span></button>
        </div>
    </form>
</div>

@endsection

@section('inner_js')
<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) {
        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 addexperience(elem){
    var num = $(elem).attr('data-id');
        
        var newrow = parseInt(num)+1; 
        $(elem).attr('data-id', newrow);
        
        $.ajax({
          url : urls_exper+'/'+num,
          type : 'GET',
          data : 'nothing',
          success:function(data)
          {
            $('#experiences').append(data);
          }
        }) 
}

function remove(elem){
            $(elem).closest('.row').remove();
        }
function addcertification(elem){
     var num = $(elem).attr('data-id');
        
        var newrow = parseInt(num)+1; 
        $(elem).attr('data-id', newrow);
        
        $.ajax({
          url : urls+'/'+num,
          type : 'GET',
          data : 'nothing',
          success:function(data)
          {
            $('#certifications').append(data);
          }
        }) 
}
    function changetype(elem){
        let valuedata = $(elem).val();
        if(valuedata == 'provider'){
            $('#provider').css('display','block');
            $('#consult').css('display','none');
        }
        else{
            $('#consult').css('display','block');
            $('#provider').css('display','none');
        }
        

    }
</script>
  <script>
        function initImageUpload(box) {
            let uploadField = box.querySelector('.image-upload');

            uploadField.addEventListener('change', getFile);

            function getFile(e) {
                let file = e.currentTarget.files[0];
                checkType(file);
            }

            function previewImage(file) {
                let thumb = box.querySelector('.js--image-preview'),
                    reader = new FileReader();

                reader.onload = function() {
                    thumb.style.backgroundImage = 'url(' + reader.result + ')';
                }
                reader.readAsDataURL(file);
                thumb.className += ' js--no-default';
            }

            function checkType(file) {
                let imageType = /image.*/;
                if (!file.type.match(imageType)) {
                    throw 'Datei ist kein Bild';
                } else if (!file) {
                    throw 'Kein Bild gew채hlt';
                } else {
                    previewImage(file);
                }
            }

        }

        // initialize box-scope
        var boxes = document.querySelectorAll('.box');

        for (let i = 0; i < boxes.length; i++) {
            let box = boxes[i];
            initDropEffect(box);
            initImageUpload(box);
        }



        /// drop-effect
        function initDropEffect(box) {
            let area, drop, areaWidth, areaHeight, maxDistance, dropWidth, dropHeight, x, y;

            // get clickable area for drop effect
            area = box.querySelector('.js--image-preview');
            area.addEventListener('click', fireRipple);

            function fireRipple(e) {
                area = e.currentTarget
                    // create drop
                if (!drop) {
                    drop = document.createElement('span');
                    drop.className = 'drop';
                    this.appendChild(drop);
                }
                // reset animate class
                drop.className = 'drop';

                // calculate dimensions of area (longest side)
                areaWidth = getComputedStyle(this, null).getPropertyValue("width");
                areaHeight = getComputedStyle(this, null).getPropertyValue("height");
                maxDistance = Math.max(parseInt(areaWidth, 10), parseInt(areaHeight, 10));

                // set drop dimensions to fill area
                drop.style.width = maxDistance + 'px';
                drop.style.height = maxDistance + 'px';

                // calculate dimensions of drop
                dropWidth = getComputedStyle(this, null).getPropertyValue("width");
                dropHeight = getComputedStyle(this, null).getPropertyValue("height");

                // calculate relative coordinates of click
                // logic: click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center
                x = e.pageX - this.offsetLeft - (parseInt(dropWidth, 10) / 2);
                y = e.pageY - this.offsetTop - (parseInt(dropHeight, 10) / 2) - 30;

                // position drop and animate
                drop.style.top = y + 'px';
                drop.style.left = x + 'px';
                drop.className += ' animate';
                e.stopPropagation();

            }
        }
        function deleteimage(elem){
            setTimeout(function(){ $(elem).closest('.col-md-4').remove(); }, 500);
            
        }
    </script>
    	
    <script>
        $(".form-group").delegate( ".edit_btn", "click", function() {
            $(this).parentsUntil(".form-group").siblings(".box").toggleClass("d-block");
        })
    </script>
    <!-- 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>
        var route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}",
            urls = "{{url('/')}}/admin/addcertification",
             inputName = '';
             currentLanguage = '';
            urls_exper = "{{url('/')}}/admin/addexperience",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    


@endsection