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

{% import 'macros/macro.html.twig' as macro %}

{% block title %}
    {{ parent() }}
    Certificats
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
        .input-sub-cat-new {
            width: 350px;
            margin-top: -5px;
            padding-left: 15px;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}

    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-header block-header-default bg-gray">

                {% if clients %}
                    <h4 class="font-w700" style="display: -webkit-box">
                        <select class="form-control" id="clients-select" name="clients-select" style="width: 350px;margin-right: 20px;margin-top: -6px;">
                            {% for client in clients  %}
                                <option value="{{ client.code }}" {% if clientSelected.code == client.code %}selected{% endif %}>{{ client.name }}, {{ client.agence }}</option>
                            {% endfor  %}
                        </select>
                    </h4>

                {% else %}
                    <h4 class="font-w700">
                        {{ clientSelected.name }}, {{ clientSelected.agence }} - Certificats disponibles
                    </h4>

                {% endif %}
            <div>
                {% if clients %}
                    <button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" title="" onclick="openPopipCertificatAdd()">
                        <i class="fa fa-plus mr-5"></i>Ajouter un certificat
                    </button>
                {% endif %}

                <button type="button" class="btn btn-sm btn-primary" onclick="chantierList()">
                    Voir chantiers
                </button>

            </div>
        </div>
        <div class="block-content block-content-full">
            <!-- DataTables functionality is initialized with .js-dataTable-full class in js/pages/be_tables_datatables.min.js which was auto compiled from _es6/pages/be_tables_datatables.js -->
            <table class="table table-bordered table-vcenter js-dataTable-full">
                <thead>
                <tr>
                    <th class="text-center" style="width: 50px">Date</th>
                    <th class="text-center" style="width: 130px">Catégorie</th>
                    <th class="text-center" style="width: 250px">Sous-categorie</th>
                    <th class="text-center">Certificat</th>
                    {% if clients %}
                        <th class="text-center" style="width: 50px">Visible</th>
                    {% endif %}
                    <th class="text-center" style="width: 30px"></th>
                </tr>
                </thead>
                <tbody>

                {% for certificat in certificats %}

                    <tr>
                        <td class="d-none d-sm-table-cell text-center">
                            {% if certificat.createdAt %}
                                {{ certificat.createdAt|date('d/m/Y') }}
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell">
                            <div style="margin-top: 4px;">
                                {{ certificat.category }}
                            </div>
                        </td>

                        <td class="d-none d-sm-table-cell">
                            <div style="margin-top: 4px;">
                                {{ certificat.subcategory }}
                            </div>
                        </td>
                        <td class="d-none d-sm-table-cell">
                            <div style="margin-top: 4px; font-weight: 900">
                                {{ certificat.label }}
                            </div>
                        </td>
                        {% if clients %}
                            <td class="d-none d-sm-table-cell">
                                <div style="margin-top: 4px; font-weight: 900" class="text-center">
                                    {% if certificat.forAll %}TOUS{% endif %}
                                </div>
                            </td>
                        {% endif %}
                        <td class="text-center" style="display: flex">
                                <button type="button" class="btn btn-sm btn-primary" onclick="window.open('{{ asset('uploads/certificats/' ~ certificat.certificatFilename) }}', '_blank');">
                                    Voir
                                </button>
                                {% if clients %}
                                    <button type="button" class="btn btn-sm btn-primary" id="btn-remove-certificat-{{ certificat.id  }}" style="margin-left: 10px" onclick="removeCertificat('{{ certificat.id }}');">
                                        Supp
                                    </button>
                                {% endif %}
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
    <!-- END Dynamic Table Full -->

    <button type="button" id="btn-modal-certificat-add" class="btn" data-toggle="modal" data-target="#modal-certificat-add" style="display: none"></button>

{% endblock %}

