@extends('layouts/horizontalLayout')

@section('title', 'User Profile - Profile')

<!-- Vendor Styles -->
@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.scss'
])
@endsection

<!-- Page Styles -->
@section('page-style')
@vite(['resources/assets/vendor/scss/pages/page-profile.scss'])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
@vite(['resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'])
@endsection

<!-- Page Scripts -->
@section('page-script')
@vite(['resources/assets/js/pages-profile.js'])
@endsection

@section('content')
<h4 class="py-3 mb-4">
  <span class="text-muted fw-light">Profil utilisateur /</span> Mon profil
</h4>


<!-- Header -->
<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="user-profile-header-banner">
        <img src="{{ asset('storage/profils/' . Auth::user()->lien_profil) }}" alt="Banner image" class="rounded-top">
      </div>
      <div class="user-profile-header d-flex flex-column flex-sm-row text-sm-start text-center mb-4">
        <div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
          <img src="{{ asset('storage/profils/' . Auth::user()->lien_profil) }}" alt="user image" class="d-block h-auto ms-0 ms-sm-4 rounded user-profile-img">
        </div>
        <div class="flex-grow-1 mt-3 mt-sm-5">
          <div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-4 flex-md-row flex-column gap-4">
            <div class="user-profile-info">
              <h4>@if (Auth::check())
                {{ Auth::user()->prenom }} {{ Auth::user()->nom }}
                @else
                John Doe
                @endif
              </h4>
              <ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-2">
                <li class="list-inline-item d-flex gap-1">
                  <i class='ti ti-color-swatch'></i> Email : {{ Auth::user()->email }}
                </li>
                <li class="list-inline-item d-flex gap-1">
                  <i class='ti ti-map-pin'></i> Téléphone : {{ Auth::user()->telephone }}
                </li>
                <li class="list-inline-item d-flex gap-1">
                  <i class='ti ti-calendar'></i> Inscrits le : {{ Auth::user()->created_at }}
                </li>
              </ul>
            </div>
            <!-- <a href="javascript:void(0)" class="btn btn-primary">
              Mettre à jour mon profil &thinsp;<i class='ti ti-pencil me-1'></i>
            </a> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--/ Header -->

<!-- Navbar pills -->
<!-- <div class="row">
  <div class="col-md-12">
    <ul class="nav nav-pills flex-column flex-sm-row mb-4">
      <li class="nav-item"><a class="nav-link active" href="javascript:void(0);"><i class='ti-xs ti ti-user-check me-1'></i> Informations personnelles</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><i class='ti-xs ti ti-users me-1'></i> Image de profil</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><i class='ti-xs ti ti-layout-grid me-1'></i> Mot de passe</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><i class='ti-xs ti ti-link me-1'></i> Connections</a></li>
    </ul>
  </div>
</div> -->
<!--/ Navbar pills -->

<!-- User Profile Content -->
<!-- <div class="row">
  <div class="col-xl-12 col-lg-6 col-md-6">

    <div class="card mb-4">
      <div class="card-body">
        <small class="card-text text-uppercase">A propos de </small>
        <ul class="list-unstyled mb-4 mt-3">
          <li class="d-flex align-items-center mb-3"><i class="ti ti-user text-heading"></i><span class="fw-medium mx-2 text-heading">Nom complet :</span> <span>{{ Auth::user()->prenom }} {{ Auth::user()->nom }}</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-check text-heading"></i><span class="fw-medium mx-2 text-heading">Statut :</span> <span>Actif</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-crown text-heading"></i><span class="fw-medium mx-2 text-heading">Role :</span> <span>Utilisateur</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-flag text-heading"></i><span class="fw-medium mx-2 text-heading">Pays :</span> <span>Burkina Faso</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-file-description text-heading"></i><span class="fw-medium mx-2 text-heading">Langue :</span> <span>Français</span></li>
        </ul>
        <small class="card-text text-uppercase">Contacts</small>
        <ul class="list-unstyled mb-4 mt-3">
          <li class="d-flex align-items-center mb-3"><i class="ti ti-phone-call"></i><span class="fw-medium mx-2 text-heading">Contact :</span> <span>{{ Auth::user()->telephone }}</span></li>
          <li class="d-flex align-items-center mb-3"><i class="ti ti-mail"></i><span class="fw-medium mx-2 text-heading">Email :</span> <span>{{ Auth::user()->email }}</span></li>
        </ul>
      </div>
    </div>
  </div>
