@extends('admin.layout.master')
@section('content')
<style>
    .dataTables_length{
       display: none !important;
   }

   .dataTables_filter{
       display: none !important;
   }
</style>


<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('admin.home')}}</a>
              <span class="bi bi-caret-right"></span>
              <span class="mx-2"> {{ trans('admin.countries') }} </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 d-flex align-items-center gap-2">
            <select class="form-select input-shadow rounded_c @error('lang') is-invalid @enderror fs-12px "
            name="lang_filter" id="lang_filter" onchange="lang();">
            <option value="">
                {{__('project.chose_language')}}
            </option>
            @foreach ($lang as $item)
            <option value="{{$item->abbr}}"  @if ($item->is_default == '1' || old('lang') ==
                $item->abbr) selected @endif>
                {{$item->name}}
            </option>
            @endforeach
        </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">
              <a class="nav-link text-primary fw-bld" href="{{url('/countries/add')}}">
                  <b class="bi-plus-square-fill me-1"></b>  {{ trans('admin.add_New') }}
              </a>
          </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:32:41')">
                              <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:32:41')">
                          <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.photo')}}</th>
                    <th>{{trans('admin.name')}}</th>
                    <th>{{trans('admin.status')}}</th>
                    <th class="text-end">{{trans('admin.action')}}</th>

                  </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
      </div>
    </div>
  </div>
</div>
</main>









<script type="text/javascript">
  var table = "";
  $(function() {
      table = $('.data-table').DataTable({
          processing: true,
          serverSide: true,
          "searching": false,
          "caseInsensitive": false,
          ajax: {
              url: "{{ url('countries') }}",
              type: 'GET',
              data: function(d) {
                  d.search_new = $('#search_new').val();
                  d.status_filter = $('#status_filter').val();
                  d.lang_filter = $('#lang_filter').val();
                  // console.log(d);
              }
          },
          columns: [
          {data: 'id', name: 'id'},
          {data: 'photo', name: 'photo'},
          {data: 'label', name: 'label'},
          {data: 'status', name: 'status'},
          {data: 'action', name: 'action', class:'text-end no-print', orderable: false, searchable: false},
      ],
          "lengthMenu": [
              [10, 20, 50, 70, 100, 200, 300, 400, 500, -1],
              [10, 20, 50, 70, 100, 200, 300, 400, 500, "All"]
          ]
      });

      $('body').on('change', '#no_of_entries', function(e) {
            $(".custom-select").html(`<option value='`+$(this).val()+`' selected></option>`).change();

        });
  });
  $('body').on('change', '#status_filter', function(e) {
      table.draw(true);
  });
  $('body').on('keyup', '#search_new', function(e) {
      table.draw(true);
  });
  $('body').on('change', '#lang_filter', function(e) {
      table.draw(true);
  });

  $('body').on('click', '.clear', function(e) {
      $('#search_new').val("");
      $('#status_filter').val("");
      $('#lang_filter').val("");

      table.draw(true);
  });
  </script>



@endsection
@section('custom-js')
@include('admin.countries.country_js')
@endsection