@extends('layout.master')
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">
    <style>
      .more_lang .lang:hover a{
        color:#fff !important;
      }
      .category-more-btn{
        padding: 5px !important;
        font-weight: 600 !important;
        border-radius: 5px !important; 
      }
    </style>
@endsection
@section('main_content')
  <!-- Container-fluid starts-->
  <div class="container-fluid">
    <div class="edit-profile">
      <div class="row">
        <div class="col-xl-12  project-list">
            <div class="card">
                <div class="card-header">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i data-feather="home"></i></a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active"> Category Management</li>
                  </ol>
                    <div class="row">
                        <div class="col-sm-4">
                            <h3>Category</h3>
                        </div>
                        <div class="col-sm-8" style="text-align:right;">
                          <div class="translate_wrapper">
                        <div class="current_lang">
                            <div class="btn btn-primary btn-sm category-more-btn"><i data-feather="list"></i></div>
                        </div>
                        <div class="more_lang" style="z-index:999999999;">
                          
                          @if(auth()->user()->can('categories.create'))
                            <div class="lang" data-value="es">
                              <i data-feather="plus-square"></i>
                              <a href="{{route('categories.create')}}" class="lang-txt ml-2" style="margin-left:10px;">Create</a>
                            </div>
                          @endif
                          @if(auth()->user()->can('sizes.index'))
                            <div class="lang" data-value="es">
                              <i data-feather="plus-square"></i>
                              <a href="{{route('sizes.index')}}" class="lang-txt ml-2" style="margin-left:10px;">Sizes</a>
                            </div>
                          @endif
                          @if(auth()->user()->can('gst.index'))
                            <div class="lang" data-value="es">
                              <i data-feather="plus-square"></i>
                              <a href="{{route('gst.index')}}" class="lang-txt ml-2" style="margin-left:10px;">Gst</a>
                            </div>
                          @endif
                          @if(auth()->user()->can('hsncodes.index'))
                            <div class="lang" data-value="es">
                              <i data-feather="plus-square"></i>
                              <a href="{{route('hsncodes.index')}}" class="lang-txt ml-2" style="margin-left:10px;">Hsn Code</a>
                            </div>
                          @endif
                          @if(auth()->user()->can('attributes.index'))
                            <div class="lang" data-value="es">
                              <i data-feather="plus-square"></i>
                              <a href="{{route('attributes.index')}}" class="lang-txt ml-2" style="margin-left:10px;">Attributes</a>
                            </div>
                          @endif
                      </div>
                  </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                  <div class="row w-100" style="width: 100%; clear: both;height: 100%;overflow: hidden;">
                    <div class="form-group col-md-3 float-left">
                      <label><strong>Name :</strong></label>
                      <input type="search" id='search' class="form-control searchEmail" placeholder="Enter name">
                    </div>
                    <div class="form-group col-md-3 float-left" style="margin-left: 10px;">
                      <label><strong>Status :</strong></label>
                      <select id='status' class="form-control">
                          <option value="">--Select Status--</option>
                          <option value="1">Active</option>
                          <option value="0">In-Active</option>
                      </select>
                    </div>
                  </div>
                  <hr class="w-100" style="margin-top: 20px;">
                  <div class="table-responsive theme-scrollbar">
                      <table class="display nowrap" id="example" style="width:100%">
                          <thead>
                              <th>#</th>
                              <th>Name</th>
                              <th>Parent</th>
                              <th>Status</th>
                              <th>Action</th>  
                          </thead>
                          <tbody>

                          </tbody>
                      </table>
                  </div>
                </div>
            </div>
        </div>
    </div>
  </div>   
@endsection
@section('scripts')
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    $(document).ready(function ($) {
      var table = $('#example').DataTable({
          processing: true,
          serverSide: true,
          ordering: true,
          searching: false,
          language: {
            paginate: {
              next: '&#8594;', // or '→'
              previous: '&#8592;' // or '←' 
            }
          },
          ajax: {
            url: "{{ route('categories.index') }}",
            data: function (d) {
                  d.status = $('#status').val(),
                  d.search = $('input[type="search"]').val()
              }
          },
          columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'parent', name: 'parent'},
            {data: 'status', name: 'status'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
      }); 
      $('#status').change(function(){
          table.draw();
      });
      
      $(".searchEmail").keyup(function(){
          table.draw();
      }); 
    });
</script>
@endsection