@extends('layouts.admin.app')

@section('title', 'Établissements')

@section('content')

<div class="row justify-content-md-center">

    <x-banner>
        <x-slot name="title">
            Gestion des comptes des établissements
        </x-slot>
    </x-banner>

    <div class="col-md-10 col-lg-8">
        <div class="dashbord-main bg-light my-4 p-5">

            <!-- Button trigger modal -->
            <button type="button" class="btn btn-lg btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#newAccountModal">
                Ajouter un compte
            </button>

            <div class="dashbord-table">
                <table id="table-establishments" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th style="width: 20px"></th>
                            <th>Établissement</th>
                            <th>Pseudo</th>
                            <th class="text-center" style="width: 40px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="newAccountModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Ajouter un nouveau compte</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="" id="accountModalForm">
            <div class="alert alert-danger d-none" role="alert">
                <ul></ul>
              </div>
            <div class="mb-3">
                <label for="establishment" class="form-label">Établissement</label>
                <select class="form-select" aria-label="Default select example" id="establishment">
                    <option selected value="">Cliquez ici</option>
                    <option value="Boulle">Boulle</option>
                    <option value="Estienne">Estienne</option>
                    <option value="Duperré">Duperré</option>
                    <option value="Ferrandi">Ferrandi</option>
                    <option value="Guillaume Tirel">Guillaume Tirel</option>
                    <option value="Lycée Diderot">Lycée Diderot</option>
                    <option value="Les Gobelins">Les Gobelins</option>
                    <option value="La FEMIS">La FEMIS</option>
                    <option value="ENSCI – Les ateliers">ENSCI – Les ateliers</option>
                    <option value="ENSAD">ENSAD</option>
                    <option value="ENS AAMA – Olivier de Serres">ENS AAMA – Olivier de Serres</option>
                    <option value="Louis-le-Grand">Louis-le-Grand</option>
                    <option value="Henri IV">Henri IV</option>
                    <option value="Saint Louis">Saint Louis</option>
                    <option value="Jean-Baptiste Say">Jean-Baptiste Say</option>
                  </select>
                  <div class="invalid-feedback">
                    Veuiller sélectionner un établissement.
                  </div>
              </div>
              <div class="mb-3">
                <label for="pseudo" class="form-label">Pseudo</label>
                <input type="text" class="form-control" id="pseudo" placeholder="entrer un nouveau pseudo">
                <div class="invalid-feedback">
                    Veuiller entrer un pseudo.
                </div>
              </div>
              <div class="mb-3">
                <label for="password" class="form-label">Mot de passe</label>
                <span class="float-end">
                    <a href="" id="showPassword">Afficher</a> | <a href="" id="generatePassword">Générer</a>
                </span>
                <input type="password" class="form-control" id="password" placeholder="entrer un mot de passe">
                <div class="invalid-feedback">
                    Veuiller entrer un mot de passe.
                </div>
              </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="button" id="addNewAccount" class="btn btn-primary">Ajouter</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="editAccountModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modifiez un compte</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="" id="accountModalForm">
            <div class="alert alert-danger d-none" role="alert">
                <ul></ul>
              </div>
            <div class="mb-3">
                <label for="editEstablishment" class="form-label">Établissement</label>
                <select class="form-select" aria-label="Default select example" id="editEstablishment" disabled>
                    <option selected value="">Cliquez ici</option>
                    <option value="Boulle">Boulle</option>
                    <option value="Estienne">Estienne</option>
                    <option value="Duperré">Duperré</option>
                    <option value="Ferrandi">Ferrandi</option>
                    <option value="Guillaume Tirel">Guillaume Tirel</option>
                    <option value="Lycée Diderot">Lycée Diderot</option>
                    <option value="Les Gobelins">Les Gobelins</option>
                    <option value="La FEMIS">La FEMIS</option>
                    <option value="ENSCI – Les ateliers">ENSCI – Les ateliers</option>
                    <option value="ENSAD">ENSAD</option>
                    <option value="ENS AAMA – Olivier de Serres">ENS AAMA – Olivier de Serres</option>
                    <option value="Louis-le-Grand">Louis-le-Grand</option>
                    <option value="Henri IV">Henri IV</option>
                    <option value="Saint Louis">Saint Louis</option>
                    <option value="Jean-Baptiste Say">Jean-Baptiste Say</option>
                  </select>
                  <div class="invalid-feedback">
                    Veuiller sélectionner un établissement.
                  </div>
              </div>
              <div class="mb-3">
                <label for="editPseudo" class="form-label">Pseudo</label>
                <input type="text" class="form-control" id="editPseudo" placeholder="entrer un nouveau pseudo">
                <div class="invalid-feedback">
                    Veuiller entrer un pseudo.
                </div>
              </div>
              <div class="mb-3">
                <label for="editPassword" class="form-label">Mot de passe</label>
                <span class="float-end">
                    <a href="" id="showEditPassword">Afficher</a> | <a href="" id="editGeneratePassword">Générer</a>
                </span>
                <input type="password" class="form-control" id="editPassword" placeholder="entrer un mot de passe">
                <div class="invalid-feedback">
                    Veuiller entrer un mot de passe.
                </div>
              </div>
              <input type="hidden" name="" id="editAccountId">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="button" id="editAccount" class="btn btn-primary">Modifiez</button>
        </div>
      </div>
    </div>
  </div>

@endsection

@push('styles')
    <!-- custom script -->
    {{-- <link rel="stylesheet" href="{{ asset('css/admin/apply.css') }}"> --}}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css"/>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap5.min.css">
@endpush

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js" integrity="sha512-csNcFYJniKjJxRWRV1R7fvnXrycHP6qDR21mgz1ZP55xY5d+aHLfo9/FcGDQLfn2IfngbAHd8LdfsagcCqgTcQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>
    <!-- custom script -->
    <script src="{{ asset('js/admin/establishments.js') }}"></script>
@endpush