@extends('admin.template')

@section('sidebar')
  <aside id="sidebar" class="sidebar">

    <ul class="sidebar-nav" id="sidebar-nav">

      <li class="nav-item">
        <a class="nav-link collapsed" href="{{ url('admin') }}">
          <i class="bi bi-grid"></i>
          <span>Tableau de Bord</span>
        </a>
      </li><!-- End Dashboard Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-menu-button-wide"></i><span>Gestion des livres </span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="components-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="{{ url('admin/consulter_book') }}">
              <i class="bi bi-circle"></i><span>Livres disponibles </span>
            </a>
          </li>
          <li>
            <a href="{{ url('admin/add') }}">
              <i class="bi bi-circle"></i><span>Ajouter un livre</span>
            </a>
          </li>
          <li>
            <a href="{{ url('admin/supp') }}">
              <i class="bi bi-circle"></i><span>Livres supprimés</span>
            </a>
          </li>
          <li>
            <a href="{{ url('admin/attente') }}">
              <i class="bi bi-circle"></i><span>Livres en attente </span>
            </a>
          </li>


        </ul>


      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#forms-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-journal-text"></i><span>Documentations </span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="forms-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="{{ url('admin/add_document') }}">
              <i class="bi bi-circle"></i><span>Ajouter un document </span>
            </a>
          </li>
          <li>
            <a href="{{ url('admin/supp_document') }}">
              <i class="bi bi-circle"></i><span>Documents supprimés </span>
            </a>
          </li>
          <li>
            <a href="{{ url('admin/consulter') }}">
              <i class="bi bi-circle"></i><span>Documents disponibles </span>
            </a>
          </li>
        </ul>
      </li><!-- End Forms Nav -->
      <li class="nav-heading">Pages</li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="{{ route('profil', 0) }}">
          <i class="bi bi-person"></i>
          <span>Profil</span>
        </a>
      </li><!-- End Profile Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="{{ url('admin/pages-faq') }}">
          <i class="bi bi-question-circle"></i>
          <span>Aide</span>
        </a>
      </li><!-- End F.A.Q Page Nav -->


    </ul>

  </aside>
@endsection


