@extends('motomel.plantilla')
@section('breadcrumb')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/inicio">Inicio</a></li>
        @if(Session::get('vista_menu_predeterminado') == "grilla")
            <li class="breadcrumb-item"><a href="/nuevo-pedido">Cat&aacute;logo</a></li>
        @else
            <li class="breadcrumb-item"><a href="/catalogoTabla">Cat&aacute;logo</a></li>
        @endif
        <li class="breadcrumb-item"><a href="/pedidos">Orden de pedido</a></li>
        <li class="breadcrumb-item active">Orden de cobranza</li>
    </ol>
@endsection
@section('contenido')
  @if(Session::get('cliente_id'))
    @if(isset($mensaje) && $mensaje)
        <div class="col-12 pl-4 mt-2">
            <div class="alert alert-danger" role="alert">
                El pago ingresado es menor al total por abonar.
            </div>
        </div> 
    @endif
    <div class="row px-4">
        <div class="col-12">
            <h2>Orden de cobranza</h2>
        </div>
    </div>
    <div class="row px-4 ordenCobranza">
        <form id="form1" method="post" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
        <div class="col-sm-12 text-left my-1">
            <div class="row">
                <table class="table tablaMostrarOrden">
                    <tr><th>Asignar a una orden de pedido</th></tr>
                    <tr>
                        <td>
                             <div id="divOrdenPedido" class="row"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-sm-12 text-left my-1">
            <h3>CUENTA CORRIENTE</h3>
            <div class="row">
                <table class="table tablaMostrarOrden">
                    <tr>
                        <td>
                             <input type="text" id="txtCuentaCorriente" name="txtCuentaCorriente" class="form-control" placeholder="0" onchange="fCalcularTotal();">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-sm-12 text-left my-1">
            <h3>EFECTIVO</h3>
            <div class="row">
                <table class="table tablaMostrarOrden">
                    <tr>
                        <td>
                             <input type="text" id="txtEfectivo" name="txtEfectivo" class="form-control" placeholder="0" onchange="fCalcularTotal();">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-sm-12 text-left cheque my-1">
            <h3>CHEQUE</h3>
            <div class="row">
                <table class="table tablaMostrarOrden">
                    <tr>
                        <th>Número</th>
                        <th>Banco</th>
                        <th>Sucursal</th>
                        <th>Plazo</th>
                        <th>Fecha vto.</th>
                        <th>Importe</th>
                        <th>Comprobante</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tbody id="divCheque">
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-12 text-left my-1">
            <h3>TRANSFERENCIA / DEP&Oacute;SITO BANCARIO</h3>
            <div class="row">
                <table class="table tablaMostrarOrden">
                    <tr>
                        <th>Número</th>
                        <th>Fecha vto.</th>
                        <th>Importe</th>
                        <th>Comprobante</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tbody id="divDeposito">
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-12 text-left my-1">
            <h3>CERTIFICADO DE RETENCIONES</h3>
            <div class="row">
                <table class="table tablaMostrarOrden">
                    <tr>
                        <th>Número</th>
                        <th>Fecha vto.</th>
                        <th>Importe</th>
                        <th>Provincia</th>
                        <th>Comprobante</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tbody id="divRetenciones">
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-12 text-left my-1">
            <h3>OBSERVACIONES</h3>
            <table class="table">
                <tr><td>
                    <input type="hidden" id="txtTotalAbonado" name="txtTotalAbonado" value="0">
                    <textarea class="form-control" id="txtObservaciones" name="txtObservaciones" required></textarea>
                </td></tr>
            </table>
        </div>
        <div class="col-sm-12">
            <hr>
        </div>
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-6 text-left">
                    <h2>Total</h2>
                </div>
                <div class="col-sm-6 finalizarPedido text-right">
                    <p>$<span id="total_pagado">0</span></p>
                </div>
            </div>
        </div>
        <div class="col-sm-12 text-right">
            <button href="/ordenes-listar" type="submit"  class="btn" id="finalizarPedido" name="registrarPago" disabled>REGISTRAR PAGO</button>
        </div>
        <div class="col-sm-12 text-right mt-2">
            <button href="/compraExitosa" type="submit"  class="btn" id="finalizarPedidoBorrador" name="guardarBorrador" disabled>GUARDAR EN BORRADOR</button>
        </div>  
    </div>
    </form>
    <script>
    json_banco =  '';
    json_provincia =  '';
    json_pedidos =  '';
    
    function agregarAttachment(idDiv, parametro, nombre_json_datos, etiqueta) {
        json_datos = eval(nombre_json_datos);
        var num = parametro + 1;
        $("<tr>", {
            id: "divCelda_" + num,
            class: "form-group col-lg-12"
        }
        ).appendTo("#" + idDiv);
        $("<td>").append($("<input>",
                {
                    id: "txtNumero_" + num,
                    name: "txtNumero" + idDiv + "[]",
                    class: "form-control",
                    placeholder: "Número",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);

        $("<td>").append($("<select>",
                {
                    id: "lstBanco_" + num,
                    name: "lstBanco" + idDiv + "[]",
                    class: "form-control",
                    onchange: "fCalcularTotal();",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        //Agrega opciones
        var rows = json_datos;
        $("<option>", {
                value: "",
                text: "Seleccionar",
                disabled: true,
                selected: true
            }
            ).appendTo("#" + idDiv + " #lstBanco_" + num);
        for (i = 0; i < rows.length; i++) {
            $("<option>", {
                value: rows[i]["idbanco"],
                text: rows[i]["codigo"] + " " + rows[i]["nombre"]
            }
            ).appendTo("#" + idDiv + " #lstBanco_" + num);
        }
        //$("#" + idDiv + " #lstBanco_" + num).prop("selectedIndex", "-1");

        $("<td>").append($("<input>",
                {
                    id: "txtSucursal_" + num,
                    name: "txtSucursal" + idDiv + "[]",
                    class: "form-control",
                    style: "display:inline",
                    type: "number"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);

        $("<td>").append($("<select>",
                {
                    id: "lstPlazoCheque_" + num,
                    name: "lstPlazoCheque" + idDiv + "[]",
                    class: "form-control",
                    style: "display:inline",
                    onchange: "verificarFechaCheque("+num+");"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        $("<option>", {
                value: "",
                text: "Seleccionar",
                disabled: true,
                selected: true
         }
        ).appendTo("#" + idDiv + " #lstPlazoCheque_" + num);
         condicionPago = $("#lstCondicionPago option:selected").val();
         if(condicionPago == 3){
            $("<option>", {
                value: "30dias",
                text: "30 días"
            }
            ).appendTo("#" + idDiv + " #lstPlazoCheque_" + num);
         }
         else if(condicionPago == 4){
            $("<option>", {
                value: "30dias",
                text: "30 días"
            }
            ).appendTo("#" + idDiv + " #lstPlazoCheque_" + num);
            $("<option>", {
                value: "60dias",
                text: "60 días"
            }
            ).appendTo("#" + idDiv + " #lstPlazoCheque_" + num);
         }
         else if(condicionPago == 5){
            $("<option>", {
                value: "60dias",
                text: "60 días"
            }
            ).appendTo("#" + idDiv + " #lstPlazoCheque_" + num);
            $("<option>", {
                value: "90dias",
                text: "90 días"
            }
            ).appendTo("#" + idDiv + " #lstPlazoCheque_" + num);
         }

    $("<td>").append($("<input>",
                {
                    id: "txtVencimiento_" + num,
                    name: "txtVencimiento" + idDiv + "[]",
                    class: "form-control",
                    placeholder: "Vencimiento",
                    style: "display:inline",
                    type: "date",
                    onchange: "verificarFechaCheque("+num+");"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);

        $("<td>").append($("<input>",
                {
                    id: "txtImporteCheque_" + num,
                    name: "txtImporte" + idDiv + "[]",
                    class: "form-control",  
                    placeholder: "0",
                    onchange: "fCalcularTotal();",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);

        $("<td>").append($("<input>",
                {
                    id: "fileAdjuntoCheque_" + num,
                    name: "fileAdjuntoCheque" + idDiv + "[]",
                    class: "form-control",
                    type: "file",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);

        $("<td>").append($("<td>", {
            id: "divAddAtt_" + num,
            class: "fa fa-plus boton-agregar px-0 pt-3 text-center col-lg-1",
            onclick: "agregarAttachment('" + idDiv + "'," + num + ",'" + nombre_json_datos + "','" + etiqueta + "')"
        }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        $("<td>").append($("<td>", {
            id: "divAddAtt_" + num,
            class: "fa fa-minus boton-quitar px-0 col-lg-1",
            onclick: "quitarAttachment('" + idDiv + "'," + num + ",'" + nombre_json_datos + "','" + etiqueta + "')"
        }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
    }

    function seleccionarAttachment(idDiv, parametro, valor) {
        $('#' + idDiv + ' #lstBanco_' + (parametro + 1)).val(valor);
    }

    function quitarAttachment(idDiv, parametro) {
        $("#" + idDiv + " #divCelda_" + parametro).remove();
    }

 function agregarAdjunto(idDiv, parametro, nombre_json_datos, etiqueta) {
        json_datos = eval(nombre_json_datos);
        var num = parametro + 1;
        $("<tr>", {
            id: "divCelda_" + num
        }
        ).appendTo("#" + idDiv);

        $("<td>").append($("<input>",
                {
                    id: "txtNumero_" + num,
                    name: "txtNumero" + idDiv + "[]",
                    class: "form-control",
                    type: "number",
                    style: "display:inline",
                    placeholder: "Número"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        $("<td>").append($("<input>",
                {
                    id: "txtFechaDeposito_" + num,
                    name: "txtFechaDeposito" + idDiv + "[]",
                    class: "form-control",
                    type: "date",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        var f = new Date();
        $("#txtFechaDeposito_" + num).val(f.getFullYear() + "-" + ('0' + (f.getMonth()+1)).slice(-2)  + "-" + ('0' + (f.getDate()+1)).slice(-2));
         $("<td>").append($("<input>",
                {
                    id: "txtImporteDeposito_" + num,
                    name: "txtImporteDeposito" + idDiv + "[]",
                    class: "form-control",
                    placeholder: "0",
                    onchange: "fCalcularTotal();",
                    style: "display:inline",
                    onchange: "fCalcularTotal();",
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);

        $("<td>").append($("<input>",
                {
                    id: "fileAdjunto_" + num,
                    name: "fileAdjunto" + idDiv + "[]",
                    class: "form-control",
                    type: "file",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);

        $("<td>").append($("<td>", {
            id: "divAddAtt_" + num,
            class: "fa fa-plus boton-agregar px-0 text-center col-lg-1",
            onclick: "agregarAdjunto('" + idDiv + "'," + num + ",'" + nombre_json_datos + "','" + etiqueta + "')"
        }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        $("<td>").append($("<td>", {
            id: "divAddAtt_" + num,
            class: "fa fa-minus boton-quitar px-0  col-lg-1",
            onclick: "quitarAdjunto('" + idDiv + "'," + num + ",'" + nombre_json_datos + "','" + etiqueta + "')"
        }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
    }

    function seleccionarAdjunto(idDiv, parametro, valor) {
        $('#' + idDiv + ' #lstBanco_' + (parametro + 1)).val(valor);
    }
    function agregarRetenciones(idDiv, parametro, nombre_json_datos, etiqueta) {
        json_datos = eval(nombre_json_datos);
        var num = parametro + 1;
        $("<tr>", {
            id: "divCelda_" + num
        }
        ).appendTo("#" + idDiv);
        
        $("<td>").append($("<input>",
                {
                    id: "txtNumeroRetencion_" + num,
                    name: "txtNumeroRetencion" + idDiv + "[]",
                    class: "form-control",
                    type: "number",
                    style: "display:inline",
                    placeholder: "Número"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        
        $("<td>").append($("<input>",
                {
                    id: "txtFechaRetencion_" + num,
                    name: "txtFechaRetencion" + idDiv + "[]",
                    class: "form-control",
                    type: "date",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        var f = new Date();
        $("#txtFechaDeposito_" + num).val(f.getFullYear() + "-" + ('0' + (f.getMonth()+1)).slice(-2)  + "-" + ('0' + (f.getDate()+1)).slice(-2));
         $("<td>").append($("<input>",
                {
                    id: "txtImporteRetencion_" + num,
                    name: "txtImporteRetencion" + idDiv + "[]",
                    class: "form-control",
                    placeholder: "Importe",
                    onchange: "fCalcularTotal();",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        
        $("<td>").append($("<select>",
                {
                    id: "lstProvinciaRetencion_" + num,
                    name: "lstProvinciaRetencion" + idDiv + "[]",
                    class: "form-control",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        //agregar opciones 
        var row = json_datos;
        $("<option>", {
                value: "",
                text: "Seleccionar",
                disabled: true,
                selected: true
            }
            ).appendTo("#" + idDiv + " #lstProvinciaRetencion_" + num);
        for (i = 0; i < row.length; i++) {
            $("<option>", {
                value: row[i]["idprov"],
                text: row[i]["descprov"]
            }
            ).appendTo("#" + idDiv + " #lstProvinciaRetencion_" + num);
        }
        //$("#" + idDiv + " #lstProvinciaRetencion_" + num).prop("selectedIndex", "-1");

        $("<td>").append($("<input>",
                {
                    id: "fileAdjuntoRetencion_" + num,
                    name: "fileAdjuntov" + idDiv + "[]",
                    class: "form-control",
                    type: "file",
                    style: "display:inline"
                }
        )).appendTo("#" + idDiv + " #divCelda_" + num);

        $("<td>").append($("<td>", {
            id: "divAddAtt_" + num,
            class: "fa fa-plus boton-agregar px-0 text-center col-lg-1",
            onclick: "agregarRetenciones('" + idDiv + "'," + num + ",'" + nombre_json_datos + "','" + etiqueta + "')"
        }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
        $("<td>").append($("<td>", {
            id: "divAddAtt_" + num,
            class: "fa fa-minus boton-quitar px-0 col-lg-1",
            onclick: "quitarRetenciones('" + idDiv + "'," + num + ",'" + nombre_json_datos + "','" + etiqueta + "')"
        }
        )).appendTo("#" + idDiv + " #divCelda_" + num);
    }

    function quitarRetenciones(idDiv, parametro) {
        $("#" + idDiv + " #divCelda_" + parametro).remove();
    }
    function quitarAdjunto(idDiv, parametro) {
        $("#" + idDiv + " #divCelda_" + parametro).remove();
    }
    function quitarAdjuntoOrden(idDiv, parametro) {
        $("#" + idDiv + " #divCelda_" + parametro).remove();
    }

     if($("#divCheque select").length == 0)
        agregarAttachment('divCheque',0, "json_banco", "Usuario");

     if($("#divDeposito input").length == 0)
        agregarAdjunto('divDeposito',0, "json_banco", "Usuario");

        if($("#divRetenciones input").length == 0)
        agregarRetenciones('divRetenciones',0, "json_provincia", "Usuario");
   
    function fCalcularTotal(){
        resultado = 0;
        if($("#txtCuentaCorriente").val() > 0)
            resultado += parseFloat($("#txtCuentaCorriente").val());
        if($("#txtEfectivo").val() > 0)
            resultado += parseFloat($("#txtEfectivo").val());
        $("[id^='txtImporteCheque_']" ).each(function(){
            if(this.value > 0)
                resultado += parseFloat(this.value);
        });
        $("[id^='txtImporteDeposito_']" ).each(function(){
            if(this.value > 0)
                resultado += parseFloat(this.value);
        });
        $("[id^='txtImporteRetencion_']" ).each(function(){
            if(this.value > 0)
                resultado += parseFloat(this.value);
        });
        resultado = resultado.toFixed(2);
        $("#txtTotalAbonado").val(resultado);
        $("#total_pagado").html(addCommas(resultado));

        if(resultado > 0){
            $("#finalizarPedido").prop("disabled", false);
            $("#finalizarPedidoBorrador").prop("disabled", false);
        }

    }
    function fVerificarOrden(num){
        if($("#lstOrdenPedido_" + num +"option:selected").val() != "Seleccionar")
            $("#txtObservaciones").prop("required",false);
    }

    function agregarAdjuntoOrden(idDiv, parametro, nombre_json_datos, etiqueta) {
        json_datos = eval(nombre_json_datos);
        var num = parametro + 1;
        $("<div>", {
            id: "divCelda_" + num,
            class: "form-group col-lg-12"
        }
        ).append($("<label>", {

        })).appendTo("#" + idDiv);

        $("<select>",
                {
                    id: "lstOrdenPedido_" + num,
                    name: "lstOrdenPedido" + idDiv + "[]",
                    class: "form-control selectpicker col-lg-10",
                    style: "display:inline;width:400px !important;",
                    'data-live-search':"true",
                    onchange: "fVerificarOrden(" + num + ");"
                }
        ).appendTo("#" + idDiv + " #divCelda_" + num);
//Agrega opciones
        var rows = json_datos;
        $("<option>", {
                value: "",
                text: "Seleccionar",
                selected: "true"
            }
            ).appendTo("#" + idDiv + " #lstOrdenPedido_" + num);
        for (i = 0; i < rows.length; i++) {
            $("<option>", {
                value: rows[i]["idordendepedido"],
                text: "Nro:" + rows[i]["idordendepedido"] + " " + " " + rows[i]["fecha"] +  " " + "$" + rows[i]["total"] 
            }
            ).appendTo("#" + idDiv + " #lstOrdenPedido_" + num);
        }
        //$("#" + idDiv + " #lstBanco_" + num).prop("selectedIndex", "-1");


        $("<td>", {
            id: "divAddAtt_" + num,
            class: "fa fa-plus boton-agregar px-0 text-center col-lg-1",
            onclick: "agregarAdjuntoOrden('" + idDiv + "'," + num + ",'" + nombre_json_datos + "','" + etiqueta + "')"
        }
        ).appendTo("#" + idDiv + " #divCelda_" + num);

        $("<td>", {
            id: "divAddAtt_" + num,
            class: "fa fa-minus boton-quitar px-0 col-lg-1",
            onclick: "quitarAdjuntoOrden('" + idDiv + "'," + num + ",'" + nombre_json_datos + "','" + etiqueta + "')"
        }
        ).appendTo("#" + idDiv + " #divCelda_" + num);
    }

    function verificarFechaCheque(num){
        fechaRecibida = $("#txtVencimiento_"+num).val();
        fecha = new Date(fechaRecibida);
        plazo = $("#lstPlazoCheque_"+ num +" option:selected").val();
        fechaActual = new Date();
        if(plazo != "" && fechaRecibida != ""){
            if(plazo == "30dias"){
                fecha30Dias = new Date(fechaActual.getFullYear(), fechaActual.getMonth(), fechaActual.getDate() + 30);
                if(fecha < fechaActual || fecha > fecha30Dias){
                    $("#spanFechaCheque_"+num).html("Fecha fuera del plazo");
                    $("#finalizarPedidoBorrador").prop("disabled", true);
                    $("#finalizarPedido").prop("disabled", true);
                }
                else{
                    $("#spanFechaCheque_"+num).html("");
                    $("#finalizarPedidoBorrador").prop("disabled", false);
                    $("#finalizarPedido").prop("disabled", false);
                }
            }
            else if(plazo == "60dias"){
                fecha60Dias = new Date(fechaActual.getFullYear(), fechaActual.getMonth(), fechaActual.getDate() + 60);
                if(fecha < fechaActual || fecha > fecha60Dias){
                    $("#spanFechaCheque_"+num).html("Fecha fuera del plazo");
                    $("#finalizarPedidoBorrador").prop("disabled", true);
                    $("#finalizarPedido").prop("disabled", true);
                }
                else{
                    $("#spanFechaCheque_"+num).html("");
                    $("#finalizarPedidoBorrador").prop("disabled", false);
                    $("#finalizarPedido").prop("disabled", false);
                }
            }
            else if(plazo == "80dias"){
                fecha90Dias = new Date(fechaActual.getFullYear(), fechaActual.getMonth(), fechaActual.getDate() + 90);
                if(fecha < fechaActual || fecha > fecha90Dias){
                    $("#spanFechaCheque_"+num).html("Fecha fuera del plazo");
                    $("#finalizarPedidoBorrador").prop("disabled", true);
                    $("#finalizarPedido").prop("disabled", true);
                }
                else{
                    $("#spanFechaCheque_"+num).html("");
                    $("#finalizarPedidoBorrador").prop("disabled", false);
                    $("#finalizarPedido").prop("disabled", false);
                }
            }
        }
    }

    if($("#divOrdenPedido select").length == 0)
        agregarAdjuntoOrden('divOrdenPedido',0, "json_pedidos", "Usuario");
    </script>
@else
    <div class="row">
        <div class="col-12 pl-4 mt-2">
            <div class="alert alert-danger" role="alert">
                Seleccione un cliente para poder operar.
            </div>
        </div> 
    </div>
@endif
@endsection