{% extends 'backoffice/base.html' %}

{% block title %} Mon Compte Ecolux BTP {% endblock  %}

{% block metaseo %} 

        <meta name="robots" content="index, follow, ">
        <meta name="title" content="">

        <meta name="description"
        content="">

        <meta property="og:title" content="" />

        <meta name="keywords" content=''>
        
{% endblock %}

{% block content %}

<script>
    document.getElementById('menu-account').classList.add('is-active')
</script>
    <section class="section is-title-bar" >

        <div class="level">
          <div class="level-left">
            <div class="level-item">
              <ul >
                <li style="font-size: 15px !important; ">AZ</li>
                <li style="font-size: 15px !important; ">Mon compte</li>
              </ul>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item">
          
            </div>
          </div>
        </div>

    </section>


    <div class="container" style="min-height: 85vh;"> 

    <section class="section is-main-section" >
      
        <div class="tile is-ancestor">
          <div class="tile is-parent">
            <div class="card tile is-child">
              <header class="card-header">
                <p class="card-header-title">
                  <span class="icon"><i class="mdi mdi-account-circle default"></i></span>
                  Modifier mon compte
                </p>
              </header>
              <div class="card-content">
                <form method="POST" action="{% url 'app:updateAccount' %}" enctype="multipart/form-data"> 
                 
                  {% csrf_token %}
                  <div class="field is-horizontal">
                    <div class="field-label is-normal">
                      <label class="label">Prénom</label>
                    </div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <input type="text" autocomplete="on" placeholder="Prénom" name="fname" value="{{user.first_name}}" class="input" required>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="field is-horizontal">
                    <div class="field-label is-normal">
                      <label class="label">Nom</label>
                    </div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <input type="text" autocomplete="on" placeholder="Prénom" name="lname" value="{{user.last_name}}" class="input" required>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="field is-horizontal">
                    <div class="field-label is-normal">
                      <label class="label">Téléphone</label>
                    </div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <input type="tel" autocomplete="on" name="phone" placeholder="+221 78 XXX XX XX" value="{{cuser.phone}}" class="input" >
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <!-- <div class="field is-horizontal">
                    <div class="field-label is-normal">
                      <label class="label"> Adresse </label>
                    </div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <input type="hidden" name="lon" id="lon" value="0">
                          <input type="hidden" name="lat" id="lat" value="0">
                          <input type="hidden" name="postcode" id="postcode" value="">
                          <input type="hidden" name="countrie" id="countrie" value="_">
                          <input id="searchAdr"  type="text" autocomplete="on" name="address" placeholder="Belgique, .." value="{{cuser.address}}" class="input" >
                          <div style="background-color: #ededed; border-radius: 3px;color: black;display: non;position: absolute;z-index: 99;"
                              id="show-result-adresse" class="show-result mt-2  ">
                               
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> -->

                  <div class="field is-horizontal">
                    <div class="field-label is-normal">
                      <label class="label">Photo</label>
                    </div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <input type="file" autocomplete="on" name="picture" accept="image/*"  value="" class="input" >
                        </div>
                      </div>
                      {% if cuser.image %} <a href="{{cuser.image.url}}">voir image</a> {% endif %}
                    </div>
                  </div>
                  
                  <hr>
                  <div class="field is-horizontal">
                    <div class="field-label is-normal"></div>
                    <div class="field-body">
                      <div class="field">
                        <div class="control">
                          <button type="submit"  class="button is-small is-info bg-accent slide-right"  style="font-size: 16px !important;border-radius: 5px;">
                            Enregistrer
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>


          <div class="tile is-parent">
            <div class="card tile is-child">
              <header class="card-header">
                <p class="card-header-title">
                  <span class="icon"><i class="mdi mdi-account default"></i></span>
                  Infos
                </p>
              </header>
              <div class="card-content">
                <div class="is-user-avatar image has-max-width is-aligned-center">
                  {% if cuser.image != "" %}
                  <img style="width: 50px;" src="{{cuser.image.url}}"
                       alt="John Doe">
                  {% else %}
                  <img style="width: 50px;" src="https://api.dicebear.com/9.x/initials/svg?seed={{user.first_name}} {{user.last_name}}"
                  alt="John Doe">
                  {% endif %}
                </div>
                <hr>
                <div class="field">
                  <label class="label">Nom complet</label>
                  <div class="control is-clearfix">
                    <input type="text" readonly value="{{user.first_name}} {{user.last_name}}" class="input is-static">
                  </div>
                </div>
                <hr>
                <div class="field">
                  <label class="label">Email</label>
                  <div class="control is-clearfix">
                    <input type="text" readonly value="{{user.email}}" class="input is-static">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


        
        <div class="card">
          <header class="card-header">
            <p class="card-header-title">
              <span class="icon"><i class="mdi mdi-lock default"></i></span>
              Changer le mot de passe
            </p>
          </header>
          <div class="card-content">
            <form method="POST" action="{% url 'app:updatePassword' %}">
            {% csrf_token %}
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Mot de passe actuel</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input type="password" name="oldpass" autocomplete="current-password" class="input" required>
                    </div>
                    <p class="help">Votre mot de passe actuel est requis</p></div>
                </div>
              </div>
              <hr>
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Nouveau mot de passe</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input type="password" autocomplete="newpass" name="newpass" class="input" required>
                    </div>
                    <p class="help">Votre nouveau mot de passe est requis</p>
                  </div>
                </div>
              </div>
              <div class="field is-horizontal">
                <div class="field-label is-normal">
                  <label class="label">Confirmer le mot de passe</label>
                </div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <input type="password" autocomplete="new-password" name="confpass" class="input" required>
                    </div>
                    <p class="help">Saisissez à nouveau le mot de passe</p>
                  </div>
                </div>
              </div>
              <hr>
              <div class="field is-horizontal">
                <div class="field-label is-normal"></div>
                <div class="field-body">
                  <div class="field">
                    <div class="control">
                      <button type="submit"  class="button is-small is-info bg-accent slide-right"  style="font-size: 16px !important;border-radius: 5px;">
                        Enregistrer
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>


      </section>

    </div>

{% endblock content %}