@if (!empty($teacher))
    <div id="more_coupon_promotion_null_message" class="messaige-box mb-5">
        未有換領紀錄
    </div>

    <div id="coupon_promotion_list"></div>

    <div class="more_btn text-center my-5">
        <div  id="more_coupon_promotion_button" class="more_btn text-center my-5" style="display:none;">
            <a class="text-color-base-5 text-center" style="">更多</a>
        </div>

        <i id="more_coupon_promotion_button_spanner" class="fa fa-spinner fa-pulse fa-2x laoading-icon" style="display:none"></i>

    </div>
@else
    <div class="messaige-box mb-5 ">
        未有換領紀錄
    </div>
@endif

<template id="template_coupon_promotion_record">
    <div class="coupon_promotion_record row background-base-color-5 border-radius-20 cursor-pointer hover_box_shadow"
         style="box-shadow: 0 0 20px 1px #f3f3f3;padding: 30px 15px;">
        <div class="col-12 col-md-6">
            <img class="coupon_promotion_record_image border-radius-5" src="//" alt="" width="100%">
        </div>
        <div class="col-12 col-md-6">
            <div class="coupon_promotion_name">
                //
            </div>
            <div class="row">
                <div class="coupon_promotion_record_on_shelf_date col-12 text-hint mb-4">
                    <i class="far fa-clock"></i> //on_shelf_date
                </div>
                <div class="col-12 text-hint mb-2">
                    <div class="d-inline-block text-size-s">
                        <i class="fas fa-user"></i> 換領方法：
                    </div>
                    <div class="coupon_promotion_record_how_to_get d-inline-block text-size-s text-ellipsis-3" style="height: 105px;">
                        //
                    </div>
                </div>
                <div class="col-12 text-hint">
                    <div class="d-inline-block text-size-s">
                        <i class="far fa-calendar-alt"></i> 截止日期：
                    </div>
                    <div class="coupon_promotion_record_dateline d-inline-block text-size-s">
                        //
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 text-right">
            <div class="coupon_promotion_record_status bold">

            </div>
        </div>
    </div>
</template>

<style>

</style>

<script>
    var teacher_profile_page_coupon_promotion_record_tab = {
        'ready': function () {
            teacher_profile_page_coupon_promotion_record_tab.getMoreCouponPromotion();

            let more_coupon_promotion_button = $('#more_coupon_promotion_button');
            more_coupon_promotion_button.click(function () {
                more_coupon_promotion_button.hide();
                $('#more_coupon_promotion_null_message').hide();
                $('#more_coupon_promotion_button_spanner').show();
                teacher_profile_page_coupon_promotion_record_tab.getMoreCouponPromotion()
            });
        },
        'moreCouponPromotionUrl': "{{route('.api.teacher.profile.coupon_promotions')}}",
        'getMoreCouponPromotion': function () {
            let template = $('#template_coupon_promotion_record')[0];
            $.post(teacher_profile_page_coupon_promotion_record_tab.moreCouponPromotionUrl, function (data) {
                if(data['data'] && data['data'].length === 0){
                    $('#more_coupon_promotion_null_message').show();
                    return;
                }
                $('#more_coupon_promotion_null_message').hide();

                data['data'].forEach(function (coupon_promotion) {
                    let clone_template = $(template.content.cloneNode(true));

                    clone_template.find('.coupon_promotion_record_image').attr('src',"{{Storage::disk('uploads')->url('')}}" + coupon_promotion['image_path_small']);
                    clone_template.find('.coupon_promotion_name').html(coupon_promotion['name']);
                    clone_template.find('.coupon_promotion_record_on_shelf_date').html("<i class=\"far fa-clock\"></i> " + coupon_promotion['on_shelf_date']);
                    clone_template.find('.coupon_promotion_record_how_to_get').html(coupon_promotion['how_to_get']);
                    clone_template.find('.coupon_promotion_record_dateline').html(coupon_promotion['dateline']);
                    clone_template.find('.coupon_promotion_record_status').html(coupon_promotion['in_profile_status']);

                    $('#coupon_promotion_list').append(clone_template);
                })

                teacher_profile_page_coupon_promotion_record_tab.moreCouponPromotionUrl = data['next_page_url'];

                if (!teacher_profile_page_coupon_promotion_record_tab.moreCouponPromotionUrl) {
                    $('#more_coupon_promotion_button').hide();
                }else{
                    $('#more_coupon_promotion_button').show();
                }

                $('#more_coupon_promotion_button_spanner').hide();
            })
        }
    };

    $(document).ready(function () {
        teacher_profile_page_coupon_promotion_record_tab.ready();
    });
</script>