</div> -->
<!--/ User Profile Content -->
<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-pills flex-column flex-sm-row mb-4">
      <li class="nav-item">
        <a class="nav-link active" href="javascript:void(0);" id="tab-personal-info">
          <i class='ti-xs ti ti-user-check me-1'></i> Informations personnelles
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0);" id="tab-avatar">
          <i class='ti-xs ti ti-users me-1'></i> Image de profil
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0);" id="tab-password">
          <i class='ti-xs ti ti-layout-grid me-1'></i> Mot de passe
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0);" id="tab-connections">
          <i class='ti-xs ti ti-link me-1'></i> Connexions
        </a>
      </li>
    </ul>
  </div>
  <div class="row">
    <div class="col-md-12">
      <!-- Section Informations personnelles -->
      <div id="section-personal-info" class="tab-content">
        <h4>Informations personnelles</h4>
        <form action="{{ route('profile.update', $redevable->id) }}" method="POST">
          @csrf
          @method('PUT')
          <input type="hidden" name="id" value="{{ $redevable->id }}">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group mb-3">
                <label for="code_foner">Code Foner</label>
                <input type="text" class="form-control" id="code_foner" name="code_foner" value="{{ $redevable->code_foner }}" required readonly>
              </div>
              <div class="form-group mb-3">
                <label for="nom_redevable">Nom</label>
                <input type="text" class="form-control" id="nom_redevable" name="nom_redevable" value="{{ $redevable->nom_redevable }}" required readonly>
              </div>
              <div class="form-group mb-3">
                <label for="prenom_redevable">Prénom</label>
                <input type="text" class="form-control" id="prenom_redevable" name="prenom_redevable" value="{{ $redevable->prenom_redevable }}" required readonly>
              </div>
              <div class="form-group mb-3">
                <label for="date_naissance">Date de naissance</label>
                <input type="date" class="form-control" id="date_naissance" name="date_naissance" value="{{ $redevable->date_naissance }}" required readonly>
              </div>
              <div class="form-group mb-3">
                <label for="cnib_redevable">Numéro CNIB</label>
                <input type="text" class="form-control" id="cnib_redevable" name="cnib_redevable" value="{{ $redevable->cnib_redevable }}" readonly>
              </div>
              <div class="form-group mb-3">
                <label for="nip_redevable">NIP</label>
                <input type="text" class="form-control" id="nip_redevable" name="nip_redevable" value="{{ $redevable->nip_redevable }}" readonly>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group mb-3">
                <label for="code_ine">Code INE</label>
                <input type="text" class="form-control" id="code_ine" name="code_ine" value="{{ $redevable->code_ine }}">
              </div>
              <div class="form-group mb-3">
                <label for="sexe_redevable">Sexe</label>
                <select class="form-control" id="sexe_redevable" name="sexe_redevable" required>
                  <option value="M" {{ $redevable->sexe_redevable == 'M' ? 'selected' : '' }}>Masculin</option>
                  <option value="F" {{ $redevable->sexe_redevable == 'F' ? 'selected' : '' }}>Féminin</option>
                </select>
              </div>
              <div class="form-group mb-3">
                <label for="lieu_naissance">Lieu de naissance</label>
                <input type="text" class="form-control" id="lieu_naissance" name="lieu_naissance" value="{{ $redevable->lieu_naissance }}">
              </div>
              <div class="form-group mb-3">
                <label for="lieu_residence">Lieu de résidence</label>
                <input type="text" class="form-control" id="lieu_residence" name="lieu_residence" value="{{ $redevable->lieu_residence }}">
              </div>
              <div class="form-group mb-3">
                <label for="email_redevable">Email</label>
                <input type="email" class="form-control" id="email_redevable" name="email_redevable" value="{{ $redevable->email_redevable }}">
              </div>
              <div class="form-group mb-3">
                <label for="telephone_redevable">Téléphone</label>
                <input type="text" class="form-control" id="telephone_redevable" name="telephone_redevable" value="{{ $redevable->telephone_redevable }}">
              </div>
            </div>
          </div>
          <div class="text-end"><button type="submit" class="btn btn-primary mt-3">Mettre à jour</button></div>
        </form>
      </div>

      <!-- Section Image de profil -->
      <div id="section-avatar" class="tab-content" style="display: none;">
        <h4>Changer l'image de profil</h4>
        <form action="{{ route('profil.update') }}" method="POST" enctype="multipart/form-data">
          @csrf
          <div class="form-group">
            <label for="lien_profil">Sélectionner une nouvelle image</label>
            <input type="file" class="form-control" id="lien_profil" name="lien_profil" accept="image/*" required>
          </div>
          <div class="text-end"><button type="submit" class="btn btn-primary mt-3">Mettre à jour</button></div>
        </form>
      </div>

      <!-- Section Mot de passe -->
    <div id="section-password" class="tab-content" style="display: none;">
    <h4 class="mb-1">Reset Password 🔒</h4>
    <p class="mb-4">for <span class="fw-medium">{{ Auth::user()->email }}</span></p>
    {{--<form id="formAuthentication" class="mb-3" action="{{ route('profile.password') }}" method="POST"> --}}
    <form id="formAuthentication" action="{{ route('profile.password', $user->id) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="mb-3 form-password-toggle">
            <label class="form-label" for="new_password">Nouveau mot de passe</label>
            <div class="input-group input-group-merge">
                <input type="password" id="new_password" class="form-control" name="new_password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" required />
                <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
            </div>
            <div id="new_password_error" class="text-danger mt-2" style="display: none;"></div>
        </div>

        <div class="mb-3 form-password-toggle">
            <label class="form-label" for="new_password_confirmation">Confirmer le nouveau mot de passe</label>
            <div class="input-group input-group-merge">
                <input type="password" id="new_password_confirmation" class="form-control" name="new_password_confirmation" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" required />
                <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
            </div>
            <div id="confirm_password_error" class="text-danger mt-2" style="display: none;"></div>
        </div>

        <div class="text-end"><button type="submit" class="btn btn-primary mt-3">Mettre à jour</button></div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('formAuthentication');

    form.addEventListener('submit', function (e) {
        // Réinitialiser les messages d'erreur
        document.getElementById('new_password_error').style.display = 'none';
        document.getElementById('confirm_password_error').style.display = 'none';

        const newPassword = document.getElementById('new_password').value;
        const confirmPassword = document.getElementById('new_password_confirmation').value;

        // Vérification de la longueur
        if (newPassword.length < 8) {
            document.getElementById('new_password_error').innerText = 'Le mot de passe doit contenir au moins 8 caractères.';
            document.getElementById('new_password_error').style.display = 'block';
            e.preventDefault(); // Empêche l'envoi du formulaire
            return;
        }

        // Vérification de la présence d'au moins une lettre
        if (!/[a-zA-Z]/.test(newPassword)) {
            document.getElementById('new_password_error').innerText = 'Le mot de passe doit contenir au moins une lettre.';
            document.getElementById('new_password_error').style.display = 'block';
            e.preventDefault();
            return;
        }

        // Vérification de la présence d'au moins un chiffre
        if (!/[0-9]/.test(newPassword)) {
            document.getElementById('new_password_error').innerText = 'Le mot de passe doit contenir au moins un chiffre.';
            document.getElementById('new_password_error').style.display = 'block';
            e.preventDefault();
            return;
        }

        // Vérification de la présence d'au moins un caractère spécial
        if (!/[\W_]/.test(newPassword)) {
            document.getElementById('new_password_error').innerText = 'Le mot de passe doit contenir au moins un caractère spécial.';
            document.getElementById('new_password_error').style.display = 'block';
            e.preventDefault();
            return;
        }

        // Vérification de la correspondance des mots de passe
        if (newPassword !== confirmPassword) {
            document.getElementById('confirm_password_error').innerText = 'Les mots de passe doivent correspondre.';
            document.getElementById('confirm_password_error').style.display = 'block';
            e.preventDefault();
            return;
        }
    });
});
</script>

      <!-- Section Connexions -->
      <div id="section-connections" class="tab-content" style="display: none;">
        <h4>Connexions aux réseaux sociaux</h4>
        {{-- <form action="{{ route('profile.connections') }}" method="POST"> --}}
        @csrf
        <div class="form-group">
          <label for="facebook">Facebook</label>
          <input type="text" class="form-control" id="facebook" name="facebook" value="{{ auth()->user()->facebook }}">
        </div>
        <div class="form-group">
          <label for="twitter">Twitter</label>
          <input type="text" class="form-control" id="twitter" name="twitter" value="{{ auth()->user()->twitter }}">
        </div>
        <div class="form-group">
          <label for="linkedin">LinkedIn</label>
          <input type="text" class="form-control" id="linkedin" name="linkedin" value="{{ auth()->user()->linkedin }}">
        </div>
        <div class="text-end"><button type="submit" class="btn btn-primary mt-3">Mettre à jour</button></div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  document.getElementById('tab-personal-info').addEventListener('click', function() {
    setActiveTab(this);
    showSection('personal-info');
  });
  document.getElementById('tab-avatar').addEventListener('click', function() {
    setActiveTab(this);
    showSection('avatar');
  });
  document.getElementById('tab-password').addEventListener('click', function() {
    setActiveTab(this);
    showSection('password');
  });
  document.getElementById('tab-connections').addEventListener('click', function() {
    setActiveTab(this);
    showSection('connections');
  });

  function setActiveTab(element) {
    // Retirer la classe active de tous les onglets
    document.querySelectorAll('.nav-link').forEach(function(link) {
      link.classList.remove('active');
    });

    // Ajouter la classe active à l'onglet cliqué
    element.classList.add('active');
  }

  function showSection(section) {
    // Masquer toutes les sections
    document.querySelectorAll('.tab-content').forEach(function(content) {
      content.style.display = 'none';
    });

    // Afficher la section correspondant à l'onglet cliqué
    document.getElementById('section-' + section).style.display = 'block';
  }

  // Afficher par défaut la section "Informations personnelles"
  showSection('personal-info');
</script>
@endsection