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

{% block css %}
    <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">Comprobante Retenci&oacute;n <span>N&uacute;m: {{entity.establecimiento.codigo}}-{{entity.ptoEmision.codigo}}-{{entity.secuencial}}</span></span>
    </div>
    <div>
        <div class="btn-group">
            <button id="btn_acciones_retenciones" name="btn_acciones_retenciones" class="uk-button uk-button-primary capitalize flex uk-flex-middle rounded-full dropdown-toggle w-auto" type="button" data-toggle="dropdown">
                Acciones <span class="caret ml-2"></span>
            </button>
            <ul class="dropdown-menu rounded-b-xl text-center" role="menu">
                <li><a href="{{ path('retencion_new') }}">Nuevo Comprobante</a></li>
                {% if entity.estado == 'CREADA' or entity.estado == 'DEVUELTA' or entity.estado == 'NO AUTORIZADO' or entity.estado == 'PROCESANDOSE'%}
                <li><a href="{{ path('retencion_edit',{ 'id': entity.id }) }}">Editar Comprobante</a></li>
                {% endif %}
                <li><a href="{{ path('retencion') }}">Comprobantes Retenci&oacute;n</a></li>
                <li class="divider"></li>
                {% if entity.estado != 'AUTORIZADO'%}
                <li><a href="{{ path('retencion_procesar',{ 'id': entity.id }) }}" onclick="document.getElementById('btn_acciones_retenciones').disabled = true;">Enviar SRI</a></li>
                {% endif %}
                {% if entity.estado == 'AUTORIZADO'%}
                <li><a href="{{ path('retencion_descargar',{ 'id': entity.id , 'type': "pdf"}) }}">Descargar PDF</a></li>
                <li><a href="{{ path('retencion_descargar',{ 'id': entity.id , 'type': "zip"}) }}">Descargar PDF y XML</a></li>
                <li><a href="#send-email" data-toggle="modal">Reenviar Correo</a></li>            
                {% endif %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="factura">
        {% for flashMessage in app.session.flashbag.get('notice') %}
    <div class="col-sm-12 alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h4><strong>Ha ocurrido un error al crear la Nota Cr&eacute;dito!</strong></h4>
        <p>{{ flashMessage }}</p>
    </div>
     {% endfor %}
    {% 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="send-email" tabindex="-1" role="dialog" 
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <button type="button" class="close" 
                            data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        Enviar correo
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="col-sm-12 alert alert-info">
                        <p>Ingrese el correo al cual desea enviar el documento. Para m&aacute;s de un correo separarlo por coma (,) ejemplo: correo1@gmail.com,correo2@gmail.com</p>
                    </div>
                    <form role="form" method="POST" action="{{ path('retencion_enviar_email',{ 'id': entity.id }) }}" id="formEmail">
                        <div class="form-group">
                            <label for="Email">Correo</label>
                            <input type="text" class="form-control"
                                   name="email" id="email" placeholder="Correo separados por coma"/>
                        </div>
                        <button id="send" type="submit" class="btn btn-default">Enviar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% if entity.mensajes | length >0 and entity.estado != "AUTORIZADO"%}
    <div class="col-sm-12 alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <h5><strong>Errores ocurrido durante el proceso de envio al SRI!</strong></h5>
            {% for item in entity.mensajes %}
        <p>{{item.mensaje}}</p>
        <p>{{item.informacionAdicional}}</p>
            {% endfor %}
    </div>
    {% endif %}
    <fieldset class="border col-sm-12">
        <legend class="py-1 px-3 text-blue-500 nunito-semibold">Emisor</legend>
        <div class="control-group" id="emisor">
            <div class="col-sm-12 lg:text-xl"><span class="nunito-semibold">RUC:</span> {{entity.emisor.ruc}}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Contribuyente Regimen : </span> {{entity.establecimiento.emisor.tipoEmpresa}}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Raz&oacute;n Social:</span> {{entity.emisor.razonSocial}}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Nombre Comercial:</span> {%if entity.establecimiento.nombreComercial%}{{entity.establecimiento.nombreComercial}}{%else%}{{entity.emisor.nombreComercial}}{%endif%}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Contribuyente Especial:</span> {{entity.emisor.contribuyenteEspecial}}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Obligado Contabilidad:</span> {{entity.emisor.obligadoContabilidad}}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Direcci&oacute;n Matriz:</span> {{entity.emisor.direccionMatriz}}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Direcci&oacute;n Establecimiento:</span> {{entity.establecimiento.direccion}}</div>
        </div>
    </fieldset>

    <fieldset class="border">
        <legend class="py-1 px-3 text-blue-500 nunito-semibold">Comprobante</legend>
        <div class="control-group" id="comprobante">
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Estado: </span><strong><span class="{%if entity.estado == 'CREADA'%}creada{%elseif entity.estado == 'AUTORIZADO'%}autorizada{%else%} error {%endif%}">{{entity.estado}}</span></strong></div>
            <div class="col-sm-12 col-lg-9"><span class="nunito-semibold">N&uacute;mero Autorizaci&oacute;n:</span> {{entity.numeroAutorizacion}}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Ambiente:</span> {% if entity.ambiente == 1%} Pruebas {% else %} Producci&oacute;n {% endif %}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Tipo Emisi&oacute;n:</span> {% if entity.tipoEmision == 1%} Emisi&oacute;n Normal {% else %} Emisi&oacute;n por Indisponibilidad del Sistema {% endif %}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Fecha Emisi&oacute;n:</span>{{entity.fechaEmision |date('d/m/Y')}}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Periodo Fiscal: </span>{{entity.periodoFiscal}}</div>
            <div class="col-sm-12 text-center py-5 overflow-ellipsis overflow-hidden">
                <div><span class="nunito-semibold">Clave Acceso</span></div>
                <div class="claveAcceso lg:text-xl"><p>{{entity.claveAcceso}}</p></div>
            </div>
        </div>
    </fieldset>

    <fieldset class="border">
        <legend class="py-1 px-3 text-blue-500 nunito-semibold">Sujeto Retenido</legend>
        <div class="form-group">
            <input type="text" id="id" class="form-control hidden" name="id">
            <div class="col-md-6">
                <label class="nunito-semibold">Nombre: </label>
                {{entity.cliente.nombre}}
            </div>
            <div class="col-md-6">
                <label class="nunito-semibold">Tel&eacute;fono: </label>
                {{entity.cliente.celular}}
            </div>
            <div class="col-md-6">
                <label class="nunito-semibold">Correo: </label>
                {{entity.cliente.correoElectronico}}
            </div>
            <div class="col-md-6">
                <label class="nunito-semibold">Identificaci&oacute;n: </label>
                {{entity.cliente.identificacion}}
            </div>
            <div class="col-md-6">
                <label class="nunito-semibold">Direcci&oacute;n: </label>
                {{entity.cliente.direccion}}
            </div>
        </div>
    </fieldset>

    <legend class="py-1 px-3 text-blue-500 nunito-semibold">Detalle Comprobante Retención </legend>
    <div class="dataTable_wrapper">  
        <div class="table-responsive w-full">
            <table class="table table-striped table-bordered table-hover" id="productos">
                <thead>
                    <tr>
                        <th class="font-light text-blue-500">Tipo</th>
                        <th class="font-light text-blue-500">C&oacute;d. Retenci&oacute;n</th>
                        <th class="font-light text-blue-500">%</th>
                        <th class="font-light text-blue-500">Base Imp.</th>
                        <th class="font-light text-blue-500">Total</th>
                        <th class="font-light text-blue-500">Documento N&uacute;m.</th>
                        <th class="font-light text-blue-500">Tipo Doc</th>
                        <th class="font-light text-blue-500">Fecha Doc</th>
                    </tr>
                </thead>
                <tbody>
                {% for item in entity.impuestos%}
                    <tr>
                        <td>{% if item.codigo == "1"%}RENTA{% elseif item.codigo == "2" %}IVA{% elseif item.codigo == "6" %}ISD{%endif%}</td>
                        <td>{{item.codigoRetencion}}</td>
                        <td>{{item.porcentajeRetener}}</td>
                        <td>{{item.baseImponible}}</td>
                        <td>{{item.valorRetenido}}</td>
                        <td>{{item.numDocSustento}}</td>
                        <td>{% if item.codDocSustento == "01"%}FACTURA{% elseif item.codDocSustento == "05" %}NOTA DEBITO{% elseif item.codDocSustento == "03" %}LIQ. Compra{%endif%}</td>
                        <td>{{item.fechaEmisionDocSustento |date('d/m/Y')}}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>  
</div>

{% endblock %}
{% block javascript %}
<script>
    $('#send').click(function() {
        $('#send-email').modal('toggle');
    });
</script>
<script src="{{asset('garyavendanio/uikit/js/uikit.min.js')}}"></script>
    <script src="{{asset('garyavendanio/uikit/js/uikit-icons.min.js')}}"></script>
{% endblock %}