{% 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">Factura <span class="nunito-semibold">N&uacute;m: {{entity.establecimiento.codigo}}-{{entity.ptoEmision.codigo}}-{{entity.secuencial}}</span></span>
    </div>
    <div>
        <div class="btn-group">
            <button id="btn_acciones_factura" name="btn_acciones_factura" 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('factura_new') }}">Nueva factura</a></li>
                    {% if entity.estado == 'CREADA' or entity.estado == 'DEVUELTA' or entity.estado == 'NO AUTORIZADO' or entity.estado == 'PROCESANDOSE'%}
                    <li><a href="{{ path('factura_edit',{ 'id': entity.id }) }}">Editar factura</a></li>
                    {% endif %}
                <li><a href="{{ path('factura') }}">Facturas</a></li>
                <li class="divider"></li>
                    {% if entity.estado != 'AUTORIZADO' and entity.estado != 'ANULADA'%}
                    <li><a href="{{ path('factura_procesar',{ 'id': entity.id }) }}" onclick="document.getElementById('btn_acciones_factura').disabled = true;">Enviar SRI</a></li>
                    {% endif %}
               <div id="pdf_ocultar">  
                <li><a href="{{ path('factura_descargar',{ 'id': entity.id , 'type': "pdf"}) }}">Descargar PDF</a></li>
                </div>
                <li><a href="{{ path('factura_descargar_small',{ 'id': entity.id }) }}" onclick="document.getElementById('btn_acciones_factura').disabled = true;">Descargar PDF SM</a></li>
                <li><a href="{{ path('factura_descargar',{ 'id': entity.id , 'type': "zip"}) }}">Descargar PDF y XML</a></li>
                <div id="pdf_ocultar2">
                
                
                </div>
                <li><a href="{{asset('upload/pdf')}}/{{entity.claveAcceso}}.pdf"target="_blank">Ver PDF</a></li>
                    {% if entity.estado == 'AUTORIZADO'%}  
                <li><a href="#send-email" data-toggle="modal">Reenviar Email</a></li>
                    {% endif %}
                <li><a href="{{ path('factura_clonar',{ 'id': entity.id }) }}">Duplicar Factura</a></li>
                    {% if entity.estado != 'ANULADA'%}
                    <li class="divider"></li>
                    <li><a href="{{ path('factura_anular',{ 'id': entity.id }) }}">Anular Factura</a></li>  
                    {% endif %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="factura">
    <div id="datos_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!</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 Email
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-sm-12 alert alert-info">
                            <p>Ingrese el email al cual desea enviar el documento. Para mas de un email separarlo por coma (,) ejemplo: email1@gmail.com,email2@gmail.com</p>
                        </div>
                        <form role="form" method="POST" action="{{ path('factura_enviar_email',{ 'id': entity.id }) }}" id="formEmail">
                            <div class="form-group">
                                <label for="Email">Email</label>
                                <input type="text" class="form-control"
                                       name="email" id="email" placeholder="Email 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">
            <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-md-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-lg-12">
                    <div> <label class="control-label nunito-semibold">Forma Pago: </label> 
                        {{entity.formaPagoStr}}
                    </div>
                    {%if entity.plazo %}
                    <div> 
                        <label class="control-label nunito-semibold">Plazo: </label> 
                        {{entity.plazo}} D&iacute;as
                    </div>
                    {% endif%}
                </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">Cliente</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">Productos</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">Cantidad</th>
                            <th class="font-light text-blue-500">C&oacute;digo</th>
                            <th class="font-light text-blue-500">Descripci&oacute;n</th>
                            <th class="font-light text-blue-500">Precio</th>
                            <th class="font-light text-blue-500">Descuento</th>
                            <th class="font-light text-blue-500">Total</th>
                            <th class="font-light text-blue-500">ICE</th>
                            <th class="font-light text-blue-500">IRBPNR</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in entity.facturasHasProducto%}
                            <tr>
                                <td>{{item.cantidad}}</td>
                                <td>{{item.codigoProducto}}</td>
                                <td>{{item.nombre}}</td>
                                <td>{{item.precioUnitario}}</td>
                                <td>{{item.descuento}}</td>
                                <td>{{item.valorTotal}}</td>
                                {% set ice = "0.00" %}
                                {% set irbpnr = "0.00" %}
                                {% for impuesto in item.impuestos %}
                                    {% if impuesto.codigo == "3" %}
                                        {% set ice = impuesto.valor %}
                                    {% endif %}

                                    {% if impuesto.codigo == "5" %}
                                        {% set irbpnr = impuesto.valor %}
                                    {% endif %}
                                {% endfor %}
                                <td>{{ ice }}</td>
                                <td>{{ irbpnr }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-8">
                    <div class="col-xs-10 col-sm-8 text-right">SubTotal Sin Impuesto</div> 
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left" >{{entity.totalSinImpuestos}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">Sub Total 12%</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left">{{entity.subtotal12}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">Sub Total 0%</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left">{{entity.subtotal0}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">Sub Total No Objeto IVA</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left" >{{entity.subtotalNoIVA}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">Sub Exento IVA</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left">{{entity.subtotalExentoIVA}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">Descuento</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left">{{entity.totalDescuento}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">Valor ICE</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left">{{entity.valorICE}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">Valor IRBPNR</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left">{{entity.valorIRBPNR}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">IVA 12%</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left">{{entity.iva12}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">Propina</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left" id="propina">{{entity.propina}}</p>
                    </div>
                    <div class="col-xs-10 col-sm-8 text-right">VALOR TOTAL</div>
                    <div class="col-xs-2 col-sm-4">
                        <p class="text-left" id="valorTotal">{{entity.valorTotal}}</p>
                    </div>
                </div>
            </div>
        </div>  
    </div> 
    <div id="ver_pdf" style="display: none;"><embed src="{{asset('upload/pdf/')}}21102022015522345520010010000000021234567811.pdf" type="application/pdf" width="100%" height="600px" /></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>
    <script>
    $('#btn_ver_pdf').click(function () {
            $('#ver_pdf').show();
            $('#button_ocultar').show();
            $('#datos_factura').hide();
            $('#button_ver').hide();  
    });
     $('#btn_ocultar_pdf').click(function () {
            $('#ver_pdf').hide();
            $('#button_ocultar').hide();
            $('#datos_factura').show();
            $('#button_ver').show();  
    });
    
    function detectarDispositivo() {
  var esCelular = false;

  var userAgent = navigator.userAgent.toLowerCase();

  var palabrasClave = ['android', 'webos', 'iphone', 'ipad', 'ipod', 'blackberry', 'iemobile', 'opera mini'];

  for (var i = 0; i < palabrasClave.length; i++) {
    if (userAgent.indexOf(palabrasClave[i]) > -1) {
      esCelular = true;
      break;
    }
  }

  if (esCelular) {
    $("#pdf_ocultar").hide();
	 $("#pdf_ocultar2").hide();
  } else {
    $("#pdf_ocultar").show();
	$("#pdf_ocultar2").show();
  }
}
detectarDispositivo();
    </script>
{% endblock %}