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

{% block title %}{{ context.get['app'] ? context.get['app'].name : company_name }} - {{ title }}{% endblock %}
{% block stylesheets %}
    <style>
        .col-form-label{font-size: 15px!important;}
        #reservation_prive_lieu, #reservation_prive_chauffeur{
            display: flex;
            flex-direction: row;
        }
        .form-check{margin-right: 20px;}
        .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 25000/jour supplémentaire au délà de 250km d'Abidjan )</span></li>
                                </ul>#}

                                <!--<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 'web/packages/_partials/_form_privee.html.twig' %}
                </div>
            </div>
        </div>
    </section>

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

{% block javascripts %}
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>

        let lieuChauffeurWrap = document.getElementById('lieuChauffeur')
        let lieu = document.getElementById('reservation_prive_lieu')
        lieuChauffeurWrap.style.display = 'none'

        const checkLieu = (e) => {
            let element = e.currentTarget
            if (parseInt(element.value) === 0){ //Oui
                lieuChauffeurWrap.style.display = 'block'
            }else{//Non
                lieuChauffeurWrap.style.display = 'none'
            }
        }

        lieu.querySelectorAll("input[type='radio']").forEach((input)=> {
            input.addEventListener('change', checkLieu)
        });

        let price = document.getElementById('reservation_prive_salaire')
        let maxPrice = 140000;
        const checkPrice = (e) => {
            let element = e.currentTarget
            var getPrice = parseInt(element.value)
            if(getPrice < maxPrice){
                Swal.fire({
                    title: 'Attention',
                    text: `Nous vous conseillons ${maxPrice} Fcfa ou plus`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Oui, continuer!',
                    cancelButtonText: 'Fermer'
                })
            }
        }

        price.addEventListener('change', checkPrice)

    </script>
{% endblock %}