@extends('dashboard.dashboard_layouts.dashboard_master')
@section('admin_dashboard_title')
    Edit Profile
@endsection

@section('admin_dashboard_css')
    <style>
        .iti-flag {
            background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/img/flags.png");
        }
    </style>
@endsection

@section('admin_dashboard_content')
    <div class="content dashboard-content h-100">
        <h1 class="dashboard-content-h1">Edit Profile</h1>
        <div class="content-wrap">

            <!-- start breadcrumb -->
            <div class="breadcrumb-header justify-content-between">

                <nav class="breadcrumb-4">

                    <ol class="breadcrumb breadcrumb-style1">

                        @if ($login_user->roles[0]->name == 'Admin')
                            <li class="breadcrumb-item">

                                <a href="{{ route('dashboard') }}">Dashboard</a>

                            </li>
                        @elseif($login_user->roles[0]->name == 'Client')
                            <li class="breadcrumb-item">

                                <a href="{{ route('client-dashboard') }}">Dashboard</a>

                            </li>
                        @endif

                        <li class="breadcrumb-item">

                            <a href="{{ route('profile') }}">Profile</a>

                        </li>

                        <li class="breadcrumb-item active">Edit Profile</li>

                    </ol>

                </nav>

            </div>
            <!-- end breadcrumb -->

            @php
                $class = 'col-lg-12';
                $user = App\Models\User::where('id' , auth()->user()->id)->first();
            @endphp
            @canany(['profile edit personal information', 'profile edit password update', 'profile edit security question'])
                @php
                    $class = 'col-lg-4';
                    
                @endphp
            @endcan

            <!-- row start -->
            <div class="row row-sm">
                <!-- Col -->
                <div class="{{ $class }}">

                    <div class="card mg-b-20">

                        <div class="card-body">

                            <div class="ps-0">

                                <div class="main-profile-overview">

                                    <div class="main-img-user profile-user">
                                        <img alt="" src="{{ $user->campaign_information->campaign_bg_image != null ? asset('processed_images/' . $user->campaign_information->campaign_bg_image) : asset('user.png') }}"  style="object-position: top;">
                                        <a class="fas fa-camera profile-edit" data-bs-target="#imgmodal"
                                            data-bs-toggle="modal" href="JavaScript:void(0);"></a>

                                    </div>

                                    <div class="d-flex justify-content-between mg-b-20">

                                        <div>

                                            <h5 class="main-profile-name">{{ $login_user->first_name }}
                                                {{ $login_user->last_name }}</h5>

                                        </div>

                                    </div>


                                    <h6>Bio</h6>

                                    <div class="main-profile-bio">
                                                                                {{ $user_bio }}

                                    </div><!-- main-profile-bio -->


                                    @if ($login_user->roles[0]->name == 'Client')
                                        <hr class="mg-y-30">

                                        <label class="main-content-label tx-13 mg-b-20">Social</label>

                                        <div class="main-profile-social-list">

                                            <div class="media">

                                                <div class="media-icon bg-primary-transparent text-primary">

                                                    <i class="icon ion-logo-facebook"></i>

                                                </div>

                                                <div class="media-body text-truncate">

                                                    <span>Facebook</span> <a
                                                        href="{{ $login_user->facebook }}">{{ $login_user->facebook }}</a>

                                                </div>

                                            </div>

                                            <div class="media">

                                                <div class="media-icon bg-info-transparent text-info">

                                                    <i class="icon ion-logo-twitter"></i>

                                                </div>

                                                <div class="media-body">

                                                    <span>Twitter</span> <a
                                                        href="{{ $login_user->twitter }}">{{ $login_user->twitter }}</a>

                                                </div>

                                            </div>

                                            <div class="media">

                                                <div class="media-icon bg-danger-transparent text-danger">

                                                    <i class="icon ion-logo-instagram"></i>

                                                </div>

                                                <div class="media-body">

                                                    <span>Instagram</span> <a
                                                        href="{{ $login_user->instagram }}">{{ $login_user->instagram }}</a>

                                                </div>

                                            </div>

                                            <div class="media">

                                                <div class="media-icon bg-primary-transparent text-primary">

                                                    <i class="icon ion-logo-linkedin"></i>

                                                </div>

                                                <div class="media-body">

                                                    <span>Linkedin</span> <a
                                                        href="{{ $login_user->linkedin }}">{{ $login_user->linkedin }}</a>

                                                </div>

                                            </div>

                                            <div class="media">

                                                <div class="media-icon bg-danger-transparent text-danger">

                                                    <i class="icon ion-logo-youtube"></i>

                                                </div>

                                                <div class="media-body">

                                                    <span>Youtube</span> <a
                                                        href="{{ $login_user->youtube }}">{{ $login_user->youtube }}</a>

                                                </div>

                                            </div>

                                            <div class="media">

                                                <div class="media-icon bg-info-transparent"
                                                    style="color:#292BB8; background:#6C82CE;">

                                                    <i class="fab fa-flickr"></i>

                                                </div>

                                                <div class="media-body">

                                                    <span>Flicker</span> <a
                                                        href="{{ $login_user->flicker }}">{{ $login_user->flicker }}</a>



                                                </div>

                                            </div>

                                        </div>
                                    @endif


                                </div><!-- main-profile-overview -->

                            </div>

                        </div>

                    </div>

                    <div class="card mg-b-20">

                        <div class="card-body">

                            <div class="main-content-label tx-13 mg-b-25">

                                Contact

                            </div>

                            <div class="main-profile-contact-list">

                                <div class="media">

                                    <div class="media-icon bg-primary-transparent text-primary">

                                        <i class="icon ion-md-phone-portrait"></i>

                                    </div>

                                    <div class="media-body">

                                        <span>Mobile</span>

                                        <div>

                                            {{ $login_user->phone }}

                                        </div>

                                    </div>

                                </div>

                                <div class="media">

                                    <div class="media-icon bg-info-transparent text-info">

                                        <i class="icon ion-md-locate"></i>

                                    </div>

                                    <div class="media-body">

                                        <span>Current Address</span>

                                        <div>

                                            {{ $login_user->address }}

                                        </div>

                                    </div>

                                </div>

                            </div><!-- main-profile-contact-list -->

                        </div>

                    </div>

                </div>
                <!-- Col -->
                @canany(['profile edit personal information', 'profile edit password update', 'profile edit security
                    question'])
                    <div class="col-lg-8 panel panel-primary tabs-style-2">

                        <div class=" tab-menu-heading">
                            <div class="tabs-menu1">
                                <!-- Tabs -->
                                <ul class="nav panel-tabs main-nav-line">
                                    @can('profile edit personal information')
                                        <li>
                                            <a href="#profile" class="nav-link {{ $first_tab }} bg-white" data-bs-toggle="tab">
                                                Personal Information</a>
                                        </li>
                                    @endcan
                                    @can('profile edit password update')
                                        <li>
                                            <a href="#password" class="nav-link {{ $second_tab }} bg-white" data-bs-toggle="tab">
                                                Password Update</a>
                                        </li>
                                    @endcan
                                    @can('profile edit security question')
                                        <li>
                                            <a href="#security" class="nav-link {{ $third_tab }} bg-white" data-bs-toggle="tab">
                                                Security</a>
                                        </li>
                                    @endcan
                                    <!-- @if ($login_user->roles[0]->name == 'Client')
        <li><a href="#stripe" class="nav-link bg-white" data-bs-toggle="tab"> Stripe keys</a></li>
        @endif -->

                                </ul>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <div class="panel-body tabs-menu-body bg-white main-content-body-right">
                                    <div class="tab-content">
                                        @can('profile edit personal information')
                                            <div class="tab-pane {{ $first_tab }}" id="profile">
                                                <form class="form-horizontal" method="post" id="editprofile">

                                                    @csrf

                                                    <input type="hidden" name="id" value="{{ $login_user->id }}">

                                                    <div class="mb-4 main-content-label">Name</div>

                                                    <div class="form-group">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">First Name</label>

                                                            </div>

                                                            <div class="col-md-9">

                                                                <input type="text" name="first_name" required
                                                                    class="form-control" placeholder="First Name"
                                                                    value="{{ $login_user->first_name }}">

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="form-group ">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">last Name</label>

                                                            </div>

                                                            <div class="col-md-9">

                                                                <input type="text" name="last_name" required
                                                                    class="form-control" placeholder="Last Name"
                                                                    value="{{ $login_user->last_name }}">

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="form-group ">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">Date of Birth</label>

                                                            </div>
                                                            {{-- {{ dd( $date_o_birth ) }} --}}

                                                            <div class="col-md-9">

                                                                <input type="date" name="dob" class="form-control"
                                                                    id="datepicker" value="{{ $date_o_birth }}" required>

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="mb-4 main-content-label">Contact Info</div>

                                                    <div class="form-group ">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">Email<i>(required)</i></label>

                                                            </div>

                                                            <div class="col-md-9">

                                                                <input type="text" name="email" class="form-control"
                                                                    required placeholder="example@campaign.com"
                                                                    value="{{ $login_user->email }}">

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="form-group ">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">Phone Numner</label>

                                                            </div>

                                                            <div class="col-md-9">

                                                                <input type="text" class="form-control phone_number w-100"
                                                                    placeholder="1780-222-2121" name="phone"
                                                                    value="{{ $login_user->phone }}">

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="form-group ">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">Address</label>

                                                            </div>

                                                            <div class="col-md-9">

                                                                <textarea class="form-control" name="address" rows="2" placeholder="Toronto, Canada">{{ $login_user->address }}</textarea>

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="form-group ">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">Country</label>

                                                            </div>

                                                            <div class="col-md-9">

                                                                <input type="text" class="form-control" readonly
                                                                    name="country" value="Canada" name="" id="">


                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="form-group ">
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <label class="form-label">State</label>
                                                            </div>
                                                            <div class="col-md-9">
                                                                <select class="form-control" name="state_id">
                                                                    @foreach ($states as $state)
                                                                        <option value="{{ $state->id }}"
                                                                            {{ $login_user->state_id == $state->id ? 'selected' : '' }}>
                                                                            {{ $state->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    @if ($login_user->roles[0]->name == 'Client')
                                                        <div class="form-group ">
                                                            <div class="row">
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Position</label>
                                                                </div>
                                                                <div class="col-md-9">
                                                                    <select class="form-control" name="position_id">
                                                                        @foreach ($positions as $position)
                                                                            <option value="{{ $position->id }}"
                                                                                {{ $login_user->position_id == $position->id ? 'selected' : '' }}>
                                                                                {{ $position->position_name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="form-group ">
                                                            <div class="row">
                                                                <div class="col-md-3">
                                                                    <label class="form-label">Magic number</label>
                                                                </div>
                                                                <div class="col-md-9">
                                                                    <input type="text" name="magic_number" id="city"
                                                                        value="{{ $login_user->magic_number }}"
                                                                        class="form-control">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                    <div class="form-group ">
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <label class="form-label">City</label>
                                                            </div>
                                                            <div class="col-md-9">
                                                                <input type="text" name="city" id="city"
                                                                    value="{{ $login_user->city }}" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group ">
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <label class="form-label">Postal Code</label>
                                                            </div>
                                                            <div class="col-md-9">
                                                                <input type="text" name="postal_code" id="postal_code"
                                                                    value="{{ $login_user->postal_code }}" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    @if ($login_user->roles[0]->name == 'Client')
                                                        <div class="mb-4 main-content-label">Social Info</div>

                                                        <div class="form-group ">

                                                            <div class="row">

                                                                <div class="col-md-3">

                                                                    <label class="form-label">Facebook</label>

                                                                </div>

                                                                <div class="col-md-9">

                                                                    <input type="text" name="facebook" class="form-control"
                                                                        placeholder="https://www.facebook.com/campaign"
                                                                        value="{{ $login_user->facebook }}">

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="form-group ">

                                                            <div class="row">

                                                                <div class="col-md-3">

                                                                    <label class="form-label">Twitter</label>

                                                                </div>

                                                                <div class="col-md-9">

                                                                    <input type="text" name="twitter" class="form-control"
                                                                        placeholder="twitter.com/campaign.me"
                                                                        value="{{ $login_user->twitter }}">

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="form-group ">

                                                            <div class="row">

                                                                <div class="col-md-3">

                                                                    <label class="form-label">Instagram</label>

                                                                </div>

                                                                <div class="col-md-9">

                                                                    <input type="text" name="instagram" class="form-control"
                                                                        placeholder="https://www.instagram.com/campaign"
                                                                        value="{{ $login_user->instagram }}">

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="form-group ">

                                                            <div class="row">

                                                                <div class="col-md-3">

                                                                    <label class="form-label">Linkedin</label>

                                                                </div>

                                                                <div class="col-md-9">

                                                                    <input type="text" name="linkedin" class="form-control"
                                                                        placeholder="https://www.linkedin.com/campaign"
                                                                        value="{{ $login_user->linkedin }}">

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="form-group ">

                                                            <div class="row">

                                                                <div class="col-md-3">

                                                                    <label class="form-label">Youtube</label>

                                                                </div>

                                                                <div class="col-md-9">

                                                                    <input type="text" name="youtube" class="form-control"
                                                                        placeholder="https://www.youtube.com/campaign"
                                                                        value="{{ $login_user->youtube }}">

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="form-group ">

                                                            <div class="row">

                                                                <div class="col-md-3">

                                                                    <label class="form-label">Flicker</label>

                                                                </div>

                                                                <div class="col-md-9">

                                                                    <input type="text" name="flicker" class="form-control"
                                                                        placeholder="https://www.flicker.com/campaign"
                                                                        value="{{ $login_user->flicker }}">

                                                                </div>

                                                            </div>

                                                        </div>
                                                    @endif

                                                    <div class="mb-4 main-content-label">About Yourself</div>

                                                    <div class="form-group ">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">Marketing Material</label>

                                                            </div>

                                                            <div class="col-md-9">
                                                                <textarea class="form-control mb-2" id="user-bios"  name="user_bio_two" rows="4"
                                                                    placeholder="Provide some detail of your bio....">{{ str_replace('"',' ',$user_bio_two) }} </textarea>

                                                                    <span id="wordCountDisplay"
                                                                                    style="color: #999999;">
                                                                                    {{$totalWordsTwo}} / 50 Letters Used</span>
                                                            </div>

                                                            <div class="col-md-3 mt-2">
                                                                <label class="form-label">Website</label>
                                                            </div>
                                                            <div class="col-md-9 mt-2">
                                                                <textarea class="form-control" id="user-bio"name="user_bio" rows="4"
                                                                    placeholder="Provide some detail of your bio....">{{ str_replace('"',' ',$user_bio) }} </textarea>
                                                                    <span id="wordCountDisplayTwo"
                                                                    style="color: #999999;">
                                                                    {{$totalWords}} / 150 Letters Used</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="">
                                                        <button type="submit" class="btn btn-primary" id="btnSubmit"> <i
                                                                class="fa fa-spinner editspin fa-spin" style="display:none;"></i>
                                                            Update Profile</button>
                                                    </div>
                                                </form>
                                            </div>
                                        @endcan

                                        @can('profile edit password update')
                                            <div class="tab-pane {{ $second_tab }}" id="password">
                                                <form method="post" id="change_password">
                                                    @csrf
                                                    <div class="form-group">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">Current password</label>

                                                            </div>

                                                            <div class="col-md-9">

                                                                <input type="password" name="current_password" required
                                                                    class="form-control" placeholder="Enter Current Password">

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="form-group">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">New password</label>

                                                            </div>

                                                            <div class="col-md-9">
                                                                    <div class="input-group mb-3" id="show_hide_password">
                                                                        <input type="password" required class="form-control new_password"  name="new_password"  placeholder="Enter New Password" >
                                                                        <span class="input-group-text" style="background: #e9edf5;">
                                                                            <a href="">
                                                                                <i class="fa fa-eye-slash" id="togglePassword" style="cursor: pointer"></i>
                                                                            </a>
                                                                         </span>
                                                                    </div>
                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="form-group">

                                                        <div class="row">

                                                            <div class="col-md-3">

                                                                <label class="form-label">Confirm password</label>

                                                            </div>

                                                            <div class="col-md-9">

                                                                {{-- <input type="password" name="confirm_password" required
                                                                    class="form-control confirm_password" placeholder="Enter confirm Password"> --}}

                                                                    <div class="input-group mb-3" id="show_hide_passwords">
                                                                        <input type="password" required class="form-control confirm_password"  name="confirm_password"  placeholder="Enter New Password" >
                                                                        <span class="input-group-text" style="background: #e9edf5;" required>
                                                                            <a href="">
                                                                                <i class="fa fa-eye-slash" id="togglePasswords" style="cursor: pointer" ></i>
                                                                            </a>
                                                                         </span>
                                                                    </div>

                                                            </div>

                                                        </div>

                                                    </div>

                                                    <div class="">

                                                        <button type="submit" class="btn btn-primary" id="btnSubmitChange"> <i
                                                                class="fa fa-spinner  fa-spins" style="display:none;"></i> Change
                                                            Password</button>
                                                        <button type="button" class="btn btn-primary generate_random_password"><i
                                                                class="fa fa-refresh"></i> Generate </button>


                                                    </div>
                                                </form>
                                            </div>
                                        @endcan

                                        @can('profile edit security question')
                                            <div class="tab-pane {{ $third_tab }}" id="security">

                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <h6>Security Question</h6>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <form id="add_question">
                                                            <div class="form-group">

                                                                <div class="row">


                                                                    <div class="col-lg-12">

                                                                        <select class="form-control" name="question_id">
                                                                            @foreach ($questions as $question)
                                                                                <option value="{{ $question->id }}"
                                                                                    {{ $question->id == isset($security_question->question_id) ? 'selected' : '' }}>
                                                                                    {{ $question->question }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>

                                                                </div>

                                                            </div>



                                                            <div class="form-group">
                                                                <input type="text" name="answer"
                                                                    value="{{ isset($security_question->answer) == '' ? '' : $security_question->answer }}"
                                                                    class="form-control answer"
                                                                    placeholder = "Enter Security Question Answer" required>
                                                            </div>


                                                            <button class="btn btn-primary" id="btnQue"> <i
                                                                    class="fa fa-pin fa-spinner fa-pulse fa-que"
                                                                    style="display:none"></i> Save</button>
                                                        </form>
                                                    </div>
                                                </div>

                                                <br>


                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <h6> <input type="checkbox"
                                                                {{ $login_user->verified == 'yes' ? 'checked' : '' }}
                                                                class="enable" name="is_sms_enabled" id="is_sms_enabled"> Enable
                                                            Two Factor Authentication</h6>
                                                    </div>
                                                    <div class="col-lg-12" style="height: 200px;">
                                                        <form id="enable_auth" class="enable_auth"
                                                            style="display:{{ $login_user->verified == 'no' ? 'none' : 'inline-block' }}">
                                                            <div class="form-group">
                                                                <input type="tel" name="mobile_number"
                                                                    value="{{ $login_user->phone }}"
                                                                    {{ $login_user->verified == 'no' ? 'readonly' : '' }}
                                                                    class="form-control mobile_number"
                                                                    placeholder = "Enter Mobile Number" required>
                                                            </div>
                                                            <button class="btn btn-primary" id="btnSubmitEnable"
                                                                {{ $login_user->verified == 'no' ? 'disabled' : '' }}> <i
                                                                    class="fa fa-spin fa-spinner fa-pulse fa-spinEnable"
                                                                    style="display:none;"></i> Update Number </button>
                                                        </form>
                                                    </div>
                                                </div>

                                            </div>
                                        @endcan

                                        <div class="tab-pane" id="stripe">
                                            <form method="post" class="m-3" id="change_stripekey">

                                                <div class="form-group">

                                                    <div class="row">

                                                        <div class="col-md-3">

                                                            <label class="form-label">Publishable Key</label>

                                                        </div>

                                                        <div class="col-md-9">

                                                            <input type="text" name="stripe_key" required value=""
                                                                class="form-control" placeholder="Enter Publishable key">

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="form-group">

                                                    <div class="row">

                                                        <div class="col-md-3">

                                                            <label class="form-label">Secret Key</label>
                                                        </div>

                                                        <div class="col-md-9">

                                                            <input type="text" name="secret_key" value="" required
                                                                class="form-control" placeholder="Enter Secret Key">

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="">

                                                    <button type="submit" class="btn modalb waves-effect waves-light"
                                                        id="btnSubmitChangess"> <i class="fa fa-spinner  fa-spinss"
                                                            style="display:none;"></i> Update</button>

                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- stripe key end -->

                    </div>
                @endcanany
            </div>
            <!-- row closed -->

            @include('profile.edit_profile_modal')

        </div>
    </div>
@endsection

@section('admin_dashboard_script')
    <script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>

    <script>
        $(document).ready(function() {

            var textarea = document.getElementById('user-bios');
            // Get the span element for word count display
            var wordCountDisplay = document.getElementById('wordCountDisplay');

            // Add event listener for input event
            textarea.addEventListener('input', function() {
                // Split the text by whitespace to count words
                var words = textarea.value.trim().split(/\s+/);
                // Get the number of words
                var wordCount = words.length;

                // Update the word count display
                wordCountDisplay.textContent = wordCount + ' / 50 Letters Used';

                // Check if word count exceeds 50
                if (wordCount > 50) {
                    // Change the span style to red
                    wordCountDisplay.style.color = 'red';
                    $("#disableButton").attr('disabled',true);
                } else {
                    // Reset the span style to default
                    wordCountDisplay.style.color = '#999999';
                    $("#disableButton").attr('disabled',false);
                }
            });

            //user bio two


            var bio_textarea = document.getElementById('user-bio');
            // Get the span element for word count display
            var wordCountDisplayTwo = document.getElementById('wordCountDisplayTwo');

            // Add event listener for input event
            bio_textarea.addEventListener('input', function() {
                // Split the text by whitespace to count words
                var words = bio_textarea.value.trim().split(/\s+/);
                // Get the number of words
                var wordCount = words.length;

                // Update the word count display
                wordCountDisplayTwo.textContent = wordCount + ' / 150 Letters Used';

                // Check if word count exceeds 50
                if (wordCount > 150) {
                    // Change the span style to red
                    wordCountDisplayTwo.style.color = 'red';
                    $("#disableButton").attr('disabled',true);
                } else {
                    // Reset the span style to default
                    wordCountDisplayTwo.style.color = '#999999';
                    $("#disableButton").attr('disabled',false);

                }
            });

            $("#show_hide_password a").on('click', function(event) {
                event.preventDefault();
                if($('#show_hide_password input').attr("type") == "text")
                {
                    $('#show_hide_password input').attr('type', 'password');
                    $('#togglePassword').addClass( "fa-eye-slash" );
                    $('#togglePassword').removeClass( "fa-eye" );
                }
                else if($('#show_hide_password input').attr("type") == "password")
                {
                    $('#show_hide_password input').attr('type', 'text');
                    $('#togglePassword').removeClass( "fa-eye-slash" );
                    $('#togglePassword').addClass( "fa-eye" );
                }
            });

            $("#show_hide_passwords a").on('click', function(event) {
                event.preventDefault();
                if($('#show_hide_passwords input').attr("type") == "text")
                {
                    $('#show_hide_passwords input').attr('type', 'password');
                    $('#togglePasswords').addClass( "fa-eye-slash" );
                    $('#togglePasswords').removeClass( "fa-eye" );
                }
                else if($('#show_hide_passwords input').attr("type") == "password")
                {
                    $('#show_hide_passwords input').attr('type', 'text');
                    $('#togglePasswords').removeClass( "fa-eye-slash" );
                    $('#togglePasswords').addClass( "fa-eye" );
                }
            });

            ClassicEditor.create(document.querySelector('#bio'))
                .catch(error => {
                    console.error(error);
                });

            $(".generate_random_password").on('click', function(e) {

                e.preventDefault();

                $.ajax({
                    url: "/generate_random_password",
                    type: "get",
                    dataType: "JSON",
                    cache: false,
                    success: function(response) {
                        console.log(response)
                        $(".new_password").val(response.password)
                        $(".confirm_password").val(response.password)
                    },

                    error: function(error) {

                        console.log(error);

                    }

                });


            });

            //Securirty Questions
            $("#add_question").on('submit', (function(e) {
                e.preventDefault();
                $.ajax({
                    url: '/api/security/question/save',
                    type: "POST",
                    data: new FormData(this),
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $("#btnQue").attr('disabled', true);
                        $(".fa-que").css('display', 'inline-block');
                    },
                    complete: function() {
                        $("#btnQue").attr('disabled', false);
                        $(".fa-que").css('display', 'none');
                    },
                    success: function(response) {
                        console.log(response);
                        if (response["status"] === "fail") {
                            $('.answer').val(response['value'])
                            toastr.error('Failed', response["msg"]);
                        } else if (response["status"] === "success") {
                            toastr.success('Success', response["msg"]);
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }));

            //Two factor authintication
            $("#enable_auth").on('submit', (function(e) {
                e.preventDefault();
                $.ajax({
                    url: '/api/authentication/store',
                    type: "POST",
                    data: new FormData(this),
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $("#btnSubmitEnable").attr('disabled', true);
                        $(".fa-spinEnable").css('display', 'inline-block');
                    },
                    complete: function() {
                        $("#btnSubmitEnable").attr('disabled', false);
                        $(".fa-spinEnable").css('display', 'none');
                    },
                    success: function(response) {
                        console.log(response);
                        if (response["status"] === "fail") {
                            toastr.error('Failed', response["msg"]);
                        } else if (response["status"] === "success") {
                            toastr.success('Success', response["msg"]);
                        }

                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }));

            $("#change_password").on('submit', (function(e) {
                e.preventDefault();
                $.ajax({
                    url: '/api/password/change',
                    type: "POST",
                    data: new FormData(this),
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $("#btnSubmitChange").attr('disabled', true);
                        $(".fa-spins").css('display', 'inline-block');
                    },
                    complete: function() {
                        $("#btnSubmitChange").attr('disabled', false);
                        $(".fa-spins").css('display', 'none');
                    },
                    success: function(response) {
                        console.log(response);
                        if (response["status"] === "fail") {
                            toastr.error('Failed', response["msg"]);
                        } else if (response["status"] === "success") {
                            toastr.success('Success', response["msg"]);
                            $("#change_password")[0].reset();

                        }

                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }));

            function disableAlert(alr) {
                $("#" + alr).css("display", "none");
            }

            // change stripe key
            $("#change_stripekey").on('submit', (function(e) {
                e.preventDefault();
                $.ajax({
                    url: '/api/stripekey',
                    type: "POST",
                    data: new FormData(this),
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $("#btnSubmitChan").attr('disabled', true);
                        $(".fa-spinss").css('display', 'inline-block');
                    },
                    complete: function() {
                        $("#btnSubmitChan").attr('disabled', false);
                        $(".fa-spinss").css('display', 'none');
                    },
                    success: function(response) {
                        console.log(response);
                        if (response["status"] === "fail") {
                            toastr.error('Failed', response["msg"]);
                        } else if (response["status"] === "success") {
                            toastr.success('Success', response["msg"]);
                            $("#change_stripekey")[0].reset();
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }));

            var photoError = 0;

            $(".enable").on('click', (function(e) {
                // e.preventDefault();
                var verified = 'yes';
                if ($('.enable').is(':checked')) {
                    verified = 'yes';
                    $(".enable").attr('checked', true)
                } else {
                    $(".enable").attr('checked', false)
                    verified = 'no';
                }

                $.ajax({
                    url: "/authentication/disabled",
                    type: "GET",
                    data: {
                        verified: verified
                    },
                    dataType: "JSON",
                    cache: false,
                    beforeSend: function() {
                        console.log(verified)
                    },
                    complete: function() {},
                    success: function(response) {
                        if (response["status"] == "fail") {
                            toastr.error('Failed', response["msg"])
                        } else if (response["status"] == "success") {
                            // $('.enable_auth').css('display',(verified == 'yes' ? 'display' : 'none'))
                            location.href = "{{ url('./profile/edit#security') }}"
                            toastr.success('Success', response["msg"])

                            if (verified == 'yes') {
                                $('#btnSubmitEnable').attr('disabled', false);
                                $('.mobile_number').removeAttr('readonly');
                                $('#enable_auth').show();

                            } else if (verified == 'no') {
                                $('#btnSubmitEnable').attr('disabled', true);
                                $('.mobile_number').attr('readonly', 'readonly');
                                $('#enable_auth').hide();
                            }
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }));

            $("#photo").on('change', (function(e) {

                photoError = 0;

                if (e.target.files && e.target.files[0]) {

                    // console.log(e.target.files[0].name.strtolower())

                    if (e.target.files[0].name.match(/\.(jpg|jpeg|JPG|png|gif)$/)) {

                        $("#photo-error").empty();

                        photoError = 0;

                        var reader = new FileReader();

                        reader.onload = function(e) {

                            $('#user_photo_selected').attr('src', e.target.result);

                        }

                        reader.readAsDataURL(e.target.files[0]);

                    } else {

                        photoError = 1;

                        $("#photo-error").empty();

                        $("#photo-error").append(
                            '<p class="text-danger">Please upload only jpg, png format!</p>');

                    }

                } else {

                    $('#user_photo_selected').attr('src', '');

                }

                if (photoError == 0) {

                    $(".profile-button").prop('disabled', false);

                } else {

                    $(".profile-button").prop('disabled', true);

                }

                if (photoError == 0) {

                    $(".btn-change-photo").prop('disabled', false);

                } else {

                    $(".btn-change-photo").prop('disabled', true);
                }

            }));

            ///upload photo
            $("#photo_upload").on('submit', (function(e) {

                e.preventDefault();

                $.ajax({

                    url: '/api/profile/change/image',

                    type: "POST",

                    data: new FormData(this),

                    dataType: "JSON",

                    processData: false,

                    contentType: false,

                    cache: false,

                    beforeSend: function() {

                        $("#btnSubmitUpload").attr('disabled', true);

                        $(".imageSpin").css('display', 'inline-block');

                    },

                    complete: function() {

                        $("#btnSubmitUpload").attr('disabled', false);

                        $(".imageSpin").css('display', 'none');

                    },

                    success: function(response) {

                        console.log(response);

                        if (response["status"] === "fail") {

                            toastr.error('Failed', response["msg"]);

                        } else if (response["status"] === "success") {

                            toastr.success('Success', response["msg"]);

                        } else if (response["status"] === "error") {

                            PhotoErrorMsg(response["msg"]);

                        }

                    },

                    error: function(error) {

                        console.log(error);

                    }

                });

            }));

            function PhotoErrorMsg(msg) {

                $.each(msg, function(key, value) {

                    toastr.error('Failed', response["msg"]);

                });

            }

            $("#editprofile").on('submit', (function(e) {

                e.preventDefault();

                $.ajax({

                    url: '/api/profile/edit',

                    type: "POST",

                    data: new FormData(this),

                    dataType: "JSON",

                    processData: false,

                    contentType: false,

                    cache: false,

                    beforeSend: function() {

                        $("#btnSubmit").attr('disabled', true);

                        $(".editspin").css('display', 'inline-block');

                    },

                    complete: function() {

                        $("#btnSubmit").attr('disabled', false);

                        $(".editspin").css('display', 'none');

                    },

                    success: function(response) {

                        console.log(response);

                        if (response["status"] === "fail") {

                            PhotoErrorMsg(response["msg"]);

                        } else if (response["status"] === "success") {

                            toastr.success('Success', response["msg"]);
                        }

                    },

                    error: function(error) {

                        console.log(error);

                    }

                });

            }));

            function printErrorMsg(msg) {

                $.each(msg, function(key, value) {

                    toastr.error('Failed', response["msg"]);

                });
            }

            $(function() {
                $("#datepicker").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    yearRange: '-100:+0'
                });
            });

            $(".mobile_number").intlTelInput();
            $(".phone_number").intlTelInput();

        });
    </script>
@endsection