@extends('.frontend.default')

@section('content')
    <div id="coupon_promotion_details_page" class="container details_page">
        <dov class="row">
            <div class="col-lg-10 offset-lg-1">


                <div id="coupon_promotion_details_page_header" style="margin-bottom: 30px">
                    <a class="back_button" href="{{route('.coupon_promotion.index')}}"><i class="fa fa-angle-left" aria-hidden="true"></i> 返回上一頁</a>
                </div>
                <div id="coupon_promotion_details_page_body" style="margin-bottom: 300px">
                    <div class="row mb-3">
                        <div class="col-12 col-lg-6">
                            <img src="{{$coupon_promotion->imagePathDetailUrl}}" alt="coupon_promotion_image_path_detail" style="max-width: 100%">
{{--                            <img src="https://dummyimage.com/600x400/000/fff" alt="coupon_promotion_image_path_detail" style="width: 100%;">--}}
                        </div>
                        <div class="col-12 col-lg-6 mt-3 mt-lg-auto text-center">
                            @if($coupon_promotion->is_admin_approve == \App\Models\CouponPromotion\CouponPromotion::ENUM_YES)
                                @if($has_login)
                                    @switch($teacher_coupon_promotion_status)
                                        @case(App\Models\CouponPromotion\CouponPromotionTeacher::STATUS_VOID)
                                        <div class="text-center border-radius-15 background-base-color-3 text-color-base-5 mx-auto" href=""
                                             style="width: 300px;height: 60px;line-height: 60px;">
                                            已取消/失效
                                        </div>
                                        @break
                                        @case(App\Models\CouponPromotion\CouponPromotionTeacher::STATUS_PROCESSING)
                                        <div class="text-center border-radius-15 background-base-color-3 text-color-base-5 mx-auto" href=""
                                             style="width: 300px;height: 60px;line-height: 60px;">
                                            處理中
                                        </div>
                                        @break
                                        @case(App\Models\CouponPromotion\CouponPromotionTeacher::STATUS_GOT)
                                        <div class="text-center border-radius-15 background-base-color-3 text-color-base-5 mx-auto" href=""
                                             style="width: 300px;height: 60px;line-height: 60px;">
                                            已換領
                                        </div>
                                        @break
                                        @default
                                        <div class="more_btn">
                                            <a id="coupon_promotion_page_details_page_obtain_button" class="text-center border-radius-15" href="#"
                                               style="width: 300px;height: 60px;line-height: 60px;"
                                               data-coupon-promotion-id="{{$coupon_promotion->id}}">
                                                立即換領
                                            </a>
                                        </div>
                                        @break
                                    @endswitch
                                @else
                                    <div class="text-color-base-5 text-center border-radius-15 background-primary cursor-pointer mx-auto"
                                         style="width: 300px;height: 60px;line-height: 60px;" onclick="$('#loginPopupModal').click();">
                                        立即換領
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>
                    <div class="mb-4">
                        <div>
                            <div class="d-inline-block" style="max-width: 88%">
                                <h1>{{$coupon_promotion->name}}</h1>
                            </div>

                            <div class="d-inline-block float-right">
                                <a class="text-primary st-custom-button cursor-pointer" data-network="sharethis"
                                   data-url="{{route('.coupon_promotion.details',['coupon_promotion_id'=>$coupon_promotion->id])}}" href="#">
                                    分享
                                    <svg class="svg-inline--fa fa-share-alt fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas"
                                         data-icon="share-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                                        <path fill="currentColor"
                                              d="M352 320c-22.608 0-43.387 7.819-59.79 20.895l-102.486-64.054a96.551 96.551 0 0 0 0-41.683l102.486-64.054C308.613 184.181 329.392 192 352 192c53.019 0 96-42.981 96-96S405.019 0 352 0s-96 42.981-96 96c0 7.158.79 14.13 2.276 20.841L155.79 180.895C139.387 167.819 118.608 160 96 160c-53.019 0-96 42.981-96 96s42.981 96 96 96c22.608 0 43.387-7.819 59.79-20.895l102.486 64.054A96.301 96.301 0 0 0 256 416c0 53.019 42.981 96 96 96s96-42.981 96-96-42.981-96-96-96z"></path>
                                    </svg><!-- <i class="fas fa-share-alt"></i> Font Awesome fontawesome.com -->
                                </a>
                            </div>
                        </div>

                        <div class="text-size-s">
                            <i class="far fa-clock"></i>上架日期 {{\Carbon\Carbon::parse($coupon_promotion->on_shelf_date)->format('d/m/Y')}}
                        </div>
                    </div>

                    <div class="mb-4 row">
                        <div class="col-auto pr-0" style="vertical-align: top">
                            <i class="fas fa-ticket-alt" style="width: 20px;text-align: justify"></i> 優惠內容：
                        </div>
                        <div class="col-12 col-md pl-md-0">
                            @nl2br($coupon_promotion->content ?? '-')
                        </div>
                    </div>

                    <div class="mb-4 row">
                        <div class="col-auto pr-0" style="vertical-align: top">
                            <i class="fas fa-user" style="width: 20px;text-align: justify"></i> 換領方法：
                        </div>
                        <div class="col-12 col-md pl-md-0">
                            @nl2br($coupon_promotion->how_to_get ?? '-')
                        </div>
                    </div>

                    <div class="mb-4 row">
                        <div class="col-auto pr-0" style="vertical-align: top">
                            <i class="fas fa-bookmark" style="width: 20px;text-align: justify"></i> 關於服務公司/機構：
                        </div>
                        <div class="col-12 col-md pl-md-0">
                            @nl2br($coupon_promotion->how_to_get ?? '-')
                        </div>
                    </div>

                    @if($coupon_promotion->url)
                        <div class="mb-4">
                            <div class="d-inline-block" style="vertical-align: top">
                                <i class="fas fa-link" style="width: 20px"></i> 連結：
                            </div>
                            <div class="d-inline-block" style="width: 91%">
                                <a href="{{$coupon_promotion->url}}" target="_blank" style="word-break:break-all">{{$coupon_promotion->url}}</a>
                            </div>
                        </div>
                    @endif

                    <div class="mb-4">
                        <div class="d-inline-block">
                            <i class="far fa-calendar-alt"></i> 截止日期：
                        </div>
                        <div class="d-inline-block" style="max-width: 84%">
                            {{ \Carbon\Carbon::parse($coupon_promotion->dateline)->format('d/m/Y') }}
                        </div>
                    </div>

                    <div class="mb-3" style="margin-top: 45px">
                        <div class="mb-3">
                            <h1>
                                使用條款 </h1>
                        </div>
                        <div>
                            @nl2br($coupon_promotion->terms_of_use ?? '-')
                        </div>
                    </div>

                </div>
            </div>
        </dov>
    </div>
