@extends('admin.layouts.app')

@section('title', 'Detail User')
@section('stylesheets')
<link href="{{asset('adminlte/component/dataTables/css/datatables.min.css')}}" rel="stylesheet">
<style type="text/css">
    .overlay-wrapper{
      position:relative;
    }
</style>
@endsection
@push('breadcrump')
    <li class="breadcrumb-item"><a href="{{route('admin.user.index')}}">User</a></li>
    <li class="breadcrumb-item active">Detail</li>
@endpush
@section('content')
<div class="row">
    <div class="col-lg-4">
        <div class="card card-{{config('configs.app_theme')}} card-outline">
            <div class="card-header">
                <h3 class="card-title">Detail User</h3>
            </div>
            <div class="card-body card-profile text-center">
                <img class="profile-user-img img-responsive img-circle" src="{{asset('adminlte/images/user.jpg')}}" alt="User profile picture">
                <h3 class="profile-username">{{$user->name}}</h3>
                <p class="text-muted">{{$user->display_name}}</p>
                <ul class="list-group list-group-unbordered">
                    <li class="list-group-item d-flex">
                        <b class="mr-auto">Email</b> <span class="pull-right">{{$user->email}}</span>
                    </li>
                    <li class="list-group-item d-flex">
                        <b class="mr-auto">Dibuat</b> <span class="pull-right">{{$user->created_at}}</span>
                    </li>
                    <li class="list-group-item d-flex">
                        <b class="mr-auto">Login Terakhir</b> <span class="pull-right">{{$user->last_login}}</span>
                    </li>
                </ul>
                <a href="#" id="edit-pass" class="btn btn-{{config('configs.app_theme')}} btn-block text-white"><b>Reset Password</b></a>
            </div>
            <div class="overlay d-none">
                <i class="fa fa-2x fa-sync-alt fa-spin"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="card card-{{config('configs.app_theme')}} card-outline">
            <div class="card-header p-0 border-bottom-0">
                <ul class="nav nav-tabs">
                    <li class="nav-item"><a class="nav-link active" href="#log" data-toggle="tab">Log Login</a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div class="tab-pane active" id="log">
                    <div class="card-body">
                        <table  class="table table-bordered table-striped" id="table-log">
                            <thead>
                                <tr>
                                    <th style="text-align:center" width="10">#</th>
                                    <th width="100" >Alamat IP</th>
                                    <th width="250" >Perangkat</th>
                                    <th width="100" >Login Terakhir</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <div class="overlay d-none">
                <i class="fa fa-2x fa-sync-alt fa-spin"></i>
            </div>
        </div>
    </div>
</div>

{{-- Modal Edit --}}
<div class="modal fade" id="edit-site" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="overlay-wrapper">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Site</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <form action="" method="post" id="form-site" autocomplete="off">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" />
                    <input type="hidden" name="siteuser_id" />
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label" for="site_id">Unit</label>
                                    <input type="text" name="site_id" class="form-control" id="site_id"
                                        data-placeholder="Pilih Unit">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <input type="hidden" name="search" value="true" />
                    <div class="pull-right">
                        <button form="form-site" class="btn btn-{{config('configs.app_theme')}}"
                            type="submit">edit</i></button>
                    </div>
                </div>
                <div class="overlay d-none">
                    <i class="fa fa-2x fa-sync-alt fa-spin"></i>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Reset Password --}}
<div class="modal fade" id="edit-password" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="overlay-wrapper">
                <div class="modal-header">
                    <h4 class="modal-title">Reset Password</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <form action="" method="post" id="form-password" autocomplete="off">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" />
                    <input type="hidden" name="user_id" />
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label" for="password">Password Baru</label>
                                    <input type="text" name="password" class="form-control" id="password"
                                        placeholder="Password Baru" readonly>
                                    <span  class="form-text text-muted">Default Password = "123456"</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-form-label">Default</label>
                                <div class="col-sm-4">
                                    <label> <input class="form-control" type="checkbox" name="status" id="default"
                                        checked> <i></i></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <input type="hidden" name="search" value="true" />
                    <div class="pull-right">
                        <button form="form-password" class="btn btn-{{config('configs.app_theme')}}"
                            type="submit">Reset</i></button>
                    </div>
                </div>
                <div class="overlay d-none">
                    <i class="fa fa-2x fa-sync-alt fa-spin"></i>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('adminlte/component/validate/jquery.validate.min.js')}}"></script>
