@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-10">
                                <h4 class="box-title">Crear nueva regla</h4>
                            </div>
                            <div class="col-2">
                                <h4 class="box-title" id="rule_equipments_id"></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">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">
                    <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="#wear" role="tab">
                                Desgaste <span v-html="remainingWear"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#contamination" role="tab">
                                Contaminación <span v-html="remainingContamination"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#oilHealth" role="tab">
                                Salud Lubricante <span v-html="remainingOilHealth"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#particleCounter" role="tab">
                                Contador de partículas <span v-html="remainingPc"></span>
                            </a>
                        </li>
                    </ul>
                    <div class="box-body tab-content">
                        <div class="tab-pane fade active show" id="wear">
                            <div class="row">
                                <div v-for="(element, i) in elements.wear" :key="element.id" class="col-md-6">
                                    <div class="box">
                                        <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">
                                                    <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>
                        <div class="tab-pane fade" id="contamination">
                            <div class="row">
                                <div v-for="(element, i) in elements.contamination" :key="element.id" class="col-md-6">
                                    <div class="box">
                                        <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">
                                                    <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>
                        <div class="tab-pane fade" id="oilHealth">
                            <div class="row">
                                <div v-for="(element, i) in elements.oilHealth" :key="element.id" class="col-md-6">
                                    <div class="box">
                                        <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">
                                                    <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>
                        <div class="tab-pane fade" id="particleCounter">
                            <div class="row">
                                <div v-for="(element, i) in elements.pc" :key="element.id" class="col-md-6">
                                    <div class="box">
                                        <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">
                                                    <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: []
                },
                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"></i>':'<i class="fa fa-question-circle"></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"></i>':'<i class="fa fa-question-circle"></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"></i>':'<i class="fa fa-question-circle"></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"></i>':'<i class="fa fa-question-circle"></i>'}`;
            }
        },
        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) {
                    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();
                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/update/{{$id}}', {
                        method: 'put',
                        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
                    })
                }
            },
            async loadDefaultComments() {
                let req = await fetch('/comments/all/json');
                let res = await req.json();
                this.defaultComments = res;
            },
            async loadRuleData() {
                try {
                    let req = await fetch('/administrator/rules/rework/getRule?id={{$id}}');
                    let res = await req.json();
                    $('#rule_equipments_id').text("#" + res.data.id);
                    this.rule.name = res.data.name;
                    this.rule.description = res.data.description;
                    this.rule.customer = this.ruleOptions.customer.find(c => c.id == res.data.customer_id);
                    this.rule.accounts = JSON.parse(res.data.accounts);
                    this.rule.models = JSON.parse(res.data.models);
                    this.rule.componentsLocation = JSON.parse(res.data.components);

                    const savedElements = JSON.parse(res.data.elements);
                    
                    // Mapear elementos antiguos al nuevo formato
                    if (savedElements.equipments) {
                        this.elements.wear = savedElements.equipments || [];
                    }
                    if (savedElements.wear) {
                        this.elements.wear = savedElements.wear || [];
                    }
                    if (savedElements.contamination) {
                        this.elements.contamination = savedElements.contamination || [];
                    }
                    if (savedElements.oilHealth) {
                        this.elements.oilHealth = savedElements.oilHealth || [];
                    }
                    if (savedElements.pc) {
                        this.elements.pc = savedElements.pc || [];
                    }

                } 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.loadCustomers();
            await this.loadElements(1);
            await this.loadElements(3);
            await this.loadRuleData();
            await this.loadFleets();
        }
    })
</script>
@endsection