@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 de regla - <span class="text-danger">Viscosidad</span></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">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 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="#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/storeVisc', {
                        method: 'post',
                        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 mounted() {
                await this.loadOilWeight();
                await this.loadDefaultComments();
            }
        })
    </script>
@endsection