@extends('layouts.host', ['header' => true, 'header_image' => true])
@section('title', 'Payment')
@section('back_button')
    <a href="{{ url()->previous() }}" class="back-btn-back">
        <i class="fa-solid fa-chevron-left"></i>
    </a>
@endsection
{{-- @dd(jsdecode_userdata($type)) --}}

@section('content')
    <div class="page-wrapper p-125">
        <div class="container">
            <div class="memeber-price-box">
                <label for="memeber-price-card">
                    <div class="memeber-price-details-outer">
                        <div class="memeber-price-details">
                            <p>ONE TIME</p>
                            <h3>${{ $plan->price }}<span>/event</span></h3>

                        </div>
                        <input type="checkbox" name="member-price-card" id="memeber-price-card"
                            checked>
                    </div>

                </label>
            </div>
            {{-- card header  --}}
            @include('include.card.card-header' , ['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>

                    <a href="@if(isset($type) && jsdecode_userdata($type) === 'become-host')
                                    {{ route('signup.payment.form' , ['plan_id' => jsencode_userdata($plan->id) , 'user_id' => jsencode_userdata(auth()->id()) , 'type' => $type ,'event' => jsencode_userdata($event->id)]) }}
                             @else
                                    {{ route('host.card.new.form', ['type' => jsencode_userdata('entry_fee'), 'event' => jsencode_userdata($event->id)]) }}
                             @endif"
                        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="event_id" value="{{ jsencode_userdata($event->id) }}">
                    <input type="hidden" name='plan_id' value="{{ jsencode_userdata($plan->id) }}">
                    <input type="hidden" name='user_type' value="{{ $type }}">
                </div>
                <button id='payByChoosenCard' class="button primary-btn full-btn" url="@if(isset($type) && jsdecode_userdata($type) === 'become-host')
                                                                                            {{ route('subscription.create') }}
                                                                                       @else
                                                                                                {{ route('host.payment.card.default') }}
                                                                                       @endif"> PURCHASE <div
                        class="spinner-border d-none" role="status">
                        <span class="sr-only">Loading...</span>
                    </div></button>
            </div>
        </div>
    </div>
    @auth
        @include('layouts.host_components.bottom-menu')
    @endauth
    </div>
@endsection
@push('scripts')
    <script>
        jQuery(document).ready(function() {

            jQuery('#payByChoosenCard').attr('disabled', false);
            jQuery('#custom-made-check1').prop('checked' , true);

            //DISABLE ADD NEW BUTTON
            let addNewUrl = jQuery('#payNow').attr('href');

            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);
                }
            })

            //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();

                let thisBtn = $(this);
                //SHOW FULLPAGE LOADER
                jQuery('#fullPageLoader').removeClass('d-none');

                thisBtn.attr('disabled', true);

                let choosedCard = jQuery('input[type="radio"]:checked').val();
                let eventId = jQuery('input[name="event_id"]').val();
                let planId = jQuery('input[name="plan_id"]').val();
                let userType = jQuery('input[name="user_type"]').val();
                //if user not select any card
                if (choosedCard == undefined) {
                    //HIDE LOADER
                    jQuery('#fullPageLoader').addClass('d-none');

                    thisBtn.attr('disabled', false);
                    errorShow('Unfortunately', 'Please select card ', 'Try Again');
                    return;
                }

                if (choosedCard == '') {
                     //HIDE LOADER
                     jQuery('#fullPageLoader').addClass('d-none');
                     thisBtn.attr('disabled', false);

                    errorShow('Unfortunately', 'Please select card ', 'Try Again');
                    return;
                } else {
                    data = {
                        'card': choosedCard,
                        'event_id': eventId,
                        'plan_id' : planId,
                        'type' : userType,
                        'coupanCode' : jQuery('input[name="discount-coupan"]').val()
                    }
                }

                let url = jQuery(this).attr('url');

                let response = ajaxCall(url, 'post', data);
                response.then((responseData) => {
                    if (responseData.status == true) {
                        //show message
                        errorShow('Success', responseData.message, 'OK');

                        //hide loader
                        thisBtn.children('.spinner-border').addClass('d-none')

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

                        jQuery('#error-description').click(function() {
                            window.location.href = responseData.url;
                        });
                    } else {
                        //hide loader
                        thisBtn.children('.spinner-border').addClass('d-none')
                        //HIDE FULL PAGE LOADER
                        jQuery('#fullPageLoader').addClass('d-none');

                        //show message
                        errorShow('Unfortunately', responseData.message, 'Try Again');
                        jQuery('#error-description').click(function() {
                            thisBtn.attr('disabled', false);
                        });
                    }
                    //hide loader

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