{% extends 'base.html.twig' %}
{% block body %}
<h2 class="titulos-body">
    <i class="fa fa-question-circle  fa-lg mr-3"></i>FAQ
</h2>
<form class="form-horizontal my-3" id="form-tabla-faq">
    <div class="form-row">
        <div class="input-group col-sm-9 col-lg-5">
            <input type="text" class="form-control" id="titulo" autofocus placeholder="Título">
            <div class="input-group-append">
                <button type="button" class="btn btn-outline-secondary border-left-0 border" id="btn-clear">
                    <span class="fa fa-lg fa-times-circle"></span>
                </button>
            </div>
        </div>
    </div>
    <div class="form-row mt-3">
        <div class="col-sm-4 col-sm-offset-2 col-lg-2 col-lg-offset-0 mt-2 mt-lg-0">
            <button type="button" id="btn-search" class="btn btn-dark btn-block"><span class="fa fa-search mr-3"></span>Buscar</button>
        </div>
        <div class="col-sm-4 col-lg-2 mt-2 mt-lg-0">
            <a href="{{url('faq_edit')}}" id="btn-add" class="btn btn-success btn-block">
                <span class="fa fa-plus mr-3"></span>Añadir
            </a>
        </div>
    </div>
</form>
<table id="tabla-faq" class="display w-100">
    <thead>
        <tr>
            <th></th>
            <th>Fecha</th>
            <th>Título</th>
            <th>Enlace</th>
            <th></th>
        </tr>
    </thead>
</table>
{% endblock %}
{% block javascript %}
<script>
    /* global $, U */
    $(function () {
        'use strict';
        function filtroData(d) {
            d.titulo = $('#titulo').val();
        }
        let opciones = {
            columnDefs: [
                { targets: 0, visible: false },
                { targets: 1, render: U.dateFormatFromSql },
                { targets: 4, sortable: false }
            ],
            order: [[1, 'desc']],
            columns: [
                { data: 'id' },
                { data: 'fecha' },
                { data: 'titulo' },
                { data: 'enlace' },
                { data: null, width: '15px', defaultContent: '<button type="button" class="btn btn-dark btn-sm goto-link"><span class="fa fa-external-link"></span></button>' },
            ],
            lengthChange: true,
            lengthMenu: [15, 25, 50]
        };
        let tabla = U.dataTable('#tabla-faq', U.path('admin/faq_tabla'), filtroData, opciones);

        $('input[type=text]').on('keydown', function (e) {
            if (e.keyCode === 13) {
                U.preventDefault(e);
                tabla.ajax.reload();
            }
        });

        $('#btn-clear').on('click', function () {
            $('#titulo').val('').focus();
            tabla.ajax.reload();
        });

        $('#btn-search').on('click', () => tabla.ajax.reload());

        let tbody = $('#tabla-faq tbody');

        tbody.on('click', 'tr', function () {
            var data = tabla.row($(this)).data();
            window.location = U.path('admin/faq_edit', data.id);
        });

        tbody.on('click', 'button.goto-link', function () {
            var data = tabla.row($(this).parents('tr')).data();
            if (!U.stringEmpty(data.enlace)) {
                window.open(data.enlace);
            }
            return false;
        });
    });
</script>
{% endblock %}