{% extends "BASE.html" %}
{% load static %}     
{% block 'titre_page' %} Gestion des employés - Mon profil {% endblock %}
{% block 'contenu' %}     
    <div class="card shadow-sm border-0 w-100" style="max-width: 850px;">
        <div class="card-header bg-orange-dark">
            <h5 class="mb-0 fw-bold">
                <i class="bi bi-pencil-square me-2"></i> Modifier mon profil
            </h5>
        </div>
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="accordion" id="accordionProfil">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingInfo">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseInfo" aria-expanded="false" aria-controls="collapseInfo">
                                <i class="bi bi-person-lines-fill me-2"></i> Informations personnelles
                            </button>
                        </h2>
                        <div id="collapseInfo" class="accordion-collapse collapse" aria-labelledby="headingInfo" data-bs-parent="#accordionProfil">
                            <div class="accordion-body">
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group mb-2">
                                            <label>Photo de profil :</label>
                                            <input type="file" class="form-control">
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Prénom :</label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Nom :</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group mb-2">
                                            <label>Email :</label>
                                            <input type="email" class="form-control">
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Téléphone :</label>
                                            <input type="text" class="form-control">
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Adresse :</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingDocs">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDocs" aria-expanded="false" aria-controls="collapseDocs">
                                <i class="bi bi-file-earmark-text me-2"></i> Documents
                            </button>
                        </h2>
                        <div id="collapseDocs" class="accordion-collapse collapse" aria-labelledby="headingDocs" data-bs-parent="#accordionProfil">
                            <div class="accordion-body">
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group mb-2">
                                            <label>CV :</label>
                                            <input type="file" class="form-control">
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Diplome :</label>
                                            <input type="file" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group mb-2">
                                            <label>RIB :</label>
                                            <input type="file" class="form-control">
                                        </div>
                                        <div class="form-group mb-2">
                                            <label>Casier judiciaire :</label>
                                            <input type="file" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-4 gap-2 flex-wrap">
                    <a href="{% url 'gestion_employe:mon-profil' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle me-1"></i> Annuler
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle me-1"></i> Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block 'modal' %}
{% endblock %}
{% block 'js' %}
{% endblock %}