{% include 'partials/header.html.twig' %}

    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/vfs_fonts.js') }}"></script>

    <script src="{{ asset('assets/libs/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">

    <link rel="stylesheet" href="{{ asset('assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">
    <script src="{{ asset('assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>

      <div class="body-wrapper">

<div class="container-fluid">
  <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
    <div class="card-body px-4 py-3">
      <div class="row align-items-center">
        <div class="col-9">
          <h4 class="fw-semibold mb-8">Relevé de temps</h4>
        </div>
        <div class="col-3">
            <div class="text-center">
                <a class="btn btn-light" href="{{path('employe_index')}}"><i class="ti ti-arrow-bar-to-left fs-5"></i></a>
            </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card overflow-hidden">
    <div class="card-body">
      <div class="filters mb-3">
        <select id="filterType" class="form-select w-auto d-inline-block">
          <option value="week">Semaine</option>
          <option value="month">Mois</option>
        </select>
        <input type="date" id="filterDate" class="form-control w-auto d-inline-block" />
        <button id="applyFilter" class="btn btn-primary">Filtrer</button>
      </div>

      <div class="table-responsive mb-4  rounded-1">
                    
        <table id="list_temps" class="table text-nowrap mb-0 align-middle w-100" >
            <thead>
              <tr>
                <th><iconify-icon icon="solar:danger-triangle-broken" class="fs-7"></iconify-icon></th>
                <th>Date</th>
                <th>Heures planifiées</th>
                <th>Heures pointées</th>
                <th>Temps de pause</th>
                <th>Total</th>
              </tr>
            </thead>
            <tbody>
                                          

            </tbody>
            <tfoot>
              <tr>
                <th><iconify-icon icon="solar:danger-triangle-broken" class="fs-7"></iconify-icon></th>
                <th>Date</th>
                <th>Heures planifiées</th>
                <th>Heures pointées</th>
                <th>Temps de pause</th>
                <th>Total</th>
              </tr>
            </tfoot>
          </table>
        </div>

        <i class="ti ti-clock-off text-danger fs-5" title="Sortie manquante"></i> <span class="text-danger">Pointage de sortie manquant</span><br/>
        <i class="ti ti-alert-circle text-warning fs-5" title="Sortie manquante"></i> <span class="text-warning">Pointage en retard</span><br/>
        <i class="ti ti-coffee text-primary fs-5" title="Sortie manquante"></i> <span class="text-primary">Temps de pause excessif</span><br/>
    </div>
  </div>
</div> 

{% include 'partials/modal/ajax_modal.html.twig' %}
    
  <script>
    const listeTime = $('#list_temps').DataTable({
    paging: true,
    searching: false,
    ordering: false,
    info: true,
    lengthChange: false,
    pageLength: 20,
    processing: true,
    serverSide: true,
    ajax: {
        url: '{{path('ajax_list_activites_by_user')}}',
        type: 'GET',
        cache: false,
        data: function (d) {
            d.emp = '{{user.idtoken}}';
            d.filterType = $('#filterType').val();
            d.filterDate = $('#filterDate').val();
        }
    },
    columns: [ 
        { data: 'warning' },
        { data: 'date' },
        { data: 'planning' },
        { data: 'pointages' },
        { data: 'pauses' },
        { data: 'total' },
    ],
    dom: 'Bfrtip', // Affiche les boutons en haut du tableau
        buttons: [
            {
                extend: 'excel',
                text: 'Exporter en Excel',
                filename: 'export_employes', // Nom du fichier exporté en Excel
                className: 'btn btn-success'
            },
            {
                extend: 'pdf',
                text: 'Exporter en PDF',
                filename: 'export_employes', // Nom du fichier exporté en PDF
                className: 'btn btn-danger'
            },
            {
                extend: 'print',
                text: 'Imprimer',
                className: 'btn btn-info'
            }
        ],
    language: {
        "info": "Voir _START_ à _END_ de _TOTAL_ enregistrements",
        "infoEmpty": "Voir 0 à 0 de 0 enregistrement",
        "search": "Rechercher:",
        "paginate": {
            "first": "Premier",
            "last": "Dernier",
            "next": "Suivant",
            "previous": "Précédent"
        },
        "infoFiltered": '(filtrées de _MAX_ types de document au total)',
        "zeroRecords": "Aucun enregistrement correspondante trouvé",
        "emptyTable": "Aucun enregistrement n'est enregistré",
    },
});

$('#applyFilter').on('click', function () {
    console.log($('#filterType').val()+' / '+$('#filterDate').val());
    listeTime.ajax.reload();
});

</script>
<script src="{{ asset('assets/js/bundle/employe/contrat.js') }}"></script>
<script src="{{ asset('assets/js/bundle/employe/employe_view.js') }}"></script>
{% include 'partials/footer.html.twig' %}