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


{% block title %}Len's - Intervention
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="/css/intervention.css">
{% endblock %}

{% block header %}
    <div class="submenu">
        <a href="{{ path('intervention',{submenu : 'ask'}) }}"
           class="p-3 border text-white d-flex flex-column {% if submenu == 'ask' %}border-3 border-dark{% endif %}">
            <div class="fs-1">{{ statusRepo.find(24).getInterventions() | length }}</div>
            <div>Demande d'intervention Professionnel</div>
        </a>
        <a href="{{ path('intervention',{submenu : 'all'}) }}"
           class="p-3 border  text-white {% if submenu == 'all' %}border-3 border-dark{% endif %}">
            <img src="/img/tools.svg" alt="tools" width="50">
            <div>Intervention ({{ interventions | length }})</div>

        </a>

        {# <a href="{{path('intervention',{submenu : 'schedule'})}}" class="p-3 border text-white d-flex flex-column {% if submenu == 'schedule' %}border-3 border-dark{% endif %}">
			<div class="fs-1">{{statusRepo.find(29).getInterventions() | length}}</div>
			<div>Intervention Programmée</div>
		</a> #}

    </div>

    <div class="submenu">


        <a href="{{ path('intervention',{submenu : 'processing'}) }}"
           class="p-3 border {% if submenu == 'processing' %}border-3 border-dark{% endif %}">

            <img src="/img/magnify.svg" alt="processing" width="50">

            <div>Diagnostic en cours ({{ statusRepo.find(12).getInterventions() | length }})</div>

        </a>

        <div class="d-flex flex-column item">


            <a href="{{ path('intervention',{submenu : 'devis'}) }}"
               class="p-3 border  {% if submenu == 'devis' %}border-3 border-dark{% endif %}">
                <img src="/img/file-earmark.svg" alt="devis" width="50">
                <div>Devis ({{ devisRepo.findByFilter('','waiting','inter') | length }})</div>

            </a>
            <a href="{{ path('intervention',{submenu : 'devis_send'}) }}"
               class="p-3 border  {% if submenu == 'devis_send' %}border-3 border-dark{% endif %}">
                <img src="/img/send.svg" alt="devis" width="50">
                <div>Devis ({{ devisRepo.findByFilter('','send','inter') | length }})</div>

            </a>

            <a href="{{ path('intervention',{submenu : 'devis_accept'}) }}"
               class="p-3 border  {% if submenu == 'devis_accept' %}border-3 border-dark{% endif %}">
                <img src="/img/file-earmark.svg" alt="devis" width="50">
                <div>Devis accepté ({{ devisRepo.findByFilter('','accept','inter') | length }})</div>
            </a>
            <a href="{{ path('intervention',{submenu : 'devis_deny'}) }}"
               class="p-3 border  {% if submenu == 'devis_deny' %}border-3 border-dark{% endif %}">
                <img src="/img/file-earmark.svg" alt="devis" width="50">
                <div>Devis refusé ({{ devisRepo.findByFilter('','deny','inter') | length }})</div>

            </a>
        </div>
        <div class="d-flex flex-column item">
            <a href="{{ path('intervention',{submenu : 'repair'}) }}"
               class="p-3 border  {% if submenu == 'repair' %}border-3 border-dark{% endif %}">

                <img src="/img/tools.svg" alt="processing" width="50">

                <div>Intervention en cours ({{ statusRepo.find(21).getInterventions() | length }})</div>

            </a>
            <a href="{{ path('intervention',{submenu : 'paiement'}) }}"
               class="p-3 border   {% if submenu == 'paiement' %}border-3 border-dark{% endif %}">

                <img src="/img/euro.svg" alt="euro" width="50">

                <div>En attente de paiement ({{ statusRepo.find(23).getInterventions() | length }})</div>

            </a>
        </div>

        <a href="{{ path('intervention',{submenu : 'waiting'}) }}"
           class="p-3 border {% if submenu == 'waiting' %}border-3 border-dark{% endif %}">

            <img src="/img/pause.svg" alt="pause" width="50">

            <div>Intervention en attente ({{ statusRepo.find(13).getInterventions() | length }})</div>

        </a>

        <div class="d-flex flex-column item">

            <a href="{{ path('intervention',{submenu : 'finish'}) }}"
               class="p-3 border  {% if submenu == 'finish' %}border-3 border-dark{% endif %}">

                <img src="/img/check.svg" alt="check" width="50">
                <div class="ms-3">Intervention Terminé ({{ statusRepo.find(14).getInterventions() | length }})</div>

            </a>
            <a href="{{ path('intervention',{submenu : 'deny'}) }}"
               class="p-3 border {% if submenu == 'deny' %}border-3 border-dark{% endif %}">

                <img src="/img/cancel.svg" alt="cancel" width="50">
                <div class="ms-3">Intervention Refusé ({{ statusRepo.find(4).getInterventions() | length }})</div>


            </a>

        </div>

    </div>
{% endblock %}

{% block drawer_button %}
    <button id="drawer_button" class="btn btn-info m-3" onclick="openSubmenuDrawer()">
        Sous-Menu
    </button>
{% endblock %}
{% block body %}

    <div id="drawer">
        <button onclick="closeSubmenuDrawer()">
            <img src="/img/cross.svg" alt="" width="30">
        </button>
        <a href="{{ path('intervention',{submenu : 'ask'}) }}"
           class="p-3 border  text-white {% if submenu == 'ask' %}border-3 border-dark{% endif %}">
            <div class="fs-1">{{ statusRepo.find(24).getInterventions() | length }}</div>
            <div>Demande d'intervention Professionnel</div>

        </a>
        <a href="{{ path('intervention',{submenu : 'all'}) }}"
           class="p-3 border  text-white {% if submenu == 'all' %}border-3 border-dark{% endif %}">
            <img src="/img/tools.svg" alt="tools" width="50">
            <div>Intervention ({{ interventions | length }})</div>

        </a>


        <a href="{{ path('intervention',{submenu : 'processing'}) }}"
           class="p-3 border   {% if submenu == 'processing' %}border-3 border-dark{% endif %}">

            <img src="/img/magnify.svg" alt="processing" width="50">

            <div>Diagnostic en cours ({{ statusRepo.find(12).getInterventions() | length }})</div>

        </a>


        <a href="{{ path('intervention',{submenu : 'devis'}) }}"
           class="p-3 border  {% if submenu == 'devis' %}border-3 border-dark{% endif %}">
            <img src="/img/file-earmark.svg" alt="devis" width="50">
            <div>Devis ({{ devisRepo.findByFilter('','waiting','inter') | length }})</div>

        </a>
        <a href="{{ path('intervention',{submenu : 'devis_send'}) }}"
           class="p-3 border  {% if submenu == 'devis_send' %}border-3 border-dark{% endif %}">
            <img src="/img/send.svg" alt="devis" width="50">
            <div>Devis ({{ devisRepo.findByFilter('','send','inter') | length }})</div>

        </a>

        <a href="{{ path('intervention',{submenu : 'devis_accept'}) }}"
           class="p-3 border  {% if submenu == 'devis_accept' %}border-3 border-dark{% endif %}">
            <img src="/img/file-earmark.svg" alt="devis" width="50">
            <div>Devis accepté({{ devisRepo.findByFilter('','accept','inter') | length }})</div>
        </a>
        <a href="{{ path('intervention',{submenu : 'devis_deny'}) }}"
           class="p-3 border  {% if submenu == 'devis_deny' %}border-3 border-dark{% endif %}">
            <img src="/img/file-earmark.svg" alt="devis" width="50">
            <div>Devis refusé({{ devisRepo.findByFilter('','deny','inter') | length }})</div>

        </a>
        <a href="{{ path('intervention',{submenu : 'repair'}) }}"
           class="p-3 border  {% if submenu == 'repair' %}border-3 border-dark{% endif %}">

            <img src="/img/tools.svg" alt="processing" width="50">

            <div>Intervention en cours ({{ statusRepo.find(21).getInterventions() | length }})</div>

        </a>
        <a href="{{ path('intervention',{submenu : 'paiement'}) }}"
           class="p-3 border   {% if submenu == 'paiement' %}border-3 border-dark{% endif %}">

            <img src="/img/euro.svg" alt="euro" width="50">

            <div>En attente de paiement ({{ statusRepo.find(23).getInterventions() | length }})</div>

        </a>

        <a href="{{ path('intervention',{submenu : 'waiting'}) }}"
           class="p-3 border {% if submenu == 'waiting' %}border-3 border-dark{% endif %}">

            <img src="/img/pause.svg" alt="pause" width="50">

            <div>Intervention en attente ({{ statusRepo.find(13).getInterventions() | length }})</div>

        </a>


        <a href="{{ path('intervention',{submenu : 'finish'}) }}"
           class="p-3 border {% if submenu == 'finish' %}border-3 border-dark{% endif %}">

            <img src="/img/check.svg" alt="check" width="50">
            <div class="ms-3">Intervention Terminé ({{ statusRepo.find(14).getInterventions() | length }})</div>

        </a>
        <a href="{{ path('intervention',{submenu : 'deny'}) }}"
           class="p-3 border  {% if submenu == 'deny' %}border-3 border-dark{% endif %}">

            <img src="/img/cancel.svg" alt="cancel" width="50">
            <div class="ms-3">Intervention Refusé ({{ statusRepo.find(4).getInterventions() | length }})</div>


        </a>


    </div>

    <div class="mx-3">
        <div class="d-flex  sticky-top bg-white pt-1"><input class="form-control search " id="search"
                                                             placeholder="Search" autocomplete="off" value="{{ q }}">
            <a class="btn btn-success" href="{{ path('intervention.new') }}" id="createInterventionButton">
                <img src="/img/plus.svg" alt="plus" width="40">
            </a>
        </div>


        <table class="table mt-3">
            <thead>
            <tr class="text-center">
                    <td></td>
                <td>Date de création</td>
                <td>Client</td>
                <td>Numero de l'intervention</td>
                {% if 'devis' in submenu %}
                    <td>Numero du devis</td>
                {% else %}
                    <td>Description</td>
                {% endif %}

                <td>Montant</td>
                <td>Heure</td>

                <td>Statut</td>

                <td></td>
                <td></td>
            </tr>
            </thead>
            <tbody id='tbody'></tbody>
        </table>

    </div>

    {% include 'CRUD/livraison/modal.html.twig' with {type : 'rep'} %}


    <!-- Modal Info devis-->
    <div class="modal fade" id="infosModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Informations Devis</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="fetched-data"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>


            </div>
        </div>
    </div>

    <!-- Modal edit  reparation-->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modification Intervention</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div>
                    <a href="{{ path('intervention.edit.inter') }}" class="edit-link">
                        <img src="/img/edit.svg" alt="edit" width="40">
                        <p>Intervention</p>

                    </a>

                    <a href="{{ path('intervention.edit.diag') }}" class="edit-link">
                        <img src="/img/edit.svg" alt="edit" width="40">
                        <p>Diagnostic</p>


                    </a>
                    {% if submenu in ['devis','repair','paiement','finish']
                    %}
                        <a href="{{ path('intervention.edit.devis',{id : 0}) }}" class="edit-link">
                            <img src="/img/edit.svg" alt="edit" width="40">
                            <p>Devis</p>

                        </a>


                    {% endif %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>


            </div>
        </div>
    </div>

    <!-- Modal Printing -->
    <div class="modal fade" id="printModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Imprimer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div>

                    <a href="{{ path('intervention.print',{submenu : 'diag'}) }}" target="_blank" class="print-link">
                        <img src="/img/printer.svg" alt="printer" width="40">
                        <p>Diagnostique</p>
                    </a>


                    <a href="{{ path('intervention.print',{submenu : 'devis'}) }}" target="_blank" class="print-link">
                        <img src="/img/printer.svg" alt="printer" width="40">
                        <p>Devis</p>
                    </a>

                    <a href="{{ path('intervention.print',{submenu : 'invoice'}) }}" target="_blank" class="print-link">
                        <img src="/img/printer.svg" alt="printer" width="40">
                        <p>Facture</p>
                    </a>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>

                </div>
            </div>
        </div>
    </div>

    <!-- Modal Infos en attente-->
    <div class="modal fade" id="waitingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Mise en attente</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ path('intervention.set',{id : 0,status :13}) }}" method="get">
                    <div class="modal-body">
                        <div class="fetched-data"></div>
                        <label for="reason">Raison :</label>
                        <textarea name="reason" id="waiting_reason" rows="10" cols="50" class="form-control"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-success">Valider</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    {% include 'intervention/modals.html.twig' %}

    <script src="/js/intervention.js"></script>

    <script>
        let path = "{{ path('intervention.get',{submenu : submenu}) }}";


        document.getElementById('search').addEventListener('keyup', (e) => {
            const searchString = e.target.value;


            $.ajax({
                method: "POST",
                url: path,
                data: {
                    q: searchString
                },
                success: function (data) {
                    document.getElementById('tbody').innerHTML = data;

                }
            });
        });


        $(document).ready(function () {

            $.ajax({
                method: "POST",
                url: path,
                data: {
                    q: "{{ q }}"
                },
                success: function (data) {
                    document.getElementById('tbody').innerHTML = data;

                }
            });
        });

        $('#infosModal').on('show.bs.modal', function (e) {


            var id = $(e.relatedTarget).data('id');

            $.ajax({
                method: "POST",
                url: "{{ path('intervention.infos') }}",

                data: {
                    id: id
                },
                success: function (data) {
                    $('.fetched-data').html(data);

                }
            });
        });
        $('#editModal').on('show.bs.modal', function (e) {


            var id = $(e.relatedTarget).data('id');
            let link = document.getElementsByClassName('edit-link');
            for (let i = 0; i < link.length; i++) {
                let href = link[i].href;
                href = href.split('?')[0];


                link[i].href = href + "?num=" + id;
            }

        });
    </script>

{% endblock %}