{% 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">Nota D&eacute;bito <span>N&uacute;m: {{entity.establecimiento.codigo}}-{{entity.ptoEmision.codigo}}-{{entity.secuencial}}</span></span>
    </div>
    <div>
        <div class="btn-group">
            <button 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"></span>
            </button>
            <ul class="dropdown-menu rounded-b-xl text-center" role="menu">
                <li><a href="{{ path('notadebito_new') }}">Nueva n.d&eacute;bito</a></li>
                {% if entity.estado == 'CREADA' or entity.estado == 'DEVUELTA' or entity.estado == 'NO AUTORIZADO' or entity.estado == 'PROCESANDOSE'%}
                <li><a href="{{ path('notadebito_edit',{ 'id': entity.id }) }}">Editar n.d&eacute;bito</a></li>
                {% endif %}
                <li><a href="{{ path('notadebito') }}">Notas D&eacute;bito</a></li>
                <li class="divider"></li>
                {% if entity.estado != 'AUTORIZADO'%}
                <li><a href="{{ path('notadebito_procesar',{ 'id': entity.id }) }}">Enviar SRI</a></li>
                {% endif %}
                {% if entity.estado == 'AUTORIZADO'%}
                <li><a href="{{ path('notadebito_descargar',{ 'id': entity.id , 'type': "pdf"}) }}">Descargar PDF</a></li>
                <li><a href="{{ path('notadebito_descargar',{ 'id': entity.id , 'type': "zip"}) }}">Descargar PDF y XML</a></li>
                <li><a href="#send-email" data-toggle="modal"><i class="fa fa-send"></i> Reenviar Email</a></li>            
                {% endif %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="factura">
        {% for flashMessage in app.session.flashbag.get('notice') %}
    <div class="uk-alert-danger alert-dismissable" data-uk-alert>
            <a class="uk-alert-close" data-uk-close></a>
        <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="uk-alert-success alert-dismissable" data-uk-alert>
            <a class="uk-alert-close" data-uk-close></a>
        <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 mas de un correo separarlo por coma (,) ejemplo: email1@gmail.com,email2@gmail.com</p>
                    </div>
                    <form role="form" method="POST" action="{{ path('notadebito_enviar_email',{ 'id': entity.id }) }}" id="formEmail">
                        <div class="form-group">
                            <label for="Email">Correo</label>
                            <input type="text" class="uk-input uk-border-rounded"
                                   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="uk-alert-danger alert-dismissable" data-uk-alert>
            <a class="uk-alert-close" data-uk-close></a>
        <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">
        <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 Rimpe: </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 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">Comprobante Modificado</legend>
        <div class="control-group" id="comprobante">
            <div class="col-md-4"><span class="nunito-semibold">Tipo de Documento:</span> {% if entity.tipoDocMod == "01"%} Factura{% endif %}</div>
            <div class="col-md-3"><span class="nunito-semibold">Fecha Emisi&oacute;n:</span> {{entity.fechaEmisionDocMod |date('d/m/Y')}}</div>
            <div class="col-md-5"><span class="nunito-semibold">Nro Comprobante:</span>{{entity.nroDocMod}}</div>
        </div>
    </fieldset>

    <fieldset class="border">
        <legend class="py-1 px-3 text-blue-500 nunito-semibold">Cliente</legend>
        <div class="form-group">
            <input type="text" id="id" class="uk-input uk-border-rounded 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 Nota D&eacute;bito </legend>
    <div>  
        <div class="dataTable_wrapper table-responsive w-full">
            <table class="table table-striped table-bordered table-hover" id="productos">
                <thead>
                    <tr>
                        <th class="font-light text-blue-500">Raz&oacute;n Modificaci&oacute;n</th>
                        <th class="font-light text-blue-500">Valor Modificaci&oacute;n</th>
                    </tr>
                </thead>
                <tbody>
                {% for item in entity.motivos%}
                    <tr>
                        <td>{{item.razon}}</td>
                        <td>{{item.valor}}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        
        <div class="col col-sm-12 col-md-9"></div>
        <div class="col col-sm-12 col-md-3">

            <div class="flex uk-flex-between">
                <div class="col-sm-8">SubTotal Sin Impuesto</div> 
                <div class="col-sm-4">
                    <p>{{entity.totalSinImpuestos}}</p>
                </div>
            </div>

            <div class="flex uk-flex-between">
                <div class="col-sm-8">Sub Total 12%</div>
                <div class="col-sm-4">
                    <p>{{entity.subtotal12}}</p>
                </div>
            </div>

            <div class="flex uk-flex-between">
                <div class="col-sm-8">Sub Total 0%</div>
                <div class="col-sm-4">
                    <p>{{entity.subtotal0}}</p>
                </div>
            </div>

            <div class="flex uk-flex-between">
                <div class="col-sm-8">Sub Total No Objeto IVA</div>
                <div class="col-sm-4">
                    <p>{{entity.subtotalNoIVA}}</p>
                </div>
            </div>

            <div class="flex uk-flex-between">
                <div class="col-sm-8">Sub Exento IVA</div>
                <div class="col-sm-4">
                    <p>{{entity.subtotalExentoIVA}}</p>
                </div>
            </div>

            <div class="flex uk-flex-between">
                <div class="col-sm-8">Valor ICE</div>
                <div class="col-sm-4">
                    <p>{{entity.valorICE}}</p>
                </div>
            </div>

            <div class="flex uk-flex-between">
                <div class="col-sm-8">IVA 12%</div>
                <div class="col-sm-4">
                    <p>{{entity.iva12}}</p>
                </div>
            </div>

            <div class="flex uk-flex-between">
                <div class="col-sm-8">VALOR TOTAL</div>
                <div class="col-sm-4">
                    <p id="valorTotal">{{entity.valorTotal}}</p>
                </div>
            </div>

        </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 %}