{% 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">Gu&iacute;a <span>N&uacute;m: {{entity.establecimiento.codigo}}-{{entity.ptoEmision.codigo}}-{{entity.secuencial}}</span></span>
    </div>
    <div>
        <div class="btn-group">
            <button id="btn_acciones_guias" name="btn_acciones_guias" 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('guia_new') }}">Nueva gu&iacute;a</a></li>
                            {% if entity.estado == 'CREADA' or entity.estado == 'DEVUELTA' or entity.estado == 'NO AUTORIZADO' or entity.estado == 'PROCESANDOSE'%}
                    <li><a href="{{ path('guia_edit',{ 'id': entity.id }) }}">Editar gu&iacute;a</a></li>
                            {% endif %}
                    <li><a href="{{ path('guia') }}">Gu&iacute;as</a></li>
                    <li class="divider"></li>
                            {% if entity.estado != 'AUTORIZADO'%}
                    <li><a href="{{ path('guia_procesar',{ 'id': entity.id }) }}" onclick="document.getElementById('btn_acciones_guias').disabled = true;">Enviar SRI</a></li>
                            {% endif %}
                            {% if entity.estado == 'AUTORIZADO'%}
                    <li><a href="{{ path('guia_descargar',{ 'id': entity.id , 'type': "pdf"}) }}">Descargar PDF</a></li>
                    <li><a href="{{ path('guia_descargar',{ 'id': entity.id , 'type': "zip"}) }}">Descargar PDF y XML</a></li>
                    <li><a href="#send-email" data-toggle="modal">Reenviar Email</a></li>                
                    {% endif %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
    <div>
        {% 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 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('guia_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">
        <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 Inicio Transporte: </span>{{entity.fechaIniTransporte |date('d/m/Y')}}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Fecha Fin Transporte: </span>{{entity.fechaFinTransporte |date('d/m/Y')}}</div>
            <div class="col-sm-12"><span class="nunito-semibold">Dir. Partida: </span>{{entity.dirPartida }}</div>
            <div class="col-sm-12"><span class="nunito-semibold">Transportista: </span>{{entity.razonSocialTransportista }}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">RUC Transportista: </span>{{entity.rucTransportista }}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Placa: </span>{{entity.placa }}</div>
            <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Motivo Traslado: </span>{{entity.motivoTraslado }}</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>
                    </tr>
                </thead>
                <tbody>
                    {% for item in entity.guiasHasProducto%}
                    <tr>
                        <td>{{item.cantidad}}</td>
                        <td>{{item.codigoProducto}}</td>
                        <td>{{item.nombre}}</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 %}