@extends('layout.administrator.index')
@section('title', 'Componentes del usuario')

@section('style')
<style>
    .vs__dropdown-menu {
        max-height: 180px !important;
    }
</style>
@endsection

@section('content')
<div class="content-wrapper" id="components" data-customer="{{$id}}" data-client="{{$user->customer_id}}">
    <section class="content-header">
        {{-- <h1>Componentes</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 active">Componentes</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col">
                <div class="box">
                    <div class="box-header">
                        <h5 class="box-title">Actualizar permisos</h5>
                    </div>
                    <div class="box-body pb-0">
                        <form id="idFormAdd" method="post">
                            <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()" id="idSelectAllAccounts" data-select="false">
                                                    <small><i :class="selectedAll.fleets ? 'fa fa-square' : 'fa fa-square-o'" aria-hidden="true"></i> @{{ selectedAll.fleets ? 'deselect all':'Select all'}}</small>
                                                </a>
                                            </div>
                                        </div>
                                        <v-select multiple placeholder="Seleccione una cuenta" :options="fleets" v-model="selectedFleets" @input="loadModels()" label="name"></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()" id="idSelectAllEquipment" data-select="false">
                                                    <small><i :class="selectedAll.models ? 'fa fa-square' : 'fa fa-square-o'" aria-hidden="true"></i> @{{ selectedAll.models ? 'deselect all':'Select all'}}</small>
                                                </a>
                                            </div>
                                        </div>
                                        <v-select multiple placeholder="Seleccione un modelo" :options="models" v-model="selectedModels" @input="loadComponents()" label="name"></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()" id="idSelectAllComponentLocation" data-select="false">
                                                    <small><i :class="selectedAll.components ? 'fa fa-square' : 'fa fa-square-o'" aria-hidden="true"></i> @{{ selectedAll.components ? 'deselect all':'Select all'}}</small>
                                                </a>
                                            </div>
                                        </div>
                                        <v-select multiple placeholder="Seleccione un component location" :options="components" v-model="selectedComponents" label="name"></v-select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="box-footer">
                        <button class="btn btn-info btn-block" @click="save()">Guardar</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="box">
                    <div class="box-header">
                        <h5 class="box-title">Configuración actual</h5>
                    </div>
                    <div class="box-body">
                        <h5 class="m-0 font-weight-bold">Accounts</h5>
                        @foreach($accounts as $account)
                        <span>{{$account->name}}</span> <span class="font-weight-bold">{{!$loop->last ? '|' : ''}}</span>
                        @endforeach
                        <hr class="mt-5 mb-5">
                        <h5 class="m-0 font-weight-bold">Models</h5>
                        @foreach($models as $model)
                        <span>{{$model->name}}</span> <span class="font-weight-bold">{{!$loop->last ? '|' : ''}}</span>
                        @endforeach
                        <hr class="mt-5 mb-5">
                        <h5 class="m-0 font-weight-bold">Components Location</h5>
                        @foreach($components as $component)
                        <span>{{$component->name}}</span> <span class="font-weight-bold">{{!$loop->last ? '|' : ''}}</span>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

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

    new Vue({
        el: '#components',
        data() {
            return {
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                customer: document.getElementById('components').dataset.customer,
                client: document.getElementById('components').dataset.client,
                fleets: [],
                selectedFleets: [],
                models: [],
                selectedModels: [],
                components: [],
                selectedComponents: [],
                selectedAll: {
                    fleets: false,
                    models: false,
                    components: false
                }
            }
        },
        methods: {
            selectAllAccounts() {
                let id = document.getElementById('idSelectAllAccounts')
                id.dataset.select = !id.dataset.select;
                this.selectedAll.fleets = !this.selectedAll.fleets
                if (this.selectedAll.fleets) {
                    this.selectedFleets = this.fleets;
                } else {
                    this.selectedFleets = [];
                }
            },
            selectAllModels() {
                let id = document.getElementById('idSelectAllEquipment')
                id.dataset.select = !id.dataset.select;
                this.selectedAll.models = !this.selectedAll.models;
                if (this.selectedAll.models) {
                    this.selectedModels = this.models;
                } else {
                    this.selectedModels = [];
                }
            },
            selectAllComponents() {
                let id = document.getElementById('idSelectAllComponentLocation')
                id.dataset.select = !id.dataset.select;
                this.selectedAll.components = !this.selectedAll.components;
                if (this.selectedAll.components) {
                    this.selectedComponents = this.components;
                } else {
                    this.selectedComponents = [];
                }
            },
            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.client,
                    })
                });
                let res = await req.json();

                res.data.accounts.map(ac => {
                    accounts.push({
                        id: ac.id,
                        name: ac.name
                    })
                })
                res.data.models.filter(m => m.fun_unit_model).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.fleets = accounts;
                this.models = models;
                this.components = components;

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

                this.selectedFleets.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.client,
                        accounts: accounts
                    })
                });
                let res = await req.json();

                res.data.models.filter(m => m.fun_unit_model).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.models = models;
                this.components = components;
                $(".content_loading").fadeOut("slow");
            },
            async loadComponents() {
                $(".content_loading").fadeIn("slow");
                let models = [];
                let components = [];
                this.selectedModels.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.client,
                        equipments: models
                    })
                });
                let res = await req.json();
                console.log(res)
                res.data.components.map(c => {
                    components.push({
                        id: c.get_component_location.id,
                        name: c.get_component_location.name,
                    })
                });
                this.components = components;
                $(".content_loading").fadeOut("slow");
            },
            async save() {
                $(".content_loading").fadeIn("slow");
                let accounts = [];
                let models = [];
                let components = [];

                this.selectedFleets.map(f => {
                    accounts.push(+f.id);
                });
                this.selectedModels.map(m => {
                    models.push(+m.id);
                });
                this.selectedComponents.map(c => {
                    components.push(+c.id)
                });

                if (accounts.length == 0 || models.length == 0 || components.length == 0) {
                    $(".content_loading").fadeOut("slow");
                    swal({
                        title: "Error",
                        text: "Por favor, llene todos los cambios",
                        type: "error",
                    });
                    return
                }

                let req = await fetch(`/administrator/customers/users/components/store`, {
                    method: 'post',
                    headers: {
                        'X-CSRF-TOKEN': this.csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        customer: this.customer,
                        client: this.client,
                        accounts: accounts,
                        models: models,
                        components: components
                    })
                });
                let res = await req.json();
                $(".content_loading").fadeOut("slow");
                if (req.ok) {
                    swal({
                        title: "Permiso creado",
                        text: "Permiso creado correctamente",
                        type: "success",
                    }, function() {
                        $(".content_loading").fadeIn("slow");
                        location.reload();
                    });
                }
            }
        },
        mounted() {
            this.loadFleets()
        }
    })
</script>
@endsection