@extends('content.dashboard.dashboards-analytics')

@section('content')
@section('page-script')
  <script>
    window.onload = function () {
      const queryString = window.location.search;
      const params = new URLSearchParams(queryString);
      const currentTerm = params.get('search') ?? '';
      const currentlength = params.get('length') ?? 10;
      $('#idsearch').val(currentTerm);
      $('#idlength').val(currentlength);
    };
    const input = document.getElementById('idsearch');
    input.addEventListener('keydown', function(event) {
      // Vérifier si la touche appuyée est "Enter"
      if (event.key === 'Enter') {
          loadPage()
      }
    });
    function loadPage(page = 1) {
      const url = "{{ url()->current() }}";
      const term = $('#idsearch').val();
      const length = $('#idlength').val();
      const queryString = '?page=' + page + '&search='+ term + '&length=' + length;
      window.location.href = url + queryString;
    }
  </script>
@endsection
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-11">
                <h4 class="py-1 mb-1">
                    <span class="text-muted fw-light"> <a href="/">Accueil</a></span> / <span> <a href="/tauxinterets">Type de plainte </a></span> / </span> <span class="breadcrumb-item active"><a href="#">Liste des types de plainte</a></span>
                  </h4>
                </div>
                <div class="col-sm-1">
                    @can('typeplainte.create')<a class="btn btn-primary float-right"
                       href="{{ route('typeplaintes.create') }}">
                       <i class="ti ti-plus" title="Ajouter un nouveau type de plainte"></i>
                    </a>@endcan
                </div>
            </div>
        </div>
    </section>

    <div class="content px-3">

        @include('flash::message')

        <div class="clearfix"></div>

        <div class="card">
            @include('typeplaintes.table')
        </div>
    </div>

@endsection