@extends('theme.master')
@section('title', 'Checkout')
@section('content')
@include('admin.message')
@php
    $cart_total = 0;
@endphp
<!-- 1 -->
<div class="loader loader--style1" title="0">
    <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
    <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
      s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
      c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
    <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
      C22.32,8.481,24.301,9.057,26.013,10.047z">
      <animateTransform attributeType="xml"
        attributeName="transform"
        type="rotate"
        from="0 20 20"
        to="360 20 20"
        dur="0.5s"
        repeatCount="indefinite"/>
      </path>
    </svg>
  </div>
<section id="wishlist-home" class="wishlist-home-main-block">
    <div class="container">
        <h1 class="wishlist-home-heading text-white">{{ __('frontstaticword.Choice')  . __('frontstaticword.SubscriptionPlan') }}</h1>
    </div>
</section>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">錯誤</h5>
        </div>
        <div class="modal-body d-flex flex-column justify-center">
          <p style="margin: 80px auto; font-size:22px;">付款操作錯誤，請返回首頁重新操作</p>
          <a class="btn btn-secondary hot-link ml-3 w-25" style="margin: auto !important" href="{{ url('/') }}">返回首頁</a>
        </div>
      </div>
    </div>
</div>
<section id="cart-block" class="cart-main-block cart-main-block-fix">
	<div class="container">
		<div class="cart-items btm-30">
    @if( $cart )
        <div id="checkout_form">
			<input id="test" name="test" class="d-none" value="{{Session::has('danger') ? '' : old('test')}}">
            {{-- {{ csrf_field() }} --}}
            <div class="description row">
                <div class="left col-xl-6 col-lg-6 col-md-12">
                    @if(Auth::User()->getUserSubscriptionPlan())
                        <img class="subscription_image" src="{{ gc_asset( 'images/subscription_plan/card-plus.png') }}">
                    @else
                        <img class="subscription_image" src="{{ gc_asset( 'images/subscription_plan/card.png') }}">
                    @endif
                </div>
                <div class="right col-xl-6 col-lg-6 col-md-12">
                    {{ __('frontstaticword.TextShopping') }}
                </div>
            </div>
            <div class="list-check">
                <ul id="subscription_list">
                    @if (Auth::User()->refferal && ($gsetting->user_referral['status'] == 1 || $gsetting->user_referral_subscript['status'] == 1 || $gsetting->user_referral_renew['status'] == 1))
                    <li class="d-block">
                        推薦人： {{ Auth::User()->refferal->referral_user->fname }}
                    </li>
                    @endif

                    @if( $subscription )
                    <li>
                        <div class="left info">
                            <div class="up">
                                {{ $subscription->name }}
                            </div>
                            <div class="down">
                                {{ $subscription->description }}
                            </div>
                        </div>
                        <div class="right price">
                            @if( ! empty( $subscription->offer_price ) && ! empty( $subscription->price ) ) 
                                <del>{{ gc_format_price( $subscription->price ) }}</del>
                                <ins>{{ gc_format_price( $subscription->offer_price ) }}</ins>
                            @elseif( empty( $subscription->offer_price ) && ! empty( $subscription->price ) )
                                <span>{{ gc_format_price( $subscription->price ) }}</span>
                            @elseif( ! empty( $subscription->offer_price ) && empty( $subscription->price ) )
                                <span>{{ gc_format_price( $subscription->offer_price ) }}</span>
                            @endif
                        </div>
                        </label>
                    </li>
                    @endif
                </ul>
                <ul id="pluschannel_list">
                @if( $selected_channels )
                    @foreach( $selected_channels as $channel )
                        <li>
                            <div class="left info">
                                <div class="up">
                                    {{ $channel['channel']->name }}
                                </div>
                                <div class="down">
                                    {{ $channel['start'] }} - {{ $channel['expire'] }}
                                </div>
                            </div>
                            <div class="right price">
                                <span>{{ gc_format_price( $channel['cost'] ) }}</span>
                            </div>
                            </label>
                        </li>
                    @endforeach
                @endif
                </ul>
                @if( $coupon )
                <ul id="coupon">
                    <li>
                        <div class="left info">
                            <div class="up">
                                優惠券
                            </div>
                        </div>
                        <form method="POST" class="remove_coupon_form" action="{{route('gc.remove.coupon')}}">
                            @csrf
                            <input type="submit" class="remove_coupon border-0" value="移除">
                        </form>
                        <div class="right price"><span>-{{gc_format_price($disamount)}}</span></div>
                    </li>
                </ul>
                @endif
                @if( !$first_purchase )
                <ul id="coupon">
                    <li>
                        <div class="left info">
                            <div class="up">
                                首購{{$first_purchase_days}}天訂閱方案免費
                            </div>
                        </div>
                        <div class="right price"><span>-{{gc_format_price($disamount)}}</span></div>
                    </li>
                </ul>
                @endif
                <ul id="total_list">
                    <li>
                        <div class="left info">總計</div>
                        <div class="right price">{{ gc_format_price( $total_cost ) }}</div>
                    </li>
                </ul>
            </div>
            @if(!$coupon && $first_purchase)
            <label for="" class="list-coupon pt-4">使用優惠券</label>
            <div class="list-check list-check2">
                <form class="checkoutform" method="POST" action="{{ route( 'gc.coupon' ) }}">
                    @csrf
                    <div class="row">
                        <div class="col-12 conbined">
                            <input name="coupon_code" class="form-control input-text" placeholder="{{ __('frontstaticword.CouponDiscount') }}">
                            <input id="place_order" class="w-25" type="submit" value="{{ __('frontstaticword.Checkpay') }}">
                        </div>
                    </div>
                </form>
            </div>
            @endif
            @if (!Auth::User()->refferal && $gsetting->user_referral['status'])
            <label for="" class="list-coupon pt-4">推薦代碼</label>
            <div class="list-check list-check2">
                <form class="checkoutform" method="POST" action="{{ route( 'profile.referral.add' ) }}">
                    @csrf
                    <div class="row">
                        <div class="col-12 conbined">
                            <input name="code" class="form-control input-text" placeholder="輸入推薦代碼">
                            <button class="w-25 checkout-btn text-white">使用推薦代碼</button>
                        </div>
                    </div>
                </form>
            </div>
            @endif

            <form id="gc_payingt" method="POST" action="{{ route( 'gc.paying' ) }}">
                @csrf
                <label for="" class="list-coupon pt-4">付款方式</label>
                <section id="gc_payments" class="mt-0">
                    <ul class="row">
                        @foreach( $payments as $payment )
                            @php
                            $disabled = $checked = false;
                            if( isset($AvailableSubscription->payment_method) ){
                                if( $AvailableSubscription->payment_method == $payment['id'] ){
                                    $checked = true;
                                }else{
                                    $disabled = true;
                                }
                            }
                            @endphp
                            <li class="col-12 col-md-6 mb-4 pb-3">
                                <input type="radio"  id="payment_{{ $payment['id'] }}" name="payment_method" value="{{ $payment['id'] }}" 
                                        {{ (old('payment_method') == $payment['id']) || $checked ? 'checked' :'' }} 
                                        {{  $disabled ? 'disabled' : '' }} >
                                <label for="payment_{{ $payment['id'] }}" class="mb-0 ">
                                    <div class="up">
                                        {{ $payment['title'] }}
                                    </div>
                                    {{-- <div class="down">
                                        {{ $payment['description'] }}
                                    </div> --}}
                                </label>
                            </li>
                        @endforeach
                    </ul>
                    <input type="hidden" name="pay_status" value=1>
                    <div class="invoice-list row">
                        @include('front.invoice')
                    </div> 
                    <div class="mt-5">
                        <p>特別提醒</p>
                        <p class="mt-3">1.如首次體驗或使用活動優惠碼用戶，享免費使用頻道及無限觀看課程。</p>
                        <p>2.其提供優惠天數（註1）到期後，將依您所選擇的訂閱方案及付款方式，進行<strong>付費續訂</strong>。</p>
                        <p>3.免費體驗期間可隨時取消，詳情請見官網「常見問題」。</p>
                        <p>*註1：優惠天數依活動說明為準。</p>
                    </div>
                    <input id="place_order" type="submit" onclick="tt(this)" value="{{ __( 'frontstaticword.ForwardPayment' ) }}">
                </section>
                <input type="hidden" name="test_mode" value="{{ $test_mode }}">
            </form>
        </div>
    @else
        <p class="empty subscriptions">購物車內沒有任何商品，無法進行結帳</p>
    @endif
        </div>
    </div>
    <button type="button" class="d-none" id="hidden-error" data-toggle="modal" data-target="#staticBackdrop"></button>
