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

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

{% block body %}
    <div class="container-fluid">
        <div class="row my-5"></div>
        <div class="row d-flex justify-content-center">
            <div class="col-xl-6 col-lg-12">
                <div class="d-flex p-2 my-2 bg-danger justify-content-center text-white fw-bold rounded">
                    <i class="fa-solid fa-dice d-flex align-items-center"></i>&nbsp;&nbsp;Sorteo de categorías
                </div>
                <div class="border p-5 border-primary rounded border3px">
                    <div class="row d-flex justify-content-center mb-3">
                        <div class="col-12">
                            <label class="form-label" for="cboChampionship"><b>Categorías del campeonato</b></label>
                            <select class="form-control" id="cboChampionship">
                                <option value="">Elegir campeonato</option>
                                {% for championship in championships %}
                                    <option value="{{ championship.id }}">{{ championship.name }} - {{ championship.eventDate | date('d/m/Y') }}{% if is_granted('ROLE_ADMIN') %} # {{ championship.country }}{% endif %}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div id="categoriesList">
                        <div class="row d-flex justify-content-center">
                            <div class="col-12">
                                <table id="tbl" class="table table-striped table-bordered border-primary" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Nombre</th>
                                            <th class="text-center">Sorteada</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div id="bracketDraw" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock body %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ js_dataTables }}"></script>
    <script>
        let table;
        let showStatus = true;
        $(function() {
            let tblOptions = {
                'responsive': true,
                'language': {
                    'url': '{{ js_dataTables_locale_es }}'
                },
                'order': [0, 'asc'],
                'columnDefs': [
                    {'className': 'text-center', 'targets': [1, 2]},
                    {'orderable': false, 'targets': [1, 2]},
                    {'responsivePriority': 1, 'targets': [0]},
                ]
            };
            table = $('#tbl').DataTable(tblOptions);
            $('#cboChampionship').on('change', function() {
                let url = Routing.generate('categories_get_categories_for_championship', {
                    'id': $('#cboChampionship').val()
                });
                if ($('#cboChampionship').val() != '') {
                    $('#on_load').show();
                    $.getJSON(url, function(data) {
                        table.clear();
                        $.each(data.categories, function(key, category) {
                            table.row.add(rowData(category));
                        });
                        table.columns.adjust().draw();
                        $('#on_load').hide();
                    });
                } else {
                    table.clear();
                    table.columns.adjust().draw();
                }
                
            });
            $('#tbl').on('click', '.btn-draw', function() {
                let id = $(this).val();
                if ($(this).attr('data-drawn') == 1) {
                    showAlert('warning', 'Atención', 'La llave ya fue sorteada!<br>Quiere volver a sortearla?', drawn, id);
                } else {
                    drawn($(this).val());
                }
            });
            $('#tbl').on('click', '.btn-print', function() {
                let url = Routing.generate('print_draw', {
                    'id': $(this).val()
                });
                window.open(url);
            });
            $('#tbl').on('click', '.btn-delete', function() {
                let id = $(this).val();
                showAlert('warning', 'Atención', 'Va a borra el sorteo de la categoría!<br>Esta acción no se puede deshacer<br>Desea continuar?', deleteBracket, id);
            });
        });
        
        /**
         * @param {integer} id
         * @returns {void}
         */
        function deleteBracket(id) {
            let url = Routing.generate('caterogies_draw_delete_draw', {
                'id': id
            });
            $('#on_load').show();
            $.getJSON(url, function(data) {
                let node = table.row($('button[value="' + id + '"]:first').parents('tr'));
                table.row(node).data(rowData(data.category));
                table.columns.adjust().draw();
            }).fail(function(jqXhr) {
                $('form button[type="submit"]').prop('disabled', false);
                showError(jqXhr);
            });
        }
        
        /**
         * @param {integer} id
         * @returns {void}
         */
        function drawn(id) {
            let url = Routing.generate('caterogies_draw_bracket_draw', {
                'id': id
            });
            $('#on_load').show();
            $('#categoriesList').hide();
            $('#bracketDraw').load(url, function () {
                $('#on_load').hide();
                $('#bracketDraw').show();
            });
        }
              
        function closeManageForm() {
            $('#bracketDraw').empty().hide();
            $('#categoriesList').show();
        }
        
        /**
         * 
         * @param {json} data
         * @returns {Array}
         */
        function rowData(category) {
            let buttons = '<button type="button" class="btn btn-sm btn-success btn-draw" value="' + category.id + '" title="Sortear ' + category.name + '" data-drawn="' + (category.drawn ? 1 : 0) + '"><i class="fa-solid fa-dice"></i></button>';
            let drawn;
            buttons += ' <button type="button" class="btn btn-sm btn-warning btn-print" value="' + category.id + '" title="Mostrar sorteo"' + (category.drawn ? '': ' disabled') + '><i class="fa-solid fa-print"></i></button>';
            buttons += ' <button type="button" class="btn btn-sm btn-danger btn-delete" value="' + category.id + '" title="Borrar el sorteo"' + (category.drawn ? '': ' disabled') + '><i class="fa-solid fa-trash"></i></button>';
            
            if (category.drawn) {
                drawn = '<i class="fa-solid fa-circle-check text-success"></i>'
            } else {
                drawn = '<i class="fa-solid fa-circle-xmark text-danger"></i>'
            }
            return [category.name, drawn, buttons];
        }
    </script>
{% endblock %}