{% extends "FactelBundle::Layout.html.twig" %}
 {% set secuencial = pto[0].secuencialRetencion %}
        {% set cant = 9 - secuencial|length %}
        {% for i in 0..cant - 1 %}
              {% set secuencial = 0 ~ secuencial %} 
        {% endfor %}

        {% 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">Nueva Retenci&oacute;n <span class="nunito-semibold">N&uacute;m: {{pto[0].establecimiento.codigo}}-{{pto[0].codigo}}-{{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="" onclick="document.getElementById('btn_acciones_retenciones').disabled = true;document.getElementById('submit').click();
                        return false;">Guardar Retenci&oacute;n</a></li>
                <li><a href="{{ path('notacredito') }}">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 Sujeto Retenido</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 class="font-light text-blue-500" style="width:10%;">ID</th>
                                <th class="font-light text-blue-500" style="width:10%;">Tipo Identificaci&oacute;n</th>
                                <th class="font-light text-blue-500" style="width:30%;">Identificaci&oacute;n</th>
                                <th class="font-light text-blue-500">Raz&oacute;n Social</th>
                                <th class="font-light text-blue-500">Tel&eacute;fono</th>
                                <th class="font-light text-blue-500">Correo</th>
                                <th class="font-light text-blue-500">Direcci&oacute;n</th>
                            </tr>
                        </thead>
                        <tbody>

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

<form method="POST" action="{{path('retencion_create')}}" id="formNotaCredito">
    <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 factura!</strong></h4>
            <p>{{ flashMessage }}</p>
        </div>
     {% endfor %}
        <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"><span class="nunito-semibold">RUC:</span> {{pto[0].establecimiento.emisor.ruc}}</div>
                <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Contribuyente Regimen : </span> {{pto[0].establecimiento.emisor.tipoEmpresa}}</div>
                <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Raz&oacute;n Social:</span> {{pto[0].establecimiento.emisor.razonSocial}}</div>
                <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Nombre Comercial:</span> {%if pto[0].establecimiento.nombreComercial%}{{pto[0].establecimiento.nombreComercial}}{%else%}{{pto[0].establecimiento.emisor.nombreComercial}}{%endif%}</div>
                <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Contribuyente Especial:</span> {{pto[0].establecimiento.emisor.contribuyenteEspecial}}</div>
                <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Obligado Contabilidad:</span> {{pto[0].establecimiento.emisor.obligadoContabilidad}}</div>
                <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Direcci&oacute;n Matriz:</span> {{pto[0].establecimiento.emisor.direccionMatriz}}</div>
                <div class="col-sm-12 col-md-6"><span class="nunito-semibold">Direcci&oacute;n Establecimiento:</span> {{pto[0].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-3"><span class="nunito-semibold">Ambiente:</span> {% if pto[0].establecimiento.emisor.ambiente == 1%} Pruebas {% else %} Producci&oacute;n {% endif %}</div>
                <div class="col-lg-3"><span class="nunito-semibold">Tipo Emisi&oacute;n:</span> {% if pto[0].establecimiento.emisor.tipoEmision == 1%} Emisi&oacute;n Normal {% else %} Emisi&oacute;n por Indisponibilidad del Sistema {% endif %}</div>
                <div class="col-sm-12 col-lg-3"><span class="nunito-semibold">Fecha Emisi&oacute;n: *</span> <input class="form-control" type="text" id="fecha" size="8" name="fechaEmision" required="required" onchange="CrearClaveAcceso()"/> </div>
                <div class="col-sm-12 col-lg-3"><span class="nunito-semibold">Periodo Fiscal (mm/yyyy): *</span> <input class="form-control" type="text" id="periodoFiscal" size="8" name="periodoFiscal" required="required"/> </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 id="claveAcceso"></p></div>
                </div>
            </div>
        </fieldset>

{% set datos = pto[0].establecimiento.emisor.ruc ~ ',' ~ pto[0].establecimiento.emisor.ambiente ~ ',' ~ pto[0].establecimiento.emisor.tipoEmision ~ ',' ~ pto[0].establecimiento.codigo~ ','~ pto[0].codigo ~',' ~ secuencial ~',' ~ "07"%}
        <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">Sujeto Retenido</legend>
            <div class="form-group">
                <div class="checkbox col-sm-6">
                    <label>
                        <input type="checkbox" value=false id="nuevoCliente" name = "nuevoCliente">
                        <span class="nunito-semibold">Nuevo Sujeto Retenido</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" class="form-control hidden" name="idCliente">
                <div class="col-md-5">
                    <label class="control-label nunito-semibold">Nombre *</label>
                    <input type="text" id="nombre" class="form-control" name="nombre" required="required">
                </div>
                <div class="col-md-3">
                    <label class="control-label nunito-semibold">Celular</label>
                    <input type="text" id="celular" class="form-control" name="celular" >
                </div>
                <div class="col-md-4">
                    <label class="control-label nunito-semibold">Email </label>
                    <input type="email" 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">RUC</option>
                        <option value="05">CEDULA</option>
                        <option value="06">PASAPORTE</option>
                        <option value="07">CONSUMIDOR FINAL</option>
                        <option value="08">EXTERIOR</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="control-label nunito-semibold">Identificaci&oacute;n *</label>
                    <input type="text" 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" id="direccion" class="form-control" name="direccion" >
                </div>
            </div>
        </fieldset>

        <div class="col-sm-12 alert alert-success">
            Si desea informaci&oacute;n sobre los c&oacute;digos de retenciones a usar, descargar  <a href="{{path('retencion_help')}}">Ayuda Codigos Retenciones</a> 
        </div>

        <legend class="py-1 px-3 text-blue-500 nunito-semibold">Detalle Comprobante Retenci&oacute;n</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">  
            <div class="table-responsive w-full">
                <table class="table table-striped table-bordered table-hover" id="detalles">
                    <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>
                            <th class="font-light text-blue-500">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </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 f = new Date();
 $("#fecha").val(f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear());
  $("#periodoFiscal1").val((f.getMonth() +1) + "/" + f.getFullYear());
                    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;
                        }
                    });
                    $("#formNotaCredito").validate({
                        errorClass: "my-error-class",
                        validClass: "my-valid-class",
                        rules: {
                            nombre: {
                                required: true,
                            },
                            email: {
                                email: true,
                            },
                            tipoIdentificacion: {
                                required: true,
                            },
                            identificacion: {
                                required: true,
                            },
                        }

                    });
                    $("#idCliente").val("");
                    $("#tipoIdentificacion").val("");
                    $("#identificacion").val("");
                    $("#nombre").val("");
                    $("#celular").val("");
                    $("#email").val("");
                    $("#direccion").val("");
                    $('#nuevoCliente').prop('checked', true);
                    $('#nuevoCliente').val(true);

                    $("#nuevoDetalle").click(function() {
                        count = count + 1;
                        $('#detalles > tbody:last').append("<tr><td><select name = 'tipoImpuesto[" + count + "]'><option value = '1'> Renta</option><option value = '2'> IVA</option><option value = '6'> ISD</option></select></td>"
                                + "<td><input size = '6' type = 'text' name = 'codRetencion[" + count + "]' class = 'valor' id = 'codRetencion" + count + "' required='required'/></td>"
                                + "<td><input size = '4' type = 'text' name = 'porcentaje[" + count + "]' class = 'valor' id = 'porcentaje" + count + "' onchange = 'calcularaValorTotal(" + count + ")' required='required'/></td>"
                                + "<td><input size = '6' type = 'text' name = 'baseImponible[" + count + "]' class = 'valor' id = 'baseImponible" + count + "' onchange = 'calcularaValorTotal(" + count + ")' required='required'/></td>"
                                + "<td><input size = '6' type = 'text' readonly name = 'total[" + count + "]' class = 'valor' id = 'total" + count + "'  required='required'/></td>"
                                + "<td><input type = 'text' name = 'documento[" + count + "]' class = 'valor' id = 'documento" + count + "' required='required'/></td>"
                                + "<td><select name = 'tipoDoc[" + count + "]'><option value = '01'> Factura</option><option value = '05'> Nota Debito</option><option value = '03'> Liq. Compra</option></select></td>"
                                + "<td><input size = '8' type = 'text' name = 'fecha[" + count + "]' class = 'valor' id = 'fecha" + count + "' required='required'/></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>");

                        $('#fecha' + count).datepicker({
                            showButtonPanel: true,
                            dateFormat: "dd/mm/yy",
                            beforeShow: function() {
                                $(".ui-datepicker").css('font-size', 12)
                            }
                        }).datepicker('setDate', 'today');

                        $('#codRetencion' + count).rules("add", {
                            required: true,
                        });
                        $('#baseImponible' + count).rules("add", {
                            required: true,
                            number: true,
                        });
                        $('#porcentaje' + count).rules("add", {
                            number: true,
                        });
                        $('#total' + count).rules("add", {
                            required: true,
                            number: true,
                        });
                        $('#documento' + count).rules("add", {
                            required: true,
                            digits: true,
                        });
                        $('#fecha' + count).rules("add", {
                            required: true,
                        });

                    });

                    function eliminarFila(e) {
                        $(e).parent().parent().remove();
                    }
                    function calcularaValorTotal(id) {
                        var baseImponible = parseFloat($("#baseImponible" + id).val());
                        var porcentaje = parseFloat($("#porcentaje" + id).val());
                        if (!isNaN(baseImponible) && !isNaN(porcentaje)) {
                            var total = parseFloat(baseImponible * porcentaje / 100);
                            $("#total" + id).val(total.toFixed(2));
                        }


                    }
</script>
<script src="{{asset('garyavendanio/uikit/js/uikit.min.js')}}"></script>
    <script src="{{asset('garyavendanio/uikit/js/uikit-icons.min.js')}}"></script>
{% endblock %}