@extends('parent')

@section('content')

<div class="page-inner">
            <div class="page-header">
              <h3 class="fw-bold mb-3">Liste Textes Juridiques</h3>
              <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                  <a href="{{ route('dashboard') }}">
                    <i class="icon-home"></i>
                  </a>
                </li>
                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>

                <li class="nav-item">
                  <a href="{{ route('textes-juridiques.index') }}">Liste Textes Juridiques</a>
                </li>
              </ul>
            </div>
            <div class="row">

              <div class="col-md-12">
                <div class="card">
                  <div class="card-header">
                      <div class="d-flex align-items-center justify-content-end">
                          <!-- <h4 class="card-title">Institutions</h4> -->
                          <a href="{{ route('textes-juridiques.create') }}" class="btn btn-success btn-round">
                              <i class="fa fa-plus"></i>
                              Ajouter Texte Juridiques
                          </a>
                      </div>
                  </div>

                  <div class="card-body">



                    <div class="table-responsive">
                      <table
                        id="texteJuridiqueTable"
                        class="display table table-striped table-hover"
                      >
                        <thead>
                          <tr>
                          <th>Titre</th>
                          <th>Categorie</th>
                          <th>Sous-Categorie</th>
                          <th>Date creation</th>
                          <th>Année</th>
                          <th>Fichiers</th>
                            <th style="width: 10%">Action</th>
                          </tr>
                        </thead>

                        <tbody>
                        @foreach ($texteJuridiques as $texteJuridique)
                          <tr data-id="{{ $texteJuridique->id }}">
                              <td>{{ $texteJuridique->titre }}</td>
                              <td>{{ $texteJuridique->categorie->nom }}</td>
                              <td>{{ $texteJuridique->secteur?->nom }}</td>
                              <td>{{ \Carbon\Carbon::parse($texteJuridique->date_creation)->format('d-m-Y') }}</td>
                              <td>{{ $texteJuridique->annee_publication }}</td>
                              <td>
                                  <a href="{{ route('view.pdf', basename($texteJuridique->fichier_pdf)) }}"
                                      target="_blank"  data-bs-toggle="tooltip" title="Voir">
                                      <i class="fas fa-file-pdf" style="font-size: 30px; color: #1E3A34;"></i>
                                  </a>
                              </td>

                              <td>
                                <div class="form-button-action d-flex align-items-center">
                                    <a href="{{ route('textes-juridiques.edit', $texteJuridique->id) }}" class="me-3" data-bs-toggle="tooltip" title="Modifier">
                                        <i class="fa fa-edit" style="font-size: 25px; color: #9dbc69;"></i>
                                    </a>

                                    <form action="{{ route('textes-juridiques.destroy', $texteJuridique->id) }}" method="POST" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-link" onclick="return confirm('Voulez-vous vraiment supprimer ce texte juridique ?');"
                                            data-bs-toggle="tooltip" title="Supprimer">
                                            <i class="fas fa-trash" style="font-size: 25px; color: #e74c3c;"></i>
                                        </button>
                                    </form>
                                </div>
                              </td>
                          </tr>
                        @endforeach
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

@stop

@section('content-script')

<script>
      $(document).ready(function () {

        $("#texteJuridiqueTable").DataTable({
          pageLength: 5,
          order: [[2, "desc"]],
          language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            },
          initComplete: function () {
            this.api()
              .columns()
              .every(function () {
                var column = this;
                var select = $(
                  '<select class="form-select"><option value=""></option></select>'
                )
                  .appendTo($(column.footer()).empty())
                  .on("change", function () {
                    var val = $.fn.dataTable.util.escapeRegex($(this).val());

                    column
                      .search(val ? "^" + val + "$" : "", true, false)
                      .draw();
                  });

                column
                  .data()
                  .unique()
                  .sort()
                  .each(function (d, j) {
                    select.append(
                      '<option value="' + d + '">' + d + "</option>"
                    );
                  });
              });
          },
        });

        // Add Row
        $("#add-row").DataTable({
          pageLength: 5,
        });

        var action =
          '<td> <div class="form-button-action"> <button type="button" data-bs-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-title="Edit Task"> <i class="fa fa-edit"></i> </button> <button type="button" data-bs-toggle="tooltip" title="" class="btn btn-link btn-danger" data-original-title="Remove"> <i class="fa fa-times"></i> </button> </div> </td>';

        $("#addRowButton").click(function () {
          $("#add-row")
            .dataTable()
            .fnAddData([
              $("#addName").val(),
              $("#addPosition").val(),
              $("#addOffice").val(),
              action,
            ]);
          $("#addRowModal").modal("hide");
        });

      });
    </script>

@stop