@extends("layout.base")

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

        }

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

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

@section("header")
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Ordenes de compra</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("oc.agregar")}}" method="post" id="frmOrdenCompra" 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(255,168,0) 5px">ORDEN DE COMPRA ARB</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-warning">2296-1775</a>
                                // <a href="tel:50640300711" target="_blank" class="text-warning">4030-0711</a>
                                <span class="ml-10">WhatsApp: <a href="https://wa.me/50683833333" target="_blank" class="text-warning">8383-3333</a></span>
                            </p>
                            <p>
                                Instagram: <a href="https://www.instagram.com/arbcostarica/" class="text-warning" target="_blank">@arbcostarica</a>
                                <span class="ml-10">Correo: <a href="mailto:ventas@arbcostarica.com" class="text-warning" target="_blank">ventas@arbcostarica.com</a></span>
                            </p>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <input type="hidden" name="id_proveedor" value="1">
                    <!--
                        <div class="col-md-6">
                            <div class="row p-0">
                                <div class="col-md-4 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-8 form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text">Proveedor</span>
                                        </div>
                                        <select class="form-control selectpicker" name="id_proveedor" id="id_proveedor" data-live-search="true" data-live-search-normalize="true" required>
                                            <option value="">Selecione proveedor</option>
                                            foreach($proveedores as $item)
                                               <option data-icon="{($item->id_proveedor!=1)?"":"fas fa-star text-danger"}}" value="{$item->id_proveedor}}">{$item->nombre}}</option>
                                            endforeach
                                        </select>
                                    </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">Fecha</span>
                                </div>
                                <input type="date" class="form-control" name="fecha" value="{{date("Y-m-d")}}">
                            </div>
                        </div>
                        <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>
                    <hr class="bg-danger">
                    <div class="row">
                        <table class="table table-hover table-striped table-sm table-align-middle" 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="250px">Total Línea</th>
                                <th width="50px"></th>
                            </tr>
                            </thead>
                            <tbody class="tblDetalles border border-danger">
                            <tr role="row" class="border border-danger linea linea-limpia linea-art linea-art-limpia d-none">
                                <td class="border-top border-danger form-group form-group-articulo form-group-selectpicker">
                                    <select class="form-control id_parte select_id_parte form-control-lg selectpicker" data-nombre="detalles[0][id_parte]" data-live-search="true" data-live-search-normalize="true">
                                        <option value="">Seleccione</option>
                                        @foreach($partes as $grupo)
                                            <optgroup data-categ="{{$grupo[0]->id_articulo_categoria}}" label="{{$grupo[0]->categoria->categoria}}">
                                                @foreach($grupo as $item)
                                                    @php($compatibilidad = (isset($item->modelo)) ? $item->modelo->marca->marca." ".$item->modelo->modelo." ".(isset($item->modelo->serie)?$item->modelo->serie:"") : 'Universal')
                                                    <option value="{{$item->id_parte}}" data-subtext="{{$item->unidad->nombre_unidad.(($item->cantidad_unidad>0)?(": ".$item->cantidad_unidad):"")}}" data-precio="{{$item->precio_costo}}">
                                                        {{$item->nombre.((!Empty($item->descripcion))?" - ".$item->descripcion:"")." - ".$item->num_parte." - ".$compatibilidad}}
                                                    </option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>
                                </td>
                                <td width="100px" class="border-top border-danger form-group">
                                    <input type="text" min="1" class="input form-control numero form-control-sm cantidad monto calcular" data-nombre="detalles[0][cantidad]" placeholder="Cantidad" value="1">
                                </td>
                                <td width="200px" class="border-top border-danger form-group">
                                    <input type="text" data-type="currency" class="input form-control form-control-sm precio monto calcular" data-nombre="detalles[0][precio]" placeholder="$ 0">
                                </td>
                                <td width="250px" class="border-top border-danger" style="padding-right: 50px;">
                                    <input type="text" data-type="currency" class="input form-control form-control-sm total monto calcular" data-nombre="detalles[0][total]" placeholder="$ 0" readonly>
                                </td>
                                <td width="50px"  class="border-top border-danger">
                                    <button type="button" value="1" class="btn btn-light-danger btn-sm btnBorrar"><i class="fa fa-times"></i></button>
                                </td>
                            </tr>
                            <tr role="row" class="border border-danger linea linea-limpia linea-cot linea-cot-limpia d-none border">
                                <td colspan="4" class="border-top border-danger p-0">
                                    <div class="d-flex linea_buscadores">
                                        <div class="col-md-6 p-2 form-group">
                                            <h4 class="mr-2 pt-2 titulo-cot">Búsqueda por cliente</h4>
                                            <select class="form-control form-control-sm select_id_cotizacion">
                                                <option value="">Seleccione</option>
                                                @foreach($cot_clientes as $cot_cliente)
                                                    <option value="{{$cot_cliente->id_cotizacion}}">{{$cot_cliente->nombre_cliente.' - Cot Nº: '.$cot_cliente->id_cotizacion}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3 offset-md-3 p-2 form-group">
                                            <h4 class="mr-2 pt-2 titulo-cot">Cotización Nº</h4>
                                            <input type="text" class="form-control numero form-control-sm input_id_cotizacion" min="1">
                                        </div>
                                    </div>
                                    <table class="table table-hover table-striped table-sm table-white" style="width: 100%;" role="grid">
                                        <tbody class="tblDetallesCot">
                                        <tr role="row" class="linea linea-limpia linea-art-cot linea-art-cot-limpia d-none">
                                            <td class="d-none">
                                                <input type="text" class="input id_cotizacion numero" data-nombre="detalles[0][id_cotizacion]">
                                            </td>
                                            <td class="d-none">
                                                <input type="text" class="input id_cotizacion_detalle numero" data-nombre="detalles[0][id_cotizacion_detalle]">
                                            </td>
                                            <td class="form-group form-group-articulo">
                                                <select class="form-control id_parte form-control-lg selectpicker" data-nombre="detalles[0][id_parte]" data-live-search="true" data-live-search-normalize="true">
                                                    <option value="">Seleccione</option>
                                                    @foreach($partes as $grupo)
                                                        <optgroup label="{{$grupo[0]->categoria->categoria}}">
                                                            @foreach($grupo as $item)
                                                                @php($compatibilidad = (isset($item->modelo)) ? $item->modelo->marca->marca." ".$item->modelo->modelo." ".(isset($item->modelo->serie)?$item->modelo->serie:"") : 'Universal')
                                                                <option value="{{$item->id_parte}}" data-subtext="{{$item->unidad->nombre_unidad.(($item->cantidad_unidad>0)?(": ".$item->cantidad_unidad):"")}}" data-precio="{{$item->precio_costo}}">
                                                                    {{$item->nombre.((!Empty($item->descripcion))?" - ".$item->descripcion:"")." - ".$item->num_parte." - ".$compatibilidad}}
                                                                </option>
                                                            @endforeach
                                                        </optgroup>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td width="100px" class="form-group">
                                                <input type="text" min="1" class="input form-control form-control-sm cantidad monto calcular numero" data-nombre="detalles[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="detalles[0][precio]" placeholder="$ 0">
                                            </td>
                                            <td width="200px">
                                                <input type="text" data-type="currency" class="input form-control form-control-sm total monto calcular" data-nombre="detalles[0][total]" placeholder="$ 0" readonly>
                                            </td>
                                            <td width="50px"  class="">
                                                <button type="button" value="1" class="btn btn-danger btn-sm btnBorrar"><i class="fa fa-times"></i></button>
                                            </td>
                                        </tr>
                                        <tr role="row" class="linea linea-limpia linea-combo-cot linea-combo-cot-limpia d-none">
                                            <td colspan="3" class="pl-5">
                                                <h6>Combo: <span class="span_combo"></span></h6>
                                                <table class="tblComboPartes w-100">
                                                    <tr role="row" class="linea linea-limpia linea-combo-parte-cot linea-combo-parte-cot-limpia d-none">
                                                        <td class="d-none">
                                                            <input type="text" class="input id_cotizacion numero" data-nombre="detalles[0][id_cotizacion]">
                                                        </td>
                                                        <td class="d-none">
                                                            <input type="text" class="input id_cotizacion_combo_parte numero" data-nombre="detalles[0][id_cotizacion_combo_parte]">
                                                        </td>
                                                        <td class="form-group form-group-articulo">
                                                            <select class="form-control id_parte form-control-lg selectpicker" data-nombre="detalles[0][id_parte]" data-live-search="true" data-live-search-normalize="true">
                                                                <option value="">Seleccione</option>
                                                                @foreach($partes as $grupo)
                                                                    <optgroup label="{{$grupo[0]->categoria->categoria}}">
                                                                        @foreach($grupo as $item)
                                                                            @php($compatibilidad = (isset($item->modelo)) ? $item->modelo->marca->marca." ".$item->modelo->modelo." ".(isset($item->modelo->serie)?$item->modelo->serie:"") : 'Universal')
                                                                            <option value="{{$item->id_parte}}" data-subtext="{{$item->unidad->nombre_unidad.(($item->cantidad_unidad>0)?(": ".$item->cantidad_unidad):"")}}" data-precio="{{$item->precio_costo}}">
                                                                                {{$item->nombre.((!Empty($item->descripcion))?" - ".$item->descripcion:"")." - ".$item->num_parte." - ".$compatibilidad}}
                                                                            </option>
                                                                        @endforeach
                                                                    </optgroup>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td width="100px" class="form-group">
                                                            <input type="text" min="1" class="input form-control form-control-sm cantidad monto calcular numero" data-nombre="detalles[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="detalles[0][precio]" placeholder="$ 0">
                                                        </td>
                                                        <td width="200px">
                                                            <input type="text" data-type="currency" class="input form-control form-control-sm total monto calcular" data-nombre="detalles[0][total]" placeholder="$ 0" readonly>
                                                        </td>
                                                        <td width="50px"  class="">
                                                            <button type="button" value="1" class="btn btn-danger btn-sm btnBorrar"><i class="fa fa-times"></i></button>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="50px"  class="">
                                                <button type="button" value="1" class="btn btn-danger btn-sm btnBorrar"><i class="fa fa-times"></i></button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td width="50px" class="border-top border-danger align-top">
                                    <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-info btn-sm btnAgregarCot" type="button">
                                        <i class="fas fa-inbox"></i>Agregar Cotización
                                    </button>
                                    <button class="btn btn-outline-primary btn-sm btnAgregar" type="button">
                                        <i class="fas fa-plus"></i>Agregar Línea
                                    </button>
                                    <button class="btn btn-outline-primary btn-sm btnAgregarNuevo" type="button">
                                        <i class="fas fa-record-vinyl"></i>Agregar Artículo Nuevo
                                    </button>
                                </td>
                                <td colspan="2" class="text-right pt-5">Total</td>
                                <td class="text-right pt-5">
                                    <input type="hidden" name="total_oc" class="total_oc" value="0">
                                    <input type="hidden" name="sub_total" class="total_oc" value="0">
                                    <label class="lblTotalOC">$ 0</label>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <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>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalDatosArticulo" 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>
                <form method="post" id="frm_datos_articulo">
                    <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">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" 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" 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>
                    </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">Guardar</button>
                    </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="frmOrdenCompra" 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 compra 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("oc.pdf", ['ordenCompra' => ':ordenCompra'])}}" 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 compra</span></a>
                        <a href="{{route("oc.excel", ['ordenCompra' => ':ordenCompra'])}}" target="_blank" class="btn btn-lg btn-danger text-center w-25 mr-5 d-flex align-items-center btnExcel"><span><i class="fas fa-file-excel fa-2x p-0 text-center"></i><br>Descargar excel para ARB</span></a>
                        <form id="frmCorreo" class="rounded border border-danger p-10 w-50">
                            <input type="hidden" name="id_orden_compra" class="id_orden_compra" 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 contadorDetalles = 0;
        let contadorCotizaciones = 0;
        $(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("");
                $("#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");
            });

            $('#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("").blur();
                    $('#id_marca').val("").blur();
                    $('#id_modelo').val("").blur();
                    $(".anio").val("").blur();
                } else {
                    $(".placa").val(opcion.data("placa")).blur();
                    $('#id_marca').val(opcion.data("marca")).change().blur();
                    $('#id_modelo').val(opcion.data("modelo")).blur();
                    $(".anio").val(opcion.data("anio")).blur();
                }
                $("#id_marca").selectpicker("refresh");
                $("#id_modelo").selectpicker("refresh");
            });

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

            $('.btnAgregar').on('click',function(){
                //agregarLinea
                contadorDetalles++;
                clon =$(".linea-art-limpia").clone("true");
                clon.removeClass("linea-limpia linea-art-limpia d-none");
                clon.appendTo(".tblDetalles");
                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 = $(this).data("nombre").match(/.{1,9}/g);
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contadorDetalles);
                    $(this).attr("name", array.join('')).attr("required", true);
                    $(this).removeAttr("data-nombre");
                });
                $.each(clon.find("select"), function () {
                    array = $(this).data("nombre").match(/.{1,9}/g);
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contadorDetalles);
                    $(this).attr("name", array.join('')).attr("required", true);
                    $(this).removeAttr("data-nombre");
                    clon.find(".form-group-articulo")
                        .find('.bootstrap-select').remove().end()
                        .append($(this)).end();
                    clon.find(".form-group-articulo").find("[name='"+array.join('')+"']").selectpicker();
                });
                validador.addField('detalles['+contadorDetalles+'][id_parte]', articuloRequerido)
                    .addField('detalles['+contadorDetalles+'][cantidad]', cantidadRequerida)
                    .addField('detalles['+contadorDetalles+'][precio]', precioRequerido);
            });

            $('.btnAgregarCot').on('click',function(){
                //agregarLinea
                contadorCotizaciones++;
                clon =$(".linea-cot-limpia").clone("true");
                clon.removeClass("linea-limpia linea-cot-limpia d-none");
                clon.appendTo(".tblDetalles");
                clon.find(".input").val("");
                clon.find(".input_id_cotizacion").attr("data-contador", contadorCotizaciones).attr("required", true).attr("name", "cotizacion"+contadorCotizaciones);
                clon.find(".tblDetallesCot").attr("id", "tblDetallesCot"+contadorCotizaciones+"");
                validador.addField("cotizacion"+contadorCotizaciones, cotizacionRequerida)
            });

            $(document).on('blur','.input_id_cotizacion',function() {
                cargarCotizacion($(this));
            });
            $(".input_id_cotizacion").on('keypress', function(e) {
                if (e.which == 13) {
                    $(this).blur();
                }
            });
            $(".select_id_cotizacion").on('change', function(e) {
                let input_id_cotizacion = $(this).parents('.linea_buscadores').find('.input_id_cotizacion');
                input_id_cotizacion.val($(this).val()).blur();
            });

            function cargarCotizacion(input) {
                lineaCot = input.parents(".linea-cot");
                lineaCot.find(".titulo-cot").addClass("spinner spinner-danger spinner-left pl-12");
                id_cotizacion = input.val();
                let url = "{{ route('cotizacionesDetalles.getListadoAbiertos', ['cotizacion' => ':cotizacion']) }}".replace(':cotizacion', id_cotizacion);

                //Borrar lineas de esa tabla en partricular
                $.each(lineaCot.find(".linea").not(".linea-limpia"), function () {
                    $(this).find(".btnBorrar").click();
                });

                $.ajax({
                    "url": url,
                    "method": "get",
                    "dataType": "json",
                })
                    .done(function (response) {
                        $.each(response.detalles_abiertos, function (i,e) {
                            clon = agregarLineaArtCot(input);
                            $.each(e, function (k,v) {
                                if(clon.find("."+k).data("type") != "currency") {
                                    clon.find("." + k).val(v).change();
                                }
                            });
                            clon.find(".id_cotizacion").val(id_cotizacion);
                            $(".id_parte").selectpicker("refresh");
                        });
                        $.each(response.combos_abiertos, function (i_c,cot_combo) {
                            clon = agregarLineaComboCot(input);
                            let descripcion = (cot_combo.combo.descripcion) ? " - " : cot_combo.combo.descripcion;
                            let serie = (cot_combo.combo.modelo.serie) ? cot_combo.combo.modelo.serie : "";
                            clon.find(".span_combo").html(cot_combo.cantidad + " " + cot_combo.combo.nombre + descripcion + " - " + cot_combo.combo.num_parte + " - " + cot_combo.combo.modelo.marca.marca
                                + " "  + cot_combo.combo.modelo.modelo + " " + serie);

                            let tblComboPartes = clon.find('.tblComboPartes');
                            $.each(cot_combo.cotizacion_combo_partes, function (i_c_p, combo_parte) {
                                clonP = agregarLineaComboParteCot(tblComboPartes);
                                clonP.find(".cantidad").val(cot_combo.cantidad)
                                $.each(combo_parte, function (k,v) {
                                    if(clonP.find("."+k).data("type") != "currency") {
                                        clonP.find("." + k).val(v).change();
                                    }

                                });
                                clonP.find(".id_cotizacion").val(id_cotizacion);
                            })
                            $(".id_combo").selectpicker("refresh");
                        });
                        totales();
                    })
                    .fail(function (error) {
                        if(error.responseJSON.message.includes("No query results for model"))
                            iziToast.error({
                                title: 'No se encontró la cotización',
                                message: "Nº "+id_cotizacion,
                                position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            });
                        else
                            Swal.fire({icon: 'error', title: 'Algo salio mal', showConfirmButton: true,})
                    })
                    .always(function () {
                        lineaCot.find(".titulo-cot").removeClass("spinner spinner-danger spinner-left pl-12");
                    });
            }

            function agregarLineaArtCot(input) {
                lineaCot = input.parents(".linea-cot");
                contador = input.data("contador");

                contadorDetalles++;
                clon =lineaCot.find(".linea-art-cot-limpia").clone("true");
                clon.removeClass("linea-limpia linea-art-cot-limpia d-none");
                clon.appendTo("#tblDetallesCot"+contador);
                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 = $(this).data("nombre").match(/.{1,9}/g);
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contadorDetalles);
                    $(this).attr("name", array.join('')).attr("required", true);
                    $(this).removeAttr("data-nombre");
                });
                $.each(clon.find("select"), function () {
                    array = $(this).data("nombre").match(/.{1,9}/g);
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contadorDetalles);
                    $(this).attr("name", array.join('')).attr("required", true);
                    $(this).removeAttr("data-nombre");
                    clon.find(".form-group-articulo")
                        .find('.bootstrap-select').remove().end()
                        .append($(this)).end();
                    clon.find(".form-group-articulo").find("[name='"+array.join('')+"']").selectpicker();
                });
                validador.addField('detalles['+contadorDetalles+'][id_parte]', articuloRequerido)
                    .addField('detalles['+contadorDetalles+'][cantidad]', cantidadRequerida)
                    .addField('detalles['+contadorDetalles+'][precio]', precioRequerido);
                return clon;
            }

            function agregarLineaComboCot(input) {
                lineaCot = input.parents(".linea-cot");
                contador = input.data("contador");

                contadorDetalles++;
                clon =lineaCot.find(".linea-combo-cot-limpia").clone("true");
                clon.removeClass("linea-limpia linea-combo-cot-limpia d-none");
                clon.appendTo("#tblDetallesCot"+contador);
                return clon;
            }

            function agregarLineaComboParteCot(tblComboPartes) {
                lineaComboParte = tblComboPartes.find(".linea-combo-parte-cot-limpia");

                contadorDetalles++;
                clon =lineaComboParte.clone("true");
                clon.removeClass("linea-limpia linea-combo-parte-cot-limpia d-none");
                clon.appendTo(tblComboPartes);
                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 = $(this).data("nombre").match(/.{1,9}/g);
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contadorDetalles);
                    $(this).attr("name", array.join('')).attr("required", true);
                    $(this).removeAttr("data-nombre");
                });
                $.each(clon.find("select"), function () {
                    array = $(this).data("nombre").match(/.{1,9}/g);
                    array[1] = array[1].substring(1);
                    array.splice(1, 0, contadorDetalles);
                    $(this).attr("name", array.join('')).attr("required", true);
                    $(this).removeAttr("data-nombre");
                    clon.find(".form-group-articulo")
                        .find('.bootstrap-select').remove().end()
                        .append($(this)).end();
                    clon.find(".form-group-articulo").find("[name='"+array.join('')+"']").selectpicker();
                });
                validador.addField('detalles['+contadorDetalles+'][id_parte]', articuloRequerido)
                    .addField('detalles['+contadorDetalles+'][cantidad]', cantidadRequerida)
                    .addField('detalles['+contadorDetalles+'][precio]', precioRequerido);
                return clon;
            }

            $(document).on('click','.btnBorrar',function() {
                linea = $(this).parents(".linea").first();
                if(!linea.hasClass("linea-limpia")) {
                    if(linea.hasClass("linea-art") || linea.hasClass("linea-art-cot") || linea.hasClass("linea-combo-parte-cot")) {
                        articulo = linea.find("select.id_parte").attr("name");
                        cantidad = linea.find(".cantidad").attr("name");
                        precio = linea.find(".precio").attr("name");
                        validador.removeField(articulo).removeField(cantidad).removeField(precio);

                    } else if(linea.hasClass("linea-combo-cot")) {
                        $.each(linea.find(".linea-combo-parte-cot").not(".linea-limpia"), function (i, lineaInterna) {
                            articulo = $(lineaInterna).find("select.id_parte").attr("name");
                            cantidad = $(lineaInterna).find(".cantidad").attr("name");
                            precio = $(lineaInterna).find(".precio").attr("name");
                            validador.removeField(articulo).removeField(cantidad).removeField(precio);
                            $(lineaInterna).remove();
                        });

                    } else {
                        $.each(linea.find(".linea-art-cot").not(".linea-limpia"), function (i, lineaInterna) {
                            articulo = $(lineaInterna).find("select.id_parte").attr("name");
                            cantidad = $(lineaInterna).find(".cantidad").attr("name");
                            precio = $(lineaInterna).find(".precio").attr("name");
                            validador.removeField(articulo).removeField(cantidad).removeField(precio);
                            $(lineaInterna).remove();
                        });
                        $.each(linea.find(".linea-combo-parte-cot").not(".linea-limpia"), function (i, lineaInterna) {
                            articulo = $(lineaInterna).find("select.id_parte").attr("name");
                            cantidad = $(lineaInterna).find(".cantidad").attr("name");
                            precio = $(lineaInterna).find(".precio").attr("name");
                            validador.removeField(articulo).removeField(cantidad).removeField(precio);
                            $(lineaInterna).remove();
                        });
                        $.each(linea.find(".linea-combo-cot").not(".linea-limpia"), function (i, lineaInterna) {
                            $(lineaInterna).remove();
                        });
                        validador.removeField(linea.find(".input_id_cotizacion").attr("name"));
                    }
                    linea.remove();
                    totales();
                }
            });

            function limpiarFormulario() {
                $("#frmOrdenCompra").trigger("reset");
                $(".selectpicker").selectpicker("refresh");
                $(".is-valid").removeClass("is-valid");
                $(".is-invalid").removeClass("is-invalid");

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

            $(document).on('keyup change','.calcular',function(){
                linea = $(this).parents(".linea").first();
                let cantidad= linea.find(".cantidad").val();
                let precio= currencyToNumber(linea.find(".precio").val());
                let total= cantidad*precio;
                linea.find(".total").val(formatCurrency(total));
                totales();
            });

            $('#btnVisPrev').on('click',function() {
                validador.validate().then(function (status) {
                    if (status == 'Valid') {
                        if($(".linea").length > 3) {
                            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);
                            });
                            data = $("#frmOrdenCompra").serialize();
                            $.each($('[data-type="currency"]'), function () {
                                monto = formatCurrency($(this).val())
                                $(this).val(monto);
                            });
                            $.ajax({
                                url: "{{route("oc.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();
                    }
                });
            });

            $("#frmOrdenCompra").on("submit", function (e) {
                e.preventDefault();
                Swal.fire({
                    title: "Guardando orden de compra",
                    text: "Esto podría tardar un poco",
                    allowOutsideClick: false,
                    didOpen: function() {
                        Swal.showLoading()
                    }
                });
                $('button').attr('disabled', true);
                $('#frmOrdenCompra :submit').attr('disabled', true);
                $('#frmOrdenCompra :submit').addClass('spinner spinner-white spinner-left');
                $.each($('[data-type="currency"]'), function () {
                    monto = currencyToNumber($(this).val())
                    $(this).val(monto);
                });
                data = $("#frmOrdenCompra").serialize();
                $.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_compra").val(response.ordenCompra.id_orden_compra);
                            $("#modalVisPrev").modal("hide");
                            swal.close();
                            let hrefPDF = $(".btnPDF").attr("href");
                            hrefPDF = hrefPDF.replace(':ordenCompra', response.ordenCompra.id_orden_compra);
                            $(".btnPDF").attr("href", hrefPDF);
                            let hrefExcel = $(".btnExcel").attr("href");
                            hrefExcel = hrefExcel.replace(':ordenCompra', response.ordenCompra.id_orden_compra);
                            $(".btnExcel").attr("href", hrefExcel);
                            $("#modalCorreo").modal("show");
                            limpiarFormulario();
                        } else {
                            Swal.fire({icon: 'error', title: 'Error al guardar la orden de compra', showConfirmButton: true,});
                        }
                    })
                    .fail(function (error) {
                        Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,});
                    })
                    .always(function () {
                        $('button').attr('disabled', false);
                        $('#frmOrdenCompra :submit').attr('disabled', false);
                        $('#frmOrdenCompra :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('oc.enviar', ['ordenCompra' => ':ordenCompra', 'correo' => ':correo']) }}";
                url = url.replace(':ordenCompra', $("#modalCorreo").find(".id_orden_compra").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 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 cotizacionRequerida = {
                validators: {
                    greaterThan: {
                        min: 0,
                        message: 'El número de cotización no puede ser menor a 1'
                    },
                    different: {
                        compare: "0",
                        message: 'El número de cotización no puede ser 0'
                    },
                    notEmpty: {
                        message: 'El número de cotización 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('frmOrdenCompra');
            validador = FormValidation.formValidation(
                _formEl,
                {
                    fields: {
                        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(),
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                    }
                }
            );

            /*  INICIO: Nuevo articulo */
            $(".btnAgregarNuevo").on("click", function() {
                $('#frm_datos_articulo').attr("action", "{{ route("parte.agregar") }}");
                $("#modalDatosArticulo").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').on('change',function(){
                $("#id_modelo").val("");
                $("#id_modelo").children('option').not(".vacio").hide();
                $("#id_modelo").find(".marca_"+$('#id_marca').val()).show();
                if($(this).val() != "universal") {
                    $('#id_modelo').attr('disabled', false);
                    $('.anio_i').attr('disabled', false);
                    $('.anio_f').attr('disabled', false);
                } else {
                    $('#id_modelo').attr('disabled', true);
                    $('.anio_i').attr('disabled', true);
                    $('.anio_f').attr('disabled', true);
                }
                $(".selectpicker").selectpicker("refresh");
            });
            $('.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);
                }
            });
            $('#modalDatosArticulo').on('hidden.bs.modal', function() {
                $('#frm_datos_articulo').trigger("reset");
                $('#frm_datos_articulo').find('.is-valid').removeClass("is-valid");
                $('#frm_datos_articulo').find('.is-invalid').removeClass("is-invalid");
                $('#frm_datos_articulo').find('.form-group-cantUnid').addClass("d-none");
                $('#frm_datos_articulo').find('.form-group-cantUnid input').val(0);
                $('#frm_datos_articulo').find('.selectpicker').selectpicker("refresh");
            });
            $(document).on('submit','#frm_datos_articulo',function(e){
                e.preventDefault();
                $('#frm_datos_articulo :submit').attr('disabled', true);
                $('#frm_datos_articulo :submit').addClass('spinner spinner-white spinner-left');
                $('button').attr('disabled', true);
                $.each($('#frm_datos_articulo#frm_datos_articulo').find('[data-type="currency"]'), function () {
                    monto = currencyToNumber($(this).val())
                    $(this).val(monto);
                });
                data = $(this).serialize();
                $.each($('#frm_datos_articulo#frm_datos_articulo').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) {
                            iziToast.success({
                                title: 'Datos guardados',
                                position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            });

                            //actualizar los select
                            $.each($('.select_id_parte'), function () {
                                let valor_actual = $(this).val();
                                let compatibilidad = (response.modelo) ? response.modelo.marca.marca + " " + response.modelo.modelo + " " + (response.modelo.serie ? response.modelo.serie : "") : 'Universal';
                                let option = '<option value="'+response.id_parte+'" data-subtext="'+ response.unidad.nombre_unidad + ' ' + (response.cantidad_unidad > 0 ? response.cantidad_unidad : '') + '" data-precio="'+response.precio_costo+'">' +
                                response.nombre + (response.descripcion ? response.descripcion : '') + ' - ' + response.num_parte + " - " + compatibilidad +
                                '</option>';
                                $(this).find('[data-categ="'+response.id_articulo_categoria+'"]').append(option);
                                $(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
                            $('.btnAgregar').click();
                            $('.select_id_parte').last().val(response.id_parte);
                            $('.select_id_parte').last().selectpicker("refresh");
                            $('.select_id_parte').last().change();
                        }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 () {
                        $("#modalDatosArticulo").modal('hide');
                        $('button').attr('disabled', false);
                        $('#frm_datos_articulo :submit').attr('disabled', false);
                        $('#frm_datos_articulo :submit').removeClass('spinner spinner-white spinner-left');
                    });
            });
            /*  FIN: Nuevo articulo */
        });

        function totales(){
            let total=0;
            $(".table tbody .linea").each(function(i, item) {
                if($(this).find(".total").length == 1) {
                    total += currencyToNumber($(this).find(".total").val());
                }
            });

            $(".lblTotalOC").text(formatCurrency(total));
            $(".total_oc").val(total);
        }

    </script>
@endsection