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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ css_dataTables }}"/>
    <link rel="stylesheet" href="{{ css_select2 }}"/>
    <link rel="stylesheet" href="{{ css_select2_Bootstrap }}"/>
{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row my-5"></div>
        <div class="row d-flex justify-content-center">
            <div class="col-10">
                <div class="d-flex p-2 my-2 bg-danger justify-content-center text-white fw-bold rounded">
                    <i class="fa-solid fa-table-list d-flex align-items-center"></i>&nbsp;&nbsp;Inscripciones
                </div>
                <div class="border p-5 border-primary rounded border3px">
                    <div class="row d-flex justify-content-center mb-3">
                        <div class="col-xxl-8 col-lg-12">
                            <label class="form-label" for="cboChampionship"><b>Campeonato</b></label>
                            <select class="form-control" id="cboChampionship">
                                <option value=""></option>
                                {% for championship in championships %}
                                    <option value="{{ championship.id }}">{{ championship.eventDate | date('d/m/Y') }} -> {{ championship.name }}{% if championship.closedInscription %} -> INSCRIPCIÓN CERRADA !!{% else %} -> CIERRE DE INSCRIPCIONES {{ championship.closeInscriptionDate | date('d/m/Y')}}{% endif %}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div id="inscriptionsList">
                        <table id="tbl" class="table table-striped table-bordered border-primary" style="width: 100%;">
                            <thead>
                                <tr>
                                    {% if is_granted('ROLE_ADMIN') %}
                                        <th class="text-center">País</th>
                                    {% endif %}
                                    <th class="text-center">Dojo</th>
                                    <th class="text-center">Nombre</th>
                                    <th class="text-center">Fecha Nac.</th>
                                    <th class="text-center">Nº Documento</th>
                                    <th class="text-center">Parakarate</th>
                                    <th class="text-center">Kata</th>
                                    <th class="text-center">Kumite</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="manageForm" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock body %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ js_dataTables }}"></script>
    <script src="{{ js_select2 }}"></script>
    <script src="{{ js_select2_Locale_ES }}"></script>
    <script src="{{ js_moment }}"></script>
    <script src="{{ js_moment_locale_es }}"></script>
    <script>
        let table;
        $(function() {
            let tblOptions = {
                'responsive': true,
                'language': {
                    'url': '{{ js_dataTables_locale_es }}'
                },
                'order': [0, 'asc'],
                'columnDefs': [
                    {% if is_granted('ROLE_ADMIN') %}
                        {'className': 'text-center', 'targets': [3, 4, 5, 6, 7, 8]},
                        {'orderable': false, 'targets': [8]},
                        {'render': DataTable.render.date('DD/MM/YYYY', 'DD/MM/YYYY','es'), 'targets': [3]},
                        {'responsivePriority': 1, 'targets': [2]},
                        {'responsivePriority': 1, 'targets': [1]}
                    {% else %}
                        {'className': 'text-center', 'targets': [2, 3, 4, 5, 6, 7]},
                        {'orderable': false, 'targets': [7]},
                        {'render': DataTable.render.date('DD/MM/YYYY', 'DD/MM/YYYY','es'), 'targets': [2]},
                        {'responsivePriority': 1, 'targets': [1]}
                    {% endif %}
                ],
                'layout': {
                    top1: 'buttons'
                },
                'buttons': [
                    {
                        'text': 'Inscribir competidor',
                        'action': function () {addInscriptionForm();},
                        'enabled': false
                    },
                    'spacer',
                    {
                        'text': '<i class="fa-solid fa-file-pdf"></i> Imprimir listado',
                        'action': function () {inscriptionListPDF();},
                        'enabled': false
                    },
                    {% if is_granted('ROLE_MANAGER') %}
                    'spacer',
                    {
                        'text': '<i class="fa-solid fa-file-csv"></i> CSV',
                        'action': function () {inscriptionExportCsv();},
                        'enabled': false
                    },
                    {% endif %}
                ]
            };
            $('#cboChampionship').select2({
                'language': 'es',
                'theme': 'bootstrap-5',
                'minimumResultsForSearch': '5',
                'width': '100%',
                'placeholder': 'Seleccionar campenato para inscribir competidores'
            });
            $('#cboChampionship').on('change', function() {
                let url = Routing.generate('inscriptions_get_inscriptions_for_championship', {
                    'id': $('#cboChampionship').val()
                });
                $('#on_load').show();
                $.getJSON(url, function(data) {
                    table.clear();
                    table.button(2).enable();
                    {% if is_granted('ROLE_MANAGER') %}
                    table.button(4).enable();
                    {% endif %}
                    {% if (is_granted('ROLE_MANAGER')) %}
                        table.button(0).enable();
                    {% else %}
                        if (!data.inscription_status) {
                            table.button(0).enable();
                        } else {
                            table.button(0).disable();
                        }
                    {% endif %}
                    $.each(data.inscriptions, function(key, inscription) {
                        table.row.add(rowData(inscription, data.inscription_status));
                    });
                    table.columns.adjust().draw();
                    $('#on_load').hide();
                });
            });
            table = $('#tbl').DataTable(tblOptions); 
            $('#tbl').on('click', '.btn-edit', function() {
                let url = Routing.generate('inscriptions_manage', {
                    'championship_id': $('#cboChampionship').val(),
                    'inscription_id': $(this).val()
                });
                $('#inscriptionsList').hide();
                $('#manageForm').load(url, function () {
                    $('#manageForm').show();
                });
            });
            $('#tbl').on('click', '.btn-delete', function() {
                let id = $(this).val();
                let url = Routing.generate('inscriptions_delete', {
                    'id': id
                });
                $('#on_load').show();
                $.getJSON(url, function(data) {
                    let node = table.row($('button[value="' + id + '"]:first').parents('tr'));
                    table.row(node).remove();
                    table.draw();
                    $('#on_load').hide();
                }).fail(function(jqXhr) {
                    $('form button[type="submit"]').prop('disabled', false);
                    showError(jqXhr);
                });
            });
        });
        
        /**
         * 
         * @returns {void}
         */
        function addInscriptionForm() {
            let url = Routing.generate('inscriptions_manage', {
                'championship_id': $('#cboChampionship').val()
            });
            $('#inscriptionsList').hide();
            $('#on_load').show();
            $('#manageForm').load(url, function (response, status, xhr) {
                $('#on_load').hide();
                $('#manageForm').show();
            });
        }
        
        /**
         * 
         * @param {int} id
         * @returns {void}
         */
        function manageInscription(id) {
            let url = Routing.generate('inscriptions_manage', {
                'championship_id': $('#cboChampionship').val(),
                'inscription_id': id
            });
            let formData = new FormData(document.getElementById($('form').attr('id')));
            $('form button[type="submit"]').prop('disabled', true);
            $('#on_load').show();
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            }).done(function(data) {
                if (id) {
                    let node = table.row($('button[value="' + id + '"]:first').parents('tr'));
                    table.row(node).data(rowData(data.inscription,data.inscription_status));
                } else {
                    table.row.add(rowData(data.inscription, data.inscription_status));
                }
                table.draw();
                $('#on_load').hide();
                closeManageForm();
            }).fail(function(jqXhr) {
                $('form button[type="submit"]').prop('disabled', false);
                showError(jqXhr);
                closeManageForm();
            });
        }
        
        function inscriptionListPDF() {
            let url = Routing.generate('inscriptions_print_list', {
                'id': $('#cboChampionship').val()
            });
            window.open(url);
        }

        {% if is_granted('ROLE_MANAGER') %}
        function inscriptionExportCsv() {
            let url = Routing.generate('inscriptions_export_csv', {
                'id': $('#cboChampionship').val()
            });
            window.location.href = url;
        }
        {% endif %}

        function closeManageForm() {
            $('#manageForm').empty().hide();
            $('#inscriptionsList').show();
        }
        
        /**
         * 
         * @param {json} data
         * @returns {Array}
         */
        function rowData(inscription,inscriptionStatus) {
            let buttons = '<button type="button" class="btn btn-sm btn-danger btn-edit" value="' + inscription.inscription_id + '" title="Editar a ' + inscription.name + '" ><i class="fa-solid fa-edit"></i></button>';
            {% if not is_granted('ROLE_MANAGER') %}
                buttons += ' <button type="button" class="btn btn-sm btn-warning btn-delete" value="' + inscription.inscription_id + '" title="Borrar a ' + inscription.name + '"' + (inscriptionStatus ? 'disabled': '') + '><i class="fa-solid fa-trash"></i></button>'
            {% else %}
                buttons += ' <button type="button" class="btn btn-sm btn-warning btn-delete" value="' + inscription.inscription_id + '" title="Borrar a ' + inscription.name + '"><i class="fa-solid fa-trash"></i></button>'
            {% endif %}
            let kata;
            let kumite;
            let parakarate;
            if (inscription.kata) {
                kata = '<i class="fa-solid fa-circle-check text-success"></i>'
            } else {
                kata = '<i class="fa-solid fa-circle-xmark text-danger"></i>'
            }
            if (inscription.kumite) {
                kumite = '<i class="fa-solid fa-circle-check text-success"></i>'
            } else {
                kumite = '<i class="fa-solid fa-circle-xmark text-danger"></i>'
            }
            if (inscription.parakarate) {
                parakarate = '<i class="fa-solid fa-circle-check text-success"></i>'
            } else {
                parakarate = '<i class="fa-solid fa-circle-xmark text-danger"></i>'
            }
            {% if is_granted('ROLE_ADMIN') %}
                return [inscription.country, inscription.school, inscription.name, inscription.birth_date, inscription.identity_number, parakarate, kata, kumite, buttons];
            {% else %}
                return [inscription.school, inscription.name, inscription.birth_date, inscription.identity_number, parakarate, kata, kumite, buttons];
            {% endif %}
        }
    </script>
{% endblock %}