@extends('main.layouts.app')
@section('content')
    <style>

.premium-card {
    background: linear-gradient(135deg, #0f1a42, #465983);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

.premium-card-active {
    background-color: #e6cc00; /* Light pastel yellow */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    color: #212529; /* Ensure text remains readable */
}


.card-header-senior h4{
    font-size: 14px;
    line-height: 20px;
    color: #1f365c;
    padding-right: 0px;
    margin-bottom: 0;
}

.br-20 {
        border-radius: 20px;
    }

    .align-middle {
        vertical-align: middle;
    }

    div.clock {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }

    .autopull-header h5 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .autopull-header h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }



    .card .card-header {
        width: 100%;
        min-height: 0px;
    }


    .card .card-header h4 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .bg_blue_color {
        border-radius: 20px !important;
        background-color: #0E194D !important;
    }

    .depo {
        font-size: 14px;
    }

    .dash-text {
        text-align: center;
    }

    @media (max-width:767px) {
        .autopull-header h3 {
            font-size: 13px;
            line-height: 14px;
            color: #1f365c;
        }

        .depo {
            font-size: 15px;
        }

        .autopull-header h5 {
            font-size: 13px;
            line-height: 15px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }
    }

h3.testinomial-header.mb-3 {
    margin-bottom: 0;
    font-weight: 700;
    display: inline-block;
    font-size: 24px;
    margin-top: 3px;
    color: #34395e;
}


        .picture-container {
            position: relative;
            cursor: pointer;
            text-align: center;
        }

        .picture {
            width: 106px;
            height: 106px;
            background-color: #999999;
            border: 4px solid #CCCCCC;
            color: #FFFFFF;
            border-radius: 50%;
            margin: 5px auto;
            overflow: hidden;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }

        .picture-src {
            width: 100%;
            height: 100%;
        }

        .picture:hover {
            border-color: #4caf50;
        }

        .picture input[type="file"] {
            cursor: pointer;
            display: block;
            height: 100%;
            left: 0;
            opacity: 0 !important;
            position: absolute;
            top: 0;
            width: 100%;
        }
    </style>
    <div class="main-content">
        <section class="section">
            {{-- <div class="section-header">
                <h1><i class="fa fa-fw fa-user-cog"></i> Profile</h1>
            </div> --}}


            <div class="section-header d-block bg_blue_color">
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                {{-- <div class="dash-cover pr-3">
                                        <img src="img/wallet_circle.png" alt="wallet-circle" class="dash-img">
                                    </div> --}}
                                <div class="dash-text">
                                    <h5 class="text-white depo mb-0">
                                        <a href="/"><img src="img/homepage.png" alt="image"> </a> 
                                        Profile
                                    </h5>
                                </div>
                            </div>
                            {{-- <div>
                                <a href="/autopull-log">
                                    <img src="img/transaction_logo.png" alt="">
                                </a>
                                <button class="btn btn-primary p-0" title="Amount Withdrawal" data-toggle="modal" data-target="#amountWithdrawal" style="background: #0e194d;border: none;">
                                    <img src="img/download_btn.png" alt="download">
                                </button>
    
                            </div> --}}
    
                        </div>
    
                    </div>
    
                </div>
    
            </div>

            
            <div class="section-body">
                <div class="row d-none d-md-flex">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header text-center">
                                <h4>{{ Auth::user()->name }}</h4>
                            </div>
                            <div class="card-body text-center">
                                <form enctype="multipart/form-data" method="post" role="form" id="update_mbr_image">
                                    <input type="hidden" name="hal" value="accountcfg">
                                    <div class="picture-container">
                                        <div class="picture d-flex">
                                            <img src="{{ Auth::user()->user_personal_detail->profile_image_url??asset('assets/image/mbr_defaultimage.jpg')  ?? ''}}" class="picture-src"
                                                id="wizardPicturePreview" width="100" height="100"
                                                style="max-width:160px;height:auto;cursor: pointer;" title="" />
                                            <input type="file" name="image_profile" id="wizardpicture" aria-invalid="false"
                                                class="valid" accept="image/*" />
                                            <input type="hidden" class="form-control" name="image_profile" value="{{Auth::user()->user_personal_detail->profile_image_url ?? ''}}" id="disease_name"aria-describedby="disease_name">   
                                        </div>
                                        <h6><i class="fas fa-user-tag fa-fw"></i> Choose Picture</h6>
                                    </div>
                                </form>
                                <span class="text-small d-block text-center"> {{ Auth::user()->email  ?? ''}}</span>

                                <div class="card-header-senior mt-3">

                                    <!-- <h4>Sr.Name: {{$srname}}</h3>
                                    <h4>Sr.No.: {{$srnumber}}</h3> -->

                                    @if($srname !== 'N/A')
                                        <h4>Sr.Name: {{$srname}}</h4>
                                    @endif

                                    @if($srnumber !== 'N/A')
                                        <h4>Sr.No.: {{$srnumber}}</h4>
                                    @endif

                                </div>


                                {{-- <div class="progess">
                                    <div class="progress mt-3" role="progressbar"
                                    aria-label="Warning example" aria-valuenow="100"
                                    aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar justify-content-between text-bg-success bg-zero "
                                        style="width: 10%">0%</div>
                                </div>
                                </div> --}}
                            </div>
                        </div>


                        @if (Auth::user()->is_member == 0)
                        <!-- Subscribe Card -->
                        <a href="/account-subscriber">
                        <div class="card">
                            <div class="premium-card p-4 rounded-4 text-white bg-warning">
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <h5 class="fw-bold mb-1">Become a Premium Member</h5>
                                        <button class="btn btn-warning fw-semibold rounded-pill px-4 py-1 text-dark">Subscribe</button>
                                    </div>
                                    <p class="mb-0 small text-light" style="line-height: 1.4;">
                                        Unlock exclusive rewards, automation tools & more with just ₹9999/year.
                                    </p>
                                </div>
                                <div class="d-flex justify-content-around mt-3">
                                    <div class="text-center">
                                        <i class="fas fa-star fa-lg mb-1"></i><br />
                                        <small>Exclusive Access</small>
                                    </div>
                                    <div class="text-center">
                                        <i class="fas fa-gift fa-lg mb-1"></i><br />
                                        <small>Rewards</small>
                                    </div>
                                    <div class="text-center">
                                        <i class="fas fa-magic fa-lg mb-1"></i><br />
                                        <small>Automation</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </a>
                      
                    @else
                        <!-- Premium Active Card -->
                        <a href="/account-subscriber">
                        <div class="card">
                            <div class="premium-card-active p-4 rounded-4 text-dark">
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <h5 class="fw-bold mb-1">Premium Membership Active</h5>
                                        <i class="fas fa-check-circle fa-lg text-success"></i>
                                    </div>
                                    <p class="mb-0 small" style="line-height: 1.4;">
                                        Thanks for subscribing! You now enjoy rewards, automation, and exclusive benefits.
                                    </p>
                                </div>
                                <div class="d-flex justify-content-around mt-3">
                                    <div class="text-center">
                                        <i class="fas fa-star fa-lg mb-1"></i><br />
                                        <small>Exclusive Access</small>
                                    </div>
                                    <div class="text-center">
                                        <i class="fas fa-gift fa-lg mb-1"></i><br />
                                        <small>Rewards</small>
                                    </div>
                                    <div class="text-center">
                                        <i class="fas fa-magic fa-lg mb-1"></i><br />
                                        <small>Automation</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </a>
                    @endif



                        <div class="card">
                            <div class="card-header">
                                <h4>Settings</h4>
                            </div>
                            <div class="card-body">
                                <ul class="nav nav-pills flex-column" id="myTab4" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="config-tab1" data-toggle="tab" href="#cfgtab1"
                                            role="tab" aria-controls="profile" aria-selected="true">Profile</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="config-tab2" data-toggle="tab" href="#cfgtab2"
                                            role="tab" aria-controls="account" aria-selected="false">Bank Detail</a>
                                    </li>
                                    <li class="nav-item">
                                        {{-- <a class="nav-link" id="config-tab3" href="memberkycs/create" role="tab" aria-controls="website"
                                            aria-selected="false">Member Kyc</a> --}}
                                        <a class="nav-link" id="config-tab3" href="#cfgtab3" role="tab" data-toggle="tab" aria-controls="website"
                                            aria-selected="false">Member Kyc</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="config-tab4" data-toggle="tab" href="#cfgtab4"
                                            role="tab" aria-controls="password" aria-selected="false">Password</a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="card">   
                   
                                {{-- <input type="hidden" name="hal" value="accountcfg"> --}}
                                <div class="card-header d-block">
                                    <h4>Profile Details</h4>
                                    <div class="progess">
                                        <div class="progress " role="progressbar"
                                        aria-label="Warning example" aria-valuenow="100"
                                        aria-valuemin="0" aria-valuemax="100">
                                        <div class="progress-bar  text-bg-success bg-zero "
                                            style="width: {{$status}}%">{{$status}}%</div>
                                    </div>
                                  </div>
                                </div>



                                <div class="card-body" id="myTab2Content">
                                    <div class="tab-content no-padding" >
                                    <div class="tab-pane fade show active" id="cfgtab1" role="tabpanel"
                                            aria-labelledby="config-tab1">
                                    <p class="text-muted">Please complete the forms below, make sure the value you entered is valid.</p>

                                        <form id="cfgform" >
                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label> Name <span class="text-danger">*</span></label>
                                                    <input type="text" name="name" id="name"
                                                        class="form-control" value="{{ Auth::user()->name  ?? ''}}"
                                                        placeholder="Enter your Name" required>
                                                </div>

                                                <div class="form-group col-md-6">
                                                    <label>Email <span class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text"><i
                                                                    class="fa fa-fw fa-envelope"></i></div>
                                                        </div>
                                                        <input type="email" name="email" id="email"
                                                            class="form-control" value="{{ Auth::user()->email  ?? ''}}"
                                                            placeholder="Enter your email address" required>
                                                    </div>
                                                </div>

                                            </div>
                                            <!-- <div class="form-group">
                                                <label>About Me</label>
                                                <textarea name="mbr_intro" value="{{Auth::user()->user_personal_detail->description ?? ''}}" class="form-control rowsize-md" id="mbr_intro" placeholder="Describe who you are">{{Auth::user()->user_personal_detail->description ?? ''}}</textarea>
                                            </div> -->
                                            <div class="form-group">
                                                <label>Address</label>
                                                <textarea value="{{Auth::user()->user_personal_detail->address ?? ''}}" name="address" class="form-control rowsize-sm" id="address" rows="16"
                                                    placeholder="Enter your address here">{{Auth::user()->user_personal_detail->address ?? ''}}</textarea>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label>City</label>
                                                    <input type="text" name="city" id="city" value="{{Auth::user()->user_personal_detail->city ?? ''}}"
                                                        class="form-control" value placeholder="Enter your city ">
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>State or Province</label>
                                                    <input value="{{Auth::user()->user_personal_detail->state ?? ''}}" type="text" name="state" id="state"
                                                        class="form-control" value
                                                        placeholder="Enter your state or province">
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Pincode</label>
                                                    <input type="text" value="{{Auth::user()->user_personal_detail->pincode ?? ''}}" class="tel form-control" name="postalcode"
                                                        id="postalcode" x-autocompletetype="tel" value
                                                        placeholder="Enter your Pincode">
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Phone</label>
                                                    <input type="tel" value="{{Auth::user()->user_personal_detail->phone ?? ''}}" class="tel form-control" name="phone"
                                                        id="phone" x-autocompletetype="tel" value
                                                        placeholder="Enter your phone number">
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label>Twitter</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text"><i
                                                                    class="fab fa-fw fa-twitter"></i></div>
                                                        </div>
                                                        <input type="text" value="{{Auth::user()->user_personal_detail->twitter_url ?? ''}}" name="mbr_twitter" id="mbr_twitter"
                                                            class="form-control" value
                                                            placeholder="Member twitter account">
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Facebook</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text"><i
                                                                    class="fab fa-fw fa-facebook-f"></i></div>
                                                        </div>
                                                        <input type="text" value="{{Auth::user()->user_personal_detail->facebook_url ?? ''}}" name="mbr_facebook" id="mbr_facebook"
                                                            class="form-control" value
                                                            placeholder="Member facebook account">
                                                    </div>
                                                </div>
                                            </div>
                                        <button  value="submit" id="submit" onclick="mySubmitform()"
                                            class="btn btn-primary">
                                            <i class="fa fa-fw fa-check"></i> Save </button>
                                        </form>
                                </div>

                <div class="tab-pane fade" id="cfgtab2" role="tabpanel"
                                            aria-labelledby="config-tab2">
                                        <form id="bankDetailsForm">
                                            <p class="text-muted">Bank Detail</p>
                                            <div class="form-group">
                                                <label>Account Number <span class="text-danger">*</span></label>
                                                <input type="number" name="account" value="{{Auth::user()->user_personal_detail->account_number ?? ''}}" id="accountdetail" class="form-control" placeholder="Account Number" required>
                                                <span id="error_account" class="error_message"></span>
                                            </div>
                                            <div class="form-group">
                                                <label>IFSC Code <span class="text-danger">*</span></label>
                                                <input type="text" name="ifsccode" value="{{Auth::user()->user_personal_detail->ifsc_code ?? ''}}" id="ifsccode" class="form-control" placeholder="IFSC Code" required>
                                                <span id="error_ifsccode" class="error_message"></span>
                                            </div>
                                            <div class="form-group">
                                                <label>Account Holder Name</label>
                                                <input type="text" name="accountname" value="{{Auth::user()->user_personal_detail->account_holder_name ?? ''}}" id="accountname" class="form-control" placeholder="Account Holder Name" required>
                                            </div>
                                            <button type="button" name="submit" value="submit" id="submitBankDetails"  class="btn btn-primary">
                                                <i class="fa fa-fw fa-check"></i> Save
                                            </button>
                                        </form>
                                    </div>



                            <div class="tab-pane fade" id="cfgtab3" role="tabpanel"
                                    aria-labelledby="config-tab3">


                                    <form  accept-charset="UTF-8" enctype="multipart/form-data">
                                        @csrf
                                    <div class="form-group">

                                    <label for="pan_card" class="form-label">Upload Pan Card<span class="text-danger">*</span></label><br>
                                        <img src="{{ Auth::user()->memberkyc->pan_card??asset('img/panimage.webp')  ?? ''}}" class="picture-src"
                                        id="wizardPicturePanPreview" width="100" height="100"
                                        style="max-width:160px;height:auto;cursor: pointer;" title="" />
                                    <input type="file" name="pan_card" id="pan_card" aria-invalid="false" class="valid" accept="image/*" />
                                    <input class="form-control" name="pan_card" type="hidden" value="" >
                                        <span id='error_pancard' class="error_message d-block"></span>



                                        </div>
                                    <div class="form-group">


                                        <label for="aadharcard" class="form-label">Upload Aadharcard
                                            <span class="text-danger">*</span>    
                                            </label><br>
                                        <img src="{{ Auth::user()->memberkyc->aadharcard??asset('img/aadhara.jpg')  ?? ''}}" class="picture-src"
                                        id="wizardPictureaadharPreview" width="100" height="100"
                                        style="max-width:160px;height:auto;cursor: pointer;" title="" />

                                    <input type="file" name="aadharcard" id="aadharcard" aria-invalid="false"
                                        class="valid" accept="image/*" />
                                        <input class="form-control" name="pan_card" type="hidden" value="" >
                                        <span id='error_aadharcard' class="error_message d-block"></span>
                                            <input class="form-control" name="aadharcard" type="hidden" value="" >




                                    </div>
                                    <div class="form-group">


                                        <label for="chequeleaf" class="form-label">Upload Cheque Leaf
                                            <span class="text-danger">*</span>    
                                            </label><br>
                                        <img src="{{ Auth::user()->memberkyc->cheque_leaf??asset('img/chequedummy.jpg')  ?? ''}}" class="picture-src"
                                        id="wizardPicturechequePreview" width="100" height="100"
                                        style="max-width:160px;height:auto;cursor: pointer;" title="" />
                                        <input type="file" name="cheque_leaf" id="cheque_leaf" aria-invalid="false"
                                        class="valid" accept="image/*" />
                                            <input class="form-control" name="cheque_leaf" type="hidden" value="">
                                            <input class="form-control" name="cheque_leaf" type="hidden" value="" >

                                            <span id='error_cheque_leaf' class="error_message d-block"></span>

                                            {{-- <a href="">View ChequeLeaf</a> --}}
                                    </div>
                                    <input class="form-control" id="kycid" name="kycid" type="hidden" value="{{Auth::user()->memberkyc->id??null}}">
                                    <button class="btn btn-primary" type="submit" id="subkycdetail" ><i class="fa fa-fw fa-check"></i> Save</button>
                                    </form>
                            </div>

                                        <div class="tab-pane fade" id="cfgtab4" role="tabpanel"
                                            aria-labelledby="config-tab4">
                                        <form >
                                            <p class="text-muted">Update your password using forms below. Leave empty to
                                                keep the current password.</p>
                                            <div class="form-row">
                                                <input type="hidden" name="password"
                                                    value="$2y$10$IcgZZ20pXJgRzXKXVNID.OwyRYlhn3Th5SW0rqGQFzpysZMRmDXha">
                                                <div class="form-group col-md-6">
                                                    <label>Password <span class="text-danger">*</span></label>
                                                    <input type="password" class="form-control" name="password2"
                                                        id="password2" value placeholder="Enter your password">
                                                        <span id="error_password2" class="error_message"></span>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Confirm Password <span class="text-danger">*</span></label>
                                                    <input type="password" class="form-control" name="password1"
                                                        id="password1" value
                                                        placeholder="Please re-enter your password to confirm">
                                                        <span id="error_password1" class="error_message"></span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="custom-control custom-checkbox">
                                                    <input name="ischangeok" value="1" type="checkbox"
                                                        class="custom-control-input" id="ischangeok">
                                                    <label class="custom-control-label" for="ischangeok">Confirm Password
                                                        Change</label>
                                                        <span id="ischangeerrorok" class="error_message d-block"></span>
                                                </div>
                                            </div>
                                        <button type="submit" name="submit" value="submit" id="submitBankPassword"
                                            class="btn btn-primary">
                                            <i class="fa fa-fw fa-check"></i> Save </button>
                                        </form>
                                        </div>


                                    </div>
                                </div>

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

                <div class="row d-flex d-md-none">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header text-center">
                                <h4>{{ Auth::user()->name }}</h4>
                            </div>
                            <div class="card-body">
                                <form enctype="multipart/form-data" method="post" role="form" id="update_mbr_image">
                                    <input type="hidden" name="hal" value="accountcfg">
                                    <div class="picture-container">
                                        <div class="picture d-flex">
                                            <img src="{{ Auth::user()->user_personal_detail->profile_image_url??asset('assets/image/mbr_defaultimage.jpg')  ?? ''}}" class="picture-src"
                                                id="wizardPicturePreviewmob" width="100" height="100"
                                                style="max-width:160px;height:auto;cursor: pointer;" title="" />
                                            <input type="file" name="image_profile" id="wizardpicturemob" aria-invalid="false"
                                                class="valid" accept="image/*" />
                                            <input type="hidden" class="form-control" name="image_profile" value="{{Auth::user()->user_personal_detail->profile_image_url ?? ''}}" id="disease_name"aria-describedby="disease_name">   
                                        </div>
                                        <h6><i class="fas fa-user-tag fa-fw"></i> Choose Picture</h6>
                                    </div>
                                </form>
                                <span class="text-small d-block text-center"> {{ Auth::user()->email  ?? ''}}</span>
                                <div class="card-header-senior mt-3 text-center">

                                @if($srname !== 'N/A')
                                        <h4>Sr.Name: {{$srname}}</h4>
                                    @endif

                                    @if($srnumber !== 'N/A')
                                        <h4>Sr.No.: {{$srnumber}}</h4>
                                    @endif

                                    <!-- <h4>Sr.Name: {{$srname}}</h3>
                                    <h4>Sr.No.: {{$srnumber}}</h3> -->
                                </div>

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

                    <div class="col-12">


                    @if (Auth::user()->is_member == 0)
                    <a href="/account-subscriber">
    <!-- Subscribe Card -->
    <div class="card">
        <div class="premium-card p-4 rounded-4 text-white bg-warning">
            <div class="mb-3">
                <div class="d-flex justify-content-between align-items-start">
                    <h5 class="fw-bold mb-1">Become a Premium Member</h5>
                    <button class="btn btn-warning fw-semibold rounded-pill px-4 py-1 text-dark">Subscribe</button>
                </div>
                <p class="mb-0 small text-light" style="line-height: 1.4;">
                    Unlock exclusive rewards, automation tools & more with just ₹9999/year.
                </p>
            </div>
            <div class="d-flex justify-content-around mt-3">
                <div class="text-center">
                    <i class="fas fa-star fa-lg mb-1"></i><br />
                    <small>Exclusive Access</small>
                </div>
                <div class="text-center">
                    <i class="fas fa-gift fa-lg mb-1"></i><br />
                    <small>Rewards</small>
                </div>
                <div class="text-center">
                    <i class="fas fa-magic fa-lg mb-1"></i><br />
                    <small>Automation</small>
                </div>
            </div>
        </div>
    </div>
                    </a>
@else
    <!-- Premium Active Card -->
    <a href="/account-subscriber">
    <div class="card">
        <div class="premium-card-active p-4 rounded-4 text-dark">
            <div class="mb-3">
                <div class="d-flex justify-content-between align-items-start">
                    <h5 class="fw-bold mb-1">Premium Membership Active</h5>
                    <i class="fas fa-check-circle fa-lg text-success"></i>
                </div>
                <p class="mb-0 small" style="line-height: 1.4;">
                    Thanks for subscribing! You now enjoy rewards, automation, and exclusive benefits.
                </p>
            </div>
            <div class="d-flex justify-content-around mt-3">
                <div class="text-center">
                    <i class="fas fa-star fa-lg mb-1"></i><br />
                    <small>Exclusive Access</small>
                </div>
                <div class="text-center">
                    <i class="fas fa-gift fa-lg mb-1"></i><br />
                    <small>Rewards</small>
                </div>
                <div class="text-center">
                    <i class="fas fa-magic fa-lg mb-1"></i><br />
                    <small>Automation</small>
                </div>
            </div>
        </div>
    </div>
    </a>
@endif


                    <!-- <div class="card">
                    <div class="premium-card p-4 rounded-4 text-white ">
                        <div class="mb-1">
                            <div class="d-flex justify-content-between align-items-start">
                                <h6 class="fw-bold mb-1">Become a Premium Member</h6>

                                <button class="btn btn-warning fw-semibold rounded-pill px-4 py-1 text-dark">Subscribe</button>

                            </div>
                            <div>

                            <p class="mb-0 small text-light" style="line-height: 1.4;">Unlock exclusive rewards, automation tools & more with just ₹3000/year.</p>
                            </div>
                          
                        </div>

                        <div class="d-flex justify-content-around   border-light-subtle ">
                            <div class="text-center">
                                <i class="fas fa-star fa-lg mb-1"></i><br />
                                <small>Exclusive Access</small>
                            </div>
                            <div class="text-center">
                                <i class="fas fa-gift fa-lg mb-1"></i><br />
                                <small>Rewards</small>
                            </div>
                            <div class="text-center">
                                <i class="fas fa-magic fa-lg mb-1"></i><br />
                                <small>Automation</small>
                            </div>
                        </div>
                    </div>
                    </div> -->
                        <div class="card">
                            <div class="card-body">
                                <section id="faq">
                                    <div class="relative">
                                    <div class="row justify-content-md-center">
                                    <div class="col-lg-12">
                                    <h3 class="testinomial-header mb-3"><span>Profile Details</span></h3>

                                    
                                    <div class="progess">
                                        <div class="progress " role="progressbar"
                                        aria-label="Warning example" aria-valuenow="100"
                                        aria-valuemin="0" aria-valuemax="100">
                                        <div class="progress-bar justify-content-between text-bg-success bg-zero "
                                            style="width: {{$status}}%">{{$status}}%</div>
                                    </div>
                                </div>
                                    <br/>
                                    <div class="bs-example text-left">
                                    <div class="accordion" id="accordionExample">
                                    <div data-scrollreveal="enter bottom over 1.5s">
                                    <div class="card-header collapsed" id="headingZero">
                                    <h2 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseZero">
                                    <span>Personal Details</span>
                                    <i class="fa fa-angle-down"></i> </button></h2>
                                    </div>
                                    <div id="collapseZero" class="collapse" aria-labelledby="headingZero" data-parent="#accordionExample">
                                    <div class="card-body">


                                        <form id="cfgform">
                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label> Name <span class="text-danger">*</span></label>
                                                    <input type="text" name="name" id="mobname"
                                                        class="form-control" value="{{ Auth::user()->name  ?? ''}}"
                                                        placeholder="Enter your Name" required>
                                                </div>

                                                <div class="form-group col-md-6">
                                                    <label>Email <span class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text"><i
                                                                    class="fa fa-fw fa-envelope"></i></div>
                                                        </div>
                                                        <input type="email" name="mobemail" id="email"
                                                            class="form-control" value="{{ Auth::user()->email  ?? ''}}"
                                                            placeholder="Enter your email address" required>
                                                    </div>
                                                </div>

                                            </div>
                                            {{-- <div class="form-group">
                                                <label>About Me</label>
                                                <textarea name="mbr_intro" value="{{Auth::user()->user_personal_detail->description ?? ''}}" class="form-control rowsize-md" id="mob_mbr_intro" placeholder="Describe who you are">{{Auth::user()->user_personal_detail->description ?? ''}}</textarea>
                                            </div> --}}
                                            <div class="form-group">
                                                <label>Address</label>
                                                <textarea value="{{Auth::user()->user_personal_detail->address ?? ''}}" name="address" class="form-control rowsize-sm" id="mobaddress" rows="16"
                                                    placeholder="Enter your address here">{{Auth::user()->user_personal_detail->address ?? ''}}</textarea>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label>City</label>
                                                    <input type="text" name="city" id="mobcity" value="{{Auth::user()->user_personal_detail->city ?? ''}}"
                                                        class="form-control" value placeholder="Enter your city ">
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>State or Province</label>
                                                    <input value="{{Auth::user()->user_personal_detail->state ?? ''}}" type="text" name="state" id="mobstate"
                                                        class="form-control" value
                                                        placeholder="Enter your state or province">
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Pincode</label>
                                                    <input type="text" value="{{Auth::user()->user_personal_detail->pincode ?? ''}}" class="tel form-control" name="postalcode"
                                                        id="mobpostalcode" x-autocompletetype="tel" value
                                                        placeholder="Enter your Pincode">
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Phone</label>
                                                    <input type="tel" value="{{Auth::user()->user_personal_detail->phone ?? ''}}" class="tel form-control" name="phone"
                                                        id="mobphone" x-autocompletetype="tel" value
                                                        placeholder="Enter your phone number">
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label>Twitter</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text"><i
                                                                    class="fab fa-fw fa-twitter"></i></div>
                                                        </div>
                                                        <input type="text" value="{{Auth::user()->user_personal_detail->twitter_url ?? ''}}" name="mbr_twitter" id="mob_mbr_twitter"
                                                            class="form-control" value
                                                            placeholder="Member twitter account">
                                                    </div>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Facebook</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text"><i
                                                                    class="fab fa-fw fa-facebook-f"></i></div>
                                                        </div>
                                                        <input type="text" value="{{Auth::user()->user_personal_detail->facebook_url ?? ''}}" name="mbr_facebook" id="mob_mbr_facebook"
                                                            class="form-control" value
                                                            placeholder="Member facebook account">
                                                    </div>
                                                </div>
                                            </div>
                                        <button  value="submit" id="submit" onclick="mySubmitmobform()"
                                            class="btn btn-primary">
                                            <i class="fa fa-fw fa-check"></i> Save </button>
                                        </form>




                                    </div>
                                    </div>
                                    </div> <!-- -->


                                    <div data-scrollreveal="enter bottom over 1.5s">
                                    <div class="card-header collapsed" id="headingOne">
                                    <h2 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
                                    <span>Bank Details</span>
                                    <i class="fa fa-angle-down"></i> </button></h2>
                                    </div>
                                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                                    <div class="card-body">


                                        <form id="bankDetailsForm">
                                            <p class="text-muted">Bank Detail</p>
                                            <div class="form-group">
                                                <label>Account Number <span class="text-danger">*</span></label>
                                                <input type="text" name="account" value="{{Auth::user()->user_personal_detail->account_number ?? ''}}" id="accountdetailmob" class="form-control" placeholder="Account Number" required>
                                                <span id="error_account_mob" class="error_message"></span>
                                            </div>

                                            <div class="form-group">
                                                <label>IFSC Code <span class="text-danger">*</span></label>
                                                <input type="text" name="ifsccode" value="{{Auth::user()->user_personal_detail->ifsc_code ?? ''}}" id="ifsccodemob" class="form-control" placeholder="IFSC Code" required>
                                                <span id="error_ifsccode_mob" class="error_message"></span>
                                            </div>

                                            <div class="form-group">
                                                <label>Account Holder Name</label>
                                                <input type="text" name="accountname" value="{{Auth::user()->user_personal_detail->account_holder_name ?? ''}}" id="accountnamemob" class="form-control" placeholder="Account Holder Name" required>
                                            </div>

                                            <button type="button" name="submit" value="submit" id="submitBankDetailsmob"  class="btn btn-primary">
                                                <i class="fa fa-fw fa-check"></i> Save
                                            </button>

                                        </form>


                                    </div>
                                    </div>
                                    </div>
                                    <div data-scrollreveal="enter bottom over 1.5s">
                                    <div class="card-header collapsed" id="headingTwo">
                                    <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo">
                                    <span>KYC Update</span>
                                    <i class="fa fa-angle-down"></i> </button> </h2>
                                    </div>
                                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                    <div class="card-body">

                                        <form  accept-charset="UTF-8" enctype="multipart/form-data">
                                            @csrf
                                        <div class="form-group">

                                                
                                            <label for="pan_card" class="form-label">Upload Pan Card<span class="text-danger">*</span></label><br>
                                            <img src="{{ Auth::user()->memberkyc->pan_card??asset('img/panimage.webp')  ?? ''}}" class="picture-src"
                                            id="wizardPicturemobPanPreview" width="100" height="100"
                                            style="max-width:160px;height:auto;cursor: pointer;" title="" />
                                        <input type="file" name="pan_card" id="pan_card_mob" aria-invalid="false" class="valid" accept="image/*" />
                                        <input class="form-control" name="pan_card" type="hidden" value="" >
                                            <span id='error_pancard_mob' class="error_message d-block"></span>



                                        </div>
                                        <div class="form-group">

                                            
                                            <label for="aadharcard" class="form-label">Upload Aadharcard
                                                <span class="text-danger">*</span>    
                                                </label><br>
                                            <img src="{{ Auth::user()->memberkyc->aadharcard??asset('img/aadhara.jpg')  ?? ''}}" class="picture-src"
                                            id="wizardPictureaadharmobPreview" width="100" height="100"
                                            style="max-width:160px;height:auto;cursor: pointer;" title="" />
    
                                        <input type="file" name="aadharcard" id="aadharcardmob" aria-invalid="false"
                                            class="valid" accept="image/*" />
            
                                            <span id='error_aadharcard_mob' class="error_message d-block"></span>
                                                <input class="form-control" name="aadharcard" type="hidden" value="" >


                                        
         

    
           
                                                {{-- <a href="">View AadharCard</a> --}}


                                        </div>
                                        <div class="form-group">


                                            <label for="chequeleaf" class="form-label">Upload Cheque Leaf
                                                <span class="text-danger">*</span>    
                                                </label><br>
                                            <img src="{{ Auth::user()->memberkyc->cheque_leaf??asset('img/chequedummy.jpg')  ?? ''}}" class="picture-src"
                                            id="wizardPicturechequemobPreview" width="100" height="100"
                                            style="max-width:160px;height:auto;cursor: pointer;" title="" />
                                            <input type="file" name="cheque_leaf" id="cheque_leaf_mob" aria-invalid="false"
                                            class="valid" accept="image/*" />
                                                <input class="form-control" name="cheque_leaf" type="hidden" value="">
                                                <input class="form-control" name="cheque_leaf" type="hidden" value="" >
    
                                                <span id='error_cheque_leaf_mob' class="error_message d-block"></span>
                                        </div>

                                        <input class="form-control" id="kycid" name="kycid" type="hidden" value="{{Auth::user()->memberkyc->id??null}}">

                                        <button class="btn btn-primary" type="submit" id="subkycdetailmob" ><i class="fa fa-fw fa-check"></i> Save</button>

                                        </form>


                                    </div>
                                    </div>
                                    </div>
                                    
                                    <div data-scrollreveal="enter bottom over 1.5s">
                                    <div class="card-header collapsed" id="headingFour">
                                    <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour">
                                    <span>Change Password
                                    </span>
                                    <i class="fa fa-angle-down"></i> </button> </h2>
                                    </div>
                                    <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
                                    <div class="card-body">
                                        <form >
                                            <p class="text-muted">Update your password using forms below. Leave empty to
                                                keep the current password.</p>
                                            <div class="form-row">
                                                <input type="hidden" name="password"
                                                    value="$2y$10$IcgZZ20pXJgRzXKXVNID.OwyRYlhn3Th5SW0rqGQFzpysZMRmDXha">
                                                <div class="form-group col-md-6">
                                                    <label>Password</label>
                                                    <input type="password" class="form-control" name="password2"
                                                        id="password2mob" value placeholder="Enter your password">
                                                        <span id="error_password2_mob" class="error_message"></span>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>Confirm Password</label>
                                                    <input type="password" class="form-control" name="password1"
                                                        id="password1mob" value
                                                        placeholder="Please re-enter your password to confirm">
                                                        <span id="error_password1_mob" class="error_message"></span>
                                                </div>
                                            </div>

                                            {{-- <div class="form-group">
                                                <div class="custom-control custom-checkbox">
                                                    <input name="ischangeok" value="1" type="checkbox"
                                                        class="custom-control-input" id="ischangeok">
                                                    <label class="custom-control-label" for="ischangeok">Confirm Password
                                                        Change</label>
                                                        <span id="ischangeerrorok" class="error_message d-block"></span>
                                                </div>
                                            </div> --}}

                                            <div class="form-group">
                                                <div class="custom-control custom-checkbox pl-0">
                                                    {{-- <input name="ischangeok" value="1" type="checkbox"
                                                        class="custom-control-input" id="ischangeokmob"> --}}
                                                    <input name="ischangeok" value="1" type="checkbox"
                                                        class="" id="ischangeokmob">
                                                        Confirm Password
                                                        Change
                                                        <span id="ischangeerrormob" class="error_message d-block"></span>
                                                    {{-- <label class="custom-control-label" for="ischangeok">Confirm Password
                                                        Change</label> --}}
                                                    
                                                </div>
                                            </div>
                                           
                                        <button type="submit" name="submit" value="submit" id="submitBankPasswordmob"
                                            class="btn btn-primary">
                                            <i class="fa fa-fw fa-check"></i> Save </button>
                                        </form>
                                    </div>
                                    </div>
                                    </div>

                                    </div>
                                    </div>
                                    </div>
                                    </div>
                                    </div>
                                    </section>
                            </div>
                        </div>
                    </div>


                </div>

            </div>


            {{-- <script language="JavaScript" type="cbcbc44b08157684ab814bc6-text/javascript"></script> --}}
        </section>
    </div>

    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="...">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>

    <script>
        // Prepare the preview for profile picture
        $("#cheque_leaf").change(function() {
            readcheqURL(this);
        });

        function readcheqURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#wizardPicturechequePreview').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <script>
        // Prepare the preview for profile picture
        $("#cheque_leaf_mob").change(function() {
            readcheqmobURL(this);
        });

        function readcheqmobURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#wizardPicturechequemobPreview').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <script>
        // Prepare the preview for profile picture
        $("#pan_card_mob").change(function() {
            readPanmobURL(this);
        });

        function readPanmobURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#wizardPicturemobPanPreview').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <script>
        // Prepare the preview for profile picture
        $("#pan_card").change(function() {
            readPanURL(this);
        });

        function readPanURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#wizardPicturePanPreview').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <script>
        // Prepare the preview for profile picture
        $("#aadharcard").change(function() {
            readaddharURL(this);
        });

        function readaddharURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#wizardPictureaadharPreview').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <script>
        // Prepare the preview for profile picture
        $("#aadharcardmob").change(function() {
            readaddharmobURL(this);
        });

        function readaddharmobURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#wizardPictureaadharmobPreview').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <script>
        // Prepare the preview for profile picture
        $("#wizardpicture").change(function() {
            readURL(this);
            // var wizardpicture = $('#wizardpicture').val();
            let formData = new FormData();
            let wizardpicture = $('#wizardpicture')[0].files[0];

            formData.append('wizardpicture', wizardpicture);
            let csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: 'POST',
                url: '/update-profile-pic',
                data: formData, // Use the FormData object
                processData: false, // Prevent jQuery from processing the data
                contentType: false, // Set content type to false
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    // Handle success response
                    console.log('Bank details saved successfully:', response);
                    // Optionally, display success message or update UI
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.log('Error saving bank details:', status, error);
                    // Optionally, display error message or handle errors
                }
            });

            // console.warn(wizardpicture,'wizardpicture:');
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <script>
        $("#wizardpicturemob").change(function() {
            readmobURL(this);

            let formData = new FormData();
            let wizardpicture = $('#wizardpicturemob')[0].files[0];

            formData.append('wizardpicture', wizardpicture);
            let csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: 'POST',
                url: '/update-profile-pic',
                data: formData, // Use the FormData object
                processData: false, // Prevent jQuery from processing the data
                contentType: false, // Set content type to false
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    // Handle success response
                    console.log('Bank details saved successfully:', response);
                    // Optionally, display success message or update UI
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.log('Error saving bank details:', status, error);
                    // Optionally, display error message or handle errors
                }
            });

        });

        function readmobURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#wizardPicturePreviewmob').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>


