@extends('content.dashboard.dashboards-analytics')

@section('title', 'create user')

@section('title', 'Selects and tags - Forms')

<!-- Vendor Styles -->
@section('vendor-style')
@vite([
  // 'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/tagify/tagify.scss',
  // 'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.scss',
  // 'resources/assets/vendor/libs/typeahead-js/typeahead.scss'
])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
@vite([
  // 'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/tagify/tagify.js',
  // 'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.js',
  // 'resources/assets/vendor/libs/typeahead-js/typeahead.js',
  // 'resources/assets/vendor/libs/bloodhound/bloodhound.js'
])
@endsection

<!-- Page Scripts -->
@section('page-script')
{{-- @vite([
  'resources/assets/js/forms-selects.js',
  'resources/assets/js/forms-tagify.js',
  'resources/assets/js/forms-typeahead.js'
]) --}}
 <script>
  var input = document.querySelector('#tagifyRoles');
  window.onload = function() {
    var availableRoles = @json($roles); // Les rôles venant du backend

    var tagify = new Tagify(input, {
      whitelist: availableRoles,
      maxTags: 10,
      dropdown: {
        maxItems: 100,
        classname: '',
        enabled: 0,
        closeOnSelect: false
      }
    });
    // tagify.loadOriginalValues({{$user->roles->pluck('name')}});
  };


  input.addEventListener('change', function(e) {
      var roles = e.target.value.split(',').map(tag => tag.trim());
      console.log("ROLES : ", roles);
      document.querySelector('input[name="roles"]').value = JSON.stringify(roles);
  });
 </script>
@endsection

@section('content')
<section class="content-header">
  <div class="container-fluid">
      <div class="row mb-2">
          <div class="col-sm-12">
          <h4 class="py-1 mb-1">
              <span class="text-muted fw-light"> <a href="/">Accueil</a></span> / <span> <a href="{{route('utilisateurs.index')}}">Utilisateurs</a></span> / </span> <span class="breadcrumb-item active"><a href="#">Modifier un utilisateur</a></span>
            </h4>
          </div>
      </div>
  </div>
</section>
<!-- Role cards -->
<div class="content px-3">
  <!-- Role Table -->
  <div class="card">
    <!-- Add role form -->
    <form action="{{route('utilisateurs.update', $user->id)}}" method="POST">
      @csrf
      @method('PUT')
      <div class="card-body">
        <div class="row">
          <div class="form-floating col-6 mb-3">
            <input type="text" id="nomUtilisateur" name="nom" class="form-control @error('nom') is-invalid @enderror"
              placeholder="Saisir le nom de l'utilisateur :" value="{{ $user->nom}}"/>
            <label for="nomUtilisateur">Nom :</label>
          </div>
          <div class="form-floating col-6 mb-3">
            <input type="text" id="prenomUtilisateur" name="prenom" class="form-control @error('prenom') is-invalid @enderror"
              placeholder="Saisir le prénom de l'utilisateur :" value="{{ $user->prenom}}" />
            <label for="prenomUtilisateur">Prénom :</label>
          </div>
          <div class="form-floating col-6 mb-3">
            <input type="text" id="telephoneUtilisateur" name="telephone" class="form-control @error('telephone') is-invalid @enderror"
              placeholder="Saisir le numéro de téléphone de l'utilisateur :" value="{{ $user->telephone}}"/>
            <label for="telephoneUtilisateur">N° de téléphone :</label>
          </div>
          <div class="form-floating col-6 mb-3">
            <input type="text" id="adresseEmail" name="email" class="form-control @error('email') is-invalid @enderror"
              placeholder="Saisir l'adresse e-mail de l'utilisateur :" value="{{ $user->email}}"/>
            <label for="prenomUtilisateur">Adresse e-mail :</label>
          </div>
          <div class="form-floating col-12">
            <input type="text" id="tagifyRoles" name="roles" class="form-control @error('roles') is-invalid @enderror"
              placeholder="Choisir les rôles de l'utilisateur :" value="{{$user->roles->pluck('name')}}"/>
            <label for="tagifyRoles">Rôles :</label>
          </div>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-end">
        <i class="btn btn-primary waves-effect waves-light waves-input-wrapper" style="color:rgb(255, 255, 255);background:rgba(0, 0, 0, 0)">
          <input class="waves-button-input" type="submit" value="Save" style="background-color:rgba(0,0,0,0);">
        </i>
        <a href="{{route('utilisateurs.index')}}" class="btn btn-default">Cancel</a>
      </div>
    </form>
    <!--/ Add role form -->
  </div>
  <!--/ Role Table -->
</div>
<!--/ Role cards -->
@endsection