@section('main')
  <main id="main" class="main">

    <div class="pagetitle">
      <h1>Profil</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ url('admin') }}">Accueil</a></li>
          <li class="breadcrumb-item">Utilisateur</li>
          <li class="breadcrumb-item active">Profil</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
      <div class="row">
        <div class="col-xl-4">

          <div class="card">
            <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">

              <img src="/assets/img/admin.jpg" alt="Profile" class="rounded-circle">
              <h2>A.Admin</h2>
            </div>
          </div>

        </div>

        <div class="col-xl-8">

          <div class="card">
            <div class="card-body pt-3">
              <!-- Bordered Tabs -->
              <ul class="nav nav-tabs nav-tabs-bordered">

                <li class="nav-item">
                  @if ($numero == 0)
                    <button class="nav-link active " data-bs-toggle="tab"
                      data-bs-target="#profile-overview">Aperçu</button>
                  @else
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-overview">Aperçu</button>
                  @endif
                </li>

                <li class="nav-item">
                  @if ($numero == 0)
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Modifier
                      profil</button>
                  @else
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-edit">Modifier
                      profil</button>
                  @endif
                </li>

                <li class="nav-item">
                  <a data-bs-toggle="tab" href="#profile-change-password" class="nav-link bouton">Changer
                    mot de passe</a>
                </li>


              </ul>
              <div class="tab-content pt-2">

                <div class="tab-pane fade @if ($numero == 0) show active @endif profile-overview"
                  id="profile-overview">


                  <h5 class="card-title">Détails du profil</h5>

                  <div class="row">
                    <div class="col-lg-4 col-md-4 label ">Nom</div>
                    <div class="col-lg-8 col-md-8">{{ $adminInfo->first()->lastName }}</div>
                  </div>

                  <div class="row">
                    <div class="col-lg-4 col-md-4 label ">Prénom</div>
                    <div class="col-lg-8 col-md-8">{{ $adminInfo->first()->firstName }}</div>
                  </div>

                  <div class="row">
                    <div class="col-lg-4 col-md-4 label">Email</div>
                    <div class="col-lg-8 col-md-8">{{ $adminInfo->first()->email }}</div>
                  </div>

                </div>

                <div class="tab-pane fade @if ($numero == 1) show active @endif profile-edit pt-3"
                  id="profile-edit">

                  <!-- Profile Edit Form -->
                  <form action="{{ route('changeprofile') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row mb-3">
                      <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Photo de
                        profil</label>
                      <div class="col-md-8 col-lg-9">
                        <img src="/assets/img/admin.jpg" alt="Profile">
                        <div class="pt-2">
                          <a href="#" class="btn btn-primary btn-sm" title="Upload new profile image"><i
                              class="bi bi-upload"></i></a>
                          <a href="#" class="btn btn-danger btn-sm" title="Remove my profile image"><i
                              class="bi bi-trash"></i></a>
                        </div>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="lastName" class="col-md-4 col-lg-3 col-form-label">Nom</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="lastName" type="text"
                          class="form-control @error('lastName') is-invalid @enderror" id="lastName"
                          value="{{ $adminInfo->first()->lastName }} ">
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="firstName" class="col-md-4 col-lg-3 col-form-label">Prénom</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="firstName" type="text"
                          class="form-control @error('firstName') is-invalid @enderror" id="firstName"
                          value=" {{ $adminInfo->first()->firstName }} ">
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="email" type="email" class="form-control" id="Email"
                          value="{{ $adminInfo->first()->email }}">
                      </div>
                    </div>

                    <div class="text-center">
                      <button type="submit" class="btn btn-primary">Sauvegarder
                        modifications</button>
                    </div>
                  </form><!-- End Profile Edit Form -->

                </div>
                @if (session()->has('infoAdmin'))
                  <script src="/js/jquery-3.2.1.min.js"></script>
                  <a type="button" id="lien1" data-bs-toggle="modal" data-bs-target="#confModal1"
                    style="display: none;">appui</a>
                  <script type="text/javascript">
                    $(window).on('load', function() {
                      $('#confModal1').modal('show');
                    });
                  </script>
                  <!-- Fenetre modale 1-->

                  <div class="modal fade" id="confModal1" tabindex="-1" role="dialog" aria-
                    labelledby="confModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title text-success" id="confModalLabel">Modification
                            enregistrée avec succès !</h5>
                          <button type="button" class="close" data-bs-dismiss="modal" aria- label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-success" data-bs-dismiss="modal">D'accord</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Fin fenetre modale 1-->
                @endif
                @if (session()->has('info'))
                  <script src="/js/jquery-3.2.1.min.js"></script>
                  <a type="button" id="lien2" data-bs-toggle="modal" data-bs-target="#confModal2"
                    style="display: none;">appui</a>
                  <script type="text/javascript">
                    $(window).on('load', function() {
                      $('#confModal2').modal('show');
                    });
                  </script>
                  <!-- Fenetre modale 2-->

                  <div class="modal fade" id="confModal2" tabindex="-1" role="dialog" aria-
                    labelledby="confModalLabel2" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title text-success" id="confModalLabel2">Mot de passe
                            modifié avec succès !</h5>
                          <button type="button" class="close" data-bs-dismiss="modal" aria- label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-success" data-bs-dismiss="modal">D'accord</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Fin fenetre modale 2-->
                @endif
                <div class="tab-pane fade pt-3" id="profile-change-password">
                  <!-- Change Password Form -->
                  <form method="post">
                    @csrf
                    <div class="row mb-3">
                      <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Mot de
                        passe actuel</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="password" type="password" placeholder="Mot de passe actuel"
                          class="form-control @error('password') is-invalid @enderror" required
                          autocomplete="current-password" id="currentPassword">
                      </div>
                    </div>

                    <div class="row mb-3">
                      <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">Nouveau mot
                        de passe</label>
                      <div class="col-md-8 col-lg-9">
                        <input id="newPassword" name="newPassword" type="password" placeholder="Nouveau mot de passe"
                          class="form-control @error('newPassword') is-invalid @enderror" required
                          autocomplete="current-password">
                      </div>

                    </div>

                    <div class="row mb-2">
                      <label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">Confirmer
                        le nouveau mot de passe </label>
                      <div class="col-md-8 col-lg-9">
                        <input name="renewPassword" type="password"
                          class="form-control @error('renewPassword') is-invalid @enderror" required
                          autocomplete="current-password" placeholder="Confirmer le mot de passe" id="renewPassword">
                      </div>
                    </div>
                    @if (session()->has('error'))
                      <div class="" style="color: red; text-align: center;">
                        {{ session('error') }}
                      </div><br>
                    @endif
                    <div class="text-center">
                      <button type="submit" class="btn btn-primary">Changer mot de passe </button>
                    </div>

                  </form><!-- End Change Password Form -->

                </div>

              </div><!-- End Bordered Tabs -->

            </div>
          </div>

        </div>
      </div>
    </section>
  </main>
@endsection