<script src="{{asset('adminlte/component/dataTables/js/datatables.min.js')}}"></script>
<script>
  $(document).ready(function(){
    $('input[name=status]').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    $('.i-checks').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green',
    });
    $('.updatecourse').on('ifChanged', function () {
        $.ajax({
            url: "{{url('admin/usercourse/update')}}",
            data: {
                _token: "{{ csrf_token() }}",
                id: this.value,
                access: this.checked ? 1 : 0
            },
            type: 'POST',
            dataType: 'json',
            beforeSend: function () {
                $('#course .overlay').removeClass('d-none');
            }
        }).done(function (response) {
            $('#course .overlay').addClass('d-none');
            if (response.status) {
                $.gritter.add({
                    title: 'Success!',
                    text: response.message,
                    class_name: 'gritter-success',
                    time: 1000,
                });
            } else {
                $.gritter.add({
                    title: 'Warning!',
                    text: response.message,
                    class_name: 'gritter-warning',
                    time: 1000,
                });
            }
            return;

        }).fail(function (response) {
            var response = response.responseJSON;
            $('#course  .overlay').addClass('d-none');
            $.gritter.add({
                title: 'Error!',
                text: response.message,
                class_name: 'gritter-error',
                time: 1000,
            });
        })
    });
    dataTableSite = $('#table-site').DataTable( {
            stateSave:true,
            processing: true,
            serverSide: true,
            filter:false,
            info:false,
            lengthChange:false,
            responsive: true,
            order: [[1, "asc" ]],
            ajax: {
                url: "{{url('admin/siteuser/read')}}",
                type: "GET",
                data:function(data){
                    data.user_id = {{$user->id}};
                }
            },
            columnDefs:[
                {
                    orderable: false,targets:[0]
                },
                { className: "text-right", targets: [0] },
                { className: "text-center", targets: [3,4] },
                {
                    render: function (data, type, row) {
                        if (row.site_id == row.first) {
                            return `<span class="badge badge-secondary">Default</span>`
                        }else{
                            return `-`
                        }
                    },
                    targets: [3]
                },
                { render: function ( data, type, row ) {
                    return `<div class="dropdown">
                    <button class="btn  btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-bars"></i>
                    </button>
                      <ul class="dropdown-menu dropdown-menu-right">
                        <li><a class="dropdown-item delete" href="#" data-id="${row.id}" data-first="${row.first}" data-site="${row.site_id}"><i class="fas fa-trash mr-2"></i> Delete</a></li>
                        {{--<li><a class="dropdown-item edit-site" href="#" data-id="${row.id}"><i class="fas fa-pencil-alt mr-2"></i> Edit</a></li>--}}
                      </ul></div>`
                },targets: [4]
                }
            ],
            columns: [
                { data: "no" },
                { data: "code" },
                { data: "name" },
                { data: "first" },
                { data: "id" },
            ]
      });
      dataTableLog = $('#table-log').DataTable( {
            stateSave:true,
            processing: true,
            serverSide: true,
            filter:false,
            info:false,
            lengthChange:false,
            responsive: true,
            order: [[3, "asc" ]],
            ajax: {
                url: "{{url('admin/user/log')}}",
                type: "GET",
                data:function(data){
                    data.user_id = {{$user->id}};
                }
            },
            columnDefs:[
                {
                    orderable: false,targets:[0]
                },
                { className: "text-right", targets: [0] },
                { className: "text-center", targets: [3] }
            ],
            columns: [
                { data: "no" },
                { data: "ip_address" },
                { data: "device" },
                { data: "last_login" },
            ]
      });
      $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        var currentTab = $(e.target).text();
          switch (currentTab)   {
            case 'Log Login' :
                $('#table-log').css("width", '100%')
                $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
                break ;
            case 'Akses Toko' :
              $('#table-site').css("width", '100%')
                $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
                break ;
            default:
          };
      }) ;
      $( "input[name='site_id']" ).select2({
        ajax: {
          url: "{{url('admin/siteuser/select')}}",
          type:'GET',
          dataType: 'json',
          data: function (term,page) {
            return {
              name:term,
              user_id:{{$user->id}},
              page:page,
              limit:30,
            };
          },
          results: function (data,page) {
            var more = (page * 30) < data.total;
            var option = [];
            $.each(data.rows,function(index,item){
              option.push({
                id:item.id,
                text: `${item.name}`
              });
            });
            return {
              results: option, more: more,
            };
          },
        },
        allowClear: true,
      });
          $(document).on("change", "#site_id", function () {
        if (!$.isEmptyObject($('#form').validate().submitted)) {
          $('#form').validate().form();
        }
      });
      $("#form").validate({
        errorElement: 'span',
        errorClass: 'help-block',
        focusInvalid: false,
        highlight: function (e) {
          $(e).closest('.form-group').removeClass('has-success').addClass('has-error');
        },

        success: function (e) {
          $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
          $(e).remove();
        },
        errorPlacement: function (error, element) {
          if(element.is(':file')) {
            error.insertAfter(element.parent().parent().parent());
          }else
          if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
          }
          else
          if (element.attr('type') == 'checkbox') {
            error.insertAfter(element.parent());
          }
          else{
            error.insertAfter(element);
          }
        },
        submitHandler: function() {
          $.ajax({
            url:$('#form').attr('action'),
            method:'post',
            data: new FormData($('#form')[0]),
            processData: false,
            contentType: false,
            dataType: 'json',
            beforeSend:function(){
              $('.overlay').removeClass('d-none');
            }
          }).done(function(response){
            $('.overlay').addClass('d-none');
            $( "#site_id" ).select2('val','');
            if(response.status){
              dataTableSite.draw();
              $.gritter.add({
                  title: 'Success!',
                  text: response.message,
                  class_name: 'gritter-success',
                  time: 1000,
              });
            }
            else{
                $.gritter.add({
                    title: 'Warning!',
                    text: response.message,
                    class_name: 'gritter-warning',
                    time: 1000,
                });
            }
            return;

          }).fail(function(response){
              var response = response.responseJSON;
              $('.overlay').addClass('d-none');
              $( "#site_id" ).select2('val','');
              $.gritter.add({
                  title: 'Error!',
                  text: response.message,
                  class_name: 'gritter-error',
                  time: 1000,
              });
          })
        }
      });
      $(document).on('click','.delete',function(){
            var id = $(this).data('id');
            var first = $(this).data('first');
            var site = $(this).data('site');
            bootbox.confirm({
                buttons: {
                    confirm: {
                        label: '<i class="fa fa-check"></i>',
                        className: 'btn-{{config('configs.app_theme')}}'
                    },
                    cancel: {
                        label: '<i class="fa fa-undo"></i>',
                        className: 'btn-default'
                    },
                },
                title:'Menghapus akses toko?',
                message:'Data yang telah dihapus tidak dapat dikembalikan',
                callback: function(result) {
                      if(result) {
                          var data = {
                              _token: "{{ csrf_token() }}",
                              _method:'delete',
                              id: id,
                              first: first,
                              site: site,
                          };
                          $.ajax({
                              url: `{{url('admin/siteuser')}}/${id}`,
                              dataType: 'json',
                              data:data,
                              type:'POST',
                              beforeSend:function(){
                                  $('.overlay').removeClass('d-none');
                              }
                          }).done(function(response){
                              if(response.status){
                                $('.overlay').addClass('d-none');
                                  $.gritter.add({
                                      title: 'Success!',
                                      text: response.message,
                                      class_name: 'gritter-success',
                                      time: 1000,
                                  });
                                  dataTableSite.ajax.reload( null, false );
                              }
                              else{
                                $('.overlay').addClass('d-none');
                                  $.gritter.add({
                                      title: 'Warning!',
                                      text: response.message,
                                      class_name: 'gritter-warning',
                                      time: 1000,
                                  });
                              }
                          }).fail(function(response){
                              var response = response.responseJSON;
                              $('.overlay').addClass('d-none');
                              $.gritter.add({
                                  title: 'Error!',
                                  text: response.message,
                                  class_name: 'gritter-error',
                                  time: 1000,
                              });
                          })
                      }
                }
            });
        })
        $('#default').on('ifChecked', function(event){
            $('#form-password input[name=password]').val('');
            $('#form-password input[name=password]').attr('readonly', true);
        });

        $('#default').on('ifUnchecked', function(event){
            $('#form-password input[name=password]').val('');
            $('#form-password input[name=password]').attr('readonly', false);
        });


        //edit password
        $(document).on('click','#edit-pass',function(){
            var id = {{ $user->id }};

            $.ajax({
                url:`{{url('admin/user/editpass')}}/${id}/edit`,
                method:'GET',
                dataType:'json',
                beforeSend:function(){
                    $('#form-password .overlay').removeClass('d-none');
                },
            }).done(function(response){
                $('#form-password .overlay').addClass('d-none');
                if(response.status){

                    // console.log(response.data);
                    $('#edit-password').modal('show');
                    // $('#form-password')[0].reset();
                    $('#form-password .invalid-feedback').each(function () { $(this).remove(); });
                    $('#form-password .form-group').removeClass('has-error').removeClass('has-success');
                    $('#form-password input[name=_method]').attr('value','PUT');
                    $('#form-password input[name=user_id]').val(id);
                    $('#form-password input[name=password]').val('');
                    $('#form-password input[name=password]').attr('readonly', true);
                    $('#form-password input[name=status]').iCheck('check');
                    // $("#form-site input[name=site_id]").select2('data',{id:response.data.site_id,text:response.data.site.name});
                    $('#form-password').attr('action',`{{url('admin/user/updatepass/')}}/${response.data.id}`);
                }
            }).fail(function(response){
                var response = response.responseJSON;
                $('#form-site .overlay').addClass('d-none');
                $.gritter.add({
                    title: 'Error!',
                    text: response.message,
                    class_name: 'gritter-error',
                    time: 1000,
                });
            })
        });

        //update password
        $("#form-password").validate({
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            focusInvalid: false,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
            },

            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is(':file')) {
                    error.insertAfter(element.parent().parent().parent());
                }else
                if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                }
                else
                if (element.attr('type') == 'checkbox') {
                    error.insertAfter(element.parent());
                }
                else{
                    error.insertAfter(element);
                }
            },
            submitHandler: function() {
                $.ajax({
                    url:$('#form-password').attr('action'),
                    method:'post',
                    data: new FormData($('#form-password')[0]),
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    beforeSend: function () {
                        $('.overlay').removeClass('d-none');
                    }
                }).done(function(response){
                    $('.overlay').addClass('d-none');
                    if(response.status){
                        dataTableSite.draw();
                        $('#edit-password').modal('hide');
                        $.gritter.add({
                            title: 'Success!',
                            text: response.message,
                            class_name: 'gritter-success',
                            time: 1000,
                        });
                    }
                    else{
                        $.gritter.add({
                            title: 'Warning!',
                            text: response.message,
                            class_name: 'gritter-warning',
                            time: 1000,
                        });
                    }
                    return;

                }).fail(function(response){
                    var response = response.responseJSON;
                    $('.overlay').addClass('d-none');
                    $.gritter.add({
                        title: 'Error!',
                        text: response.message,
                        class_name: 'gritter-error',
                        time: 1000,
                    });
                })
            }
        });

  });
</script>
@endpush