<template>
    <div class="row m-b-20">
        <div class="col">
            <div class="row">
                <div class="col">
                    <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
                    <div class="row m-l-0 m-r-0 bg-master-light padding-10" v-show="!isLoading">
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <validation-wrapper-component :validator="$v.parameters.recency">
                                <label class="all-caps">Last Payment Date</label>
                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.recency"></date-picker-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <validation-wrapper-component :validator="$v.parameters.frequency">
                                <label class="all-caps">Bookings Frequency</label>
                                <input type="text" class="form-control" v-model.lazy="parameters.frequency">
                            </validation-wrapper-component>
                            <div class="row">
                                <div class="col p-r-0">
                                    <validation-wrapper-component :validator="$v.parameters.frequency">
                                        <label class="all-caps">Date From</label>
                                        <date-picker-component :parameters="parameters" v-model.lazy="parameters.frequencyDateFrom"></date-picker-component>
                                    </validation-wrapper-component>
                                </div>
                                <div class="col p-l-0">
                                    <validation-wrapper-component :validator="$v.parameters.frequency">
                                        <label class="all-caps">Date To</label>
                                        <date-picker-component :parameters="parameters" v-model.lazy="parameters.frequencyDateTo"></date-picker-component>
                                    </validation-wrapper-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <validation-wrapper-component :validator="$v.parameters.monetary">
                                <label class="all-caps">Total Payments</label>
                                <input type="text" class="form-control" v-model.lazy="parameters.monetary">
                            </validation-wrapper-component>
                            <div class="row">
                                <div class="col p-r-0">
                                    <validation-wrapper-component :validator="$v.parameters.frequency">
                                        <label class="all-caps">Date From</label>
                                        <date-picker-component :parameters="parameters" v-model.lazy="parameters.monetaryDateFrom"></date-picker-component>
                                    </validation-wrapper-component>
                                </div>
                                <div class="col p-l-0">
                                    <validation-wrapper-component :validator="$v.parameters.frequency">
                                        <label class="all-caps">Date To</label>
                                        <date-picker-component :parameters="parameters" v-model.lazy="parameters.monetaryDateTo"></date-picker-component>
                                    </validation-wrapper-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-auto d-flex align-items-center flex-md-column justify-content-center">
                            <button type="button" class="btn btn-lg btn-primary fs-11 w-100 d-block m-r-5 mr-md-0 mb-md-1 mb-0" @click="submitSearch()">Search</button>
                            <button type="button" class="btn btn-lg btn-secondary fs-11 w-100 d-block m-l-5 ml-md-0 mt-md-1 0t-0" @click="resetSarch()">Reset</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row no-margin" v-show="search" :key="serachSectionKey">
                <div class="col bg-white padding-25">
                    <list-component :section="section" :endpoint="route('api.company.list')" :options="{'with_total_payments': true, 'recency': parameters.recency, 'frequency': parameters.frequency, 'monetary': parameters.monetary, 'business_type': 2, with_bookings:true, order_by:{ column:'total_payments', DESC:true}}">
                        <template slot="list" slot-scope="{data}">
                            <company-component :data="data"></company-component>
                        </template>
                    </list-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import componentHandler from "../../../general/mixins/componentHandler";
import { required, minValue} from "vuelidate/lib/validators";
import {VMoney} from 'v-money'

export default {
    data(){
        return {
            section: 'customerSectionComponent',
            isLoading: false,
            search: false,
            serachSectionKey: 2,
            parameters: {
                recency: '2022-02-15',
                frequency: 0,
                frequencyDateFrom: '2021-01-01',
                frequencyDateTo: '2022-01-01',
                monetary : 0,
                monetaryDateFrom: '2021-01-01',
                monetaryDateTo: '2022-02-15',
            }
        }
    },
    methods: {
        submitSearch(){
            this.serachSectionKey ++;
            this.search = true;
        },
        resetSarch() {
            this.search = false;
            this.parameters.recency = '2022-02-15';
            this.parameters.frequency = 0;
            this.parameters.frequencyDateFrom ='2021-01-01';
            this.parameters.frequencyDateTo = '2022-01-01';
            this.parameters.monetary = 0;
            this.parameters.monetaryDateFrom = '2021-01-01';
            this.parameters.monetaryDateTo = '2022-02-15';
        }
    },
    validations: {
        parameters: {
            recency: {}, 
            frequency: {}, 
            monetary: {}, 
        }
    },
    mixins: [componentHandler]
};
</script>
