@extends('layouts.app', ['header' => true, 'header_image' => true])

@section('back_button')
        <a href="{{  route('subscription.upgrade.show.plan', ['type' => jsencode_userdata('member') , 'plan' => jsencode_userdata($plan->id)])  }}" class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
@endsection


@section('content')
    <div class="page-wrapper">
        <div class="container">

            @include('include.card.card-header', ['user' => auth()->user(), 'plan' => $plan])

            <div>
                <div class=card-btn-bx>
                    <label for="custom-made-check1" class="check-trigger">use card on file<input type="checkbox"
                            id="custom-made-check1" name='choose-card' class="d-none">
                        <div class="custom-made-check"></div>
                    </label>

                    {{-- WHEN HOST GET SUBSCRIPTION --}}
                    <a href="{{ route('subscription.upgrade.payment.form' , ['type' => jsencode_userdata('add-card') , 'plan_id' => jsencode_userdata($plan->id)]) }}"
                        id='payNow' type='button' class="button primary-btn full-btn show-anchor-disable">Add new
                        card <div class="spinner-border d-none" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </a>
                </div>
                <div class="selected-card-bx">
                    @foreach (auth()->user()->userCards as $card)
                        <div class="form-group">
                            <label class="form-control user-card-list check-trigger">
                                <div class="custom-made-check"></div>
                                <input type="radio" name="card-chosen" value="{{ jsencode_userdata($card->id) }}"
                                    class="d-none" @if ($card->is_default == 1) checked @endif>
                                <p>{{ '**** **** ****' . ' ' . jsdecode_userdata($card->last_digits) }}</p>
                                <div class="form-icon" style="top: 15px;">
                                    <img src="{{ asset('images/Mastercard.svg') }}" alt="">
                                </div>
                            </label>
                        </div>
                    @endforeach

                    <input type="hidden" name="plan_id" value="{{ jsencode_userdata($plan->id) }}">
                </div>

           
                    <button id='payByChoosenCard' class="button primary-btn full-btn"
                        url="{{ route('subscription.upgrade' ,['plan_id' => jsencode_userdata($plan->id)]) }}"> @if(authSubscription())
                                                                                                                    CHANGE PLAN
                                                                                                                @else
                                                                                                                    CREATE SUBSCRIPTION
                                                                                                                @endif
                        <div class="spinner-border d-none" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </button>
            </div>
        </div>
    </div>
    </div>
@endsection
@push('scripts')
    <script>
        jQuery(document).ready(function() {
            //disable pay button
            jQuery('#payByChoosenCard').attr('disabled', false);
            jQuery('#custom-made-check1').prop('checked' , true);

            let addNewUrl = jQuery('#payNow').attr('href');

            //DISABLE ADD NEW BUTTON
            jQuery('#payNow').addClass('hide-anchor-btn');
            jQuery('#payNow').removeAttr('href');

            //enable disable button when user by card is checked
            jQuery('#custom-made-check1').change(function() {
                if (this.checked) {
                    jQuery('#payByChoosenCard').attr('disabled', false);
                    jQuery('#payNow').addClass('hide-anchor-btn');
                    jQuery('#payNow').removeAttr('href');

                    //ENABLE CARD RADIO
                    jQuery('input[type="radio"]').attr('disabled' , false);
                } else {
                    jQuery('#payByChoosenCard').attr('disabled', true);
                    jQuery('#payNow').removeClass('hide-anchor-btn');
                    jQuery('#payNow').attr('href' , addNewUrl);

                    //DISABLE CARD RADIO
                    jQuery('input[type="radio"]').attr('disabled' , true);
                }
            })

            //disable
            //on card select
            jQuery('input[type="radio"]').change(function() {
                jQuery('#payByChoosenCard').attr('disabled', false);
                let choosedCard = jQuery('input[type="radio"]:checked').val();
            });


            //on purchase button
            jQuery('#payByChoosenCard').off('click').click(function(e) {
                e.preventDefault();
                //SHOW FULL PAGE LOADER
                jQuery('#fullPageLoader').removeClass('d-none');

                //disable anchor
                jQuery(this).addClass('disable-anchor');

                //hide loader
                jQuery(this).attr('disabled', false)

                let choosedCard = jQuery('input[type="radio"]:checked').val();
                let eventId = jQuery('input[name="event_id"]').val();
                let planId = jQuery('input[name="plan_id"]').val();

                //if user not select any card
                if (choosedCard == undefined) {
                    errorShow('Unfortunately', 'Please select card ', 'Try Again');
                    return;
                }

                if (choosedCard == '') {
                    errorShow('Unfortunately', 'Please select card ', 'Try Again');
                    //enable anchor
                    jQuery(this).removeClass('disable-anchor');
                    return;
                } else {
                    data = {
                        'card': choosedCard,
                        'event_id': eventId,
                        'plan_id': planId,
                    }
                }

                // let url = "{{ route('payment.card.default') }}";
                let url = jQuery(this).attr('url');

                let response = ajaxCall(url, 'post', data);
                response.then((responseData) => {

                    if (responseData.status == true) {
                        //show message
                        let title = responseData.title != undefined ? responseData.title :
                            'Success';
                        errorShow(title, responseData.message, 'OK');

                        //hide loader
                        jQuery(this).children('.spinner-border').addClass('d-none')
                        jQuery(this).attr('disabled', true)
                        jQuery('#error-description').click(function() {
                            window.location.href = responseData.url;
                        });
                    } else {
                        //enable anchor
                        jQuery(this).removeClass('disable-anchor');

                        //SHOW FULL PAGE LOADER
                        jQuery('#fullPageLoader').removeClass('d-none');

                        //hide loader
                        jQuery(this).children('.spinner-border').addClass('d-none')
                        jQuery(this).attr('disabled', true)

                        //show message
                        errorShow('Unfortunately', responseData.message, 'Try Again');
                        jQuery(this).attr('disabled', false);
                    }
                    //hide loader

                    //HIDE FULL PAGE LOADER
                    jQuery('#fullPageLoader').addClass('d-none');

                })
            })
        });
    </script>
@endpush