@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="/remboursements">Remboursement</a></span> / </span> <span class="breadcrumb-item active"><a href="#">Liste des remboursements</a></span>
                  </h4>
                  </div>
                <div class="col-sm-1">
                    @can('remboursement.create')<a class="btn btn-primary float-right"
                       href="{{ route('remboursements.create') }}">
                       <i class="ti ti-plus" title="Ajouter un nouveau remboursement"></i>
                    </a>@endcan
                </div>
            </div>
        </div>
    </section>

<!-- Formulaire de filtrage par période -->
@can('remboursement.extract')
<div class="container-fluid py-3 bg-light border rounded mb-2">
    <h5 class="mb-2">Filtrer les remboursements par période</h5>
    <form action="{{ route('remboursements.extraireRemboursement') }}" method="post" class="mb-3">
        @csrf
        <div class="row">
            <!-- Date de début -->
            <div class="col-md-4 mb-2">
                <label for="date_debut" class="form-label">Date de début</label>
                <input type="date" name="date_debut" id="date_debut" class="form-control" required>
            </div>
            <!-- Date de fin -->
            <div class="col-md-4 mb-2">
                <label for="date_fin" class="form-label">Date de fin</label>
                <input type="date" name="date_fin" id="date_fin" class="form-control" required>
            </div>
            <!-- Bouton Extraire -->
           <div class="col-md-4 d-flex align-items-end mb-0">
                <div class="dropdown">
                    <button class="btn btn-success dropdown-toggle w-100" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                        Extraire
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <li>
                            <button type="submit" name="format" value="excel" class="dropdown-item">Excel</button>
                        </li>
                        <li>
                            <button type="submit" name="format" value="pdf" class="dropdown-item">PDF</button>
                        </li>
                        <li>
                            <button type="submit" name="format" value="csv" class="dropdown-item">CSV</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>
@endcan

    <div class="content px-3">

        @include('flash::message')

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

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

@endsection