@extends('layouts.lookatme')

@section('title', trans('message.my_profile'))
@section('content')
    <main class="tw-mt-6 tw-px-8 md:tw-px-12 lg:tw-px-20 tw-flex tw-flex-col md:tw-flex-row">
        <aside class="tw-flex tw-flex-col tw-items-center tw-w-full md:tw-w-1/3 tw-mr-4">
            @include('templates.lookatme.my_account._sidebar-nav')
        </aside>
        <section class="tw-w-full tw-mt-8 md:tw-mt-0" id="my-cards">
            <div class="tw-flex tw-items-center tw-justify-between">
                <h2 class="tw-border-0 tw-border-l-4 tw-border-solid tw-pl-4 tw-font-bold">
                    {{ trans('message.my_card') }}
                </h2>

                <div class="">
                    <button data-bs-toggle="modal"
                            data-bs-target="#apply-card"
                            class="btn btn-dark tw-py-2.5 tw-px-4 text-white tw-rounded-x-full">
                        Apply Card
                        <i class="fa fa-credit-card-alt tw-ml-2"></i>
                    </button>
                </div>
            </div>
            <hr>

            <div class="modal" id="apply-card">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header tw-py-2">
                            <h5 class="modal-title">Apply Card</h5>
                            <button type="button" class="btn-close"
                                    data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <select name="membership-card"
                                    data-placeholder="Please Select Card"
                                    v-model="membership_card"
                                    @change="selectMembershipCard()"
                                    class="tw-form-select tw-border tw-border-solid tw-rounded-x-full tw-w-full"
                                    id="membership-cards">
                                <option value="">Please Select Card</option>
                                <option v-for="mcard in membership_cards"
                                        :value="mcard.id">
                                    @{{ mcard.title }}
                                </option>
                            </select>

                            <div v-if="membershipCardSelected.id !== ''" class="tw-mt-4 tw-flex">
                                <div class="tw-w-2/5">
                                    <div class="tw-relative">
                                        <img class="tw-w-full tw-rounded-lg
                                                tw-outline tw-outline-1 tw-outline-offset-4"
                                             :src="membershipCardSelected.picture_url" alt="">
                                        <img class="tw-absolute tw-top-6 tw-left-6"
                                             src="{{ asset($public_assets . 'assets/lookatme/images/logo/small_logo.png') }}" alt="logo">
                                        <span class="tw-absolute
                                                 tw-top-0 tw-right-0 tw-left-0 tw-bottom-0
                                                 tw-flex tw-items-center tw-justify-center
                                                 text-white">
                                            @{{ membershipCardSelected.title }}
                                        </span>
                                    </div>
                                </div>
                                <div class="tw-ml-4">
                                    <h3 class="tw-text-base tw-mb-2">Earn Rule</h3>
                                    <div v-if="membershipCardSelected.earn_rules.length > 0"
                                         v-for="(rule,i) in membershipCardSelected.earn_rules"
                                         class="">
                                        <span class="tw-block">
                                            Get @{{ rule.earn_point }}@{{ getType }}
                                            @{{membershipCardSelected.type}} for any purchase
                                            from @{{ rule.min_purchase }} {{ $shop->currency->sign }}
                                            <span v-if="rule.max_purchase !== 0">to @{{ rule.max_purchase
                                                }} {{ $shop->currency->sign }}</span>
                                        </span>
                                        <span class="tw-block">Valid until @{{ getDate(rule.valid_to) }}
                                        </span>
                                        <hr class="tw-my-2" v-if="i !== (membershipCardSelected.earn_rules.length - 1)">
                                    </div>
                                </div>
                            </div>

                            <span class="tw-my-4 text-danger" v-if="errors.membership_card !== ''">@{{
                                errors.membership_card }}
                            </span>
                            <div class="tw-mt-4 tw-text-right">
                                <button data-bs-toggle="modal"
                                        data-bs-target="#apply-card"
                                        @click="applyCard()"
                                        class="btn btn-dark tw-py-2.5 tw-px-4 text-white tw-rounded-x-full">
                                    Apply
                                    <i class="fa fa-credit-card-alt tw-ml-2"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tw-mt-6">
                <div class="tw-grid tw-grid-cols-12 tw-gap-6">
                    <a v-if="cards.length > 0" v-for="card in cards"
                       :href="'{{ route('my-card-detail',':id') }}'.replace(':id',card.id)"
                       class="tw-relative tw-col-span-5">
                        <img class="tw-w-full tw-rounded-lg
                                    tw-outline tw-outline-1 tw-outline-offset-4"
                             :src="card.membership_card.picture_url" alt="">
                        <img class="tw-absolute tw-top-6 tw-left-6"
                             src="{{ asset($public_assets . 'assets/lookatme/images/logo/small_logo.png') }}" alt="logo">
                        <span class="tw-absolute tw-top-6 tw-right-6 text-white"
                              v-text="card.membership_card.title"></span>
                        <span class="tw-absolute text-white
                                    tw-top-16 tw-left-6 tw-right-0
                                    tw-text-2xl" v-text="card.card_format"></span>
                        <span class="tw-absolute text-white tw-bottom-4 tw-left-6">
                            Valid Date
                            <span v-text="getDate(card.expired_date)"></span>
                        </span>
                    </a>
                </div>
            </div>
        </section>
    </main>
