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

@section('back_button')
    @if (isset($event))
        <a href="{{ route('member.events.event_details', ['event_id' => jsencode_userdata($event->id), 'redirect' => request()->back]) }}"
            class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @else
        <a href="{{ url()->previous() }}" class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @endif
@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 --}}
                    @if (isset($type) && jsdecode_userdata($type) == 'host-subscription')
                        <a href="{{ route('member.card.payment.form', ['type' => $type, 'plan' => jsencode_userdata($plan->id)]) }}"
                            id='payNow' type='button' class="button primary-btn full-btn">Add new
                            card <div class="spinner-border d-none" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </a>
                    @else
                        <a href="{{ route('member.card.payment.form', ['type' => isset($type) && jsdecode_userdata($type) === 'become-member' ? $type : jsencode_userdata('entry_fee'), 'event' => jsencode_userdata($event->id), 'plan' => 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>
                    @endif
                </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

                    @if (isset($event))
                        <input type="hidden" name="event_id" value="{{ jsencode_userdata($event->id) }}">
                    @endif

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

                @php
                    switch (1) {
                        case isset($type) && jsdecode_userdata($type) == 'host-subscription':
                            $url = route('subscription.create');
                            $btnText = 'subscribe';
                            break;

                        case isset($type) && jsdecode_userdata(request()->type) == 'become-member':
                            $url = route('payment.host.plan.event');
                            $btnText = 'subscribe';
                            break;

                        default:
                            $url = route('payment.card.default');
                            $btnText = 'purchase';
                    }
                @endphp
                {{-- <button id='payByChoosenCard' class="button primary-btn full-btn"
                    url="@if (isset($type) && jsdecode_userdata($type) == 'host-subscription') {{ route('subscription.create') }}
                                                                                       @elseif(isset($type) && jsdecode_userdata(request()->type) == 'become-member')
                                                                                            {{ route('payment.host.plan.event') }}
                                                                                       @else
                                                                                            {{ route('payment.card.default') }} @endif">Purchase
                    <div class="spinner-border d-none" role="status">
                        <span class="sr-only">Loading...</span>
                    </div></button> --}}

                <button id='payByChoosenCard' class="button primary-btn full-btn"
                    url="{{ $url }}">{{ $btnText }}
                    <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