@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 }}">
            @if($user ?? ''  && $user->id)
                @method('PUT')
            @endif
            @CSRF

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

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

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

            @if ($user ?? null && $user->role == 'sub_admin')
                <div class="form-group col-lg-6">
                    <label>{{ __('users.role') }} </label>
                    <select name="role" class="form-control role {{ $errors->has('role') ? 'is-invalid' : '' }}">
                        <option data-notification="false" data-device="false" data-location="false" data-category="false" data-module="false" value="">{{__('users.role')}}</option>
                        <option data-name="true" data-email="true" data-phone="true" data-password="true" data-photo="true" data-notification="false" data-device="false" data-location="false" data-category="false" data-module="true" {{old('role') == 'sub_admin' || ($user->role ?? '') == 'sub_admin' ? 'selected' : ''}} value="sub_admin">{{__('users.sub_admin')}}</option>
                        <option data-name="true" data-email="true" data-phone="true" data-password="true" data-photo="true"  data-notification="false" data-device="false" data-location="true" data-category="true" data-module="false" {{old('role') == 'merchant' || ($user->role ?? '') == 'merchant' ? 'selected' : ''}} value="merchant">{{__('users.merchant')}}</option>
                        <option data-name="true" data-email="false" data-phone="true" data-password="false" data-photo="false" data-notification="true" data-device="true" data-location="false" data-category="false" data-module="false" {{old('role') == 'customer' || ($user->role ?? '') == 'customer' ? 'selected' : ''}} value="customer">{{__('users.customer')}}</option>
                    </select>
                </div>
            @endif


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

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

            <div class="form-group col-lg-12 location_container">
                <label>{{ __('users.location') }} </label>
                <input data-toggle="modal" data-target="#exampleModalCenter" type="text" class="form-control location {{ $errors->has('location') ? 'is-invalid' : '' }}" name="location" placeholder="{{ __('users.location') }}" value='{{ old("location", $user->location ?? "") }}'/>
            </div>

            @if( count($categories) >= 1 )
                <div class="form-group col-lg-12 category_container">
                    <div class="card">
                        <div class="card-header">
                            <label>{{ __('users.categories') }} </label>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                @foreach($categories as $key=> $row)
                                    <div class="col-sm-4">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" {{ in_array($row['category_id'], $user_categories) ? 'checked' : '' }} value="{{ $row['category_id'] }}" class="custom-control-input" id="category_{{ $key }}" name="categories[]">
                                            <label class="custom-control-label" for="category_{{ $key }}"> {{ $row->name }} </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="form-group col-lg-6 device_container">
                <label>{{ __('users.device_token') }} </label>
                <input type="text" class="form-control {{ $errors->has('device_token') ? 'is-invalid' : '' }}" name="device_token" placeholder="{{ __('users.device_token') }}" value='{{ old("device_token", $user->device_token['token'] ?? "") }}'/>
            </div>

            <div class="form-group col-lg-12 notification_container">
                <label>{{ __('users.enable_notification') }} </label>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" {{ ($user->enable_notification ?? null == 1) || old('enable_notification') == 1 ? 'checked' : '' }} value="1" class="custom-control-input" id="enable_notification" name="enable notification">
                    <label class="custom-control-label" for="enable_notification"> {{ __('users.enable_notification')}} </label>
                </div>
            </div>



            {{--Start image container--}}
            <div class="form-group col-lg-12 photo_container">
                <label>{{ __('users.photo') }} </label>
                <input id="image_thumbnail" class="image_thumbnail" type="hidden" name="photo" value="{{old("photo", $user->photo ?? "")}}"/>

                <div class="photos main_photo {{ old('photo', $user->photo ?? '') ? ' 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('photo', $user->photo ?? ''))}} "  id="image_holder" class="image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".image_thumbnail" data-hide=".main_photo" 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('photo', $user->photo ?? '') ? 'hide' : '' }} ">
            <a id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" data-show=".main_photo" 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-12 module_container">
                <div class="card">
                    <div class="card-header">
                        <label>{{ __('users.modules') }} </label>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($modules as $key=> $row)
                                <div class="col-sm-4">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" {{ in_array($row['id'], $user_modules) ? 'checked' : '' }} value="{{ $row['id'] }}" class="custom-control-input" id="module_{{ $key }}" name="modules[]">
                                        <label class="custom-control-label" for="module_{{ $key }}"> {{ __($row['path'].'.head') }} </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

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

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Choose Your location</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div style="border:0; height: 400px; width: 100%" class="map" id="map"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="butn color small save_location"><span>Save Location</span></button>
                </div>
            </div>
        </div>
    </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>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            {{--url = "{{url('/')}}/",--}}
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5HuBEjkPPxQH4c7Nhfx2-u5XXCtSIzUk&callback=initMap&libraries=&v=weekly" defer></script>


    <script>
        $(document).ready(function(){

            let option = $('.role option:selected'),
                module = option.data('module'),
                category = option.data('category'),
                location = option.data('location'),
                device = option.data('device'),
                notification = option.data('notification'),
                name = option.data('name'),
                email = option.data('email'),
                phone = option.data('phone'),
                password = option.data('password'),
                photo = option.data('photo');

            if (module === false){
                $('.module_container').hide();
                $('.module_container input').prop('checked', false);
            }
            if (category === false){
                $('.category_container').hide();
                $('.category_container input').prop('checked', false);
            }
            if (location === false){
                $('.location_container').hide();
                $('.location_container input').val('');
            }
            if (device === false){
                $('.device_container').hide();
                $('.device_container input').val('');
            }
            if (notification === false){
                $('.notification_container').hide();
                $('.notification_container input').prop('checked', false);
            }
            if (name === false){
                $('.name_container').hide();
                $('.name_container input').val('');
            }
            if (email === false){
                $('.email_container').hide();
                $('.email_container input').val('');
            }
            if (phone === false){
                $('.phone_container').hide();
                $('.phone_container input').val('');
            }
            if (password === false){
                $('.password_container').hide();
                $('.password_container input').val('');
            }
            if (photo === false){
                $('.photo_container').hide();
                $('.photo_container input').val('');
            }



            $('.role').change(function(){

                let option = $('option:selected'),
                    module = option.data('module'),
                    category = option.data('category'),
                    location = option.data('location'),
                    device = option.data('device'),
                    notification = option.data('notification'),
                    name = option.data('name'),
                    email = option.data('email'),
                    phone = option.data('phone'),
                    password = option.data('password'),
                    photo = option.data('photo');


                if (module === false){
                    $('.module_container').hide();
                    $('.module_container input').prop('checked', false);
                    $('.category_container input').prop('checked', false);
                } else {
                    $('.module_container').show();
                    $('.module_container input').prop('checked', false);
                    $('.category_container input').prop('checked', false);

                }

                if (category === false){
                    $('.category_container').hide();
                    $('.module_container input').prop('checked', false);
                    $('.category_container input').prop('checked', false);
                } else {
                    $('.category_container').show();
                    $('.module_container input').prop('checked', false);
                    $('.category_container input').prop('checked', false);
                }
                if (location === false){
                    $('.location_container').hide();
                    $('.location_container input').val('');
                } else {
                    $('.location_container').show();
                    $('.location_container input').val('');
                }
                if (device === false){
                    $('.device_container').hide();
                    $('.device_container input').val('');
                } else {
                    $('.device_container').show();
                    $('.device_container input').val('');
                }
                if (notification === false){
                    $('.notification_container').hide();
                    $('.notification_container input').prop('checked', false);
                } else {
                    $('.notification_container').show();
                    $('.notification_container input').prop('checked', false);
                }






                if (name === false){
                    $('.name_container').hide();
                    $('.name_container input').val('');
                } else {
                    $('.name_container').show();
                    $('.name_container input').val('');
                }
                if (email === false){
                    $('.email_container').hide();
                    $('.email_container input').val('');
                } else {
                    $('.email_container').show();
                    $('.email_container input').val('');
                }
                if (phone === false){
                    $('.phone_container').hide();
                    $('.phone_container input').val('');
                } else {
                    $('.phone_container').show();
                    $('.phone_container input').val('');
                }
                if (password === false){
                    $('.password_container').hide();
                    $('.password_container input').val('');
                } else {
                    $('.password_container').show();
                    $('.password_container input').val('');
                }
                if (photo === false){
                    $('.photo_container').hide();
                    $('.photo_container input').val('');
                } else {
                    $('.photo_container').show();
                    $('.photo_container input').val('');
                }

            });
        });

        var marker;
        var save_location = $('.save_location');
        let lat = localStorage.getItem('lat'),
            lng = localStorage.getItem('lng');
        function initMap() {
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 7,
                center: { lat: parseFloat(lat) , lng: parseFloat(lng) }
            });

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: { lat: parseFloat(lat) , lng: parseFloat(lng) }
            });

            marker.addListener("dragend", function (map) {
                let lat = map.latLng.lat(), lng = map.latLng.lng();
                localStorage.setItem('lat', lat);
                localStorage.setItem('lng', lng);
                $('#latitude').val(lat);
                $('#longitude').val(lng);
                var geocoder = new google.maps.Geocoder();
                var infowindow = new google.maps.InfoWindow()

                google.maps.event.addListener(marker, 'dragend', function() {
                    infowindow.close();
                });

                var latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
                geocoder.geocode({ location: latlng }, function(results, status) {
                    if (status === "OK") {
                        if (results[0]) {
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                            document.querySelector('.location').value = results[0].formatted_address
                        } else {
                            window.alert("No results found");
                        }
                    } else {
                        window.alert("Geocoder failed due to: " + status);
                    }
                });
                if (marker.getAnimation() !== null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            });
        }

        save_location.click(function (map) {
            let lat = localStorage.getItem('lat'),
                lng = localStorage.getItem('lng');
            localStorage.setItem('lat', lat);
            localStorage.setItem('lng', lng);
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            var geocoder = new google.maps.Geocoder();
            var infowindow = new google.maps.InfoWindow();

            var latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
            geocoder.geocode({ location: latlng }, function(results, status) {
                if (status === "OK") {
                    if (results[0]) {
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                        document.querySelector('.location').value = results[0].formatted_address
                    } else {
                        window.alert("No results found");
                    }
                } else {
                    window.alert("Geocoder failed due to: " + status);
                }
            });
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }

            $('.modal').modal('hide')
        });

    </script>
@endsection