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

{% block title %}{{ context.get['app'] ? context.get['app'].name : company_name }} - {{ title }}{% endblock %}
{% block stylesheets %}
    <style>
        #reservation_tarifs{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        #reservation_tarifs .form-check{
            flex: 30%;
            margin: 10px!important;
        }
        .nb{
            margin-bottom: 20px!important;
            font-size: 12pt!important;
        }
        .nb span{
            color: #e1540c!important;
        }
    </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-lg-6 col-md-6">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <h2 class="spanned"><span>{{ title }}:</span></h2>
                            <p>{{ package.description|raw }}</p>
                        </div>
                        <div class="col-lg-12 col-md-12">
                          {#<div class="row">  
                            <ul class="address">
                                {% for tarif in package.tarifs %}
                                    <li class="small">
                                        <span class="fa fa-calendar"></span>
                                        {{ tarif.name }} -
                                        {{ tarif.duration }} -
                                        {{ tarif.price|format_currency(currency()) }}
                                        {% if tarif.description %}
                                            <br>
                                            <p style="font-size: 10pt;font-style: normal;text-transform: lowercase; color: #555;">
                                                {{ tarif.description|nl2br }}
                                            </p>
                                        {% endif %}
                                    </li>
                                {% endfor %}
                            </ul>
                              </div>#}
                            <div class="nb">
                                <strong>NB:</strong> <br>
                                <ul>
                                    <li>Zone 1 <span>(Toutes les communes d'Abidjan)</span></li>
                                    <li>Zone 2<span>( 25000F / jour moins de 250km d'Abidjan)</span></li>
                                    <li>Zone 3 <span>(40000F la première journée et 25000F/jour supplémentaire au délà de 250km d'Abidjan )</span></li>
                                </ul>
                                <p>Les frais d'hebergement et de nourriture sont à la charge du chauffeur.</p>
                                {#<p>les frais d'hebergements et de nourriture sont à la charge du chauffeur</p>#}
                                <!--<p>Pour la zone 2 le montant total de la facture sera majoré de <span>10 000 Fcfa</span></p>
                                <p>Pour la zone 3 le montant total de la facture sera majoré de <span>30 000 Fcfa</span></p>-->
                            {#<div class="nb">
                                <strong>NB:</strong> Pour les déplacements hors Abidjan: <br>
                                <p>Le montant initial journalier sera marjoré de <span>5 000 Fcfa</span></p>
                                <p>Il s'agit exclusivement des trajets:</p>
                                <ul>
                                    <li>D'<span>Abidjan</span> jusqu'à <span>Lakota</span></li>
                                    <li>D'<span>Abidjan</span> jusqu'à <span>Yamoussoukro</span></li>
                                    <li>D'<span>Abidjan</span> jusqu'à <span>Abengourou</span></li>
                                </ul>
                                <p>Pour toute autre destination à l'intérieur du pays <span>15 000 Fcfa</span> sera rajouté au forfait par jour.</p>
                            </div>#}
                        </div>
                        <div class="col-lg-12 col-sm-12  col-sm-6">
                            <strong>Réseaux sociaux:</strong>
                            <ul class="social social-big">
                                {% if context.get['app'].facebook %}
                                    <li>
                                        <a class="social-fb fa fa-facebook" href="{{ context.get['app'].facebook }}"></a>
                                    </li>
                                {% endif %}

                                {% if context.get['app'].twitter %}
                                    <li>
                                        <a class="social-twitter fa fa-twitter" href="{{ context.get['app'].twitter }}" title="twitter"></a>
                                    </li>
                                {% endif %}

                                {% if context.get['app'].linkedin %}
                                    <li>
                                        <a class="social-linkedin fa fa-linkedin" style="background-color: #1DA1F2;" href="{{ context.get['app'].linkedin }}" title="linkedin"></a>
                                    </li>
                                {% endif %}

                                {% if context.get['app'].youtube %}
                                    <li>
                                        <a class="social-youtube fa fa-instagram" style="background-color: #C13584;" href="{{ context.get['app'].youtube }}" title="Instagram"></a>
                                    </li>
                                {% endif %}
                            </ul>
                            <a href="{{ path('pages.about') }}" class="btn btn-black-bordered btn-sm">Plus d'infos</a>
                        </div>
                    </div>
                    </div>
                    <div class="row">
                        {{ pub_home() }}
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 contact-form">
                    {% include 'flash/__flash.html.twig' %}
                    {% include 'web/packages/_partials/_form.html.twig' %}
                </div>
            </div>
        </div>
    </section>

    {{ publicites() }}
{% endblock %}

{% block javascripts %}
    <script>
        let tarifs = document.getElementById('reservation_tarifs')
        const addInput = (e) => {
            let element = e.currentTarget

            if (element.checked){
                // Create an <input> element, set its type and name attributes
                let input = document.createElement("input");
                input.type = "number";
                input.name = "reservation[quantities]["+ element.value +"]";
                input.classList = "ml-3 form-control tarifs_quantity" + element.value;
                input.min = "1";
                input.value = "0";
                input.required = true;
                element.parentNode.appendChild(input)
            }else{
                element.parentNode.querySelector('.tarifs_quantity' + element.value).remove()
            }
        }
        tarifs.querySelectorAll('input[type="checkbox"]').forEach((input) => {
            input.required = true;
            input.addEventListener('click', addInput)
        })

        //Gestion des champs de date
        let dateDebut = document.getElementById('reservation_dateStart')
        let dateFin = document.getElementById('reservation_dateEnd')

        dateDebut.addEventListener('change', (e) => {
            let element = e.currentTarget
            let date = new Date(element.value);
            let lastdate = new Date();
            lastdate.setDate(date.getDate()+1);

            let dd = String(lastdate.getDate()).padStart(2, '0');
            let mm = String(lastdate.getMonth() + 1).padStart(2, '0'); //January is 0!
            let yyyy = lastdate.getFullYear();
            dateFin.value = yyyy + '-' + mm + '-' + dd
        })

        dateFin.addEventListener('change', (e) => {
            let element = e.currentTarget
            let date = new Date(element.value);
            let firstdate = new Date();

            if(date.getTime() < firstdate.getTime()){
                alert('Erreur, veuillez choisir une date supérieur a celle du debut')
                dateFin.value = dateDebut.value
            }
        })

        let trajet = document.getElementById('reservation_trajets')
        let autreTrajetWrap = document.getElementById('autreTrajet')

        autreTrajetWrap.style.display = 'none'

        const checkTrajet = (e) => {
            let element = e.currentTarget
            if (parseInt(element.value) === 2 || parseInt(element.value) === 3){
                autreTrajetWrap.style.display = 'block'
                autreTrajetWrap.querySelector('input[type="text"]').setAttribute('required', 'required')
            }else{
                autreTrajetWrap.style.display = 'none'
                autreTrajetWrap.querySelector('input[type="text"]').value = ''
                autreTrajetWrap.querySelector('input[type="text"]').removeAttribute('required')
            }
        }

        trajet.addEventListener('change', checkTrajet)
    </script>
{% endblock %}