@extends('auth::layoutsbs4.main',['page_title' => 'Auth::Manage Menu'])
@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"> Manage Menu </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">Manage Menu</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>Manage Menu</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="main_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 Menu</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>Sub Module <span class="text-danger">*</span></label>
                <select class="form-control sub_module_select2" name="sub_module_id"></select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>Menu Name <span class="text-danger">*</span></label>
                <input type="text" name="menu_name" class="form-control" placeholder="Enter Menu Name">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>Main Menu</label>
                <select class="form-control main_menu_select2" name="parent_id"></select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>Icon Name</label>
                <input type="text" name="icon_name" class="form-control" placeholder="Enter Icon Name">
              </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>Link Path </label>
                 <input type="text" name="link" class="form-control" placeholder="Enter Link Path">
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group row">
                <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="main_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 Menu</a>
        </div>
      </div>
      <div class="card-body p-2">
        <form id="filter_form">
          <div class="row">
            <div class="col-md">
              <div class="form-group">
                <label>Cabinet</label>
                <select class="form-control cabinet_select2" name="cabinet_id"></select>
              </div>
            </div>
            <div class="col-md">
              <div class="form-group">
                <label>Sub Module </label>
                <select class="form-control sub_module_select2" name="sub_module_id"></select>
              </div>
            </div>
            <div class="col-md">
              <div class="form-group">
                <label>Main Menu </label>
                <select class="form-control main_menu_select2" name="parent_id"></select>
              </div>
            </div>
            <div class="col-md">
              <div class="form-group">
                <label>Status </label>
                <select class="form-control status_select2" name="status">
                  <option value="%">All</option>
                  <option value="A">Active</option>
                  <option value="I">In-Active</option>
                </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>Sub Module</th>
                  <th>Main Menu</th>
                  <th>Menu Name</th>
                  <th>Icon</th>
                  <th>Sort Number</th>
                  <th>Link Path</th>
                  <th>Status</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/manage-menu/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){
          var status = '';
          if (value.Status == 'A') {
            status = '<button type="button" class="btn btn-outline bg-success-400 border-success-400 text-success-800 btn-icon legitRipple btn-sm make_inactive rounded-round" data-id="'+ value.ID +'" data-popup="tooltip" data-placement="auto" data-animation="true" title="Make InActive" ><i class="icon-check"></i></button>';
          }else {
            status = '<button type="button" class="btn btn-outline bg-danger-400 border-danger-400 text-danger-800 btn-icon btn-sm legitRipple make_active rounded-round" data-id="'+ value.ID +'" data-popup="tooltip" data-placement="auto" data-animation="true" title="Make Active" ><i class="icon-cross3"></i></button>';
          }
          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.SubModuleName +'</td>'+
                          '<td >'+ value.Parent_Manu +'</td>'+
                          '<td >'+ value.Menu_Name +'</td>'+
                          '<td >'+ value.Icon_Name +'</td>'+
                          '<td >'+ value.Sorting_No +'</td>'+
                          '<td >'+ value.Link +'</td>'+
                          '<td >'+ status +'</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>'
    });

    $('.status_select2').select2();
    $('.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; },
    });

    $('.sub_module_select2').select2({
      placeholder: "Search Sub Module",
      width: '100%',
      language: {
         noResults: function (params) {
           return "No Sub Module were found";
         }
       },
       allowClear: true,
       maximumSelectionSize: 1,
       // minimumInputLength:4,
       ajax: {
         url:  base_url + '/api/auth/sub-module/list',
         dataType: 'json',
         async: true,
         data:{
           pagination:false
         },
         data: function (keyword) {
           return {
             search_param : keyword.term,
           };
         },
         processResults: function (data) {
          return {
             results: $.map(data.data, function(value) {
               return {
                       text : value.ShortName + ' - ' + value.MainModuleName,
                       id : value.ID,
                  }
             })
          };
         },
         cache: true
       },
       escapeMarkup: function (markup) { return markup; },
    });

    $('.main_menu_select2').select2({
      placeholder: "Search Main Menu",
      width: '100%',
      language: {
         noResults: function (params) {
           return "No Main Menu were found";
         }
       },
       allowClear: true,
       maximumSelectionSize: 1,
       // minimumInputLength:4,
       ajax: {
         url:  base_url + '/api/auth/manage-menu/list',
         dataType: 'json',
         async: true,
         data:{
           pagination:false
         },
         data: function (keyword) {
           return {
             search_param : keyword.term,
             sub_module_id : $('.sub_module_select2').val()
           };
         },
         processResults: function (data) {
          return {
             results: $.map(data.data, function(value) {
               return {
                       text : value.Menu_Name,
                       id : value.ID,
                  }
             })
          };
         },
         cache: true
       },
       escapeMarkup: function (markup) { return markup; },
    });


    $(document).on('click','.update_record', function(e) {
      $(this).tooltip('hide');
      var id = $(this).attr('data-id');
      $.get(base_url + '/api/auth/manage-menu/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','sub_module_id',false);
            $('.sub_module_select2').empty().append(new Option(data[0].SubModuleName,data[0].SubModuleId,true)).trigger('change');
            if (data[0].Parent_Id == 0) {
              $('.main_menu_select2').val('').trigger('change');
            }else {
              $('.main_menu_select2').empty().append(new Option(data[0].Parent_Manu,data[0].Parent_Id,true)).trigger('change');
            }
            $('[name="menu_name"]').val(data[0].Menu_Name).trigger('focus');
            $('[name="icon_name"]').val(data[0].Icon_Name).trigger('focus');
            $('[name="sorting_no"]').val(data[0].Sorting_No).trigger('focus');
            $('[name="link"]').val(data[0].Link).trigger('focus');
            $('[name="id"]').val(data[0].ID);
          }
      });
      $('#main_manage').show();
      $('#main_list').hide();
    });

    $('#form_validation').bootstrapValidator({
       message: 'This value is not valid',
       excluded: [':disabled', ':hidden', ':not(:visible)'],
          fields: {
            sub_module_id : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'Sub Module is required'
                    },
                }
            },
            menu_name : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'Short Name is required'
                    },
                }
            },
            icon_name : {
                enabled :false,
                  validators: {
                    notEmpty: {
                        message: 'Icon Name is required'
                    },
                }
            },
            sorting_no : {
                enabled :true,
                  validators: {
                    notEmpty: {
                        message: 'Sort Number is required'
                    },
                }
            },
            link : {
                enabled :false,
                  validators: {
                    notEmpty: {
                        message: 'Link Path is required'
                    },
                }
            },
         }
       }).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();
         $.post(base_url + '/api/auth/manage-menu/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','sub_module_id',false);
             $('.sub_module_select2').val('').trigger('change');
             $('.main_menu_select2').val('').trigger('change');
             $('#form_validation').bootstrapValidator('enableFieldValidators','sub_module_id',true);
             $.jGrowl(result.response.message, {
                header: 'Success',
                theme: 'bg-success alert-styled-left ',
                position: 'top-right'
             });
             $('#main_manage').hide();
             $('#main_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','.make_active', function(e) {
         $(this).tooltip('hide');
         var id = $(this).attr('data-id');
         var current_row = $(this);
         $.post(base_url + '/api/auth/manage-menu/status',{ 'id' : id, 'status' : 'A' }, function(result) {
             if(result.status == 'success' && result.response.type == 'save_success'){
               $(current_row).replaceWith('<button type="button" class="btn btn-sm btn-outline bg-success-400 border-success-400 text-success-800 btn-icon legitRipple make_inactive rounded-round" data-id="'+ id +'" data-popup="tooltip" data-placement="auto" data-animation="true" title="Make InActive" ><i class="icon-check"></i></button>');
               $.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'
               });
             }
         });
       });

       $(document).on('click','.make_inactive', function(e) {
         $(this).tooltip('hide');
         var id = $(this).attr('data-id');
         var current_row = $(this);
         $.post(base_url + '/api/auth/manage-menu/status',{ 'id' : id, 'status' : 'I'}, function(result) {
             if(result.status == 'success' && result.response.type == 'save_success'){
               $(current_row).replaceWith('<button type="button" class="btn btn-sm btn-outline bg-danger-400 border-danger-400 text-danger-800 btn-icon legitRipple make_active rounded-round" data-id="'+ id +'" data-popup="tooltip" data-placement="auto" data-animation="true" title="Make Active" ><i class="icon-cross3"></i></button>');
               $.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'
               });
             }
         });
       });

       $(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/manage-menu/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) {
         $('#form_validation').bootstrapValidator('resetForm',true);
         $('#form_validation').bootstrapValidator('enableFieldValidators','sub_module_id',false);
         $('.sub_module_select2').val('').trigger('change');
         $('.main_menu_select2').val('').trigger('change');
         $('#form_validation').bootstrapValidator('enableFieldValidators','sub_module_id',true);
         $('#main_manage').show();
         $('#main_list').hide();
       });
       $(document).on('click','.list_btn', function(e) {
         $('#main_manage').hide();
         $('#main_list').show();
       });
       if(is_mobile){
          $('#main_manage').hide();
       } else {
          $('#main_list').show();
       }


});

</script>
@stop