@extends('admin.layout')
@section('content')
    @include('pages.show_error_message')


    <script>
        $(function () {
            $('#profile-image1').on('click', function () {
                $('#profile-image-upload').click();
            });

            function readProfileURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imagePreview').css('background-image', 'url('+e.target.result +')');
                        $('#imagePreview').hide();
                        $('#imagePreview').fadeIn(650);
                    }
                    reader.readAsDataURL(input.files[0]);
                    // alert(input.files[0].file)
                    img = document.createElement('img');
                    img.src = URL.createObjectURL(input.files[0]);
                    $.formsubmit(input.files[0])
                }
            }
            $("#imageUpload").change(function() {
                readProfileURL(this);
            });

            $.formsubmit = function(file){
                // Contact form
                var form = $('#upload_profile_picture_form');

                event.preventDefault();
                formData = new FormData(),
                    //   $.each(files, function(i, file) {
                    formData.append('file'  , file);
                //  });
                params   = form.serializeArray(),
                    $.each(params, function(i, val) {
                        formData.append(val.name, val.value);
                    });

                $.ajax({
                    url: form.attr('action'),
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    dataType: "text",
                    data: formData, //form.serialize(),
                    success: function( response ) {
                        msg=response;
                        eval( response );
                    }
                }).done(function(data){
                    if(data.type=='success'){

                    }

                });
            }

