@extends('.frontend.default')
@section('content')
    <div id="coupon_promotion_index_page" style="position: relative">
        @if(!empty($couponPromotions) && $couponPromotions->count() > 0)
        <div class="sort_select text-right m-0" style="position:absolute;z-index:2;right: 20%;top:80px">
            <select id="coupon_promotion_post_sort_selector" class="form-select background-base-color-5">
                <option value="from_new_to_old" selected="">按新至舊排序</option>
                <option value="from_old_to_new">按舊至新排序</option>
            </select>
        </div>

        <div id="coupon_promotion_index_page_coupon_promotion_list" class="row">
            @foreach($couponPromotions as $couponPromotion)
                <div class="col-12 coupon_promotion_index_page_coupon_promotion_list-item">
                    @include('.frontend.template.coupon_promotion.post',[
                                'coupon_promotion' => $couponPromotion,
                            ])
                </div>
            @endforeach
        </div>
        @else
            <h1 class="text-center" style="margin-top: 80px">未找到相關教師禮遇</h1>
        @endif
    </div>
@endsection

@section('pagescript')
    <script>
        var coupon_promotion_index_page = {
            'ready': function () {
                $('#coupon_promotion_post_sort_selector').change(function(){
                    coupon_promotion_index_page.sort_posts();
                });
            },
            'sort_posts': function(){
                let post_list = $('#coupon_promotion_index_page_coupon_promotion_list');

                if(post_list.hasClass('flex-column-reverse')){
                    post_list.removeClass('flex-column-reverse');
                }else{
                    post_list.addClass('flex-column-reverse');
                }
            }
        };

        $(document).ready(function () {
            coupon_promotion_index_page.ready();
        });
    </script>
@endsection
@section('pagecss')
    <style>
      .coupon_promotion_post, .coupon_promotion_post_card {
        max-width: 70%;
      }

      .coupon_promotion_post_card:hover{
        box-shadow: 1px 1px 20px 5px black;
      }

      .coupon_promotion_post_card_background {
        display: flex;

        min-height: calc(100vh - 85px);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
@endsection