@endsection
@section('script')
    <script>
        const myCard = Vue.createApp({
            data() {
                return {
                    cards: [],
                    membership_cards: [],
                    membership_card: '',
                    membershipCardSelected: {
                        id: '',
                        card_type_id: '',
                        title: '',
                        picture_url: '',
                        earn_rules: [],
                    },
                    errors: {
                        membership_card: '',
                    }
                }
            },
            computed: {
                getType() {
                    return this.membershipCardSelected.card_type_id === +'{{config('constant.card_type.discount_card')}}' ||
                    this.membershipCardSelected.card_type_id === +'{{config('constant.card_type.cash_back_card')}}' ? '%' : '';
                }
            },
            mounted() {
                this.cards = {!! $cards !!};
                this.membership_cards = {!! $membership_cards !!};
            },
            methods: {
                applyCard() {
                    if (this.membership_card === '') {
                        this.errors.membership_card = '{{ trans('validation.required', ['attribute' => 'card']) }}';
                        return;
                    }
                    this.errors.membership_card = '';
                    SweetAlert({
                        title: '{{ trans('message.confirm') }}',
                        text: '{{ trans('message.do_you_want_to_apply_this_card') }}',
                        type: 'warning',
                        showCancelButton: true,
                        customClass: {
                            confirmButton: 'btn-dark'
                        },
                        reverseButtons: true,
                    }).then(
                        res => {
                            if (res.value) {
                                $.ajax({
                                    method: "POST",
                                    url: '{{ route("apply-card") }}',
                                    data: {
                                        card_id: this.membership_card,
                                    },
                                    success: (res) => {
                                        if (res.success) {
                                            this.cards = res.data;
                                            const index = this.membership_cards.findIndex(item => item.id === this.membershipCardSelected.id);
                                            if (index !== -1) {
                                                this.membership_cards.splice(index, 1);
                                            }
                                            this.resetMembershipCardSelect()
                                            $("#apply-card").modal('hide');
                                        } else {
                                            this.errors.membership_card = res.message;
                                        }
                                    }
                                });
                            }
                        }
                    )
                },
                resetMembershipCardSelect() {
                    // reset membership card select
                    this.membershipCardSelected = {
                        id: '',
                        card_type_id: '',
                        title: '',
                        picture_url: '',
                        earn_rules: [],
                    };
                    this.membership_card = '';

                },
                selectMembershipCard() {
                    this.errors.membership_card = '';
                    const card = this.membership_cards.find((item) => item.id === this.membership_card);
                    if (typeof card !== 'undefined') {
                        this.membershipCardSelected = card;
                    } else {
                        this.resetMembershipCardSelect();
                    }
                },
                getDate(date) {
                    return dayjs(date).format('MMM DD, YYYY');
                },
            },
        }).mount('#my-cards');
    </script>
@endsection