{% extends "FactelBundle::Layout.html.twig" %}
 {% set secuencial = entity.secuencial%}
{% 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 class="nunito-semibold">N&uacute;m: {{entity.establecimiento.codigo}}-{{entity.ptoEmision.codigo}}-{{secuencial}}</span></span>
    </div>
    <div>
        <div class="btn-group">
            <button id="btn_acciones_notadebito" name="btn_acciones_notadebito" 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="" onclick="document.getElementById('btn_acciones_notadebito').disabled = true;document.getElementById('submit').click();
                        return false;">Guardar n.d&eacute;bito</a></li>
                <li><a href="{{ path('notadebito') }}">Cancelar</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="modal fade" id="search-client" 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">Seleccionar el Cliente</h4>
            </div>

            <div class="modal-body">
                <div class="dataTable_wrapper table-responsive">  
                    <table class="table table-bordered table-hover" id="client-table">
                        <thead>
                            <tr>
                                <th style="width: 10%">ID</th>
                                <th style="width: 10%">Tipo Identificaci&oacute;n</th>
                                <th style="width: 30%">Identificaci&oacute;n</th>
                                <th>Raz&oacute;n Social</th>
                                <th>Tel&eacute;fono</th>
                                <th>Correo</th>
                                <th>Direcci&oacute;n</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<form method="POST" action="{{path('notadebito_create')}}" id="formNotaDebito">
    <input type="text" id="idNotaDebito" value="{{entity.id}}" class="form-control hidden" name="idNotaDebito">
    <div class="container-fluid 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 de Debito!</strong></h4>
            <p>{{ flashMessage }}</p>
        </div>
     {% endfor %}
        {% 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-6 col-lg-4"><span class="nunito-semibold">Ambiente:</span> {% if entity.emisor.ambiente == 1%} Pruebas {% else %} Producci&oacute;n {% endif %}</div>
                <div class="col-lg-4"><span class="nunito-semibold">Tipo Emisi&oacute;n:</span> {% if entity.emisor.tipoEmision == 1%} Emisi&oacute;n Normal {% else %} Emisi&oacute;n por Indisponibilidad del Sistema {% endif %}</div>
                <div class="col-sm-12 col-lg-4"><span class="nunito-semibold">Fecha Emisi&oacute;n: *</span> <input class="form-control" type="text" value="{{entity.fechaEmision |date('d/m/Y')}}" id="fecha" size="8" name="fechaEmision" required="required" onchange="CrearClaveAcceso()"/> </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="lg:text-xl claveAcceso"><p id="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="form-group">
                <div class="col-md-4">
                    <label class="control-label nunito-semibold">Tipo Documento: *</label>
                    <select class="form-control"  name="tipoDocumento" required="required" value = "{{entity.tipoDocMod}}">
                        <option value="01">Factura</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="control-label nunito-semibold">Fecha Emisi&oacute;n: *</label>
                    <input type="text" id="fechaDocModificado" class="form-control" value="{{entity.fechaEmisionDocMod |date('d/m/Y')}}" size="8" name="fechaDocModificado" required="required" />
                </div>
                <div class="col-md-5">
                    <label class="control-label nunito-semibold">N&uacute;m. Comprobante: *</label>
                    <input type="text" id="numeroDocMod" class="form-control" value="{{entity.nroDocMod}}" name="numeroDocMod" required="required">
                </div>

            </div>
        </fieldset>
{% set datos = entity.emisor.ruc ~ ',' ~ entity.emisor.ambiente ~ ',' ~ entity.emisor.tipoEmision ~ ',' ~ entity.establecimiento.codigo~ ','~ entity.ptoEmision.codigo ~',' ~ secuencial ~',' ~ "05"%}
        <input id="datos" type="hidden" value="{{datos}}" />
        <input type="hidden" name="secuencial" value="{{secuencial}}" />
        <fieldset class="border">
            <legend class="py-1 px-3 text-blue-500 nunito-semibold">Cliente</legend>
            <div class="form-group">
                <div class="checkbox col-sm-6">
                    <label>
                        <input type="checkbox" value=false id="nuevoCliente" name = "nuevoCliente">
                        <span>Nuevo Cliente</span>
                    </label>
                </div>

                <div class="col-sm-6 text-right">
                    <button class="btn bg-blue-600 rounded-full text-white hover:text-white focus:text-white link-boton accion" data-toggle="modal" data-target="#search-client" type="button">
                        Buscar
                    </button>
                </div>
                <input type="text" id="idCliente" value="{{entity.cliente.id}}" class="form-control hidden" name="idCliente">
                <div class="col-md-5">
                    <label class="control-label nunito-semibold">Nombre</label>
                    <input type="text" value="{{entity.cliente.nombre}}" id="nombre"  class="form-control" name="nombre" required="required">
                </div>
                <div class="col-md-3">
                    <label class="control-label nunito-semibold">Tel&eacute;fono</label>
                    <input type="text" value="{{entity.cliente.celular}}" id="celular" class="form-control" name="celular" >
                </div>
                <div class="col-md-4">
                    <label class="control-label nunito-semibold">Correo </label>
                    <input type="email" value="{{entity.cliente.correoElectronico}}" id="email" class="form-control" name="email" >
                </div>
                <div class="col-md-3">
                    <label class="control-label nunito-semibold">Tipo Identificaci&oacute;n *</label>
                    <select class="form-control" id="tipoIdentificacion" name="tipoIdentificacion" required="required">
                        <option value="04" {%if entity.cliente.tipoIdentificacion =="04"%} selected {%endif%}>RUC</option>
                        <option value="05" {%if entity.cliente.tipoIdentificacion =="05"%} selected {%endif%}>CEDULA</option>
                        <option value="06" {%if entity.cliente.tipoIdentificacion =="06"%} selected {%endif%}>PASAPORTE</option>
                        <option value="07" {%if entity.cliente.tipoIdentificacion =="07"%} selected {%endif%}>CONSUMIDOR FINAL</option>
                        <option value="08" {%if entity.cliente.tipoIdentificacion =="08"%} selected {%endif%}>EXTERIOR</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="control-label nunito-semibold">Identificaci&oacute;n *</label>
                    <input type="text" value="{{entity.cliente.identificacion}}" id="identificacion"  class="form-control" name="identificacion" required="required" > 
                </div>
                <div class="col-md-6">
                    <label class="control-label nunito-semibold">Direcci&oacute;n</label>
                    <input type="text" value="{{entity.cliente.direccion}}" id="direccion" class="form-control" name="direccion" >
                </div>
            </div>
        </fieldset> 
    </div>

    <legend class="py-1 px-3 text-blue-500 nunito-semibold">Detalle Nota D&eacute;bito</legend>
    <div class="col-sm-12 text-right">
        <button class="btn bg-blue-600 rounded-full text-white hover:text-white focus:text-white link-boton accion" id="nuevoDetalle" type="button">
            Nuevo
        </button>
    </div>

    <div class="dataTable_wrapper table-responsive w-full">  
        <div>
            <table class="table table-striped table-bordered table-hover" id="detalles">
                <thead>
                    <tr>
                        <th <th class="font-light text-blue-500">Raz&oacute;n Modificaci&oacute;n</th>
                        <th <th class="font-light text-blue-500">Valor Modificaci&oacute;n</th>
                        <th <th class="font-light text-blue-500">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in entity.motivos %}
                    <tr>
                        <td>
                            <input type = 'text' value="{{item.razon}}" name = 'motivo[{{item.id}}]' required='required' />
                        </td>
                        <td>
                            <input type = 'text' value="{{item.valor}}" name = 'valorMod[{{item.id}}]' class = 'valor' id = 'valorMod{{item.id}}' required='required' onchange = 'calcularValores()'/>
                        </td>
                        <td> 
                            <button class='btn btn-danger link-boton accion'  type='button' onclick = "eliminarFila(this)">
                                <i class='glyphicon glyphicon-trash icon-white'></i></button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <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="" id="subTotalSinImpuesto">{{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"><span id="subTotal12">{{entity.subtotal12}}</span> <input type="radio" name="impuesto" value="2" {%if entity.subtotal12 != "0.00" %}checked="checked"{% endif %}/></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" ><span id="subTotal0">{{entity.subtotal0}}</span> <input  type="radio" name="impuesto" value="0" {%if entity.subtotal0 != "0.00"%}checked="checked"{% endif %}/></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"><span id="subTotaNoObjeto">{{entity.subtotalNoIVA}}</span> <input type="radio" name="impuesto" value="6" {%if entity.subtotalNoIVA != "0.00"%}checked="checked"{% endif %}/></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"><span id="subTotaExento">{{entity.subtotalExentoIVA}}</span> <input  type="radio" name="impuesto" value="7" {%if entity.subtotalExentoIVA != "0.00"%}checked="checked"{% endif %}/></p>
            </div>
            <div class="col-xs-10 col-sm-8 text-right">Valor ICE</div>
            <div class="col-xs-2 col-sm-4">
                <input type="text"  value="{{entity.valorICE}}" id="valorICE" name="valorICE" class="form-control"/>
            </div>
            {% set codICE = 0 %} 
            {%for item in entity.impuestos %}
            {% if item.codigo == "03" %}
                {% set codICE = item.codigoPorcentaje %}
            {% endif %}
            {% endfor %}
            <div class="col-xs-10 col-sm-8 text-right codICE">C&oacute;d. ICE</div>
            <div class="col-xs-2 col-sm-4 codICE">
                <input type="text"  id="codICE" name="codICE" class="form-control" {%if codICE == 0 %} disabled="disabled" {% else %} value="{{codICE}}" {% endif %}/>
            </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" id="iva12">{{entity.iva12}}</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> 

    
    <button id="submit" class="hidden" type="submit">
    </button>

</form>


{% endblock %}

{% block javascript %}
<script src="{{asset('recursos/bower_components/datatables/media/js/jquery.dataTables.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>
                            var count = 0;
                            var oTable = $("#client-table").dataTable({
                                responsive: true,
                                bAutoWidth: false,
                                sAjaxSource: "{{ path('all_client')}}",
                                bProcessing: true,
                                bServerSide: true,
                                bSort: false,
                                asStripeClasses: [],
                                aLengthMenu: [[5, 10, 15], [5, 10, 15]],
                                aoColumns: [{"bVisible": false}, {"bVisible": false}, null, null, {"bVisible": false}, {"bVisible": false}, {"bVisible": false}],
                                language: {
                                    sProcessing: "Procesando...",
                                    sLengthMenu: "Mostrar _MENU_",
                                    sZeroRecords: "No se encontraron resultados",
                                    sEmptyTable: "Ningún dato disponible en esta tabla",
                                    sInfo: "Mostrando del _START_ al _END_ de _TOTAL_ registros",
                                    sInfoEmpty: "Mostrando del 0 al 0 de un total de 0 registros",
                                    sInfoFiltered: "(filtrado de un total de _MAX_ registros)",
                                    sInfoPostFix: "",
                                    sSearch: "Buscar:",
                                    sUrl: "",
                                    sInfoThousands: ",",
                                    sLoadingRecords: "Cargando...",
                                    oPaginate: {
                                        sFirst: "Primero",
                                        sLast: "Último",
                                        sNext: "Siguiente",
                                        sPrevious: "Anterior"
                                    },
                                    oAria: {
                                        sSortAscending: ": Activar para ordenar la columna de manera ascendente",
                                        sSortDescending: ": Activar para ordenar la columna de manera descendente"
                                    },
                                },
                            });
                            $('#client-table_filter input').unbind();
                            $('#client-table_filter input').bind('keyup', function(e) {
                                if (e.keyCode == 13) {
                                    oTable.fnFilter($(this).val());
                                }
                            });
                            $('#client-table tbody').on('click', 'tr', function() {
                                var aData = oTable.fnGetData(this); // get datarow
                                if (null != aData)  // null if we clicked on title row
                                {
                                    $("#idCliente").val(aData[0]);
                                    $("#tipoIdentificacion").val(aData[1]);
                                    $("#identificacion").val(aData[2]);
                                    $("#nombre").val(aData[3]);
                                    $("#celular").val(aData[4]);
                                    $("#email").val(aData[5]);
                                    $("#direccion").val(aData[6]);
                                    $('#search-client').modal('toggle');
                                    $('#nuevoCliente').prop('checked', false);
                                    $('#nuevoCliente').val(false);
                                }
                            });
                            $('#nuevoCliente').click(function() {
                                $("#idCliente").val("");
                                $("#tipoIdentificacion").val("");
                                $("#identificacion").val("");
                                $("#nombre").val("");
                                $("#celular").val("");
                                $("#email").val("");
                                $("#direccion").val("");
                                $('#nuevoCliente').prop('checked', true);
                                $('#nuevoCliente').val(true);
                            });
                            $("form").keypress(function(e) {
                                if (e.which == 13) {
                                    return false;
                                }
                            });
                            $("#formNotaDebito").validate({
                                errorClass: "my-error-class",
                                validClass: "my-valid-class",
                                rules: {
                                    nombre: {
                                        required: true,
                                    },
                                    tipoIdentificacion: {
                                        required: true,
                                    },
                                    identificacion: {
                                        required: true,
                                    },
                                    valorICE: {
                                        required: true,
                                        number: true,
                                    },
                                    codICE: {
                                        required: true,
                                        digits: true,
                                    },
                                }

                            });

                            $('#nuevoCliente').val(false);
                            count = $('#detalles > tbody:last tr').length;
                            $("#nuevoDetalle").click(function() {
                                count = count + 1;
                                $('#detalles > tbody:last').append("<tr><td><input type = 'text' name = 'motivo[" + count + "]' required='required' /></td><td><input type = 'text' name = 'valorMod[" + count + "]' class = 'valor' id = 'valorMod" + count + "' required='required' onchange = 'calcularValores()'/></td><td> <button class='btn btn-danger link-boton accion'  type='button' onclick = 'eliminarFila(this)'>"
                                        + "<i class='glyphicon glyphicon-trash icon-white'></i></button></td></tr>");
                                $('#valorMod' + count).rules("add", {
                                    number: true,
                                });
                            });
                            function eliminarFila(e) {
                                $(e).parent().parent().remove();
                                calcularValores();
                            }

                            function calcularValores() {
                                var subTotalSinImpuesto = 0;
                                $(".valor").each(function(index, element) {
                                    subTotalSinImpuesto += parseFloat($(element).val());
                                });
                                $("#subTotalSinImpuesto").text(subTotalSinImpuesto.toFixed(2));
                                calcularTotal();
                            }

                            function calcularTotal() {
                                var total = 0;
                                var iva12 = 0;
                                if ($('input:radio[name=impuesto]:checked').val() == '2') {
                                    iva12 = parseFloat($("#subTotalSinImpuesto").text()) * 0.12;
                                    $("#iva12").text(iva12.toFixed(2));
                                } else {
                                    $("#iva12").text('0.00');
                                }

                                total = (iva12 + parseFloat($("#subTotalSinImpuesto").text())).toFixed(2);
                                $("#valorTotal").text(total);


                                $("#subTotal12").text("0.00");
                                $("#subTotal0").text("0.00");
                                $("#subTotaNoObjeto").text("0.00");
                                $("#subTotaExento").text("0.00");
                                var subTotalSinImpuesto = $("#subTotalSinImpuesto").text()
                                var checked = $('input:radio[name=impuesto]:checked').val();
                                if (checked == '2') {
                                    $("#subTotal12").text(subTotalSinImpuesto);
                                } else if (checked == '0') {
                                    $("#subTotal0").text(subTotalSinImpuesto);
                                }
                                else if (checked == '6') {
                                    $("#subTotaNoObjeto").text(subTotalSinImpuesto);
                                }
                                else if (checked == '7') {
                                    $("#subTotaExento").text(subTotalSinImpuesto);
                                }
                            }

                            $("input[name=impuesto]").change(function() {
                                calcularTotal();
                            });

                            $("#valorICE").change(function(e) {
                                if (parseFloat($("#valorICE").val()) > 0) {
                                    $("#codICE").prop('disabled', false);
                                } else {
                                    $("#codICE").prop('disabled', true);
                                    $("#codICE").val("");
                                }
                            });
</script>
<script src="{{asset('garyavendanio/uikit/js/uikit.min.js')}}"></script>
    <script src="{{asset('garyavendanio/uikit/js/uikit-icons.min.js')}}"></script>
{% endblock %}