{% block modal %}

    <div class="modal" id="modal-certificat-add" tabindex="-1" role="dialog" aria-labelledby="modal-certificat-adde" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">

                {{ form_start(form, {'attr' : {'id' : 'certificat-form'}}) }}

                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-header">
                            <h3 class="block-title">Ajouter un certificat</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content" style="height: 400px;">


                            <style>
                                .margin-field {
                                    margin-left: 0!important;
                                    margin-bottom: 10px;
                                    padding-left: 5px;
                                }
                            </style>
                            <label class="col-12 margin-field" for="example-text-input-valid">Libellé du certificat :</label>
                            {{ form_widget(form.label) }}
                            {{ form_errors(form.label) }}

                            <div class="form-group row">
                                <label class="col-12" for="example-text-input-valid">Sélectionner une catégorie :</label>
                                <div class="col-6" style="display: inline-flex">
                                    {{ form_widget(form.category, {'attr' : {'id' : 'category-select'}}) }}
                                    {{ form_errors(form.category) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12" for="example-text-input-valid">Sélectionner une sous-catégorie :</label>
                                <div class="col-12" style="display: inline-flex">
                                    <div id="panel-subcat" style="display: flex">
                                        <select class="form-control" id="cat-select" name="cat-select" style="width: 350px;margin-right: 20px;margin-top: -6px;">
                                            <option value="">Sélectionner une sous-catégorie</option>

                                            {% for SubCategory in certificatSubCategory  %}
                                                <option value="{{ SubCategory['subcategory'] }}">{{ SubCategory['subcategory'] }}</option>
                                            {% endfor  %}
                                        </select>
                                        <span style="text-decoration: underline;cursor:pointer " onclick="displayPanelSubCatNew()">Ajouter une sous-catégorie</span>

                                    </div>
                                    <div id="panel-subcat-new" style="display: none">
                                        {{ form_widget(form.subcategorynew) }}
                                        <span style="text-decoration: underline;cursor:pointer;margin-left: 15px" onclick="displayPanelSubCat()">Annuler</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Ajouter ce certificat pour tous les clients RAMBOLL et AECOM</label>
                                <div class="col-6" style="display: inline-flex">
                                    {{ form_widget(form.all, {'attr' : {'id' : 'all-client-check'}}) }}
                                    {{ form_errors(form.all) }}
                                </div>
                            </div>
                            <label class="col-12 margin-field" for="example-text-input-valid">Sélectionner un fichier (uniquement PDF et WORD). 4Mo Maximum :</label>
                            {{ form_widget(form.certificat) }}
                            {{ form_errors(form.certificat) }}

                            <div style="display: none">
                                {{ form_widget(form.client, {'value' : clientSelected.code}) }}
                                {{ form_widget(form.subcategory) }}
                            </div>

                            <button type="submit" name="search" class="btn spinner_button" id="form-btn" style="display: none">
                                <span>Valider</span>
                            </button>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-primary" onclick="createCertificat()" id="btn-create-certificat">
                            <i class="fa fa-check"></i> Valider
                        </button>
                    </div>

                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock  %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            var tableArticle = $(".js-dataTable-full");
            tableArticle.DataTable({
                fixedHeaders: true,
                "paging": false,
                "order": [[ 0, "asc" ]],
                columnDefs:[
                    {orderable:false,targets:[1]}
                ],
                responsive: true,
                "info": false,
                "language": {
                    "search": "Recherche",
                    "emptyTable": "Aucun certificat pour ce client",
                    "zeroRecords": "La recherche ne donne aucun résultat"

                }
            });

            $('#DataTables_Table_0_filter input').focus();

            // detect enter keypress
            $('#DataTables_Table_0_filter input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    $('#DataTables_Table_0_filter input').select();
                }
            });
        });

        {% if clients %}
            var code = $('#clients-select option:selected').val();
            function chantierList() {
                window.location.href = "{{ path('chantier_list') }}" + "?clientCode=" + code;
            }
        {% else %}
            function chantierList() {
                window.location.href = "{{ path('chantier_list') }}";
            }
        {% endif %}


        function openPopipCertificatAdd() {
            $('#btn-modal-certificat-add').click();
        }
        {% if not form.vars.valid %}
            openPopipCertificatAdd();
        {% endif %}


        {% if clients %}
            $('#clients-select').change(function() {
                var code = $('#clients-select option:selected').val();
                window.location.href = "{{ path('certificat_list') }}" + "?clientCode=" + code;
            });

            function displayPanelSubCatNew() {
                $('#panel-subcat').css('display', 'none');
                $('#panel-subcat-new').css('display', 'flex');
            }

            function displayPanelSubCat() {
                $('#certificat_subcategorynew').val('');
                $('#panel-subcat').css('display', 'flex');
                $('#panel-subcat-new').css('display', 'none');
            }

            function createCertificat () {

                var catnew = $('#certificat_subcategorynew').val();
                if(catnew == '') {
                    var cat = $('#cat-select option:selected').val();
                    $('#certificat_subcategory').val(cat);
                } else {
                    $('#certificat_subcategory').val(catnew);
                }

                $('#form-btn').click();
            }

            $('#certificat-form').submit(function() {

                $('#btn-create-certificat').append('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>');
                $('#btn-create-certificat').css('pointer-events', 'none');
                $('#btn-create-certificat').css('opacity', '0.5');

            });

            function removeCertificat (certificatId) {

                var btnRemoveName = "#btn-remove-certificat-" + certificatId;

                $(btnRemoveName).append('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>');
                $(btnRemoveName).css('pointer-events', 'none');
                $(btnRemoveName).css('opacity', '0.5');

                var url = '{{ path('certificat_remove') }}';
                var redirect = "{{ path('certificat_list') }}" + "?clientCode=" + code;

                if (confirm('Confirmez-vous la suppression de ce certificat ?')) {
                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: {
                            'certificatId': certificatId
                        },
                        success: function (data) {
                            window.location.href = redirect;
                        }
                    });
                }


            }
        {% endif %}

    </script>

    <script type="text/javascript">
        function openCertificat(fileName) {
            //alert(fileName);
            e.preventDefault();  //stop the browser from following
            window.location.href = fileName;
        }
    </script>
{% endblock %}