{% extends "base.html" %}
{% load static %}
{% block content %}
{% if messages %}
    {% for msg in messages %}
        {% if 'success' in msg.tags %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ msg }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% elif 'error' in msg.tags %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ msg }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
    {% endfor %}
{% endif %}

  <section class="section profile">
    
    <div class="row">
        
      <div class="col-xl-4">

        <div class="card">
          <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
            {% if request.user.image %}
                <img src="{{ request.user.image.url }}" alt="Profile" class="rounded-circle">
            {% else %}
            {% endif %}
            <h2 class="text-center">{{request.user.get_full_name}}</h2>
            <h3>{{request.user.telephone}}</h3>
            <div class="social-links mt-2">
              <a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
              <a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
              <a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
              <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
            </div>
          </div>
        </div>

      </div>

      <div class="col-xl-8">

        <div class="card">
          <div class="card-body pt-3">
            <!-- Bordered Tabs -->
            <ul class="nav nav-tabs nav-tabs-bordered">

              <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">Vue d'ensemble</button>
              </li>

              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Modifier le profil</button>
              </li>

              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Changer le mot de passe</button>
              </li>

            </ul>
            <div class="tab-content pt-2">

              <div class="tab-pane fade show active profile-overview" id="profile-overview">
               
                <h5 class="card-title">Informations personnelles</h5>

                <div class="row">
                  <div class="col-lg-3 col-md-4 label ">Prénom & Nom</div>
                  <div class="col-lg-9 col-md-8">{{request.user.get_full_name}}</div>
                </div>

                <div class="row">
                  <div class="col-lg-3 col-md-4 label">Entreprise</div>
                  <div class="col-lg-9 col-md-8">{{request.user.entreprise}}</div>
                </div>

               <div class="row">
                  <div class="col-lg-3 col-md-4 label">Téléphone</div>
                  <div class="col-lg-9 col-md-8">{{request.user.telephone}}</div>
                </div>

                <div class="row">
                  <div class="col-lg-3 col-md-4 label">Pays</div>
                  <div class="col-lg-9 col-md-8">{{request.user.pays}}</div>
                </div>

                <div class="row">
                  <div class="col-lg-3 col-md-4 label">Adresse</div>
                  <div class="col-lg-9 col-md-8">{{request.user.adresse}}</div>
                </div>

                

                <div class="row">
                  <div class="col-lg-3 col-md-4 label">Email</div>
                  <div class="col-lg-9 col-md-8">{{request.user.email}}</div>
                </div>
                <h5 class="card-title">About</h5>
                <p class="small fst-italic">{{request.user.details_entreprise}}</p>

              </div>

              <div class="tab-pane fade profile-edit pt-3" id="profile-edit">

                <!-- Profile Edit Form -->
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row mb-3">
                        <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Photo de profil</label>
                        <div class="col-md-8 col-lg-9">
                            {% if request.user.image %}
                                <img src="{{ request.user.image.url }}" alt="Profile">
                            {% else %}
                            {% endif %}
                        <div class="pt-2">
                                <input class="" type="file" style="display:none" name="image" id="profile">
                                <label for="profile" style="display:inline-block;background:#DAB200;color:white;text-align:center;padding:8px 40px;letter-spacing:1px;user-select:none;cursor:pointer;border-radius:3px">
                                    <i class="bi bi-upload mx-2"></i> Ajouter une photo
                                </label>
                        
                            <a href="{% url "delete_profile_image" request.user.id %}" class="btn btn-danger btn-sm p-2" title="Remove my profile image"><i class="bi bi-trash"></i></a>
                        </div>
                        </div>
                    </div>

                    <h5 class="card-title">Informations personnelles</h5>
                  
                  <div class="row mb-3">
                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Prénom</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="first_name" type="text" class="form-control" id="fullName" value="{{request.user.first_name}}">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Nom</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="last_name" type="text" class="form-control" id="fullName" value="{{request.user.last_name}}">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Numéro de téléphone</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="telephone" type="text" class="form-control" id="fullName" value="{{request.user.telephone}}">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Email</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="email" type="text" class="form-control" id="fullName" value="{{request.user.email}}">
                    </div>
                  </div>
                  {% comment %} <div class="row mb-3">
                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Date de naissance</label>
                    <div class="col-md-8 col-lg-9"> 
                        
                      <input name="date_de_naissance" type="date" class="form-control" id="fullName" value="{{request.user.date_de_naissance }}">
                    </div>
                  </div> {% endcomment %}
                  <div class="row mb-3">
                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Adresse</label>
                    <div class="col-md-8 col-lg-9"> 
                      <input name="adresse" type="text" class="form-control" id="fullName" value="{{request.user.adresse }}">
                    </div>
                  </div>
                  <h5 class="card-title">Informations de l'entreprise</h5>
                 
                  <div class="row mb-3">
                    <label for="entreprise" class="col-md-4 col-lg-3 col-form-label">Nom de l'entreprise</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="entreprise" type="text" class="form-control" id="fullName" value="{{request.user.entreprise}}">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="about" class="col-md-4 col-lg-3 col-form-label">Détails de l'entreprise</label>
                    <div class="col-md-8 col-lg-9">
                      <textarea name="details_entreprise" class="form-control" id="about" style="height: 100px">{{request.user.details_entreprise}}</textarea>
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="company" class="col-md-4 col-lg-3 col-form-label">Type d'activité</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="type_activite" type="text" class="form-control" id="company" value="{{request.user.type_activite}}">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="company" class="col-md-4 col-lg-3 col-form-label">Ninéa</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="ninea" type="text" class="form-control" id="company" value="{{request.user.ninea}}">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="company" class="col-md-4 col-lg-3 col-form-label">Registre de commerce</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="registre_de_commerce" type="text" class="form-control" id="company" value="{{request.user.registre_de_commerce}}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="Job" class="col-md-4 col-lg-3 col-form-label">Pays</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="pays" type="text" class="form-control" id="Job" value="{{request.user.pays}}">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="Job" class="col-md-4 col-lg-3 col-form-label">Région</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="region" type="text" class="form-control" id="Job" value="{{request.user.region}}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="Country" class="col-md-4 col-lg-3 col-form-label">Ville</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="ville" type="text" class="form-control" id="Country" value="{{request.user.ville}}">
                    </div>
                  </div>

                  <h5 class="card-title">Réseaux sociaux</h5>
                  <div class="row mb-3">
                    <label for="Linkedin" class="col-md-4 col-lg-3 col-form-label">Site web </label>
                    <div class="col-md-8 col-lg-9">
                      <input name="site_web" type="text" class="form-control" id="Linkedin" value="{{request.user.site_web}}">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="Twitter" class="col-md-4 col-lg-3 col-form-label">Lien Twitter</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="twitter" type="text" class="form-control" id="Twitter" value="{{request.user.twitter}}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="Facebook" class="col-md-4 col-lg-3 col-form-label">Lien Facebook </label>
                    <div class="col-md-8 col-lg-9">
                      <input name="facebook" type="text" class="form-control" id="Facebook" value="{{request.user.facebook}}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="Instagram" class="col-md-4 col-lg-3 col-form-label">Lien Instagram </label>
                    <div class="col-md-8 col-lg-9">
                      <input name="instagram" type="text" class="form-control" id="Instagram" value="{{request.user.instagram}}">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="Linkedin" class="col-md-4 col-lg-3 col-form-label">Lien Linkedin </label>
                    <div class="col-md-8 col-lg-9">
                      <input name="linkedin" type="text" class="form-control" id="Linkedin" value="{{request.user.linkedin}}">
                    </div>
                  </div>

                  <div class="text-center">
                    <button type="submit" name="maj_profil" class="btn btn-primary">Mettre à jour</button>
                  </div>
                </form><!-- End Profile Edit Form -->

              </div>

              <div class="tab-pane fade pt-3" id="profile-settings">

              
              </div>

              <div class="tab-pane fade pt-3" id="profile-change-password">
                <!-- Change Password Form -->
                <form method="POST">
                    {% csrf_token %}
                  <div class="row mb-3">
                    <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Mot de passe actuel</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="old_password" type="password" class="form-control" id="currentPassword">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">Nouveau mot de passe</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="new_password1" type="password" class="form-control" id="newPassword">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">Confirmez le mot de passe</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="new_password2" type="password" class="form-control" id="renewPassword">
                    </div>
                  </div>

                  <div class="text-center">
                    <button type="submit" name="password_change" class="btn btn-primary">Change Password</button>
                  </div>
                </form><!-- End Change Password Form -->

              </div>

            </div><!-- End Bordered Tabs -->

          </div>
        </div>

      </div>
    </div>
  </section>


{% endblock content %}