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


@if (isset($type) && jsdecode_userdata($type) == 'entry_fee')
    @section('back_button')
        <a href="{{ route('member.events.purchase', ['event_id' => jsencode_userdata($event->id)]) }}" class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @endsection
@endif

@if (isset($type) && jsdecode_userdata($type) == 'update')
    @section('back_button')
        <a href="{{ route('member.transaction.history') }}" class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @endsection
@endif

@if (isset($type) && jsdecode_userdata($type) == 'become-host')
    @section('back_button')
        <a href="{{ route('member.become.host' , ['plan_id' => request()->route('plan_id') , 'event_id' => request()->event , 'type' => $type]) }}" class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @endsection
@endif

@if (isset($type) && jsdecode_userdata($type) == 'host-subscription')
    @section('back_button')
        <a href="{{ route('host.become.member' , ['plan_id' => request()->plan , 'type' => $type]) }}" class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @endsection
@endif

@if (isset($type) && jsdecode_userdata($type) == 'become-member')
    @section('back_button')
        <a href="{{ route('host.become.member' , ['plan_id' => jsencode_userdata($plan->id) , 'event_id' => jsencode_userdata($event->id) , 'type' => $type]) }}" class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @endsection
@endif

@php
    use App\Models\User;
    use App\Models\Event;
    $user = null;

    //if user want to only update their card details
    if (isset($type) && jsdecode_userdata($type) == 'update') {
        $user = auth()->user();
    } elseif (isset($type) && jsdecode_userdata($type) == 'entry_fee') {
        $user = auth()->user();
    } elseif (isset($type) && jsdecode_userdata($type) == 'become-host') {
        $user = auth()->user();
        $event = null;
    } elseif (isset($type) && jsdecode_userdata($type) == 'become-member') {
        $user = auth()->user();

    }
    else {
        //if user purchase plan
        $user = User::find(jsdecode_userdata($user_id));
        //check if user is host
        $event = Event::find($user->event_id);
    }
@endphp


