@extends('layouts.host', ['header' => true, 'header_image' => true])
@section('title', 'Add New Card')
@section('back_button')
    <a href="{{ url()->previous() }}" class="back-btn-back">
        <i class="fa-solid fa-chevron-left"></i>
    </a>
@endsection
@section('content')
    <section class="main-sec member-sec">
        <div class="container">

            @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();
                } else {
                    //if user purchase plan
                    $user = User::find(jsdecode_userdata($user_id));

                    //check if user is host
                    $event = Event::find($user->event_id);
                    // if(!$event){
                    //     $plan = getPlanById($user->plan_id);
                    // }
                }
            @endphp
            <div class="signup-wrapper">
                @if (!(isset($type) && jsdecode_userdata($type) == 'update'))
                    {{--
                    <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> --}}
                    @include('include.card.card-header', ['event' => $event, 'plan' => getHostPlan()])
                @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' => 'host', 'pay_for' => 'create_event']) }}

                                 @elseif($user->event_id)
                                       {{ 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="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 form-custom-height">
                                    <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 form-custom-height">
                                    <label>CVV  <span class="required"> *</span></label>
                                    <div class="form-field form-custom-height">
                                        <div id="cardCVCElement"></div>

                                        <span class="form-icon">
                                            <img src="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</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</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</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</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="{{ jsencode_userdata($user->plan_id) }}">
                            @endif

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

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

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


                            <div class="col-5 user_cardDetail">
                                <div class="form-group mb-0">
                                    <label for="">City</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</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>



                            <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($user->event_id)
                                        PAY NOW
                                    @else
                                        SUBSCRIBE
                                    @endif
                                    <div class="spinner-border d-none" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    @include('validations.js_card-detail', ['required' => true])
    <script>
        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,
            placeholder: 'CVV',
            classes: {
                base: 'stripe-element',
                invalid: 'error'
            }
        });
        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) {
            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) {
            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) {
            if (event.error) {
                jQuery('#cardCVCError').removeClass('d-none');
                jQuery('#cardCVCError').text(event.error.message);
            } else {
                jQuery('#cardCVCError').addClass('d-none');
                jQuery('#cardCVCError').text('');
            }
        });


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



        form.addEventListener('submit', async (e) => {
            //SHOW LOADER
            jQuery('#fullPageLoader').removeClass('d-none');

            jQuery('#paymentForm').find('button').attr('disabled', true)
            e.preventDefault()


            if(!jQuery('#paymentForm').valid()){
                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('#fullPageLoader').addClass('d-none');
                jQuery('#paymentForm').find('button').attr('disabled', false)

            } 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('#fullPageLoader').addClass('d-none');
                            jQuery('#paymentForm').find('button').attr('disabled', true)

                            //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('host.event.feePaid', ['event_code' => 'code']) }}"
                                        .replace('code', response.code);
                                }

                            })
                        } else {
                            jQuery('.email-otp-view').html(response.data);

                            window.location.reload();
                            errorShow('Error', response.message, 'TRY AGAIN')

                            //hide loader
                            jQuery('#fullPageLoader').addClass('d-none');
                            jQuery('#paymentForm').find('button').attr('disabled', false)
                        }
                    })
                } else {
                    //hide ful page loader
                    jQuery('#paymentForm').find('button').attr('disabled', false)
                    jQuery('#fullPageLoader').addClass('d-none');
                }

            }
        })


        //date time select box
        // jQuery(document).ready(function() {
        //     //show month year select box
        //     jQuery('#cardExpiryElement').find('input:first').focus(function() {
        //         console.log('ksdljf;lajfld;a')
        //         jQuery('#cardExpiryDropDown').modal('show');
        //     });

        //     jQuery('#saveCardExpiry').click(function() {
        //         let date = jQuery('#cardMonth').val();
        //         let month = jQuery('#cardYear').val();

        //         let cardExpiry = parseInt(date) + '/' + parseInt(month);

        //         console.log(jQuery('#cardExpiryElement').find('input'))
        //         console.log(date, month, cardExpiry);

        //         //  jQuery('#cardExpiryElement').value(cardExpiry);
        //         //  jQuery('input[name="exp-date"]').val(cardExpiry);

        //         cardExpiryElement.on('focus', function(event) {
        //             console.log(event , cardExpiryElement , cardExpiryElement.find('input') , 'element')
        //         });
        //     })
        // })

        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