<template>
    <div class="row zig-zag-top">
        <div class="col bg-white padding-25">
            <div class="row p-b-10">
                <div class="col">
                    <div class="row m-b-5">
                        <div class="col">
                            <div class="font-heading all-caps bold fs-10">Request Refund</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="row m-b-10">
                                <div class="col">
                                    <div class="row parentContainer">
                                        <div class="col">
                                            <div class="row" >
                                                <div class="col-7 p-r-0">
                                                    <div class="row m-b-10">
                                                        <div class="col">
                                                            <div class="font-heading all-caps fs-10 m-b-5">Refund Type: </div>
                                                            <div class="row p-l-15">
                                                                <div class="col p-t-20 p-b-20 bg-master-lightest text-center b-grey pointer" :class="[{'bg-complete': refundMethod.name === 'Fully Refund'}, {'text-white': refundMethod.name === 'Fully Refund'}]" @click="updateRefundType({name: 'Fully Refund'})">
                                                                    Full Refund
                                                                </div>
                                                                <div class="col p-t-20 p-b-20 bg-master-lightest text-center b-grey pointer" :class="[{'bg-complete': refundMethod.name === 'Partially Refund'}, {'text-white': refundMethod.name === 'Partially Refund'}]" @click="updateRefundType({name: 'Partially Refund'})">
                                                                    Partial Refund
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row m-r-0 m-b-10" v-if="refundMethod.name === 'Partially Refund'">
                                                        <div class="col p-r-0">
                                                            <validation-wrapper-component :validator="$v.refundAmount">
                                                                <label>Amount</label>
                                                                <input class="form-control" name="amount" v-model="refundAmount" :disabled="refundMethod.name == 'Fully Refund'" v-money="moneyV2">
                                                            </validation-wrapper-component>
                                                        </div>
                                                        <div class="col-auto b-r b-t b-b b-grey">
                                                            <div class="row h-100 align-items-center">
                                                                <div class="col">
                                                                    <div class="font-heading fs-10 muted">{{data.booking.fixed_currency.short_code}}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-auto">
                    <button class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
                </div>
                <div class="col text-right">
                    <button class="btn btn-lg btn-success b-rad-none all-caps fs-12" @click="submitForm()">Confirm & Proceed</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import FormHandler from '../../../general/mixins/formHandler';
    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
    import { required, maxValue } from "vuelidate/lib/validators";
    export default {
        props: {
            totalRefunds:{
                type: Number,
                default: 0,
            }
        },
        data(){
            return {
                refundAmount: (Math.round((this.data.booking.amount - this.totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2),
                refundMethod: {
                    name: 'Partially Refund',
                    status: false
                },
                refundMaxValue: (Math.round((this.data.booking.amount - this.totalRefunds + Number.EPSILON) * 100) / 100).toFixed(2),
            }
        },
        validations() {
            return {
                refundAmount: {
                    // required,
                    maxValue: maxValue(this.refundMaxValue)
                }
            }
        },
        methods: {
            submitForm(){
                this.parameters.amount = this.refundAmount;
                this.submit(this.route('api.booking.refund.create', this.data.booking.id, this.data.id), 'post', this.section, true, true)
            },
            updateRefundType(refund){
                this.refundMethod = {
                    name: refund.name,
                    status: !this.refundMethod.status
                }
                this.refundMethod.name === 'Fully Refund' ? this.refundAmount = this.refundMaxValue : '';
            },
        },
        mixins: [FormHandler, ModalFormHandler]
    }
</script>