@extends("layout.base")

@section("styles")
    <title>ARB | OT Crear</title>
    <style>
        .foldtl {
            position: relative;
            -webkit-box-shadow: -5px 7px 5px rgba(0,153,153,0.3);
            -moz-box-shadow: -5px 7px 5px rgba(0,153,153,0.3);
            box-shadow: -5px 7px 5px rgba(0,153,153,0.3);

        }

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

        .foldtl:after {
            /* background-color: #F64E60; */
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            border-top: 69px solid rgba(0,153,153,0.3);
            border-left: 69px solid transparent;
        }
        textarea{
            resize: none;
        }
        .table tfoot td{
            border-collapse:collapse;
            border:none;
        }
        .text-oc{
            color: rgb(0,153,153);
        }
        .btnOT {
            background-color: rgb(0,153,153);
            color: #ffffff;
        }
        .btnOT:hover {
            background-color: rgb(0,153,190) !important;
            color: #ffffff;
        }
        .bgOT {
            background-color: rgb(0,153,190) !important;
        }
        .borderLightOT {
            border-color: rgba(0,153,190, 0.3) !important;
        }
        .long-popup {
            height: 60vh !important;
            width: 30vw !important;
        }
        .long-content {
            height: 100% !important;
            width: 100% !important;
        }
        .long-container .long-html-container {
            max-height: 60vh;
            overflow-x: hidden !important;
        }
        .long-html-container {
            height: 100% !important;
            width: 100% !important;
        }
    </style>
@endsection

@section("header")
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Ordenes de trabajo</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</span>
@endsection

