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


@section('back_button')
    <a href="{{ route('subscription.upgrade.payment.form' , ['plan_id' => jsencode_userdata($plan->id)])  }}" 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">
            <div class="signup-wrapper">
                @include('include.card.card-header', ['plan' => $plan])
                <div class="card-details-form">
                    <form action="@if(userCancelledPlan(auth()->user()))
                                        {{ route('subscription.reactivate' ,['plan_id' => jsencode_userdata($plan->id)]) }}
                                  @else
                                        {{ route('subscription.upgrade', ['plan_id' => jsencode_userdata($plan->id)]) }}
                                  @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</label>

                                    <div class="form-field">
                                        <input type="text" name='first_name'
                                            class="form-control @error('first_name') is-invalid @enderror"
                                            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"
                                            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"
                                            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">
                                            <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>


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

                            <div class="col-5 user_cardDetail">
                                <div class="form-group">
                                    <label for="">City</label>
                                    <div class="form-field">
                                        <input type="text" name='city'
                                            class="form-control @error('city') is-invalid @enderror" 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">
                                            <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"
                                            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(userCancelledPlan(auth()->user()))
                                            RE-ACTIVATE
                                    @else
                                            CHANGE PLAN
                                    @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' => false])
    <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) {
            // //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')

        form.addEventListener('submit', async (e) => {
            //show loader
            jQuery('#paymentForm').find('button').attr('disabled', true)

            e.preventDefault()

            //show full page loader
            jQuery('#fullPageLoader').removeClass('d-none');

            let userId = jQuery('#user-id').val();
            const {
                setupIntent,
                error
            } = await stripe.confirmCardSetup(
                client_secret, {
                    payment_method: {
                        card: cardNumberElement,
                    }
                }
            )
            if (error) {
                cardBtn.disable = false

                //hide button loaders
                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.payment_method)
                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) {

                            //hide loader
                            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() {
                                window.location.href = response.url;
                            })
                        } else {
                            jQuery('.email-otp-view').html(response.data);
                            errorShow('Error', response.message, 'TRY AGAIN');

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