@extends('auth::layoutsbs4.main',['page_title' => 'Auth::Main Module'])
@section('content')
@if ($agent_type == 'desktop')
  <div class="page-header page-header-light mb-2 ">
      <div class="breadcrumb-line   header-elements-md-inline">
        <div class="page-title d-flex pb-2 pt-2">
          <h6><a href="javascript:history.back()" class="" data-popup="tooltip" title="Go Previous"><i class="icon-arrow-left52 mr-2"></i></a><b class="font-weight-semibold"> Main Module </b> - <span > Entry</span>  </h6>
          <a href="" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
       <div class="header-elements d-none">
          <div class="breadcrumb justify-content-center">
            <a href="{{ route("cabinet.selection") }}" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
            <span class="breadcrumb-item">Menu Access</span>
            <span class="breadcrumb-item active">Main Module</span>
          </div>
        </div>
     </div>
  </div>
@else
  <div class="row mt-0">
    <div class="col-12">
      <div class="card mb-2 shadow-sm border-0">
        <div class="card-header bg-white p-2 header-elements-inline">
          <h6 class="card-title"><i class="icon-copy mr-2 text-theme"></i>Main Module</h6>
          <div class="header-elements">
            <a href="javascript:history.back()" class="float-right text-theme"><i class="icon-arrow-left52 mr-2"></i>Go Back</a>
          </div>
        </div>
      </div>
    </div>
  </div>
@endif
<div class="row mb-4" >
  <div class="col-md-12" id="module_manage" style="display:none">
    <div class="card shadow-sm" >
      <div class="card-header bg-white py-1 px-2 header-elements-inline">
        <h6 class="card-title"><i class="icon-pencil7 mr-2 text-theme"></i>Manage </h6>
        <div class="header-elements">
          <a href="#" class="bg-theme btn-sm float-right list_btn"><i class="icon-list3 text-white mr-1"></i>List Module</a>
        </div>
      </div>
      <div class="card-body">
        <form id="form_validation">
          <input type="hidden" name="id">
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label>Cabinet <span class="text-danger">*</span></label>
                <select class="form-control cabinet_select2" name="cabinet_id"></select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>Short Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" placeholder="Enter Short name">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>Description <span class="text-danger">*</span></label>
                <input type="text" name="description" class="form-control" placeholder="Enter Description">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>Url <span class="text-danger">*</span></label>
                <input type="text" name="url" class="form-control" placeholder="Enter URL">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                 <label>Sort Number <span class="text-danger">*</span></label>
                 <input type="number" name="sorting_no" class="form-control" placeholder="Enter Sort Number">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>Access To <span class="text-danger">*</span></label>
                <select class="access_to_select2 form-control" name="access_to">
                  <option value="B">Both</option>
                  <option value="O">Office Staff</option>
                  <option value="N">Non Office Staff</option>
                </select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                 <label>Image <span class="text-danger">*</span></label>
                 <input type="file" class="form-input-styled" name="image" data-fouc>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group ">
                <button type="submit" class="btn m-2 btn-theme" id="form_submit_btn">Submit</button>
                <button type="submit" class="btn m-2 bg-dark" id="form_process_btn" style="display:none;">Processing <i class="icon-spinner2 spinner ml-2"></i></button>
                <a class="btn btn-danger m-2 text-white" href=""> Cancel </a>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="col-md-12" id="module_list">
    <div class="card shadow-sm">
      <div class="card-header bg-white py-1 px-2 header-elements-inline">
        <h6 class="card-title"><i class="icon-list2 mr-2 text-theme"></i>List </h6>
        <div class="header-elements">
          <a href="#" class="bg-theme btn-sm float-right add_new"><i class="icon-plus2 mr-1"></i>Add Module</a>
        </div>
      </div>
      <div class="card-body p-2">
        <form id="filter_form">
          <input type="hidden" name="discontinue_tag" value="N">
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label>Access To <span class="text-danger">*</span></label>
                <select class="filter_access_to_select2 form-control" name="access_to">
                  <option value="B">Both</option>
                  <option value="O">Office Staff</option>
                  <option value="N">Non Office Staff</option>
                </select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>Cabinet</label>
                <select class="form-control cabinet_select2" name="cabinet_id"></select>
              </div>
            </div>
            <div class="col-md-1 col-12">
              <div class="form-group ">
                <label class="invisible d-none d-sm-inline-block">Display</label>
                <button class="btn btn-theme btn-block btn-theme text-center filter_reports_filter" >Filter</button>
              </div>
            </div>
          </div>
        </form>
        <div class="table-responsive">
          <table class="table data_list_table table-striped table-bordered">
              <thead class="no-wrap">
                <tr style="border-top: 1px solid #ddd !important;">
                  <th class="d-block d-sm-none">View</th>
                  <th class="text-center d-none d-sm-table-cell">SL.No</th>
                  <th>Cabinet</th>
                  <th>Short Name</th>
                  <th>Description</th>
                  <th>Url</th>
                  <th>Access To</th>
                  <th>Image</th>
                  <th class="text-center">Action</th>
                 </tr>
              </thead>
              <tbody>
              </tbody>
           </table>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