<script>

function mySubmitform(){
     event.preventDefault();
    var name = $('#name').val();
    var email = $('#email').val();
    var mbr_intro = $('#mbr_intro').val();
    var address = $('#address').val();
    var city = $('#city').val();
    var state = $('#state').val();
    var postalcode = $('#postalcode').val();
    var phone = $('#phone').val();
    var mbr_twitter = $('#mbr_twitter').val();
    var mbr_facebook = $('#mbr_facebook').val();
    let csrfToken = $('meta[name="csrf-token"]').attr('content');

    var data = {
        description:mbr_intro,
        address:address,
        city:city,
        state:state,
        pincode:postalcode,
        phone:phone,
        twitter_url:mbr_twitter,
        facebook_url:mbr_facebook,
    };

    console.warn(data,'data:');

    $.ajax({
    type: 'POST', // HTTP method (GET, POST, PUT, DELETE, etc.)
    url: '/update-profile', // URL of the server-side endpoint
    data: data,
    // contentType: "application/json",
    headers: {
        'X-CSRF-TOKEN': csrfToken
    },
    success: function(response) {
        // This function is called if the request succeeds
        $('#thankyouModal').modal('show');
        $('#profile').html('Profile');
        setTimeout(function() {
            location.reload();
            }, 2000);
        console.log('Success:', response);
    },
    error: function(xhr, status, error) {
        // This function is called if the request fails
        console.log('Error:', status, error);
    }
});

    }
