@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">Editar</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-4">
                <div class="box">
                    <div class="box-header with-border">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <h4 class="box-title">Crear nueva 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">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="idCustomer" class="control-label">Temperature *</label>
                                    <v-select placeholder="Seleccione una temperatura" label="name" :options="ruleOptions.temperatures" v-model="rule.temperature"></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">Oil weight *</label>
                                        </div>
                                        <div class="col-md-6 text-right">
                                            <a href="#" @click="selectAllOilWeights()">
                                                <small><i class="fa" :class="{'fa-square': selectAllButtons.oilWeights == true, 'fa-square-o': selectAllButtons.oilWeights == false}" aria-hidden="true"></i> Select all</small>
                                            </a>
                                        </div>
                                    </div>
                                    <v-select placeholder="" label="name" @input="loadReferencesAndBrands()" :options="ruleOptions.oilWeights" v-model="rule.oilWeight" 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">Oil Reference</label>
                                        </div>
                                        <div class="col-md-6 text-right">
                                            <a href="#" @click="selectAllOilReferences()">
                                                <small><i class="fa" :class="{'fa-square': selectAllButtons.oilReferences == true, 'fa-square-o': selectAllButtons.oilReferences == false}" aria-hidden="true"></i> Select all</small>
                                            </a>
                                        </div>
                                    </div>
                                    <v-select placeholder="" label="name" @input="loadOilBrands()" :options="ruleOptions.oilReferences" v-model="rule.oilReference" 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">Oil Brand</label>
                                        </div>
                                        <div class="col-md-6 text-right">
                                            <a href="#" @click="selectAllOilBrands()">
                                                <small><i class="fa" :class="{'fa-square': selectAllButtons.oilBrands == true, 'fa-square-o': selectAllButtons.oilBrands == false}" aria-hidden="true"></i> Select all</small>
                                            </a>
                                        </div>
                                    </div>
                                    <v-select placeholder="" label="name" :options="ruleOptions.oilBrands" v-model="rule.oilBrand" multiple></v-select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="box-body">
                        <button class="btn btn_admin btn-block" @click="saveRules()">Guardar</button>
                    </div>
                </div>
            </div>
            <div class="col-8">
                <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="#home" role="tab" aria-expanded="true">
                                Valores
                            </a>
                        </li>
                    </ul>
                    <div class="box-body tab-content">
                        <div class="tab-pane fade active show" id="home" aria-expanded="true">
                            <div v-for="(condition, i) in rule.conditions" :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>
        </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,
                    temperature: [],
                    oilWeight: [],
                    oilReference: [],
                    oilBrand: [],
                    priority: 1,
                    conditions: []
                },
                ruleOptions: {
                    temperatures: [40, 100],
                    oilWeights: [],
                    oilReferences: [],
                    oilBrands: []
                },
                selectAllButtons: {
                    oilWeights: false,
                    oilReferences: false,
                    oilBrands: false
                },
                defaultComments: []
            }
        },
        computed: {

        },
        methods: {
            calculatePriority() {
                let priority = 1;
                if (this.rule.oilWeight.length > 0) {
                    priority = 1;
                }
                if (this.rule.oilReference.length > 0) {
                    priority = 2;
                }
                if (this.rule.oilBrand.length > 0) {
                    priority = 3;
                }
                return priority;
            },
            addCondition() {
                this.rule.conditions.push({
                    operator: '<',
                    value: 0,
                    condition: 1,
                    commentary: '',
                    default_comments: []
                })
            },
            deleteCondition(i) {
                this.rule.conditions.splice(i, 1);
            },
            selectAllOilWeights() {
                this.selectAllButtons.oilWeights = !this.selectAllButtons.oilWeights;
                if (this.selectAllButtons.oilWeights) {
                    this.rule.oilWeight = [...this.ruleOptions.oilWeights];
                } else {
                    this.rule.oilWeight = [];
                }
                this.loadReferencesAndBrands();
            },
            selectAllOilReferences() {
                this.selectAllButtons.oilReferences = !this.selectAllButtons.oilReferences;
                if (this.selectAllButtons.oilReferences) {
                    this.rule.oilReference = [...this.ruleOptions.oilReferences];
                } else {
                    this.rule.oilReference = [];
                }
                this.loadOilBrands();
            },
            selectAllOilBrands() {
                this.selectAllButtons.oilBrands = !this.selectAllButtons.oilBrands;
                if (this.selectAllButtons.oilBrands) {
                    this.rule.oilBrand = [...this.ruleOptions.oilBrands];
                } else {
                    this.rule.oilBrand = [];
                }
            },
            async loadConstants(type) {
                let req = await fetch(`/administrator/constants`);
                let res = await req.json();
                this.constants = res.data;
            },
            async loadOilWeight() {
                let oilWeights = [];
                let req = await fetch(`/administrator/rules/lubricant/oilWeights`);
                let res = await req.json();
                res.data.map(ow => {
                    oilWeights.push({
                        id: ow.id,
                        name: ow.name
                    })
                });
                this.ruleOptions.oilWeights = oilWeights;
            },
            async loadReferencesAndBrands() {
                $(".content_loading").fadeIn("slow");
                let weights = [];
                let references = [];
                let brands = [];

                this.rule.oilWeight.map(ow => {
                    weights.push(ow.id);
                })

                let req = await fetch(`/administrator/rules/lubricant/referencesAndBrands`, {
                    method: 'post',
                    headers: {
                        'X-CSRF-TOKEN': this.csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        oilWeights: weights,
                    })
                });
                let res = await req.json();

                res.data.references.map(r => {
                    references.push({
                        id: r.id,
                        name: r.name
                    })
                })
                res.data.brands.map(b => {
                    brands.push({
                        id: b.lub_brand,
                        name: b.get_lub_brand.name
                    })
                })

                this.ruleOptions.oilReferences = references;
                this.ruleOptions.oilBrands = brands;

                $(".content_loading").fadeOut("slow");
            },
            async loadOilBrands() {
                $(".content_loading").fadeIn("slow");
                let references = [];
                let brands = [];

                this.rule.oilReference.map(r => {
                    references.push(+r.id);
                })

                let req = await fetch(`/administrator/rules/lubricant/brands`, {
                    method: 'post',
                    headers: {
                        'X-CSRF-TOKEN': this.csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        oilReferences: references
                    })
                });

                let res = await req.json();

                res.data.brands.map(b => {
                    brands.push({
                        id: b.lub_brand,
                        name: b.get_lub_brand.name
                    })
                })

                this.ruleOptions.oilBrands = brands;
                this.rule.oilBrand = this.rule.oilBrand.filter(ob => {
                    return brands.findIndex(brand => brand.id == ob.id) == -1 ? false : true
                });

                $(".content_loading").fadeOut("slow");
            },
            async saveRules() {
                $(".content_loading").fadeIn("slow");
                this.rule.priority = this.calculatePriority();
                let req = await fetch('/administrator/rules/rework/updateVisc/{{$id}}', {
                    method: 'put',
                    headers: {
                        'X-CSRF-TOKEN': this.csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        rule: this.rule
                    })
                });
                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/"
                    })
                } else {
                    swal({
                        title: "",
                        text: "Ocurrió un problema al guardar la regla",
                        type: "error",
                        showCancelButton: false,
                        confirmButtonText: "Ok",
                        closeOnConfirm: true
                    })
                }
            },
            async loadDefaultComments() {
                let req = await fetch('/comments/all/json');
                let res = await req.json();
                this.defaultComments = res;
            },
            async loadViscData() {
                try {
                    let req = await fetch('/administrator/rules/rework/getRuleVisc?id={{$id}}');
                    let res = await req.json();
                    console.log(res);

                    this.rule.name = res.data.name;
                    this.rule.description = res.data.description;
                    this.rule.temperature = res.data.temperature;
                    this.rule.oilWeight = JSON.parse(res.data.oil_weights);
                    this.rule.oilReference = JSON.parse(res.data.oil_references);
                    this.rule.oilBrand = JSON.parse(res.data.oil_brands);

                    this.rule.conditions = JSON.parse(res.data.conditions);

                } catch (error) {
                    swal({
                        title: "",
                        text: error || "Ocurrió un problema al guardar la regla",
                        type: "error",
                        showCancelButton: false,
                        confirmButtonText: "Ok",
                        closeOnConfirm: true
                    })
                }
            }
        },
        async mounted() {
            await this.loadDefaultComments();
            await this.loadOilWeight();
            await this.loadViscData();
        }
    })
</script>
@endsection