@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">
            <div id="my-cards" style="display: none;">
                <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 type="button" data-bs-target="#remove-card" data-bs-toggle="modal"
                                class="btn bg-danger tw-py-2 tw-text-white">
                            Remove this card <i class="icon-trash tw-ml-2"></i>
                        </button>

                        <div class="modal" id="remove-card" data-bs-backdrop="false">
                            <div class="modal-dialog modal-dialog-centered modal-sm">
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <form action="{{ route('remove-card',$card->id) }}" method="POST">
                                            {{ csrf_field() }}
                                            <h5 class="modal-title">{{ trans('message.confirm') }}</h5>
                                            <p class="tw-mt-4">{{ trans('message.do_you_want_remove_this_card') }}</p>
                                            <div class="tw-mt-4 tw-text-right">
                                                <button type="button" data-bs-dismiss="modal"
                                                        class="btn tw-py-2.5 tw-px-4 tw-mr-4">
                                                    {{ trans('message.cancel') }}
                                                </button>
                                                <button type="submit" class="btn btn-dark tw-py-2 tw-px-4 text-white">
                                                    {{ trans('message.ok') }}
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                @if($errors->has('message'))
                    <div class="alert alert-danger">
                        {{ $errors->first('message') }}
                    </div>
                @endif
                <div class="tw-mt-6">
                    <div class="tw-flex tw-gap-6">
                        <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="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>
                            </div>
                        </div>

                        <div class="tw-ml-4">
                            <h3 class="tw-font-bold tw-mb-4">Earn Rule</h3>
                            <div v-if="card.membership_card.earn_rules.length > 0"
                                 v-for="(rule,i) in card.membership_card.earn_rules"
                                 class="">
                                <span class="tw-block">
                                    Get @{{ rule.earn_point }}@{{ getType }}
                                    @{{card.membership_card.type}} for any
                                    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 tw-mb-4">Valid until @{{ getDate(rule.valid_to) }}</span>
                                <hr v-if="i !== (card.membership_card.earn_rules.length - 1)">
                            </div>
                        </div>
                    </div>

                    <hr class="tw-mt-4">

                    <div class="tw-flex tw-justify-between">
                        <div class="navbar-light">
                            <ul class="navbar-nav tw-flex-row tw-mb-4">
                                <li class="nav-item tw-px-4">
                                    <a type="button"
                                       role="button"
                                       @click="getPurchaseTransactionByMCard(card)"
                                       :class="{'nav-link tw-text-dark': true,'active': !isRedeem}"
                                       aria-current="page">
                                        Earn Point
                                    </a>
                                </li>
                                <li class="nav-item tw-px-4">
                                    <a type="button"
                                       @click="getRedeemTransaction(card)"
                                       :class="{'nav-link tw-text-dark': true,'active': isRedeem}"
                                       role="button">
                                        Redeem
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="tw-mt-6">
                        <div v-if="!isRedeem">
                            <div class="panel">
                                <div class="panel-head tw-bg-gray-400/10">
                                    <div class="tw-flex tw-justify-between">
                                        <span>@{{ cardTitle }}</span>
                                        <span>@{{ card.balance }} @{{ getEarningPoint }}</span>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    <section v-if="purchaseTransactions.length > 0"
                                             v-for="transaction in purchaseTransactions">
                                        <article class="tw-flex tw-items-center">
                                            <div class="tw-mr-4">
                                                <button class="btn btn-custom-rounded-full tw-bg-gray-400/10">
                                                    <i class="icon-bag-shopping"></i>
                                                </button>
                                            </div>
                                            <div class="tw-mr-4">
                                                <div class="tw-flex tw-flex-col">
                                                    <span class="tw-text-sm md:tw-text-base tw-mb-2">
                                                        @{{ transaction.branch ? transaction.branch.name : '' }} |
                                                        @{{ transaction.total }} {{ $shop->currency->sign }}
                                                    </span>
                                                    <small class="tw-text-gray-300">
                                                        @{{ transaction.date }} |
                                                        @{{ transaction.time }}
                                                    </small>
                                                </div>
                                            </div>
                                            <div class="tw-ml-auto"
                                                 v-if="card.membership_card.card_type_id !== +'{{ config('constant.card_type.discount_card') }}'">
                                                +@{{ transaction.earn_value }} @{{ getEarningPoint }}
                                            </div>
                                        </article>

                                        <div class="divider tw-my-4"></div>
                                    </section>
                                    <section v-if="purchaseTransactions.length === 0 && !isRedeem">
                                        <p>No Data</p>
                                    </section>

                                    <div v-if="paginate.last_page > paginate.page" class="tw-mt-4">
                                        <button @click="showMore()"
                                                :disabled="isLoading"
                                                class="btn btn-custom btn-dark tw-py-2">
                                            Show More
                                            <i v-if="isLoading" class="spinner-border spinner-border-sm"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-if="isRedeem" class="">
                            <div class="panel">
                                <div class="panel-body">
                                    <section v-if="redeemTransactions.length > 0" v-for="transaction in redeemTransactions">
                                        <article class="tw-flex tw-items-center">
                                            <div class="tw-mr-4">
                                                <button class="btn btn-custom-rounded-full tw-bg-gray-400/10">
                                                    <i class="icon-bag-shopping"></i>
                                                </button>
                                            </div>
                                            <div class="tw-mr-4">
                                                <div class="tw-flex tw-flex-col">
                                                    <span class="tw-text-sm md:tw-text-base tw-mb-2">
                                                        @{{ transaction.purchase_transaction.branch ?
                                                        transaction.purchase_transaction.branch.name : '' }} |
                                                        @{{ transaction.purchase_transaction.total
                                                        }} {{ $shop->currency->sign }}
                                                    </span>
                                                    <small class="tw-text-gray-300">
                                                        @{{ transaction.purchase_transaction.date }} |
                                                        @{{ transaction.purchase_transaction.time }}
                                                    </small>
                                                </div>
                                            </div>
                                            <div class="tw-ml-auto">
                                                -@{{ transaction.redeem_price }}
                                            </div>
                                        </article>

                                        <div class="divider tw-my-4"></div>
                                    </section>

                                    <section v-if="redeemTransactions.length === 0 && isRedeem">
                                        <p>No Data</p>
                                    </section>

                                    <div v-if="paginate.last_page > paginate.page" class="tw-mt-4">
                                        <button @click="showMore()"
                                                :disabled="isLoading"
                                                class="btn btn-custom btn-dark tw-py-2">
                                            Show More
                                            <i v-if="isLoading" class="spinner-border spinner-border-sm"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection
@section('script')
    <script>

        const myCard = Vue.createApp({
            data() {
                return {
                    purchaseTransactions: [],
                    redeemTransactions: [],
                    card: {
                        id: '',
                        membership_card: {
                            card_type_id: '',
                            title: '',
                            picture_url: '',
                            card_type: [],
                            earn_rules: [],
                        },
                        card_format: '',
                        expired_date: '',
                        mcard_number: '',
                    },
                    isRedeem: false,
                    errors: {
                        membership_card: '',
                    },
                    isLoading: false,
                    paginate: {
                        page: 0,
                        last_page: 1,
                    }
                }
            },
            computed: {
                getType(){
                    return this.card.membership_card.card_type_id === +'{{ config('constant.card_type.discount_card') }}' ||
                        this.card.membership_card.card_type_id === +'{{ config('constant.card_type.cash_back_card') }}' ? '%' : '';
                },
                // getPoint
                getEarningPoint() {
                    let title_earn = '';
                    const card_types = {!! json_encode(config('constant.card_type')) !!};
                    if (this.card.membership_card.card_type_id === card_types.earn_point_card) {
                        title_earn = '{{trans('message.point')}}';
                    } else if (this.card.membership_card.card_type_id === card_types.stamp_card) {
                        title_earn = '{{trans('message.stamp')}}';
                    } else if (this.card.membership_card.card_type_id === card_types.discount_card) {
                        title_earn = '';
                    } else {
                        title_earn = '{{ $shop->currency->sign }}';
                    }
                    return title_earn;
                },
                cardTitle() {
                    let title = '';
                    if (this.card.membership_card.card_type_id === 3) {
                        // earn point card
                        title = '{{ trans('message.total_point') }}';
                    } else if (this.card.membership_card.card_type_id === 1) {
                        // stamp card
                        title = '{{ trans('message.total_stamp') }}';
                    } else if (this.card.membership_card.card_type_id === 2) {
                        // discount card
                        title = '{{ trans('message.total_spend_balance') }}';
                    } else {
                        // cash back card
                        title = '{{ trans('message.total_balance') }}';
                    }
                    return title;
                }
            },
            mounted() {
                this.card = {!! json_encode($card) !!};
                this.selectCard = this.card.id;
                this.getPurchaseTransactionByMCard(this.card);

                $("#my-cards").fadeIn();
            },
            methods: {
                getPurchaseTransactionByMCard() {
                    this.isRedeem = false;
                    this.paginate.page = 0;
                    this.paginate.last_page = 0;
                    $.ajax({
                        method: "GET",
                        url: "{{ route('purchase-transaction-by-mcard') }}",
                        data: {
                            mcard: this.card.mcard_number,
                            page: ++this.paginate.page,
                        },
                        success: (res) => {
                            if (res.success) {
                                if (res.data.current_page > 1) {
                                    this.purchaseTransactions = this.purchaseTransactions.concat(res.data.data);
                                } else {
                                    this.purchaseTransactions = res.data.data;
                                }
                                this.paginate.page = res.data.current_page;
                                this.paginate.last_page = res.data.last_page;
                                this.isLoading = false;
                            }
                        }
                    })
                },
                getRedeemTransaction() {
                    this.isRedeem = true;
                    this.paginate.page = 0;
                    this.paginate.last_page = 0;
                    $.ajax({
                        method: "GET",
                        url: "{{ route('redeem-transaction') }}",
                        data: {
                            mcard_number: this.card.mcard_number,
                            page: ++this.paginate.page,
                        },
                        success: (res) => {
                            if (res.success) {
                                if (res.data.current_page > 1) {
                                    this.redeemTransactions = this.redeemTransactions.concat(res.data.data);
                                } else {
                                    this.redeemTransactions = res.data.data;
                                }
                                this.paginate.page = res.data.current_page;
                                this.paginate.last_page = res.data.last_page;
                                this.isLoading = false;
                            }
                        }
                    })
                },
                showMore() {
                    this.isLoading = true;
                    if (this.isRedeem)
                        this.getRedeemTransaction();
                    else
                        this.getPurchaseTransactionByMCard();
                },
                getDate(date) {
                    return dayjs(date).format('MMM DD, YYYY');
                },
            },
        }).mount('#my-cards');
    </script>
@endsection