</script>



<script>

    function mySubmitmobform(){
         event.preventDefault();
        var name = $('#mobname').val();
        var email = $('#mobemail').val();
        var mbr_intro = $('#mob_mbr_intro').val();
        var address = $('#mobaddress').val();
        var city = $('#mobcity').val();
        var state = $('#mobstate').val();
        var postalcode = $('#mobpostalcode').val();
        var phone = $('#mobphone').val();
        var mbr_twitter = $('#mob_mbr_twitter').val();
        var mbr_facebook = $('#mob_mbr_facebook').val();
        let csrfToken = $('meta[name="csrf-token"]').attr('content');
    
        var data = {
            // image_profile_url:wizardpicture,
            description:mbr_intro,
            address:address,
            city:city,
            state:state,
            pincode:postalcode,
            phone:phone,
            twitter_url:mbr_twitter,
            facebook_url:mbr_facebook,
        };
    
        console.warn(data,'data:');
    
        $.ajax({
        type: 'POST', // HTTP method (GET, POST, PUT, DELETE, etc.)
        url: '/update-profile', // URL of the server-side endpoint
        data: data,
        // contentType: "application/json",
        headers: {
            'X-CSRF-TOKEN': csrfToken
        },
        success: function(response) {
            // This function is called if the request succeeds
        $('#thankyouModal').modal('show');
        $('#profile').html('Profile');
        setTimeout(function() {
            location.reload();
            }, 2000);
            console.log('Success:', response);
        },
        error: function(xhr, status, error) {
            // This function is called if the request fails
            console.log('Error:', status, error);
        }
    });
    
        }
    </script>


