{% extends "FactelBundle::Layout.html.twig" %}

{% block css %}
    <!-- DataTables CSS -->
    <link href="{{asset('recursos/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css')}}" rel="stylesheet">
    <!-- DataTables Responsive CSS -->
    <link href="{{asset('recursos/bower_components/datatables-responsive/css/dataTables.responsive.css')}}" rel="stylesheet">
    <link href="{{asset('garyavendanio/uikit/css/uikit.min.css')}}" rel="stylesheet">
{% endblock %}

{% block panel_title %}
<div class="uk-background-cover text-blue-500 h-44 w-full rounded-2xl uk-grid uk-grid-collapse uk-flex-between uk-flex-middle px-8" style="background-image: url( {{asset('recursos/img/bg-header.png')}} );">
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span class="text-xl">Emisores</span>
    </div>
    <div>
        <a href="{{ path('emisor_new') }}">
            <button class="uk-button uk-button-primary capitalize flex uk-flex-middle rounded-full">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>Nuevo emisor</span>
            </button>
        </a>
    </div>
</div>
{% endblock %}

{% block content %}
{% for flashMessage in app.session.flashbag.get('confirm') %}
<div class="col-sm-12 alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <p>{{ flashMessage }}</p>
</div>
{% endfor %}
<div class="modal fade" id="config-plan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Configurar Plan</h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <div class="control-group">
                            <form action="{{path('config-plan')}}" name = "configPlanForm" id = "configPlanForm" method="POST">
                                <div class="form-group col-md-6">
                                    <label class="form-label font-light" for="sel1">Fecha inicio plan</label>
                                    <input class="form-control" type="text" id="fechaInicial" size="8" name="fechaInicial" required="required"/>
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="form-label font-light" for="sel1">Fecha fin plan</label>
                                    <input class="form-control" type="text" id="fechaFinal" size="8" name="fechaFinal" required="required" />
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="form-label font-light" for="sel1">Seleccionar Plan</label>
                                    <select class="form-control" id="plan" name="plan" required="required">
                                        {% for item in planes %}
                                        <option value="{{item.id}}">{{item.getNombre}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <input type = "text" class= "hidden" id="idEmisor" name = "idEmisor" value="">  
                                <div class="form-group col-md-6 flex flex-wrap content-end h-16">
                                    <input class="uk-button uk-button-primary capitalize flex uk-flex-middle rounded-full" type="submit" value="Guardar">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div>
    <div class="dataTable_wrapper">
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover" id="data-table">
                <thead>
                    <tr>
                        <th class="font-light text-blue-500">RUC</th>
                        <th class="font-light text-blue-500">Raz&oacute;n Social</th>
                        <th class="font-light text-blue-500">Direcci&oacute;n Matriz</th>
                        <th class="font-light text-blue-500">Estado</th>
                        <th class="font-light text-blue-500">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                {% for entity in entities %}
                    <tr> 
                        <td><a href="{{ path('emisor_show', { 'id': entity.id }) }}">{{ entity.ruc }}</a></td>
                        <td>{{ entity.razonSocial }}</td>
                        <td>{{ entity.direccionMatriz }}</td>
                        <td>{%if entity.activo %}<button disabled="disabled" class="btn bg-green-500 text-green-100 link-boton">Activo</button>{%else%}<button disabled="disabled" class="btn bg-gray-500 text-gray-100 link-boton">Inactivo</button>{% endif%}</td>
                        <td>
                            <a href="{{ path('emisor_edit', { 'id': entity.id }) }}" title="Editar">
                                <button class="btn bg-blue-500 text-blue-100 hover:bg-blue-100 hover:text-blue-600 link-boton">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                    </svg>
                                </button>
                            </a>
                            <button class="btn bg-green-500 text-green-100 hover:bg-green-100 hover:text-green-600 link-boton accion"  type="button" onclick="configPlan({{entity.id}},{%if entity.plan is not null%} {{entity.plan.id}} {%else%} 0 {%endif%})" >
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </button>
                            <button class="btn bg-gray-500 text-gray-100 hover:bg-gray-100 hover:text-gray-600 link-boton accion" data-toggle="modal" data-target="#confirm-delete" type="button" accion = "{{entity.id}}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                            {{ form(deleteForms[entity.id], { 'attr': {'id': entity.id } })}}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
    {% endblock %}
    {% block javascript %}
        <!-- DataTables JavaScript -->
        <script src="{{asset('recursos/bower_components/datatables/media/js/jquery.dataTables.min.js')}}"></script>
        <script src="{{asset('recursos/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js')}}"></script>
        <script src="{{asset('recursos/js/script.js')}}"></script>
        <script>
        $("#fechaFinal").val('2023-12-31');
                                function configPlan(emisorID, planID) {
                                    $("#idEmisor").val(emisorID);
                                    $("#plan").val(planID);
                                    $('#config-plan').modal('show');
                                }

        </script>
        <script>
        	$(document).ready(function() {
    		$('#example').DataTable( {
        		orderFixed: [2, 'asc'],
        			rowGroup: {
            			dataSrc: 2
        			}
    			} );
			} );
        </script>
        <script src="{{asset('garyavendanio/uikit/js/uikit.min.js')}}"></script>
        <script src="{{asset('garyavendanio/uikit/js/uikit-icons.min.js')}}"></script>
        <script src="{{asset('recursos/bower_components/datatables-responsive/js/dataTables.responsive.js')}}"></script>
		<script src="{{asset('recursos/bower_components/RowGroup-1.2.0/dataTables.rowGroup.min.js')}}"></script>
    {% endblock %}