{% set active = 'home' %}


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

{% block title %}
    Accueil - Micro76
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/home.css') }}">
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>


{% endblock %}

{% block body %}

    <section class="typed-container">
        <div>
            <div>Réparer votre
                <br>
                <br>
                <span class="typed-js"></span>
            </div>
        </div>
        <p>Efficacement et à deux pas de chez vous.</p>
        <div class="d-flex">

            <span href="tel:{{ settings.find(12) }}" class="schedule fs-4 bg-blue-500 text-white rounded d-flex align-items-center  p-3">
                <i class="fas fa-phone-alt me-2"></i>
                <span class="text-white">{{ settings.find(12) }}</span>
            </span>
        </div>
    </section>


    {% set class = "" %}
    {% set class_rep = "" %}
    {% if rep_num is defined %}
        {% set class = "" %}
        {% set class_rep = "show active" %}

    {% endif %}



    <section class="help" id="help">
        <h1 class="text-center lh-md">
            Bonjour,
            <br>
            Comment pouvons-nous vous aider ?
        </h1>

        <ul class="nav nav-pills mb-3" id="pills-tab-nav" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ class }}" id="pills-home-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                        aria-selected="true">
                    <div class="title">
                        {{ settings.find(34) }}
                    </div>

                    <div>
                        {{ settings.find(35) }}
                    </div>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link " id="pills-devis-tab" data-bs-toggle="pill" data-bs-target="#pills-devis"
                        type="button" role="tab" aria-controls="pills-profile" aria-selected="false">

                    <div class="title">
                        {{ settings.find(36) }}

                    </div>

                    <div>
                        {{ settings.find(37) }}

                    </div>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ class_rep }}" id="pills-profile-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-assistance" type="button" role="tab" aria-controls="pills-profile"
                        aria-selected="false">
                    <div class="title">
{{ settings.find(38) }}
                    </div>

                    <div>
                        {{ settings.find(39) }}

                    </div>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link " id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact"
                        type="button" role="tab" aria-controls="pills-profile" aria-selected="false">

                    <div class="title">
                        {{ settings.find(40) }}

                    </div>

                    <div>
                        {{ settings.find(41) }}

                    </div>
                </button>

            </li>

        </ul>



    </section>


    <div>
        <div class="tab-content my-5" id="pills-tabContent">
            <div class="tab-pane fade {{ class }}" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                <h1 class="title text-center text-blue-500">
                    Sur quel type d’équipement ?
                </h1>
                <!-- Example single danger button -->
                <div class="btn-group dropdown-equipement">
                    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
						<span class="title text-center fs-3">
							Sur quel type d’équipement ?
						</span>
                    </button>
                    <ul class="dropdown-menu">
                        {% for item in categories %}
                            {% if item.isEquipement() %}

                                <li class="border-bottom">

                                    <button class="dropdown-item d-flex align-items-center" onclick="openServiceTab('{{ item.id }}')">
                                        {{ item.image.display(75) }}
                                        <span>{{ item }}</span>
                                    </button>
                                </li>


                            {% endif %}
                        {% endfor %}

                    </ul>
                </div>

                <ul class="nav nav-pills  equipement" id="pills-tab" role="tablist">
                    {% for item in categories %}
                        {% if item.isEquipement() %}
                            <li class="nav-item item" role="presentation">
                                <button class="nav-link" id="pills-home-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills{{ item.id }}" type="button" role="tab"
                                        aria-controls="pills-home">
                                    <div class="d-flex align-items-center justify-content-center">{{ item.image.display(100) }}</div>
                                    <span>{{ item }}</span>
                                </button>
                            </li>
                        {% endif %}
                    {% endfor %}

                </ul>


                <section class="service">
                    <div class="tab-content" id="pills-tabContent">
                        {% for item in categories %}
                            <div class="tab-pane fade " id="pills{{ item.id }}" role="tabpanel"
                                 aria-labelledby="pills-{{ item.id }}-tab">
                                <div class="content">
                                    {% for service in item.service %}
                                        {% set link = service.link | first %}
                                        {% if service.id in [2,3] %}
                                            {% set modal = 'data-bs-target=#contactModal data-bs-toggle=modal' %}
                                        {% endif %}
                                        <a href="{{ link.href }}" {{ modal | default('')}}>
                                            <div class="item">
                                                <span class="localisation {{ service.localisation.background }}">{{ service.localisation }}</span>
                                                <div class="d-flex justify-content-center">
                                                    {% if service.hasImage() %}
                                                        {{ service.image.display(100,'ico') }}

                                                    {% endif %}
                                                </div>
                                                <p class="title">{{ service.title }}</p>
                                                <p class="descr">{{ service.description }}
                                                </p>
                                                <div>
                                                    {% for link in service.link %}
                                                        <a href="{{ link.href }}" class="link">{{ link }}</a>
                                                    {% endfor %}

                                                </div>
                                            </div>
                                        </a>
                                    {% endfor %}
                                </div>
                                <div class="d-flex justify-content-center my-4 ">
                                    <a href="{{ path('repair.item',{item : item | replace({' ' : '_'}) }) }}"
                                       class="btn btn-primary p-3 mt-2">
                                        En savoir plus</a>

                                </div>
                            </div>

                        {% endfor %}
                    </div>
                </section>

            </div>

            <div class="tab-pane fade  mx-5 {{ class_rep }}" id="pills-assistance" role="tabpanel"
                 aria-labelledby="pills-profile-tab">
                <div class="d-flex justify-content-center">
                    <form action="{{ path('home') }}" id="#form_rep" method="post" >
                        <label for="rep_num" class="fs-3 mb-4 text-blue-500" >Entrer votre numéro de réparation
                        </label>
                        <div class="d-flex">
                            <input type="text" name="rep_num" placeholder="REP-XXX" class="form-control">
                            <button class="btn btn-primary ms-3">
                                <i class="search icon"></i>
                                Rechercher

                            </button>
                        </div>
                    </form>
                </div>
                <div class="d-flex justify-content-center">
                    <div class="d-flex flex-column align-items-center">
                        {% if rep_num is defined and status != -1 %}
                            <div class="mt-5 align-self-start w-100">
                                <h2 class="title text-center">Suivi de votre réparation :</h2>
                                <div class="my-3 fs-4">{{ rep_num }}</div>
                            </div>
                        {% endif %}

                        {% if status is defined and status != -1 %}
                            {% set class= "disabled " %}
                            {% if status == 3 %}
                                {% set class= "active" %}
                            {% elseif status in [22,15,16,17,12,4,26] %}
                                {% set class= "" %}

                            {% endif %}
                            <div class="ui unstackable steps ">
                                <div class="step {{ class }}">
                                    <i><img src="{{ asset('img/process1.png') }}" alt="process" width="40"></i>
                                    <div class="content">
                                        <div class="title">En cours de traitement</div>
                                        <div class="description"></div>
                                    </div>
                                </div>

                                {% set class= "disabled " %}
                                {% if status == 12 %}
                                    {% set class= "active" %}
                                {% elseif status in [22,15,16,17,4,26] %}
                                    {% set class= "" %}
                                {% endif %}
                                <div class="{{ class }} step">
                                    <i class="search icon"></i>
                                    <div class="content">
                                        <div class="title">En cours de diagnostique</div>
                                        <div class="description"></div>
                                    </div>
                                </div>

                                {% set class= "disabled " %}
                                {% if status == 17 %}
                                    {% set class= "active" %}
                                {% elseif status in [22,15,16,4,26] %}
                                    {% set class= "" %}
                                {% endif %}
                                <div class="step {{ class }}">
                                    <i class="check circle outline icon"></i>
                                    <div class="content">
                                        <div class="title">Devis prêt</div>
                                        <div class="description"></div>
                                    </div>
                                </div>

                                {% set class= "disabled " %}
                                {% if status == 16 %}
                                    {% set class= "active" %}
                                {% elseif status in [22,15,4,26] %}
                                    {% set class= "" %}
                                {% endif %}
                                <div class="step {{ class }}">
                                    <i class="wrench icon"></i>
                                    <div class="content">
                                        <div class="title">Réparation en cours</div>
                                        <div class="description"></div>
                                    </div>
                                </div>

                                {% set class= "disabled " %}
                                {% if status in [15,4] %}
                                    {% set class= "active" %}
                                {% elseif status in [22] %}
                                    {% set class= "" %}
                                {% endif %}
                                {% if status == 15 %}
                                    <div class="step {{ class }}">
                                        <i class="check circle outline icon"></i>
                                        <div class="content">
                                            <div class="title">Réparation terminée</div>
                                            <div class="description"></div>
                                        </div>
                                    </div>
                                {% elseif status == 4 %}
                                    <div class="step {{ class }}">
                                        <i class="x icon"></i>
                                        <div class="content">
                                            <div class="title">Réparation refusée</div>
                                            <div class="description"></div>
                                        </div>
                                    </div>

                                {% endif %}

                                {% set class= "disabled " %}

                                {% if status == 26 %}
                                    {% set class= "active" %}

                                    <div class="step {{ class }}">
                                        <i class="recycle icon"></i>
                                        <div class="content">
                                            <div class="title">Equipement recyclé</div>
                                            <div class="description"></div>
                                        </div>
                                    </div>
                                {% else %}
                                    {% if status == 22 %}
                                        {% set class= "active" %}
                                    {% endif %}
                                    <div class="step {{ class }}">
                                        <i class="truck icon"></i>
                                        <div class="content">
                                            <div class="title">Equipement rendu</div>
                                            <div class="description"></div>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        {% elseif status is defined and  status == -1 %}
                            <h2 class="title my-5 text-danger">
                                La réparation
                                {{ rep_num }}
                                n'existe pas
                            </h2>
                        {% endif %}


                        <div class="alert alert-primary d-flex align-items-center my-4 w-50" role="alert">
                            <div>
                                <i class="info icon"></i>
                            </div>
                            <div>
                                Si vous souhaitez plus de details concernant votre reparation, merci de contacter notre
                                atelier au 02 35 37 45 83
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="tab-pane fade  mx-5" id="pills-contact" role="tabpanel" aria-labelledby="pills-profile-tab">
                {{ render(path('template.get',{url : 'contact_form', wrapper : false})) }}

            </div>
            <div class="tab-pane fade  mx-5 " id="pills-devis" role="tabpanel" aria-labelledby="pills-profile-tab">
                {% if step |default(1) != 1 %}
                    {{ render(path('template.get',{url : 'devis-step'~step,id : item.id})) }}
                {% else %}
                    {{ render(path('template.get',{url : 'devis-step'~step|default(1)})) }}

                {% endif %}

            </div>
        </div>

    </div>



    <main>

        {{ render(path('template.get',{url : 'know_more'})) }}


    </main>

    {% include 'templates/modals/scheduleRdv.html.twig' %}
    {% include 'templates/modals/contact.html.twig' %}

    <script>function openServiceTab(s) {
            let actives = document.querySelectorAll('#pills-tabContent .tab-pane.fade.show.active');
            for (let i = 0; i < actives.length; i++) {
                let item = actives[i];
                if(item.getAttribute('id') !== 'pills-home'){
                    item.classList.remove('show');
                    item.classList.remove('active');
                }
            }


            let current = document.querySelector("#pills"+s);

            current.classList.add('show');
            current.classList.add('active');

            let count = 25;
            count += (current.children[0].children.length/2)  * 25;
            document.getElementById('pills-tabContent').style.height = count+'rem';
        }

        {% if rep_num is defined %}

        window.location = '#help';{% endif %}let values = [];
        {% for item in settings.find(6) | split(';') %}values.push('{{ item }}');{% endfor %}const typed = new Typed('.typed-js', {
            strings: values,
            typeSpeed: 100,
            loop: true,
            backDelay: 2000
        });


        document.getElementById('pills-home-tab').addEventListener('click', () => {
            window.location = '#help';

        });document.getElementById('pills-devis-tab').addEventListener('click', () => {
            window.location = '#help';

        });document.getElementById('pills-profile-tab').addEventListener('click', () => {
            window.location = '#help';

        });document.getElementById('pills-contact-tab').addEventListener('click', () => {
            window.location = '#help';

        });
        document.getElementById('pills-home').addEventListener('click', () => {
            window.location = '#pills-home';
            let service = document.getElementsByClassName('service')[0];

            if (service != null && !service.classList.contains('show')) {
                service.classList.add('show');
            }

        });

    </script>
{% endblock %}