{% extends 'base.html.twig' %}

{% block title %}Portalents - Profile{% endblock %}

{% block body %}
    <main class="container w-75 d-flex ">
        <div class="w-100 d-flex flex-column justify-content-center my-5">
            
            <div class="container w-100 d-flex justify-content-center">
                <div class="d-flex justify-content-center w-50 flex-column border border-dark">
                    
                    <div class="m-2">
                        <div>
                            {% if profile.status.name is same as('candidat') %}
                                <div class="d-flex justify-content-center p-2 fs-4 d-block alert-dismissible alert-primary">
                                    {{ profile.status.name }}
                                </div>
                            {% elseif profile.status.name is same as('collaborateur') %}
                                {% if profile.disponibility is same as(true) %}
                                    <div class="d-flex justify-content-center p-2 fs-4 d-block alert-dismissible alert-success">
                                        {{ profile.status.name }}
                                    </div>
                                {% else %}
                                    <div class="d-flex justify-content-center p-2 fs-4 d-block alert-dismissible alert-danger">
                                        {{ profile.status.name }}
                                    </div>
                                {% endif %}
                            {% else %}
                                <div class="d-flex justify-content-center p-2 fs-4 d-block danger-dismissible alert-warning">
                                    {{ profile.status.name }}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="container d-flex justify-content-center mt-2">
                        <image src="https://picsum.photos/150/150" class="rounded-circle w-50 border"></image>
                    </div>

                    <div class="d-flex justify-content-center mt-4 p-2 fs-3">
                        {{ profile.firstname ~ ' ' ~ profile.lastname }}
                    </div>
                        {% if (user.date|format_datetime('short', 'none', locale='fr')) is same as('now'|date('d/m/Y')) %}
                            <p class="d-flex justify-content-center p-2 fs-6">Bon Anniversaire !!</p>
                        {% endif %}
                    <div class="d-flex justify-content-center p-2 fs-5">
                        {{ profile.profession.name }}
                    </div>

                    <div class="container d-flex justify-content-center w-75 my-2">
                        <ul class="list-group w-100">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                Compétences
                                <span class="badge bg-primary rounded-pill">{{ skills|length}}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                Expériences
                                <span class="badge bg-primary rounded-pill">{{ experiences|length}}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                Documents
                                <span class="badge bg-primary rounded-pill">{{ documents|length}}</span>
                            </li>
                    </ul>
                    </div>

                    <div class="container d-flex justify-content-center flex-wrap w-75 p-3 mt-2 border">
                        <div>
                            <div class="my-4">
                                <i class="fas fa-home me-4"></i>
                                {{ profile.adress ~ ', ' ~ profile.postal ~ ' ' ~ profile.town }}
                            </div>
                            <div class="my-4">
                                <i class="fas fa-phone-alt me-4"></i>
                                <a href="tel:{{ profile.phone }}" class="link-dark">
                                    {% set splitNumber = profile.phone|split('', 2) %}
                                    {{ splitNumber|join('.') }}
                                </a>
                            </div>
                            {% if profile.email is not null %}
                                <div class="my-4">
                                    <i class="fas fa-envelope me-2"></i>perso :
                                    <a href="mailto:{{ profile.email }}" class="link-dark">
                                        {{ profile.email }}
                                    </a>
                                </div>
                            {% endif %}
                            {% if profile.user is not null %}
                                <div class="my-4">
                                    <i class="fas fa-envelope me-2"></i>pro :
                                    <a href="mailto:{{ profile.user.email }}" class="link-dark">
                                        {{ profile.user.email }}
                                    </a>
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="d-flex justify-content-end mt-2">
                        <button type="button" class="btn btn-dark btn-sm">
                            <a href="{{ path('modify_profile', { 'id': profile.id }) }}" class="text-white">
                                <i class="fas fa-pencil-alt"></i>
                            </a>
                        </button>
                    </div>
                </div>
            </div>

            {# ACCORDEON #}
            
            <div class="container w-100 d-flex justify-content-center mt-5">
                <div class="container w-100 ms-5">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#skills">Compétences</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#experiences">Expériences</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#documents">Documents</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">

                        {# SLIDE 'COMPETENCES' #}

                        <div class="tab-pane fade show active" id="skills">
                            <div class="container d-flex flex-wrap justify-content-start">
                                <div class="accordion w-100 mt-4 mb-5" id="accordionExample">
                                    {% for category in categories %}
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="heading{{ category.id }}">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ category.id }}" aria-expanded="false" aria-controls="collapse{{ category.id }}">
                                                    <span class="fs-5">{{ category.name }}</span>
                                                </button>
                                            </h2>
                                            <div id="collapse{{ category.id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ category.id }}" data-bs-parent="#accordionExample" style="">
                                                <div class="accordion-body d-flex flex-wrap justify-content-evenly">
                                                    {% for skill in skills %}
                                                        {% if skill.skill.category.name is same as(category.name) %}
                                                            {% if skill.appreciation %}
                                                                <div class="card border-dark border-3 w-25 m-4">
                                                                    <div class="text-center card-header">{{ skill.skill.name }}</div>
                                                                    <div class="card-body">
                                                                        <p class="card-text">Niveau : {{ skill.level.status }}</p>
                                                                    </div>
                                                                    {% if is_granted('ROLE_COLLABORATEUR') or is_granted('ROLE_ADMIN') %}
                                                                        <div class="d-flex justify-content-end">
                                                                            <button type="button" class="btn btn-dark btn-sm">
                                                                                <a href="{{ path('modify_skill_to_profile', { 'id': skill.id }) }}" class="card-link text-decoration-none text-white">
                                                                                    <i class="fas fa-pencil-alt"></i>
                                                                                </a>
                                                                            </button>
                                                                            <button type="button" class="btn btn-dark btn-sm">
                                                                                <a href="{{ path('delete_skill_to_profile', { 'id': skill.id }) }}" class="card-link text-decoration-none text-white">
                                                                                    <i class="fas fa-trash-alt"></i>
                                                                                </a>
                                                                            </button>
                                                                        </div>
                                                                    {% endif %}
                                                                </div>
                                                            {% else %}
                                                                <div class="card border-dark w-25 m-4">
                                                                    <div class="text-center card-header">{{ skill.skill.name }}</div>
                                                                    <div class="card-body">
                                                                        <p class="card-text">Niveau : {{ skill.level.status }}</p>
                                                                    </div>
                                                                    {% if is_granted('ROLE_COLLABORATEUR') or is_granted('ROLE_ADMIN') %}
                                                                        <div class="d-flex justify-content-end">
                                                                            <button type="button" class="btn btn-dark btn-sm">
                                                                                <a href="{{ path('modify_skill_to_profile', { 'id': skill.id }) }}" class="card-link text-decoration-none text-white">
                                                                                    <i class="fas fa-pencil-alt"></i>
                                                                                </a>
                                                                            </button>
                                                                            <button type="button" class="btn btn-dark btn-sm">
                                                                                <a href="{{ path('delete_skill_to_profile', { 'id': skill.id }) }}" class="card-link text-decoration-none text-white">
                                                                                    <i class="fas fa-trash-alt"></i>
                                                                                </a>
                                                                            </button>
                                                                        </div>
                                                                    {% endif %}
                                                                </div>
                                                            {% endif %}
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% if is_granted('ROLE_COLLABORATEUR') or is_granted('ROLE_ADMIN') %}
                                <div class="d-flex justify-content-end w-100 mt-4 me-4">
                                    <a href="{{ path('add_skill_to_profile', { 'id': profile.id }) }}">
                                        <button type="button" class="btn btn-secondary">
                                            Ajouter une compétence
                                        </button>
                                    </a>
                                </div>
                            {% endif %}
                        </div>

                        {# SLIDE 'EXPERIENCES' #}

                        <div class="tab-pane fade" id="experiences">
                            <div class="container d-flex flex-wrap justify-content-start">
                                <div class="accordion w-100 mt-4 mb-5" id="accordionExample">
                                    {% for experience in experiences %}
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="heading{{ experience.id }}">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ experience.id }}" aria-expanded="false" aria-controls="collapse{{ experience.id }}">
                                                    <span class="fs-5 me-3">{{ experience.function }}</span>
                                                    <span class="fs-6 me-3">{{ experience.company.name }} - {{ experience.location }}</span>
                                                    {% if  experience.dateEnd is same as(null) %}
                                                        <span> Expérience en cours depuis le {{ experience.dateStart|format_datetime('short', 'none', locale='fr') }}</sapn>
                                                    {% else %}
                                                        <span> du {{ experience.dateStart|format_datetime('short', 'none', locale='fr') }} au {{ experience.dateEnd|format_datetime('short', 'none', locale='fr') }} </sapn>
                                                    {% endif %}
                                                </button>
                                            </h2>
                                            <div id="collapse{{ experience.id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ experience.id }}" data-bs-parent="#accordionExample" style="">
                                                <div class="accordion-body d-flex flex-wrap">
                                                    <div class="card w-100">
                                                        <div class="card-body">
                                                            <h4 class="card-title">{{ experience.context ~ ' - ' ~ experience.techEnv }}</h4>
                                                            <h6 class="card-subtitle mb-2 text-muted">type d'expérience : {{ experience.type.name }}</h6>
                                                            <h6 class="card-subtitle mb-2 text-muted">réalisation : {{ experience.achievement }}</h6>
                                                            <p class="card-text">
                                                                {{ experience.description }}
                                                            </p>
                                                        </div>
                                                        <div class="d-flex justify-content-end">
                                                            <button type="button" class="btn btn-dark btn-sm">
                                                                <a href="{{ path('modify_experience', { 'id': experience.id }) }}" class="card-link text-decoration-none text-white">
                                                                    <i class="fas fa-pencil-alt"></i>
                                                                </a>
                                                            </button>
                                                            {% if is_granted('ROLE_COLLABORATEUR') or is_granted('ROLE_ADMIN') %}
                                                                <button type="button" class="btn btn-dark btn-sm">
                                                                    <a href="{{ path('delete_experience', { 'id': experience.id }) }}" class="card-link text-decoration-none text-white">
                                                                        <i class="fas fa-trash-alt"></i>
                                                                    </a>
                                                                </button>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="d-flex justify-content-end w-100 mt-4 me-4">
                                <a href="{{ path('add_experience', { 'id': profile.id }) }}">
                                    <button type="button" class="btn btn-secondary">
                                        Ajouter une expérience
                                    </button>
                                </a>
                            </div>
                        </div>

                        {# SLIDE 'DOCUMENTS' #}

                        <div class="tab-pane fade show" id="documents">
                            <div class="container d-flex flex-wrap justify-content-start">
                                <div class="accordion w-100 mt-4 mb-5" id="accordionExample">
                                    {% for documentType in documentTypes %}
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="heading{{ documentType.id }}">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ documentType.id }}" aria-expanded="false" aria-controls="collapse{{ documentType.id }}">
                                                    <span class="fs-5">{{ documentType.name }}</span>
                                                </button>
                                            </h2>
                                            <div id="collapse{{ documentType.id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ documentType.id }}" data-bs-parent="#accordionExample" style="">
                                                <div class="accordion-body d-flex flex-wrap">
                                                    {% for document in documents %}
                                                        {% if document.type.name is same as(documentType.name) %}
                                                            <div class="card border-dark w-25 m-4">
                                                                <div class="text-center card-header">
                                                                    <h5>{{ document.name }}</h5>
                                                                    <p class="card-text">{{ document.date|format_datetime('short', 'none', locale='fr') }}</p>
                                                                </div>
                                                                <div class="d-flex justify-content-end mt-2">
                                                                    <button type="button" class="btn btn-dark btn-sm">
                                                                        <a href="{{ asset('uploads/files/' ~ document.file) }}" class="card-link text-decoration-none text-white">
                                                                            <i class="fas fa-file-pdf"></i>
                                                                        </a>
                                                                    </button>
                                                                    {% if is_granted('ROLE_COLLABORATEUR') %}
                                                                        <button type="button" class="btn btn-dark btn-sm">
                                                                            <a href="{{ path('modify_document', { 'id': document.id }) }}" class="card-link text-decoration-none text-white">
                                                                                <i class="fas fa-pencil-alt"></i>
                                                                            </a>
                                                                        </button>
                                                                        <button type="button" class="btn btn-dark btn-sm">
                                                                            <a href="{{ path('delete_document', { 'id': document.id }) }}" class="card-link text-decoration-none text-white">
                                                                                <i class="fas fa-trash-alt"></i>
                                                                            </a>
                                                                        </button>
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="d-flex justify-content-end w-100 mt-4 me-4">
                                <a href="{{ path('add_document', { 'id': profile.id }) }}">
                                    <button type="button" class="btn btn-secondary">
                                        Ajouter un document
                                    </button>
                                </a>
                            </div>
                        </div>

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

        </div>
    </main>
{% endblock %}