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

@section('content')
<div class="content-wrapper" id="rulesApp" data-group-id={{$id}}>
    <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="box">
            <div class="box-header with-border">
                <div class="row align-items-center">
                    <div class="col-12">
                        <h4 class="box-title">Rules</h4>
                    </div>
                </div>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name" class="control-label">Name *</label>
                            <input type="text" placeholder="Nombre" autocomplete="off" class="form-control" v-model="name">
                            <small class="text-danger">{{ $errors->first('name') }}</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Type*</label>
                            <select name="type" v-model="type" disabled class="form-control">
                                <option value="" disabled selected>Seleccione un tipo de regla</option>
                                <option value="1">Equipos</option>
                                <option value="2">Lubricantes</option>
                                <option value="3">Contador de partículas</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group mb-0">
                            <label for="description" class="control-label">Diagnostico </label>
                            <textarea class="form-control" rows="5" placeholder="Description" v-model="description" required></textarea>
                            <small class="text-danger">{{ $errors->first('description') }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div v-for="(element, eIdx) in elements" :key="element.id" class="col-md-6">
                <div class="box box-slided-up itemComponent">
                    <div class="box-header with-border">
                        <input type="checkbox" :id="`md_checkbox_${element.id}`" class="filled-in chk-col-blue" v-model="element.checked">
                        <label class="font-weight-bold" :for="`md_checkbox_${element.id}`">@{{ element.name }}</label>
                        <ul class="box-controls pull-right">
                            <li><a class="box-btn-slide" href="#"></a></li>
                        </ul>
                    </div>
                    <div class="box-content">
                        <div class="box-body">
                            <div class="row" v-for="(rule, rIdx) in element.rules" :key="rIdx">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="value" class="font-weight-bold">Element</label>
                                        <input type="text" autocomplete="off" v-model="element.name" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Operator *</label>
                                        <select class="form-control" v-model="rule.operator">
                                            <option value="<"> {{'<'}} </option>
                                            <option value=">"> {{'>'}} </option>
                                            <option value="="> {{'='}} </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="value" class="font-weight-bold">Value *</label>
                                        <input type="number" placeholder="Value" v-model="rule.value" autocomplete="off" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Condition *</label>
                                        <select class="form-control" v-model="rule.condition">
                                            <option v-for="(constant, cIdx) in constants" :key="constant.id" :value="cIdx">@{{ constant.name }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Description *</label>
                                         <textarea name="description" id=""  v-model="rule.description" class="form-control" cols="30" rows="5"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <button class="btn btn-danger btn-xs btn-block" @click="deleteRule(eIdx, rIdx, rule)">Eliminar</button>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button class="btn btn-xs btn-block btn-info" @click="addRuleToElement(eIdx)"><i class="fa fa-plus"></i> Agregar </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn_admin btn-block" @click="saveRules()">Guardar</button>
            </div>
        </div>

    </section>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#rulesApp',
        data() {
            return {
                id: document.getElementById('rulesApp').dataset.groupId,
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                name: "",
                description: "",
                type: "",
                elements: [],
                constants: [],
                deleted: []
            }
        },
        methods: {
            validateGroupData() {
                if (this.name.length == 0) {
                    swal({
                        title: "",
                        text: "Debe ingresar un nombre para la regla",
                        type: "warning",
                        showCancelButton: false,
                        confirmButtonText: "Ok",
                        closeOnConfirm: true
                    });
                    return false;
                }
                if (this.description.length == 0) {
                    swal({
                        title: "",
                        text: "Debe ingresar una descripción para la regla",
                        type: "warning",
                        showCancelButton: false,
                        confirmButtonText: "Ok",
                        closeOnConfirm: true
                    });
                    return false;
                }
                return true;
            },
            addRuleToElement(element) {
                let rule = {
                    id: null,
                    operator: "<",
                    description:"",
                    value: "",
                    condition: 1
                }
                this.elements[element].rules.push(rule)
            },
            deleteRule(elementId, ruleId, rule) {
                swal({
                    title: "",
                    text: "¿Eliminar esta regla?",
                    type: "error",
                    showCancelButton: true,
                    cancelButtonText: 'Cancelar',
                    confirmButtonText: "Ok",
                    closeOnConfirm: true
                }, (function(e) {
                    if (e) {
                        this.elements[elementId].rules.splice(ruleId, 1);
                        if (rule.id !== null) {
                            this.deleted.push(rule.id)
                        }
                    }
                }).bind(this))
            },
            async loadGroupData() {
                $(".content_loading").fadeIn("slow");
                let req = await fetch(`/administrator/rules/getGroup/${this.id}`);
                let res = await req.json();

                this.name = res.data.name;
                this.description = res.data.description;
                this.type = res.data.type;
                $(".content_loading").fadeOut("slow");

                this.loadElements(res.data.get_rules);

            },
            async saveRules() {
                if (!this.validateGroupData()) {
                    return
                }

                let checkedElements = this.elements.filter(element => {
                    return element.checked;
                });

                if (checkedElements.length <= 0) {
                    swal({
                        title: "",
                        text: "Debe escoger por lo menos un elemento para la regla",
                        type: "warning",
                        showCancelButton: false,
                        confirmButtonText: "Ok",
                        closeOnConfirm: true
                    })
                    return
                }

                $(".content_loading").fadeIn("slow");
                let req = await fetch(`/administrator/rules/update/${this.id}`, {
                    method: 'put',
                    headers: {
                        'X-CSRF-TOKEN': this.csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        name: this.name,
                        description: this.description,
                        type: this.type,
                        elements: checkedElements,
                        deleted: this.deleted
                    })
                });
                let res = await req.json();
                $(".content_loading").fadeOut("slow");

                if (req.ok) {
                    swal({
                        title: "Correcto",
                        text: "Regla actualizada satisfactoriamente",
                        type: "success",
                        showCancelButton: false,
                        confirmButtonText: "Ok",
                        closeOnConfirm: true
                    }, function() {
                        $(".content_loading").fadeIn("slow");
                        window.location.href = "/administrator/rules"
                    })
                } else {
                    swal({
                        title: "",
                        text: "Ocurrió un problema al actualizar la regla",
                        type: "error",
                        showCancelButton: false,
                        confirmButtonText: "Ok",
                        closeOnConfirm: true
                    })
                }
            },
            async loadElements(currentRules) {
                $(".content_loading").fadeIn("slow");
                let req = await fetch(`/administrator/rules/elements/${this.type}`);
                let res = await req.json();
                let dataElements = []
                res.data.map(e => {
                    dataElements.push({
                        id: e.id,
                        name: e.name,
                        checked: false,
                        rules: []
                    })
                });

                currentRules.map(r => {
                    let index = dataElements.findIndex(e => e.name === r.element)
                    if (index !== -1) {
                        dataElements[index].checked = true;
                        dataElements[index].rules.push(r);
                    }
                })

                dataElements.map(de => {
                    if (de.rules.length === 0) {
                        de.rules.push({
                            id: null,
                            operator: "<",
                            value: 0,
                            condition: 1
                        })
                    }
                })

                this.elements = dataElements;
                $(".content_loading").fadeOut("slow");
            },
            async loadConstants() {
                let req = await fetch(`/administrator/constants`);
                let res = await req.json();
                this.constants = res.data;
            }
        },
        mounted() {
            this.loadConstants();
            this.loadGroupData();
        }
    })
</script>
@endsection