///////////////////////////////edit Profile////////////////////////////////
            var loader7 = '<div align="center"><img src="{{ asset('images/Preloader_7.gif') }}"></div>';
            $(document).on('click', '#editProfileBtn ', function () {
                id = 0;
                 $('#ajaxModal .modal-dialog').removeClass('modelWidth80');
                $('#ajaxModalContent').html(loader7)
                $('#ajaxModalLabel').html('Edit Profile')
                $('#ajaxModal').data('id', id).modal('show');
                $.ajax({
                    url: "{{URL::to('/loadEditProfileForm')}}",
                    dataType: "html",
                    type: 'POST',
                    data: {'_token': $('meta[name=csrf-token]').attr('content'), 'step':'' },
                    success: function( responce ) {
                        $('#ajaxModalContent').html(responce);
                    }
                })

            });


            ///////////////////////////////edit Profile////////////////////////////////
             $(document).on('click', '#changePassBtn', function () {

                id = 0;
                $('#ajaxModal .modal-dialog').removeClass('modelWidth80');
                $('#ajaxModalContent').html(loader7)
                $('#ajaxModalLabel').html('Change Password')
                $('#ajaxModal').data('id', id).modal('show');
                $.ajax({
                    url: "{{URL::to('/changePasswardForm')}}",
                    dataType: "html",
                    type: 'POST',
                    data: {'_token': $('meta[name=csrf-token]').attr('content')},
                    success: function( responce ) {
                        $('#ajaxModalContent').html(responce);
                    }
                })

            });


        });
    </script>
    @php
        use Illuminate\Support\Facades\Auth;
        $role = Auth::user()->roles()->first();
    @endphp
    <div class="wrapper-md">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading font-bold"><h4>Profile</h4></div>
            <div class="panel-body">
                <div class="col-md-12">

                        <div class="row">

                                <div class="col-md-4 img">

                                    <form method="POST" action="{{ url('upload_profile_picture') }}"  enctype="multipart/form-data" autocomplete="off" id="upload_profile_picture_form">
                                        @csrf
                                        <div class="avatar-upload">
                                            <div class="avatar-edit">
                                                <input type='file' name="file" id="imageUpload" accept=".png, .jpg, .jpeg" />
                                                <label for="imageUpload"><i class="fa fa-camera"></i></label>
                                            </div>
                                            <div class="avatar-preview">
                                                <div id="imagePreview" style="background-image: url( @if(!empty($user->photo)) {{ asset( 'profileImage/'.$user->photo)}} @else {{asset('images/no-user.png') }} @endif );">
                                                </div>
                                            </div>
                                        </div>

                                    </form>




                                </div>
                                <div class="col-md-6 details">
                                    <blockquote>
                                        <h5>{{ $user->name ?? ''}}</h5>
                                        <small><cite title="Source Title"> {{ $role->name ?? '' }}  <i class="icon-map-marker"></i></cite></small>
                                    </blockquote>
                                    <p>
                                        {{ $user->email ?? ''}} <br>
                                    </p>

                                    <div class="bottom">
                                        @if($user->twitter)
                                        <a class="btn btn-primary btn-twitter btn-sm" href="{{ $user->twitter }}" target="_blank">
                                            <i class="fab fa-twitter"></i>
                                        </a>
                                        @endif
                                            @if($user->google_plus)
                                        <a class="btn btn-danger btn-sm" rel="publisher"  target="_blank"
                                           href="{{ $user->google_plus }}">
                                            <i class="fab fa-google-plus"></i>
                                        </a>
                                            @endif
                                            @if($user->facebook)
                                        <a class="btn btn-primary btn-sm" rel="publisher"  target="_blank"
                                           href="{{ $user->facebook }}">
                                            <i class="fab fa-facebook"></i>
                                        </a>
                                            @endif
                                            @if($user->skype)
                                        <a class="btn btn-info btn-sm" rel="publisher" href="{{$user->skype}}"  target="_blank">
                                            <i class="fab fa-skype"></i>
                                        </a>
                                            @endif
                                            @if($user->linkedin)
                                        <a class="btn btn-primary btn-sm" rel="publisher" href="{{$user->linkedin}}"  target="_blank">
                                            <i class="fab  fa-linkedin-in"></i>
                                        </a>
                                            @endif
                                    </div>
                                </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-flat btn-block btn-primary" id="editProfileBtn" > Edit Profile</button>
                                <button type="button" class="btn btn-flat btn-block btn-success" id="changePassBtn"  >Change password</button>
                            </div>

                            </div>
                </div>
               {{-- @if($role->name != 'Client'  )
                <div class="col-md-12">
                    <hr>
                   <h4>Hours Logged</h4>

                    <div class="row">
                        @if($todaylogged)
                        <div class="col-xs-3">
                            <a href class="block panel padder-v bg-primary item padder">
                                <span class="text-muted text-md">Today </span>
                                <span class="text-white font-thin h4 block padder-v">{{ $todaylogged ?? '' }}</span>

                                <span class="top text-right w-full padder-v">
                                     <i class="far fa-clock fa-2x text-muted m-r-sm"></i>
                                                 </span>
                            </a>
                        </div>
                       @endif

                            @if($weeklylogged)
                        <div class="col-xs-3">
                            <a href class="block panel padder-v bg-primary item padder">
                                <span class="text-muted text-md">This Week </span>
                                <span class="text-white font-thin h4 block padder-v">{{ $weeklylogged ?? '' }}</span>

                                <span class="top text-right w-full padder-v">
                                     <i class="far fa-clock fa-2x text-muted m-r-sm"></i>
                                                 </span>
                            </a>
                        </div>
                        @endif
                            @if($monthlylogged)
                        <div class="col-xs-3">
                            <a href class="block panel padder-v bg-primary item padder">
                                <span class="text-muted text-md">This Month </span>
                                <span class="text-white font-thin h4 block padder-v">{{ $monthlylogged ?? '' }}</span>

                                <span class="top text-right w-full padder-v">
                                     <i class="far fa-clock fa-2x text-muted m-r-sm"></i>
                                                 </span>
                            </a>
                        </div>
                            @endif

                        <div class="col-xs-3">
                            <a href class="block panel padder-v bg-black item padder">
                                <span class="text-white font-thin h3 block padder-v">View All</span>

                                <span class="top text-right w-full padder-v">
                                   <i class="fas fa-angle-right  text-muted m-r-sm"></i>
                                                 </span>
                            </a>
                        </div>
                    </div>
<hr>
                 </div>
               @endif--}}

                <div class="col-md-12">

                        <h4>Check In/Out</h4>
                          <div>
                              <ul class="list-unstyled">
                                  @if(isset($login->login_time) && !empty($login->login_time))
                                          <li>Logged In: {{ $login->login_time  ?? ''}}</li>
                                      @endif
                                      @if(isset( $logged->logout_time) && !empty( $logged->logout_time))
                                          <li>Logged Out:  {{ $logged->logout_time  ?? ''}}</li>
                                      @endif
                                      <li>IP:  {{ $login->login_ip  ?? ''}} <!--({{$login->location  ?? ''}})--></li>
                                      <li>Browser:  {{ $login->browser_name  ?? ''}}</li>

                              </ul>
                          </div>
                </div>

            </div>
    </div>
</div>


@endsection