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

@section('content')
    <div class="content-wrapper" id="rulesApp">
        <section class="content-header">
            {{-- <h1>Rules</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"><a href="{{ route('administrator.rules.rework.index') }}"> Rules</a></li>
                <li class="breadcrumb-item active">Crear</li>
            </ol>
        </section>

        <section class="content">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if (session('danger'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('danger') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="row">
                <div class="col-md-4 col-sm-12">
                    <div class="box mb-0">
                        <div class="box-header with-border">
                            <div class="row align-items-center">
                                <div class="col-12">
                                    <h4 class="box-title">Crear regla</h4>
                                </div>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="form-group">
                                <label for="name" class="control-label">Name *</label>
                                <input type="text" placeholder="Nombre" autocomplete="off" v-model="rule.name"
                                    class="form-control">
                                <small class="text-danger">{{ $errors->first('name') }}</small>
                            </div>
                            <div class="form-group mb-0">
                                <label for="description" class="control-label">Description *</label>
                                <textarea class="form-control" rows="5" placeholder="Description" v-model="rule.description" required></textarea>
                                <small class="text-danger">{{ $errors->first('description') }}</small>
                            </div>
                        </div>
                    </div>
                    <div class="box mb-0">
                        <div class="box-body pt-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="idCustomer" class="control-label">Customers *</label>
                                        <v-select placeholder="Seleccione un cliente" label="name" @input="loadFleets()"
                                            :options="ruleOptions.customer" v-model="rule.customer"></v-select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="idAccount" class="control-label">Accounts</label>
                                            </div>
                                            <div class="col-md-6 text-right">
                                                <a href="#" @click="selectAllAccounts()">
                                                    <small><i class="fa"
                                                            :class="{ 'fa-square': selectAllButtons.accounts ==
                                                                true, 'fa-square-o': selectAllButtons.accounts ==
                                                                false }"
                                                            aria-hidden="true"></i> Select all</small>
                                                </a>
                                            </div>
                                        </div>
                                        <v-select placeholder="" label="name" :options="ruleOptions.accounts"
                                            @input="loadModels()" v-model="rule.accounts" multiple></v-select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="idEquipment" class="control-label">Model</label>
                                            </div>
                                            <div class="col-md-6 text-right">
                                                <a href="#" @click="selectAllModels()">
                                                    <small><i class="fa"
                                                            :class="{ 'fa-square': selectAllButtons.model ==
                                                                true, 'fa-square-o': selectAllButtons.model == false }"
                                                            aria-hidden="true"></i> Select all</small>
                                                </a>
                                            </div>
                                        </div>
                                        <v-select placeholder="" label="name" :options="ruleOptions.models"
                                            @input="loadComponents()" v-model="rule.models" multiple></v-select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="idComponentLocation" class="control-label">Component
                                                    Location</label>
                                            </div>
                                            <div class="col-md-6 text-right">
                                                <a href="#" @click="selectAllComponents()">
                                                    <small><i class="fa"
                                                            :class="{ 'fa-square': selectAllButtons.component ==
                                                                true, 'fa-square-o': selectAllButtons.component ==
                                                                false }"
                                                            aria-hidden="true"></i> Select all</small>
                                                </a>
                                            </div>
                                        </div>
                                        <v-select placeholder="" label="name" :options="ruleOptions.componentsLocation"
                                            v-model="rule.componentsLocation" multiple></v-select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box mb-0">
                        <div class="box-body pt-0">
                            <button class="btn btn-success btn-block" @click="saveRules()">Crear regla</button>
                            <a href="{{ route('administrator.rules.rework.index') }}" class="btn btn-danger btn-block">Cancelar</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 col-sm-12">
                   <div class="box">
                        <ul class="nav nav-tabs nav-tabs-danger nav-justified" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#wear">
                                    Desgaste <span v-html="remainingWear"></span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#contamination">
                                    Contaminación <span v-html="remainingContamination"></span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#oilHealth">
                                    Salud Lubricante <span v-html="remainingOilHealth"></span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#particleCounter">
                                    Contador de partículas <span v-html="remainingPc"></span>
                                </a>
                            </li>
                        </ul>

                        <div class="box-body tab-content">
                            <!-- TAB DESGASTE -->
                            <div class="tab-pane fade active show" id="wear">
                                <div class="mb-3 row justify-content-end align-items-center">
                                    <div class="col-md-12">
                                        <v-select
                                            multiple
                                            :options="elements.wear"
                                            label="name"
                                            :reduce="el => el.id"
                                            v-model="filters.wear"
                                            placeholder="Selecciona elementos de desgaste">
                                        </v-select>
                                    </div>
                                    <div class="col-md-12 pb-2 mt-2" style="border-bottom: 2px solid #3E3E3E">
                                        <strong class="mr-5">Filtros: </strong>
                                        <span v-for="id in filters.wear" :key="id" class="badge badge-danger mr-1">
                                            @{{ getElementName('wear', id) }}
                                            <i class="fa fa-times ml-1 cursor-pointer" @click="removeFilter('wear', id)"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div v-for="(element, i) in filteredWear" :key="element.id" class="col-md-6">
                                        <div class="box border" style="border-radius:10px">
                                            <div class="box-body">
                                                <div class="row align-items-center">
                                                    <div class="col">
                                                        <h5 class="box-title m-0">
                                                            <i class="fa fa-check-circle text-green" v-if="totalConditions(i, 1) > 0"></i>
                                                            <i v-else class="fa fa-question-circle"></i>
                                                            @{{ element.name }}
                                                        </h5>
                                                    </div>
                                                    <div class="col text-right">
                                                        <button class="btn btn-info" @click="selectElement(i, 1)" data-toggle="modal" data-target="#myModal">
                                                            (@{{ totalConditions(i, 1) }}) Condiciones
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- TAB CONTAMINACIÓN -->
                            <div class="tab-pane fade" id="contamination">
                                <div class="mb-3 row justify-content-end align-items-center">
                                    <div class="col-md-12">
                                        <v-select
                                            multiple
                                            :options="elements.contamination"
                                            label="name"
                                            :reduce="el => el.id"
                                            v-model="filters.contamination"
                                            placeholder="Selecciona elementos de contaminación">
                                        </v-select>
                                    </div>
                                    <div class="col-md-12 pb-2 mt-2" style="border-bottom: 2px solid #3E3E3E">
                                        <strong class="mr-5">Filtros: </strong>
                                        <span v-for="id in filters.contamination" :key="id" class="badge badge-warning mr-1">
                                            @{{ getElementName('contamination', id) }}
                                            <i class="fa fa-times ml-1 cursor-pointer" @click="removeFilter('contamination', id)"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div v-for="(element, i) in filteredContamination" :key="element.id" class="col-md-6">
                                        <div class="box border" style="border-radius:10px">
                                            <div class="box-body">
                                                <div class="row align-items-center">
                                                    <div class="col">
                                                        <h5 class="box-title m-0">
                                                            <i class="fa fa-check-circle text-green" v-if="totalConditions(i, 2) > 0"></i>
                                                            <i v-else class="fa fa-question-circle"></i>
                                                            @{{ element.name }}
                                                        </h5>
                                                    </div>
                                                    <div class="col text-right">
                                                        <button class="btn btn-info" @click="selectElement(i, 2)" data-toggle="modal" data-target="#myModal">
                                                            (@{{ totalConditions(i, 2) }}) Condiciones
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- TAB SALUD LUBRICANTE -->
                            <div class="tab-pane fade" id="oilHealth">
                                <div class="mb-3 row justify-content-end align-items-center">
                                    <div class="col-md-12">
                                        <v-select
                                            multiple
                                            :options="elements.oilHealth"
                                            label="name"
                                            :reduce="el => el.id"
                                            v-model="filters.oilHealth"
                                            placeholder="Selecciona elementos de salud del lubricante">
                                        </v-select>
                                    </div>
                                    <div class="col-md-12 pb-2 mt-2" style="border-bottom: 2px solid #3E3E3E">
                                        <strong class="mr-5">Filtros: </strong>
                                        <span v-for="id in filters.oilHealth" :key="id" class="badge badge-success mr-1">
                                            @{{ getElementName('oilHealth', id) }}
                                            <i class="fa fa-times ml-1 cursor-pointer" @click="removeFilter('oilHealth', id)"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div v-for="(element, i) in filteredOilHealth" :key="element.id" class="col-md-6">
                                        <div class="box border" style="border-radius:10px">
                                            <div class="box-body">
                                                <div class="row align-items-center">
                                                    <div class="col">
                                                        <h5 class="box-title m-0">
                                                            <i class="fa fa-check-circle text-green" v-if="totalConditions(i, 3) > 0"></i>
                                                            <i v-else class="fa fa-question-circle"></i>
                                                            @{{ element.name }}
                                                        </h5>
                                                    </div>
                                                    <div class="col text-right">
                                                        <button class="btn btn-info" @click="selectElement(i, 3)" data-toggle="modal" data-target="#myModal">
                                                            (@{{ totalConditions(i, 3) }}) Condiciones
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- TAB CONTADOR DE PARTÍCULAS -->
                            <div class="tab-pane fade" id="particleCounter">
                                <div class="mb-3 row justify-content-end align-items-center">
                                    <div class="col-md-12">
                                        <v-select
                                            multiple
                                            :options="elements.pc"
                                            label="name"
                                            :reduce="el => el.id"
                                            v-model="filters.pc"
                                            placeholder="Selecciona contador de partículas">
                                        </v-select>
                                    </div>
                                    <div class="col-md-12 pb-2 my-2" style="border-bottom: 2px solid #3E3E3E">
                                        <strong class="mr-5">Filtros: </strong>
                                        <span v-for="id in filters.pc" :key="id" class="badge badge-info mr-1">
                                            @{{ getElementName('pc', id) }}
                                            <i class="fa fa-times ml-1 cursor-pointer" @click="removeFilter('pc', id)"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div v-for="(element, i) in filteredPc" :key="element.id" class="col-md-6">
                                        <div class="box border" style="border-radius:10px">
                                            <div class="box-body">
                                                <div class="row align-items-center">
                                                    <div class="col">
                                                        <h5 class="box-title m-0">
                                                            <i class="fa fa-check-circle text-green" v-if="totalConditions(i, 4) > 0"></i>
                                                            <i v-else class="fa fa-question-circle"></i>
                                                            @{{ element.name }}
                                                        </h5>
                                                    </div>
                                                    <div class="col text-right">
                                                        <button class="btn btn-info" @click="selectElement(i, 4)" data-toggle="modal" data-target="#myModal">
                                                            (@{{ totalConditions(i, 4) }}) Condiciones
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="myModalLabel">Crear condiciones</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <div class="modal-body">
                            <div v-for="(condition, i) in selectedElementConditions" :key="i"
                                class="box mb-5"
                                :class="{ 'border-warning': condition.condition == 1, 'border-danger': condition.condition ==
                                    3 }"
                                style="border: 1px solid">
                                <button type="button" class="close" @click="deleteCondition(i)"
                                    style="position: absolute; right: 4px;">×</button>
                                <div class="box-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group mb-5">
                                                <label class="font-weight-bold">Operator *</label>
                                                <select class="form-control" v-model="condition.operator">
                                                    <option value="<"> {{ '<' }} </option>
                                                    <option value=">"> {{ '>' }} </option>
                                                    <option value="<="> {{ '≤' }} </option>
                                                    <option value=">="> {{ '≥' }} </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-5">
                                                <label for="value" class="font-weight-bold">Value *</label>
                                                <input v-model="condition.value" type="number" min="0"
                                                    placeholder="Value" autocomplete="off" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="form-group mb-5">
                                                <label class="font-weight-bold">Condition *</label>
                                                <select class="form-control" v-model="condition.condition">
                                                    <option value="2">NORMAL</option>
                                                    <option value="1">ABNORMAL</option>
                                                    <option value="3">CRITICAL</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group mb-0">
                                                <label for="description" class="font-weight-bold">Diagnostico *</label>
                                                <textarea v-model="condition.commentary" class="form-control" rows="3" placeholder="Description" required></textarea>
                                                <small class="text-danger">{{ $errors->first('description') }}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <label class="font-weight-bold">Comentarios por defecto</label>
                                                <v-select
                                                    :options="defaultComments"
                                                    v-model="condition.default_comments"
                                                    label="comment_text"
                                                    multiple
                                                    placeholder="Seleccione comentarios"
                                                ></v-select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group text-center m-0">
                                <button type="button" class="btn btn-info mt-5" @click="addCondition()"
                                    aria-hidden="true">Agregar condicion</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('js')
    <script>
        Vue.component('v-select', VueSelect.VueSelect);

        const app = new Vue({
            el: '#rulesApp',
            data() {
                return {
                    csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    constants: [],
                    rule: {
                        name: null,
                        description: null,
                        customer: [],
                        accounts: [],
                        models: [],
                        componentsLocation: [],
                        priority: 1
                    },
                    ruleOptions: {
                        customer: [],
                        accounts: [],
                        models: [],
                        componentsLocation: []
                    },
                    elements: {
                        wear: [],
                        contamination: [],
                        oilHealth: [],
                        pc: []
                    },
                    filters: {
                        wear: [],
                        contamination: [],
                        oilHealth: [],
                        pc: []
                    },
                    selectedElement: {
                        group: null,
                        id: null
                    },
                    selectAllButtons: {
                        accounts: false,
                        model: false,
                        component: false
                    },
                    selectedElementConditions: [],
                    defaultComments: []
                }
            },
            computed: {
                remainingWear() {
                    let count = 0;
                    this.elements.wear.map(el => {
                        if (el.conditions.length > 0) count++;
                    });
                    return `(${count}/${this.elements.wear.length}) ${count == this.elements.wear.length ? '<i class="fa fa-check-circle text-green" aria-hidden="true"></i>':'<i class="fa fa-question-circle" aria-hidden="true"></i>'}`;
                },
                remainingContamination() {
                    let count = 0;
                    this.elements.contamination.map(el => {
                        if (el.conditions.length > 0) count++;
                    });
                    return `(${count}/${this.elements.contamination.length}) ${count == this.elements.contamination.length ? '<i class="fa fa-check-circle text-green" aria-hidden="true"></i>':'<i class="fa fa-question-circle" aria-hidden="true"></i>'}`;
                },
                remainingOilHealth() {
                    let count = 0;
                    this.elements.oilHealth.map(el => {
                        if (el.conditions.length > 0) count++;
                    });
                    return `(${count}/${this.elements.oilHealth.length}) ${count == this.elements.oilHealth.length ? '<i class="fa fa-check-circle text-green" aria-hidden="true"></i>':'<i class="fa fa-question-circle" aria-hidden="true"></i>'}`;
                },
                remainingPc() {
                    let count = 0;
                    this.elements.pc.map(el => {
                        if (el.conditions.length > 0) count++;
                    });
                    return `(${count}/${this.elements.pc.length}) ${count == this.elements.pc.length ? '<i class="fa fa-check-circle text-green" aria-hidden="true"></i>':'<i class="fa fa-question-circle" aria-hidden="true"></i>'}`;
                },

                filteredWear() {
                    if (!this.filters.wear.length) return this.elements.wear
                    return this.elements.wear.filter(e => this.filters.wear.includes(e.id))
                },
                filteredContamination() {
                    if (!this.filters.contamination.length) return this.elements.contamination
                    return this.elements.contamination.filter(e => this.filters.contamination.includes(e.id))
                },
                filteredOilHealth() {
                    if (!this.filters.oilHealth.length) return this.elements.oilHealth
                    return this.elements.oilHealth.filter(e => this.filters.oilHealth.includes(e.id))
                },
                filteredPc() {
                    if (!this.filters.pc.length) return this.elements.pc
                    return this.elements.pc.filter(e => this.filters.pc.includes(e.id))
                }
            },
            methods: {
                calculatePriority() {
                    let priority = 1;
                    if (this.rule.accounts.length > 0) {
                        priority = 1;
                    }
                    if (this.rule.models.length > 0) {
                        priority = 2;
                    }
                    if (this.rule.componentsLocation.length > 0) {
                        priority = 3;
                    }
                    return priority;
                },
                addCondition() {
                    const groupMap = {
                        1: 'wear',
                        2: 'contamination',
                        3: 'oilHealth',
                        4: 'pc'
                    };
                    const groupName = groupMap[this.selectedElement.group];
                    if (groupName) {
                        this.elements[groupName][this.selectedElement.id].conditions.push({
                            operator: '<',
                            value: 0,
                            condition: 1,
                            commentary: '',
                            default_comments: []
                        })
                    }
                },
                deleteCondition(i) {
                    this.selectedElementConditions.splice(i, 1);
                },
                totalConditions(i, group) {
                    const groupMap = {
                        1: 'wear',
                        2: 'contamination',
                        3: 'oilHealth',
                        4: 'pc'
                    };
                    const groupName = groupMap[group];
                    if (groupName && this.elements[groupName][i]) {
                        return this.elements[groupName][i].conditions.length;
                    }
                    return 0;
                },
                selectElement(i, group) {
                    const groupMap = {
                        1: 'wear',
                        2: 'contamination',
                        3: 'oilHealth',
                        4: 'pc'
                    };
                    const groupName = groupMap[group];
                    if (groupName) {
                        this.selectedElementConditions = this.elements[groupName][i].conditions;
                    }
                    this.selectedElement.group = group;
                    this.selectedElement.id = i;
                },
                selectAllAccounts() {
                    this.selectAllButtons.accounts = !this.selectAllButtons.accounts;
                    if (this.selectAllButtons.accounts) {
                        this.rule.accounts = [...this.ruleOptions.accounts];
                    } else {
                        this.rule.accounts = [];
                    }
                    this.loadModels();
                },
                selectAllModels() {
                    this.selectAllButtons.model = !this.selectAllButtons.model;
                    if (this.selectAllButtons.model) {
                        this.rule.models = [...this.ruleOptions.models];
                    } else {
                        this.rule.models = [];
                    }
                    this.loadComponents();
                },
                validateRule() {
                    let error = '';
                    if (this.rule.name == null || this.rule.name == '') {
                        error = 'Por favor ingrese un nombre para la regla';
                    }
                    if (this.rule.description == null || this.rule.description == '') {
                        error = 'Por favor ingrese una descripción';
                    }
                    if (this.rule.customer.length == 0) {
                        error = 'Debe elegir por lo menos un Cliente para aplicar la regla';
                    }

                    if (error.length > 0) {
                        throw new Error(error)
                    }
                },
                selectAllComponents() {
                    this.selectAllButtons.component = !this.selectAllButtons.component;
                    if (this.selectAllButtons.component) {
                        this.rule.componentsLocation = [...this.ruleOptions.componentsLocation];
                    } else {
                        this.rule.componentsLocation = [];
                    }
                },
                async loadElements(type) {
                    $(".content_loading").fadeIn("slow");
                    let req = await fetch(`/administrator/rules/elements/${type}`);
                    let res = await req.json();
                    
                    if (type == 1) {
                        // Separar por condition_type para SACODE
                        let wear = [];
                        let contamination = [];
                        let oilHealth = [];
                        
                        res.data.map(e => {
                            const element = {
                                id: e.id,
                                name: e.name,
                                conditions: []
                            };
                            
                            if (e.condition_type == 1) {
                                wear.push(element);
                            } else if (e.condition_type == 2) {
                                contamination.push(element);
                            } else if (e.condition_type == 3) {
                                oilHealth.push(element);
                            }
                        });
                        
                        this.elements.wear = wear;
                        this.elements.contamination = contamination;
                        this.elements.oilHealth = oilHealth;
                    }
                    
                    if (type == 3) {
                        this.elements.pc = res.data
                            .filter(el => el.id !== 44)
                            .map(e => ({
                                id: e.id,
                                name: e.name,
                                conditions: []
                            }));
                    }

                    $(".content_loading").fadeOut("slow");
                },
                async loadConstants(type) {
                    let req = await fetch(`/administrator/constants`);
                    let res = await req.json();
                    this.constants = res.data;
                },
                async loadCustomers() {
                    let customers = [];
                    let req = await fetch(`/administrator/rules/applied/customers`, {
                        method: 'post',
                        headers: {
                            'X-CSRF-TOKEN': this.csrf,
                            'Content-Type': 'application/json'
                        }
                    });
                    let res = await req.json();
                    res.data.customers.map(c => {
                        customers.push({
                            id: c.id,
                            name: c.company
                        })
                    });
                    this.ruleOptions.customer = customers;
                },
                async loadFleets() {
                    $(".content_loading").fadeIn("slow");
                    let accounts = [];
                    let models = [];
                    let components = [];

                    let req = await fetch(`/administrator/rules/applied/customer`, {
                        method: 'post',
                        headers: {
                            'X-CSRF-TOKEN': this.csrf,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            customerId: this.rule.customer.id,
                        })
                    });
                    let res = await req.json();

                    res.data.accounts.map(ac => {
                        accounts.push({
                            id: ac.id,
                            name: ac.name
                        })
                    })
                    res.data.models.map(m => {
                        models.push({
                            id: m.unit_model,
                            name: m.fun_unit_model.name
                        })
                    })
                    res.data.components.map(c => {
                        components.push({
                            id: c.id,
                            name: c.name
                        })
                    })

                    this.ruleOptions.accounts = accounts;
                    this.ruleOptions.models = models;
                    this.ruleOptions.componentsLocation = components;

                    $(".content_loading").fadeOut("slow");
                },
                async loadModels() {
                    $(".content_loading").fadeIn("slow");
                    let accounts = [];
                    let models = [];
                    let components = [];

                    this.rule.accounts.map(f => {
                        accounts.push(+f.id);
                    })
                    let req = await fetch(`/administrator/rules/applied/equipments`, {
                        method: 'post',
                        headers: {
                            'X-CSRF-TOKEN': this.csrf,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            customerId: this.rule.customer.id,
                            accounts: accounts
                        })
                    });
                    let res = await req.json();

                    res.data.models.map(m => {
                        models.push({
                            id: m.unit_model,
                            name: m.fun_unit_model.name
                        })
                    })
                    res.data.components.map(c => {
                        components.push({
                            id: c.id,
                            name: c.name
                        })
                    })
                    this.ruleOptions.models = models;
                    this.ruleOptions.components = components;
                    $(".content_loading").fadeOut("slow");
                },
                async loadComponents() {
                    $(".content_loading").fadeIn("slow");
                    let models = [];
                    let components = [];
                    this.rule.models.map(m => {
                        models.push(+m.id);
                    });
                    let req = await fetch(`/administrator/rules/applied/components`, {
                        method: 'post',
                        headers: {
                            'X-CSRF-TOKEN': this.csrf,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            customerId: `${this.rule.customer.id}`,
                            equipments: models
                        })
                    });
                    let res = await req.json();
                    console.log(res)
                    res.data.components.map(c => {
                        components.push({
                            id: c.get_component_location.id,
                            name: c.get_component_location.name,
                        })
                    });
                    this.ruleOptions.componentsLocation = components;
                    $(".content_loading").fadeOut("slow");
                },
                async saveRules() {
                    $(".content_loading").fadeIn("slow");
                    this.rule.priority = this.calculatePriority();
                    try {
                        this.validateRule();
                        let req = await fetch('/administrator/rules/rework/store', {
                            method: 'post',
                            headers: {
                                'X-CSRF-TOKEN': this.csrf,
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                rule: this.rule,
                                elements: this.elements
                            })
                        });
                        let res = await req.json();
                        $(".content_loading").fadeOut("slow");
                        if (req.ok) {
                            swal({
                                title: "Correcto",
                                text: "Regla guardada satisfactoriamente",
                                type: "success",
                                showCancelButton: false,
                                confirmButtonText: "Ok",
                                closeOnConfirm: true
                            }, function() {
                                $(".content_loading").fadeIn("slow");
                                window.location.href = "/administrator/rules/rework/"
                            })
                        }
                    } catch (error) {
                        $(".content_loading").fadeOut("slow");
                        swal({
                            title: "",
                            text: error || "Ocurrió un problema al guardar la regla",
                            type: "error",
                            showCancelButton: false,
                            confirmButtonText: "Ok",
                            closeOnConfirm: true
                        })
                    }
                },

                getElementName(type, id) {
                    const el = this.elements[type].find(e => e.id === id)
                    return el ? el.name : ''
                },
                removeFilter(type, id) {
                    this.filters[type] = this.filters[type].filter(f => f !== id)
                },
                async loadDefaultComments() {
                    let req = await fetch('/comments/all/json');
                    let res = await req.json();
                    this.defaultComments = res;
                }

            },
            async mounted() {
                await this.loadDefaultComments();
                await this.loadCustomers();
                await this.loadElements(1);
                await this.loadElements(3);
            }
        })
    </script>
@endsection