@extends('layout.administrator.index')
@section('title', 'Parametros')

@section('style')
    <style media="screen">
        .testSystemType {
            border: 1px solid #d2d6de;
            border-radius: 5px;
            padding: 15px;
        }

        .wth100 {
            width: 100%;
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            {{-- <h1>Parametros</h1> --}}
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('administrator.dashboard') }}"><i class="fa fa-dashboard"></i>
                        Inicio</a></li>
                <li class="breadcrumb-item active">Parametros</li>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-md-5 col-lg-3">
                    <div class="box">
                        <div class="box-header with-border border-0">
                            <h5 class="box-title font-weight-bold">Parametros</h5>
                        </div>
                        <div class="box-body p-0">
                            <div class="media-list media-list-hover media-list-divided pr-5"
                                style="border-right: 1px solid #323232;">
                                @sidebar('administrator.parameters.lubricant')
                                    <a class="media media-single border-0" href="javascript:;" onclick="lubricant()">
                                        <span class="title ftz-15">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-droplet" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
                                                <path fill-rule="evenodd"
                                                    d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z" />
                                            </svg>
                                            Lubricants
                                        </span>
                                    </a>
                                @endsidebar

                                @sidebar('administrator.parameters.oilBrand')
                                    <a class="media media-single border-0" href="javascript:;" onclick="oilBrand()">
                                        <span class="title ftz-15">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-droplet" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
                                                <path fill-rule="evenodd"
                                                    d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z" />
                                            </svg>
                                            Lubricant Brand
                                        </span>
                                    </a>
                                @endsidebar

                                @sidebar('administrator.parameters.oilWeight')
                                    <a class="media media-single border-0" href="javascript:;" onclick="oilWeight()">
                                        <span class="title ftz-15">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
                                            </svg>
                                            Lubricant Weight
                                        </span>
                                    </a>
                                @endsidebar

                                @sidebar('administrator.components.index')
                                    <a class="media media-single border-0" href="javascript:;" onclick="componentLocation()">
                                        <span class="title ftz-15">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
                                                <path
                                                    d="M4 11H2v3h2zm5-4H7v7h2zm5-5v12h-2V2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z" />
                                            </svg>
                                            Component Location
                                        </span>
                                    </a>
                                @endsidebar

                                @sidebar('administrator.parameters.systemType')
                                    <a class="media media-single border-0" href="javascript:;" onclick="systemType()">
                                        <span class="title ftz-15">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-droplet" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
                                                <path fill-rule="evenodd"
                                                    d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z" />
                                            </svg>
                                            System Type
                                        </span>
                                    </a>
                                @endsidebar

                                @sidebar('administrator.parameters.make')
                                    <a class="media media-single border-0" href="javascript:;" onclick="make()">
                                        <span class="title ftz-15">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
                                                <path
                                                    d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a2 2 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139q.323-.119.684-.12h5.396z" />
                                            </svg>
                                            Make
                                        </span>
                                    </a>
                                @endsidebar

                                @sidebar('administrator.parameters.model')
                                    <a class="media media-single border-0" href="javascript:;" onclick="model()">
                                        <span class="title ftz-15">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-droplet" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
                                                <path fill-rule="evenodd"
                                                    d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z" />
                                            </svg>
                                            Model
                                        </span>
                                    </a>
                                @endsidebar

                                @sidebar('administrator.parameters.productType')
                                    <a class="media media-single border-0" href="javascript:;" onclick="productType()">
                                        <span class="title ftz-15 align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-box" viewBox="0 0 16 16">
                                                <path
                                                    d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z" />
                                            </svg>
                                            Product types
                                        </span>
                                    </a>
                                @endsidebar

                                @isAdmin
                                    <a class="media media-single border-0" href="javascript:;" onclick="equipmentLocation()">
                                         <span class="title ftz-15 align-items-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-box" viewBox="0 0 16 16">
                                                <path
                                                    d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z" />
                                            </svg>
                                            Locaciones de Equipos
                                        </span>
                                    </a>
                                @endisAdmin

                                {{-- @isAdmin
                                    <a class="media media-single border-0" href="{{ route('administrator.rules.index') }}">
                                        <span class="title ftz-15">Administrar reglas</span>
                                        <span class="pull-right-container d-none d-sm-none d-md-block d-lg-block">
                                            <i class="fa fa-angle-right pull-right"></i>
                                        </span>
                                    </a>
                                @endisAdmin --}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-7 col-lg-9">
                    {{-- Defaults --}}
                    <div class="box boxParameters show" id="idBoxDefaults">
                        <div class="box-header with-border">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <h4 class="box-title font-weight-bold">Información</h4>
                                </div>
                            </div>
                        </div>
                        <div class="box-body">
                            <b>Selecciona un parametro</b>
                        </div>
                    </div>

                    {{-- Lubricant --}}
                    <div class="box boxParameters hide" id="idBoxLubricant">
                        <!-- TABLA CON LA INFORMACIÓN -->
                        <div class="box-form show-form" id="idTableLubricant">
                            <div class="box-header with-border">
                                <div class="row align-items-center">
                                    <div class="col-6">
                                        <h4 class="box-title font-weight-bold">Lubricant</h4>
                                    </div>
                                    <div class="col-6">
                                        <div class="box-controls pull-right">
                                            <div class="box-header-actions">
                                                <button type="button" class="btn btn-sm btn-info"
                                                    id="idBtnFilterLubricant"><i class="fa fa-filter"></i> Filtro</button>
                                                <button type="button" class="btn btn-sm btn-success pointer"
                                                    onclick="showFormCreate('idFormLubricantCreate', 'idTableLubricant')"><i
                                                        class="fa fa-plus"></i> Agregar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div id="idContentFilterLubricant" class="box box-solid bg_dark hide">
                                            <div class="box-header with-border">
                                                <div class="row align-items-center">
                                                    <div class="col-12">
                                                        <h4 class="box-title">Busqueda avanzada</h4>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <form action="#" method="get" files="true"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="idAddCategoryLubricantFilter"
                                                                    class="control-label">Category</label>
                                                                <select class="form-control hg_select select2"
                                                                    id="idAddCategoryLubricantFilter"
                                                                    name="category"></select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="idAddLubBrandLubricantFilter"
                                                                    class="control-label">Brand</label>
                                                                <select class="form-control hg_select select2"
                                                                    id="idAddLubBrandLubricantFilter" name="lub_brand">
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="idAddNameLubricantFilter"
                                                                    class="control-label">Reference</label>
                                                                <input type="text" id="idAddNameLubricantFilter"
                                                                    name="name" placeholder="Nombre"
                                                                    autocomplete="off" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="idAddLubWeightLubricantFilter"
                                                                    class="control-label">Weight</label>
                                                                <select class="form-control hg_select select2"
                                                                    id="idAddLubWeightLubricantFilter"
                                                                    name="lub_weight"></select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="idAddLubTypeLubricantFilter"
                                                                    class="control-label">Type</label>
                                                                <select class="form-control hg_select select2"
                                                                    id="idAddLubTypeLubricantFilter"
                                                                    name="lub_type"></select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-group">
                                                                <label for="idState" class="control-label">Estado</label>
                                                                <select name="state" class="form-control select2"
                                                                    id="idState">
                                                                    <option value="">Todos</option>
                                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                                        <option value="{{ $key }}">
                                                                            {{ $state['name'] }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6 text-left">
                                                            <a href="#" class="btn btn-danger"><i
                                                                    class="fa fa-refresh" aria-hidden="true"></i>
                                                                Limpiar</a>
                                                        </div>
                                                        <div class="col-md-6 text-right">
                                                            <button type="submit" class="btn btn-info"><i
                                                                    class="fa fa-search" aria-hidden="true"></i>
                                                                Buscar</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <table class="table table-sm table-hover table-responsive" id="lubricantTable">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Lub Brand</th>
                                            <th class="text-center">Lub Reference</th>
                                            <th class="text-center">Lub Weight</th>
                                            <th class="text-center">Lub Type</th>
                                            <th class="text-center">Category</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center" id="idListLubricant">

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

                        <!-- FORMULARIO CREAR -->
                        <div class="box-form hide-form" id="idFormLubricantCreate">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Crear Lubricant</h4>
                                <button type="button" onclick="addLubricant()" class="btn btn-sm btn-info pull-right"><i
                                        class="fa fa-floppy-o"></i> Guardar</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableLubricant', 'idFormLubricantCreate', 'idFormLubricantEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formAddLubricant" method="post">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idAddCategoryLubricant" class="control-label">Category
                                                    *</label>
                                                <select class="form-control hg_select select2" id="idAddCategoryLubricant"
                                                    name="category"></select>
                                                <small class="text-danger msgAddLubricant"
                                                    id="add_lubricant_category"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idAddLubBrandLubricant" class="control-label">Brand *</label>
                                                <select class="form-control hg_select select2" id="idAddLubBrandLubricant"
                                                    name="lub_brand"> </select>
                                                <small class="text-danger msgAddLubricant"
                                                    id="add_lubricant_lub_brand"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idAddNameLubricant" class="control-label">Reference *</label>
                                                <input type="text" id="idAddNameLubricant" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgAddLubricant"
                                                    id="add_lubricant_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idAddLubWeightLubricant" class="control-label">Weight
                                                    *</label>
                                                <select class="form-control hg_select select2"
                                                    id="idAddLubWeightLubricant" name="lub_weight"></select>
                                                <small class="text-danger msgAddLubricant"
                                                    id="add_lubricant_lub_weight"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idAddLubTypeLubricant" class="control-label">Type *</label>
                                                <select class="form-control hg_select select2" id="idAddLubTypeLubricant"
                                                    name="lub_type"></select>
                                                <small class="text-danger msgAddLubricant"
                                                    id="add_lubricant_lub_type"></small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row hide" id="idCategoryLubricantAdd">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="idAddNlgiLubricant" class="control-label">Grado NGLI *</label>
                                                <select class="form-control hg_select select2" id="idAddNlgiLubricant"
                                                    name="nlgi">

                                                </select>
                                                <small class="text-danger msgAddLubricant"
                                                    id="add_lubricant_nlgi"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- FORMULARIO EDITAR -->
                        <div class="box-form hide-form" id="idFormLubricantEdit">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Editar Lubricant</h4>
                                <button type="button" onclick="updateLubricant()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar
                                    cambios</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableLubricant', 'idFormLubricantCreate', 'idFormLubricantEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formEditLubricant" method="post">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idEditCategoryLubricant" class="control-label">Category
                                                    *</label>
                                                <select class="form-control hg_select select2"
                                                    id="idEditCategoryLubricant" name="category"></select>
                                                <small class="text-danger msgEditLubricant"
                                                    id="edit_lubricant_category"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idEditLubBrandLubricant" class="control-label">Brand *</label>
                                                <select class="form-control hg_select select2"
                                                    id="idEditLubBrandLubricant" name="lub_brand"></select>
                                                <small class="text-danger msgEditLubricant"
                                                    id="edit_lubricant_lub_brand"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idEditNameLubricant" class="control-label">Reference *</label>
                                                <input type="text" id="idEditNameLubricant" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgEditLubricant"
                                                    id="edit_lubricant_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idEditLubWeightLubricant" class="control-label">Weight
                                                    *</label>
                                                <select class="form-control hg_select select2"
                                                    id="idEditLubWeightLubricant" name="lub_weight"></select>
                                                <small class="text-danger msgEditLubricant"
                                                    id="edit_lubricant_lub_weight"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idEditLubTypeLubricant" class="control-label">Type *</label>
                                                <select class="form-control hg_select select2" id="idEditLubTypeLubricant"
                                                    name="lub_type"></select>
                                                <small class="text-danger msgEditLubricant"
                                                    id="edit_lubricant_lub_type"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="idEditStateLubricant" class="control-label">Estado *</label>
                                                <select class="form-control hg_select select2" id="idEditStateLubricant"
                                                    name="state">
                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                        <option value="{{ $key }}">{{ $state['name'] }}</option>
                                                    @endforeach
                                                </select>
                                                <small class="text-danger msgEditLubricant"
                                                    id="edit_lubricant_state"></small>
                                            </div>
                                        </div>
                                        <div class="row hide" id="idCategoryLubricantEdit">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="idEditNlgiLubricant" class="control-label">Grado NGLI
                                                        *</label>
                                                    <select class="form-control hg_select select2"
                                                        id="idEditNlgiLubricant" name="nlgi">

                                                    </select>
                                                    <small class="text-danger msgEditLubricant"
                                                        id="edit_lubricant_nlgi"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Lubricant Brand --}}
                    <div class="box boxParameters hide" id="idBoxOilBrand">
                        <!-- TABLA CON LA INFORMACIÓN -->
                        <div class="box-form show-form" id="idTableOilBrand">
                            <div class="box-header with-border">
                                <div class="row align-items-center">
                                    <div class="col-6">
                                        <h4 class="box-title font-weight-bold">Lubricant Brand</h4>
                                    </div>
                                    <div class="col-6">
                                        <div class="box-controls pull-right">
                                            <div class="box-header-actions">
                                                <button type="button" class="btn btn-sm btn-info"
                                                    id="idBtnFilterLubricantBrand"><i class="fa fa-filter"></i>
                                                    Filtro</button>
                                                <button type="button" class="btn btn-sm btn-success pointer"
                                                    onclick="showFormCreate('idFormOilBrandCreate', 'idTableOilBrand')"><i
                                                        class="fa fa-plus"></i> Agregar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div id="idContentFilterLubricantBrand" class="box box-solid bg_dark hide">
                                            <div class="box-header with-border">
                                                <div class="row align-items-center">
                                                    <div class="col-12">
                                                        <h4 class="box-title">Busqueda avanzada</h4>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <form action="#" method="get" files="true"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idName" class="control-label">Nombre</label>
                                                                <input type="text" name="name" class="form-control"
                                                                    id="idName" placeholder="Nombre">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idState" class="control-label">Estado</label>
                                                                <select name="state" class="form-control select2"
                                                                    id="idState">
                                                                    <option value="">Todos</option>
                                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                                        <option value="{{ $key }}">
                                                                            {{ $state['name'] }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6 text-left">
                                                            <a href="#" class="btn btn-danger"><i
                                                                    class="fa fa-refresh" aria-hidden="true"></i>
                                                                Limpiar</a>
                                                        </div>
                                                        <div class="col-md-6 text-right">
                                                            <button type="submit" class="btn btn-info"><i
                                                                    class="fa fa-search" aria-hidden="true"></i>
                                                                Buscar</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <table class="table table-sm table-hover table-responsive" id="lubricantBrandTable">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Nombre</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center" id="idListOilBrand">

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

                        <!-- FORMULARIO CREAR -->
                        <div class="box-form hide-form" id="idFormOilBrandCreate">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Crear Lubricant brand</h4>
                                <button type="button" onclick="addOilBrand()" class="btn btn-sm btn-info pull-right"><i
                                        class="fa fa-floppy-o"></i> Guardar</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableOilBrand', 'idFormOilBrandCreate', 'idFormOilBrandEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formAddOilBrand" method="post">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="idAddNameOilBrand" class="control-label">Nombre *</label>
                                                <input type="text" id="idAddNameOilBrand" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgAddOilBrand" id="add_oil_brand_name"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- FORMULARIO EDITAR -->
                        <div class="box-form hide-form" id="idFormOilBrandEdit">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Editar Lubricant Brand</h4>
                                <button type="button" onclick="updateOilBrand()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar
                                    cambios</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableOilBrand', 'idFormOilBrandCreate', 'idFormOilBrandEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formEditOilBrand" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditNameOilBrand" class="control-label">Nombre *</label>
                                                <input type="text" id="idEditNameOilBrand" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgEditOilBrand"
                                                    id="edit_oil_brand_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditStateOilBrand" class="control-label">Estado *</label>
                                                <select class="form-control hg_select select2" id="idEditStateOilBrand"
                                                    name="state">
                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                        <option value="{{ $key }}">{{ $state['name'] }}</option>
                                                    @endforeach
                                                </select>
                                                <small class="text-danger msgEditAccount"
                                                    id="edit_oil_brand_state"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Lubricant Weight --}}
                    <div class="box boxParameters hide" id="idBoxOilWeight">
                        <!-- TABLA CON LA INFORMACIÓN -->
                        <div class="box-form show-form" id="idTableOilWeight">
                            <div class="box-header with-border">
                                <div class="row align-items-center">
                                    <div class="col-6">
                                        <h4 class="box-title font-weight-bold">Lubricant Weight</h4>
                                    </div>
                                    <div class="col-6">
                                        <div class="box-controls pull-right">
                                            <div class="box-header-actions">
                                                <button type="button" class="btn btn-sm btn-info"
                                                    id="idBtnFilterLubricantWeight"><i class="fa fa-filter"></i>
                                                    Filtro</button>
                                                <button type="button" class="btn btn-sm btn-success pointer"
                                                    onclick="showFormCreate('idFormOilWeightCreate', 'idTableOilWeight')"><i
                                                        class="fa fa-plus"></i> Agregar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div id="idContentFilterLubricantWeight" class="box box-solid bg_dark hide">
                                            <div class="box-header with-border">
                                                <div class="row align-items-center">
                                                    <div class="col-12">
                                                        <h4 class="box-title">Busqueda avanzada</h4>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <form action="#" method="get" files="true"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idName" class="control-label">Nombre</label>
                                                                <input type="text" name="name" class="form-control"
                                                                    id="idName" placeholder="Nombre">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idState" class="control-label">Estado</label>
                                                                <select name="state" class="form-control select2"
                                                                    id="idState">
                                                                    <option value="">Todos</option>
                                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                                        <option value="{{ $key }}">
                                                                            {{ $state['name'] }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6 text-left">
                                                            <a href="#" class="btn btn-danger"><i
                                                                    class="fa fa-refresh" aria-hidden="true"></i>
                                                                Limpiar</a>
                                                        </div>
                                                        <div class="col-md-6 text-right">
                                                            <button type="submit" class="btn btn-info"><i
                                                                    class="fa fa-search" aria-hidden="true"></i>
                                                                Buscar</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <table class="table table-sm table-hover table-responsive" id="weightTable">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Nombre</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center" id="idListOilWeight">

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

                        <!-- FORMULARIO CREAR -->
                        <div class="box-form hide-form" id="idFormOilWeightCreate">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Crear Lubricant Weight</h4>
                                <button type="button" onclick="addOilWeight()" class="btn btn-sm btn-info pull-right"><i
                                        class="fa fa-floppy-o"></i> Guardar</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableOilWeight', 'idFormOilWeightCreate', 'idFormOilWeightEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formAddOilWeight" method="post">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="idAddNameOilWeight" class="control-label">Nombre *</label>
                                                <input type="text" id="idAddNameOilWeight" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgAddOilWeight"
                                                    id="add_oil_weight_name"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- FORMULARIO EDITAR -->
                        <div class="box-form hide-form" id="idFormOilWeightEdit">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Editar Lubricant Weight</h4>
                                <button type="button" onclick="updateOilWeight()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar
                                    cambios</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableOilWeight', 'idFormOilWeightCreate', 'idFormOilWeightEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formEditOilWeight" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditNameOilWeight" class="control-label">Nombre *</label>
                                                <input type="text" id="idEditNameOilWeight" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgEditOilWeight"
                                                    id="edit_oil_weight_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditStateOilWeight" class="control-label">Estado *</label>
                                                <select class="form-control hg_select select2" id="idEditStateOilWeight"
                                                    name="state">
                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                        <option value="{{ $key }}">{{ $state['name'] }}</option>
                                                    @endforeach
                                                </select>
                                                <small class="text-danger msgEditOilWeight"
                                                    id="edit_oil_weight_state"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Component Location --}}
                    <div class="box boxParameters hide" id="idComponentLocation">
                        <!-- TABLA CON LA INFORMACIÓN -->
                        <div class="box-form show-form" id="idTableComponentLocation">
                            <div class="box-header with-border">
                                <div class="row align-items-center">
                                    <div class="col-6">
                                        <h4 class="box-title font-weight-bold">Component Location</h4>
                                    </div>
                                    <div class="col-6">
                                        <div class="box-controls pull-right">
                                            <div class="box-header-actions">
                                                <button type="button" class="btn btn-sm btn-info" id="idBtnFilter"><i
                                                        class="fa fa-filter"></i> Filtro</button>
                                                <a href="javascript:;"
                                                    onclick="showFormCreate('idFormComponentLocationCreate', 'idTableComponentLocation')"
                                                    class="btn btn-sm btn-success"><i class="fa fa-plus"></i> Agregar</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div id="idContentFilter" class="box box-solid bg_dark hide">
                                            <div class="box-header with-border">
                                                <div class="row align-items-center">
                                                    <div class="col-12">
                                                        <h4 class="box-title">Busqueda avanzada</h4>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="idFilterNameComponent"
                                                                class="control-label">Nombre</label>
                                                            <input type="text" class="form-control"
                                                                id="idFilterNameComponent" placeholder="Nombre">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Customer</label>
                                                            <select class="form-control" id="idFilterCustomerComponent">
                                                                <option value="">Todos los clientes</option>
                                                                @foreach ($customers as $customer)
                                                                    <option value="{{ $customer->id }}">
                                                                        {{ $customer->company }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="idFilterStateComponent"
                                                                class="control-label">Estado</label>
                                                            <select class="form-control" id="idFilterStateComponent">
                                                                <option value="">Todos los estados</option>
                                                                @foreach (Config::get('constants.active') as $key => $state)
                                                                    <option value="{{ $key }}">
                                                                        {{ $state['name'] }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12 text-right">
                                                        <button type="button" class="btn btn-danger"
                                                            onclick="clearFiltersComponent()">
                                                            <i class="fa fa-refresh" aria-hidden="true"></i> Limpiar
                                                        </button>
                                                        <button type="button" class="btn btn-info"
                                                            onclick="applyFiltersComponent()">
                                                            <i class="fa fa-search" aria-hidden="true"></i> Buscar
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-md-12">

                                        <div class="box" id="idContentComponent">
                                            <div class="table-responsive">
                                                <table class="table table-sm table-hover" id="componentTable">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center">Cliente</th>
                                                            <th class="text-center">Nombre</th>
                                                            <th class="text-center">Estado</th>
                                                            <th class="text-center">Acción</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="text-center">
                                                        @if (count($components) > 0)
                                                            @foreach ($components as $component)
                                                                <tr>
                                                                    <td>
                                                                        @if ($component->getCustomer)
                                                                            {{ $component->getCustomer->company }}
                                                                        @else
                                                                            No asignado
                                                                        @endif
                                                                    </td>
                                                                    <td style="vertical-align:middle;"
                                                                        class="font-weight-bold">
                                                                        {{ $component->name }}
                                                                    </td>
                                                                    <td>
                                                                        <span
                                                                            class="badge badge-{{ Config::get('constants.states')[$component->state]['type'] }}">{{ Config::get('constants.states')[$component->state]['name'] }}</span>
                                                                    </td>
                                                                    <td>
                                                                        <a href="javascript:;"
                                                                            onclick="openTraceabilityParams({{ $component->id }}, '{{ $component->name }}')"
                                                                            class="btn btn-secondary btn-xs"
                                                                            title="Ver Trazabilidad">
                                                                            <i class="fa fa-history"
                                                                                aria-hidden="true"></i>
                                                                        </a>
                                                                        <a href="javascript:;"
                                                                            onclick="openEditComponent({{ $component->id }}, '{{ $component->name }}', '{{ $component->state }}')"
                                                                            class="btn btn-info btn-xs"><i
                                                                                class="fa fa-pencil"
                                                                                aria-hidden="true"></i></a>
                                                                        <a href="javascript:;"
                                                                            onclick="openDeleteComponent({{ $component->id }}, '{{ $component->name }}')"
                                                                            class="btn btn-danger btn-xs"><i
                                                                                class="fa fa-trash"
                                                                                aria-hidden="true"></i></a>
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        @else
                                                            <tr>
                                                                <td colspan="3">No se encontraron component location
                                                                </td>
                                                            </tr>
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- FORMULARIO CREAR -->
                        <div class="box-form hide-form" id="idFormComponentLocationCreate">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Crear Component Location</h4>
                                <button type="button" onclick="addComponent()" class="btn btn-sm btn-info pull-right"><i
                                        class="fa fa-floppy-o"></i> Guardar</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableComponentLocation', 'idFormComponentLocationCreate', 'idFormComponentLocationEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formAddComponent" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Customer *</label>
                                                <select class="form-control" required name="customer_id">
                                                    <option value="" selected disabled>
                                                        Seleccione un cliente
                                                    </option>
                                                    @foreach ($customers as $customer)
                                                        <option value="{{ $customer->id }}">{{ $customer->company }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idAddComponentName" class="control-label">Nombre *</label>
                                                <input type="text" id="idAddComponentName" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgAddComponent"
                                                    id="add_component_name"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- FORMULARIO EDITAR -->
                        <div class="box-form hide-form" id="idFormComponentLocationEdit">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Editar Component Location</h4>
                                <button type="button" onclick="updateComponent()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar
                                    cambios</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableComponentLocation', 'idFormComponentLocationCreate', 'idFormComponentLocationEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formEditComponent" method="post">
                                    <div class="row">
                                        <input type="text" disabled hidden class="form-control editComponentCustomer">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditComponentName" class="control-label">Nombre *</label>
                                                <input type="text" id="idEditComponentName" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgEditComponent"
                                                    id="edit_component_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditComponentState" class="control-label">Estado *</label>
                                                <select class="form-control hg_select select2" id="idEditComponentState"
                                                    name="state">
                                                    @foreach (Config::get('constants.states') as $key => $state)
                                                        <option value="{{ $key }}">{{ $state['name'] }}</option>
                                                    @endforeach
                                                </select>
                                                <small class="text-danger msgEditComponent"
                                                    id="edit_component_state"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- System Type --}}
                    <div class="box boxParameters hide" id="idBoxSystemType">
                        <!-- TABLA CON LA INFORMACIÓN -->
                        <div class="box-form shw-form" id="idTableSystemType">
                            <div class="box-header with-border">
                                <div class="row align-items-center">
                                    <div class="col-6">
                                        <h4 class="box-title font-weight-bold">System Type</h4>
                                    </div>
                                    <div class="col-6">
                                        <div class="box-controls pull-right">
                                            <div class="box-header-actions">
                                                <button type="button" class="btn btn-sm btn-info"
                                                    id="idBtnFilterSystemType"><i class="fa fa-filter"></i>
                                                    Filtro</button>
                                                <button type="button" class="btn btn-sm btn-success pointer"
                                                    onclick="showFormCreate('idFormSystemTypeCreate', 'idTableSystemType')"><i
                                                        class="fa fa-plus"></i> Agregar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div id="idContentFilterSystemType" class="box box-solid bg_dark hide">
                                            <div class="box-header with-border">
                                                <div class="row align-items-center">
                                                    <div class="col-12">
                                                        <h4 class="box-title">Busqueda avanzada</h4>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <form action="#" method="get" files="true"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idName" class="control-label">Nombre</label>
                                                                <input type="text" name="name" class="form-control"
                                                                    id="idName" placeholder="Nombre">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idState" class="control-label">Estado</label>
                                                                <select name="state" class="form-control select2"
                                                                    id="idState">
                                                                    <option value="">Todos</option>
                                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                                        <option value="{{ $key }}">
                                                                            {{ $state['name'] }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6 text-left">
                                                            <a href="#" class="btn btn-danger"><i
                                                                    class="fa fa-refresh" aria-hidden="true"></i>
                                                                Limpiar</a>
                                                        </div>
                                                        <div class="col-md-6 text-right">
                                                            <button type="submit" class="btn btn-info"><i
                                                                    class="fa fa-search" aria-hidden="true"></i>
                                                                Buscar</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <table class="table table-sm table-hover table-responsive" id="systemTable">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Nombre</th>
                                            <th class="text-center">Temperatura Viscosidad</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center" id="idListSystemType">

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

                        <!-- FORMULARIO CREAR -->
                        <div class="box-form hide-form" id="idFormSystemTypeCreate">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Crear System type</h4>
                                <button type="button" onclick="addSystemType()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableSystemType', 'idFormSystemTypeCreate', 'idFormSystemTypeEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formAddSystemType" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idAddNameSystemType" class="control-label">Nombre *</label>
                                                <input type="text" id="idAddNameSystemType" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgAddSystemType"
                                                    id="add_system_type_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idAddTempSystemType" class="control-label">Temperatura de la
                                                    Viscosidad *</label>
                                                <select class="form-control hg_select select2" id="idAddTempSystemType"
                                                    name="reference" required>
                                                    <option value="" selected disabled>Seleccione temperatura
                                                    </option>
                                                    <option value="40">V40C</option>
                                                    <option value="100">V100C</option>
                                                </select>
                                                <small class="text-danger msgAddSystemType"
                                                    id="add_system_type_reference"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label">Muestras *</label>
                                                <div class="testSystemType">
                                                    <div class="row">
                                                        @foreach ($methodsTest as $test)
                                                            <div class="col-md-6">
                                                                <input type="checkbox" name="test[]"
                                                                    value="{{ $test->id }}"
                                                                    id="checkboxAddSystemType_{{ $test->id }}"><label
                                                                    for="checkboxAddSystemType_{{ $test->id }}">{{ $test->name }}</label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <small class="text-danger msgAddSystemType"
                                                    id="add_system_type_test"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- FORMULARIO EDITAR -->
                        <div class="box-form hide-form" id="idFormSystemTypeEdit">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Editar System type</h4>
                                <button type="button" onclick="updateSystemType()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar
                                    cambios</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableSystemType', 'idFormSystemTypeCreate', 'idFormSystemTypeEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formEditSystemType" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditNameSystemType" class="control-label">Nombre *</label>
                                                <input type="text" id="idEditNameSystemType" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgEditSystemType"
                                                    id="edit_system_type_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditStateSystemType" class="control-label">Estado *</label>
                                                <select class="form-control hg_select select2" id="idEditStateSystemType"
                                                    name="state">
                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                        <option value="{{ $key }}">{{ $state['name'] }}</option>
                                                    @endforeach
                                                </select>
                                                <small class="text-danger msgEditAccount"
                                                    id="edit_system_type_state"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditTempSystemType" class="control-label">Temperatura de la
                                                    Viscosidad *</label>
                                                <select class="form-control hg_select select2" id="idEditTempSystemType"
                                                    name="reference" required>
                                                    <option value="" disabled>Seleccione temperatura</option>
                                                    <option value="40">V40C</option>
                                                    <option value="100">V100C</option>
                                                </select>
                                                <small class="text-danger msgEditSystemType"
                                                    id="edit_system_type_reference"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label">Muestras *</label>
                                                <div class="testSystemType">
                                                    <div class="row">
                                                        @foreach ($methodsTest as $test)
                                                            <div class="col-md-6">
                                                                <input type="checkbox" name="test[]"
                                                                    value="{{ $test->id }}"
                                                                    id="checkboxEditSystemType_{{ $test->id }}"><label
                                                                    for="checkboxEditSystemType_{{ $test->id }}">{{ $test->name }}</label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <small class="text-danger msgEditSystemType"
                                                    id="edit_system_type_test"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Make --}}
                    <div class="box boxParameters hide" id="idBoxMake">
                        <!-- TABLA CON LA INFORMACIÓN -->
                        <div class="box-form show-form" id="idTableMake">
                            <div class="box-header with-border">
                                <div class="row align-items-center">
                                    <div class="col-6">
                                        <h4 class="box-title font-weight-bold">Make</h4>
                                    </div>
                                    <div class="col-6">
                                        <div class="box-controls pull-right">
                                            <div class="box-header-actions">
                                                <button type="button" class="btn btn-sm btn-info"
                                                    id="idBtnFilterMake"><i class="fa fa-filter"></i> Filtro</button>
                                                <button type="button" class="btn btn-sm btn-success pointer"
                                                    onclick="showFormCreate('idFormMakeCreate', 'idTableMake')"><i
                                                        class="fa fa-plus"></i> Agregar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div id="idContentFilterMake" class="box box-solid bg_dark hide">
                                            <div class="box-header with-border">
                                                <div class="row align-items-center">
                                                    <div class="col-12">
                                                        <h4 class="box-title">Busqueda avanzada</h4>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <form action="#" method="get" files="true"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idName"
                                                                    class="control-label">Nombre</label>
                                                                <input type="text" name="name"
                                                                    class="form-control" id="idName"
                                                                    placeholder="Nombre">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idState"
                                                                    class="control-label">Estado</label>
                                                                <select name="state" class="form-control select2"
                                                                    id="idState">
                                                                    <option value="">Todos</option>
                                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                                        <option value="{{ $key }}">
                                                                            {{ $state['name'] }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6 text-left">
                                                            <a href="#" class="btn btn-danger"><i
                                                                    class="fa fa-refresh" aria-hidden="true"></i>
                                                                Limpiar</a>
                                                        </div>
                                                        <div class="col-md-6 text-right">
                                                            <button type="submit" class="btn btn-info"><i
                                                                    class="fa fa-search" aria-hidden="true"></i>
                                                                Buscar</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <table class="table table-sm table-hover table-responsive" id="makeTable">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Nombre</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center" id="idListMake">

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

                        <!-- FORMULARIO CREAR -->
                        <div class="box-form hide-form" id="idFormMakeCreate">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Crear Make</h4>
                                <button type="button" onclick="addMake()" class="btn btn-sm btn-info pull-right"><i
                                        class="fa fa-floppy-o"></i> Guardar</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableMake', 'idFormMakeCreate', 'idFormMakeEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formAddMake" method="post">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="idAddNameMake" class="control-label">Nombre *</label>
                                                <input type="text" id="idAddNameMake" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgAddMake" id="add_make_name"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- FORMULARIO EDITAR -->
                        <div class="box-form hide-form" id="idFormMakeEdit">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Editar Make</h4>
                                <button type="button" onclick="updateMake()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar
                                    cambios</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableMake', 'idFormMakeCreate', 'idFormMakeEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formEditMake" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditNameMake" class="control-label">Nombre *</label>
                                                <input type="text" id="idEditNameMake" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgEditMake" id="edit_make_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditStateMake" class="control-label">Estado *</label>
                                                <select class="form-control hg_select select2" id="idEditStateMake"
                                                    name="state">
                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                        <option value="{{ $key }}">{{ $state['name'] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <small class="text-danger msgEditMake" id="edit_make_state"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Model --}}
                    <div class="box boxParameters hide" id="idBoxModel">
                        <!-- TABLA CON LA INFORMACIÓN -->
                        <div class="box-form show-form" id="idTableModel">
                            <div class="box-header with-border">
                                <div class="row align-items-center">
                                    <div class="col-6">
                                        <h4 class="box-title font-weight-bold">Model</h4>
                                    </div>
                                    <div class="col-6">
                                        <div class="box-controls pull-right">
                                            <div class="box-header-actions">
                                                <button type="button" class="btn btn-sm btn-info"
                                                    id="idBtnFilterModel"><i class="fa fa-filter"></i> Filtro</button>
                                                <button type="button" class="btn btn-sm btn-success pointer"
                                                    onclick="showFormCreate('idFormModelCreate', 'idTableModel')"><i
                                                        class="fa fa-plus"></i> Agregar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div id="idContentFilterModel" class="box box-solid bg_dark hide">
                                            <div class="box-header with-border">
                                                <div class="row align-items-center">
                                                    <div class="col-12">
                                                        <h4 class="box-title">Busqueda avanzada</h4>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-body">
                                                <form action="#" method="get" files="true"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idName"
                                                                    class="control-label">Nombre</label>
                                                                <input type="text" name="name"
                                                                    class="form-control" id="idName"
                                                                    placeholder="Nombre">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idFilterMakeModel"
                                                                    class="control-label">Make</label>
                                                                <select class="form-control hg_select select2"
                                                                    id="idFilterMakeModel" name="make"></select>
                                                                <small class="text-danger msgAddModel"
                                                                    id="add_model_make_filter"></small>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="idState"
                                                                    class="control-label">Estado</label>
                                                                <select name="state" class="form-control select2"
                                                                    id="idState">
                                                                    <option value="">Todos</option>
                                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                                        <option value="{{ $key }}">
                                                                            {{ $state['name'] }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6 text-left">
                                                            <a href="#" class="btn btn-danger"><i
                                                                    class="fa fa-refresh" aria-hidden="true"></i>
                                                                Limpiar</a>
                                                        </div>
                                                        <div class="col-md-6 text-right">
                                                            <button type="submit" class="btn btn-info"><i
                                                                    class="fa fa-search" aria-hidden="true"></i>
                                                                Buscar</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <table class="table table-sm table-hover table-responsive" id="modelTable">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Nombre</th>
                                            <th class="text-center">Make</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center" id="idListModel">

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

                        <!-- FORMULARIO CREAR -->
                        <div class="box-form hide-form" id="idFormModelCreate">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Crear Model</h4>
                                <button type="button" onclick="addModel()" class="btn btn-sm btn-info pull-right"><i
                                        class="fa fa-floppy-o"></i> Guardar</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableModel', 'idFormModelCreate', 'idFormModelEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formAddModel" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idAddMakeModel" class="control-label">Make *</label>
                                                <select class="form-control hg_select select2" id="idAddMakeModel"
                                                    name="make"></select>
                                                <small class="text-danger msgAddModel" id="add_model_make"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idAddNameModel" class="control-label">Nombre *</label>
                                                <input type="text" id="idAddNameModel" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgAddModel" id="add_model_name"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- FORMULARIO EDITAR -->
                        <div class="box-form hide-form" id="idFormModelEdit">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Editar Model</h4>
                                <button type="button" onclick="updateModel()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar
                                    cambios</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableModel', 'idFormModelCreate', 'idFormModelEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formEditModel" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditMakeModel" class="control-label">Make *</label>
                                                <select class="form-control hg_select select2" id="idEditMakeModel"
                                                    name="make"> </select>
                                                <small class="text-danger msgEditModel" id="edit_model_make"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditNameModel" class="control-label">Nombre *</label>
                                                <input type="text" id="idEditNameModel" name="name"
                                                    placeholder="Nombre" autocomplete="off" class="form-control"
                                                    required>
                                                <small class="text-danger msgEditModel" id="edit_model_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditStateModel" class="control-label">Estado *</label>
                                                <select class="form-control hg_select select2" id="idEditStateModel"
                                                    name="state">
                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                        <option value="{{ $key }}">{{ $state['name'] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <small class="text-danger msgEditModel" id="edit_model_state"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Product Type --}}
                    <div class="box boxParameters hide" id="idBoxProductType">
                        <!-- TABLA CON LA INFORMACIÓN -->
                        <div class="box-form show-form" id="idTableProductType">
                            <div class="box-header with-border">
                                <div class="row align-items-center">
                                    <div class="col-6">
                                        <h4 class="box-title font-weight-bold">Tipos de Producto</h4>
                                    </div>
                                    <div class="col-6">
                                        <div class="box-controls pull-right">
                                            <div class="box-header-actions">
                                                <button type="button" class="btn btn-sm btn-info"
                                                    id="idBtnFilterProductType"><i class="fa fa-filter"></i> Filtro</button>
                                                <button type="button" class="btn btn-sm btn-success pointer"
                                                    onclick="showFormCreate('idFormProductTypeCreate', 'idTableProductType')"><i class="fa fa-plus"></i>
                                                    Agregar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div id="idContentFilterProductType" class="box box-solid bg_dark hide">
                                            <div class="box-header with-border">
                                                <h3 class="box-title">Filtros de búsqueda</h3>
                                            </div>
                                            <div class="box-body">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Buscar por nombre:</label>
                                                            <input type="text" class="form-control"
                                                                id="idSearchProductType"
                                                                placeholder="Escriba el nombre del tipo de producto">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Estado:</label>
                                                            <select class="form-control" id="idFilterStateProductType">
                                                                <option value="">Todos los estados</option>
                                                                <option value="1">Activo</option>
                                                                <option value="2">Inactivo</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Registros por página:</label>
                                                            <select class="form-control" id="idPerPageProductType">
                                                                <option value="10">10 registros</option>
                                                                <option value="25" selected>25 registros</option>
                                                                <option value="50">50 registros</option>
                                                                <option value="100">100 registros</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <button type="button" class="btn btn-primary mr-2"
                                                            onclick="applyFiltersProductType()"><i class="fa fa-search"></i>
                                                            Buscar</button>
                                                        <button type="button" class="btn btn-secondary"
                                                            onclick="clearFiltersProductType()"><i
                                                                class="fa fa-refresh"></i>
                                                            Limpiar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <table class="table table-sm table-hover table-responsive" id="productTypeTable">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Nombre</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center" id="idListProductType">

                                    </tbody>
                                </table>
                                <!-- Paginación -->
                                <div class="row" id="idPaginationProductType">
                                    <div class="col-md-6">
                                        <div class="dataTables_info" id="idInfoProductType">
                                            <!-- Información de registros -->
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="dataTables_paginate paging_simple_numbers">
                                            <ul class="pagination" id="idPaginationLinksProductType">
                                                <!-- Enlaces de paginación -->
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- FORMULARIO CREAR -->
                        <div class="box-form hide-form" id="idFormProductTypeCreate">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Crear Tipo de Producto</h4>
                                <button type="button" onclick="addProductType()" class="btn btn-sm btn-info pull-right"><i
                                        class="fa fa-floppy-o"></i> Guardar</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableProductType', 'idFormProductTypeCreate', 'idFormProductTypeEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formAddProductType" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idAddNameProductType" class="control-label">Nombre *</label>
                                                <input type="text" id="idAddNameProductType" name="name" placeholder="Nombre" autocomplete="off" class="form-control" required>
                                                <small class="text-danger msgAddProductType" id="add_product_type_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idAddReferenceProductType" class="control-label">Letra</label>
                                                <input type="text" id="idAddReferenceProductType" name="reference" placeholder="Letra" autocomplete="off" class="form-control" maxlength="10">
                                                <small class="text-danger msgAddProductType" id="add_product_type_reference"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- FORMULARIO EDITAR -->
                        <div class="box-form hide-form" id="idFormProductTypeEdit">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Editar Tipo de Producto</h4>
                                <button type="button" onclick="updateProductType()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar
                                    cambios</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableProductType', 'idFormProductTypeCreate', 'idFormProductTypeEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formEditProductType" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditNameProductType" class="control-label">Nombre *</label>
                                                <input type="text" id="idEditNameProductType" name="name" placeholder="Nombre" autocomplete="off" class="form-control" required>
                                                <small class="text-danger msgEditProductType" id="edit_product_type_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditReferenceProductType" class="control-label">Letra</label>
                                                <input type="text" id="idEditReferenceProductType" name="reference" placeholder="Letra" autocomplete="off" class="form-control" maxlength="10">
                                                <small class="text-danger msgEditProductType" id="edit_product_type_reference"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditStateProductType" class="control-label">Estado *</label>
                                                <select id="idEditStateProductType" name="state" class="form-control select2 wth100" required>
                                                    <option value="">Selecciona</option>
                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                        <option value="{{$key}}">{{$state['name']}}</option>
                                                    @endforeach
                                                </select>
                                                <small class="text-danger msgEditProductType" id="edit_product_type_state"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Equipment Location --}}
                    <div class="box boxParameters hide" id="idBoxEquipmentLocation">
                        <!-- TABLA CON LA INFORMACIÓN -->
                        <div class="box-form show-form" id="idTableEquipmentLocation">
                            <div class="box-header with-border">
                                <div class="row align-items-center">
                                    <div class="col-6">
                                        <h4 class="box-title font-weight-bold">Locaciones de Equipos</h4>
                                    </div>
                                    <div class="col-6">
                                        <div class="box-controls pull-right">
                                            <div class="box-header-actions">
                                                <button type="button" class="btn btn-sm btn-info"
                                                    id="idBtnFilterEquipmentLocation"><i class="fa fa-filter"></i>
                                                    Filtro</button>
                                                <button type="button" class="btn btn-sm btn-success pointer"
                                                    onclick="showFormCreate('idFormEquipmentLocationCreate', 'idTableEquipmentLocation')"><i class="fa fa-plus"></i>
                                                    Agregar</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div id="idContentFilterEquipmentLocation" class="box box-solid bg_dark hide">
                                            <div class="box-header with-border">
                                                <h3 class="box-title">Filtros de búsqueda</h3>
                                            </div>
                                            <div class="box-body">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Buscar por nombre:</label>
                                                            <input type="text" class="form-control"
                                                                id="idSearchEquipmentLocation"
                                                                placeholder="Escriba el nombre de la locación">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Estado:</label>
                                                            <select class="form-control"
                                                                id="idFilterStateEquipmentLocation">
                                                                <option value="">Todos los estados</option>
                                                                <option value="1">Activo</option>
                                                                <option value="2">Inactivo</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label>Registros por página:</label>
                                                            <select class="form-control" id="idPerPageEquipmentLocation">
                                                                <option value="10">10 registros</option>
                                                                <option value="25" selected>25 registros</option>
                                                                <option value="50">50 registros</option>
                                                                <option value="100">100 registros</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <button type="button" class="btn btn-primary"
                                                            onclick="applyFiltersEquipmentLocation()"><i
                                                                class="fa fa-search"></i>
                                                            Buscar</button>
                                                        <button type="button" class="btn btn-secondary"
                                                            onclick="clearFiltersEquipmentLocation()"><i
                                                                class="fa fa-refresh"></i>
                                                            Limpiar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <table class="table table-sm table-hover table-responsive" id="equipmentLocationTable">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Nombre</th>
                                            <th class="text-center">Descripción</th>
                                            <th class="text-center">Estado</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center" id="idListEquipmentLocation">

                                    </tbody>
                                </table>

                                <!-- Paginación -->
                                <div class="row" id="idPaginationEquipmentLocation">
                                    <div class="col-md-6">
                                        <div class="dataTables_info" id="idInfoEquipmentLocation">
                                            <!-- Información de registros -->
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="dataTables_paginate paging_simple_numbers">
                                            <ul class="pagination" id="idPaginationLinksEquipmentLocation">
                                                <!-- Enlaces de paginación -->
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- FORMULARIO CREAR -->
                        <div class="box-form hide-form" id="idFormEquipmentLocationCreate">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Crear Locación de Equipo</h4>
                                <button type="button" onclick="addEquipmentLocation()" class="btn btn-sm btn-info pull-right"><i
                                        class="fa fa-floppy-o"></i> Guardar</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableEquipmentLocation', 'idFormEquipmentLocationCreate', 'idFormEquipmentLocationEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formAddEquipmentLocation" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idAddNameEquipmentLocation" class="control-label">Nombre *</label>
                                                <input type="text" id="idAddNameEquipmentLocation" name="name" placeholder="Nombre" autocomplete="off" class="form-control" required>
                                                <small class="text-danger msgAddEquipmentLocation" id="add_equipment_location_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idAddDescriptionEquipmentLocation" class="control-label">Descripción</label>
                                                <textarea id="idAddDescriptionEquipmentLocation" name="description" placeholder="Descripción (opcional)" class="form-control" rows="3"></textarea>
                                                <small class="text-danger msgAddEquipmentLocation" id="add_equipment_location_description"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- FORMULARIO EDITAR -->
                        <div class="box-form hide-form" id="idFormEquipmentLocationEdit">
                            <div class="box-header with-border">
                                <h4 class="box-title font-weight-bold">Editar Locación de Equipo</h4>
                                <button type="button" onclick="updateEquipmentLocation()"
                                    class="btn btn-sm btn-info pull-right"><i class="fa fa-floppy-o"></i> Guardar
                                    cambios</button>
                                <button class="btn btn-sm btn-danger pull-right mr-2"
                                    onclick="backToTable('idTableEquipmentLocation', 'idFormEquipmentLocationCreate', 'idFormEquipmentLocationEdit')">
                                    <i class="fa fa-arrow-left"></i> Volver
                                </button>
                            </div>

                            <div class="box-body">
                                <form id="formEditEquipmentLocation" method="post">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditNameEquipmentLocation" class="control-label">Nombre *</label>
                                                <input type="text" id="idEditNameEquipmentLocation" name="name" placeholder="Nombre" autocomplete="off" class="form-control" required>
                                                <small class="text-danger msgEditEquipmentLocation" id="edit_equipment_location_name"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                               <label for="idEditDescriptionEquipmentLocation" class="control-label">Descripción</label>
                                                <textarea id="idEditDescriptionEquipmentLocation" name="description" placeholder="Descripción (opcional)" class="form-control" rows="3"></textarea>
                                                <small class="text-danger msgEditEquipmentLocation" id="edit_equipment_location_description"></small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="idEditStateEquipmentLocation" class="control-label">Estado *</label>
                                                <select id="idEditStateEquipmentLocation" name="state" class="form-control select2 wth100" required>
                                                    <option value="">Selecciona</option>
                                                    @foreach (Config::get('constants.active') as $key => $state)
                                                    <option value="{{$key}}">{{$state['name']}}</option>
                                                    @endforeach
                                                </select>
                                                <small class="text-danger msgEditEquipmentLocation" id="edit_equipment_location_state"></small>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    @include('system.administrator.parameters.modals')

    <!-- MODAL TRAZABILIDAD PARAMETERS -->
    <div class="modal fade" id="idTraceabilityModalParams" tabindex="-1" role="dialog"
        aria-labelledby="traceabilityModalLabelParams" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document" style="max-width: 90%;">
            <div class="modal-content">
                <div class="modal-header bg-dark">
                    <h4 class="modal-title text-white" id="traceabilityModalLabelParams">
                        <i class="fa fa-history"></i> Trazabilidad: <strong id="componentNameTitleParams"></strong>
                    </h4>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="traceabilityLoadingParams" class="text-center py-5">
                        <i class="fa fa-spinner fa-spin fa-3x text-primary"></i>
                        <p class="mt-3">Cargando historial...</p>
                    </div>
                    <div id="traceabilityContentParams" style="display:none;">
                        <div class="row mb-3 align-items-center">
                            <div class="col-md-4">
                                <strong>Cliente:</strong> <span id="componentCustomerParams"></span>
                            </div>
                            <div class="col-md-4">
                                <strong>Estado:</strong> <span id="componentStateParams"></span>
                            </div>
                            <div class="col-md-4">
                                <strong>Total de eventos:</strong> <span id="totalEventsParams">0</span>
                            </div>
                        </div>
                        <hr>
                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                            <table class="table table-sm table-hover table-bordered">
                                <thead class="bg-light sticky-top">
                                    <tr>
                                        <th class="text-center" style="width: 120px;">Fecha/Hora</th>
                                        <th class="text-center" style="width: 130px;">Usuario</th>
                                        <th class="text-center" style="width: 110px;">Acción</th>
                                        <th class="text-center">Detalles</th>
                                        <th class="text-center" style="width: 130px;">Equipo</th>
                                        <th class="text-center" style="width: 150px;">Cliente/Cuenta</th>
                                    </tr>
                                </thead>
                                <tbody id="traceabilityTableBodyParams">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        function hideAllBoxes() {
            document.querySelectorAll('.boxParameters').forEach(box => {
                box.classList.add('hide');
                box.classList.remove('show-form');
            });

            document.querySelectorAll('.formSection').forEach(form => {
                form.classList.add('hide-form');
            });
        }

        function showSection(sectionId) {
            hideAllBoxes();
            document.getElementById(sectionId).classList.remove('hide');
            document.getElementById(sectionId).classList.add('show-form');
        }

        function showFormCreate(formId, tableId) {
            document.getElementById(tableId).classList.add('hide-form');
            document.getElementById(formId).classList.remove('hide-form');
        }

        function showFormEdit(formId, tableId) {
            document.getElementById(tableId).classList.add('hide-form');
            document.getElementById(formId).classList.remove('hide-form');
        }

        function backToTable(tableId, formCreateId, formEditId) {
            document.getElementById(formCreateId).classList.add('hide-form');
            document.getElementById(formEditId).classList.add('hide-form');
            document.getElementById(tableId).classList.remove('hide-form');
        }
    </script>

    <!-- Lubricant -->
    <script type="text/javascript">
        var lubricantTable = null;
        function lubricant() {
            if ($.fn.DataTable.isDataTable('#lubricantTable')) {
                $('#lubricantTable').DataTable().clear().destroy();
            }
            $("#idListLubricant").empty();
            var urlPath = urlHost + "/administrator/parameters/lubricant";
            $.ajax({
                type: 'POST',
                url: urlPath,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        $(".boxParameters").hide();

                        if (!$.isEmptyObject(response.data.lubricants)) {
                            var configState = {!! json_encode(Config::get('constants.active')) !!};
                            $.each(response.data.lubricants, function(index, lubricant) {
                                $("#idListLubricant").append('<tr>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    lubricant.get_lub_brand.name + '</td>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    lubricant.name + '</td>' +
                                    '<td style="vertical-align:middle;">' + lubricant.get_lub_weight
                                    .name + '</td>' +
                                    '<td style="vertical-align:middle;">' +
                                    '<span class="badge badge-dark">' + lubricant.get_lub_type
                                    .name + '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-dark">' + lubricant.get_category
                                    .name + '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-' + configState[lubricant.state][
                                        'type'
                                    ] + '">' + configState[lubricant.state]['name'] + '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a href="javascript:;" onclick="openEditLubricant(' + lubricant
                                    .id +
                                    ')" class="btn btn-info btn-xs mr-1"><i class="fa fa-pencil" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" onclick="openDeleteLubricant(' +
                                    lubricant.id +
                                    ')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>' +
                                    '</td>' +
                                    '</tr>');
                            });
                        } else {
                            $("#idListLubricant").append('<tr>' +
                                '<td colspan="7">No se encontraron lubricant</td>' +
                                '</tr>');
                        }

                        $("#idAddCategoryLubricant").empty();
                        $("#idEditCategoryLubricant").empty();
                        $.each(response.data.category, function(index, category) {
                            $("#idAddCategoryLubricant").append('<option value="' + category.id + '">' +
                                category.name + '</option>');
                            $("#idEditCategoryLubricant").append('<option value="' + category.id +
                                '">' + category.name + '</option>');
                        });

                        $("#idAddLubBrandLubricant").empty();
                        $("#idEditLubBrandLubricant").empty();
                        $.each(response.data.oil_brand, function(index, oilBrand) {
                            $("#idAddLubBrandLubricant").append('<option value="' + oilBrand.id + '">' +
                                oilBrand.name + '</option>');
                            $("#idEditLubBrandLubricant").append('<option value="' + oilBrand.id +
                                '">' + oilBrand.name + '</option>');
                        });

                        $("#idAddLubWeightLubricant").empty();
                        $("#idEditLubWeightLubricant").empty();
                        $.each(response.data.oil_weight, function(index, oilWeight) {
                            $("#idAddLubWeightLubricant").append('<option value="' + oilWeight.id +
                                '">' + oilWeight.name + '</option>');
                            $("#idEditLubWeightLubricant").append('<option value="' + oilWeight.id +
                                '">' + oilWeight.name + '</option>');
                        });

                        $("#idAddLubTypeLubricant").empty();
                        $("#idEditLubTypeLubricant").empty();
                        $.each(response.data.oil_type, function(index, oilType) {
                            $("#idAddLubTypeLubricant").append('<option value="' + oilType.id + '">' +
                                oilType.name + '</option>');
                            $("#idEditLubTypeLubricant").append('<option value="' + oilType.id + '">' +
                                oilType.name + '</option>');
                        });

                        $("#idAddNlgiLubricant").empty();
                        $("#idEditNlgiLubricant").empty();
                        $.each(response.data.nlgi, function(index, nlgi) {
                            $("#idAddNlgiLubricant").append('<option value="' + nlgi.id + '">' + nlgi
                                .name + '</option>');
                            $("#idEditNlgiLubricant").append('<option value="' + nlgi.id + '">' + nlgi
                                .name + '</option>');
                        });

                        $("#idBoxLubricant").show();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                    lubricantTable = $('#lubricantTable').DataTable();
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openAddLubricant() {
            $(".msgAddLubricant").empty();
            $("#formAddLubricant")[0].reset();
            // $("#idCategoryLubricantAdd").hide();
            $("#idAddLubricant").modal();
        }

        $("#idAddCategoryLubricant").on("change", function() {
            if (this.value == 13) {
                $("#idCategoryLubricantAdd").show();
            } else {
                $("#idCategoryLubricantAdd").hide();
            }
        });

        function addLubricant() {
            $(".msgAddLubricant").empty();
            var formData = new FormData(document.getElementById("formAddLubricant"));
            var urlPath = urlHost + "/administrator/parameters/lubricant/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            lubricant();
                            $("#formAddLubricant")[0].reset();
                            backToTable('idTableLubricant', 'idFormLubricantCreate',
                                'idFormLubricantEdit')
                            // $("#idAddLubricant").modal("hide");
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_lubricant_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        var idValLubricant = null;

        function openEditLubricant(id) {
            showFormEdit('idFormLubricantEdit', 'idTableLubricant');
            $(".msgEditLubricant").empty();
            $("#formEditLubricant")[0].reset();

            $("#idCategoryLubricantEdit").hide();

            var urlPath = urlHost + "/administrator/parameters/lubricant/edit";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {

                        idValLubricant = id;

                        $("#idEditCategoryLubricant").val(response.data.lubricant.category).trigger(
                            'change.select2');
                        $("#idEditLubBrandLubricant").val(response.data.lubricant.lub_brand).trigger(
                            'change.select2');
                        $("#idEditNameLubricant").val(response.data.lubricant.name);
                        $("#idEditLubWeightLubricant").val(response.data.lubricant.lub_weight).trigger(
                            'change.select2');
                        $("#idEditLubTypeLubricant").val(response.data.lubricant.lub_type).trigger(
                            'change.select2');
                        $("#idEditStateLubricant").val(response.data.lubricant.state).trigger('change.select2');

                        if (response.data.lubricant.category == 13) {
                            $("#idCategoryLubricantEdit").show();
                            $("#idEditNlgiLubricant").val(response.data.lubricant.nlgi).trigger(
                                'change.select2');
                        }
                        // $("#idEditLubricant").modal();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        $("#idEditCategoryLubricant").on("change", function() {
            if (this.value == 13) {
                $("#idCategoryLubricantEdit").show();
            } else {
                $("#idCategoryLubricantEdit").hide();
            }
        });

        function updateLubricant() {
            $(".msgEditLubricant").empty();
            var formData = new FormData(document.getElementById("formEditLubricant"));
            formData.append('id', idValLubricant);

            var urlPath = urlHost + "/administrator/parameters/lubricant/update";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            lubricant();
                            $("#formEditLubricant")[0].reset();
                            backToTable('idTableLubricant', 'idFormLubricantCreate',
                                'idFormLubricantEdit')

                            // $("#idEditLubricant").modal("hide");
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#edit_lubricant_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        function openDeleteLubricant(id) {
            swal({
                title: "Estás seguro?",
                text: "El lubricant sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteLubricant(id);
            });
        }

        function deleteLubricant(id) {
            var urlPath = urlHost + "/administrator/parameters/lubricant/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            lubricant();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }
    </script>
    <!-- End Lubricant -->

    <!-- Lubricant Brand -->
    <script type="text/javascript">
        var lubricantBrandTable = null;
        function componentLocation() {
            $(".content_loading").fadeIn("slow");
            setTimeout(() => {
                $(".boxParameters").hide();
                $(".content_loading").fadeOut("slow");
                $("#idComponentLocation").show();
            }, 500)
        }

        function oilBrand() {
            if ($.fn.DataTable.isDataTable('#lubricantBrandTable')) {
                $('#lubricantBrandTable').DataTable().clear().destroy();
            }
            $("#idListOilBrand").empty();
            var urlPath = urlHost + "/administrator/parameters/oilBrand";
            $.ajax({
                type: 'POST',
                url: urlPath,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        $(".boxParameters").hide();

                        if (!$.isEmptyObject(response.data.oilBrands)) {
                            var configState = {!! json_encode(Config::get('constants.active')) !!};
                            $.each(response.data.oilBrands, function(index, oilBrand) {
                                $("#idListOilBrand").append('<tr>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    '<a href="javascript:;" onclick="openShowOilBrand(' + oilBrand
                                    .id + ')">' + oilBrand.name + '</a>' +
                                    '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-' + configState[oilBrand.state][
                                        'type'
                                    ] + '">' + configState[oilBrand.state]['name'] +
                                    '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a href="javascript:;" onclick="openEditOilBrand(' + oilBrand
                                    .id +
                                    ')" class="btn btn-info btn-xs mr-1"><i class="fa fa-pencil" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" onclick="openDeleteOilBrand(' + oilBrand
                                    .id +
                                    ')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>' +
                                    '</td>' +
                                    '</tr>');
                            });
                        } else {
                            $("#idListOilBrand").append('<tr>' +
                                '<td colspan="4">No se encontraron lubricant brand</td>' +
                                '</tr>');
                        }
                        $("#idBoxOilBrand").show();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                    lubricantBrandTable = $('#lubricantBrandTable').DataTable();
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openAddOilBrand() {
            $(".msgAddOilBrand").empty();
            $("#formAddOilBrand")[0].reset();
            $("#idAddOilBrand").modal();
        }

        function addOilBrand() {
            $(".msgAddOilBrand").empty();
            var formData = new FormData(document.getElementById("formAddOilBrand"));
            var urlPath = urlHost + "/administrator/parameters/oilBrand/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            oilBrand();
                            $("#formAddOilBrand")[0].reset();
                            backToTable('idTableOilBrand', 'idFormOilBrandCreate', 'idFormOilBrandEdit')
                            // $("#idAddOilBrand").modal("hide");
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_oil_brand_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        var idValOilBrand = null;

        function openEditOilBrand(id) {
            showFormEdit('idFormOilBrandEdit', 'idTableOilBrand');
            $(".msgEditOilBrand").empty();
            $("#formEditOilBrand")[0].reset();

            var urlPath = urlHost + "/administrator/parameters/oilBrand/edit";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {

                        idValOilBrand = id;

                        $("#idEditNameOilBrand").val(response.data.oil_brand.name);
                        $("#idEditStateOilBrand").val(response.data.oil_brand.state).trigger('change.select2');

                        // $("#idEditOilBrand").modal();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function updateOilBrand() {
            $(".msgEditOilBrand").empty();
            var formData = new FormData(document.getElementById("formEditOilBrand"));
            formData.append('id', idValOilBrand);

            var urlPath = urlHost + "/administrator/parameters/oilBrand/update";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            oilBrand();
                            $("#formEditOilBrand")[0].reset();
                            backToTable('idTableOilBrand', 'idFormOilBrandCreate', 'idFormOilBrandEdit')
                            // $("#idEditOilBrand").modal("hide");
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#edit_oil_brand_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        function openShowOilBrand(id) {
            $("#idTestShowOilBrand").empty();
            var urlPath = urlHost + "/administrator/parameters/oilBrand/show";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        $("#idOilBrandShowOilReference").empty();

                        $("#idNameShowOilBrand").html(response.data.oil_brand.name);

                        $.each(response.data.oil_reference, function(index, oilReference) {
                            $("#idOilBrandShowOilReference").append('<div class="media">' +
                                '<div class="media-body">' +
                                '<p>' +
                                '<strong>' + oilReference.name + '</strong>' +
                                '<span class="badge badge-dark float-right">' + oilReference
                                .reference + '</span>' +
                                '</p>' +
                                '</div>' +
                                '</div>');
                        });

                        $("#idShowOilBrand").modal();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openDeleteOilBrand(id) {
            swal({
                title: "Estás seguro?",
                text: "El lubricant brand sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteOilBrand(id);
            });
        }

        function deleteOilBrand(id) {
            var urlPath = urlHost + "/administrator/parameters/oilBrand/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            oilBrand();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }
    </script>
    <!-- End Lubricant Brand -->

    <!-- Lubricant Weight -->
    <script type="text/javascript">
        var lubricantWeightTable = null;
        function oilWeight() {
            if ($.fn.DataTable.isDataTable('#weightTable')) {
                $('#weightTable').DataTable().clear().destroy();
            }
            $("#idListOilWeight").empty();
            var urlPath = urlHost + "/administrator/parameters/oilWeight";
            $.ajax({
                type: 'POST',
                url: urlPath,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        $(".boxParameters").hide();

                        if (!$.isEmptyObject(response.data.oil_weights)) {
                            var configState = {!! json_encode(Config::get('constants.active')) !!};
                            $.each(response.data.oil_weights, function(index, oilWeight) {
                                $("#idListOilWeight").append('<tr>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    oilWeight.name + '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-' + configState[oilWeight.state][
                                        'type'
                                    ] + '">' + configState[oilWeight.state]['name'] + '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a href="javascript:;" onclick="openEditOilWeight(' + oilWeight
                                    .id +
                                    ')" class="btn btn-info btn-xs mr-1"><i class="fa fa-pencil" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" onclick="openDeleteOilWeight(' +
                                    oilWeight.id +
                                    ')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>' +
                                    '</td>' +
                                    '</tr>');
                            });
                        } else {
                            $("#idListOilWeight").append('<tr>' +
                                '<td colspan="3">No se encontraron lubricant weight</td>' +
                                '</tr>');
                        }
                        $("#idBoxOilWeight").show();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                    lubricantWeightTable = ('#weightTable').DataTable();
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openAddOilWeight() {
            $(".msgAddOilWeight").empty();
            $("#formAddOilWeight")[0].reset();
            $("#idAddOilWeight").modal();
        }

        function addOilWeight() {
            $(".msgAddOilWeight").empty();
            var formData = new FormData(document.getElementById("formAddOilWeight"));
            var urlPath = urlHost + "/administrator/parameters/oilWeight/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            oilWeight();
                            $("#formAddOilWeight")[0].reset();
                            backToTable('idTableOilWeight', 'idFormOilWeightCreate',
                                'idFormOilWeightEdit')
                            // $("#idAddOilWeight").modal("hide");
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_oil_weight_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        var idValOilWeight = null;

        function openEditOilWeight(id) {
            showFormEdit('idFormOilWeightEdit', 'idTableOilWeight');
            $(".msgEditOilWeight").empty();
            $("#formEditOilWeight")[0].reset();

            var urlPath = urlHost + "/administrator/parameters/oilWeight/edit";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {

                        idValOilWeight = id;

                        $("#idEditNameOilWeight").val(response.data.oil_weight.name);
                        $("#idEditStateOilWeight").val(response.data.oil_weight.state).trigger(
                            'change.select2');

                        // $("#idEditOilWeight").modal();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function updateOilWeight() {
            $(".msgEditOilWeight").empty();
            var formData = new FormData(document.getElementById("formEditOilWeight"));
            formData.append('id', idValOilWeight);

            var urlPath = urlHost + "/administrator/parameters/oilWeight/update";
            console.log(formData);
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            oilWeight();
                            $("#formEditOilWeight")[0].reset();
                            backToTable('idTableOilWeight', 'idFormOilWeightCreate',
                                'idFormOilWeightEdit')
                            // $("#idEditOilWeight").modal("hide");
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#edit_oil_weight_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        function openDeleteOilWeight(id) {
            swal({
                title: "Estás seguro?",
                text: "El lubricant weight sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteOilWeight(id);
            });
        }

        function deleteOilWeight(id) {
            var urlPath = urlHost + "/administrator/parameters/oilWeight/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            oilWeight();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }
    </script>
    <!-- End Lubricant Weight -->

    <!-- System Type -->
    <script type="text/javascript">
        var systemTypeTable = null;
        function systemType() {
            if ($.fn.DataTable.isDataTable('#systemTypeTable')) {
                $('#systemTypeTable').DataTable().clear().destroy();
            }
            $("#idListSystemType").empty();
            var urlPath = urlHost + "/administrator/parameters/systemType";
            $.ajax({
                type: 'POST',
                url: urlPath,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        $(".boxParameters").hide();

                        if (!$.isEmptyObject(response.data.systemTypes)) {
                            var configState = {!! json_encode(Config::get('constants.active')) !!};
                            $.each(response.data.systemTypes, function(index, systemType) {
                                var tempLabel = '';
                                if (systemType.reference == '40') {
                                    tempLabel = '<span class="badge badge-info">V40C</span>';
                                } else if (systemType.reference == '100') {
                                    tempLabel = '<span class="badge badge-warning">V100C</span>';
                                } else {
                                    tempLabel = '<span class="text-muted">-</span>';
                                }

                                $("#idListSystemType").append('<tr>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    '<a href="javascript:;" onclick="openShowSystemType(' +
                                    systemType.id + ')">' + systemType.name + '</a>' +
                                    '</td>' +
                                    '<td>' + tempLabel + '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-' + configState[systemType.state][
                                        'type'
                                    ] + '">' + configState[systemType.state]['name'] + '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a href="javascript:;" onclick="openEditSystemType(' +
                                    systemType.id +
                                    ')" class="btn btn-info btn-xs mr-1"><i class="fa fa-pencil" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" onclick="openDeleteSystemType(' +
                                    systemType.id +
                                    ')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>' +
                                    '</td>' +
                                    '</tr>');
                            });
                        } else {
                            $("#idListSystemType").append('<tr>' +
                                '<td colspan="5">No se encontraron system type</td>' +
                                '</tr>');
                        }
                        $("#idBoxSystemType").show();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                    systemTypeTable = $('#systemTable').DataTable();
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        };

        function productType(page = 1) {
            $("#idListProductType").empty();
            $("#idPaginationProductType").hide();

            // Obtener valores de filtros
            var search = $("#idSearchProductType").val() || '';
            var state = $("#idFilterStateProductType").val() || '';
            var perPage = $("#idPerPageProductType").val() || 25;

            var urlPath = urlHost + "/administrator/parameters/productType";
            $.ajax({
                type: 'GET',
                url: urlPath,
                data: {
                    page: page,
                    search: search,
                    state: state,
                    perPage: perPage
                },
                dataType: 'json',
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        $(".boxParameters").hide();

                        if (response.data.productTypes && response.data.productTypes.length > 0) {
                            var configState = {!! json_encode(Config::get('constants.active')) !!};
                            $.each(response.data.productTypes, function(index, productType) {
                                $("#idListProductType").append('<tr>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    productType.name +
                                    '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-' + configState[productType.state][
                                        'type'
                                    ] + '">' + configState[productType.state]['name'] + '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a href="javascript:;" onclick="openEditProductType(' +
                                    productType.id +
                                    ')" class="btn btn-info btn-xs mr-2"><i class="fa fa-pencil" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" onclick="openDeleteProductType(' +
                                    productType.id +
                                    ')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>' +
                                    '</td>' +
                                    '</tr>');
                            });

                            // Generar paginación
                            generatePaginationProductType(response.data.pagination);
                        } else {
                            $("#idListProductType").append('<tr>' +
                                '<td colspan="3">No se encontraron tipos de producto</td>' +
                                '</tr>');
                            $("#idPaginationProductType").hide();
                        }
                        $("#idBoxProductType").show();
                    } else {
                        swal("Oops!", response.message || "Hemos tenido problemas, intenta nuevamente",
                            "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        };

        function openAddSystemType() {
            $(".msgAddSystemType").empty();
            $("#formAddSystemType")[0].reset();
            $("#idAddSystemType").modal();
        }

        function addSystemType() {
            $(".msgAddSystemType").empty();
            var formData = new FormData(document.getElementById("formAddSystemType"));
            var urlPath = urlHost + "/administrator/parameters/systemType/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            systemType();
                            $("#formAddSystemType")[0].reset();
                            backToTable('idTableSystemType', 'idFormSystemTypeCreate',
                                'idFormSystemTypeEdit')
                            // $("#idAddSystemType").modal("hide");
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_system_type_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        var idValSystemType = null;

        function openEditSystemType(id) {
            showFormEdit('idFormSystemTypeEdit', 'idTableSystemType');
            $(".msgEditSystemType").empty();
            $("#formEditSystemType")[0].reset();

            var urlPath = urlHost + "/administrator/parameters/systemType/edit";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {

                        idValSystemType = id;

                        $("#idEditNameSystemType").val(response.data.system_type.name);
                        $("#idEditTempSystemType").val(response.data.system_type.reference);
                        $.each(response.data.test_method, function(index, testMethod) {
                            $("#checkboxEditSystemType_" + testMethod.id_test_method).prop('checked',
                                true);
                        });
                        $("#idEditStateSystemType").val(response.data.system_type.state).trigger(
                            'change.select2');
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function updateSystemType() {
            $(".msgEditSystemType").empty();
            var formData = new FormData(document.getElementById("formEditSystemType"));
            formData.append('id', idValSystemType);

            var urlPath = urlHost + "/administrator/parameters/systemType/update";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            systemType();
                            $("#formEditSystemType")[0].reset();
                            backToTable('idTableSystemType', 'idFormSystemTypeCreate',
                                'idFormSystemTypeEdit')
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#edit_system_type_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        function openShowSystemType(id) {
            $("#idTestShowSystemType").empty();
            var urlPath = urlHost + "/administrator/parameters/systemType/show";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {

                        $("#idNameShowSystemType").html(response.data.system_type.name);

                        $.each(response.data.test_method, function(index, testMethod) {
                            $("#idTestShowSystemType").append(
                                '<div class="col-md-4 text-center mt-5 mb-5">' +
                                '<span class="badge badge-lg badge-dark wth100">' +
                                '<b class="font-weight-bold ftz-15">' + testMethod.get_test_method
                                .name + '</b>' +
                                '</span>' +
                                '</div>');
                        });

                        $("#idShowSystemType").modal();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openDeleteSystemType(id) {
            swal({
                title: "Estás seguro?",
                text: "El system type sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteSystemType(id);
            });
        }

        function deleteSystemType(id) {
            var urlPath = urlHost + "/administrator/parameters/systemType/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            systemType();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }
    </script>
    <!-- End System Type -->

    <!-- Make -->
    <script type="text/javascript">
        var makeTable = null;
        function make() {
            if ($.fn.DataTable.isDataTable('#makeTable')) {
                $('#makeTable').DataTable().clear().destroy();
            }
            $("#idListMake").empty();
            var urlPath = urlHost + "/administrator/parameters/make";
            $.ajax({
                type: 'POST',
                url: urlPath,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        $(".boxParameters").hide();

                        if (!$.isEmptyObject(response.data.make)) {
                            var configState = {!! json_encode(Config::get('constants.active')) !!};
                            $.each(response.data.make, function(index, make) {
                                $("#idListMake").append('<tr>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    '<a href="javascript:;" onclick="openShowMake(' + make.id +
                                    ')">' + make.name + '</a>' +
                                    '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-' + configState[make.state]['type'] +
                                    '">' + configState[make.state]['name'] + '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a href="javascript:;" onclick="openEditMake(' + make.id +
                                    ')" class="btn btn-info btn-xs mr-1"><i class="fa fa-pencil" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" onclick="openDeleteMake(' + make.id +
                                    ')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>' +
                                    '</td>' +
                                    '</tr>');
                            });
                        } else {
                            $("#idListMake").append('<tr>' +
                                '<td colspan="4">No se encontraron make</td>' +
                                '</tr>');
                        }
                        $("#idBoxMake").show();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                    makeTable = $('#makeTable').DataTable();
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openAddMake() {
            $(".msgAddMake").empty();
            $("#formAddMake")[0].reset();
            $("#idAddMake").modal();
        }

        function addMake() {
            $(".msgAddMake").empty();
            var formData = new FormData(document.getElementById("formAddMake"));
            var urlPath = urlHost + "/administrator/parameters/make/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            make();
                            $("#formAddMake")[0].reset();
                            backToTable('idTableMake', 'idFormMakeCreate', 'idFormMakeEdit')
                            // $("#idAddMake").modal("hide");
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_make_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        var idValMake = null;

        function openEditMake(id) {
            showFormEdit('idFormMakeEdit', 'idTableMake');
            $(".msgEditMake").empty();
            $("#formEditMake")[0].reset();

            var urlPath = urlHost + "/administrator/parameters/make/edit";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {

                        idValMake = id;

                        $("#idEditNameMake").val(response.data.make.name);
                        $("#idEditStateMake").val(response.data.make.state).trigger('change.select2');
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function updateMake() {
            $(".msgEditMake").empty();
            var formData = new FormData(document.getElementById("formEditMake"));
            formData.append('id', idValMake);

            var urlPath = urlHost + "/administrator/parameters/make/update";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            make();
                            $("#formEditMake")[0].reset();
                            backToTable('idTableMake', 'idFormMakeCreate', 'idFormMakeEdit')
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#edit_make_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        function openShowMake(id) {
            var urlPath = urlHost + "/administrator/parameters/make/show";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        $("#idNameShowMake").html(response.data.make.name);

                        $("#idMakeShowModel").empty();
                        $.each(response.data.model, function(index, model) {
                            $("#idMakeShowModel").append('<div class="media">' +
                                '<div class="media-body">' +
                                '<p>' +
                                '<strong>' + model.name + '</strong>' +
                                '</p>' +
                                '</div>' +
                                '</div>');
                        });

                        $("#idShowMake").modal();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openDeleteMake(id) {
            swal({
                title: "Estás seguro?",
                text: "El Make sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteMake(id);
            });
        }

        function deleteMake(id) {
            var urlPath = urlHost + "/administrator/parameters/make/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            make();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }
    </script>
    <!-- End Make -->

    <!-- Model -->
    <script type="text/javascript">
        var modelTable = null;

        function model() {
            if ($.fn.DataTable.isDataTable('#modelTable')) {
                $('#modelTable').DataTable().clear().destroy();
            }
            $("#idListModel").empty();
            var urlPath = urlHost + "/administrator/parameters/model";
            $.ajax({
                type: 'POST',
                url: urlPath,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        $(".boxParameters").hide();

                        if (!$.isEmptyObject(response.data.model)) {
                            var configState = {!! json_encode(Config::get('constants.active')) !!};
                            $.each(response.data.model, function(index, model) {
                                $("#idListModel").append('<tr>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    model.name + '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-dark">' + model.get_make.name +
                                    '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-' + configState[model.state]['type'] +
                                    '">' + configState[model.state]['name'] + '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a href="javascript:;" onclick="openEditModel(' + model.id +
                                    ')" class="btn btn-info btn-xs mr-1"><i class="fa fa-pencil" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" onclick="openDeleteModel(' + model.id +
                                    ')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>' +
                                    '</td>' +
                                    '</tr>');
                            });
                        } else {
                            $("#idListModel").append('<tr>' +
                                '<td colspan="4">No se encontraron model</td>' +
                                '</tr>');
                        }

                        var $addMakeModel = $("#idFormModelCreate #idAddMakeModel, #idAddModel #idAddMakeModel");
                        var $editMakeModel = $("#idFormModelEdit #idEditMakeModel, #idEditModel #idEditMakeModel");
                        var $filterMakeModel = $("#idFilterMakeModel");

                        $addMakeModel.empty();
                        $editMakeModel.empty();
                        $filterMakeModel.empty();

                        $filterMakeModel.append('<option value="">Todos</option>');

                        $.each(response.data.make, function(index, make) {
                            var option = '<option value="' + make.id + '">' + make.name + '</option>';
                            $addMakeModel.append(option);
                            $editMakeModel.append(option);
                            $filterMakeModel.append(option);
                        });

                        $("#idBoxModel").show();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                    modelTable = $('#modelTable').DataTable();
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function addModel() {
            $(".msgAddModel").empty();
            var formData = new FormData(document.getElementById("formAddModel"));
            var urlPath = urlHost + "/administrator/parameters/model/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            model();
                            $("#formAddModel")[0].reset();
                            backToTable('idTableModel', 'idFormModelCreate', 'idFormModelEdit');
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_model_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        var idValModel = null;

        function openEditModel(id) {
            showFormEdit('idFormModelEdit', 'idTableModel');
            $(".msgEditModel").empty();
            $("#formEditModel")[0].reset();

            var urlPath = urlHost + "/administrator/parameters/model/edit";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {

                        idValModel = id;

                        $("#idEditMakeModel").val(response.data.model.extra).trigger('change.select2');
                        $("#idEditNameModel").val(response.data.model.name);
                        $("#idEditStateModel").val(response.data.model.state).trigger('change.select2');

                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function updateModel() {
            $(".msgEditModel").empty();
            var formData = new FormData(document.getElementById("formEditModel"));
            formData.append('id', idValModel);

            var urlPath = urlHost + "/administrator/parameters/model/update";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            model();
                            $("#formEditModel")[0].reset();
                            backToTable('idTableModel', 'idFormModelCreate', 'idFormModelEdit');
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#edit_model_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar los valores correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        function openDeleteModel(id) {
            swal({
                title: "Estás seguro?",
                text: "El Model sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteModel(id);
            });
        }

        function deleteModel(id) {
            var urlPath = urlHost + "/administrator/parameters/model/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            model();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }
    </script>
    <!-- End Model -->

    <!-- Product Type -->
    <script type="text/javascript">
        function openAddProductType() {
            $(".msgAddProductType").empty();
            $("#formAddProductType")[0].reset();
            $("#idAddProductType").modal();
        }

        function addProductType() {
            $(".msgAddProductType").empty();
            var formData = new FormData(document.getElementById("formAddProductType"));
            var urlPath = urlHost + "/administrator/parameters/productType/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        $("#formAddProductType")[0].reset();
                        backToTable('idTableProductType','idFormProductTypeCreate','idFormProductTypeEdit');
                        productType();
                    } else {
                        swal("Oops!", response.message || "Hemos tenido problemas, intenta nuevamente",
                            "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    var errors = xhr.responseJSON;
                    $.each(errors.errors, function(key, error) {
                        $("#add_product_type_" + key).text(error[0]);
                    });
                }
            });
        }

        var idValProductType = null;

        function openEditProductType(id) {
            showFormEdit('idFormProductTypeEdit', 'idTableProductType');
            $(".msgEditProductType").empty();
            $("#formEditProductType")[0].reset();

            var urlPath = urlHost + "/administrator/parameters/productType/edit";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        idValProductType = response.data.id;
                        $("#idEditNameProductType").val(response.data.name);
                        $("#idEditReferenceProductType").val(response.data.reference);
                        $("#idEditStateProductType").val(response.data.state).trigger('change.select2');
                    } else {
                        swal("Oops!", response.message || "Tipo de producto no encontrado", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function updateProductType() {
            $(".msgEditProductType").empty();
            var formData = new FormData(document.getElementById("formEditProductType"));
            formData.append('id', idValProductType);

            var urlPath = urlHost + "/administrator/parameters/productType/update";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        backToTable('idTableProductType','idFormProductTypeCreate','idFormProductTypeEdit');
                        swal("Excelente!", response.message, "success");
                        productType();
                    } else {
                        swal("Oops!", response.message || "Hemos tenido problemas, intenta nuevamente",
                            "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    var errors = xhr.responseJSON;
                    $.each(errors.errors, function(key, error) {
                        $("#edit_product_type_" + key).text(error[0]);
                    });
                }
            });
        }

        function openDeleteProductType(id) {
            swal({
                title: "Estás seguro?",
                text: "El tipo de producto sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteProductType(id);
            });
        }

        function deleteProductType(id) {
            var urlPath = urlHost + "/administrator/parameters/productType/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        swal("Excelente!", response.message, "success");
                        productType(); // Recargar la lista
                    } else {
                        swal("Oops!", response.message || "Hemos tenido problemas, intenta nuevamente",
                            "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        // Funciones auxiliares para Product Type
        function generatePaginationProductType(paginationData) {
            var info = "Mostrando " + paginationData.from + " a " + paginationData.to + " de " + paginationData.total +
                " registros";
            $("#idInfoProductType").html(info);

            var pagination = '';

            // Botón anterior
            if (paginationData.current_page > 1) {
                pagination += '<li class="paginate_button previous"><a href="javascript:;" onclick="productType(' + (
                    paginationData.current_page - 1) + ')">Anterior</a></li>';
            } else {
                pagination += '<li class="paginate_button previous disabled"><span>Anterior</span></li>';
            }

            // Números de página
            var startPage = Math.max(1, paginationData.current_page - 2);
            var endPage = Math.min(paginationData.last_page, paginationData.current_page + 2);

            for (var i = startPage; i <= endPage; i++) {
                if (i == paginationData.current_page) {
                    pagination += '<li class="paginate_button active"><span>' + i + '</span></li>';
                } else {
                    pagination += '<li class="paginate_button"><a href="javascript:;" onclick="productType(' + i + ')">' +
                        i + '</a></li>';
                }
            }

            // Botón siguiente
            if (paginationData.current_page < paginationData.last_page) {
                pagination += '<li class="paginate_button next"><a href="javascript:;" onclick="productType(' + (
                    paginationData.current_page + 1) + ')">Siguiente</a></li>';
            } else {
                pagination += '<li class="paginate_button next disabled"><span>Siguiente</span></li>';
            }

            $("#idPaginationLinksProductType").html(pagination);
            $("#idPaginationProductType").show();
        }

        function applyFiltersProductType() {
            productType(1); // Ir a la primera página con los filtros aplicados
        }

        function clearFiltersProductType() {
            $("#idSearchProductType").val('');
            $("#idFilterStateProductType").val('');
            $("#idPerPageProductType").val('25');
            productType(1); // Recargar sin filtros
        }

        // Event listeners para Product Type
        $(document).ready(function() {
            $("#idBtnFilterProductType").click(function() {
                $("#idContentFilterProductType").slideToggle("slow");
            });

            // Búsqueda en tiempo real (con delay)
            var searchTimeout;
            $("#idSearchProductType").on('keyup', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    applyFiltersProductType();
                }, 500); // Esperar 500ms después de que el usuario deje de escribir
            });

            // Aplicar filtros al cambiar el estado
            $("#idFilterStateProductType").on('change', function() {
                applyFiltersProductType();
            });

            // Aplicar filtros al cambiar registros por página
            $("#idPerPageProductType").on('change', function() {
                applyFiltersProductType();
            });
        });
    </script>
    <!-- End Product Type -->

    <!-- Equipment Location -->
    <script type="text/javascript">
        function equipmentLocation(page = 1) {
            $("#idListEquipmentLocation").empty();
            $("#idPaginationEquipmentLocation").hide();

            // Obtener valores de filtros
            var search = $("#idSearchEquipmentLocation").val() || '';
            var state = $("#idFilterStateEquipmentLocation").val() || '';
            var perPage = $("#idPerPageEquipmentLocation").val() || 25;

            var urlPath = urlHost + "/administrator/parameters/equipmentLocation";
            $.ajax({
                type: 'GET',
                url: urlPath,
                data: {
                    page: page,
                    search: search,
                    state: state,
                    perPage: perPage
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        $(".boxParameters").hide();

                        if (response.data.equipmentLocations && response.data.equipmentLocations.length > 0) {
                            var configState = {!! json_encode(Config::get('constants.active')) !!};
                            $.each(response.data.equipmentLocations, function(index, location) {
                                var description = location.reference || 'Sin descripción';
                                $("#idListEquipmentLocation").append('<tr>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    location.name + '</td>' +
                                    '<td style="vertical-align:middle;">' + description + '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-' + configState[location.state][
                                        'type'
                                    ] + '">' + configState[location.state]['name'] +
                                    '</span>' +
                                    '</td>' +
                                    '<td>' +
                                    '<a href="javascript:;" onclick="openEditEquipmentLocation(' +
                                    location.id +
                                    ')" class="btn btn-info btn-xs mr-2"><i class="fa fa-pencil" aria-hidden="true"></i></a>' +
                                    '<a href="javascript:;" onclick="openDeleteEquipmentLocation(' +
                                    location.id +
                                    ')" class="btn btn-danger btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></a>' +
                                    '</td>' +
                                    '</tr>');
                            });

                            // Generar paginación si hay datos
                            if (response.data.pagination) {
                                generatePaginationEquipmentLocation(response.data.pagination);
                            }
                        } else {
                            $("#idListEquipmentLocation").append(
                                '<tr><td colspan="4" class="text-center">No hay locaciones registradas</td></tr>'
                            );
                        }
                        $("#idBoxEquipmentLocation").show();
                    } else {
                        swal("Oops!", response.message || "Hemos tenido problemas, intenta nuevamente",
                            "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openAddEquipmentLocation() {
            $(".msgAddEquipmentLocation").empty();
            $("#formAddEquipmentLocation")[0].reset();
            $("#idAddEquipmentLocation").modal();
        }

        function addEquipmentLocation() {
            $(".msgAddEquipmentLocation").empty();
            var formData = new FormData(document.getElementById("formAddEquipmentLocation"));
            var urlPath = urlHost + "/administrator/parameters/equipmentLocation/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        swal("Excelente!", response.message, "success");
                        backToTable('idTableEquipmentLocation','idFormEquipmentLocationCreate','idFormEquipmentLocationEdit');
                        equipmentLocation();
                    } else {
                        swal("Oops!", response.message || "Hemos tenido problemas, intenta nuevamente",
                            "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    var errors = xhr.responseJSON;
                    if (errors && errors.errors) {
                        $.each(errors.errors, function(key, error) {
                            $("#add_equipment_location_" + key).text(error[0]);
                        });
                    }
                }
            });
        }

        var idValEquipmentLocation = null;

        function openEditEquipmentLocation(id) {
            showFormEdit('idFormEquipmentLocationEdit', 'idTableEquipmentLocation');
            $(".msgEditEquipmentLocation").empty();
            $("#formEditEquipmentLocation")[0].reset();

            var urlPath = urlHost + "/administrator/parameters/equipmentLocation/edit";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        idValEquipmentLocation = response.data.id;
                        $("#idEditNameEquipmentLocation").val(response.data.name);
                        $("#idEditDescriptionEquipmentLocation").val(response.data.reference || '');
                        $("#idEditStateEquipmentLocation").val(response.data.state).trigger('change.select2');
                    } else {
                        swal("Oops!", response.message || "Locación de equipo no encontrada", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function updateEquipmentLocation() {
            $(".msgEditEquipmentLocation").empty();
            var formData = new FormData(document.getElementById("formEditEquipmentLocation"));
            formData.append('id', idValEquipmentLocation);

            var urlPath = urlHost + "/administrator/parameters/equipmentLocation/update";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        swal("Excelente!", response.message, "success");
                        backToTable('idTableEquipmentLocation','idFormEquipmentLocationCreate','idFormEquipmentLocationEdit');
                        equipmentLocation();
                    } else {
                        swal("Oops!", response.message || "Hemos tenido problemas, intenta nuevamente",
                            "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    var errors = xhr.responseJSON;
                    if (errors && errors.errors) {
                        $.each(errors.errors, function(key, error) {
                            $("#edit_equipment_location_" + key).text(error[0]);
                        });
                    }
                }
            });
        }

        function openDeleteEquipmentLocation(id) {
            swal({
                title: "Estás seguro?",
                text: "La locación de equipo sera eliminada!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteEquipmentLocation(id);
            });
        }

        function deleteEquipmentLocation(id) {
            var urlPath = urlHost + "/administrator/parameters/equipmentLocation/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        swal("Excelente!", response.message, "success");
                        equipmentLocation(); // Recargar la lista
                    } else {
                        swal("Oops!", response.message || "Hemos tenido problemas, intenta nuevamente",
                            "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        // Funciones auxiliares para Equipment Location
        function generatePaginationEquipmentLocation(paginationData) {
            var info = "Mostrando " + paginationData.from + " a " + paginationData.to + " de " + paginationData.total +
                " registros";
            $("#idInfoEquipmentLocation").html(info);

            var pagination = '';

            // Botón anterior
            if (paginationData.current_page > 1) {
                pagination += '<li class="paginate_button previous"><a href="javascript:;" onclick="equipmentLocation(' + (
                    paginationData.current_page - 1) + ')">Anterior</a></li>';
            } else {
                pagination += '<li class="paginate_button previous disabled"><span>Anterior</span></li>';
            }

            // Números de página
            var startPage = Math.max(1, paginationData.current_page - 2);
            var endPage = Math.min(paginationData.last_page, paginationData.current_page + 2);

            for (var i = startPage; i <= endPage; i++) {
                if (i == paginationData.current_page) {
                    pagination += '<li class="paginate_button active"><span>' + i + '</span></li>';
                } else {
                    pagination += '<li class="paginate_button"><a href="javascript:;" onclick="equipmentLocation(' + i +
                        ')">' +
                        i + '</a></li>';
                }
            }

            // Botón siguiente
            if (paginationData.current_page < paginationData.last_page) {
                pagination += '<li class="paginate_button next"><a href="javascript:;" onclick="equipmentLocation(' + (
                    paginationData.current_page + 1) + ')">Siguiente</a></li>';
            } else {
                pagination += '<li class="paginate_button next disabled"><span>Siguiente</span></li>';
            }

            $("#idPaginationLinksEquipmentLocation").html(pagination);
            $("#idPaginationEquipmentLocation").show();
        }

        function applyFiltersEquipmentLocation() {
            equipmentLocation(1); // Ir a la primera página con los filtros aplicados
        }

        function clearFiltersEquipmentLocation() {
            $("#idSearchEquipmentLocation").val('');
            $("#idFilterStateEquipmentLocation").val('');
            $("#idPerPageEquipmentLocation").val('25');
            equipmentLocation(1); // Recargar sin filtros
        }

        // Event listeners para Equipment Location
        $(document).ready(function() {
            $("#idBtnFilterEquipmentLocation").click(function() {
                $("#idContentFilterEquipmentLocation").slideToggle("slow");
            });

            // Búsqueda en tiempo real (con delay)
            var searchTimeout;
            $("#idSearchEquipmentLocation").on('keyup', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    applyFiltersEquipmentLocation();
                }, 500); // Esperar 500ms después de que el usuario deje de escribir
            });

            // Aplicar filtros al cambiar el estado
            $("#idFilterStateEquipmentLocation").on('change', function() {
                applyFiltersEquipmentLocation();
            });

            // Aplicar filtros al cambiar registros por página
            $("#idPerPageEquipmentLocation").on('change', function() {
                applyFiltersEquipmentLocation();
            });
        });
    </script>
    <!-- End Equipment Location -->

    <!-- Component location -->
    <script type="text/javascript">
        function openCreateComponent() {
            $(".msgAddAccount").empty();
            $("#idAddComponent").modal();
        }

        function addComponent() {
            var formData = new FormData(document.getElementById("formAddComponent"));

            var urlPath = urlHost + "/administrator/components/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            $(".content_loading").fadeIn("slow");
                            // backToTable('idTableComponentLocation', 'idFormComponentLocationCreate', 'idFormComponentLocationEdit')
                            location.reload();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_component_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe enviar el nombre correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        var idComponent = null;

        function openEditComponent(id, name, state) {
            showFormEdit('idFormComponentLocationEdit', 'idTableComponentLocation');
            $(".msgAddAccount").empty();
            idComponent = id;
            $("#idEditComponentName").val(name);
            $("#idEditComponentState").val(state).trigger('change.select2');
            // $("#idEditComponent").modal();
        }

        function updateComponent() {
            var formData = new FormData(document.getElementById("formEditComponent"));
            formData.append('id', idComponent);

            var urlPath = urlHost + "/administrator/components/update";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            $(".content_loading").fadeIn("slow");
                            // backToTable('idTableComponentLocation', 'idFormComponentLocationCreate', 'idFormComponentLocationEdit')
                            location.reload();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_component_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe enviar el nombre correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        function openDeleteComponent(id, name) {
            swal({
                title: "Estás seguro?",
                text: "El component location " + name + " sera eliminado!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteComponent(id);
            });
        }

        function deleteComponent(id) {
            var urlPath = urlHost + "/administrator/components/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Eliminado!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            location.reload();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openTraceabilityParams(id, name) {
            $('#componentNameTitleParams').text(name);
            $('#traceabilityLoadingParams').show();
            $('#traceabilityContentParams').hide();
            $('#idTraceabilityModalParams').modal('show');

            var urlPath = urlHost + "/administrator/components/" + id + "/get-traceability";
            $.ajax({
                type: 'GET',
                url: urlPath,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#traceabilityLoadingParams').hide();
                    if (response.state == 1) {
                        var component = response.data.component;
                        var audit = response.data.audit;

                        $('#componentCustomerParams').text(component.get_customer ? component.get_customer
                            .company : 'No asignado');

                        var stateConfig = {!! json_encode(Config::get('constants.states')) !!};
                        var stateBadge = '<span class="badge badge-' + stateConfig[component.state].type +
                            '">' +
                            stateConfig[component.state].name + '</span>';
                        $('#componentStateParams').html(stateBadge);
                        $('#totalEventsParams').text(audit.length);

                        var tbody = '';
                        if (audit.length > 0) {
                            audit.forEach(function(log) {
                                tbody += buildAuditRowParams(log, stateConfig);
                            });
                        } else {
                            tbody =
                                '<tr><td colspan="6" class="text-center"><em class="text-muted">No se encontraron registros</em></td></tr>';
                        }

                        $('#traceabilityTableBodyParams').html(tbody);
                        $('#traceabilityContentParams').show();
                    } else {
                        swal("Error", response.message, "error");
                        $('#idTraceabilityModalParams').modal('hide');
                    }
                },
                error: function(xhr) {
                    $('#traceabilityLoadingParams').hide();
                    swal("Error", "No se pudo cargar la trazabilidad", "error");
                    $('#idTraceabilityModalParams').modal('hide');
                }
            });
        }

        function buildAuditRowParams(log, stateConfig) {
            var date = new Date(log.created_at);
            var dateStr = date.toLocaleDateString('es-ES');
            var timeStr = date.toLocaleTimeString('es-ES');

            var actionBadge = getActionBadgeParams(log.action);
            var details = getActionDetailsParams(log, stateConfig);
            var equipment = log.equipment ? '<strong>' + log.equipment.unit_id + '</strong>' :
                '<span class="text-muted">-</span>';
            var customer = getCustomerInfoParams(log);

            return '<tr>' +
                '<td class="text-center"><strong>' + dateStr + '<br>' + timeStr + '</strong></td>' +
                '<td>' + (log.user ? log.user.name + '<br><small class="text-muted">' + (log.user.email || '') +
                    '</small>' : 'Sistema') + '</td>' +
                '<td class="text-center">' + actionBadge + '</td>' +
                '<td>' + details + '</td>' +
                '<td class="text-center">' + equipment + '</td>' +
                '<td>' + customer + '</td>' +
                '</tr>';
        }

        function getActionBadgeParams(action) {
            var badges = {
                'created': '<span class="badge badge-success"><i class="fa fa-plus-circle"></i> Creado</span>',
                'renamed': '<span class="badge badge-info"><i class="fa fa-edit"></i> Renombrado</span>',
                'assigned': '<span class="badge badge-primary"><i class="fa fa-link"></i> Asignado</span>',
                'unassigned': '<span class="badge badge-warning"><i class="fa fa-unlink"></i> Desasignado</span>',
                'state_changed': '<span class="badge badge-secondary"><i class="fa fa-toggle-on"></i> Estado</span>',
                'customer_changed': '<span class="badge badge-purple"><i class="fa fa-exchange"></i> Cliente</span>',
                'equipment_change': '<span class="badge badge-info"><i class="fa fa-arrows-h"></i> Cambio Equipo</span>',
                'deleted': '<span class="badge badge-danger"><i class="fa fa-trash"></i> Eliminado</span>'
            };
            return badges[action] || '<span class="badge badge-light">' + action + '</span>';
        }

        function getActionDetailsParams(log, stateConfig) {
            if (log.action === 'created') {
                var stateBadge = stateConfig[log.new_values.state] ?
                    '<span class="badge badge-' + stateConfig[log.new_values.state].type + '">' +
                    stateConfig[log.new_values.state].name + '</span>' : '';
                return '<strong>Nombre:</strong> ' + (log.new_values.name || '-') + '<br><strong>Estado:</strong> ' +
                    stateBadge;
            } else if (log.action === 'renamed') {
                return '<div class="row align-items-center"><div class="col-5"><strong>Anterior:</strong><br><span class="text-danger">' +
                    (log.old_values.name || '-') + '</span></div>' +
                    '<div class="col-2 text-center"><i class="fa fa-arrow-right text-muted"></i></div>' +
                    '<div class="col-5"><strong>Nuevo:</strong><br><span class="text-success">' +
                    (log.new_values.name || '-') + '</span></div></div>';
            } else if (log.action === 'state_changed') {
                var oldBadge = stateConfig[log.old_values.state] ?
                    '<span class="badge badge-' + stateConfig[log.old_values.state].type + '">' +
                    stateConfig[log.old_values.state].name + '</span>' : '';
                var newBadge = stateConfig[log.new_values.state] ?
                    '<span class="badge badge-' + stateConfig[log.new_values.state].type + '">' +
                    stateConfig[log.new_values.state].name + '</span>' : '';
                return '<div class="row"><div class="col-5"><strong>Anterior:</strong><br>' + oldBadge + '</div>' +
                    '<div class="col-2 text-center"><i class="fa fa-arrow-right text-muted"></i></div>' +
                    '<div class="col-5"><strong>Nuevo:</strong><br>' + newBadge + '</div></div>';
            } else if (log.action === 'assigned') {
                return '<span class="text-success"><i class="fa fa-check"></i> Componente asignado a equipo</span>';
            } else if (log.action === 'unassigned') {
                return '<span class="text-warning"><i class="fa fa-times"></i> Componente desasignado</span>';
            } else if (log.action === 'deleted') {
                return '<span class="text-danger"><i class="fa fa-trash"></i> Registro eliminado</span>';
            }
            return log.notes || '<em class="text-muted">Sin detalles</em>';
        }

        function getCustomerInfoParams(log) {
            if (log.equipment && log.equipment.get_fleet && log.equipment.get_fleet.user) {
                return '<strong>' + log.equipment.get_fleet.user.company + '</strong><br>' +
                    '<small class="text-muted">' + log.equipment.get_fleet.name + '</small>';
            } else if (log.customer) {
                return '<strong>' + log.customer.company + '</strong>';
            }
            return '<span class="text-muted">-</span>';
        }
    </script>
    <!-- End Component location -->

    <script type="text/javascript">
        // Funciones auxiliares para filtros de Component Location
        function applyFiltersComponent() {
            // Los filtros se aplicarán directamente en la tabla DataTable
            var table = $('#componentTable').DataTable();

            // Obtener valores de filtros
            var name = $('#idFilterNameComponent').val();
            var customer = $('#idFilterCustomerComponent').val();
            var state = $('#idFilterStateComponent').val();

            // Limpiar filtros anteriores
            table.search('').columns().search('');

            // Aplicar filtro de nombre
            if (name) {
                table.column(1).search(name);
            }

            // Aplicar filtro de estado
            if (state) {
                var stateText = $('#idFilterStateComponent option:selected').text();
                table.column(2).search(stateText);
            }

            // Para el filtro de customer, necesitamos buscar en la columna 0
            if (customer) {
                var customerText = $('#idFilterCustomerComponent option:selected').text();
                table.column(0).search(customerText);
            }

            // Redibujar la tabla con los filtros aplicados
            table.draw();
        }

        function clearFiltersComponent() {
            $('#idFilterNameComponent').val('');
            $('#idFilterCustomerComponent').val('');
            $('#idFilterStateComponent').val('');

            var table = $('#componentTable').DataTable();
            table.search('').columns().search('').draw();
        }

        // Inicializar DataTable cuando se carga la página
        $(document).ready(function() {
            if (!$.fn.DataTable.isDataTable('#componentTable')) {
                $('#componentTable').DataTable({
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json"
                    },
                    "pageLength": 10
                });
            }
        });
    </script>


    <script type="text/javascript">
        function listParameters(id) {
            $("#idListParameter").empty();
            var urlPath = urlHost + "/administrator/parameters/list";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        // $("#idButtonEquipment").show();
                        idParameter = id;

                        if (!$.isEmptyObject(response.data.parameters)) {
                            var configState = {!! json_encode(Config::get('constants.active')) !!};
                            $.each(response.data.parameters, function(index, parameter) {
                                $("#idListParameter").append('<tr>' +
                                    '<td style="vertical-align:middle;" class="font-weight-bold">' +
                                    parameter.name + '</td>' +
                                    '<td>' +
                                    '<span class="badge badge-' + configState[parameter.state][
                                        'type'
                                    ] + '">' + configState[parameter.state]['name'] + '</span>' +
                                    '</td>' +
                                    '</tr>');
                            });
                        } else {
                            $("#idListParameter").append('<tr>' +
                                '<td colspan="4">No se encontraron parametros</td>' +
                                '</tr>');
                        }
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        var idParameter = null;

        function addParameter() {
            $(".msgAddAccount").empty();

            var formData = new FormData(document.getElementById("formAddParameter"));
            formData.append('id', idParameter);

            var urlPath = urlHost + "/administrator/parameters/store";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            $("#formAddParameter")[0].reset();
                            listParameters(response.data.parameters.id_parameter);
                            $("#idAddParameter").modal("hide");
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_parameter_" + index).html(value[0]);
                        });

                        swal("Oops!", "Debe ingresar el valor correctamente", "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                }
            });
        }

        function editAccount(id) {
            idFleet = null;
            idEditCustomer = null;

            var urlPath = urlHost + "/administrator/accounts/edit";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                },
                success: function(response) {
                    if (response.state == 1) {
                        idFleet = response.data.fleet.id;
                        idEditCustomer = response.data.fleet.id_customer;

                        if (response.data.customer.last_name != null) {
                            var varName = response.data.customer.name + ' ' + response.data.customer.last_name;
                        } else {
                            var varName = response.data.customer.name;
                        }

                        $("#idEditAccountCustomer").val(varName + ' - (' + response.data.customer.document +
                            ')');
                        $("#idEditAccountName").val(response.data.fleet.name);
                        $("#idEditAccountTelephone").val(response.data.fleet.telephone);
                        $("#idEditAccountEmail").val(response.data.fleet.email);
                        $("#idEditAccountState").val(response.data.fleet.state);
                        $("#idEditAccountAddress").val(response.data.fleet.address);

                        $("#idEditAccount").modal();
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function updateAccount() {
            $(".msgEditAccount").empty();

            var formData = new FormData(document.getElementById("formEditAccount"));
            formData.append('idFleet', idFleet);
            formData.append('idCustomer', idEditCustomer);

            var urlPath = urlHost + "/administrator/accounts/update";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                },
                success: function(response) {
                    if (response.state == 1) {
                        swal({
                            title: "Bien!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            $(".content_loading").fadeIn("slow");
                            location.reload();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    if (xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(index, value) {
                            $("#add_account_" + index).html(value[0]);
                        });
                    }
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openDelete(id, name, idCustomer) {
            swal({
                title: "Estás seguro?",
                text: "La cuenta " + name + " sera eliminada!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!",
                closeOnConfirm: false
            }, function() {
                deleteAccount(id, idCustomer);
            });
        }

        function deleteAccount(id, idCustomer) {
            var urlPath = urlHost + "/administrator/accounts/delete";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "id": id,
                    "idCustomer": idCustomer
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    // $('#loader_content').removeClass('hidden');
                },
                success: function(response) {
                    if (response.state == 1) {
                        swal({
                            title: "Eliminado!",
                            text: response.message,
                            type: "success",
                        }, function() {
                            $(".content_loading").fadeIn("slow");
                            location.reload();
                        });
                    } else if (response.state == 2) {
                        swal("Oops!", response.message, "warning");
                    } else {
                        swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }


        $("#idBtnFilter").click(function() {
            $("#idContentFilter").slideToggle("slow");
        });

        $("#idBtnFilterLubricant").click(function() {
            $("#idContentFilterLubricant").slideToggle("slow");
        });

        $("#idBtnFilterLubricantBrand").click(function() {
            $("#idContentFilterLubricantBrand").slideToggle("slow");
        });

        $("#idBtnFilterLubricantWeight").click(function() {
            $("#idContentFilterLubricantWeight").slideToggle("slow");
        });

        $("#idBtnFilterSystemType").click(function() {
            $("#idContentFilterSystemType").slideToggle("slow");
        });

        $("#idBtnFilterMake").click(function() {
            $("#idContentFilterMake").slideToggle("slow");
        });

        $("#idBtnFilterModel").click(function() {
            $("#idContentFilterModel").slideToggle("slow");
        });
    </script>

@endsection