<style>
    .badge {
        position: relative;
        top: -15px;
        left: -25px;
        border: 1px solid red;
        border-radius: 50%;
        background-color: red;
    }
</style>

@php

    $user_image_path = getSession('user_image');
    $profile_image =  getSession('profile_image');

    $max_file_size= $file = config('constant.MAX_FILE_SIZE');
@endphp

<!-- top navigation -->
<div class="top_nav">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        @if(empty($profile_image))
                            <img src="{{ asset('images/user.png') }}" alt="profile picture">
                        @else
                            <img src="{{getPublicFile($user_image_path)}}" alt="profile picture">
                        @endif{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}
                        <span class=" fa fa-angle-down"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-usermenu pull-right">

                        <li><a  onclick="common_helper.commonModalView('{{route('show.modal')}}','PROFILE_IMAGE_MODAL_VIEW','profile_pic_modal')"> Profile</a></li>
                        <li><a  onclick="common_helper.commonModalView('{{route('show.modal')}}','SUPPORT_MODAL_VIEW','support_modal')"> Technical Support </a></li>
                        <li><a onclick="common_helper.commonModalView('{{route('show.modal')}}','PAYMENT_MODAL_VIEW','payment-report-modal')"> Payment Settings</a></li>
{{--                        @if(auth()->user()->is_import == config('constant.IMPORT_REPORT_STATUS.ELIGIBLE'))--}}
{{--                        <li><a href="#" onclick="event.preventDefault();$(`#confirmation_modal`).modal('show')"> Cancel Payment</a></li>--}}
{{--                        @endif--}}
{{--                        @php--}}
{{--                           $subscription_status_view = 'Subscribed';--}}
{{--                           if(Auth::user()->subscription_status == config('constant.SUBSCRIPTION_STATUS.SUBSCRIBED')){--}}
{{--                                  $subscription_status_view = 'cancel';--}}
{{--                           }--}}
{{--                        @endphp--}}
                        @if(Auth::user()->subscription_status == config('constant.SUBSCRIPTION_STATUS.SUBSCRIBED'))
                            <li><a href="#" onclick="subscription()"> {{'Cancel Account'}}</a></li>
                        @endif
                        <li>
                            <form method="post" action="{{ route('user.logout') }}">
                                {{ csrf_field() }}
                                <button type="submit" style="background-color: #fff; border: none;margin-top: 10px; margin-left:13px; color: #5A738E;" data-toggle="tooltip" data-placement="top" title="Logout">Log Out <i class="fa fa-sign-out pull-right" style="margin-right: 15px;"></i></button>
                            </form>
                        </li>
                    </ul>
                </li>

                @include('partials.video_setting')
                @include('partials.supportsubmenu')

            </ul>
        </nav>

        @include('partials.smart_credit_status')

    </div>
</div>
<!-- /top navigation -->
<div id="modal_target"></div>

<!--
        <div class="modal fade" id="confirmation_modal" style="margin-top: 50px" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-md" id="modal-dialog-panel">
                <div class="modal-content">
                    <div class="modal-header modal-header-warning">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <h4 class="mb-2 text-center" id="message_text">
                            Are you sure you want to delete your payment
                            and cancel Credit Zombies/SmartCredit account?
                        </h4>
                    </div>
                    <div class="modal-footer" style="text-align: center">
                        <button class="btn btn-success btn-lg" id="btn-submit-form">Yes</button>
                        <button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

 -->

@push('script')

   <script type="text/javascript">

            $('#popup_youtube').click(function (e) {
                e.preventDefault();
                common_helper.youtubePopup($("#popup_youtube"));
            });

            const callbackfunction=(result)=>{
                if(result.status)
                {
                    // $('#confirmation_modal').modal('hide');
                    @php
                        unsetCache('card_'.auth()->id());
                        unsetCache('expiration_'.auth()->id());
                        unsetCache('cvv_'.auth()->id());
                    @endphp
                    window.location.href='{{route('manage.clients')}}';

                }
            }

            $('#btn-submit-form').click(function (e) {
               common_helper.globalAjaxRequestAsync('{{route('process.ajax')}}','POST',{action:'DELETE_RECURRING',id:null, _token:"{{ csrf_token() }}"},callbackfunction);
            })

            const subscription = () => {
                event.preventDefault();
                let message = 'Are you sure you want to cancel your account?'
                common_helper.commonModalView('{{route('show.modal')}}','COMMON_MODAL','confirmation_modal_subscription',message);
            }

            {{--$('#btn-submit-subscription').click(function (e) {--}}
            {{--    common_helper.globalAjaxRequestAsync('{{route('process.ajax')}}','POST',{action:'SUBSCRIPTION_SMART_CREDIT',id:null, _token:"{{ csrf_token() }}"},subscriptioncallbackfunction);--}}
            {{--})--}}

            const submitSubscription = ()=>{
                common_helper.globalAjaxRequestAsync('{{route('process.ajax')}}','POST',{action:'SUBSCRIPTION_SMART_CREDIT',id:null, _token:"{{ csrf_token() }}"},subscriptioncallbackfunction);
            }

            const subscriptioncallbackfunction = (result)=>{
                if(result.status)
                {
                    $('#confirmation_modal_subscription').modal('hide');
                    Swal.fire({icon: result.type,title: result.message,width: 450,timer: 5000});
                    window.location.href='{{route('manage.clients')}}';
                }else{
                    $('#confirmation_modal_subscription').modal('hide');
                    Swal.fire({icon: result.type,title: result.message,width: 450,timer: 5000});
                }
            }

            const payment_form_submit =(e)=>{
                common_helper.formValidate('#payment-report_form',
                    {'card_number': 'required', 'expiry': 'required', 'cvv': 'required'},
                    {
                        'card_number': {required: "Please enter your card number"},
                        'expiry': {required: "Please enter expire date"},
                        'cvv': {required: "Please enter your card code"}
                    }
                );

                if($('#payment-report_form').valid()) {
                    $('#payment-report_form').submit();
                }

            }

            const expiryCard = () =>{
              let data = $("#expiry").val();
                    if ( data.length === 2){
                        $("#expiry").val(data + "/");
                    }
            }

   </script>

@endpush
