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

@section('content')
<div class="content-wrapper" id="components" data-customer="{{$id}}" data-client="{{Auth::id()}}">
    <section class="content-header">
        {{-- <h1>Componentes</h1> --}}
        <ol class="breadcrumb">
            <li class="breadcrumb-item"> <button class="btn btn-success" @click="save()">Guardar</button></li>
            <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="container" style="margin-top: 25px;">
        <div class="box">
            <div class="box-header">
                <h5 class="box-title">Configuración actual</h5>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col">
                        <h5>Flotas</h5>
                        <ul>
                            @foreach($selectedComponents['fleets'] as $fleet)
                            <li>{{$fleet}}</li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="col">
                        <h5>Equipos</h5>
                        <ul>
                            @foreach($selectedComponents['equipments'] as $equipment)
                            <li>{{$equipment->unit_id}}</li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="col">
                        <h5>Component Location</h5>
                        <ul>
                            @foreach($selectedComponents['componentsLocation'] as $component)
                            <li>{{$component->getComponentLocation->name}}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-12 col-md-4">
                <div class="box">
                    <div class="box-header with-border">
                        <h4 class="box-title">Flotas</h4>
                        <!-- <div class="box-controls pull-right">
                            <div class="box-header-actions">
                                <button class="btn btn-info btn-xs">Todos</button>
                                <button class="btn btn-info btn-xs">Ninguno</button>
                            </div>
                        </div> -->
                    </div>
                    <div class="box-body">
                        <template v-if="fleets.length > 0">
                            <div class="form-group" v-for="fleet in fleets" :key="fleet.id">
                                <input type="checkbox" :id="`md_checkbox_${fleet.id}`" v-model="fleet.checked" class="filled-in chk-col-maroon">
                                <label :for="`md_checkbox_${fleet.id}`">@{{fleet.name}}</label>
                            </div>
                        </template>
                        <template v-else>
                            <p>Cargando...</p>
                        </template>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="box">
                    <div class="box-header with-border">
                        <h4 class="box-title">Equipos</h4>
                        <!-- <div class="box-controls pull-right">
                            <div class="box-header-actions">
                                <button class="btn btn-info btn-xs">Todos</button>
                                <button class="btn btn-info btn-xs">Ninguno</button>
                            </div>
                        </div> -->
                    </div>
                    <div class="box-body">
                        <template v-if="equipments.length > 0">
                            <div class="form-group" v-for="equipment in equipments" :key="equipment.id">
                                <input type="checkbox" :id="`md_checkbox_${equipment.id}`" v-model="equipment.checked" class="filled-in chk-col-maroon">
                                <label :for="`md_checkbox_${equipment.id}`">@{{equipment.name}}</label>
                            </div>
                        </template>
                        <template v-else>
                            <p>Seleccione una flota</p>
                        </template>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="box">
                    <div class="box-header with-border">
                        <h4 class="box-title">Component location</h4>
                        <!-- <div class="box-controls pull-right">
                            <div class="box-header-actions">
                                <button class="btn btn-info btn-xs">Todos</button>
                                <button class="btn btn-info btn-xs">Ninguno</button>
                            </div>
                        </div> -->
                    </div>
                    <div class="box-body">
                        <template v-if="componentsLocation.length > 0">
                            <div class="form-group" v-for="component in componentsLocation" :key="component.id">
                                <input type="checkbox" :id="`md_checkbox_${component.id}`" v-model="component.checked" class="filled-in chk-col-maroon">
                                <label :for="`md_checkbox_${component.id}`">@{{component.name}}</label>
                            </div>
                        </template>
                        <template v-else>
                            <p>Seleccione un equipo</p>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('js')
<script>
    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: [],
                equipments: [],
                componentsLocation: [],
                selectedComponents: []
            }
        },
        mounted() {
            this.loadData();
        },
        watch: {
            fleets: {
                handler: function(newValue, oldValue) {
                    this.loadEquipments();
                },
                deep: true
            },
            equipments: {
                handler: function(newValue, oldValue) {
                    this.loadComponents();
                },
                deep: true
            }
        },
        methods: {
            async loadData() {
                $(".content_loading").fadeIn("slow");
                await this.loadFleets();
                await this.loadSelectedComponents();
                $(".content_loading").fadeOut("slow");

            },
            async loadFleets() {
                let req = await fetch(`/administrator/fleets/${this.client}`);
                let res = await req.json();
                let fleets = [];
                res.data.map(f => {
                    fleets.push({
                        id: f.id,
                        code: f.code,
                        name: f.name,
                        checked: false
                    });
                });
                this.fleets = fleets;
            },
            async loadSelectedComponents() {
                let req = await fetch(`/administrator/customers/users/${this.customer}/components/list`);
                let res = await req.json();
                this.selectedComponents = res.data;
            },
            async loadEquipments() {
                $(".content_loading").fadeIn("slow");
                let checkedFleets = this.fleets.filter(fleet => {
                    return fleet.checked;
                });
                let req = await fetch(`/administrator/equipments`, {
                    method: 'post',
                    headers: {
                        'X-CSRF-TOKEN': this.csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        fleets: checkedFleets
                    })
                });
                let res = await req.json();
                let equipments = [];
                res.data.map(e => {
                    equipments.push({
                        id: e.id,
                        id_fleet: e.id_fleet,
                        name: `${e.get_fleet.name} - ${e.unit_id}`,
                        checked: false
                    })
                })
                this.equipments = equipments;
                $(".content_loading").fadeOut("slow");
            },
            async loadComponents() {
                $(".content_loading").fadeIn("slow");
                let checkedEquipments = this.equipments.filter(equipment => {
                    return equipment.checked;
                });
                let req = await fetch(`/administrator/components`, {
                    method: 'post',
                    headers: {
                        'X-CSRF-TOKEN': this.csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        equipments: checkedEquipments
                    })
                });
                let res = await req.json();
                let components = [];
                res.data.map(c => {
                    components.push({
                        id: c.id,
                        name: `${c.get_equipment.unit_id} - ${c.get_component_location.name}`,
                        checked: false
                    })
                });
                this.componentsLocation = components;
                $(".content_loading").fadeOut("slow");
            },
            async save() {
                $(".content_loading").fadeIn("slow");

                let checkedComponents = this.componentsLocation.filter(component => {
                    return component.checked;
                });
                let req = await fetch(`/administrator/customers/users/${this.customer}/components/update`, {
                    method: 'put',
                    headers: {
                        'X-CSRF-TOKEN': this.csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        components: checkedComponents
                    })
                });
                let res = await req.json();
                window.location.reload();
            }
        }
    })
</script>
@endsection