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

{% block contenu %}
{% set currentUrl = app.request.attributes.get('_route') %}
{% set mainType1 = customParam('main_skill_type_1')%}
{% set pictures = arrayWorker(worker, 'Pictures') %}
{% set mainType2 = customParam('main_skill_type_2')%}
{% set workerTypeId = customParam('find_my_data_worker_type_id') %}

    <nav aria-label="breadcrumb" class="intra-breadcrumbs">
        <ol class="breadcrumb">
            <li class="breadcrumb-item breadcrumb-intra"><a href="{{ absolute_url(customPath('worker_home_intra')) }}">{{'myAccount.home_intra'|trans|upper}}</a></li>
            <li class="breadcrumb-item breadcrumb-intra active"><a href="{{ absolute_url(customPath('worker_projects')) }}">{{'intranetMenu.mc_informations'|trans|upper}}</a></li>
        </ol>
    </nav>

    <ul class="nav nav-pills nav-edit-profile">
        <li class="nav-item">
            <a class="nav-link" href="{{ absolute_url(customPath('worker_account')) }}">{{'forms.general_info'|trans|upper}}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ absolute_url(customPath('worker_description')) }}">{{'pageWorker.presentations'|trans|upper}}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ absolute_url(customPath('worker_services')) }}">{{'intranetMenu.mc_presta'|trans|upper}}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active-nav-link" href="{{ absolute_url(customPath('worker_projects')) }}">{{'myAccount.my_pictures'|trans|upper}}</a>
        </li>
    </ul>

    <div id="edit-info-section">
        <div class="row">
            <div class="col-8 worker-info-img">
                <div id="edit-profile-picture">
                    <img src="{{ worker.profilePicture | imagine_filter('remote_worker_logo_intra') }}" />
                </div>
                <div class="worker-account-info">
                    <p class="font-weight-bold">{{worker.fullName}}</p>
                    <p class="subtitle-account">{{worker.company}}</p>
                </div>
            </div>
            <div class="col-4 worker-info-button">
                <a class="btn btn-soumettre btn-archi-blue-intra" href="{{ absolute_url(customPath('worker_sheet',{ workerKey : worker.workerKey })) }}" target="_blank">{{'intranetMenu.mc_preview'|trans}}</a>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ customPath('worker_submit') }}" enctype="multipart/form-data" id="new-picture-form">
        <h2 class="text-center">{{'pictures.add_picture'|trans}}</h2>
        <input type="hidden" name="route" value="{{currentUrl}}">
        <div id="add-pictures-section">
            <div class="row">
                <div class="col-8">
                    <div class="d-flex align-items-center" id="sheet-hint-picture">
                        <p>{{'pictures.pictures_hint'|trans}}</p>
                    </div>
                </div>
                <div class="col-4">
                    <div class="d-flex justify-content-center">
                        <label for="worker-picture" class="btn btn-soumettre btn-archi-blue-intra">{{'pictures.add_picture'|trans}}</label>
                        <input type="file" name="btn-add-img[Nouvelle image]" id="worker-picture" accept="jpeg,png,jpg">
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="new-picture-details">
            <div class="col-8">
                {# Eviter les position négatives ou nulles #}
                {% set pictureLast = pictures|last %}
                <h3>{{'pictures.position'|trans}} <input type="number" name="btn-add-img[position]" value="{% if pictureLast %}{{pictureLast.position+1}}{% else %}1{% endif %}" id="number-position"></h3>                           

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="inputGroupSelect01">{{'property_types'|trans}} - </label>
                    </div>
                    <select class="custom-select" id="inputGroupSelect01" name="btn-add-img[types de biens photo]">
                        <option value='no-choice'>{{'select'|trans}}</option>
                        {% for skillType in skillTypes[mainType1] %}
                            <option value="{{ skillType.currentTranslation.name }}">{{ skillType.currentTranslation.name }}</option>
                                {% for skillTypeChild in skillType.skills  %}
                                <option value="{{ skillTypeChild.currentTranslation.name }}">{{ skillTypeChild.currentTranslation.name }}</option>
                                {% endfor %}
                        {% endfor %}
                    </select>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="inputGroupSelect02">{{'work_types'|trans}} - </label>
                    </div>
                    <select class="custom-select" id="inputGroupSelect02" name="btn-add-img[types de travaux photo]">
                        <option value='no-choice'>{{'select'|trans}}</option>
                        {% for skillType in skillTypes[mainType2] %}
                            <option value="{{ skillType.currentTranslation.name }}">{{ skillType.currentTranslation.name }}</option>
                                {% for skillTypeChild in skillType.skills  %}
                                <option value="{{ skillTypeChild.currentTranslation.name }}">{{ skillTypeChild.currentTranslation.name }}</option>
                                {% endfor %}
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>

        <div id="send-new-img" class="d-flex justify-content-end">
            <button name="btn-submit" class="btn btn-soumettre btn-archi-blue-intra" value="btn-add-img" type="submit">{{'validate'|trans}}</button>
        </div>
        <div>
            <span class="size-notice d-flex justify-content-end">{{'pictures.max_size'|trans}}</span>
        </div>

    </form>
    {% if pictures %}

    <div id="indications-pictures">
        <h2 class="text-center">{{'myAccount.my_pictures'|trans}}</h2>
        <p class="font-italic">{{'pictures.order_picture'|trans|raw}}</p>
        <p class="font-italic">{{'pictures.you_can_delete'|trans|raw}}</p>
    </div>


        <div id="pictures-box">
            {% for picture in pictures %}
                <form method="POST" action="{{ customPath('worker_submit') }}" enctype="multipart/form-data" class="pictures-modification-form">            
                    <input type="hidden" name="route" value="{{currentUrl}}">
                    <div class="borders-box">
                        <div class="row">
                            <div class="col-4">
                                <img src="{{picture.picture | imagine_filter('worker_intra_picture') }}" />
                            </div>
                            <div class="col-8">
                                {# Eviter les position négatives ou nulles #}
                                <h3>Position <input type="number" name="btn-update-img[position]" value="{{picture.position}}" id="number-position"></h3>                           

                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <label class="input-group-text" for="inputGroupSelect01">{{'property_types'|trans}} - </label>
                                    </div>
                                    <select class="custom-select" id="inputGroupSelect01" name="btn-update-img[types de biens photo]">
                                        <option value="no-choice">{{'select'|trans}}</option>
                                        {% for skillType in skillTypes[mainType1] %}
                                            <option value="{{ skillType.currentTranslation.name }}">{{ skillType.currentTranslation.name }}</option>
                                                {% for skillTypeChild in skillType.skills  %}
                                                <option value="{{ skillTypeChild.currentTranslation.name }}">{{ skillTypeChild.currentTranslation.name }}</option>
                                                {% endfor %}
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <label class="input-group-text" for="inputGroupSelect02">{{'work_types'|trans}} - </label>
                                    </div>
                                    <select class="custom-select" id="inputGroupSelect02" name="btn-update-img[types de travaux photo]">
                                        <option value="no-choice">{{'select'|trans}}</option>
                                        {% for skillType in skillTypes[mainType2] %}
                                            <option value="{{ skillType.currentTranslation.name }}">{{ skillType.currentTranslation.name }}</option>
                                                {% for skillTypeChild in skillType.skills  %}
                                                <option value="{{ skillTypeChild.currentTranslation.name }}">{{ skillTypeChild.currentTranslation.name }}</option>
                                                {% endfor %}
                                        {% endfor %}
                                    </select>
                                </div>

                                <input type="hidden" name="position" value="{{picture.position}}"/>
                                {# <input type="hidden" name="btn-delete-img[path]" value="{{picture.picture}}" /> #}

                                <div class="d-flex justify-content-between">
                                    <button name="btn-submit" type="submit" class="btn btn-picture-delete btn-confirm" value="btn-delete-img" data-position="{{picture.position}}">{{'forms.delete_picture'|trans}}</button>
                                    <button name="btn-submit" type="submit" class="btn btn-soumettre btn-archi-blue-intra" value="btn-update-img">{{'forms.send_modification'|trans}}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            {% endfor %}
        </div>
    {% endif %}

    <div class="submit-notice submit-notice-pictures">
        <span> {{'myAccount.modifications_on_hold'|trans}} </span>
    </div>


{% endblock %}

{% block javascripts %}
<script>

    let submitActor = null;
    let form = $('.pictures-modification-form');
    let submitActors = $('button[type=submit]');
    let msgDelete = "{{'picture.delete_msg'|trans}}";

    form.on('submit', function(e) { 
        if(null === submitActor){
            submitActor = sublitActors[0];
        }

        let btnValue = submitActor.value;
        if(btnValue == 'btn-delete-img'){
            let picturePosition = submitActor.getAttribute('data-position');
            if(!confirm('Voulez vous vraiment supprimer l\’image en position '+picturePosition+' ?')){
                e.preventDefault();
            }
        }
    });

    submitActors.click(function(event) {
        submitActor = this;
    });

</script>
{% endblock %}