</section>
@endsection
@section('custom-script')
<script>
    jQuery(document).ready(function($){
        function changeInvoiceFields(type){
            switch (type) {
                case '1':
                    $('#donate_number_field').slideUp().find('select').attr('disabled',true);
                    // $('#donate_number_field select').attr('disabled',true);
                    $('#carrier_type_field').slideDown().find('select').attr('disabled',false);
                    // $('#carrier_type_field select').attr('disabled',false);
                    $('#customer_identifier_field').slideUp().find('input').attr('disabled',true);
                    $('#customer_name_field').slideUp().find('input').attr('disabled',true);
                    $('#carrier_number_field').slideDown().find('input').attr('disabled',false);
                    $('#invoice_paper_field').slideDown().find('input').attr('disabled',false);
                    $('#invoice_tax_email_field').slideUp().find('input').attr('disabled',true);
                    // $('#invoice_tax_email').attr('disabled',true);
                    break;
                case '2':
                    $('#carrier_type_field').slideUp().find('select').attr('disabled',true);
                    // $('#carrier_type_field select').attr('disabled',true);
                    $('#donate_number_field').slideUp().find('select').attr('disabled',true);
                    // $('#donate_number_field select').attr('disabled',true);
                    $('#customer_identifier_field').slideUp().find('input').attr('disabled',true);
                    $('#customer_name_field').slideUp().find('input').attr('disabled',true);
					$('#carrier_number_field').slideUp().find('input').attr('disabled',true);
                    $('#invoice_paper_field').slideUp().find('input').attr('disabled',true);
                    $('#invoice_tax_email_field').slideUp().find('input').attr('disabled',true);
                    // $('#invoice_tax_email').attr('disabled',true);
                    break;
                case '3':
                    $('#customer_identifier_field').slideDown().find('input').attr('disabled',false);
                    $('#customer_name_field').slideDown().find('input').attr('disabled',false);
                    $('#donate_number_field').slideUp().find('select').attr('disabled',true);
                    // $('#donate_number_field select').attr('disabled',true);
                    $('#carrier_type_field').slideUp().find('select').attr('disabled',true);
                    // $('#carrier_type_field select').attr('disabled',true);
                    $('#carrier_number_field').slideUp().find('input').attr('disabled',true);
                    $('#invoice_paper_field').slideUp().find('input').attr('disabled',true);
                    $('#invoice_tax_email_field').slideDown().find('input').attr('disabled',false);
                    // $('#invoice_tax_email').attr('disabled',true);
                    break;
                case '4':
                    $('#customer_identifier_field').slideUp().find('input').attr('disabled',true);
                    $('#customer_name_field').slideUp().find('input').attr('disabled',true);
                    $('#donate_number_field').slideDown().find('select').attr('disabled',false);
                    // $('#donate_number_field select').attr('disabled',false);
                    $('#carrier_type_field').slideUp().find('select').attr('disabled',true);
                    // $('#carrier_type_field select').attr('disabled',true);
                    $('#carrier_number_field').slideUp().find('input').attr('disabled',true);
                    $('#invoice_paper_field').slideUp().find('input').attr('disabled',true);
                    $('#invoice_tax_email_field').slideUp().find('input').attr('disabled',true);
                    // $('#invoice_tax_email').attr('disabled',true);
                    break;
            }
        }
        $('#donate_number').select2({
            language:{
                noResults:function(){ return '沒有符合的捐贈單位'; }
            }
        });
		$('#carrier_type_field').show();
		$('#carrier_number_field').show();
        $('#invoice_paper_field').show();
        $('#invoice_type').change(function(e) {
            e.preventDefault();
            var type = $(this).val();
            changeInvoiceFields(type);
        });
        $(window).on('load',function(){
            changeInvoiceFields($('#invoice_type').val());
        });

    });
</script>
<script>
    window.addEventListener('pageshow', function(event) {
		if ( $('#test').val() == 1  ) {
            $('#hidden-error').click();
        }
    }, false);
	function tt(placeOrder){
        $('.loader').attr( 'style', 'display:flex !important;' );
        placeOrder.disabled = "disabled";
		$('#test').val(1);
        $('#gc_payingt').submit();
        
	}
</script>
<script>
    let input = document.querySelector('.input-text');
    let aftertext = document.querySelector('.aftertext')
    let placeOrder = document.querySelector('#gc_payments > #place_order')
    input.addEventListener('keyup',checkoutInput)
    function checkoutInput (){
        if(input.value !== ''){
            aftertext.innerText = "點選使用後，啟動優惠券"
            aftertext.style.color = "#F0507D"
            placeOrder.style.backgroundColor = "grey"
            placeOrder.style.cursor= "not-allowed"
            placeOrder.disabled = true
        }
        else if (input.value === ''){
            aftertext.innerText=''
            placeOrder.style = ''
            placeOrder.disabled = false
        }
    }

</script>
@endsection