<script>
    $(document).ready(function() {
        // Event listener for submitting bank details form
        $('#submitBankDetails').on('click', function(event) {
            event.preventDefault(); // Prevent default form submission

            // Collect form data
            var accountdetail = $('#accountdetail').val();
            if(accountdetail == ''){
                $('#error_account').html('Please mention the account Number');
            }else{
                $('#error_account').html('');
            }
            var ifsccode = $('#ifsccode').val();
            if(ifsccode == ''){
                $('#error_ifsccode').html('Please mention the account Number');
            }else{
                $('#error_ifsccode').html('');
            }

            

            var accountname = $('#accountname').val();
            let csrfToken = $('meta[name="csrf-token"]').attr('content');

            if(accountdetail == '' || ifsccode == ''){
              return false;  
            }else{
                var accountdata = {
                accountdetail: accountdetail,
                ifsccode: ifsccode,
                accountname: accountname
            };

            // AJAX request
            $.ajax({
                type: 'POST',
                url: '/update-bank-details',
                data: accountdata,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    // Handle success response

                    $('#thankyouModal').modal('show');
                    $('#profile').html('Bank Details');
                    setTimeout(function() {
                        location.reload();
                        }, 2000);

                    console.log('Bank details saved successfully:', response);
                    // Optionally, display success message or update UI
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.log('Error saving bank details:', status, error);
                    // Optionally, display error message or handle errors
                }
            });
            }

        });

        $('#submitBankDetailsmob').on('click', function(event) {
            event.preventDefault(); // Prevent default form submission

            // Collect form data
            var accountdetail = $('#accountdetailmob').val();
            if(accountdetail == ''){
                $('#error_account_mob').html('Please mention the account Number');
            }else{
                $('#error_account_mob').html('');
            }
            var ifsccode = $('#ifsccodemob').val();
            if(ifsccode == ''){
                $('#error_ifsccode_mob').html('Please mention the account Number');
            }else{
                $('#error_ifsccode_mob').html('');
            }

            

            var accountname = $('#accountnamemob').val();
            let csrfToken = $('meta[name="csrf-token"]').attr('content');

            if(accountdetail == '' || ifsccode == ''){
              return false;  
            }else{
                var accountdata = {
                accountdetail: accountdetail,
                ifsccode: ifsccode,
                accountname: accountname
            };

            // AJAX request
            $.ajax({
                type: 'POST',
                url: '/update-bank-details',
                data: accountdata,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {


                    $('#thankyouModal').modal('show');
                    $('#profile').html('Bank Details');
                    setTimeout(function() {
                        location.reload();
                        }, 2000);

                    // Handle success response
                    console.log('Bank details saved successfully:', response);
                    // Optionally, display success message or update UI
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.log('Error saving bank details:', status, error);
                    // Optionally, display error message or handle errors
                }
            });
            }

        });





 $('#subkycdetail').on('click', function(event) {
    event.preventDefault(); // Prevent default form submission

    // Initialize a new FormData object
    var formData = new FormData();

    // Get the values of pan_card, aadharcard, and cheque_leaf
    var pan_card = $('#pan_card')[0].files[0];
    var aadharcard = $('#aadharcard')[0].files[0];;
    var kycid = $('#kycid').val(); // Assuming kycid is a hidden input
    var cheque_leaf = $('#cheque_leaf')[0].files[0]; // Get the file object

    // Check if any of the required fields are empty
    if (pan_card == '' || aadharcard == '' || !cheque_leaf) {
        if (!pan_card) {
            $('#error_pancard').html('Please Upload the file');
        } else {
            $('#error_pancard').html('');
        }
        if (!aadharcard) {
            $('#error_aadharcard').html('Please Upload the file');
        } else {
            $('#error_aadharcard').html('');
        }
        if (!cheque_leaf) {
            $('#error_cheque_leaf').html('Please Upload the file');
        } else {
            $('#error_cheque_leaf').html('');
        }
        return false; // Prevent form submission
    }

    // Append data to FormData object
    formData.append('pan_card', pan_card);
    formData.append('aadharcard', aadharcard);
    formData.append('kycid', kycid); // Append kycid here
    formData.append('cheque_leaf', cheque_leaf);

    // Get CSRF token
    var csrfToken = $('meta[name="csrf-token"]').attr('content');

    // Perform AJAX request
    $.ajax({
        type: 'POST',
        url: '/memberkycs',
        data: formData, // Use the FormData object
        processData: false, // Prevent jQuery from processing the data
        contentType: false, // Set content type to false
        headers: {
            'X-CSRF-TOKEN': csrfToken
        },
        success: function(response) {

            $('#thankyouModal').modal('show');
                    $('#profile').html('Kyc Details');
                    setTimeout(function() {
                        location.reload();
                        }, 2000);

            // Handle success response
            console.log('Bank details saved successfully:', response);
            // Optionally, display success message or update UI
        },
        error: function(xhr, status, error) {
            // Handle error
            console.log('Error saving bank details:', status, error);
            // Optionally, display error message or handle errors
        }
    });
});





$('#subkycdetailmob').on('click', function(event) {
    event.preventDefault(); // Prevent default form submission

    let formData = new FormData();

    let pan_card = $('#pan_card_mob')[0].files[0];
    let aadharcard = $('#aadharcardmob')[0].files[0];
    let kycid = $('#kycid').val(); // Assuming kycid is a hidden input
    let cheque_leaf = $('#cheque_leaf_mob')[0].files[0]; // Get the file object

    // Check if any of the required fields are empty
    if (!pan_card || !aadharcard || !cheque_leaf) {
        if (!pan_card) {
            $('#error_pancard_mob').html('Please Upload the file');
        } else {
            $('#error_pancard_mob').html('');
        }
        if (!aadharcard) {
            $('#error_aadharcard_mob').html('Please Upload the file');
        } else {
            $('#error_aadharcard_mob').html('');
        }
        if (!cheque_leaf) {
            $('#error_cheque_leaf_mob').html('Please Upload the file');
        } else {
            $('#error_cheque_leaf_mob').html('');
        }
        return false; // Prevent form submission
    }

    // Append data to FormData object
    formData.append('pan_card', pan_card);
    formData.append('aadharcard', aadharcard);
    formData.append('kycid', kycid); // Append kycid here
    formData.append('cheque_leaf', cheque_leaf);

    let csrfToken = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        type: 'POST',
        url: '/memberkycs',
        data: formData,
        contentType: false, // Set content type to false
        processData: false, // Prevent jQuery from processing the data
        headers: {
            'X-CSRF-TOKEN': csrfToken
        },
        success: function(response) {
            $('#thankyouModal').modal('show');
                 $('#profile').html('Kyc Details');
                    setTimeout(function() {
                        location.reload();
                }, 2000);
        },
        error: function(xhr, status, error) {
            // Handle error
            console.log('Error saving bank details:', status, error);
            // Optionally, display error message or handle errors
        }
    });
});


        // Event listener for submitting other form
        $('#submitBankPassword').on('click', function(event) {
            event.preventDefault(); // Prevent default form submission
            var password2 = $('#password2').val();
            let isChangeOkCheckbox = $('#ischangeok').val();
            // let isChangeOkCheckbox = document.getElementById('ischangeok');
            if(password2 == ''){
                $('#error_password2').html('Please Enter the Password');
            }else{
                $('#error_password2').html('');
            }
            var password1 = $('#password1').val();
            if(password1 == ''){
                $('#error_password1').html('Please Enter the Confirm Password');
            }else if(password2 !== password1){
                $('#error_password1').html('Password is not matching with Confirm password');
            }else{
                $('#error_password1').html('');
            }

            if(!isChangeOkCheckbox.checked){
                $('#ischangeerrorok').html('This field is required');
            }

            let csrfToken = $('meta[name="csrf-token"]').attr('content');
            // if(password2 == '' || password1 == '' || (password2 !== password1) || (!isChangeOkCheckbox.checked)){
            if(password2 == '' || password1 == '' || (password2 !== password1)){
                return false;
            }else{
                var pass = {
                    password2: password2,
                    password1: password1,
                };
                $.ajax({
                type: 'POST',
                url: '/change-password',
                data: pass,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                 $('#thankyouModal').modal('show');
                 $('#profile').html('Password');
                    setTimeout(function() {
                        location.reload();
                }, 2000);
                    console.log('Bank details saved successfully:', response);
                    // Optionally, display success message or update UI
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.log('Error saving bank details:', status, error);
                    // Optionally, display error message or handle errors
                }
            });
            }
        });

        // Event listener for submitting other form
        $('#submitBankPasswordmob').on('click', function(event) {
            event.preventDefault(); // Prevent default form submission
            let password2 = $('#password2mob').val();
            if(password2 == ''){
                $('#error_password2_mob').html('Please Enter the Password');
            }else{
                $('#error_password2_mob').html('');
            }
            let password1 = $('#password1mob').val();
            if(password1 == ''){
                $('#error_password1_mob').html('Please Enter the Confirm Password');
            }else if(password2 !== password1){
                $('#error_password1_mob').html('Password is not matching with Confirm password');
            }else{
                $('#error_password1_mob').html('');
            }

            let isChangeOkCheckbox = $('#ischangeokmob').val();
            if(!isChangeOkCheckbox.checked){
                $('#ischangeerrormob').html('This field is required');
                // return false;
            }


            let csrfToken = $('meta[name="csrf-token"]').attr('content');
            if(password2 == '' || password1 == '' || (password2 !== password1)){
                return false;
            }else{
                var pass = {
                    password2: password2,
                    password1: password1,
                };
                $.ajax({
                type: 'POST',
                url: '/change-password',
                data: pass,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                $('#thankyouModal').modal('show');
                 $('#profile').html('Password');
                    setTimeout(function() {
                        location.reload();
                }, 2000);
                    console.log('Bank details saved successfully:', response);
                    // Optionally, display success message or update UI
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.log('Error saving bank details:', status, error);
                    // Optionally, display error message or handle errors
                }
            });
            }
        });
    });
</script>

<script>
    $(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.show").each(function(){
        	$(this).prev(".card-header").find(".fa").addClass("fa-angle-up").removeClass("fa-angle-down");
        });
        
        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
        	$(this).prev(".card-header").find(".fa").removeClass("fa-angle-down").addClass("fa-angle-up");
        }).on('hide.bs.collapse', function(){
        	$(this).prev(".card-header").find(".fa").removeClass("fa-angle-up").addClass("fa-angle-down");
        });
    });
</script>


{{-- pay-Now Modal --}}
<div class="modal fade" id="thankyouModal" role="dialog" aria-labelledby="...">
    {{-- <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> --}}
    <div class="modal-dialog  modal-dialog-centered" role="document">
  
        <div class="modal-content">
            <div class="modal-header">
                {{-- <h5 class="modal-title" id="exampleModalLabel">New message</h5> --}}
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body text-center">
              <div>
                <img src="{{asset('assets/image/green_tick.gif')}}" alt="img" style="margin-left:33px;">
              </div>
                <div>
                    <h5 class="contact-hg"> The  <span id="profile"></span> get updated </h5>
                </div>
            </div>
        </div>
    </div>
  </div>

@endsection