@extends("layout.base")

@section("styles")
    <title>ARB | Proforma a distribuidor</title>
    <style>
        .foldtl {
            position: relative;
            -webkit-box-shadow: -5px 7px 5px rgba(137, 80,252,0.3);
            -moz-box-shadow: -5px 7px 5px rgba(137, 80,252,0.3);
            box-shadow: -5px 7px 5px rgba(137, 80,252,0.3);

        }

        .foldtl:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            border-bottom: 70px solid rgb(211, 4, 4);
            border-right: 70px solid transparent;
            -webkit-box-shadow: -7px 7px 7px rgba(211, 4, 4,0.3);
            -moz-box-shadow: -7px 7px 7px rgba(211, 4, 4,0.3);
            box-shadow: -7px 7px 7px rgba(211, 4, 4,0.3);
        }

        .foldtl:after {
            /* background-color: #F64E60; */
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            border-top: 69px solid rgba(211, 4, 4,0.3);
            border-left: 69px solid transparent;
        }
        textarea{
            resize: none;
        }
        .table tfoot td{
            border-collapse:collapse;
            border:none;
        }
    </style>
@endsection

@section("header")
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Proforma</h5>
    <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
    <span class="text-danger font-weight-bold mr-4">Crear a distribuidor</span>
@endsection