var base_url = {!! json_encode(url('/')) !!};
$('body').tooltip({
    selector: '[data-popup="tooltip"]',
    trigger : 'hover'
});

document.addEventListener('DOMContentLoaded', function() {

  var is_mobile = window.matchMedia("only screen and (max-width: 760px)").matches;

  $.extend( $.fn.dataTable.defaults, {
    autoWidth: false,
    dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
    language:{
      search: '<span>Search:</span> _INPUT_',
      searchPlaceholder: 'Type to search...',
      lengthMenu: '<span>Show:</span> _MENU_',
      paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'}
    }
  });

  function update_data(){
    $('#page_loader_modal').modal();
    $.get(base_url + '/api/auth/main-module/list',$('#filter_form').serialize())
     .done(function(result){
      var table_row = '';
      $('.data_list_table').dataTable().fnClearTable();
      $('.data_list_table').dataTable().fnDestroy();
      if(result.status == 'success'){
        $.each(result.data, function(key,value){
          table_row += '<tr class="no-wrap">'+
                          '<td class="d-block d-sm-none"></td>'+
                          '<td class="text-center d-none d-sm-table-cell">'+ (++key) +'</td>'+
                          '<td >'+ value.Cabinet_Name +'</td>'+
                          '<td >'+ value.ShortName +'</td>'+
                          '<td >'+ value.Description +'</td>'+
                          '<td >'+ value.Url +'</td>'+
                          '<td >'+ value.AccessTo_Desc +'</td>'+
                          '<td >'+ (value.Image?'<img src="'+ base_url +'/uploads/main-module/'+value.Image +'" width="50px" height="40px">':'')+'</td>'+
                          '<td class="text-center">'+
                            '<button type="button" class="btn btn-outline btn-sm btn-clean btn-icon btn-icon-md action-btn bg-info-400 rounded-round text-info-800 update_record mr-2" data-id="'+ value.ID +'" data-popup="tooltip" data-placement="auto" data-animation="true" title="Modify Record"><i class="icon-pencil7"></i></button>'+
                            '<button type="button" class="btn btn-outline btn-sm btn-clean btn-icon btn-icon-md action-btn bg-danger-400 rounded-round text-danger-800 delete_record mr-2" data-id="'+ value.ID +'" data-popup="tooltip" data-placement="auto" data-animation="true" title="Remove Record"><i class="icon-trash"></i></button>'+
                          '</td>'+
                        '</tr>';
        });
      }
      $('.data_list_table').find('tbody').empty().append(table_row);
       if(is_mobile){
        $('.data_list_table').dataTable({
          destroy:true,
          "ordering": false,
          responsive: {
              details: {
                type: 'column'
              }
            },
          columnDefs: [
          {
            className: 'control',
            targets:   0,
          },
          {
             "targets": [2],
             "visible": false
          }
          ]
        });
       } else {
         $('.data_list_table').dataTable({
           destroy:true,
           "autoWidth": true,
           "ordering": false,
           columnDefs: [
             {
               className: 'control',
               orderable: false,
               targets:   0,
             },
             {
                "targets": [],
                "visible": false
             }
           ],
         });
        }
        $($.fn.dataTable.tables( true ) ).css('width', '100%');
        $('#page_loader_modal').modal('toggle');
      }).fail(function(xhr, status, error) {
        $('#page_loader_modal').modal('toggle');
        $('#server_response_message').text(error);
        $('#server_error_modal').modal();
      });

  }

  update_data();
  $(document).on("click",".filter_reports_filter",function(e){
    e.preventDefault();
    update_data();
  });

    $('.form-input-styled').uniform({
        fileButtonClass: 'action btn bg-pink-400',
        fileButtonHtml: '<i class="icon-plus2"></i>'
    });
    $('.cabinet_select2').select2({
      placeholder: "Search Cabinet",
      width: '100%',
      language: {
         noResults: function (params) {
           return "No Cabinet were found";
         }
       },
       allowClear: true,
       maximumSelectionSize: 1,
       // minimumInputLength:4,
       ajax: {
         url:  base_url + '/api/auth/cabinet/list',
         dataType: 'json',
         async: true,
         data:{
           pagination:false
         },
         data: function (keyword) {
           return {
             search_param : keyword.term,
             discontinue_tag : 'N'
           };
         },
         processResults: function (data) {
          return {
             results: $.map(data.data, function(value) {
               return {
                       text : value.Cabinet_Name,
                       id : value.CabinetID,
                  }
             })
          };
         },
         cache: true
       },
       escapeMarkup: function (markup) { return markup; },
    });

    $('.access_to_select2').select2({
      placeholder: "Search Access To",
      width: '100%',
      language: {
         noResults: function (params) {
           return "No records were found";
         }
       },
       allowClear: false,
     });

     $('.filter_access_to_select2').select2({
       placeholder: "Search Access To",
       width: '100%',
       language: {
          noResults: function (params) {
            return "No records were found";
          }
        },
        allowClear: false,
      });

    $(document).on('click','.update_record', function(e) {
      $(this).tooltip('hide');
      var id = $(this).attr('data-id');
      $.get(base_url + '/api/auth/main-module/list',{ 'id' : id}, function(result) {
          if(result.status == 'success' && result.data && result.response.type == 'data_found'){
            var data = result.data;
            $('#form_validation').bootstrapValidator('resetForm',true);
            $('#form_validation').bootstrapValidator('enableFieldValidators','cabinet_id',false);
            $('#form_validation').find('.cabinet_select2').empty().append(new Option(data[0].Cabinet_Name,data[0].CabinetID,true)).trigger('change');
            $('[name="name"]').val(data[0].ShortName).trigger('focus');
            $('[name="description"]').val(data[0].Description).trigger('focus');
            $('[name="url"]').val(data[0].Url).trigger('focus');
            $('[name="sorting_no"]').val(data[0].Sorting_No).trigger('focus');
            if (data[0].AccessTo) {
                $('#form_validation').find('.access_to_select2').val(data[0].AccessTo).trigger('change');
            } else {
              $('#form_validation').find('.access_to_select2').val('').trigger('change');
            }
            $('[name="id"]').val(data[0].ID);
          }
      });
      $('#module_manage').show();
      $('#module_list').hide();
      $('#form_validation').bootstrapValidator('enableFieldValidators','image',false);
    });

    $('#form_validation').bootstrapValidator({
       message: 'This value is not valid',
       excluded: [':disabled', ':hidden', ':not(:visible)'],
          fields: {
            cabinet_id : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'Cabinet ID is required'
                    },
                }
            },
            name : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'Short Name is required'
                    },
                }
            },
            description : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'Description is required'
                    },
                }
            },
            url : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'URL is required'
                    },
                }
            },
            sorting_no : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'Sort Number is required'
                    },
                }
            },
            access_to : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'Access to is required'
                    },
                }
            },
            image : {
              enabled : true,
              validators: {
                  notEmpty: {
                      message: 'File is required'
                  },
                  file: {
                   extension: 'jpeg,png,jpg',
                   type: 'image/jpeg,image/png',
                   maxSize: 5*1024*1024,
                   message: 'The selected file is not valid, it should be (JPEG or PNG)'
                 }
              }
            }

         }
       }).on('success.field.bv', function(e, data) {
           var $parent = data.element.parents('.form-group');
           $parent.removeClass('has-success');
       }).on('success.form.bv', function(e, data) {
         e.preventDefault();
         var $form = $(e.target);
         var bv = $form.data('bootstrapValidator');
         $('#form_submit_btn').hide();
         $('#form_process_btn').show();
         if($("[name='image']")[0].files.length > 0){
           var formData = new FormData($form[0]);
             $.ajax({
                 url: base_url + '/api/auth/main-module/store',
                 data: formData,
                 cache: false,
                 contentType: false,
                 processData: false,
                 type: 'POST',
                 success: function(result) {
                   $('#form_submit_btn').show();
                   $('#form_process_btn').hide();
                   if(result.status == 'success' && result.response.type == 'save_success'){
                     $('[name="id"]').val('');
                     $('#form_validation').bootstrapValidator('resetForm',true);
                     $('#form_validation').bootstrapValidator('enableFieldValidators','cabinet_id',false);
                     $('.cabinet_select2').val('').trigger('change');
                     $('#form_validation').bootstrapValidator('enableFieldValidators','cabinet_id',true);
                     $('.form-input-styled').uniform({
                         fileButtonClass: 'action btn bg-pink-400',
                         fileButtonHtml: '<i class="icon-plus2"></i>'
                     });
                     $.jGrowl(result.response.message, {
                        header: 'Success',
                        theme: 'bg-success alert-styled-left ',
                        position: 'top-right'
                     });
                     $('#module_manage').hide();
                     $('#module_list').show();
                     update_data();
                   } else if(result.status == 'failure' && (result.response.type == 'validation_errors' || result.response.type == 'duplicate_entry')){
                     $.jGrowl(result.response.message, {
                        header: 'Warning',
                        theme: 'bg-warning alert-styled-left ',
                        position: 'top-right'
                     });
                   } else {
                     $.jGrowl(result.response.message, {
                        header: 'Warning',
                        theme: 'bg-danger alert-styled-left ',
                        position: 'top-right'
                     });
                   }
                 }
             });
         }else {
           $.post(base_url + '/api/auth/main-module/store', $form.serialize())
           .done(function(result) {
             bv.disableSubmitButtons(false);
             $('#form_submit_btn').show();
             $('#form_process_btn').hide();
             if(result.status == 'success' && result.response.type == 'save_success'){
               $('[name="id"]').val('');
               $('#form_validation').bootstrapValidator('resetForm',true);
               $('#form_validation').bootstrapValidator('enableFieldValidators','cabinet_id',false);
               $('.cabinet_select2').val('').trigger('change');
               $('#form_validation').bootstrapValidator('enableFieldValidators','cabinet_id',true);
               $('.form-input-styled').uniform({
                   fileButtonClass: 'action btn bg-pink-400',
                   fileButtonHtml: '<i class="icon-plus2"></i>'
               });
               $.jGrowl(result.response.message, {
                  header: 'Success',
                  theme: 'bg-success alert-styled-left ',
                  position: 'top-right'
               });
               $('#module_manage').hide();
               $('#module_list').show();
               update_data();
             } else if(result.status == 'failure' && (result.response.type == 'validation_errors' || result.response.type == 'duplicate_entry')){
               $.jGrowl(result.response.message, {
                  header: 'Warning',
                  theme: 'bg-warning alert-styled-left ',
                  position: 'top-right'
               });
             } else {
               $.jGrowl(result.response.message, {
                  header: 'Warning',
                  theme: 'bg-danger alert-styled-left ',
                  position: 'top-right'
               });
             }
           }).fail(function(xhr, status, error) {
               bv.disableSubmitButtons(false);
               $('#page_loader_modal').modal('toggle');
               $('#form_submit_btn').show();
               $('#form_process_btn').hide();
               $('#server_response_message').text(error);
               $('#server_error_modal').modal();
           });
         }
       });

       $(document).on('click','.delete_record', function(e) {
         $(this).tooltip('hide');
         var id = $(this).attr('data-id');
         swal({
             text: "You want to Remove.",
             type: 'warning',
             showCancelButton: true,
             confirmButtonText: 'Yes',
             cancelButtonText: 'No, cancel!',
             confirmButtonClass: 'btn btn-success',
             cancelButtonClass: 'btn btn-danger',
             buttonsStyling: true
         }).then(function (result) {
           if(result.value == true) {
             $('#page_loader_modal').modal();
             $.post(base_url + '/api/auth/main-module/remove',{ 'id' : id}).done(function(result) {
               $('#page_loader_modal').modal('toggle');
                 if(result.status == 'success'){
                   update_data();
                   $.jGrowl(result.response.message, {
                      header: 'Success',
                      theme: 'bg-success alert-styled-left ',
                      position: 'top-right'
                   });
                 } else {
                   $.jGrowl(result.response.message, {
                      header: 'Failed',
                      theme: 'bg-danger alert-styled-left ',
                      position: 'top-right'
                   });
                 }
             }).fail(function(xhr, status, error) {
                 $('#page_loader_modal').modal('toggle');
                 $('#server_response_message').text(error);
                 $('#server_error_modal').modal();
             });
           }
         });
       });

       $(document).on('click','.add_new', function(e) {
         $('[name="id"]').val('');
         $('#form_validation').bootstrapValidator('resetForm',true);
         // $('#form_validation').bootstrapValidator('enableFieldValidators','cabinet_id',false);
         $('#form_validation').find('.cabinet_select2').val('').trigger('change');
         $('#form_validation').bootstrapValidator('enableFieldValidators','image',true);
         $('#form_validation').bootstrapValidator('enableFieldValidators','cabinet_id',true);
         $('#form_validation').find('.access_to_select2').val('').trigger('change');
         $('#module_manage').show();
         $('#module_list').hide();
       });
       $(document).on('click','.list_btn', function(e) {
        $('#module_manage').hide();
        $('#module_list').show();
       });
       // if(is_mobile){
       //    $('#module_manage').hide();
       // } else {
       //    $('#module_manage').show();
       // }


});

</script>
@stop