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

{% block title %}Len's Backoffice - Client
{% endblock %}

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


{% block body %}

    <a class="toTop rounded-circle shadow p-1" href="#">
        <img src="/img/arrow-up.svg" alt="" width="40">
    </a>

    <div class=" absolute">


        <div class="d-flex">
            <div class="choice-menu">
                <div class="rounded-3 shadow p-3 mx-3 menu-wrapper">
                    <a target="_blank" href="https://www.espace-pro.micro76.fr" class="btn btn-dark mb-3">Accéder à
                        l'espace pro</a>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkParticulier">
                        <label class="form-check-label" for="checkParticulier">
                            Particulier
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkProfessionnel">
                        <label class="form-check-label" for="checkProfessionnel">
                            Professionnel
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="checkAll" checked>
                        <label class="form-check-label" for="checkProfessionnel">
                            Tout
                        </label>
                    </div>
                </div>

            </div>
            <div class="client-list">
                <div class="d-flex  sticky-top bg-white py-1"><input class="form-control search" id="search"
                                                                     placeholder="Search" autocomplete="off">
                    <button id="open_create_client_modal" class="btn btn-success mx-3" data-bs-toggle="modal"
                            data-bs-target="#createClientModal"><img src="/img/plus.svg" alt="Ajouter client"
                                                                     width="25"></button>
                    <a class="btn btn-primary" href="{{ path('client.export') }}">Exporter</a>

                </div>


                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th></th>
                        <th>#</th>
                        <th>Type</th>
                        <th>Mail</th>
                        <th>Nom / Prénom</th>
                        <th>Adresse</th>
                        <th>Téléphone</th>
                        <th></th>
                    </tr>

                    </thead>
                    <tbody id='tbody'></tbody>
                </table>
            </div>
        </div>

    </div>


    <!-- Modal Creation Client -->
    <div class="modal fade" id="createClientModal" 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">Creer un client</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab"
                                data-bs-target="#particulier" type="button" role="tab" aria-controls="nav-home"
                                aria-selected="true">Particulier
                        </button>
                        <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#pro"
                                type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Professionnel
                        </button>
                    </div>

                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="particulier" role="tabpanel"
                             aria-labelledby="nav-home-tab">
                            {{ form_start(particulier) }}
                            <div>
                                <input type="checkbox" name="noMail" id="noMailCheckboxParticulier">
                                <label for="noMailCheckboxParticulier" class="no-mail-label">Ce client n'a pas
                                    d'email</label>
                            </div>
                            {{ form_widget(particulier) }}
                            <button class="btn btn-success mt-3" type="submit">Créer un particulier</button>
                            {{ form_end(particulier) }}
                        </div>
                        <div class="tab-pane fade" id="pro" role="tabpanel" aria-labelledby="nav-profile-tab">
                            {{ form_start(pro) }}
                            {{ form_widget(pro) }}
                            <button class="btn btn-success mt-3" type="submit">Créer un professionnel</button>

                            {{ form_end(pro) }}

                        </div>
                    </div>


                </div>

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

    <!-- Modal Infos Client-->
    <div class="modal fade" id="infoClientModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-ml-30">


            <div class="modal-content modal-sz-50">

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Informations Client</h5>
                    <div class="fetched-data ms-3"></div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modal_infoClient"></div>
                <div class="modal-footer">


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

    <script src="{{ asset('js/client.js') }}"></script>
    <script>
        $('#infoClientModal').on('show.bs.modal', function (e) {
            var id = $(e.relatedTarget).data('id');
            $.ajax({
                method: 'POST',
                url: "{{ path('client.getClient') }}",
                data: {
                    id: id
                },
                success: function (data) {
                    $("#modal_infoClient").html(data);
                    $html = "<div class='link'>"
                    $html += "<a href='                                                 {{ path('reparation.new') }}?client=" + id + "  ' class='btn btn-primary'>	Creer une Reparation</a>";

                    $html += "<a href= '                                                    {{ path('commande.devis.new') }}?client=" + id + "  ' class = 'btn btn-primary mx-3' > Creer un Devis </a>"

                    $html += "<a href='                                                {{ path('commande.new') }}?client=" + id + "' class=' btn btn-primary'>Creer une Commande</a>"
                    $html += '</div>';

                    $(".fetched-data").html($html);

                }
            });

        });

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

            refresh(searchString);
        });

        let checkbox = document.querySelectorAll('.menu-wrapper .form-check-input');
        checkbox = Array.from(checkbox);
        checkbox.forEach((e) => {


            e.addEventListener('click', (r) => {
                checkbox.forEach((c) => {
                    c.checked = false;
                });
                r.target.checked = true;

                let activeCkb = [];
                activeCkb.push(r.target);


                if (activeCkb.length === 1) {
                    let value = activeCkb[0].nextElementSibling.innerHTML;
                    value = value.trim().toLowerCase();
                    if (value === 'tout')
                        value = '';
                    refresh(value);
                } else {
                    refresh('');
                }
            })
        });

        $(document).ready(function () {
            refresh('');


        });

        function refresh(q) {
            var url = "{{ path('client.getClients') }}";

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

            });
        }
    </script>
{% endblock %}