@section("content")
    <div class="card card-custom ">
        <div class="card" style="border: hidden">
            <div class="card-body foldtl ">
                <form action="{{route("cotizacion.agregar")}}" method="post" id="frmCotizacion" onkeypress="return event.keyCode != 13;">
                    <div class="row text-center">
                        <div class="col-2">
                            <img src="template/assets/media/logos/logo-letter-13.png" width="150px">
                        </div>
                        <div class="col-4">
                            <h3 class="text-center" style="text-decoration: underline 5px rgb(137, 80,252);">PROFORMA DISTRIBUIDOR</h3>
                        </div>
                        <div class="col-4 text-left line-height-xs">
                            <h3>ARB 4x4 ACCESORIES  </h3>
                            <p>1.2 km oeste de la Embajada Americana, Bodegas Macoca, #8</p>
                            <p>Tel: <a href="tel:50622961775" target="_blank" class="text-info">2296-1775</a>
                                // <a href="tel:50640300711" target="_blank" class="text-info">4030-0711</a>
                                <span class="ml-10">WhatsApp: <a href="https://wa.me/50683833333" target="_blank" class="text-info">8383-3333</a></span>
                            </p>
                            <p>
                                Instagram: <a href="https://www.instagram.com/arbcostarica/" class="text-info" target="_blank">@arbcostarica</a>
                                <span class="ml-10">Correo: <a href="mailto:ventas@arbcostarica.com" class="text-info" target="_blank">ventas@arbcostarica.com</a></span>
                            </p>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-3 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Fecha</span>
                                </div>
                                <input type="date" class="form-control" name="fecha" value="{{date("Y-m-d")}}">
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Cliente</span>
                                </div>
                                <select class="form-control selectpicker" name="id_cliente" id="id_cliente" data-live-search="true" data-live-search-normalize="true">
                                    <option value="">Seleccione cliente</option>

                                    @foreach($clientes as $item)
                                        <option value="{{$item->id_cliente}}" data-telefono="{{$item->telefono}}" data-nombre="{{$item->nombre}}" data-descuento="{{$item->porcentaje_descuento}}" >{{$item->nombre}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Nombre cliente</span>
                                </div>
                                <input class="form-control nombre_cliente" name="nombre_cliente" required/>
                                <input name="id_marca" type="hidden" readonly value="15" required/>
                                <input  name="id_modelo" type="hidden" readonly value="190" required/>
                                <input  name="anio" type="hidden" readonly value="0" required/>
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Teléfono cliente</span>
                                </div>
                                <input class="form-control telefono_cliente" name="telefono_cliente"/>
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">% Descuento</span></div>
                                <input class="form-control descuentoGlobal" type="number" id="descuentoGlobal" value="0"/>
                            </div>
                        </div>
                    </div>
                    <hr class="bg-danger">
                    <div class="divDetalles">
                        <!-- Inicio: Listado de Artículos -->
                        <div class="row mx-1 border border-light-info rounded p-5 gutter-b">
                            <h5 class="font-weight-bolder text-center"><i class="fas fa-record-vinyl text-info mr-1"></i>Listado de Artículos USD</h5>
                            <table class="table table-hover table-striped table-sm" style="width: 100%;" role="grid">
                                <thead>
                                <tr role="row">
                                    <th>Artículo</th>
                                    <th>Cant</th>
                                    <th>Precio</th>
                                    <th>% Desc</th>
                                    <th>Descuento</th>
                                    <th>Total Línea</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody class="tblDetalles">
                                <tr role="row" class="linea linea-limpia linea-art linea-art-limpia d-none">
                                    </td>
                                    <td class="form-group form-group-selectpicker">
                                        <input type="hidden" readonly class="id_parte input required" data-nombre="detalles[0][id_parte]" required>
                                        <input type="text" readonly class="form-control form-control-sm nombre form-control-lg required" data-nombre="detalles[0][nombre]" placeholder="Nombre parte" required>
                                    </td>
                                    <td width="100px" class="form-group">
                                        <input type="text" min="1" class="input form-control cantidad numero form-control-sm cantidad monto calcular required" data-nombre="detalles[0][cantidad]" placeholder="Cantidad" value="1" required>
                                    </td>
                                    <td width="200px" class="form-group">
                                        <input type="text" data-type="currency" class="input form-control precio form-control-sm precio monto calcula required" data-nombre="detalles[0][precio]" placeholder="$ 0">
                                    </td>
                                    <td width="70px" class="form-group">
                                        <input type="number" class="input form-control porcentaje_descuento form-control-sm calcular" data-nombre="detalles[0][porcentaje_descuento]">
                                    </td>
                                    <td width="200px" class="form-group">
                                        <input type="text" data-type="currency" class="input form-control monto_descuento form-control-sm monto calcular" data-nombre="detalles[0][monto_descuento]" placeholder="$ 0" readonly>
                                    </td>
                                    <td width="200px">
                                        <input type="text" data-type="currency" class="input form-control totalDolares form-control-sm total monto calcular required" data-nombre="detalles[0][total]" placeholder="$ 0" readonly>
                                    </td>
                                    <td width="50px">
                                        <button type="button" value="1" class="btn btn-light-danger btn-sm btnBorrar"><i class="fa fa-times"></i></button>
                                    </td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td>
                                        <button class="btn btn-outline-primary btn-sm btnBuscarParte" type="button">
                                            <i class="fas fa-plus"></i>Agregar Línea
                                        </button>
                                        <button class="btn btn-outline-primary btn-sm btnAgregarNuevo nuevoArticulo" type="button">
                                            <i class="fas fa-record-vinyl"></i>Agregar Artículo Nuevo
                                        </button>
                                    </td>
                                    <td colspan="4" class="text-right">Sub Total</td>
                                    <td class="text-right">
                                        <input type="hidden" name="sub_total_detalles" class="sub_total" value="0">
                                        <label class="lblSubtotal_detalles">$ 0</label>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- Fin: Listado de Artículos -->
                        <hr class="bg-info">
                        <!-- Inicio: Listado de Combos -->
                        <div class="row mx-1 border border-light-info rounded p-5 gutter-b">
                            <h5 class="font-weight-bolder text-center"><i class="fas fa-layer-group text-info mr-1"></i>Listado de Combos USD</h5>
                            <table class="table table-hover table-striped table-sm" style="width: 100%;" role="grid">
                                <thead>
                                <tr role="row">
                                    <th>Combo</th>
                                    <th>Cant</th>
                                    <th>Precio</th>
                                    <th>% Desc</th>
                                    <th>Descuento</th>
                                    <th>Total Línea</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody class="tblCombos">
                                <tr role="row" class="linea linea-limpia linea-combo linea-combo-limpia d-none">
                                    <td class="form-group ">
                                        <div>
                                            <input type="hidden" readonly class="id_combo input required" data-nombre="combos[0][id_combo]" required>
                                            <input type="text" readonly class="form-control form-control-sm nombre form-control-lg required"  data-nombre="combos[0][nombre]" placeholder="Nombre combo" required>
                                        </div>
                                        <div class="combos_partes"></div>
                                    </td>
                                    <td width="100px" class="form-group">
                                        <input type="text" min="1" class="input form-control numero form-control-sm cantidad monto calcular required" data-nombre="combos[0][cantidad]" placeholder="Cantidad" value="1">
                                    </td>
                                    <td width="200px" class="form-group">
                                        <input type="text" data-type="currency" class="input form-control form-control-sm precio monto calcular required" data-nombre="combos[0][precio]" placeholder="$ 0">
                                    </td>
                                    <td width="70px" class="form-group">
                                        <input type="number" class="input form-control porcentaje_descuento form-control-sm calcular" data-nombre="combos[0][porcentaje_descuento]">
                                    </td>
                                    <td width="200px" class="form-group">
                                        <input type="text" data-type="currency" class="input form-control monto_descuento form-control-sm monto calcular" data-nombre="combos[0][monto_descuento]" placeholder="$ 0" readonly>
                                    </td>
                                    <td width="200px">
                                        <input type="text" data-type="currency" class="input form-control form-control-sm totalDolares total monto calcular required" data-nombre="combos[0][total]" placeholder="$ 0" readonly>
                                    </td>
                                    <td width="50px">
                                        <button type="button" value="1" class="btn btn-light-danger btn-sm btnBorrar"><i class="fa fa-times"></i></button>
                                    </td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td>
                                        <button class="btn btn-outline-primary btn-sm btnBuscarCombo" type="button">
                                            <i class="fas fa-plus"></i>Agregar Línea
                                        </button>
                                        <button class="btn btn-outline-primary btn-sm btnAgregarNuevo nuevoCombo" type="button">
                                            <i class="fas fa-layer-group"></i>Agregar Combo Nuevo
                                        </button>
                                    </td>
                                    <td colspan="4" class="text-right">Sub Total</td>
                                    <td class="text-right">
                                        <input type="hidden" name="sub_total_combos" class="sub_total" value="0">
                                        <label class="lblSubtotal_combos">$ 0</label>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- Fin: Listado de Combos -->

                        <!-- Inicio: Listado de artículos locales -->
                        <div class="row mx-1 border borderLightOT rounded p-5 gutter-b">
                            <h5 class="font-weight-bolder text-center"><i class="fas fa-dice-one text-danger mr-1"></i>Listado de artículos locales CRC</h5>
                            <table class="table table-hover table-striped table-sm" style="width: 100%;" role="grid">
                                <thead>
                                <tr role="row">
                                    <th>Artículo</th>
                                    <th width="100px">Cant</th>
                                    <th width="200px">Precio</th>
                                    <th width="70px">% Desc</th>
                                    <th width="200px">Descuento</th>
                                    <th width="200px">Total Línea</th>
                                    <th width="50px"></th>
                                </tr>
                                </thead>
                                <tbody class="tblArticulosLoc">
                                <tr role="row" class="linea linea-limpia linea-artLoc linea-artLoc-limpia d-none">
                                    </td>
                                    <td class="form-group form-group-selectpicker">
                                        <select class="form-control id_articulo articulo_local form-control-lg"  data-nombre="locales[0][id_articulo]">
                                            <option value="">Seleccione</option>
                                            @foreach($articulos as $item)
                                                <option value="{{$item->id_articulo}}"  data-precio="{{$item->precio_venta}}">{{$item->nombre}}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td width="100px" class="form-group">
                                        <input type="number" step="any" min="1" class="input form-control form-control-sm cantidad monto calcular" data-nombre="locales[0][cantidad]" placeholder="Cantidad" value="1">
                                    </td>
                                    <td width="200px" class="form-group">
                                        <input type="text" data-type="currencyColon" class="input form-control form-control-sm precio monto calcular" data-nombre="locales[0][precio]" placeholder="₡ 0">
                                    </td>
                                    <td width="70px" class="form-group">
                                        <input type="number" class="input form-control porcentaje_descuento form-control-sm calcular" data-nombre="locales[0][porcentaje_descuento]">
                                    </td>
                                    <td width="200px" class="form-group">
                                        <input type="text" data-type="currencyColon" class="input form-control monto_descuento form-control-sm monto calcular" data-nombre="locales[0][monto_descuento]" placeholder="₡ 0" readonly>
                                    </td>
                                    <td width="200px">
                                        <input type="text" data-type="currencyColon" class="input form-control form-control-sm totalColones total monto calcular" data-nombre="locales[0][total]" placeholder="₡ 0" readonly>
                                    </td>
                                    <td width="50px">
                                        <button type="button" value="1" class="btn btn-light-danger btn-sm btnBorrar"><i class="fa fa-times"></i></button>
                                    </td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td class="pt-5">
                                        <button class="btn btn-outline-primary btn-sm btnAgregar btnAgregarArtLoc" type="button">
                                            <i class="fas fa-plus"></i>Agregar Línea
                                        </button>
                                        <a href="{{route("articulos.ajus")}}" target="_blank">
                                            <button class="btn btn-outline-primary btn-sm " type="button">
                                                <i class="fas fa-record-vinyl"></i>Agregar Artículo local nuevo
                                            </button>
                                        </a>
                                    </td>
                                    <td colspan="4" class="text-right pt-5">Sub Total colones</td>
                                    <td class="text-right pt-5">
                                        <input type="hidden" name="sub_total_articulos" class="sub_total_articulos" value="0">
                                        <label class="lblSubtotal_articulos">₡ 0</label>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- Fin: Listado de artículos locales -->

                        <!-- Inicio: Listado de ServiciosServicios -->
                        <div class="row mx-1 border borderLightOT rounded p-5 gutter-b">
                            <h5 class="font-weight-bolder text-center"><i class="fab fa-confluence text-danger mr-1"></i>Listado de Servicios CRC</h5>
                            <table class="table table-hover table-striped table-sm" style="width: 100%;" role="grid">
                                <thead>
                                <tr role="row">
                                    <th>Servicio</th>
                                    <th width="100px">Cant</th>
                                    <th width="200px">Precio</th>
                                    <th width="70px">% Desc</th>
                                    <th width="200px">Descuento</th>
                                    <th width="200px">Total Línea</th>
                                    <th width="50px"></th>
                                </tr>
                                </thead>
                                <tbody class="tblServicios">
                                <tr role="row" class="linea linea-limpia linea-serv linea-serv-limpia d-none">
                                    </td>
                                    <td class="form-group form-group-selectpicker">
                                        <input type="text"class="input form-control form-control-sm servicio" data-nombre="servicios[0][servicio]" placeholder="Servicio">
                                    </td>
                                    <td width="100px" class="form-group">
                                        <input type="text" min="1" class="input form-control numero form-control-sm cantidad monto calcular" data-nombre="servicios[0][cantidad]" placeholder="Cantidad" value="1">
                                    </td>
                                    <td width="200px" class="form-group">
                                        <input type="text" data-type="currencyColon" class="input form-control form-control-sm precio monto calcular" data-nombre="servicios[0][precio]" placeholder="₡ 0">
                                    </td>
                                    <td width="70px" class="form-group">
                                        <input type="number" class="input form-control porcentaje_descuento form-control-sm calcular" data-nombre="servicios[0][porcentaje_descuento]">
                                    </td>
                                    <td width="200px" class="form-group">
                                        <input type="text" data-type="currencyColon" class="input form-control monto_descuento form-control-sm monto calcular" data-nombre="servicios[0][monto_descuento]" placeholder="₡ 0" readonly>
                                    </td>
                                    <td width="200px">
                                        <input type="text" data-type="currencyColon" class="input form-control form-control-sm total monto calcular totalColones" data-nombre="servicios[0][total]" placeholder="₡ 0" readonly>
                                    </td>
                                    <td width="50px">
                                        <button type="button" value="1" class="btn btn-light-danger btn-sm btnBorrar"><i class="fa fa-times"></i></button>
                                    </td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td class="pt-5">
                                        <button class="btn btn-outline-primary btn-sm btnAgregar btnAgregarServicio" type="button">
                                            <i class="fas fa-plus"></i>Agregar Línea
                                        </button>
                                    </td>
                                    <td colspan="4" class="text-right pt-5">Sub Total</td>
                                    <td class="text-right pt-5">
                                        <input type="hidden" name="sub_total_servicios" class="sub_total_servicios" value="0">
                                        <label class="lblSubtotal_servicios">$ 0</label>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- Fin: Listado de Servicios -->
                        <hr class="bgOT">


                        <!-- Inicio: Totales  -->
                        <div class="row mx-1 px-5">
                            <table class="table table-hover table-striped table-sm" style="width: 100%;" role="grid">
                                <tfoot>
                                <tr>
                                    <td class="text-right">Sub total colones</td>
                                    <td class="text-right" width="200px">
                                        <input type="hidden" name="sub_total_colones" class="sub_total_colones" value="0">
                                        <label class="lblSubtotalColones">₡ 0</label>
                                    </td>
                                    <td class="text-right">Sub total dolares</td>
                                    <td class="text-right" width="200px">
                                        <input type="hidden" name="sub_total_dolares" class="sub_total_dolares" value="0">
                                        <label class="lblSubtotalDolares">$ 0</label>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-right">Iva Colones</td>
                                    <td class="text-right">
                                        <input type="hidden" name="iva_colones" class="iva_colones" value="0">
                                        <label class="lblIVAColones">₡ 0</label>
                                    </td>

                                    <td class="text-right">Iva dolares</td>
                                    <td class="text-right">
                                        <input type="hidden" name="iva_dolares" class="iva_dolares" value="0">
                                        <label class="lblIVADolares">$ 0</label>
                                    </td>
                                </tr>
                                <tr class="form-group">
                                    <td class="text-right">Total colones</td>
                                    <td class="text-right" width="200px">
                                        <input type="hidden" name="total_cotizacion_colones" class="total_cotizacion_colones" value="0">
                                        <label class="lblTotalCotizacionColones">$ 0</label>
                                    </td>

                                    <td class="text-right">Total dolares</td>
                                    <td class="text-right" width="200px">
                                        <input type="hidden" name="total_cotizacion_dolares" class="total_cotizacion_dolares" value="0">
                                        <label class="lblTotalCotizacionDolares">$ 0</label>
                                    </td>
                                </tr>
                                <tr>

                                    <td class="text-right">Precio venta dolar</td>
                                    <td class="text-right">
                                        <input type="number" step="any" id="venta_dolar" name="venta_dolar" class="venta_dolar tipoCambio form-control form-control-sm" value="{{$tc->venta}}">
                                    </td>

                                    <td class="text-right">Precio compra dolar</td>
                                    <td class="text-right">
                                        <input type="number" step="any" id="compra_dolar" name="compra_dolar" class="compra_dolar tipoCambio form-control form-control-sm" value="{{$tc->compra}}">
                                    </td>

                                </tr>
                                <tr class="form-group">
                                    <td class="text-right">Pago total colones</td>
                                    <td class="text-right" width="200px">
                                        <input type="hidden" name="total_pago_colones" class="total_pago_colones" value="0">
                                        <label class="lblTotalPagoColones">$ 0</label>
                                    </td>

                                    <td class="text-right">Pago Total dolares</td>
                                    <td class="text-right" width="200px">
                                        <input type="hidden" name="total_pago_dolares" class="total_cotizacion_dolares" value="0">
                                        <label class="lblTotalPagoDolares">$ 0</label>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- Fin: Totales  -->
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Observaciones</label>
                                    <textarea class="form-control" id="observaciones" rows="2" name="observaciones" placeholder="Visible en la impresión el documento"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-around">
                            <button class="btn btn-primary" id="btnVisPrev" type="button">Vista Previa</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalDatosNuevo" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Datos</h5>
                    <button type="button" class="close btnCerrar" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="fas fa-times-circle fa-1x"></i></button>
                </div>
                <div class="modal-body">
                    <form method="post" id="frm_datos_nuevo">
                        <input type="hidden" name="id_parte" id="id" readonly>
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label class="required form-label">Nombre<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="nombre" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="required form-label">Descripcion</label>
                                <input type="text" class="form-control" name="descripcion">
                            </div>
                            <div class="col-md-4 form-group">
                                <label class="required form-label">Categoría<span class="text-danger">*</span></label>
                                <select class="form-control" name="id_articulo_categoria" required>
                                    <option value="">Seleccione</option>
                                    @foreach($categorias as $item)
                                        <option value="{{$item->id_articulo_categoria}}">{{$item->categoria}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <label class="required form-label">Unidad medida<span class="text-danger">*</span></label>
                                <select class="form-control id_unidad_medida" name="id_unidad_medida" required>
                                    <option value="">Seleccione</option>
                                    @foreach($unidades_medida as $item)
                                        <option value="{{$item->id_unidad_medida}}">{{$item->nombre_unidad}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <label class="required form-label">Cantidad por unidad medida<span class="text-danger">*</span></label>
                                <input type="number" class="form-control" placeholder="Cantidad" value="0" name="cantidad_unidad" required>
                            </div>
                            <div class="col-md-4 form-group">
                                <label class="required form-label">Número parte<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="num_parte" required>
                            </div>
                            <div class="col-md-4 form-group">
                                <label class="required form-label">Año inicio compatibilidad<span class="text-danger">*</span></label>
                                <input type="number" class="form-control anio_i" placeholder="Inicio" min="1800" max="{{date('Y')+1}}" name="anio_i" required>
                            </div>
                            <div class="col-md-4 form-group">
                                <label class="required form-label">Año fin compatibilidad<span class="text-danger">*</span></label>
                                <input type="number" class="form-control anio_f" placeholder="Fin" min="1800" max="{{date('Y')+1}}" name="anio_f" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="required form-label">Marca<span class="text-danger">*</span></label>
                                <select class="form-control selectpicker no_change" name="id_marca" id="id_marca_articulo" data-live-search="true" data-live-search-normalize="true" required>
                                    <option value="">Selecione marca</option>
                                    <option value="universal">Universal</option>
                                    @foreach($marcas as $item)
                                        <option value="{{$item->id_marca}}">{{$item->marca}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="required form-label">Modelo<span class="text-danger">*</span></label>
                                <select class="form-control selectpicker no_change" name="id_modelo" id="id_modelo_articulo" data-live-search="true" data-live-search-normalize="true" required>
                                    <option value="" class="vacio">Selecione modelo</option>
                                    @foreach($modelos as $item)
                                        <option value="{{$item->id_modelo}}" class="marca_{{$item->id_marca}}">{{$item->modelo." ".$item->serie}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 form-group">
                                <label class="required form-label">Precio costo<span class="text-danger">*</span></label>
                                <input type="text" data-type="currency" class="form-control precio_costo" name="precio_costo" placeholder="$ 0" required>
                            </div>
                            <div class="col-md-3 form-group">
                                <label class="required form-label">Precio sugerido<span class="text-danger">*</span></label>
                                <input type="text" data-type="currency" class="form-control precio_sugerido" name="precio_sugerido" placeholder="$ 0" required>
                            </div>
                            <div class="col-md-3 form-group">
                                <label class="required form-label">Margen ganancia<span class="text-danger">*</span></label>
                                <input type="text" data-type="currency" class="form-control margen" name="margen" placeholder="$ 0" required>
                            </div>
                            <div class="col-md-3 form-group">
                                <label class="required form-label">Precio establecido<span class="text-danger">*</span></label>
                                <input type="text" data-type="currency" class="form-control precio_establecido" name="precio_establecido" placeholder="$ 0" required>
                            </div>
                            <div class="col-md-3 form-group">
                                <label class="required form-label">Precio distribuidor<span class="text-danger">*</span></label>
                                <input type="text" data-type="currency" class="form-control precio_distibuidor" name="precio_distibuidor" placeholder="$ 0" required>
                            </div>
                            <div class="col-md-3 form-group">
                                <label class="required form-label">Stock mínimo<span class="text-danger">*</span></label>
                                <input type="number" class="form-control stock_min" placeholder="Mímino" min="0" name="stock_min" required>
                            </div>
                            <div class="col-md-3 form-group">
                                <label class="required form-label">Stock máximo<span class="text-danger">*</span></label>
                                <input type="number" class="form-control stock_max" placeholder="Máximo" min="0" name="stock_max" required>
                            </div>
                        </div>
                    </form>
                    <div class="div_partes d-none">
                        <div class="separator separator-dashed separator-primary my-7"></div>
                        <div class="row">
                            <div class="col-12">
                                <h5>Lista de artículos en el combo</h5>
                            </div>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">Artículo</span>
                                    </div>
                                    {{-- <input type="text" class="form-control numero" name="id_prefactura" id="buscar_id_prefactura" placeholder="Código prefactura" required>--}}
                                    <select class="form-control form-control selectpicker partes_para_combo" data-live-search="true" data-live-search-normalize="true">
                                        <option value="">Seleccione</option>
                                    </select>
                                    <div class="input-group-prepend">
                                        <button type="button" class="btn btn-primary btn-icon rounded-right" id="agregar_parte" data-toggle="tooltip" title="Agregar artículo"><i class="fas fa-plus"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="checkbox-list lista_articulos mt-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary font-weight-bold btnCerrar" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-success font-weight-bold" form="frm_datos_nuevo">Guardar</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalVisPrev" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalSizeLg" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xxl" role="document">
            <div class="modal-content" style="height:95vh;">
                <div class="modal-header">
                    <h5 class="modal-title">Vista previa</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="fas fa-times-circle fa-1x"></i></button>
                </div>
                <div class="modal-body">
                    <div class="h-100">
                        <iframe class="w-100 h-100" type="application/pdf" id="dataPDF"></iframe>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary font-weight-bold btnCerrar" data-dismiss="modal">Cerrar</button>
                    <button type="submit" form="frmCotizacion" class="btn btn-success font-weight-bold">Guardar</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalCorreo" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-diagonal bg-diagonal-danger h-10px">
                    <label class="modal-title zindex-2 text-white">Proforma generada</label>
                    <button type="button" class="close zindex-2" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="fas fa-times-circle fa-1x"></i></button>
                </div>
                <div class="modal-body p-10">
                    <div class="d-flex justify-content-center align-content-center">
                        <a href="{{route("cotizacion.pdf", ['cotizacion' => ':cotizacion'])}}" target="_blank" class="btn btn-lg btn-danger text-center px-25 d-flex align-items-center btnPDF"><span><i class="fas fa-print fa-2x text-center"></i><br>Imprimir proforma</span></a>
                        <form id="frmCorreo" class="rounded border border-danger p-10 ml-10 w-50">
                            <input type="hidden" name="id_cotizacion" class="id_cotizacion" value="17">
                            <div class="form-group input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-envelope"></i></span></div>
                                <input type="email" class="form-control correo" name="correo" placeholder="Correo" required>
                            </div>
                            <button class="btn btn-lg btn-light-danger mt-2 col-12" id="btnCorreo">Enviar vía correo</button>
                        </form>
                    </div>
                </div>
                <div class="modal-footer bg-diagonal bg-diagonal-white bg-diagonal-r-danger h-10px"></div>
            </div>
        </div>
    </div>

    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalBuscarParte" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Buscar de partes</h5>
                    <button type="button" class="close btnCerrar" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="fas fa-times-circle fa-1x"></i></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id_parte" id="id" readonly>
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="required form-label">Buscador<span class="text-danger">*</span> <span class="text-info">Use enter para buscar</span></label>
                            <input type="text" class="form-control" id="queryParte" >
                        </div>
                        <div style="width:100%; height:65vh; overflow-y: scroll;">
                            <table class="table table-sm table-striped" id="tblBuscarPartes">
                                <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Categoría</th>
                                    <th>Modelo</th>
                                    <th>Inicio</th>
                                    <th>Final</th>
                                    <th>Numero de parte</th>
                                    <th>Unidad</th>
                                    <th>Cantidad por unidad</th>
                                    <th>Precio</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success font-weight-bold" data-dismiss="modal">Continuar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalBuscarCombo" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Buscar de combo</h5>
                    <button type="button" class="close btnCerrar" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="fas fa-times-circle fa-1x"></i></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="required form-label">Buscador<span class="text-danger">*</span> <span class="text-info">Use enter para buscar</span></label>
                            <input type="text" class="form-control" id="queryCombo" >
                        </div>
                        <div style="width:100%; height:65vh; overflow-y: scroll;">
                            <table class="table table-sm table-striped" id="tblBuscarCombo">
                                <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Categoría</th>
                                    <th>Modelo</th>
                                    <th>Inicio</th>
                                    <th>Final</th>
                                    <th>Numero de parte</th>
                                    <th>Precio</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success font-weight-bold" data-dismiss="modal">Continuar</button>
                </div>
            </div>
        </div>
    </div>



@endsection

@section("scripts")
    <script>
        let contadorCombos = 1;
        let contadorPartesCombos = 1;
        let contadorDetalles = 1;

        let contadorArticulosLoc = 1;
        let contadorServicios = 1;

        let descuentoGlobal=0;

        $(document).ready(function() {
            $("#id_vehiculo").children('option').not(".vacio").hide();
            $("#id_modelo").children('option').not(".vacio").hide();

            $('#id_cliente').on('change',function(){
                option = $(this).find('option:selected');
                $(".nombre_cliente").val(option.data("nombre"));
                $(".telefono_cliente").val(option.data("telefono"));
                $("#descuentoGlobal").val(option.data("descuento"));
                descuentoGlobal=option.data("descuento");
                recalcular();

            });

            $(document).on("change", ".id_parte", function () {
                opcion = $(this).find("option:selected");
                linea = $(this).parents(".linea");
                if(opcion.val() == ""){
                    linea.find(".precio").val(0);
                } else {
                    linea.find(".precio").val(formatCurrency(opcion.data("precio"))).change();
                }
            });

            $(document).on("change", "select.id_combo", function () {
                let select = $(this);
                $('button').attr('disabled', true);
                $('form :submit').attr('disabled', true);
                select.parent().find('.filter-option').addClass('spinner spinner-info spinner-right');

                opcion = $(this).find("option:selected");
                linea = $(this).parents(".linea");
                if(opcion.val() == ""){
                    linea.find(".precio").val(0);
                } else {
                    linea.find(".precio").val(formatCurrency(opcion.data("precio"))).change();
                }

                //Ir a traer los artículos que coinciden
                $.ajax({
                    url: "{{route("combo.getListadoPartes", ['combo' => ':combo'])}}".replace(':combo', select.val()),
                    dataType: "json",
                    method: "get",
                })
                    .done(function (response) {
                        //Inicio: cargarPartes
                        linea.find('.combos_partes').html('');
                        opciones = "";
                        let name = select.attr('name');
                        name = name.substring(0, name.length-10);

                        $.each(response, function (i,e) {
                            descripcion = (e.descripcion) ? (" - "+e.descripcion) : ("");
                            let parte = '<div class="d-flex">\
                                            <label class="checkbox checkbox-lg mb-3 ml-7 mr-2">\
                                                <input type="checkbox" name="combos[id_parte][]" value="'+e.id_parte+'" checked/>\
                                                <span class="border border-primary mr-2"></span>' + e.nombre + descripcion + ' ' + e.num_parte +
                                '</label>\
                                <div class="form-group">\
                                    <div class="input-group input-group-sm">\
                                        <div class="input-group-prepend"><span class="input-group-text">Cantidad</span>\
                                        </div>\
                                        <input type="number" class="form-control form-control-sm" name="combos['+e.id_parte+'][cantidad]" value="'+e.cantidad_unidad+'">\
                                                </div>\
                                            </div>\
                                        </div>';
                            linea.find('.combos_partes').append(parte);
                            contadorPartesCombos++;
                        });
                        $("select.id_parte").append(opciones);
                        //Fin: cargarPartes
                    })
                    .fail(function (error) {
                        Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,});
                    })
                    .always(function () {
                        $('button').attr('disabled', false);
                        $('form :submit').attr('disabled', false);
                        select.parent().find('.filter-option').removeClass('spinner spinner-info spinner-right');
                    });
            });

            $('.btnAgregar').on('click',function()
            {
                button = $(this);
                contador = 0;
                limpia = "";
                tablaActual = "";
                if(button.hasClass("btnAgregarArtLoc")) {
                    contador = contadorArticulosLoc++;
                    limpia = "linea-artLoc-limpia";
                    tablaActual = ".tblArticulosLoc";
                    tipo_detalle = "locales";
                    name_campo = "id_articulo";
                    requerimiento = articuloRequerido;
                }else if(button.hasClass("btnAgregarServicio")) {
                    contador = contadorServicios++;
                    limpia = "linea-serv-limpia";
                    tablaActual = ".tblServicios";
                    tipo_detalle = "servicios";
                    name_campo = "servicio";
                    requerimiento = servicioRequerido;
                }

                clon =$("."+limpia).clone("true");
                clon.removeClass("linea-limpia d-none "+limpia);
                clon.appendTo(tablaActual);
                clon.find(".input").val("");
                clon.find(".monto").val("");
                clon.find(".cantidad").val("1");
                clon.find(".descuento").val("0");
                clon.find(".porcentaje_descuento ").val(descuentoGlobal);
                clon.find("select").eq(0).prop("selected", "selected");
                clon.find(".is-invalid").removeClass('is-invalid');

                calcularLinea(clon);
                $.each(clon.find(".input"), function () {
                    array = [];
                    switch (tipo_detalle) {
                        case "locales": array = $(this).data("nombre").match(/.{1,8}/g); break;
                        case "servicios":array = $(this).data("nombre").match(/.{1,10}/g); break;
                    }
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contador);
                    console.log(array[1]);
                    $(this).attr("name", array.join(''));
                    if($(this).hasClass('required'))
                        $(this).attr("required", true);
                    $(this).removeAttr("data-nombre");
                });
                $.each(clon.find("select"), function () {
                    array = [];
                    switch (tipo_detalle) {
                        case "detalles": array = $(this).data("nombre").match(/.{1,9}/g); break;
                        case "combos": array = $(this).data("nombre").match(/.{1,7}/g); break;
                        case "locales": array = $(this).data("nombre").match(/.{1,8}/g); break;
                        case "servicios":array = $(this).data("nombre").match(/.{1,10}/g); break;

                    }
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contador);
                    $(this).attr("name", array.join(''));
                    if($(this).hasClass('required'))
                        $(this).attr("required", true);
                    $(this).removeAttr("data-nombre");
                    clon.find(".form-group-selectpicker")
                        .find('.bootstrap-select').remove().end()
                        .append($(this)).end();
                    clon.find(".form-group-selectpicker").find("[name='"+array.join('')+"']").selectpicker();
                });
                validador.addField(tipo_detalle+'['+contador+']['+name_campo+']', requerimiento)
                    .addField(tipo_detalle+'['+contador+'][cantidad]', cantidadRequerida)
                    .addField(tipo_detalle+'['+contador+'][precio]', precioRequerido);


            });

            $(document).on("change", ".id_articulo", function () { cargarPrecio($(this)); });

            $(document).on('click','.btnBorrar',function() {
                linea = $(this).parents(".linea");
                if(!linea.hasClass("linea-limpia")) {
                    name_campo = "";
                    if(linea.hasClass("linea-art")) {
                        name_campo = linea.find("select.id_parte").attr("name");
                    } else
                    if(linea.hasClass("linea-combo")) {
                        name_campo = linea.find("select.id_combo").attr("name");
                    }else
                    if(linea.hasClass("linea-artLoc")) {
                        name_campo = linea.find("select.id_articulo").attr("name");
                    }
                    if(linea.hasClass("linea-serv")) {
                        name_campo = linea.find("input.servicio").attr("name");
                    }
                    cantidad = linea.find(".cantidad").attr("name");
                    precio = linea.find(".precio").attr("name");

                    validador.removeField(name_campo).removeField(cantidad).removeField(precio);
                    linea.remove();
                } else {
                    linea.find(".monto").val("");
                    linea.find(".cantidad").val("1");
                    if(linea.hasClass("linea-art")) {
                        linea.find(".id_parte").val("");
                        linea.find(".id_parte").selectpicker("refresh");
                    } else
                    if(linea.hasClass("linea-combo")) {
                        linea.find(".id_combo").val("");
                        linea.find(".id_combo").selectpicker("refresh");
                    }
                }
                totales();

            });

            $(document).on('keyup change','.calcular, .precio',function(){
                linea = $(this).parents(".linea");
                calcularLinea(linea);
                totales();
            });



            $('#btnVisPrev').on('click',function() {
                validador.validate().then(function (status) {
                    if (status == 'Valid') {
                        Swal.fire({
                            title: "Cargando vista previa",
                            text: "Esto podría tardar un poco",
                            allowOutsideClick: false,
                            didOpen: function() {
                                Swal.showLoading()
                            }
                        });
                        $.each($('[data-type="currency"]'), function () {
                            monto = currencyToNumber($(this).val())
                            $(this).val(monto);
                        });

                        $.each($('[data-type="currencyColon"]'), function () {
                            monto = currencyToNumber($(this).val())
                            $(this).val(monto);
                        });

                        $(".no_change").attr("disabled", false);
                        data = $("#frmCotizacion").serialize();
                        $(".no_change").attr("disabled", true);
                        $.each($('[data-type="currency"]'), function () {
                            monto = formatCurrency($(this).val())
                            $(this).val(monto);
                        });

                        $.ajax({
                            url: "{{route("cotizacion.vistaPrevia")}}",
                            dataType: "json",
                            method: "post",
                            data: data,
                        })
                            .done(function (response) {
                                $('#dataPDF').attr('src', 'data:application/pdf;base64,' + response);
                                Swal.close();
                                $("#modalVisPrev").modal("show");
                            })
                            .fail(function (error) {
                                Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,})
                            });
                    } else {
                        Swal.fire({text: "Debe completar todos los campos requeridos",icon: "error",confirmButtonText: "OK",}).then();
                    }
                });
            });

            $("#frmCotizacion").on("submit", function (e) {
                e.preventDefault();
                $('button').attr('disabled', true);
                $('#frmCotizacion :submit').attr('disabled', true);
                $('#frmCotizacion :submit').addClass('spinner spinner-white spinner-left');
                $.each($('[data-type="currency"]'), function () {
                    monto = currencyToNumber($(this).val())
                    $(this).val(monto);
                });
                $(".no_change").attr("disabled", false);
                data = $("#frmCotizacion").serialize();
                $(".no_change").attr("disabled", true);
                $.each($('[data-type="currency"]'), function () {
                    monto = formatCurrency($(this).val())
                    $(this).val(monto);
                });
                form = this;
                $.ajax({
                    url: form.action,
                    dataType: "json",
                    method: "post",
                    data: data,
                })
                    .done(function (response) {
                        if(response.guardado) {
                            $("#modalCorreo").find(".id_cotizacion").val(response.cotizacion.id_cotizacion);
                            $("#modalVisPrev").modal("hide");
                            let href = $(".btnPDF").attr("href");
                            href = href.replace(':cotizacion', response.cotizacion.id_cotizacion);
                            $(".btnPDF").attr("href", href);
                            $("#modalCorreo").modal("show");
                            limpiarFormulario();
                        } else {
                            Swal.fire({icon: 'error', title: 'Error al guardar la proforma', showConfirmButton: true,});
                        }
                    })
                    .fail(function (error) {
                        Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,});
                    })
                    .always(function () {
                        $('button').attr('disabled', false);
                        $('#frmCotizacion :submit').attr('disabled', false);
                        $('#frmCotizacion :submit').removeClass('spinner spinner-white spinner-left');
                    });
            });

            $("#frmCorreo").on("submit", function (e) {
                e.preventDefault();
                Swal.fire({
                    title: "Enviando correo",
                    text: "Esto podría tardar un poco",
                    allowOutsideClick: false,
                    didOpen: function() {
                        Swal.showLoading()
                    }
                });
                $('button').attr('disabled', true);
                url = "{{ route('cotizacion.enviar', ['cotizacion' => ':cotizacion', 'correo' => ':correo']) }}";
                url = url.replace(':cotizacion', $("#modalCorreo").find(".id_cotizacion").val()).replace(':correo', $("#modalCorreo").find(".correo").val());
                $.ajax({
                    url: url,
                    dataType: "json",
                    method: "get",
                })
                    .done(function (response) {
                        if (response.correo==1) {
                            Swal.fire({icon: 'success', title: 'Correo Enviado', showConfirmButton: false, timer: 2000})
                        } else{
                            Swal.fire({
                                icon: 'warning',
                                title: 'Hubo un problema enviando el correo',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: "Cerrar",
                                allowOutsideClick: false,
                                customClass: 'alert-lg',
                                html: '<div class="mb-5 p-2 border border-warning">'+response.correo+'</div>',
                            });
                        }
                    })
                    .fail(function (error) {
                        Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,});
                    })
                    .always(function () {
                        $('button').attr('disabled', false);
                    });
            });

            $('#modalCorreo').on('hidden.bs.modal', function() {
                window.location.reload();
            });

            const articuloRequerido = {
                validators: {
                    notEmpty: {
                        message: 'Artículo es requerido'
                    }
                }
            };
            const comboRequerido = {
                validators: {
                    notEmpty: {
                        message: 'Combo es requerido'
                    }
                }
            };
            const servicioRequerido = {
                validators: {
                    notEmpty: {
                        message: 'Servicio es requerido'
                    }
                }
            };
            const cantidadRequerida = {
                validators: {
                    // greaterThan: {
                    //     min: 0,
                    //     message: 'La cantidad no puede ser menor a 1'
                    // },
                    // different: {
                    //     compare: "0",
                    //     message: 'La cantidad no puede ser 0'
                    // },
                    notEmpty: {
                        message: 'La cantidad no puede ser vacío'
                    },
                }
            };
            const precioRequerido = {
                validators: {
                    different: {
                        compare: "$ 0",
                        message: 'El precio no puede ser 0'
                    },
                    notEmpty: {
                        message: 'El precio no puede ser vacío'
                    },
                }
            };
            _formEl = KTUtil.getById('frmCotizacion');
            validador = FormValidation.formValidation(
                _formEl,
                {
                    fields: {
                        fecha: {
                            validators: {
                                notEmpty: {
                                    message: 'Fecha es requerida'
                                },
                            }
                        },
                        nombre_cliente: {
                            validators: {
                                notEmpty: {
                                    message: 'Cliente es requerido'
                                },
                            }
                        },
                        id_marca: {
                            validators: {
                                notEmpty: {
                                    message: 'Marca es requerida'
                                },
                            }
                        },
                        id_modelo: {
                            validators: {
                                notEmpty: {
                                    message: 'Modelo es requerido'
                                },
                            }
                        },
                        anio: {
                            validators: {
                                notEmpty: {
                                    message: 'Año es requerido'
                                },
                            }
                        },
                        /*'detalles[0][id_parte]': articuloRequerido,
                        'detalles[0][cantidad]': cantidadRequerida,
                        'detalles[0][precio]': precioRequerido,*/
                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                    }
                }
            );

            /*  INICIO: Nuevo articulo/combo */
            $(".btnAgregarNuevo").on("click", function() {
                if($(this).hasClass('nuevoArticulo')) {
                    $('#frm_datos_nuevo').attr("action", "{{ route("parte.agregar") }}").addClass('articulo').removeClass('comboNuevo');
                } else if($(this).hasClass('nuevoCombo')) {
                    $('#frm_datos_nuevo').attr("action", "{{ route("combo.agregar") }}").addClass('comboNuevo').removeClass('articulo');
                }
                $('#id_marca_articulo').val($('#id_marca').val());
                $('#id_modelo_articulo').val($('#id_modelo').val());
                $('#id_marca_articulo').selectpicker("refresh");
                $('#id_modelo_articulo').selectpicker("refresh");
                $("#modalDatosNuevo").modal('show');
            });
            $(".id_unidad_medida").on("change", function() {
                if($(this).val() == 4) {
                    $(".form-group-cantUnid").removeClass("d-none");
                    $(".form-group-cantUnid input").val(1);
                } else {
                    $(".form-group-cantUnid").addClass("d-none");
                    $(".form-group-cantUnid input").val(0);
                }
            });
            $('#id_marca_articulo').on('change',function(){
                $("#id_modelo_articulo").val("");
                $("#id_modelo_articulo").children('option').not(".vacio").hide();
                $("#id_modelo_articulo").find(".marca_"+$('#id_marca_articulo').val()).show();
                if($(this).val() != "universal") {
                    $('#id_modelo_articulo').attr('disabled', false);
                    $('.anio_i').attr('disabled', false);
                    $('.anio_f').attr('disabled', false);
                } else {
                    $('#id_modelo_articulo').attr('disabled', true);
                    $('.anio_i').attr('disabled', true);
                    $('.anio_f').attr('disabled', true);
                }
                $(".selectpicker").selectpicker("refresh");
            });
            $('.anio_i').on('change',function() {
                if($('.anio').val() >= $(this).val()) {
                    $('#frm_datos_nuevo :submit').removeClass('anio_i_invalid');
                    $(this).removeClass('is-invalid');
                    if(!$('#frm_datos_nuevo :submit').hasClass('anio_f_invalid')) {
                        $('#frm_datos_nuevo :submit').attr('disabled', false).text('Guardar');
                    } else {
                        $('#frm_datos_nuevo :submit').text('Año fin inválido');
                    }
                } else {
                    $(this).addClass('is-invalid');
                    $('#frm_datos_nuevo :submit').attr('disabled', true).text('Año inicio inválido').addClass('anio_i_invalid');
                }
            });
            $('.anio_f').on('change',function() {
                if($('.anio').val() <= $(this).val()) {
                    $('#frm_datos_nuevo :submit').removeClass('anio_f_invalid');
                    $(this).removeClass('is-invalid');
                    if(!$('#frm_datos_nuevo :submit').hasClass('anio_i_invalid')) {
                        $('#frm_datos_nuevo :submit').attr('disabled', false).text('Guardar');
                    } else {
                        $('#frm_datos_nuevo :submit').attr('disabled', true).text('Año inicio inválido');
                    }
                } else {
                    $(this).addClass('is-invalid');
                    $('#frm_datos_nuevo :submit').attr('disabled', true).text('Año fin inválido').addClass('anio_f_invalid');
                }
            });
            $('.precio_costo').on('change blur',function(){
                let precio_costo = currencyToNumber($(this).val());
                if(precio_costo != "") {
                    let margen = currencyToNumber($('.margen').val());
                    //si hay un margen -> calcule el precio_establecido
                    //sino
                    //si hay precio_establecido -> calcule el margen

                    if (margen != "") {
                        let precio_establecido_actual = currencyToNumber($('.precio_establecido').val());
                        let precio_establecido = precio_costo + margen;
                        if (precio_establecido != precio_establecido_actual)
                            $('.precio_establecido').val(formatCurrency(precio_establecido)).addClass("calculado");

                    } else if ($('.precio_establecido').val() != "") {
                        let precio_establecido = currencyToNumber($('.precio_establecido').val());
                        margen = precio_establecido - precio_costo;
                        $('.margen').val(formatCurrency(margen)).addClass("calculado");
                    }
                    setTimeout(function(){ $(".calculado").removeClass("calculado"); }, 1000);
                }
            });
            $('.margen').on('change blur',function(){
                let margen = currencyToNumber($(this).val());
                if(margen != "") {
                    let precio_costo = currencyToNumber($('.precio_costo').val());

                    if (precio_costo != "") {
                        let precio_establecido_actual = currencyToNumber($('.precio_establecido').val());
                        let precio_establecido = precio_costo + margen;
                        if (precio_establecido != precio_establecido_actual)
                            $('.precio_establecido').val(formatCurrency(precio_establecido)).addClass("calculado");

                    } else if ($('.precio_establecido').val() != "") {
                        $('.precio_establecido').val("").addClass("calculado");
                    }
                    setTimeout(function () {$(".calculado").removeClass("calculado");}, 700);
                }
            });
            $('.precio_establecido').on('change blur',function(){
                let precio_establecido = currencyToNumber($(this).val());
                if(precio_establecido != "") {
                    let precio_costo = currencyToNumber($('.precio_costo').val());
                    if (precio_costo != "") {
                        let margen = precio_establecido - precio_costo;
                        $('.margen').val(formatCurrency(margen)).addClass("calculado");

                    } else if ($('.margen').val() != "") {
                        $('.margen').val("").addClass("calculado");
                    }
                    setTimeout(function () {$(".calculado").removeClass("calculado");}, 700);
                }
            });
            $('#modalDatosNuevo').on('hidden.bs.modal', function() {
                $('#frm_datos_nuevo').trigger("reset");
                $('#frm_datos_nuevo').find('.is-valid').removeClass("is-valid");
                $('#frm_datos_nuevo').find('.is-invalid').removeClass("is-invalid");
                $('#frm_datos_nuevo').find('.form-group-cantUnid').addClass("d-none");
                $('#frm_datos_nuevo').find('.form-group-cantUnid input').val(0);
                $('#frm_datos_nuevo').find('.selectpicker').selectpicker("refresh");
                if($('.select_id_combo').last().length > 1) {
                    $('.select_id_combo').last().change();
                }
            });
            $(document).on('submit','#frm_datos_nuevo',function(e){
                e.preventDefault();
                $('#frm_datos_nuevo :submit').attr('disabled', true);
                $('#frm_datos_nuevo :submit').addClass('spinner spinner-white spinner-left');
                $('button').attr('disabled', true);
                $.each($('#frm_datos_nuevo#frm_datos_nuevo').find('[data-type="currency"]'), function () {
                    monto = currencyToNumber($(this).val())
                    $(this).val(monto);
                });
                $('#id_marca_articulo').attr('disabled', false);
                $('#id_modelo_articulo').attr('disabled', false);
                data = $(this).serialize();
                $('#id_marca_articulo').attr('disabled', true);
                $('#id_modelo_articulo').attr('disabled', true);
                $.each($('#frm_datos_nuevo#frm_datos_nuevo').find('[data-type="currency"]'), function () {
                    monto = formatCurrency($(this).val())
                    $(this).val(monto);
                });
                $.ajax({
                    "url": this.action,
                    "method": "post",
                    "data": data,
                    "dataType": "json",
                    // "data":  new FormData(this),
                    // "processData": false,
                    // "contentType": false,
                })
                    .done(function (response) {
                        if (response.id_parte > 0 || response.id_combo > 0) {
                            iziToast.success({
                                title: 'Datos guardados',
                                position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            });

                            if($('#frm_datos_nuevo').hasClass('articulo')) {
                                //actualizar los select
                                $.each($('.select_id_parte'), function () {
                                    let valor_actual = $(this).val();
                                    let cantidad_unidad = (response.cantidad_unidad > 0)?(": "+response.cantidad_unidad):"";
                                    let descripcion = (response.descripcion) ? (" - "+response.descripcion) : ("");
                                    let option = '<option value="'+response.id_parte+'" data-subtext="'+response.unidad.nombre_unidad+cantidad_unidad+'" data-precio="'+response.precio_establecido+'">\
                                                          '+response.nombre + descripcion + ' - ' + response.num_parte + '\
                                                  </option>';
                                    if($(this).find('[data-categ="'+response.id_articulo_categoria+'"]').length > 0) {
                                        $(this).find('[data-categ="'+response.id_articulo_categoria+'"]').append(option);
                                    } else {
                                        $(this).append('<optgroup label="'+response.id_articulo_categoria+'">'+option+'</optgroup>');
                                    }
                                    $(this).parents('.form-group-selectpicker')
                                        .find('.bootstrap-select').remove().end()
                                        .append($(this)).end();
                                    $(this).selectpicker();
                                    $(this).selectpicker('refresh');
                                    $(this).val(valor_actual);
                                });
                                //agregar la linea
                                $('.btnAgregarArt').click();
                                $('.select_id_parte').last().val(response.id_parte);
                                $('.select_id_parte').last().selectpicker("refresh");
                                $('.select_id_parte').last().change();
                                $("#modalDatosNuevo").modal('hide');
                            } else
                            if($('#frm_datos_nuevo').hasClass('comboNuevo')) {
                                cargarPartesCompatibles();
                                $('#agregar_parte').val(response.id_combo);

                                let action = "{{ route('combo.editar', ['combo' => ':combo']) }}".replace(':combo', response.id_combo);
                                $('#frm_datos_nuevo').attr("action", action).removeClass('comboNuevo').addClass('comboPartes');
                                $('.div_partes').removeClass('d-none');

                                //actualizar los select
                                $.each($('.select_id_combo'), function () {
                                    let valor_actual = $(this).val();
                                    let descripcion = (e.descripcion) ? (" - "+e.descripcion) : ("");
                                    let option = '<option value="'+response.id_combo+'" data-precio="'+response.precio_establecido+'">\
                                                          '+response.nombre + descripcion + ' - ' + response.num_parte+'\
                                                  </option>';
                                    if($(this).find('[data-categ="'+response.id_articulo_categoria+'"]').length > 0) {
                                        $(this).find('[data-categ="'+response.id_articulo_categoria+'"]').append(option);
                                    } else {
                                        $(this).append('<optgroup label="'+response.id_articulo_categoria+'">'+option+'</optgroup>');
                                    }
                                    $(this).parents('.form-group-selectpicker')
                                        .find('.bootstrap-select').remove().end()
                                        .append($(this)).end();
                                    $(this).selectpicker();
                                    $(this).selectpicker('refresh');
                                    $(this).val(valor_actual);
                                });

                                //agregar la linea
                                //   $('.btnAgregarCombo').click();
                                $('.select_id_combo').last().val(response.id_combo);
                                $('.select_id_combo').last().selectpicker("refresh");
                                $('.select_id_combo').last().change();
                            } else
                            if($('#frm_datos_nuevo').hasClass('comboPartes')) {
                                $("#modalDatosNuevo").modal('hide');
                            }
                        }else{
                            iziToast.error({
                                title: 'Nada que guardar',
                                position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            });
                        }
                    })
                    .fail(function (error) {
                        $("#modalDatosNuevo").modal('hide');
                        Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,});
                    })
                    .always(function () {
                        $('button').attr('disabled', false);
                        $('#frm_datos_nuevo :submit').attr('disabled', false);
                        $('#frm_datos_nuevo :submit').removeClass('spinner spinner-white spinner-left');
                    });
            });

            function cargarPartesCompatibles() {
                $.ajax({
                    url: "{{route("parte.getListadoModeloAnios")}}",
                    dataType: "json",
                    method: "get",
                    data: {
                        id_modelo: $("#id_modelo").val(),
                        anio_i: $(".anio_i").val(),
                        anio_f: $(".anio_f").val(),
                    }
                })
                    .done(function (response) {
                        $("select.partes_para_combo optgroup").remove();
                        opciones = "";
                        $.each(response.data, function (id_cat,cat) {
                            opciones += '<optgroup label="'+cat[0].categoria.categoria+'">';
                            $.each(cat, function (i,e) {
                                cantidad_unidad = (e.cantidad_unidad > 0)?(": "+e.cantidad_unidad):"";
                                descripcion = (e.descripcion) ? (" - "+e.descripcion) : ("");
                                opciones += '<option value="'+e.id_parte+'" data-subtext="'+e.unidad.nombre_unidad+cantidad_unidad+'" data-precio="'+e.precio_establecido+'">\
                                                     '+e.nombre + descripcion + ' - ' + e.num_parte +'\
                                             </option>'
                            });
                            opciones += '</optgroup>';
                        });
                        $("select.partes_para_combo").append(opciones);
                        $(".selectpicker").selectpicker("refresh");
                    })
                    .fail(function (error) {
                        Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,});
                    })
                    .always(function () {
                        $('button').attr('disabled', false);
                        $('form :submit').attr('disabled', false);
                        $('#btnContinuar').removeClass('spinner spinner-white spinner-left');
                    });
            }

            $('#agregar_parte').on('click', function () {
                $('form :submit').attr('disabled', true);
                $('#agregar_parte').addClass('spinner spinner-white spinner-left');
                $('button').attr('disabled', true);
                let id_parte = $("select.partes_para_combo").val();
                let check = $('.check_parte[data-parte='+id_parte+']');

                if(check.length == 0) {
                    let url = '{{route('combo.agregar_parte', ['combo' => ':combo', 'parte' => ':parte'])}}';
                    url = url.replace(':combo', $('#agregar_parte').val()).replace(':parte', id_parte);
                    $.ajax({
                        "url": url,
                        "method": "get",
                        "dataType": "json",
                    })
                        .done(function (response) {
                            if (response > 0) {
                                iziToast.success({
                                    title: 'Artículo guardado',
                                    position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                                });

                                let articulo = '<label class="checkbox checkbox-lg">\
                                                    <input type="checkbox" class="check_parte" data-parte='+id_parte+' value="'+response+'" checked/>\
                                                    <span class="border border-primary"></span>' + $("select.partes_para_combo option:selected").text().trim() +
                                    '</label>';
                                $('.lista_articulos').append(articulo);
                                $("select.id_parte").val('');
                                $(".id_parte").selectpicker("refresh");
                            } else {
                                iziToast.error({
                                    title: 'Nada que guardar',
                                    position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                                });
                            }
                        })
                        .fail(function (error) {
                            Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,})
                        })
                        .always(function () {
                            $('button').attr('disabled', false);
                            $('form :submit').attr('disabled', false);
                            $('#agregar_parte').removeClass('spinner spinner-white spinner-left');
                        });
                } else {
                    if(check.is(':checked')) {
                        iziToast.warning({title: 'El artículo ya está incluído en el combo', position: 'bottomRight'});
                    } else {
                        check.prop('checked', true).change();
                    }
                    $("select.id_parte").val('');
                    $(".id_parte").selectpicker("refresh");
                    $('button').attr('disabled', false);
                    $('form :submit').attr('disabled', false);
                    $('#agregar_parte').removeClass('spinner spinner-white spinner-left');
                }
            });

            $(document).on('change', '.check_parte', function () {
                let check = $(this);
                check.parent().find('span').addClass('spinner spinner-primary');
                let id_parte = $(this).val();
                let title_msj;
                let url;
                if(check.is(':checked')) {
                    url = '{{route('combo.reactivar_parte', ['id' => ':id'])}}';
                    url = url.replace(':id', check.val());
                    title_msj = 'Artículo agregado nuevamente';
                } else {
                    url = '{{route('combo.eliminar_parte', ['combo_parte' => ':combo_parte'])}}';
                    url = url.replace(':combo_parte', check.val());
                    title_msj = 'Artículo eliminado';
                }

                $('form :submit').attr('disabled', true);
                $('button').attr('disabled', true);
                $.ajax({
                    "url": url,
                    "method": "get",
                    "dataType": "json",
                })
                    .done(function (response) {
                        if (response > 0) {
                            iziToast.success({
                                title: title_msj,
                                position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            });
                        } else {
                            iziToast.error({
                                title: 'Nada que guardar',
                                position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            });
                            check.prop('checked', !check.is(':checked'));
                        }
                    })
                    .fail(function (error) {
                        Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,})
                        check.prop('checked', !check.is(':checked'));
                    })
                    .always(function () {
                        $('button').attr('disabled', false);
                        $('form :submit').attr('disabled', false);
                        check.parent().find('span').removeClass('spinner spinner-primary');
                    });
            });
            /*  FIN: Nuevo articulo/combo */

            $(document).on('dblclick', '.articulo_local', function () {
                let url= "{{route("articulo.getListadoLocales")}}";
                $(this).empty();
                $(this).append('<option value="">-</option>')
                $.ajax({
                    url: url,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        $.each(response.data, function(index, option) {
                            $(this).append('<option value="'+option.id_articulo+'" data-precio="'+option.precio_venta+'" >'+option.nombre+'</option>')
                        }.bind(this));
                        // $(this).selectpicker('refresh');
                    }.bind(this)
                });

            });

            $(document).on('change', '.tipoCambio', function () {
                totales();
            });

            $(document).on('click', '.btnBuscarParte', function () {
                $("#modalBuscarParte").modal("show");
            });

            $(document).on('keyup', '#queryParte', function (e) {
                if (e.which == 13) {
                    let query=$.trim($("#queryParte").val());

                    let url = '{{ route("partes.buscador", ['query' => ':query']) }}';
                    url = url.replace(':query', query);

                    if(query!=""){
                        $.ajax({
                            "url": url,
                            "method": "get",
                            "dataType": "json",
                        })
                            .done(function (response) {
                                $("#tblBuscarPartes tbody").html("");
                                $.each(response, function(k, v) {
                                    let modelo = v.modelo.modelo || 'sin modelo';
                                    let anio_i = v.anio_i || 'NI';
                                    let anio_f = v.anio_f || 'NI';
                                    $("#tblBuscarPartes tbody").append('<tr>' +
                                        '<td>'+v.nombre+'</td>' +
                                        '<td>'+v.categoria.categoria+'</td>' +
                                        '<td>'+modelo+'</td>' +
                                        '<td>'+anio_i+'</td>' +
                                        '<td>'+anio_f+'</td>' +
                                        '<td>'+v.num_parte+'</td>' +
                                        '<td>'+v.unidad.nombre_unidad+'</td>' +
                                        '<td>'+v.cantidad_unidad+'</td>' +
                                        '<td>'+v.precio_establecido+'</td>' +
                                        '<td><button class="btn btn-sm btn-primary btnAgregarParte" data-id="'+v.id_parte+'" data-monto="'+v.precio_establecido+'" data-nombre="'+v.nombre+'"> <i class="fas fa-plus-square"></i></button></td>' +
                                        '</tr>');
                                });
                            })
                            .fail(function (error) {
                                Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,})
                            })
                            .always(function () {

                            });
                    }
                }
            });

            $(document).on('click', '.btnAgregarParte', function (e) {
                contador = contadorDetalles++;
                limpia = "linea-art-limpia";
                tablaActual = ".tblDetalles";
                tipo_detalle = "detalles";
                name_campo = "id_parte";
                requerimiento = articuloRequerido;

                let precio=$(this).data("monto");
                let id=$(this).data("id");
                let nombre=$(this).data("nombre");

                clon =$("."+limpia).clone("true");
                clon.removeClass("linea-limpia d-none "+limpia);
                clon.appendTo(tablaActual);
                clon.find(".input").val("");
                clon.find(".monto").val("");
                clon.find(".cantidad").val("1");
                clon.find(".porcentaje_descuento").val(descuentoGlobal);
                clon.find(".monto_descuento").val(0);
                clon.find(".precio").val(precio);
                clon.find(".id_parte").val(id);
                clon.find(".nombre").val(nombre);
                clon.find(".total").val(precio);


                clon.find(".is-invalid").removeClass('is-invalid');
                $.each(clon.find(".input"), function () {
                    let array = $(this).data("nombre").match(/.{1,9}/g);
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contador);
                    $(this).attr("name", array.join(''));
                    if($(this).hasClass('required'))
                        $(this).attr("required", true);
                    $(this).removeAttr("data-nombre");
                });
                validador.addField(tipo_detalle+'['+contador+']['+name_campo+']', requerimiento)
                    .addField(tipo_detalle+'['+contador+'][cantidad]', cantidadRequerida)
                    .addField(tipo_detalle+'['+contador+'][precio]', precioRequerido);
                calcularLinea(clon)
                totales();
            });

            $(document).on('click', '.btnBuscarCombo', function () {
                $("#modalBuscarCombo").modal("show");
            });
            $(document).on('keyup', '#queryCombo', function (e) {
                if (e.which == 13) {
                    let query=$.trim($("#queryCombo").val());

                    let url = '{{ route("combos.buscador", ['query' => ':query']) }}';
                    url = url.replace(':query', query);

                    if(query!=""){
                        $.ajax({
                            "url": url,
                            "method": "get",
                            "dataType": "json",
                        })
                            .done(function (response) {
                                $("#tblBuscarCombo tbody").html("");
                                $.each(response, function(k, v) {
                                    let modelo = v.modelo.modelo || 'sin modelo';
                                    let anio_i = v.anio_i || 'NI';
                                    let anio_f = v.anio_f || 'NI';

                                    $("#tblBuscarCombo tbody").append('<tr>' +
                                        '<td>'+v.nombre+'</td>' +
                                        '<td>'+v.categoria.categoria+'</td>' +
                                        '<td>'+modelo+'</td>' +
                                        '<td>'+anio_i+'</td>' +
                                        '<td>'+anio_f+'</td>' +
                                        '<td>'+v.num_parte+'</td>' +
                                        '<td>'+v.precio_establecido+'</td>' +
                                        '<td><button class="btn btn-sm btn-primary btnAgregarCombo" data-id="'+v.id_combo+'" data-monto="'+v.precio_establecido+'" data-nombre="combos['+contadorCombos+'][id_combo]" data-nombre="'+v.nombre+'"> <i class="fas fa-plus-square"></i></button></td>' +
                                        '</tr>');
                                    contadorCombos++;
                                });
                            })
                            .fail(function (error) {
                                Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,})
                            })
                            .always(function () {

                            });
                    }
                }
            });

            $(document).on('click', '.btnAgregarCombo', function (e) {
                contador = contadorCombos++;
                limpia = "linea-combo-limpia";
                tablaActual = ".tblCombos";
                tipo_detalle = "combos";
                name_campo = "id_combo";

                let precio=$(this).data("monto");
                let id=$(this).data("id");
                let nombre=$(this).data("nombre");

                clon =$("."+limpia).clone("true");
                clon.removeClass("linea-limpia d-none "+limpia);
                clon.appendTo(tablaActual);
                clon.find(".input").val("");
                clon.find(".monto").val("");
                clon.find(".cantidad").val("1");
                clon.find(".porcentaje_descuento").val(descuentoGlobal);
                clon.find(".monto_descuento").val(0);
                clon.find(".precio").val(precio);
                clon.find(".id_combo").val(id);
                clon.find(".nombre").val(nombre);
                clon.find(".total").val(precio);


                clon.find(".is-invalid").removeClass('is-invalid');
                $.each(clon.find(".input"), function () {
                    let array = $(this).data("nombre").match(/.{1,7}/g);
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contador);
                    $(this).attr("name", array.join(''));
                    if($(this).hasClass('required'))
                        $(this).attr("required", true);
                    $(this).removeAttr("data-nombre");
                });
                validador.addField(tipo_detalle+'['+contador+']['+name_campo+']')
                    .addField(tipo_detalle+'['+contador+'][cantidad]', cantidadRequerida)
                    .addField(tipo_detalle+'['+contador+'][precio]', precioRequerido);
                calcularLinea(clon);
                totales();

                cargarPartesCombo(clon,id,contador)
            });

            $(document).on('change', '#descuentoGlobal', function (e) {
                recalcular();
            });

        });

        function calcularLinea(linea){
            let cantidad= linea.find(".cantidad").val();
            let precio= currencyToNumber(linea.find(".precio").val());
            let total = cantidad*precio;
            let monto_descuento = 0;
            let porcentaje_descuento= linea.find(".porcentaje_descuento").val();
            if(porcentaje_descuento > 0) {
                monto_descuento = (total*porcentaje_descuento)/100;
                total= total-monto_descuento;
                if (linea.find(".precio").data("type") === "currencyColon") {
                    linea.find(".monto_descuento").val(formatCurrency(monto_descuento, '₡ '));
                }else{
                    linea.find(".monto_descuento").val(formatCurrency(monto_descuento));
                }
            } else {
                linea.find(".porcentaje_descuento").val(0);
                if (linea.find(".precio").data("type") === "currencyColon") {
                    linea.find(".monto_descuento").val(formatCurrency(0, '₡ '));
                }else{
                    linea.find(".monto_descuento").val(formatCurrency(0));
                }
            }
            if (linea.find(".precio").data("type") === "currencyColon") {
                linea.find(".total").val(formatCurrency(total,'₡ '));
            }else{
                linea.find(".total").val(formatCurrency(total));
            }
        }

        function totales(){
            let compra_dolar=parseFloat($("#compra_dolar").val());
            let venta_dolar=parseFloat($("#venta_dolar").val());
            let sub_total_detalles= 0;
            let sub_total_combos = 0;
            let sub_total_articulos=0
            let sub_total_servicios=0


            let sub_total_dolares=0
            let iva_dolares=0;
            let total_dolares=0;
            let pago_dolares=0;


            let sub_total_colones=0
            let iva_colones=0;
            let total_colones=0;
            let pago_colones=0;

            $(".table tbody .linea").each(function(i, item) {
                let valor=$(this).find(".totalDolares").val();
                if(valor){
                    sub_total_dolares += currencyToNumber(valor);
                }
            });

            $(".table tbody .linea").each(function(i, item) {
                let valor=$(this).find(".totalColones").val();
                if(valor){
                    sub_total_colones += currencyToNumber(valor);
                }
            });
            $(".table tbody .linea-art").each(function(i, item) {
                sub_total_detalles += currencyToNumber($(this).find(".total").val());
            });
            $(".table tbody .linea-combo").each(function(i, item) {
                sub_total_combos += currencyToNumber($(this).find(".total").val());
            });
            $(".table tbody .linea-artLoc").each(function(i, item) {
                sub_total_articulos += currencyToNumber($(this).find(".total").val(),'₡ ');
            });
            $(".table tbody .linea-serv").each(function(i, item) {
                sub_total_servicios += currencyToNumber($(this).find(".total").val(),'₡ ');
            });

            iva_dolares = (sub_total_dolares*13)/100;
            iva_colones = (sub_total_colones*13)/100;
            total_dolares = sub_total_dolares+iva_dolares;
            total_colones = sub_total_colones+iva_colones;



            $(".lblSubtotal_detalles").text(formatCurrency(sub_total_detalles));
            $(".sub_total_detalles").val(sub_total_detalles);
            $(".lblSubtotal_combos").text(formatCurrency(sub_total_combos));
            $(".sub_total_combos").val(sub_total_combos);
            $(".lblSubtotal_articulos").text(formatCurrency(sub_total_articulos, '₡ '));
            $(".sub_total_articulos").val(sub_total_articulos);
            $(".lblSubtotal_servicios").text(formatCurrency(sub_total_servicios, '₡ '));
            $(".sub_total_servicios").val(sub_total_servicios);

            $(".lblSubtotalDolares").text(formatCurrency(sub_total_dolares));
            $(".sub_total_dolares").val(sub_total_dolares);
            $(".lblIVADolares").text(formatCurrency(iva_dolares));
            $(".iva_dolares").val(iva_dolares);
            $(".lblTotalCotizacionDolares").text(formatCurrency(total_dolares));
            $(".total_cotizacion_dolares").val(total_dolares);

            $(".lblSubtotalColones").text(formatCurrency(sub_total_colones, '₡ '));
            $(".sub_total_colones").val(sub_total_colones);
            $(".lblIVAColones").text(formatCurrency(iva_colones, '₡ '));
            $(".iva_colones").val(iva_colones);
            $(".lblTotalCotizacionColones").text(formatCurrency(total_colones, '₡ '));
            $(".total_cotizacion_colones").val(total_colones);

            pago_dolares=(total_dolares+(total_colones/compra_dolar)).toFixed(2);
            pago_colones=(total_colones+(total_dolares*venta_dolar)).toFixed(2);

            $(".lblTotalPagoDolares").text(formatCurrency(pago_dolares));
            $(".lblTotalPagoColones").text(pago_colones);

        }

        function recalcular(){
            let descuento=parseInt($("#descuentoGlobal").val());
            if(descuento<=100){
                descuentoGlobal=descuento;
                $(".table tbody .linea").each(function(i, item) {
                    $(this).find(".porcentaje_descuento").val(descuento);
                    calcularLinea($(this));
                });
                totales();

            }
        }

        function limpiarFormulario() {
            $("#frmCotizacion").trigger("reset");
            $(".is-valid").removeClass("is-valid");
            $(".is-invalid").removeClass("is-invalid");
            $(".divDetalles").addClass("d-none");
            $(".no_change").attr("disabled", false);
            $("#btnContinuar").removeClass("d-none");
            $(".placa").attr("disabled", true);
            $('#id_vehiculo').attr("disabled", true);
            $(".selectpicker").selectpicker("refresh");

            $.each($(".linea"), function (i, e) {
                $(e).find(".btnBorrar").click();
            });
            // validador.removeField('detalles[0][id_parte]').removeField('detalles[0][cantidad]').removeField('detalles[0][precio]');
        }

        function cargarPrecio(select) {
            opcion = select.find("option:selected");
            linea = select.parents(".linea");
            if(opcion.val() == ""){
                linea.find(".precio").val(0);
            } else {
                if (linea.find(".precio").data("type") === "currencyColon") {
                    linea.find(".precio").val(formatCurrency(opcion.data("precio"), '₡ ')).change();
                } else {
                    linea.find(".precio").val(formatCurrency(opcion.data("precio"))).change();
                }
            }
        }

        function cargarPartesCombo(linea, id_combo,contador){
            $.ajax({
                url: "{{route("combo.getListadoPartes", ['combo' => ':combo'])}}".replace(':combo', id_combo),
                dataType: "json",
                method: "get",
            })
                .done(function (response) {
                    //Inicio: cargarPartes
                    linea.find('.combos_partes').html('');
                    opciones = "";

                    $.each(response, function (i,e) {


                        descripcion = (e.descripcion) ? (" - "+e.descripcion) : ("");
                        let parte = '<div class="d-flex">\
                                            <label class="checkbox checkbox-lg mb-3 ml-7 mr-2">\
                                                <input type="checkbox" name="combos['+contador+'][id_parte][]" value="'+e.id_parte+'" checked/>\
                                                <span class="border border-primary mr-2"></span>' + e.nombre + descripcion + ' ' + e.num_parte +
                            '</label>\
                            <div class="form-group">\
                                <div class="input-group input-group-sm">\
                                    <div class="input-group-prepend"><span class="input-group-text">Cantidad</span>\
                                    </div>\
                                    <input type="number" class="form-control form-control-sm" name="combos['+contador+']['+e.id_parte+'][cantidad]" value="'+e.cantidad_unidad+'">\
                                                </div>\
                                            </div>\
                                        </div>';
                        linea.find('.combos_partes').append(parte);
                        contadorPartesCombos++;
                    });
                    //Fin: cargarPartes
                })
                .fail(function (error) {
                    Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,});
                })
        }







    </script>
@endsection