@extends('layouts.plusadmin')
@section('content')

<style>
.table-responsive,
.dataTables_scrollBody {
    overflow: visible !important;
}
 
.table-responsive-disabled .dataTables_scrollBody {
    overflow: hidden !important;
}

        .custom {
            font-size: 12px;
            font-family: Century Gothic;
        }
        .bottomcustom, .topcustom {
            font-size: 12px;
            font-family: Century Gothic;
        }

        .table-responsive {
          overflow-x: inherit;
        }   
        
        th, td { white-space: nowrap; }
        div.dataTables_wrapper {
            margin: 0 auto;
        }
     
        div.container {
            width: 80%;
        }  

</style>

<div class="main-panel">
  <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">List of Branch</h3>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Billboard</a></li>
          <li class="breadcrumb-item active" aria-current="page"> List of Branch </li>
        </ol>
      </nav>
    </div>
    <div class="row">
      <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">

             <div class="row">
                     
                  <div class="px-1">
                      <fieldset class="form-group position-relative">
                          <input type="text" class="form-control form-control-sm" placeholder="Branch ID" id= "branchid" name="branchid" style="height: 30px;">
                      </fieldset>
                  </div>                          
                  <div class="px-1">
                      <fieldset class="form-group position-relative">
                          <input type="text" class="form-control form-control-sm" placeholder="Branch" id= "branch" name="branch" style="height: 30px;">
                      </fieldset>
                  </div>  
                   <div class="px-1">
                      <fieldset class="form-group position-relative">
                          <input type="text" class="form-control form-control-sm" placeholder="Address" id= "address" name="address" style="height: 30px;">
                      </fieldset>
                  </div>
                  <div class="px-1">
                      <fieldset class="form-group position-relative">
                          <select class="form-control form-control-sm select2" id="progid" name = "progid" style="width: 100%; display: inline-block; height:30px;">
                            <option value = "">Select Program</option>
                            @foreach($programs as $programs1)
                                <option value = "{{ $programs1->progid}}">{{ $programs1->programname}}</option>
                            @endforeach    
                          </select>
                      </fieldset>
                  </div>  

                  <div class="px-1" >

                      <fieldset class="form-group position-relative">

                          <button type = "button" class="btn-xs btn-primary" name ="filter" id = "filter" style="font-size: 12px;"><i class="icofont icofont-job-search"></i> Search</button>
                          <button type = "button" class="btn-xs btn-warning" name ="reset" id = "reset" style="font-size: 12px;"><i class="icofont icofont-ui-rotation"></i> Show All</button>
                      </fieldset>
                  </div>  
          
              </div>

          </div>  


          <div class="card-body">
            <div class="row"> 
              <div class="px-1" >
                <button type = "button" class="btn-sm btn-success" onclick="window.location.href='{{ route('billboard.branches.create') }}'" style="font-size: 12px;"><i class="fa fa-plus"></i> Add New Branch</button>
                
              </div>        
            </div>
            <br>     

            <div class="table-responsive">
                <table  id="employee-grid" class="display compact custom" cellspacing="0" cellspacing="0" style="width:100%">
                    <thead>
                    <tr>
                        <th>Action</th>
                        <th>No</th>
                        <th>Branch</th>
                        <th>Program</th>
                        <th>Address</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>

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

    </div>
  </div>
  <!-- content-wrapper ends -->
  <!-- partial:../../partials/_footer.html -->
  <footer class="footer">
    <div class="d-sm-flex justify-content-center justify-content-sm-between">
      <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © St Joseph Drug 2021</span>
      <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"><a href="https://www.stjosephdrug.com/" target="_blank">Digital Signage</a> ver. JS 1.0</span>
    </div>
  </footer>
  <!-- partial -->
</div>

<!-- jQuery -->
<script src="{{ asset('admin/plugins/jquery/jquery.min.js') }}"></script> 

<script src="{{ asset('plusadmin/vendors/js/vendor.bundle.base.js') }}"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="{{ asset('plusadmin/vendors/jquery-bar-rating/jquery.barrating.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/chart.js/Chart.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.categories.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.fillbetween.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.stack.js') }}"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ asset('plusadmin/js/off-canvas.js') }}"></script>
<script src="{{ asset('plusadmin/js/hoverable-collapse.js') }}"></script>
<script src="{{ asset('plusadmin/js/misc.js') }}"></script>
<script src="{{ asset('plusadmin/js/settings.js') }}"></script>
<script src="{{ asset('plusadmin/js/todolist.js') }}"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="{{ asset('plusadmin/js/dashboard.js') }}"></script>

<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/dataTables.rowReorder.min.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/dataTables.responsive.min.css') }}"> 


<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/jquery.dataTables.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/buttons.dataTables.min.css') }}"> 

<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jszip.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/pdfmake.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/vfs_fonts.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.colVis.min.js') }}"></script> 

<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.rowReorder.min.js') }}"></script> 
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.responsive.min.js') }}"></script> 

<script>
$(document).ready(function(){

    fill_datatable();


    function fill_datatable(branchid = '', branch = '', address = '', progid = '')
    {
        var dataTable = $('#employee-grid').DataTable({
            //scrollY:        "300px",
            rowReorder: {
                selector: 'td:nth-child(2)'
            },
            responsive: true,            
            scrollX:        true,
            scrollCollapse: true,
            paging:         true,
            columnDefs: [
            //    { width: '20%', targets: 0 }
                  { targets: [0, 1], className: "text-center" },
            ],
            fixedColumns: true,

            processing: true,
            serverSide: true,
        dom: 'Blfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: [ 0, ':visible' ]
                }
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csvHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },            
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            
            'colvis'
        ], 
            "lengthMenu": [[10, 20, 30, 40, 50, 100, - 1], [10, 20, 30, 40, 50, 100, "All"]],
            "pageLength": 10,                  

            ajax:{
                url: "{{ route('billboard.branches.index') }}",
                data:{
                    branchid:branchid,
                    branch:branch, 
                    address:address,
                    progid:progid
                } 
            },
            columns: [
                {data: 'action', name: 'action', orderable: false, searchable: false},
                {
                    data:'branchid',
                    name:'branchid'
                },
                {
                    data:'branch',
                    name:'branch'
                },
                {
                    data:'programname',
                    name:'programname'
                },
                {
                    data:'address',
                    name:'address'
                }         

 
                
                

            ]
        });
    }

    $('#filter').click(function(){
        var branchid = $('#branchid').val();
        var branch = $('#branch').val();
        var address = $('#address').val();
        var progid = $('#progid').val();
        

        if(branchid != '' || branch != '' || address != '' || progid != '')
        {
            $('#employee-grid').DataTable().destroy();
            fill_datatable(branchid, branch, address, progid);
        }
        else
        {
            $('#employee-grid').DataTable().destroy();
            fill_datatable();
        }
    });

    $('#reset').click(function(){
        $('#branchid').val('');
        $('#branch').val('');
        $('#address').val('');
        $('#progid').val('');
        $('#employee-grid').DataTable().destroy();
        fill_datatable();
    });



});
</script>


@endsection