@extends('theme.master')
@section('title', 'Checkout')
@section('content')
@include('admin.message')

<section id="wishlist-home" class="wishlist-home-main-block">
    <div class="container">
        <h1 class="wishlist-home-heading text-white">{{ __('frontstaticword.Choice')  . __('frontstaticword.PlusChannel') }}</h1>
    </div>
</section> 
<section id="cart-block" class="cart-main-block cart-main-block-fix-plus">
	<div class="container">
		<div class="cart-items btm-30">
            {{-- <p class="plus_channel_description">您還可以加購訂閱會員專屬的加值頻道，頻道上所顯示的價格為每個月的訂閱費用，其訂閱期間將隨著訂閱方案動態調整。
                例如您訂閱方案為三個月一期，那麼加值頻道的費用亦同步調整為三個月的費用。</p> --}}
                <img class="plus-img" src="{{ gc_asset('images/landing_page/shutterstock_1988637098.png') }}" alt="">
    @if( $plus_channels )
        <form method="POST" id="pluschannel_form" action="{{ route( 'checkout.subscription' ) }}">
            {{ csrf_field() }}
            <ul id="pluschannel_list">
                @foreach( $plus_channels as $plus_channel )
                    @php
                        $disabled = $purchased_text = '';
                        if( in_array( $plus_channel->id, $purchased_channel_ids ) ){
                            $disabled = 'disabled';
                            $purchased_text = '(已加購)';
                        }

                        $channel_image = '';
                        if( $plus_channel->image ){ 
                            // $images = json_decode( $plus_channel->image, true );
                            $channel_image = gc_asset( 'images/pluschannel/' . $plus_channel->imag );
                        }
                        $checked = '';
                        if( in_array( $plus_channel->id, $selected_channels ) ){
                            $checked = 'checked';
                        }
                    @endphp
                    <li>
                        <input data-image="{{ $channel_image }}" 
                        type="checkbox" id="plus_channel_{{ $plus_channel->id }}" name="plus_channel_ids[]" 
                        value="{{ $plus_channel->id }}" {{ $checked }} {{ $disabled }}>
                        <label for="plus_channel_{{ $plus_channel->id }}">
                        <div class="left info">
                            <div class="up">
                                {{ $plus_channel->name }} {{ $purchased_text }}
                            </div>
                            <div class="down">
                                加值專屬線上課程
                            </div>
                        </div>
                        <div class="right price">
                            @if( ! empty( $plus_channel->offer_price ) && ! empty( $plus_channel->price ) ) 
                                <del>{{ gc_format_price( $plus_channel->price ) }}</del>
                                <ins>{{ gc_format_price( $plus_channel->offer_price ) }}</ins>
                            @elseif( empty( $plus_channel->offer_price ) && ! empty( $plus_channel->price ) )
                                <span>{{ gc_format_price( $plus_channel->price ) }}</span>
                            @elseif( ! empty( $plus_channel->offer_price ) && empty( $plus_channel->price ) )
                            <span>{{ gc_format_price( $plus_channel->offer_price ) }}</span>
                            @endif
                            <span class="unit">&nbsp;/月</span>
                        </div>
                        </label>
                    </li>
                @endforeach
                <li class="checkout-buttons">
                    <input type="button" id="goback" class="left-button" value="上一步">
                    <input type="submit" class="right-button" value="下一步">
                </li>
            </ul>
        </form>
    @else
        <p class="empty subscriptions">購物車內沒有任何商品，無法進行結帳</p>
    @endif
        </div>
    </div>
</section>
@endsection

@section('custom-script')
<script>
    jQuery(document).ready(function($){
		$('#carrier_type_field').show();
		$('#carrier_number_field').show();
        $('#invoice_type').change(function(e) {
            e.preventDefault();
            var type = $(this).val();
            switch (type) {
                case '1':
                    $('#donate_number_field').slideUp();
                    $('#carrier_type_field').slideDown();
                    $('#customer_identifier_field').slideUp();
                    $('#customer_name_field').slideUp();
                    $('#carrier_number_field').slideDown();
                    break;
                case '2':
                    $('#carrier_type_field').slideUp();
                    $('#donate_number_field').slideUp();
                    $('#customer_identifier_field').slideUp();
                    $('#customer_name_field').slideUp();
					$('#carrier_number_field').slideUp();
                    break;
                case '3':
                    $('#customer_identifier_field').slideDown();
                    $('#customer_name_field').slideDown();
                    $('#donate_number_field').slideUp();
                    $('#carrier_type_field').slideUp();
                    $('#carrier_number_field').slideUp();
                    break;
                case '4':
                    $('#customer_identifier_field').slideUp();
                    $('#customer_name_field').slideUp();
                    $('#donate_number_field').slideDown();
                    $('#carrier_type_field').slideUp();
                    $('#carrier_number_field').slideUp();
                    break;
            }
        });

    });
</script>
@endsection