@layout('layouts/main')
@set('title', 'Compte')

@section('body')

<main class="m-24">

  @!component('components/flash')

  <h1 class="text-4xl font-bold mb-9">Welcome {{ auth.user.pseudo }}</h1>

  <a href="{{ route('home') }}"
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
    >return to home page</a>

  <div>
    <h2 class="text-2xl font-bold mb-3 mt-9">Here is your personal information:</h2>
    <p>pseudo : {{ auth.user.pseudo }}</p>
    <p>email : {{ auth.user.email }}</p>
    <p>created at : <span id="formattedDate"></span></p>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const createdAt = "{{ auth.user.createdAt }}";
      const maDate = createdAt.substring(8, 10) + '/' + createdAt.substring(5, 7) + '/' + createdAt.substring(0, 4);
      document.getElementById('formattedDate').innerText = maDate;
    });
  </script>
  

  <div id="settings">
    <h2 class="text-2xl font-bold mb-5 mt-9">You can modify your personal information:</h2>

    @component('components/form/form', {
      'action': 'modifpseudo',
      'method': 'post',
      'flash': 'not',
    }) 
      @!component('components/form/field', {
        'label': 'Pseudo :',
        'name': 'pseudo',
        'type': 'text',
        'required': true,
        'placeholder': 'new pseudo',
      })
      @!component('components/form/button', {
        'type': 'submit',
        'text': 'Envoyer',
      })
    @end

    <div class="mt-5"></div>

    @component('components/form/form', {
      'action': 'modifemail',
      'method': 'post',
      'flash': 'not',
    }) 
      @!component('components/form/field', {
        'label': 'Email :',
        'name': 'email',
        'type': 'text',
        'required': true,
        'placeholder': 'new email',
      })
      @!component('components/form/button', {
        'type': 'submit',
        'text': 'Envoyer',
      })
    @end
  </div>



  <div class="mt-12">
    <img class="h-32 w-32 rounded-full" src="{{ auth.user.avatarUrl }}" alt="">

    <form action="" method="post" enctype="multipart/form-data" class="mt-4">
      <label for="avatar">Avatar :</label>
      <input type="file" name="avatar" id="avatar">

      <button 
        type="submit"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
      >Valider
      </button>
    </form>
  </div>

  <div class="mt-12">
    <h2 class="text-2xl font-bold mb-3 mt-9">Delete your compte :</h2>
    <a href="{{ route('delete') }}"
    class="inline-block bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
      Delete
    </a>
  </div>


</main>

@end