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

@section('back_button')
    <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>
@endsection


@section('content')
    <div class="page-wrapper">
        <div class="container">
            {{-- <label for="custom-made-check" class="event-fee-box grad-border">
        <div class="event-fee-box-inner">
            <div class="onetime-pay-box">
                <p>Host's Event Fee/ (one time)</p>
                <div class="netime-pay-money">
                    <h3>${{ $event->event_fee }}</h3>
                    <div class="custom-made-check"></div>
                    <input type="checkbox" name="" checked id="custom-made-check" class="d-none">
                </div>
            </div>
        </div>
    </label> --}}
            {{-- card header  --}}
            @include('include.card.card-header', ['user' => auth()->user()])
            {{-- <div class="subscription-card-box">
        <div class="sub-card-inner">
            <h4>Event Fee</h4>
            <div class="sub-card-prize">
                <h3>Hosted event</h3>

                <h4>${{ $event->event_fee }}</h4>
            </div>
            <div class="sub-coupon-box">
                <div class="sub-coupon-detials">
                    <h3>sub-coupon</h3>
                    <span>if any</span>
                </div>
                <div class="sub-coupon-code"></div>
            </div>
            <div class="sub-total-data">
                <h3>Total</h3>
                <h2>${{ $event->event_fee }}</h2>
            </div>
        </div>
    </div> --}}
            <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>
    

                    <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='submit' 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="event_id" value="{{ jsencode_userdata($event->id) }}">
                    <input type="hidden" name="plan_id" value="{{ jsencode_userdata($plan->id) }}">
                </div>
                <button id='payByChoosenCard' class="button primary-btn full-btn" url="@if(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>
            </div>
        </div>
    </div>
    </div>
@endsection
@push('scripts')
    <script>
        jQuery(document).ready(function() {
            //disable pay button
            jQuery('#payByChoosenCard').attr('disabled', true);


            //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');
                } else {
                    jQuery('#payByChoosenCard').attr('disabled', true);
                    jQuery('#payNow').removeClass('hide-anchor-btn');
                    jQuery('#payNow').attr('href',
                        "{{ route('member.card.payment.form', ['type' => jsencode_userdata('entry_fee'), 'event' => jsencode_userdata($event->id)]) }}"
                    )
                }
            })

            //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