@section('content')
    <section class="main-sec member-sec">
        <div class="container">
            <div class="signup-wrapper">
                @if (!(isset($type) && jsdecode_userdata($type) == 'update'))
                    @include('include.card.card-header', ['event' => $event])
                @endif

                <div class="card-details-form">
                    <form
                        action="@if (isset($type) && jsdecode_userdata($type) == 'update')
                                      {{ route('member.card.details.update') }}
                                 @elseif(isset($type) && jsdecode_userdata($type) == 'entry_fee')
                                      {{ route('payment.charge', ['type' => 'member']) }}
                                 @elseif(($user->event_id && !(isset($type) && jsdecode_userdata($type) == 'become-host')) || (isset($type) && jsdecode_userdata($type) == 'become-member') )
                                      {{ route('payment.subscription.event.fee') }}
                                 @else
                                      {{ route('subscription.create') }} @endif"
                        id="paymentForm" method='post'>
                        <h3 class='card-detail-element'>CARD DETAILS</h3>
                        <div class="row g-2">
                            <div class="col-md-12 card-detail-element">
                                <div class="form-group mb-0">
                                    <label>Card Number <span class="required"> *</span></label>
                                    <div class="form-field form-custom-height">
                                        <div id='cardNumberElement'></div>
                                        {{-- <span class="form-icon">
                                            <img src="{{ asset('images/multi-cards.svg') }}" alt="">
                                        </span> --}}
                                        <label id='cardNumberError'
                                            class="stripe-error-messages error-message d-none"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 card-detail-element">
                                <div class="form-group mb-0">
                                    <label>Expiration Date <span class="required"> *</span></label>
                                    <div class="form-field form-custom-height">
                                        <div id="cardExpiryElement"></div>

                                    </div>
                                    <label id='cardExpiryError' for="cardExpiryElement"
                                        class="stripe-error-messages error-message d-none"></label>
                                </div>
                            </div>
                            <div class="col-6 card-detail-element">
                                <div class="form-group mb-0">
                                    <label>CVV <span class="required"> *</span></label>
                                    <div class="form-field">
                                        <div id="cardCVCElement"></div>

                                        {{-- <span class="form-icon">
                                            <img src="{{ asset('images/debit-card.svg') }}" alt="">
                                        </span> --}}
                                    </div>
                                    <label id='cardCVCError' for="cardCVCElement"
                                        class="stripe-error-messages error-message d-none"></label>
                                </div>
                            </div>
                            <div class="col-6 user_cardDetail">
                                <div class="form-group mb-0">
                                    <label>First name <span class="required"> *</span></label>
                                    <div class="form-field">
                                        <input type="text" name='first_name'
                                            class="form-control @error('first_name') is-invalid @enderror custom-input"
                                            placeholder="First Name" value="{{ $user->first_name }}">
                                    </div>
                                    @error('first_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                            </div>
                            <div class="col-6 user_cardDetail">

                                <div class="form-group mb-0">
                                    <label>Last name <span class="required"> *</span></label>
                                    <div class="form-field">
                                        <input type="text" name='last_name'
                                            class="form-control @error('last_name') is-invalid @enderror custom-input"
                                            placeholder="Last Name" value="{{ $user->last_name }}">
                                    </div>
                                    @error('last_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12 user_cardDetail">
                                <div class="form-group mb-0">
                                    <label for="">Address <span class="required"> *</span></label>
                                    <div class="form-field">
                                        <input type="text" name='address'
                                            class="form-control @error('address') is-invalid @enderror custom-input"
                                            placeholder="Address"
                                            value="{{ $user->user_details ? $user->user_details->address : null }}">

                                    </div>
                                    @error('address')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-12 user_cardDetail">
                                <div class="form-group mb-0">
                                    <label for="">Country <span class="required"> *</span></label>
                                    <div class="form-field">
                                        <select name="country" id="country"
                                            class="form-control @error('country') is-invalid @enderror custom-input">
                                            <option value="">Country</option>
                                        </select>
                                        <span class="form-icon">
                                            <img src="{{ asset('images/dropdown-icon.svg') }}" alt="">
                                            {{-- <img src="images/dropdown-icon.svg" alt=""> --}}
                                        </span>
                                    </div>
                                    @error('country')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            @if (isset($type) && jsdecode_userdata($type) == 'entry_fee')
                                <input type="hidden" name='event_id' value="{{ jsencode_userdata($event->id) }}">
                            @else
                                <input type="hidden" name='plan_id' value="{{ $plan ? jsencode_userdata($plan->id) : null }}">
                            @endif

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

                            {{-- MEMBER BECOME HOST PAYING EVENT FEE --}}
                            @if (request()->event)
                                <input type="hidden" name='event_id' value="{{ request()->event }}">
                            @endif


                            <input type="hidden" id='user-id' name='user_id'
                                value="{{ jsencode_userdata($user->id) }}">


                            <div class="col-5 user_cardDetail">
                                <div class="form-group">
                                    <label for="">City <span class="required"> *</span></label>
                                    <div class="form-field">
                                        <input type="text" name='city'
                                            class="form-control @error('city') is-invalid @enderror custom-input" placeholder="City"
                                            value="{{ $user->user_details ? $user->user_details->city : null }}">

                                    </div>
                                    @error('city')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-4 user_cardDetail">
                                @php
                                    use App\Models\State;
                                    $states = [];
                                    if ($user->user_details) {
                                        $states = State::where('country_id', $user->user_details->country)->get();
                                    }

                                @endphp
                                <div class="form-group">
                                    <label for="">State <span class="required"> *</span></label>
                                    <div class="form-field">

                                        <select name="state" id="state"
                                            class="form-control @error('state') is-invalid @enderror custom-input">
                                            <option value="">State</option>
                                            @if ($user->user_details && $user->user_details->state)
                                                @foreach ($states as $state)
                                                    <option id="{{ $state->id }}" value="{{ $state->id }}"
                                                        @if ($state->id == $user->user_details->state) selected @endif>
                                                        {{ $state->name }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <span class="form-icon">
                                            <img src="{{ asset('images/dropdown-icon.svg') }}" alt="">
                                            {{-- <img src="images/dropdown-icon.svg" alt=""> --}}
                                        </span>
                                    </div>
                                    @error('state')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-3 user_cardDetail">
                                <div class="form-group">
                                    <label for="">Zip code </label>
                                    <div class="form-field">
                                        <input type="number" name='zip_code'
                                            class="form-control @error('zip_code') is-invalid @enderror custom-input"
                                            placeholder="Zip code" maxlength="6"
                                            value="{{ $user->user_details ? $user->user_details->zip_code : null }}">
                                    </div>
                                    @error('zip_code')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>


                            @php
                                $btnText = auth()->user()
                                    ? (authRole() == 'Member'
                                        ? 'PURCHASE EVENT CODE'
                                        : 'SUBSCRIBE')
                                    : ($user && $user->hasRole('Host')
                                        ? 'PURCHASE EVENT CODE'
                                        : 'SUBSCRIBE');
                            @endphp

                            <div class="col-md-12">
                                <button href="" id='payNow' type='submit'
                                    class="button primary-btn full-btn">
                                    @if (isset($type) && jsdecode_userdata($type) == 'update')
                                        UPDATE
                                    @elseif(isset($type) && jsdecode_userdata($type) == 'entry_fee')
                                        PAY NOW
                                    @elseif (isset($type) && jsdecode_userdata($type) == 'become-host')
                                        PURCHASE
                                    @elseif (isset($type) && jsdecode_userdata($type) == 'become-member')
                                        SUBSCRIBE
                                    @else
                                        {{ $btnText }}
                                    @endif
                                    <div class="spinner-border d-none" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    {{-- @include('include.card-date-dropdown')
     --}}
@endsection

@push('scripts')
    @include('validations.js_card-detail', ['required' => false])
    <script>
        // //DISABLE SUBSCRIBE BUTTON
        // document.getElementById('payNow').disabled = true;

        var stripe = Stripe(
            "{{ config('app.public_key') }}"
        );

        var client_secret = "{{ $user->createSetupIntent()->client_secret }}"
        var elements = stripe.elements();

        var style = {
            base: {
                padding: '14px 50px 14px 27px',
                fontSize: '14px',
                fontWeight: '500',
                border: '1px solid #fff',
                background: '#111',
                color: '#fff',
                borderRadius: '5px',
                '::placeholder': {
                    color: '#fff',
                    // fontWeight: 'normal'
                },
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };

        // create inputs for cardName,CardNumber,cardExpiry,cardCvc
        var cardNumberElement = elements.create('cardNumber', {
            style: style,
            showIcon: true,
            placeholder: '1234 1234 1234 1234',
            classes: {
                base: 'stripe-element',
                invalid: 'error'
            }
        });
        cardNumberElement.mount('#cardNumberElement');
        var cardExpiryElement = elements.create('cardExpiry', {
            style: style,
            classes: {
                base: 'stripe-element',
                invalid: 'error'
            }
        });
        cardExpiryElement.mount('#cardExpiryElement');
        var cardCvcElement = elements.create('cardCvc', {
            style: style,
            showIcon : true ,
            placeholder: 'CVV',
            classes: {
                base: 'stripe-element',
                invalid: 'error',
                '::placeholder': {
                      color: '#aab7c4',
                 },
            }
        });
        cardCvcElement.mount('#cardCVCElement');

        //Manage cardElements enable and disable based on coupan discount amount
        manageCardElements(cardNumberElement, cardExpiryElement, cardCvcElement);
        managePurchaseButton(cardNumberElement, cardExpiryElement, cardCvcElement );
       


        cardNumberElement.on('change', function(event) {
            // //ENABLE DISABLE SUBSRIBE BUTTON
            // enableDisablePayBtn(event)

            //FOR ERROR MESSAGES
            if (event.error) {
                jQuery('#cardNumberError').removeClass('d-none');
                jQuery('#cardNumberError').text(event.error.message);

            } else {
                jQuery('#cardNumberError').addClass('d-none');
                jQuery('#cardNumberError').text('');
            }
        });
        cardExpiryElement.on('change', function(event) {
            // //ENABLE DISABLE SUBSRIBE BUTTON
            // enableDisablePayBtn(event)

            //FOR ERROR MESSAGES
            if (event.error) {
                jQuery('#cardExpiryError').removeClass('d-none');
                jQuery('#cardExpiryError').text(event.error.message);
            } else {
                jQuery('#cardExpiryError').addClass('d-none');
                jQuery('#cardExpiryError').text('');
            }
        });
        cardCvcElement.on('change', function(event) {
            // //ENABLE DISABLE SUBSRIBE BUTTON
            // enableDisablePayBtn(event)

            //FOR ERROR MESSAGES
            if (event.error) {
                jQuery('#cardCVCError').removeClass('d-none');
                jQuery('#cardCVCError').text(event.error.message);
            } else {
                jQuery('#cardCVCError').addClass('d-none');
                jQuery('#cardCVCError').text('');
            }
        });




        function enableDisablePayBtn(event) {
            if (event.complete) {
                //DISABLE SUBSCRIBE BUTTON
                document.getElementById('payNow').disabled = false;
            } else {
                //ENABLE SUBSCRIBE BUTTON
                document.getElementById('payNow').disabled = true;
            }
        }

        var form = document.getElementById('paymentForm')
        var cardBtn = document.getElementById('payNow')

        // cardBtn.addEventListener('click', function(){
        //     if(!document.getElementById('paymentForm').isValid()){
        //       //hide ful page loader
        //       jQuery('#paymentForm').find('button').attr('disabled', false)
        //             jQuery('#fullPageLoader').addClass('d-none');
        // }
        // })

        form.addEventListener('submit', async (e) => {
            //show loader
            // jQuery('#paymentForm').find('button').children('.spinner-border').removeClass('d-none')
            jQuery('#paymentForm').find('button').attr('disabled', true)

            e.preventDefault()

            //show full page loader
            jQuery('#fullPageLoader').removeClass('d-none');
            
            //CHECK FORM IS VALID 
            if(jQuery('#paymentForm').valid() === false){
                jQuery('#fullPageLoader').addClass('d-none');
                jQuery('#paymentForm').find('button').attr('disabled', false)
                return false;
            }

            let userId = jQuery('#user-id').val();

            let error , setupIntent ;
            let amount = 1;

            //If coupan is applied and value is 0 means 100% discount
            const coupanInput = document.querySelector('input[name="coupanCode"]');
            
            if(coupanInput){
                 amount = coupanInput.getAttribute('data-amount');
            }


            if( amount && amount != '0.00'){
                // const {
                //     setupIntent,
                //     error
                // } = await stripe.confirmCardSetup(
                //     client_secret, {
                //         payment_method: {
                //             card: cardNumberElement,
                //         }
                    // }
                // )

                const result = await stripe.confirmCardSetup(client_secret, {
                    payment_method: {
                        card: cardNumberElement,
                    }
                });
                setupIntent = result.setupIntent;
                error = result.error;
            }else{
                setupIntent = undefined;
                error = false;
            }

            if (error) {
                cardBtn.disable = false

                //hide button loaders
                // jQuery('#paymentForm').find('button').children('.spinner-border').addClass('d-none')
                jQuery('#paymentForm').find('button').attr('disabled', false)

                //hide full page loader
                jQuery('#fullPageLoader').addClass('d-none');

            } else {
                let token = document.createElement('input')
                token.setAttribute('type', 'hidden')
                token.setAttribute('name', 'payment_method')
                token.setAttribute('value', (setupIntent !== undefined ? setupIntent.payment_method : null))
                form.appendChild(token)
                // form.submit();
                let updatedForm = jQuery('#paymentForm');
                // let form = jQuery('#paymentForm')
                let url = updatedForm.attr('action');

                let data = updatedForm.serialize();

                if (updatedForm.valid()) {
                    updatedForm.attr('disabled', true);
                    let response = ajaxCall(url, 'post', data);
                    response.then(function(response) {
                        if (response.status == true) {
                            // jQuery('.email-otp-view').html(response.data);

                            //hide loader
                            // jQuery('#paymentForm').find('button').children('.spinner-border').addClass(
                            //     'd-none')
                            jQuery('#paymentForm').find('button').attr('disabled', true)

                            //hide full page loader
                            jQuery('#fullPageLoader').addClass('d-none');

                            //show message modal
                            errorShow('Success', response.message, 'OK');

                            jQuery('#error-description').click(function() {
                                if (response.type == 'Host') {
                                    window.location.href =
                                        "{{ route('subscription.host-code', ['id' => 'did']) }}"
                                        .replace('did', userId)
                                } else if (response.type == 'Member') {
                                    window.location.href =
                                        "{{ route('signup.member.payment') }}"
                                } else if (response.type == 'card-update') {
                                    window.location.href =
                                        "{{ route('member.transaction.history') }}"
                                } else if (response.type == 'event-fee-paid') {
                                    window.location.href =
                                        "{{ route('member.events.feePaid', ['event_code' => 'code']) }}"
                                        .replace('code', response.code);
                                }
                            })
                        } else {
                            jQuery('.email-otp-view').html(response.data);
                            errorShow('Error', response.message, 'TRY AGAIN');

                            //hide loader
                            // jQuery('#paymentForm').find('button').children('.spinner-border').addClass(
                            //     'd-none')
                            jQuery('#paymentForm').find('button').attr('disabled', false)

                            //hide ful page loader
                            jQuery('#fullPageLoader').addClass('d-none');

                            jQuery('#error-description').click(function() {
                                window.location.reload();
                            })
                        }
                    })
                } else {
                    //hide ful page loader
                    jQuery('#paymentForm').find('button').attr('disabled', false)
                    jQuery('#fullPageLoader').addClass('d-none');
                }

            }
        })

        function errorShow(heading = null, message = null, description = null) {
            jQuery('#error-heading').text(heading);
            jQuery('#error-message').text(message);
            jQuery('#error-description').text(description);
            jQuery('.error-alert-modal').modal('show');
        }
    </script>

    {{-- country state select js  --}}
    <script>
        jQuery(document).ready(function() {
            let url = "{{ route('countries') }}";

            //hit the ajax
            let response = ajaxCall(url, 'get');
            response.then(function(response) {
                let html = '<option value="" >Country</option>';
                if (response.status) {
                    // setting country options
                    jQuery.each(response.data, function(key, value) {
                        html +=
                            `<option id="${value.id}" value="${value.id}" ${(value.id == "{{ $user->user_details ? $user->user_details->country : false }}") ? 'selected' : ' '}>${value.upper_name}</option>`;
                    });
                    jQuery('#country').html(html);
                }

                jQuery('#country').change(function() {
                    //get the country id
                    let id = jQuery(this).find('option:selected').attr('id');

                    let urlState = APP_URL + '/states/' + id;
                    //hit the ajax
                    let result = ajaxCall(urlState, 'get');
                    result.then(function(result) {
                        let stateHtml = '<option value="" >State</option> ';
                        if (result.status) {
                            //setting options
                            jQuery.each(result.data, function(key, value) {
                                stateHtml +=
                                    `<option id="${value.id}" value="${value.id}">${value.name}</option>`;
                            });
                            jQuery('#state').html(stateHtml);
                        }
                    })
                })
            })
        })
    </script>
@endpush