@endsection

@section('pagescript')
    <script>
        var coupon_promotion_page_details_page = {
            'ready': function () {
                $('#coupon_promotion_page_details_page_obtain_button').click(function () {
                    let coupon_promotion_id = $(this).data('coupon-promotion-id');
                    coupon_promotion_page_details_page.couponPromotionRequestSubmit(coupon_promotion_id)
                });
            },
            'couponPromotionRequestSubmit': function (coupon_promotion_id) {
                let data = {
                    'coupon_promotion_id': coupon_promotion_id
                };
                $.ajax({
                    type: "POST",
                    url: "{{route('.api.coupon_promotion.submitCouponPromotion')}}",
                    data: data,
                    success: function (data) {
                        if (data['status'] && data['status'] === 'success') {
                            coupon_promotion_page_details_page.couponPromotionRequestSubmitSuccessPopup(data['message'])
                        }
                    },
                });
            }, 'couponPromotionRequestSubmitSuccessPopup': function (success_message) {
                success_message = "<div class='text-center mb-3'><img src='{{asset('/images/icon/check.png')}}'></div>" + "<p class='text-center'>" + success_message + "</p>"
                bootbox.dialog({
                    size: 'large',
                    message: success_message,
                    closeButton: true,
                    buttons: {
                        confirm: {
                            label: '確定',
                            className: 'btn-inquiry-custom-confirm',
                            callback: function () {
                                location.reload()
                            }
                        }
                    }
                });
            }
        };
        $(document).ready(function () {
            coupon_promotion_page_details_page.ready();
        });
    </script>
@endsection

@section('pagestyle')

@endsection