@extends('layouts.master')

@section('content')
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Paramètres du compte /</span> Compte
  </h4>

  <div class="row">
    <div class="col-md-12">
      <ul class="nav nav-pills flex-column flex-md-row mb-3">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0);">
            <i class="bx bx-user me-1"></i> Compte
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#" >
            <i class="bx bx-bell me-1"></i> Notifications
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="bx bx-link-alt me-1"></i> Connexions
          </a>
        </li>
      </ul>

      <div class="card mb-4">
        <h5 class="card-header">Détails du profil</h5>
        <!-- Account -->
        <div class="card-body">
          <div class="d-flex align-items-start align-items-sm-center gap-4">
            <img src="{{ asset('media/assets/img/avatars/1.png') }}" class="d-block rounded"
                  height="100" width="100" id="uploadedAvatar" />
            <div class="button-wrapper">
              <label for="upload" class="btn btn-primary me-2 mb-4" tabindex="0">
                <span class="d-none d-sm-block">Télécharger une nouvelle photo</span>
                  <i class="bx bx-upload d-block d-sm-none"></i>
                  <input type="file" id="upload" class="account-file-input" hidden
                          accept="image/png, image/jpeg" />
              </label>

              <button type="button" class="btn btn-outline-secondary account-image-reset mb-4">
                <i class="bx bx-reset d-block d-sm-none"></i>
                <span class="d-none d-sm-block">Réinitialiser</span>
              </button>

              <p class="text-muted mb-0">
                JPG, GIF ou PNG autorisés. Taille maximale de 800K
              </p>
            </div>
          </div>
        </div>

        <hr class="my-0" />

        <div class="card-body">
          <form id="formAccountSettings" method="POST" 
                action="{{ url('updateprofil/'.auth()->user()->id)}}">
                @csrf
                @method('PUT')
            <div class="row">

              <div class="mb-3 col-md-6">
                <label for="firstName" class="form-label">Nom</label>
                  <input class="form-control" type="text" id="firstName"
                          name="name" value="{{ $profil->name }}" autofocus />
              </div>

              <div class="mb-3 col-md-6">
                <label for="lastName" class="form-label">Prénom</label>
                <input class="form-control" type="text" name="LastName" id="lastName" 
                        value="{{ $profil->LastName }}"/>
              </div>

              <div class="mb-3 col-md-6">
                <label for="email" class="form-label">E-mail</label>
                <input class="form-control" type="text" id="email" name="email"
                        value="{{ $profil->email }}" />
              </div>

              <div class="mb-3 col-md-6">
                <label for="organization" class="form-label">Organisation</label>
                  <input type="text" class="form-control" id="organization"
                          name="organization" value="{{ $profil->organization }}" />
              </div>

              <div class="mb-3 col-md-6">
                <label class="form-label" for="phone">Numéro de téléphone</label>
                <div class="input-group input-group-merge">
                  <span class="input-group-text">MAR (+212)</span>
                  <input type="text" id="phone" name="phone"
                          class="form-control" value="{{ $profil->phone }}" />
                </div>
              </div>

              <div class="mb-3 col-md-6">
                <label for="adresse" class="form-label">Adresse</label>
                <input type="text" class="form-control" id="adresse" name="adresse" 
                        value="{{ $profil->adresse }}" />
              </div>

              <div class="mb-3 col-md-6">
                <label for="ville" class="form-label">Ville</label>
                <input class="form-control" type="text" id="ville" name="ville" 
                        value="{{ $profil->ville }}" />
              </div>

              <div class="mb-3 col-md-6">
                <label for="zip" class="form-label">Zip Code</label>
                <input type="text" class="form-control" id="zip" name="zip"
                        value="{{ $profil->zip }}" maxlength="8" />
              </div>

              <div class="mb-3 col-md-6">
                <label class="form-label" for="country">Pays</label>
                  <select id="country" class="select2 form-select">
                    <option value="">Sélectionner</option>
                    <option value="Australia">Australia</option>
                    <option value="Bangladesh">Bangladesh</option>
                    <option value="Belarus">Belarus</option>
                    <option value="Brazil">Brazil</option>
                    <option value="Canada">Canada</option>
                    <option value="China">China</option>
                    <option value="France">France</option>
                    <option value="Germany">Germany</option>
                    <option value="India">India</option>
                    <option value="Indonesia">Indonesia</option>
                    <option value="Israel">Israel</option>
                    <option value="Italy">Italy</option>
                    <option value="Japan">Japan</option>
                    <option value="Korea">Korea, Republic of</option>
                    <option value="Mexico">Mexico</option>
                    <option value="Philippines">Philippines</option>
                    <option value="Russia">Russian Federation</option>
                    <option value="South Africa">South Africa</option>
                    <option value="Thailand">Thailand</option>
                    <option value="Turkey">Turkey</option>
                    <option value="Ukraine">Ukraine</option>
                    <option value="United Arab Emirates">United Arab Emirates</option>
                    <option value="United Kingdom">United Kingdom</option>
                    <option value="United States">United States</option>
                  </select>
              </div>

              <div class="mb-3 col-md-6">
                <label for="language" class="form-label">Langue</label>
                <select id="language" class="select2 form-select">
                  <option value="">Choisir la langue</option>
                  <option value="en">Anglais</option>
                  <option value="fr">Français</option>
                </select>
              </div>

              <div class="mb-3 col-md-6">
                <label for="timeZones" class="form-label">Fuseau horaire</label>
                <select id="timeZones" class="select2 form-select">
                  <option value="">Sélectionner Fuseau horaire</option>
                    <option value="-12">(GMT-12:00) International Date Line West</option>
                    <option value="-11">(GMT-11:00) Midway Island, Samoa</option>
                    <option value="-10">(GMT-10:00) Hawaii</option>
                    <option value="-9">(GMT-09:00) Alaska</option>
                    <option value="-8">(GMT-08:00) Pacific Time (US & Canada)</option>
                    <option value="-8">(GMT-08:00) Tijuana, Baja California</option>
                    <option value="-7">(GMT-07:00) Arizona</option>
                    <option value="-7">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
                    <option value="-7">(GMT-07:00) Mountain Time (US & Canada)</option>
                    <option value="-6">(GMT-06:00) Central America</option>
                    <option value="-6">(GMT-06:00) Central Time (US & Canada)</option>
                    <option value="-6">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
                    <option value="-6">(GMT-06:00) Saskatchewan</option>
                    <option value="-5">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
                    <option value="-5">(GMT-05:00) Eastern Time (US & Canada)</option>
                    <option value="-5">(GMT-05:00) Indiana (East)</option>
                    <option value="-4">(GMT-04:00) Atlantic Time (Canada)</option>
                    <option value="-4">(GMT-04:00) Caracas, La Paz</option>
                  </select>
              </div>

              <div class="mb-3 col-md-6">
                <label for="currency" class="form-label">Devise</label>
                <select id="currency" class="select2 form-select">
                  <option value="">Sélectionnez la devise</option>
                  <option value="MAD" selected>MAD</option>
                  <option value="USD">USD</option>
                  <option value="Euro">Euro</option>
                </select>
              </div>
            </div>
            <div class="mt-2">
              <button type="submit" class="btn btn-primary me-2">
                Sauvegarder les modifications
              </button>
            </div>
          </form>
        </div>
        <!-- /Account -->
      </div>
      <div class="card">
        <h5 class="card-header">Supprimer le compte</h5>
        <div class="card-body">
          <div class="mb-3 col-12 mb-0">
            <div class="alert alert-warning">
              <h6 class="alert-heading fw-bold mb-1">
                Êtes-vous sûr de vouloir supprimer votre compte ?
              </h6>
              <p class="mb-0">
                Une fois que vous avez supprimé votre compte, il n'y a plus de retour en arrière. Soyez certain.
              </p>
            </div>
          </div>
          <form id="formAccountDeactivation" onsubmit="return false">
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox"
                      name="accountActivation" id="accountActivation" />
              <label class="form-check-label" for="accountActivation" >
                Je confirme la désactivation de mon compte
              </label>
            </div>
            <button type="submit" class="btn btn-danger deactivate-account">
              Désactiver le compte
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- / Content -->
<!-- Content wrapper -->
@endsection

@section('javascripts')
<script src="{{ asset('media/assets/js/pages-account-settings-account.js') }}"></script>
@endsection