@extends('admin.layout.master')
@section('content')
@include('admin/menu/menu_js')

<style>
  .dataTables_length{
        display: none !important;
    }
    .dataTables_filter {
    display: none;
  }
</style>
{{--
<div class="row justify-content-between align-items-center rounded bg-light shado-sm p-2 mx-2 mt-2">
    <div class="col-md-4 col-12 align-items-center  p-1 px-2">
        <a class='text-decoration-none fw-bold theme_link_color' href="/home">{{ trans('admin.Home') }}  </a> <span class="bi bi-caret-right theme_text_color"></span>
        <span class="fw-bold theme_text_color">{{ trans('admin.menu') }}</span>
    </div>
     <div class="col-md-4 col-12 md-mt-0 mt-1">
         <div class="row">
            <div class="col-md-6 col-12 md-mt-0 mt-1">
                <input type="text" class="filtertbl form-control form-control-sm rounded-pill" id="search_new" style="min-width:150px;" placeholder="{{trans('admin.search')}}">
            </div>
            <div class="col-md-5 col-12">
                <div class="row justify-content-between align-items-center">
                    @can('view /menu')
                    <div class="col-auto ml-md-auto">
                      <button class="btn btn-success rounded-pill btn-sm px-3" onclick="add_menu()">
                        {{trans('admin.add_New')}}
                      </button>
                    </div>
                    @endcan
                    <div class="col-md-2 col-3 mt-md-0 mt-1">
                        <div class="dropdown p-0">
                            <a class=" bi bi-three-dots-vertical fs-3 text-white bg-warning admin_css_dot d-flex justify-content-center align-items-center" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                            </a>
                            <ul class=" dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li> <a href="#" class="dropdown-item" onclick="jQuery('.data-table').print()"><i class="bi-printer mx-2"></i>
                                {{__('admin.print')}}</a>
                                </li>
                            <li>
                                <a class="dropdown-item" href="#" onclick="exportTable('data-table', 'pdf', '{{trans('menus')}} 2024-10-18 02:30:44')">  <i class="bi bi-file-earmark-pdf  mx-2"></i>
                                {{__('admin.PDF')}}
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#" onclick="exportTable('data-table', 'csv', '{{trans('menus')}} 2024-10-18 02:30:44')">
                                    <i class="bi bi-file-spreadsheet  mx-2"></i>
                                {{__('admin.excel_csv')}}
                                </a>
                            </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            </div>
     </div>
</div> --}}

<div class='bg-white rounded'>
  <div class="nav-scroller">
      <nav class="nav">
          <li class="nav-item d-flex align-items-center">
              <a class='nav-link fw-bold text-primary' href="{{url('/home')}}">{{trans('project.home')}}</a>
              <span class="bi bi-caret-right"></span>
              <span class="mx-2"> {{ trans('admin.menu') }} </span>
          </li>

          <li class="nav-item mx-auto me-2 d-flex align-items-center gap-2">
              <label> {{ trans('admin.show') }} </label>
              <select class="form-select form-select-sm" id="no_of_entries">
                  <option value="10" selected>10</option>
                  <option value="30">30</option>
                  <option value="50">50</option>
                  <option value="100">100</option>
                  <option value="200">200</option>
                  <option value="300">300</option>
                  <option value="400">400</option>
                  <option value="400">500</option>
                  <option value="-1">{{ trans('admin.all') }}</option>
              </select>
          </li>



          <li class="nav-item me-2">
              <input type="text" class="form-control form-control-sm" id="search_new" placeholder="{{trans('project.search')}}">
          </li>



          <li class="nav-item me-2">

            @can('insert /'.Request::path())
              <a class="nav-link text-primary fw-bld" onclick="add_menu()">
                  <b class="bi-plus-square-fill me-1"></b>  {{ trans('admin.add_New') }}
              </a>
              @endcan
          </li>

          <li class="nav-item">
              <a class="nav-link" data-bs-toggle="dropdown">
                  <b class="bi-box-arrow-up-right me-2"></b> {{ trans('admin.export') }}
              </a>
              <ul class="dropdown-menu">
                  <li>
                      <a class="dropdown-item" onclick="jQuery('.data-table').print()">
                          <i class="bi-printer mx-2"></i>
                          {{__('project.print')}}
                      </a>
                          <a class="dropdown-item" onclick="exportTable('data-table', 'pdf', '{{trans('home slider')}} 2024-10-18 02:30:44')">
                              <i class="bi bi-file-earmark-pdf mx-2"></i>
                              {{__('project.pdf')}}
                          </a>
                      <a class="dropdown-item" onclick="exportTable('data-table', 'csv', '{{trans('home slider')}} 2024-10-18 02:30:44')">
                          <i class="bi bi-file-spreadsheet mx-2"></i>
                          {{__('project.excel_csv')}}
                      </a>
                  </li>
              </ul>
          </li>
      </nav>
  </div>
</div>





<main class="px-0 scroll-y">
  <!-- body content  -->
  <div class="card rounded border-0">
    <div class="card-body pt-0">
      <div class="row">
        <div class="col-lg-12">
          <div class="table-responsive">
            <table class="table w-100 table-sm table-hover mb-0 table-bordered data-table">
              <thead class="bg-light">
                  <tr>
                    <th>{{trans('admin.id')}}</th>
                        <th>{{trans('admin.parent_menu')}}</th>
                        <th>{{trans('admin.name')}}</th>
                        <th>{{trans('admin.arabic_name')}}</th>
                        <th>{{trans('admin.link')}}</th>
                        <th>{{trans('admin.type')}}</th>
                        <th>{{trans('admin.status')}}</th>
                        <th class="text-end">{{trans('admin.actions')}}</th>
                  </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
      </div>
    </div>
  </div>
</div>
</main>

{{--
<main class="container-fluid px-0 scroll-y">
    <!-- body content  -->
    <div class="card card-invoice rounded border-0">
      <div class="card-body pt-0">
        <div class="row">
          <div class="col-lg-12">
            <div class="table-responsive">
              <table class="table w-100 table-sm table-hover mb-0 table-bordered data-table">
                <thead class="bg-light">
                    <tr>
                        <th>{{trans('admin.id')}}</th>
                        <th>{{trans('admin.parent_menu')}}</th>
                        <th>{{trans('admin.name')}}</th>
                        <th>{{trans('admin.arabic_name')}}</th>
                        <th>{{trans('admin.link')}}</th>
                        <th>{{trans('admin.type')}}</th>
                        <th>{{trans('admin.status')}}</th>
                        <th class="text-end">{{trans('admin.actions')}}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
        </div>
      </div>
    </div>
  </div>
</main> --}}


<script type="text/javascript">
  $(function () {
    table = $('.data-table').DataTable({
      processing: true,
      serverSide: true,
      ajax: "{{ route('menu') }}",
      columns: [
          {data: 'id', name: 'id'},
          {data: 'Parent', name: 'Parent'},
          {data: 'menu_name', name: 'Name'},
          {data: 'menu_ar', name: 'Arabic_name'},
          {data: 'route', name: 'link'},
          {data: 'Type', name: 'Type'},
          {data: 'status', name: 'status'},
          {data: 'action', name: 'action', class:'text-end no-print', orderable: false, searchable: false},
      ],
      "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
    });
  });
  $("#search_new").on("keyup search input paste cut", function() {
     table.search(this.value).draw();
  });
</script>

{!! modelBox("addMenu", trans('admin.add'),"box","status_msg","add_menu") !!}
{!! modelBox("editMenu", trans('admin.edit'),"box_edit","status_update","update_menu") !!}
@endsection