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

{% block body %}

    <h2 class="my-4 text-primary">Extensiones existentes</h2>

    <div class="row">
        <div class="col-md-12">

            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead class="thead-dark">
                        <tr class="text-center">
                            <th scope="col">Nombre</th>
                            <th scope="col">Costo anual</th>
                            <th scope="col">Estatus</th>
                            <th scope="col">Opciones</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% if extensiones is not empty %}
                            {% for extension in extensiones %}
                                <tr id="extension-{{ extension.id }}">
                                    <td class="nombre-extension text-center">{{ extension.nombre|upper }}</td>
                                    <td class="text-primary text-center">
                                        <strong>
                                            {% if extension.costo is defined %}
                                                ${{ extension.costo }}
                                            {% endif %}
                                        </strong>
                                    </td>
                                    <td class="text-center">

                                        {% if extension.estatus == constant('App\\Entity\\Extension::ESTATUS_ACTIVO') %}
                                            <i class="estatus-icono text-success fas fa-check-circle fa-lg"></i> 
                                            <span class="estatus-nombre">Activo<span>
                                        {% else %}
                                            <i class="estatus-icono text-danger fas fa-ban fa-lg"></i> 
                                            <span class="estatus-nombre">Inactivo<span>
                                        {% endif %}

                                    </td>
                                    <td class="text-center">
                                        <a class="not-decoration text-dark" href="{{ path('extension_editar', {id : extension.id}) }}"
                                            title="Modificar">
                                            <i class="fas fa-edit fa-lg"></i>
                                        </a>
                                        &nbsp;
                                        <a  class="ver-extension not-decoration text-dark" 
                                            data-url="{{ path('extension_ver', {id : extension.id}) }}" 
                                            title="Ver">
                                            <i class="fas fa-eye fa-lg"></i>
                                        </a>
                                        &nbsp;
                                        <a  class="activar-extension not-decoration text-dark" 
                                            data-url="{{ path('extension_activar', {id : extension.id}) }}" 
                                            data-id="{{ extension.id }}" 
                                            data-estatus="{{ extension.estatus }}"
                                            title="Cambiar Estatus">
                                            <i class="fas fa-exchange-alt fa-lg"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <th colspan="6" class="text-center">No existen Extensiones creadas</th>
                            </tr>
                        {% endif %}

                    </tbody>
                </table>

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


    <div class="modal fade" id="modal-activar-extesion" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title text-dark">¿Esta seguro?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span>¿esta seguro que desea <strong><span class="estatus-activar"></span></strong> la Extesion (<strong><span class="nombre-activar"></span></strong>)?</span> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button id="btn-activar-extesion" data-id="" type="button" class="btn btn-primary">Actualizar</button>
            </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-ver-extesion" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-info">
                    <h5 class="modal-title text-dark">Extension <strong>.<span class="nombre-extension"></span> (<span class="estatus-activar"></span>)</strong></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="p-3 d-flex justify-content-between">
                        <div class="text-center"><strong><b>Precio</b></strong></div>
                        <div class="text-center"><strong><b>Duracion</b></strong></div>
                    </div>
                </div>
            </div>
        </div>
    </div>






{% endblock %}

    {% block javascripts %}

        <script src={{ asset('build/js/extension-listado.js') }}></script>

    {% endblock %}