@extends('layouts.app')
@section('title','Signatures - Permission')
@section('pages')
<style type="text/css">
    .breadcrumb-title {
      border-right: none;
    }
</style>

    <!--breadcrumb-->
    <div class="page-breadcrumb row align-items-center justify-content-between mb-3 px-3 px-md-0">
      <div class="breadcrumb-title col-md-6"> Signatures Permission for Departments 
      </div>
      <div class="col-md-6">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb justify-content-md-end mb-0">
            <li class="breadcrumb-item"><i class="bi bi-info-circle-fill text-info show-help-support" data-id="107" data-bs-toggle="modal" data-bs-target="#commonModal"></i></li>
            <li class="breadcrumb-item" aria-current="page">Test Manager</li>
            <li class="breadcrumb-item active" aria-current="page"><i class="bi bi-dot"></i> Signature</li>
            <li class="breadcrumb-item active" aria-current="page"><i class="bi bi-dot"></i> Permission</li>
          </ol>
        </nav>
      </div>
    </div>
    <!--end breadcrumb-->

    <!-- main -->
    <div class="card style_table shadow-none radius-5 min-height">

        <div class="card-header py-3">

            @include('layouts.partials.nav-menu')

            <div class="row gx-2">

                <div class="col-lg-3 col-md-3 col-8">
                  <div class="position-relative">
                      <div class="position-absolute top-50 translate-middle-y search-icon px-3"><i class="bi bi-search"></i></div>
                      <input class="form-control ps-5" type="search" id="search" placeholder="Search">
                  </div>
                </div>

                <div class="col-lg-2 col-md-2 col-4 dataTables_length" id="example_length">
                    <i class="bi bi-funnel"></i>
                    <select class="form-select sorting sorting-box" id="" name="example_length" aria-controls="example">
                        <option value="10">Show: 10</option>
                        <option value="30">Show: 30</option>
                        <option value="50">Show: 50</option>
                    </select>
                </div>

                <div class="col-lg-7 col-md-7">
                    <div class="ms-auto float-md-end">
                      <div class="btn-group">
                          <a href="javascript:history.back()" class="btn btn-outline-secondary me-1"><i class="bx bx-arrow-back ms-0 me-1"></i>Back</a>
                      </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body" id="tables">
            @include('signatures.permission-table')

        <input type="hidden" name="hidden_page" id="hidden_page" value="1"/>
        <input type="hidden" name="hidden_column_name" id="hidden_column_name" value="name"/>
        <input type="hidden" name="hidden_sort_type" id="hidden_sort_type" value="asc"/>
    </div>
    <!-- end main -->

@endsection
@section('js')
<script>
  $(document).ready(function(){

    function clear_icon(){
      $('#id_icon').html('');
      $('#post_title_icon').html('');
    }

    function fetch_data(page, sort_type, sort_by, query){
      $.ajax({
        url:"?page="+page+"&sortby="+sort_by+"&sorttype="+sort_type+"&query="+query,
        success:function(data){
         $('#tables').html('');
         $('#tables').html(data);
         $(document).ready(function(){$.switcher();});
       }
      })
    }
     
    $('body').on('input change', '#search', function(){
        var query       = $('#search').val();
        var column_name = $('.sorting').val();
        var sort_type   = $('#hidden_sort_type').val();
        var page        = 1?1:(this).attr('href').split('page=')[1];
        fetch_data(page, sort_type, column_name, query);
    });

    $('body').on('change', '.sorting', function(){
        var column_name   = $(this).val();
        var order_type    = $(this).data('sorting_type');
        var reverse_order = '';
        var page          = 1?1:(this).attr('href').split('page=')[1];
        var query         = $('#search').val()?$('#search').val():'';
        fetch_data(page, reverse_order, column_name, query);
    });

    $('body').on('click', '.pager a', function(event){
        event.preventDefault();
        $('#hidden_page').val(page);
        var page        = $(this).attr('href').split('page=')[1];
        var column_name = $('.sorting').val()?$('.sorting').val():'';
        var sort_type   = $('#hidden_sort_type').val();
        var query       = $('#search').val()?$('#search').val():'';
        $('li').removeClass('active');
        $(this).parent().addClass('active');
        fetch_data(page, sort_type, column_name, query);
    });

  });
</script>
@endsection