<template>
    <div>
        <b-row>
            <b-col md="3" sm="auto">
                <b-card>
                    <b-card-body>
                        <h4>Filter Sites</h4>
                        <!-- Selected: <strong>{{ selected }}</strong><br /> -->
                        <p>You may select multiple sites.</p>
                            <b-form-group label="">
                            <b-form-checkbox-group />
                            <b-form-checkbox
                                v-model="allSelected"
                                :indeterminate="indeterminate"
                                @change="toggleAll"
                                >
                                {{ allSelected ? 'Un-select All' : 'Select All' }}
                                </b-form-checkbox>
                                <b-form-checkbox v-model="selected" v-for="site in sites" :value="site" :key="site.site">{{ site.site + ' - ' + site.name }}</b-form-checkbox>
                            </b-form-group>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col md="8" sm="auto">
                <b-card>
                    <b-card-body>
                        <div class="pull-right" style="display: inline;">
                            <b-button v-b-modal.price-change variant="primary"><i class="fa fa-dollar"></i> Change Price</b-button>
                        </div>
                        <h4>Current Fuel Prices</h4>
                        <p>Prices are displayed in cents per liter (CPL)</p>
                        {{ filteredSite }}
                        <b-table striped hover :items="filteredSite" :fields="fields" />
                    </b-card-body>
                </b-card>
            </b-col>
        </b-row>
        <!-- Price Change Component -->
        <b-modal id="price-change" size="lg" title="Price Change">

            <b-row>
            <b-col cols="4">
                <b-card>
                    <b-card-body>
                        <h4>Select Site</h4>
                            <b-form-group label="">
                            <b-form-checkbox-group />
                            <b-form-checkbox
                                v-model="allSelected"
                                :indeterminate="indeterminate"
                                @change="toggleAll"
                                >
                                {{ allSelected ? 'Un-select All' : 'Select All' }}
                                </b-form-checkbox>
                                <b-form-checkbox v-model="selected" v-for="site in sites" :value="site" :key="site.site">{{ site.site + ' - ' + site.name }}</b-form-checkbox>
                            </b-form-group>
                    </b-card-body>
                </b-card>
            </b-col>
            <b-col cols="8">
                <div>
                    <b-card no-body v-model="selected">
                        <b-tabs pills card vertical>
                            <b-tab title="ULP" active id="tab-ulp">
                                <b-form-group>

                                </b-form-group>
                            </b-tab>
                            <b-tab title="PULP" disabled id="tab-pulp">
                                <b-form-group>

                                </b-form-group>
                            </b-tab>
                            <b-tab title="PULP98" id="tab-pulp98">
                                <b-form-group>

                                </b-form-group>
                            </b-tab>
                            <b-tab title="DIESEL" id="tab-diesel">
                                <b-form-group>

                                </b-form-group>
                            </b-tab>
                            <b-tab title="E10" id="tab-e10">
                                <b-form-group>

                                </b-form-group>
                            </b-tab>
                            <b-tab title="LPG" id="tab-lpg">
                                <b-form-group>

                                </b-form-group>
                            </b-tab>
                        </b-tabs>
                    </b-card>
                </div>
            </b-col>
            </b-row>
        </b-modal>
    </div>
</template>

<script>
export default {
    name: 'fuel-prices',
    data () {
        return {
            selected: [],
            indeterminate: false,
            fields: [
                'site',
                'grade',
                'cpl'
            ],
            items: [
                {
                    site: 2,
                    grade: ULP,
                    cpl: 100.1
                },
                {
                    site: 3,
                    grade: PULP,
                    cpl: 112.4
                }
            ],
            sites: [
                {
                    site: 2,
                    name: 'Melbourne'
                },
                {
                    site: 3,
                    name: 'Brisbane'
                }
            ]
        }
    },
    computed: {
        filteredSite() {
            if (!this.selected.length)
                return this.items

            return this.items.filter(item => this.selected.includes(item.site))
        }
    },
    methods: {
      toggleAll(checked) {
        this.selected = checked ? this.sites.slice() : []
      }
    },
    watch: {
      selected(newVal, oldVal) {
        // Handle changes in individual site checkboxes
        if (newVal.length === 0) {
          this.indeterminate = false
          this.allSelected = false
        } else if (newVal.length === this.sites.length) {
          this.indeterminate = false
          this.allSelected = true
        } else {
          this.indeterminate = true
          this.allSelected = false
        }
      }
    }
}
</script>