@section("content")
    <div class="card card-custom ">
        <div class="card" style="border: hidden">
            <div class="card-body foldtl ">
                <form action="{{route("ot.agregar")}}" method="post" id="frmOT" 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 rgb(0,153,153) 5px">ORDEN DE TRABAJO</h3>
                            <button class="btn btnOT btn-sm mt-3 btnReiniciar" type="button"><i class="fas fa-redo-alt mr-2 text-white"></i>Reiniciar</button>
                        </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-oc">2296-1775</a>
                                // <a href="tel:50640300711" target="_blank" class="text-oc">4030-0711</a>
                                <span class="ml-10">WhatsApp: <a href="https://wa.me/50683833333" target="_blank" class="text-oc">8383-3333</a></span>
                            </p>
                            <p>
                                Instagram: <a href="https://www.instagram.com/arbcostarica/" class="text-oc" target="_blank">@arbcostarica</a>
                                <span class="ml-10">Correo: <a href="mailto:ventas@arbcostarica.com" class="text-oc" target="_blank">ventas@arbcostarica.com</a></span>
                            </p>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="row px-0">
                                <div class="col-md-5 form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text">Cot</span>
                                        </div>
                                        <input type="number" class="form-control no_change" name="id_cotizacion" id="id_cotizacion">
                                    </div>
                                </div>
                                <div class="col-md-7 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>
                        </div>
                        <div class="col-md-4 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Cliente</span>
                                </div>
                                <select class="form-control selectpicker no_change" name="id_cliente" id="id_cliente" data-live-search="true" data-live-search-normalize="true" required>
                                    <option value="">Selecione cliente</option>
                                    @foreach($clientes as $item)
                                        <option value="{{$item->id_cliente}}">{{$item->nombre}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Vehiculo</span>
                                </div>
                                <select class="form-control selectpicker no_change" name="id_vehiculo" id="id_vehiculo" data-live-search="true" data-live-search-normalize="true">
                                    <option value="" class="vacio">Seleccione</option>
                                    @foreach($vehiculos as $item)
                                        <option value="{{$item->id_vehiculo}}" class="cliente_{{$item->id_cliente}}" data-placa="{{$item->vehiculo->placa}}" data-marca="{{$item->vehiculo->modelo->marca->id_marca}}" data-modelo="{{$item->vehiculo->modelo->id_modelo}}" data-anio="{{$item->vehiculo->anio}}">
                                            Placa: {{$item->vehiculo->placa." - ".$item->vehiculo->modelo->marca->marca." ".$item->vehiculo->modelo->modelo." ".$item->vehiculo->modelo->serie}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="row px-0">
                                <div class="col-md-7 form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text">Placa</span></div>
                                        <input class="form-control placa no_change" name="placa" disabled/>
                                    </div>
                                </div>
                                <div class="col-md-5 form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text">Año</span></div>
                                        <input type="number" class="form-control anio no_change" name="anio" required/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Marca</span></div>
                                <select class="form-control selectpicker no_change" name="id_marca" id="id_marca" data-live-search="true" data-live-search-normalize="true" required>
                                    <option value="">Selecione marca</option>
                                    @foreach($marcas as $item)
                                        <option value="{{$item->id_marca}}">{{$item->marca}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Modelo</span></div>
                                <select class="form-control selectpicker no_change" name="id_modelo" id="id_modelo" 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>
                    </div>
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Medio pago</span>
                                </div>
                                <select class="form-control" name="id_medio_pago" id="id_medio_pago" required>
                                    <option value="" class="vacio">Seleccione</option>
                                    @foreach($mediosPago as $item)
                                        <option value="{{$item->id_medio_pago}}">{{$item->medio_pago}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">Forma pago</span>
                                </div>
                                <select class="form-control" name="id_forma_pago" id="id_forma_pago" required>
                                    <option value="" class="vacio">Seleccione</option>
                                    @foreach($formasPago as $item)
                                        <option value="{{$item->id_forma_pago}}">{{$item->forma_pago}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="w-100 d-flex justify-content-around my-3">
                            <button class="btn btnOT" id="btnContinuar" type="button">Continuar</button>
                        </div>
                    </div>
                    <hr class="bgOT">
                    <div class="d-none divDetalles">
                        <h5 class="font-weight-bolder mx-1"><i class="fas fa-chevron-right text-danger mr-1"></i>Trabajos a realizar</h5>
                        <!-- 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</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">
                                        <select class="form-control id_servicio form-control-lg selectpicker" data-nombre="servicios[0][id_servicio]" data-live-search="true" data-live-search-normalize="true">
                                            <option value="">Seleccione</option>
                                            @foreach($servicios as $item)
                                                <option value="{{$item->id_servicio}}"  data-precio="{{$item->precio}}">{{$item->servicio}}</option>
                                            @endforeach
                                        </select>
                                    </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="currency" 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="currency" 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="currency" class="input form-control form-control-sm total monto calcular" 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">

                        <h5 class="font-weight-bolder mx-1"><i class="fas fa-chevron-right text-danger mr-1"></i>Insumos</h5>
                        <!-- Inicio: Listado de artículos ARB -->
                        <div class="row mx-1 border borderLightOT rounded p-5 gutter-b">
                            <h5 class="font-weight-bolder text-center"><i class="fas fa-record-vinyl text-danger mr-1"></i>Listado de artículos ARB</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="tblArticulos">
                                <tr role="row" class="linea linea-limpia linea-art linea-art-limpia d-none">
                                    <td class="form-group form-group-selectpicker">
                                        <select class="form-control id_parte form-control-lg selectpicker" data-nombre="partes[0][id_parte]" data-live-search="true" data-live-search-normalize="true">
                                            <option value="">Seleccione</option>
                                        </select>
                                    </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="partes[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" data-nombre="partes[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="partes[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="partes[0][monto_descuento]" placeholder="$ 0" readonly>
                                    </td>
                                    <td width="200px">
                                        <input type="text" data-type="currency" class="input form-control form-control-sm total monto calcular" data-nombre="partes[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 btnAgregarArt" 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_partes" class="sub_total_partes" value="0">
                                        <label class="lblSubtotal_partes">$ 0</label>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- Fin: Listado de artículos ARB -->
                        <!-- Inicio: Listado de combos ARB -->
                        <div class="row mx-1 border borderLightOT rounded p-5 gutter-b">
                            <h5 class="font-weight-bolder text-center"><i class="fas fa-layer-group text-danger mr-1"></i>Listado de combos ARB</h5>
                            <table class="table table-hover table-striped table-sm" style="width: 100%;" role="grid">
                                <thead>
                                <tr role="row">
                                    <th>Combo</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="tblCombos">
                                <tr role="row" class="linea linea-limpia linea-combo linea-combo-limpia d-none">
                                    <td class="form-group">
                                        <div class="form-group-selectpicker">
                                            <select class="form-control id_combo form-control-lg selectpicker" data-nombre="combos[0][id_combo]" data-live-search="true" data-live-search-normalize="true">
                                                <option value="">Seleccione</option>
                                            </select>
                                        </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" 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" 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 total monto calcular" 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 class="pt-5">
                                        <button class="btn btn-outline-primary btn-sm btnAgregar btnAgregarCombo" 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_combos" class="sub_total_combos" value="0">
                                        <label class="lblSubtotal_combos">$ 0</label>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- Fin: Listado de combos ARB -->
                        <!-- 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</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 form-control-lg selectpicker" data-nombre="articulos[0][id_articulo]" data-live-search="true" data-live-search-normalize="true">
                                            <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="articulos[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" data-nombre="articulos[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="articulos[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="articulos[0][monto_descuento]" placeholder="$ 0" readonly>
                                    </td>
                                    <td width="200px">
                                        <input type="text" data-type="currency" class="input form-control form-control-sm total monto calcular" data-nombre="articulos[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>
                                    </td>
                                    <td colspan="4" class="text-right pt-5">Sub Total</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: Otros insumos -->
                        <div class="row mx-1 border borderLightOT rounded p-5 gutter-b">
                            <h5 class="font-weight-bolder text-center"><i class="fas fa-asterisk text-danger mr-1"></i>Otros insumos</h5>
                            <table class="table table-hover table-striped table-sm" style="width: 100%;" role="grid">
                                <thead>
                                <tr role="row">
                                    <th>Descripción</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="tblOtros">
                                <tr role="row" class="linea linea-limpia linea-otro linea-otro-limpia d-none">
                                    </td>
                                    <td class="form-group">
                                        <input type="text" class="input form-control form-control-sm descripcion" data-nombre="insumos[0][descripcion]">
                                    </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="insumos[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" data-nombre="insumos[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="insumos[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="insumos[0][monto_descuento]" placeholder="$ 0" readonly>
                                    </td>
                                    <td width="200px">
                                        <input type="text" data-type="currency" class="input form-control form-control-sm total monto calcular" data-nombre="insumos[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 btnAgregarOtro" 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_insumos" class="sub_total_insumos" value="0">
                                        <label class="lblSubtotal_insumos">$ 0</label>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- Fin: Otros insumos -->


                        <!-- 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 colspan="3" class="text-right">Sub Total</td>
                                    <td class="text-right" width="200px">
                                        <input type="hidden" name="sub_total" class="sub_total" value="0">
                                        <label class="lblSubtotal">$ 0</label>
                                    </td>
                                    <td width="50px"></td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="text-right">Iva</td>
                                    <td class="text-right">
                                        <input type="hidden" name="iva" class="iva" value="0">
                                        <label class="lblIVA">$ 0</label>
                                    </td>
                                    <td width="50px"></td>
                                </tr>
                                <tr class="form-group">
                                    <td colspan="3" class="text-right">Total</td>
                                    <td class="text-right" width="200px">
                                        <input type="hidden" name="total_ot" class="total_ot" value="0">
                                        <label class="lblTotalOT">$ 0</label>
                                    </td>
                                    <td width="50px"></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 waves-effect waves-light" id="btnVisPrev" type="button">Vista Previa</button>
                            <!--<button class="btn btn-success waves-effect waves-light" id="btnEmitirFactura" type="submit">Emitir Factura</button>-->
                        </div>
                    </div>
                </form>
            </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="frmOT" 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">Orden de trabajo 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 target="_blank" class="btn btn-lg btn-danger text-center w-25 mr-5 d-flex align-items-center btnPDF"><span><i class="fas fa-print fa-2x p-0 text-center"></i><br>Imprimir orden de trabajo</span></a>
                        <a target="_blank" class="btn btn-lg btn-danger text-center w-25 mr-5 d-flex align-items-center btnConsulta"><span><i class="fas fa-eye fa-2x p-0 text-center"></i><br>Ver la orden de trabajo</span></a>
                        <form id="frmCorreo" class="rounded border border-danger p-10 ml-10 w-50">
                            <input type="hidden" name="id_orden_trabajo" class="id_orden_trabajo" 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>
@endsection

@section("scripts")
    <script>
        let contadorServicios = 1;
        let contadorArticulos = 1;
        let contadorCombos = 1;
        let contadorPartesCombos = 1;
        let contadorArticulosLoc = 1;
        let contadorOtros = 1;
        let detallesCotizacion = [];
        let combosCotizacion = [];
        $(document).ready(function() {
            $("#id_vehiculo").children('option').not(".vacio").hide();
            $("#id_modelo").children('option').not(".vacio").hide();

            $('#id_cliente').on('change',function(){
                $("#id_vehiculo").val("").change();
                $("#id_vehiculo").children('option').not(".vacio").hide();
                $("#id_vehiculo").find(".cliente_"+$('#id_cliente').val()).show();
                //$("#id_vehiculo").eq(0).prop("selected", "selected");
                $("#id_vehiculo").selectpicker("refresh");
                if($(this).val() === "")
                    $(".placa").val("").attr("disabled", true).blur();
            });

            $('#id_marca').on('change',function(){
                $("#id_modelo").val("");
                $("#id_modelo").children('option').not(".vacio").hide();
                $("#id_modelo").find(".marca_"+$('#id_marca').val()).show();
                //$("#id_modelo").eq(0).prop("selected", "selected");
                $("#id_modelo").selectpicker("refresh");
            });

            $('#id_vehiculo').on('change',function(){
                opcion = $('#id_vehiculo').find("option:selected");
                if(opcion.val() == "") {
                    $(".placa").val("").attr("disabled", false).blur();
                    $('#id_marca').val("").attr("disabled", false).blur();
                    $('#id_modelo').val("").attr("disabled", false).blur();
                    $(".anio").val("").attr("disabled", false).blur();
                } else {
                    $(".placa").val(opcion.data("placa")).attr("disabled", true).blur();
                    $('#id_marca').val(opcion.data("marca")).change().attr("disabled", true).blur();
                    $('#id_modelo').val(opcion.data("modelo")).attr("disabled", true).blur();
                    $(".anio").val(opcion.data("anio")).attr("disabled", true).blur();
                }
                $(".selectpicker").selectpicker("refresh");
            });

            $("#id_cotizacion").on("change", function () {
                if($(this).val != "")
                    cargarCot();
            });

            function cargarCot() {
                $("#btnContinuar").attr("disabled", false).html('Continuar');
                $.ajax({
                    url: "{{route("cotizacion.select", ["cotizacion" => ":cotizacion"])}}".replace(":cotizacion", $("#id_cotizacion").val()),
                    dataType: "json",
                    method: "get",
                })
                    .done(function (response) {
                        $(".placa").val("");
                        if(response.id_cliente) {
                            $("#id_cliente").val(response.id_cliente).attr("disabled", true).change();
                            $("#id_vehiculo").val(response.id_vehiculo).attr("disabled", true).change();
                        } else {
                            //cargo el nombre del cliente y la lista de clientes para que seleccione
                            //aa
                            pregunta = '<label>Seleccione el cliente que corresponda</label><br><label class="text-danger textAlert d-none">Debe seleccionar un cliente</label>\
                                        <div class="input-group px-2">\
                                            <select class="form-control selectpicker id_cliente" id="cliente" data-live-search="true" data-live-search-normalize="true" required>\
                                                <option value="">Selecione cliente</option>\
                                                @foreach($clientes as $item)
                                <option value="{{$item->id_cliente}}">{{$item->nombre}}</option>\
                                                @endforeach
                                </select>\
                                <div class="input-group-prepend">\
                                <button class="selectCliente btn btn-primary rounded-right">Seleccionar</button>\
                                </div>\
                            <div/>';

                            Swal.fire({
                                icon: 'question',
                                title: 'Nombre cliente cotizacion: '+response.nombre_cliente,
                                html: pregunta,
                                customClass: {
                                    container: 'long-container',
                                    popup: 'long-popup',
                                    content: 'long-content',
                                    htmlContainer: 'long-html-container',
                                },
                                allowEscapeKey: false,
                                allowOutsideClick: false,
                                showConfirmButton: false,
                                showCancelButton: true,
                            })
                                .then(function(result) {
                                    if (result.dismiss === "cancel") {
                                        limpiarFormulario();
                                        Swal.close();
                                    }
                                });
                        }

                        $.each(response, function (i,e) {
                            if(i != "fecha")
                                $('[name="'+i+'"]').val(e);
                        });

                        $.each($(".linea-art").not(".linea-limpia"), function (i, e) {
                            $(e).find(".btnBorrar").click();
                        });
                        $.each($(".linea-combo").not(".linea-limpia"), function (i, e) {
                            $(e).find(".btnBorrar").click();
                        });
                        detallesCotizacion = response.detalles;
                        combosCotizacion = response.combos;
                        $("#id_marca").attr("disabled", true);
                        $("#id_modelo").attr("disabled", true);
                        $(".anio").attr("disabled", true);
                        $(".selectpicker").selectpicker("refresh");
                    })
                    .fail(function (error) {
                        iziToast.error({
                            title: 'No se encontró la cotización Nº '+$("#id_cotizacion").val(),
                            position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                        });
                        detallesCotizacion = [];
                        combosCotizacion = [];
                        $("#id_cotizacion").val("");
                        $("#id_cliente").val("").attr("disabled", false).change();
                        $("#id_vehiculo").val("").attr("disabled", false).change();
                        $("#id_marca").attr("disabled", false);
                        $("#id_modelo").attr("disabled", false);
                        $(".anio").attr("disabled", false);
                    });
            }
            $(document).on('click','.selectCliente',function() {
                if($("#cliente").val() > 0 ) {
                    $("#cliente").removeClass("is-invalid");
                    $("#id_cliente").val($("#cliente").val());
                    $("#id_vehiculo").attr("disabled", true);
                    $(".placa").attr("disabled", false);
                    Swal.close();
                } else {
                    $(".textAlert").removeClass("d-none");
                    $("#cliente").addClass("is-invalid");
                }
                $(".selectpicker").selectpicker("refresh");
            });

            $(document).on('change','.placa',function() {
                $(".span_placa").addClass("spinner spinner-danger spinner-left");
                input = $(this);
                url = "{{route("vehiculo.selectPlaca", ["placa" => ":placa"])}}".replace(":placa", input.val());
                $.ajax({
                    "url": url,
                    "method": "get",
                    "dataType": "json",
                })
                    .done(function (response) {
                        if(response.placa) {
                            if(response.cliente_actual.length > 0) {
                                cliente_actual = response.cliente_actual[0];
                                errores = [];
                                if($("#id_cliente").val() != "" && cliente_actual.id_cliente != $("#id_cliente").val())
                                    errores.push('El vehículo actualmente pertenece a '+response.cliente_actual[0].nombre)

                                if($(".anio").val() != "" && response.id_marca != "" && response.id_modelo != "" && (response.anio != $(".anio").val() || response.modelo.id_marca != $("#id_marca").val() || response.id_modelo != $("#id_modelo").val()))
                                    errores.push('Los datos del vehículo no coinciden con los almacenados')
                                if(errores.length > 0 ) {
                                    input.addClass("is-warning");
                                    mensaje = '<ol>';
                                    $.each(errores, function (i,e) {
                                        mensaje += '<li>'+e+'</li>';
                                    });
                                    mensaje += '</ol>'
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Revise los siguientes errores',
                                        html: mensaje,
                                        showConfirmButton: true,});
                                    $("#btnContinuar").attr("disabled", true).html('Revise los datos del vehículo');
                                } else {
                                    $("#id_marca").val(response.modelo.id_marca).change();
                                    $.each(response, function (i,e) {
                                        $('[name="'+i+'"]').val(e);
                                    });
                                    $("#btnContinuar").attr("disabled", false).html('Continuar');
                                }
                            } else {
                                input.removeClass("is-warning");
                                $("#btnContinuar").attr("disabled", false).html('Continuar');
                            }
                            $(".selectpicker").selectpicker("refresh");
                        } else {
                            input.removeClass("is-warning");
                            $("#btnContinuar").attr("disabled", false).html('Continuar');
                        }
                    })
                    .always(function () {
                        $(".span_placa").removeClass("spinner spinner-danger spinner-left");
                    });
            });

            $(document).on("change", ".id_servicio", function () { cargarPrecio($(this)); });
            $(document).on("change", ".id_parte", function () { cargarPrecio($(this)); });
            $(document).on("change", ".id_articulo", function () { cargarPrecio($(this)); });
            $(document).on("change", "select.id_combo", function () {
                cargarPartesCombo($(this));
                cargarPrecio($(this));
            });

            function cargarPartesCombo(select) {
                console.log(select);
                $('button').attr('disabled', true);
                $('form :submit').attr('disabled', true);
                select.parent().find('.filter-option').addClass('spinner spinner-info spinner-right');
                linea = select.parents(".linea");
                //Ir a traer los artículos que coinciden aqui
                $.ajax({
                    url: "{{route("combo.getListadoPartes", ['combo' => ':combo'])}}".replace(':combo', select.val()),
                    dataType: "json",
                    method: "get",
                    async: false,
                })
                    .done(function (response) {
                        //Inicio: cargarPartes
                        linea.find('.combos_partes').html('');
                        let name = select.attr('name');
                        console.log('name',select.attr('name'));
                        name = name.substring(0, name.length-10);

                        console.log('response', response);

                        $.each(response, function (i,e) {
                            let parte = '<label class="checkbox checkbox-lg mb-3 ml-7">\
                                            <input type="checkbox" class="check_parte" name="'+name+'[id_parte][]" value="'+e.id_parte+'" checked/>\
                                            <span class="border border-primary"></span>' + e.nombre + descripcion + ' ' + e.num_parte +
                                '</label>';
                            console.log('linea', linea);
                            console.log("linea.find('.combos_partes')", linea.find('.combos_partes'));
                            linea.find('.combos_partes').append(parte);
                            contadorPartesCombos++;
                        });
                        //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');
                    });
            }

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

            $('.btnAgregar').on('click',function(){
                //agregarLinea
                agregarLinea($(this), true);
            });

            function agregarLinea(button, addValidador) {
                contador = 0;
                limpia = "";
                tablaActual = "";
                if(button.hasClass("btnAgregarServicio")) {
                    contador = contadorServicios++;
                    limpia = "linea-serv-limpia";
                    tablaActual = ".tblServicios";
                    tipo_detalle = "servicios";
                    name_campo = "id_servicio";
                    requerimiento = servicioRequerido;
                }
                else if(button.hasClass("btnAgregarArt")) {
                    contador = contadorArticulos++;
                    limpia = "linea-art-limpia";
                    tablaActual = ".tblArticulos";
                    tipo_detalle = "partes";
                    name_campo = "id_parte";
                    requerimiento = articuloRequerido;
                }
                else if(button.hasClass("btnAgregarCombo")) {
                    contador = contadorCombos++;
                    limpia = "linea-combo-limpia";
                    tablaActual = ".tblCombos";
                    tipo_detalle = "combos";
                    name_campo = "id_combo";
                    requerimiento = comboRequerido;
                }
                else if(button.hasClass("btnAgregarArtLoc")) {
                    contador = contadorArticulosLoc++;
                    limpia = "linea-artLoc-limpia";
                    tablaActual = ".tblArticulosLoc";
                    tipo_detalle = "articulos";
                    name_campo = "id_articulo";
                    requerimiento = articuloRequerido;
                }
                else if(button.hasClass("btnAgregarOtro")) {
                    contador = contadorOtros++;
                    limpia = "linea-otro-limpia";
                    tablaActual = ".tblOtros";
                    tipo_detalle = "insumos";
                    name_campo = "descripcion";
                    requerimiento = descripcionRequerida;
                }
                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("select").eq(0).prop("selected", "selected");
                clon.find(".is-invalid").removeClass('is-invalid');
                $.each(clon.find(".input"), function () {
                    array = [];
                    switch (tipo_detalle) {
                        case "servicios":
                        case "articulos": array = $(this).data("nombre").match(/.{1,10}/g); break;
                        case "partes":
                        case "combos": array = $(this).data("nombre").match(/.{1,7}/g); break;
                        case "insumos": array = $(this).data("nombre").match(/.{1,8}/g); break;
                    }
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contador);
                    $(this).attr("name", array.join('')).attr("required", true);
                    $(this).removeAttr("data-nombre");
                });
                $.each(clon.find("select"), function () {
                    array = [];
                    switch (tipo_detalle) {
                        case "servicios":
                        case "articulos": array = $(this).data("nombre").match(/.{1,10}/g); break;
                        case "partes":
                        case "combos": array = $(this).data("nombre").match(/.{1,7}/g); break;
                        case "insumos": array = $(this).data("nombre").match(/.{1,8}/g); break;
                    }
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contador);
                    $(this).attr("name", array.join('')).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();
                });
                if(addValidador)
                    validador.addField(tipo_detalle+'['+contador+']['+name_campo+']', requerimiento)
                        .addField(tipo_detalle+'['+contador+'][cantidad]', cantidadRequerida)
                        .addField(tipo_detalle+'['+contador+'][precio]', precioRequerido);
            }

            $(document).on('click','.btnBorrar',function() {
                linea = $(this).parents(".linea");
                if(!linea.hasClass("linea-limpia")) {
                    name_campo = "";
                    if(linea.hasClass("linea-serv")) {
                        name_campo = linea.find("select.id_servicio").attr("name");
                    } else
                    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");
                    } else
                    if(linea.hasClass("linea-otro")) {
                        name_campo = linea.find(".descripcion").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-serv")) {
                        linea.find(".id_servicio").val("");
                        linea.find(".id_servicio").selectpicker("refresh");
                    } else
                    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");
                    } else
                    if(linea.hasClass("linea-artLoc")) {
                        linea.find(".id_articulo").val("");
                        linea.find(".id_articulo").selectpicker("refresh");
                    } else
                    if(linea.hasClass("linea-otro")) {
                        linea.find(".descripcion").val("");
                    }
                }
                totales();
            });

            $(".btnReiniciar").on('click', function () {
                limpiarFormulario();
            });

            function limpiarFormulario() {
                $("#frmOT").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");
                $(".selectpicker").selectpicker("refresh");

                $.each($(".linea"), function (i, e) {
                    $(e).find(".btnBorrar").click();
                });
            }

            $('#btnContinuar').on('click', function () {
                validador.validate().then(function (status) {
                    if (status == 'Valid') {
                        Swal.fire({
                            title: "Asegúrese de revisar todos los datos ingresados",
                            text: "Los datos de cotización, cliente y vehículo no podrán ser actualizados",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonText: "Continuar",
                            cancelButtonText: "Regresar",
                            reverseButtons: true,
                            allowEscapeKey: false,
                            allowOutsideClick: false
                        }).then(function(result) {
                            if (result.value) {
                                //Ir a traer los artículos que coinciden aqui
                                $('button').attr('disabled', true);
                                $('form :submit').attr('disabled', true);
                                $('#btnContinuar').addClass('spinner spinner-white spinner-left');
                                //option = $("#id_vehiculo option:selected");
                                $.ajax({
                                    url: "{{route("compatibilidad.getListadoModelo")}}",
                                    dataType: "json",
                                    method: "get",
                                    data: {id_modelo: $("#id_modelo").val(), anio: $(".anio").val()}
                                })
                                    .done(function (response) {
                                        $("select.id_parte optgroup").remove();
                                        opciones_parte = "";
                                        $.each(response.partes, function (id_cat,cat) {
                                            opciones_parte += '<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_parte += '<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_parte += '</optgroup>';
                                        });
                                        $("select.id_parte").append(opciones_parte);

                                        $("select.id_combo optgroup").remove();
                                        opciones_combo = "";
                                        $.each(response.combos, function (id_cat,cat) {
                                            opciones_combo += '<optgroup label="'+cat[0].categoria.categoria+'">';
                                            $.each(cat, function (i,e) {
                                                descripcion = (e.descripcion) ? (" - "+e.descripcion) : ("");
                                                opciones_combo += '<option value="'+e.id_combo+'" data-precio="'+e.precio_establecido+'">\
                                                                    '+e.nombre+descripcion+' - '+e.num_parte+'\
                                                            </option>'
                                            });
                                            opciones_combo += '</optgroup>';
                                        });
                                        $("select.id_combo").append(opciones_combo);

                                        $(".no_change").attr("disabled", true);

                                        $.each(detallesCotizacion, function (i_d,e_d) {
                                            agregarLinea($(".btnAgregarArt"), true);
                                            linea = $(".linea-art").last();
                                            $.each(e_d, function (k_d,v_d) {
                                                if (linea.find("." + k_d).data("type") == "currency") {1
                                                    v_d = formatCurrency(v_d);
                                                }
                                                linea.find("."+k_d).val(v_d);
                                            });
                                        });

                                        console.log('combosCotizacion', combosCotizacion);
                                        $.each(combosCotizacion, function (i_c,e_c) {
                                            agregarLinea($(".btnAgregarCombo"), true);
                                            linea = $(".linea-combo").last();
                                            $.each(e_c, function (k_c,v_c) {
                                                if (linea.find("." + k_c).data("type") == "currency") {
                                                    v_c = formatCurrency(v_c);
                                                }
                                                linea.find("."+k_c).val(v_c);
                                            });
                                            cargarPartesCombo(linea.find('select.id_combo'));
                                            linea.find('.check_parte').prop('checked', false);
                                            $.each(e_c.cotizacion_combo_partes, function (k_c_p, combo_parte) {
                                                linea.find('.check_parte[value='+combo_parte.id_parte+']').prop('checked', true);
                                            });
                                        });
                                        totales();
                                        $(".selectpicker").selectpicker("refresh");
                                        $(".divDetalles").removeClass("d-none");
                                        $("#btnContinuar").addClass("d-none");
                                    })
                                    .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');
                                    });
                            }
                        });
                    } else {
                        Swal.fire({text: "Debe completar todos los campos requeridos",icon: "error",confirmButtonText: "OK",}).then();
                    }
                });
            });

            $(document).on('keyup change','.calcular, .precio',function(){
                linea = $(this).parents(".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;
                    linea.find(".monto_descuento").val(formatCurrency(monto_descuento));
                } else {
                    linea.find(".porcentaje_descuento").val(0);
                    linea.find(".monto_descuento").val(formatCurrency(0));
                }
                linea.find(".total").val(formatCurrency(total));
                totales();
            });

            $('#btnVisPrev').on('click',function() {
                validador.validate().then(function (status) {
                    if (status == 'Valid') {
                        if($(".linea").length > 5) {
                            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);
                            });
                            $('.no_change').attr('disabled', false);
                            data = $("#frmOT").serialize();
                            $('.no_change').attr('disabled', true);
                            $.each($('[data-type="currency"]'), function () {
                                monto = formatCurrency($(this).val())
                                $(this).val(monto);
                            });
                            $.ajax({
                                url: "{{route("ot.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 haber al menos una línea de detalle",icon: "error",confirmButtonText: "OK",}).then();
                        }
                    } else {
                        Swal.fire({text: "Debe completar todos los campos requeridos",icon: "error",confirmButtonText: "OK",}).then();
                    }
                });
            });

            $("#frmOT").on("submit", function (e) {
                e.preventDefault();
                Swal.fire({
                    title: "Guardando orden de trabajo",
                    text: "Esto podría tardar un poco",
                    allowOutsideClick: false,
                    didOpen: function() {
                        Swal.showLoading()
                    }
                });
                $('button').attr('disabled', true);
                $('form :submit').attr('disabled', true);
                $('form :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 = $("#frmOT").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_orden_trabajo").val(response.ordenTrabajo.id_orden_trabajo);
                            $("#modalVisPrev").modal("hide");
                            swal.close();
                            let href_pdf = '{{route("ot.pdf", ['ordenTrabajo' => ':ordenTrabajo'])}}';
                            href_pdf = href_pdf.replace(':ordenTrabajo', response.ordenTrabajo.id_orden_trabajo);
                            $(".btnPDF").attr("href", href_pdf);

                            let href_consulta = '{{route("ot.consulta", ['id_orden_trabajo' => ':id_orden_trabajo'])}}';
                            href_consulta = href_consulta.replace(':id_orden_trabajo', response.ordenTrabajo.id_orden_trabajo);
                            $(".btnConsulta").attr("href", href_consulta);
                            $("#modalCorreo").modal("show");
                            limpiarFormulario();
                        } else {
                            Swal.fire({icon: 'error', title: 'Error al guardar la orden de trabajo', showConfirmButton: true,});
                        }
                    })
                    .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);
                        $('form :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('ot.enviar', ['ordenTrabajo' => ':ordenTrabajo', 'correo' => ':correo']) }}";
                url = url.replace(':ordenTrabajo', $("#modalCorreo").find(".id_orden_trabajo").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() {
                limpiarFormulario();
            });

            const articuloRequerido = {
                validators: {
                    notEmpty: {
                        message: 'Artículo es requerido'
                    }
                }
            };
            const comboRequerido = {
                validators: {
                    notEmpty: {
                        message: 'Artículo es requerido'
                    }
                }
            };
            const servicioRequerido = {
                validators: {
                    notEmpty: {
                        message: 'Servicio es requerido'
                    }
                }
            };
            const descripcionRequerida = {
                validators: {
                    notEmpty: {
                        message: 'Descripción es requerida'
                    }
                }
            };
            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('frmOT');
            validador = FormValidation.formValidation(
                _formEl,
                {
                    fields: {
                        fecha: {
                            validators: {
                                notEmpty: {
                                    message: 'Fecha es requerida'
                                },
                            }
                        },
                        id_cliente: {
                            validators: {
                                notEmpty: {
                                    message: 'Cliente es requerido'
                                },
                            }
                        },
                        // placa: {
                        //     validators: {
                        //         notEmpty: {
                        //             message: 'Placa es requerida'
                        //         },
                        //     }
                        // },
                        id_marca: {
                            validators: {
                                notEmpty: {
                                    message: 'Marca es requerida'
                                },
                            }
                        },
                        id_modelo: {
                            validators: {
                                notEmpty: {
                                    message: 'Modelo es requerido'
                                },
                            }
                        },
                        anio: {
                            validators: {
                                notEmpty: {
                                    message: 'Año es requerido'
                                },
                            }
                        },
                        id_medio_pago: {
                            validators: {
                                notEmpty: {
                                    message: 'Medio de pago es requerido'
                                },
                            }
                        },
                        id_forma_pago: {
                            validators: {
                                notEmpty: {
                                    message: 'Forma de pago es requerida'
                                },
                            }
                        },
                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger({event: 'blur'}),
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                    }
                }
            );
        });

        function totales(){
            let sub_total=0
            let sub_total_servicios=0
            let sub_total_partes=0
            let sub_total_combos=0
            let sub_total_articulos=0
            let sub_total_insumos=0
            let iva=0;
            let total=0;
            $(".table tbody .linea").each(function(i, item) {
                sub_total += currencyToNumber($(this).find(".total").val());
            });
            $(".table tbody .linea-serv").each(function(i, item) {
                sub_total_servicios += currencyToNumber($(this).find(".total").val());
            });
            $(".table tbody .linea-art").each(function(i, item) {
                sub_total_partes += 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-otro").each(function(i, item) {
                sub_total_insumos += currencyToNumber($(this).find(".total").val());
            });

            iva = (sub_total*13)/100;
            total = sub_total+iva;

            $(".lblSubtotal").text(formatCurrency(sub_total));
            $(".sub_total").val(sub_total);
            $(".lblSubtotal_servicios").text(formatCurrency(sub_total_servicios));
            $(".sub_total_servicios").val(sub_total_servicios);
            $(".lblSubtotal_partes").text(formatCurrency(sub_total_partes));
            $(".sub_total_partes").val(sub_total_partes);
            $(".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_insumos").text(formatCurrency(sub_total_insumos));
            $(".sub_total_insumos").val(sub_total_insumos);
            $(".lblIVA").text(formatCurrency(iva));
            $(".iva").val(iva);
            $(".lblTotalOT").text(formatCurrency(total));
            $(".total_ot").val(total);
        }
    </script>
@endsection