@extends('parent')


@section('content')
<div class="page-inner">
            <div class="page-header">
              <h3 class="fw-bold mb-3">Liste Des Institutions</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('institutions.index') }}">Institutions</a>
                </li>

                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>

                <li class="nav-item">
                  Liste Des Institutions
                </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('institutions.create') }}" class="btn btn-success btn-round">
                            <i class="fa fa-plus"></i>
                            Ajouter Institution
                        </a>
                    </div>
                </div>

                  <div class="card-body">

                    <div class="table-responsive">
                      <table
                        id="secteurTable"
                        class="display table table-striped table-hover"
                      >
                        <thead>
                          <tr>
                          <th>Nom</th>
                          <th>Type</th>                          
                            <th style="width: 10%">Action</th>
                          </tr>
                        </thead>

                        <tbody>
                        @foreach ($institutions as $institution)
                          <tr data-id="{{ $institution->id }}">
                            <td>{{ $institution->nom }}</td>
                            <td>{{ $institution->type->nom }}</td>
                          
                            <td>
                              <div class="form-button-action">
                                  <a href="{{ route('institutions.edit', $institution->id) }}" data-bs-toggle="tooltip" title="Modifier">
                                      <button type="button" class="btn btn-link btn-primary btn-lg">
                                        <i class="fa fa-edit" style="font-size: 25px; color: #9dbc69;"></i>
                                      </button>
                                  </a>

                                  <button type="button" class="btn btn-link btn-info btn-lg btn-view"
                                        data-id="{{ $institution->id }}"
                                        data-nom="{{ $institution->nom }}"
                                        data-type="{{ $institution->type->nom }}"
                                        data-telephone="{{ $institution->telephone }}"
                                        data-email="{{ $institution->email }}"
                                        data-url="{{ $institution->url }}"
                                        data-adresse="{{ $institution->adresse }}"
                                        data-region="{{ $institution->region }}"
                                        data-service_offerts="{{ $institution->service_offerts }}"
                                        data-access_modalities="{{ $institution->access_modalities }}"
                                        data-description="{{ $institution->description }}"
                                        data-bs-toggle="tooltip" title="Voir détails">
                                    <i class="fas fa-eye" style="font-size: 25px; color: #3498db;"></i>
                                </button>

                                  <form action="{{ route('institutions.destroy', $institution->id) }}" method="POST" style="display:inline;">
                                      @csrf
                                      @method('DELETE')
                                      <button type="submit" class="btn btn-link" onclick="return confirm('Voulez-vous vraiment supprimer cette institution ?');"
                                          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>

          <!-- Modal Structure -->
          <div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="viewModalLabel">Détails de l'Institution</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <p><strong>Nom:</strong> <span id="modalInstitutionNom"></span></p>
                  <p><strong>Type:</strong> <span id="modalInstitutionType"></span></p>
                  <p><strong>Téléphone:</strong> <span id="modalInstitutionTelephone"></span></p>
                  <p><strong>Url:</strong> <span id="modalInstitutionUrl"></span></p>
                  <p><strong>Email:</strong> <span id="modalInstitutionEmail"></span></p>
                  <p><strong>Adresse:</strong> <span id="modalInstitutionAdresse"></span></p>
                  <p><strong>Région:</strong> <span id="modalInstitutionRegion"></span></p>
                  <p><strong>Services Offerts:</strong> <span id="modalInstitutionServiceOfferts"></span></p>
                  <p><strong>Modalités d'Accès:</strong> <span id="modalInstitutionAccessModalities"></span></p>
                  <p><strong>Description:</strong> <span id="modalInstitutionDescription"></span></p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-success btn-round" data-bs-dismiss="modal">Fermer</button>
                </div>
              </div>
            </div>
          </div>



@stop

@section('content-script')

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

        // Add Row
        $("#secteurTable").DataTable({
          pageLength: 5,
          order: [[2, "desc"]],
          language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            }
        });

      });
    </script>

@stop