{% extends 'layouts/front/base.html.twig' %}

{% block title %}{{ context.get['app'] ? context.get['app'].name : company_name }} - {{ title }}{% endblock %}
{% block stylesheets %}
    <link type="text/css" rel="stylesheet" href="{{ asset('bundles/craueformflow/css/buttons.css') }}" />
    <style>
        body{
            background-color: #efefef;
        }
        .craue_formflow_steplist{
            position: relative;
        }
        .craue_formflow_steplist span{
            display: inline-block;
            padding: 15px;
            background: #e1540c;
            color: #fff;
        }
        .craue_formflow_steplist span a{
            color: #fff!important;
        }
        .craue_formflow_steplist span.text-muted, .craue_formflow_done_step{
            background: #999!important;
            color: #fff!important;
        }
        .craue_formflow_done_step{
            color: #fff!important;
        }
        .card-body{
            background-color: #fff;
            border-radius: 0 0 5px 5px;
        }
        .card-header{
            border-radius: 5px 5px 0 0;
        }
        .btn{
            text-transform: capitalize;
        }
        legend{
            font-size: 12px!important;
        }
        #otherPreference, #otherType{
            display: none;
        }
    </style>
{% endblock %}
{% block body %}
    <header class="page-header" style="background-image: url({{ asset('assetics/images/_inner-bg.jpg') }});">
        {{ fil_arial(title) }}
    </header>

    <section id="page-contacts">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 mx-auto">
                    {{ form_start(form, {'attr': {'id': 'serviceSendForm'}}) }}
                    <div class="strip">
                        {#{% include 'Resources/views/FormFlow/stepList.html.twig' %}
                        <br>#}
                        {% include 'flash/__flash.html.twig' %}
                    </div>

                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.whereSeeDriver) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.whereSeeDriver) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.nom) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.nom) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.prenoms) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.prenoms) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.dateNaissance) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.dateNaissance) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.lieuNaissance) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.lieuNaissance) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.lieuResidence) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.lieuResidence) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            <label for="#">SITUATION MATRIMONIALE <span class='text-danger'>*</span></label>
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            {{ form_widget(form.situationMatrimoniale) }}
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.numeroTelephone) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.numeroTelephone) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.nombreEnfant) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.nombreEnfant) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.niveauScolaire) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.niveauScolaire) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.dernierEmplois) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.dernierEmplois) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.pourquoiEtreChauffeur) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.pourquoiEtreChauffeur) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            <label for="#">QUEL TYPE DE VEHICULE AVEZ-VOUS DEJA CONDUIT ? (Vous aurez à passer un test de conduite.) <span class='text-danger'>*</span></label>
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            {{ form_widget(form.typeVehicule) }}
                            <div id="otherType" class="mt-3">
                                {{ form_widget(form.autreTypeVehicule) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            <label for="#">QUELLES SONT VOS PREFERENCES EN MATIERE DE PLACEMENT ? <span class='text-danger'>*</span></label>
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            {{ form_widget(form.preferencePlacement) }}
                            <div id="otherPreference" class="mt-3">
                                {{ form_widget(form.autrePreference) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            {{ form_label(form.pretentionSalariale) }}
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="form-group">
                                {{ form_widget(form.pretentionSalariale) }}
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border: 1px solid #efefef; margin-top: 30px!important;">
                        <div class="card-header" style="padding: 5px 15px; background-color: #555;color: #fff;">
                            Fichiers pièces jointes
                        </div>
                        <div class="card-body" style="padding: 5px;padding-top: 25px!important;">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        {{ form_label(form.cvFile) }}
                                        {{ form_widget(form.cvFile) }}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        {{ form_label(form.cniFile) }}
                                        {{ form_widget(form.cniFile) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-yellow aligncenter btn-sm">
                        Enregistrer
                    </button>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block javascripts %}
    <script>
        const recrutementsTypeVehicule = document.getElementById('recrutements_typeVehicule')
        const recrutementsPreferencePlacement = document.getElementById('recrutements_preferencePlacement')

        const otherType = document.getElementById('otherType')
        const otherPreference = document.getElementById('otherPreference')

        otherType.style.display = otherPreference.style.display = 'none'

        recrutementsTypeVehicule.querySelectorAll('input[type="checkbox"]').forEach((input) => {
            input.addEventListener('change', (event) => {
                let $this = event.currentTarget
                if ($this.value === 'Autre'){
                    if ($this.checked === true){
                        otherType.style.display = 'block'
                    }else {
                        otherType.style.display = 'none'
                    }
                }
            })
        })

        recrutementsPreferencePlacement.querySelectorAll('input[type="checkbox"]').forEach((input) => {
            input.addEventListener('change', (event) => {
                let $this = event.currentTarget
                if ($this.value === 'Autre'){
                    if ($this.checked === true){
                        otherPreference.style.display = 'block'
                    }else {
                        otherPreference.style.display = 'none'
                    }
                }
            })
        })

    </script>
{% endblock %}