@extends('layouts.master')

@section('title')
    Opérateurs
@endsection

@section('content')
<div class="container-fluid">
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h5 class="m-0 font-weight-bold text-dark text-center">
        Modification du profil de "{{ $user->username }}"
      </h5>
    </div>

    <div class="card-body">
      <form method="POST" action="{{ route('profile.update', ['user'=>$user->id]) }}">
        @csrf
        @method('PUT')

        <!-- Username / Nom -->
        <div class="row justify-content-center">
          <div class="col-sm-5 mb-3">
            <label>Nom d'utilisateur</label>
            <input type="text" name="username"
                   class="form-control @error('username') is-invalid @enderror"
                   value="{{ $user->username }}" required>
          </div>

          <div class="col-sm-5 mb-3">
            <label>Nom & Prénoms</label>
            <input type="text" name="name"
                   class="form-control @error('name') is-invalid @enderror"
                   value="{{ $user->name }}" required>
          </div>
        </div>

        <!-- Email -->
        <div class="row justify-content-center">
          <div class="col-sm-6 mb-3">
            <label>Email</label>
            <input type="email" name="email"
                   class="form-control @error('email') is-invalid @enderror"
                   value="{{ $user->email }}" required>
          </div>
        </div>

        <!-- Mot de passe -->
        <div class="row justify-content-center">
          <div class="col-sm-5 mb-3">
            <label>Nouveau mot de passe</label>
            <div class="input-group">
              <input type="password" id="password" name="password"
                     class="form-control @error('password') is-invalid @enderror"
                     placeholder="Laisser vide si inchangé">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary toggle-password" type="button" data-target="password">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
            </div>
            @error('password')
              <small class="text-danger">{{ $message }}</small>
            @enderror
          </div>

          <div class="col-sm-5 mb-3">
            <label>Confirmer le mot de passe</label>
            <div class="input-group">
              <input type="password" id="password_confirm" name="password_confirm"
                     class="form-control"
                     placeholder="Confirmez le mot de passe">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary toggle-password" type="button" data-target="password_confirm">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Boutons -->
        <div class="row justify-content-center mt-4">
          <div class="col-sm-4">
            <button type="submit" class="btn btn-primary btn-block">
              Mettre à jour
            </button>
          </div>
          <div class="col-sm-4">
            <a href="{{ route('home') }}" class="btn btn-danger btn-block">
              Retour
            </a>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

@if(session('success'))
<script>
document.addEventListener("DOMContentLoaded", function () {
  Swal.fire({
    icon: 'success',
    title: 'Succès',
    text: "{{ session('success') }}",
    timer: 2500,
    showConfirmButton: false
  }).then(() => {
    window.location.href = "{{ route('home') }}";
  });
});
</script>
@endif


<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".toggle-password").forEach(btn => {
    btn.addEventListener("click", function () {
      const input = document.getElementById(this.dataset.target);
      const icon = this.querySelector("i");

      if (input.type === "password") {
        input.type = "text";
        icon.classList.replace("fa-eye", "fa-eye-slash");
      } else {
        input.type = "password";
        icon.classList.replace("fa-eye-slash", "fa-eye");
      }
    });
  });
});
</script>

@endsection