@extends('frontend.layouts.template-base')

@section('meta_tags')
    @include('frontend.layouts.meta-tags', ['title' => 'Profile', 'page' => 'profile'])
@endsection

@section('content')

    <section class="my-orders-main profile-page py-5">
        <div class="container-fluid px-5 ">
            <div class="row g-3">
                @include('frontend.components.tab-section-head')
                <div class="col-lg-8">
                    <div class="border-card ">

                        {{-- Tab First start --}}
                        <div class="tab-content" id="My-Order-tab-first-content">

                            <div class="tab-pane fade" id="profile-Edit">
                                <div class="container">
                                    <div class="d-flex align-items-center ">
                                        <i class="fa-solid fa-arrow-left fs-5 me-3"></i>
                                        <h2 class="h5 mb-0 fw-bold">Edit Profile</h2>
                                    </div>
                                    <div class="profile-card">

                                        <!-- Name -->
                                        <div class="float-field" id="wrap-name">
                                            <span class="field-icon">
                                                <img src="{{ asset('assets/images/img/profile.svg') }}" alt="profile icon">
                                            </span>
                                            <input type="text" id="name" oninput="handleInput('name', 'wrap-name')">
                                            <label for="name">Name</label>
                                        </div>

                                        <!-- Mobile Number -->
                                        <div class="float-field phone" id="wrap-mobile">
                                            <span class="field-icon">
                                                +91
                                            </span>

                                            <input type="number" id="mobile" maxlength="10"
                                                oninput="handleInput('mobile', 'wrap-mobile')">
                                            <label for="mobile">Mobile Number</label>
                                        </div>

                                        <!-- Email -->
                                        <div class="float-field" id="wrap-email">
                                            <span class="field-icon">
                                                <img src="{{ asset('assets/images/img/sms.svg') }}" alt="profile icon">
                                            </span>
                                            <input type="email" id="email" oninput="handleInput('email', 'wrap-email')">
                                            <label for="email">Email</label>
                                        </div>

                                        <button class="update-btn" id="updateBtn" disabled>Update Profile</button>

                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="my-Orders">
                                <p>content of myOrders</p>
                            </div>

                            <div class="tab-pane fade " id="my-Address">
                                <div class="my-address-details">

                                    <div
                                        class="tab-order-header d-flex align-items-center justify-content-between p-4 pb-2">
                                        <a href="javascript:void(0)" class="d-flex gap-2 align-items-center">
                                            <img src="{{asset('assets/images/icon/login-arrow-left.svg')}}" alt="Arrow">
                                            <h5 class="tab-order-title mb-0"><span class="fw-normal">My Address</span></h5>
                                        </a>

                                        <div>
                                            <button class="primary-green-btn">+ Add New Address</button>
                                        </div>
                                    </div>

                                    <div class="px-4">

                                        {{-- !! If want Add Change d-none to d-block !! --}}

                                        {{-- Saved Address Empty Start --}}
                                        <div class="d-none">
                                            <div class="tab-lable">Saved Address</div>
                                            <div class="empty-card-center">
                                                <div class="tab-content-center">
                                                    <div class="ops-image-container mb-2">
                                                        <img src="{{ asset('assets/images/img/ops-s.gif') }}"
                                                            alt="ops-image">
                                                    </div>
                                                    <h6 class="tab-order-title">No Address Added</h6>
                                                    <p class="tab-order-para w-50 text-center">To see the saved address
                                                        here, add your work or home address</p>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Saved Address Empty End --}}

                                        {{-- Location map Start --}}
                                        <div class="d-none">
                                            <div class="tab-lable">Location Information</div>
                                            <div>
                                                <iframe
                                                    src="https://www.google.com/maps?q=11.0168,76.9558&z=15&output=embed"
                                                    width="100%" height="400" style="border:0; border-radius:12px;"
                                                    allowfullscreen="" loading="lazy">
                                                </iframe>
                                            </div>

                                            <div class="row">
                                                <div class="col-7">
                                                    <div class="tab-map-loaction p-2">
                                                        <h5 class="txt-lable my-2">Select a delivery Location</h5>
                                                        <div class="d-flex align-items-center gap-2">
                                                            <button class="warning-outline-btn w-100">Search
                                                                Location</button>
                                                            <button class="warning-primary-btn w-100">Current
                                                                Location</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Location map End --}}

                                        {{-- Location Information Start --}}
                                        <div class="d-none">
                                            <div class="tab-lable">Location Information</div>
                                            <div>
                                                <iframe
                                                    src="https://www.google.com/maps?q=11.0168,76.9558&z=15&output=embed"
                                                    width="100%" height="400" style="border:0; border-radius:12px;"
                                                    allowfullscreen="" loading="lazy">
                                                </iframe>
                                            </div>

                                            <div class="row">
                                                <div class="col-7">
                                                    <div class="tab-map-loaction p-2">
                                                        <h5 class="txt-lable">Xcut</h5>
                                                        <p class="txt-sub-lable mb-2">Woodland, 495/496, xcut, Coimbatore,
                                                            Coimbatore, TN, India</p>
                                                        <button class="warning-primary-btn w-100">Confirm &
                                                            Continue</button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        {{-- Location Information End --}}

                                        {{-- Address Form Start --}}
                                        <div class="d-none">
                                            <div class="add-address-details-wrapper my-3">

                                                {{-- Address Header --}}
                                                <div class="add-address-details-location-card">
                                                    <img src="{{ asset('assets/images/icon/map-pre.webp') }}" alt="map"
                                                        class="add-address-details-map-img">

                                                    <div class="add-address-details-location-info">
                                                        <h6>Xcut</h6>
                                                        <p>Woodland, 495/496, xcut, Coimbatore...</p>
                                                    </div>

                                                    <button class="add-address-details-edit-btn">Edit</button>
                                                </div>

                                                {{-- Main Card --}}
                                                <div class="add-address-details-card">
                                                    <h6 class="add-address-details-title">Save Address as</h6>

                                                    {{-- Save Address Tabs --}}
                                                    <ul class="nav add-address-details-tabs" id="addAddressTypeTab"
                                                        role="tablist">
                                                        <li class="nav-item">
                                                            <button class="add-address-details-tab-btn active"
                                                                data-bs-toggle="tab" data-bs-target="#addAddressHome"
                                                                type="button">
                                                                <img src="{{ asset('assets/images/icon/home-tab-icon.svg') }}"
                                                                    alt="icon">
                                                                Home
                                                            </button>
                                                        </li>
                                                        <li class="nav-item">
                                                            <button class="add-address-details-tab-btn" data-bs-toggle="tab"
                                                                data-bs-target="#addAddressWork" type="button">
                                                                <img src="{{ asset('assets/images/icon/work-tab-icon.svg') }}"
                                                                    alt="icon">
                                                                Work
                                                            </button>
                                                        </li>
                                                        <li class="nav-item">
                                                            <button class="add-address-details-tab-btn" data-bs-toggle="tab"
                                                                data-bs-target="#addAddressOthers" type="button">
                                                                <img src="{{ asset('assets/images/icon/others-tab-icon.svg') }}"
                                                                    alt="icon">
                                                                Others
                                                            </button>
                                                        </li>
                                                    </ul>

                                                    <div class="tab-content">

                                                        {{-- Home --}}
                                                        <div class="tab-pane fade show active" id="addAddressHome">
                                                            <div class="add-address-details-building-box">
                                                                <h6 class="add-address-details-title mt-3">Type Of Building
                                                                </h6>

                                                                <ul class="nav add-address-details-tabs">
                                                                    <li class="nav-item">
                                                                        <button class="add-address-details-tab-btn active"
                                                                            data-bs-toggle="tab"
                                                                            data-bs-target="#homeSociety" type="button">
                                                                            <img src="{{ asset('assets/images/icon/society-tab-icon.svg') }}"
                                                                                alt="icon">
                                                                            Society
                                                                        </button>
                                                                    </li>
                                                                    <li class="nav-item">
                                                                        <button class="add-address-details-tab-btn"
                                                                            data-bs-toggle="tab"
                                                                            data-bs-target="#homeIndependenthouse"
                                                                            type="button">
                                                                            <img src="{{ asset('assets/images/icon/home-tab-icon.svg') }}"
                                                                                alt="icon">
                                                                            Independent house
                                                                        </button>
                                                                    </li>
                                                                </ul>

                                                                <div class="tab-content">
                                                                    <div class="tab-pane fade show active" id="homeSociety">
                                                                        <form class="add-address-details-form">

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Flat No. / Floor
                                                                                    <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Building name <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Landmark <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Receiver Name <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Receiver Number
                                                                                    <span>*</span></label>
                                                                            </div>

                                                                            {{-- Button "disabled" in class form input not
                                                                            type --}}
                                                                            <button class="warning-primary-btn w-100">Save
                                                                                Address</button>

                                                                        </form>


                                                                    </div>

                                                                    <div class="tab-pane fade" id="homeIndependenthouse">
                                                                        <form class="add-address-details-form">

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Complete Address
                                                                                    <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Building name <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Landmark <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Save as ‘Friend’s Name’</label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Receiver Name <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Receiver Number
                                                                                    <span>*</span></label>
                                                                            </div>

                                                                            {{-- Button "disabled" in class form input not
                                                                            type --}}
                                                                            <button class="warning-primary-btn w-100">Save
                                                                                Address</button>

                                                                        </form>
                                                                    </div>

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

                                                        {{-- Work --}}
                                                        <div class="tab-pane fade" id="addAddressWork">
                                                            <form class="add-address-details-form">

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Company name / Floor <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Building name <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Landmark <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Receiver Name <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Receiver Number <span>*</span></label>
                                                                </div>

                                                                {{-- Button "disabled" in class form input not type --}}
                                                                <button class="warning-primary-btn w-100">Save
                                                                    Address</button>

                                                            </form>
                                                        </div>

                                                        {{-- Others --}}
                                                        <div class="tab-pane fade" id="addAddressOthers">
                                                            <div class="add-address-details-building-box">
                                                                <h6 class="add-address-details-title mt-3">Type Of Building
                                                                </h6>

                                                                <ul class="nav add-address-details-tabs">
                                                                    <li class="nav-item">
                                                                        <button class="add-address-details-tab-btn"
                                                                            data-bs-toggle="tab"
                                                                            data-bs-target="#otherSociety" type="button">
                                                                            <img src="{{ asset('assets/images/icon/society-tab-icon.svg') }}"
                                                                                alt="icon">
                                                                            Society
                                                                        </button>
                                                                    </li>
                                                                    <li class="nav-item">
                                                                        <button class="add-address-details-tab-btn active"
                                                                            data-bs-toggle="tab"
                                                                            data-bs-target="#otherIndependentHouse"
                                                                            type="button">
                                                                            <img src="{{ asset('assets/images/icon/home-tab-icon.svg') }}"
                                                                                alt="icon">
                                                                            Independent house
                                                                        </button>
                                                                    </li>
                                                                </ul>

                                                                <div class="tab-content">
                                                                    <div class="tab-pane fade" id="otherSociety">
                                                                        <form class="add-address-details-form">

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Flat No. / Floor
                                                                                    <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Building name <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Landmark <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Receiver Name <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Receiver Number
                                                                                    <span>*</span></label>
                                                                            </div>

                                                                            {{-- Button "disabled" in class form input not
                                                                            type --}}
                                                                            <button class="warning-primary-btn w-100">Save
                                                                                Address</button>

                                                                        </form>
                                                                    </div>

                                                                    <div class="tab-pane fade show active"
                                                                        id="otherIndependentHouse">
                                                                        <form class="add-address-details-form">

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Complete Address
                                                                                    <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Building name <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Landmark <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Save as ‘Friend’s Name’</label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Receiver Name <span>*</span></label>
                                                                            </div>

                                                                            <div class="add-address-details-floating-group">
                                                                                <input type="text" required placeholder=" ">
                                                                                <label>Receiver Number
                                                                                    <span>*</span></label>
                                                                            </div>

                                                                            {{-- Button "disabled" in class form input not
                                                                            type --}}
                                                                            <button class="warning-primary-btn w-100">Save
                                                                                Address</button>

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

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Address Form end --}}

                                        {{-- Location Information Start --}}
                                        <div class="d-none">
                                            <div class="saved-address-card mt-2">
                                                <div class="saved-address-header">
                                                    <span class="d-flex align-items-center gap-2">
                                                        <img src="{{ asset('assets/images/icon/address-house.svg') }}"
                                                            alt="icon">
                                                        Home
                                                    </span>
                                                </div>

                                                <div class="saved-address-body">
                                                    <div>
                                                        <h6>Nisho</h6>
                                                        <p>
                                                            Cloudi5 Technologies, Hero, SF 173, Sathy Rd,
                                                            Sivasakthi Colony, Ganapathy, Coimbatore,
                                                            Tamil Nadu 641006, India
                                                        </p>
                                                    </div>

                                                    <div class="custom-dropdown">

                                                        <button class="dropdown-toggle-btn" onclick="toggleDropdown(this)">
                                                            <img src="{{ asset('assets/images/icon/ellipsis-vertical.svg') }}"
                                                                alt="icon">
                                                        </button>

                                                        <div class="custom-dropdown-menu">

                                                            <button class="dropdown-list">
                                                                <i class="bi bi-pencil-square"></i>
                                                                Edit
                                                            </button>

                                                            <button class="dropdown-list delete">
                                                                <i class="bi bi-trash3"></i>
                                                                Delete
                                                            </button>

                                                        </div>

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

                                            <div class="saved-address-card mt-2">
                                                <div class="saved-address-header">
                                                    <span class="d-flex align-items-center gap-2">
                                                        <img src="{{ asset('assets/images/icon/address-business.svg') }}"
                                                            alt="icon">
                                                        Work
                                                    </span>
                                                </div>

                                                <div class="saved-address-body">
                                                    <div>
                                                        <h6>Nisho</h6>
                                                        <p>
                                                            Cloudi5 Technologies, Hero, SF 173, Sathy Rd,
                                                            Sivasakthi Colony, Ganapathy, Coimbatore,
                                                            Tamil Nadu 641006, India
                                                        </p>
                                                    </div>

                                                    <div class="custom-dropdown">

                                                        <button class="dropdown-toggle-btn" onclick="toggleDropdown(this)">
                                                            <img src="{{ asset('assets/images/icon/ellipsis-vertical.svg') }}"
                                                                alt="icon">
                                                        </button>

                                                        <div class="custom-dropdown-menu">

                                                            <button class="dropdown-list">
                                                                <i class="bi bi-pencil-square"></i>
                                                                Edit
                                                            </button>

                                                            <button class="dropdown-list delete">
                                                                <i class="bi bi-trash3"></i>
                                                                Delete
                                                            </button>

                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Location Information End --}}
                                    </div>


                                </div>
                            </div>

                            <div class="tab-pane fade" id="need-Help">
                                <div class="container bg-white rounded-4  p-0 overflow-hidden " style="min-height: 90vh;">

                                    <div id="mainSection" class="p-4">
                                        <div class="d-flex align-items-center mb-4">
                                            <i class="fa-solid fa-arrow-left  fs-4 me-3"></i>
                                            <h2 class="h5 mb-0 tab-opt-title">Help & Support</h2>
                                        </div>

                                        <div class="card faq-card-sec  mb-4 p-3 rounded-4 border" style="max-width:550px;">
                                            <h5 class="fw-bold mb-3 text-black">FAQs</h5>
                                            <div class="list-group list-group-flush">
                                                <div class=" d-flex justify-content-between align-items-center  bg-transparent py-3 px-0 cursor-pointer"
                                                    onclick="showSection('orderSection')">
                                                    <span class="fw-bold">Orders & Products Related</span>
                                                    <i class="fa-solid fa-chevron-right text-muted"></i>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center border-top  bg-transparent py-3 px-0 cursor-pointer"
                                                    onclick="showSection('paymentSection')">
                                                    <span class="fw-bold">Payment Related</span>
                                                    <i class="fa-solid fa-chevron-right text-muted"></i>
                                                </div>
                                                <div class=" d-flex justify-content-between align-items-center border-top bg-transparent py-3 px-0 cursor-pointer"
                                                    onclick="showSection('couponSection')">
                                                    <span class="fw-bold">Coupons & Offers</span>
                                                    <i class="fa-solid fa-chevron-right text-muted"></i>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="card  faq-card-sec  p-3 rounded-4 border" style="max-width:550px;">
                                            <h5 class="fw-bold mb-3 text-black">Contact</h5>
                                            <div class="mb-4">
                                                <div class="d-flex align-items-center gap-2 text-dark fw-medium mb-1">
                                                    <span><img src="{{ asset('assets/images/img/black-location.svg') }}"
                                                            width="20" alt=""></span> Address
                                                </div>
                                                <p class="text-muted small ps-4 mb-0">SF No: 157/3b, Vaidhehi Falls road,
                                                    narasipuram, coimbatore 641109</p>
                                            </div>
                                            <div class="mb-4 border-top w-100 pt-3">
                                                <div class="d-flex align-items-center gap-2 text-dark fw-medium mb-1">
                                                    <span><img src="{{ asset('assets/images/img/call-calling.svg') }}"
                                                            width="20" alt=""></span> Phone Number
                                                </div>
                                                <p class="text-muted small ps-4 mb-0">+91 86800 22555</p>
                                            </div>
                                            <div class="border-top w-100 pt-3">
                                                <div class="d-flex align-items-center gap-2 text-dark fw-medium mb-1">
                                                    <span><img src="{{ asset('assets/images/img/sms-tracking.svg') }}"
                                                            width="20" alt=""></span> Email
                                                </div>
                                                <p class="text-muted small ps-4 mb-0">support@chotekisan.com</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="orderSection" class="d-none p-4">
                                        <div class="d-flex align-items-center mb-4 cursor-pointer"
                                            onclick="showSection('mainSection')">
                                            <i class="fa-solid fa-arrow-left fs-4 me-3"></i>
                                            <h2 class="h5 mb-0 tab-opt-title">Order & Product related</h2>
                                        </div>
                                        <div class="faq-list border rounded-3 overflow-hidden">

                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>How do I place an order?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content show">
                                                    <p>
                                                        Browse products, add items to your cart, and proceed to checkout to
                                                        place your order.
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>Can I modify or cancel my order?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>How can I track my order?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        You can invite any friend who has not already registered on the app.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>Are the products fresh?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        You can invite any friend who has not already registered on the app.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>What if I receive a damaged or incorrect item?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        You can invite any friend who has not already registered on the app.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item">
                                                <button class="faq-btn" type="button">
                                                    <span>What if an item is out of stock?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        You can invite any friend who has not already registered on the app.
                                                    </p>
                                                </div>
                                            </div>

                                        </div>

                                    </div>

                                    <div id="paymentSection" class="d-none p-4">
                                        <div class="d-flex align-items-center mb-4 cursor-pointer"
                                            onclick="showSection('mainSection')">
                                            <i class="fa-solid fa-arrow-left fs-4 me-3"></i>
                                            <h2 class="h5 mb-0 tab-opt-title">Payment Related</h2>
                                        </div>
                                        <div class="faq-list border rounded-3 overflow-hidden">

                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>What payment options are available?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content show">
                                                    <p>
                                                        You can pay using UPI, debit/credit cards, net banking, or Cash on
                                                        Delivery.
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>What should I do if my payment fails?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>How will I receive my refund?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>How long do refunds take?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>Is my payment information secure?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item ">
                                                <button class="faq-btn" type="button">
                                                    <span>Is there any extra charge for COD?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div id="couponSection" class="d-none p-4">
                                        <div class="d-flex align-items-center mb-4 cursor-pointer"
                                            onclick="showSection('mainSection')">
                                            <i class="fa-solid fa-arrow-left fs-4 me-3"></i>
                                            <h2 class="h5 mb-0 tab-opt-title">Coupons & offers</h2>
                                        </div>

                                        <div class="faq-list border rounded-3 overflow-hidden">

                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>Where can I find available offers?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content show">
                                                    <p>
                                                        Browse products, add items to your cart, and proceed to checkout to
                                                        see your discounts.
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>Do offers apply to all products? </span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>How do I apply a coupon code?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>Why is my coupon not working?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item border-bottom">
                                                <button class="faq-btn" type="button">
                                                    <span>Do coupons have an expiry date?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="faq-item ">
                                                <button class="faq-btn" type="button">
                                                    <span>How can I get more coupons and offers?</span>
                                                    <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                </button>

                                                <div class="faq-content">
                                                    <p>
                                                        Tap the referral section, copy your invite code, and share it with
                                                        your friends.
                                                    </p>
                                                </div>
                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>
                        {{-- Tab First end --}}

                        {{-- Tab Second Start --}}
                        <div class="tab-content" id="My-Order-tab-content">

                            <div class="tab-pane fade" id="MyWishlist">
                                <div class="container">
                                    <div class="d-flex align-items-center my-4">
                                        <i class="fa-solid fa-arrow-left fs-5 me-3"></i>
                                        <h2 class="h5 mb-0 fw-normal tab-opt-title">My Wishlist</h2>
                                    </div>
                                    <div class="row frequent-sec">

                                        <!-- Slide 1 -->
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="card product-card">
                                                <div class="img-area">
                                                    <div class="img-placeholder">
                                                        <img src="{{asset('assets/images/img/wheat.png') }}"
                                                            alt="Product Image">
                                                    </div>
                                                    <span class="pro-orange-badge">17% Off</span>
                                                    <button class="wishlist-btn">
                                                        <svg class="heart" xmlns="http://www.w3.org/2000/svg"
                                                            viewBox="0 0 100 100" fill="none" stroke-width="5"
                                                            stroke-linecap="round" stroke-linejoin="round">
                                                            <path
                                                                d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                                                        </svg>

                                                    </button>
                                                    <div class="cart-btn" id="cartBtn">

                                                        <div class="counter-area">
                                                            <div class="minus-btn" id="minusBtn">−</div>
                                                            <div class="count-val" id="countVal">1</div>
                                                        </div>

                                                        <div class="plus-icon" id="plusIcon">
                                                            <svg width="20" height="20" viewBox="0 0 20 20">
                                                                <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e"
                                                                    stroke-width="2.5" stroke-linecap="round" id="vLine" />
                                                                <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e"
                                                                    stroke-width="2.5" stroke-linecap="round" id="hLine" />
                                                            </svg>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="info">
                                                    <div class="price-row">
                                                        <span class="price-now">₹249</span>
                                                        <span class="price-old">₹299</span>
                                                    </div>
                                                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                                                    <div class="qty-dropdown">
                                                        <button class="qty-selected" type="button">
                                                            <span class="selected-text">1 kg</span>
                                                            <i class="fas fa-chevron-down"></i>
                                                        </button>

                                                        <ul class="qty-menu">
                                                            <li data-value="1 kg" class="active">1 kg</li>
                                                            <li data-value="5 kg">5 kg</li>
                                                            <li data-value="10 kg">10 kg</li>
                                                            <li data-value="500 g">500 g</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Slide 2 -->
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="card product-card">
                                                <div class="img-area">
                                                    <div class="img-placeholder">
                                                        <img src="{{asset('assets/images/img/oil.png') }}"
                                                            alt="Product Image">
                                                    </div>
                                                    <span class="pro-orange-badge">17% Off</span>
                                                    <button class="wishlist-btn">
                                                        <svg class="heart" xmlns="http://www.w3.org/2000/svg"
                                                            viewBox="0 0 100 100" fill="none" stroke-width="5"
                                                            stroke-linecap="round" stroke-linejoin="round">
                                                            <path
                                                                d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                                                        </svg>

                                                    </button>
                                                    <div class="cart-btn" id="cartBtn">

                                                        <div class="counter-area">
                                                            <div class="minus-btn" id="minusBtn">−</div>
                                                            <div class="count-val" id="countVal">1</div>
                                                        </div>

                                                        <div class="plus-icon" id="plusIcon">
                                                            <svg width="20" height="20" viewBox="0 0 20 20">
                                                                <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e"
                                                                    stroke-width="2.5" stroke-linecap="round" id="vLine" />
                                                                <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e"
                                                                    stroke-width="2.5" stroke-linecap="round" id="hLine" />
                                                            </svg>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="info">
                                                    <div class="price-row">
                                                        <span class="price-now">₹249</span>
                                                        <span class="price-old">₹299</span>
                                                    </div>
                                                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                                                    <div class="qty-dropdown">
                                                        <button class="qty-selected" type="button">
                                                            <span class="selected-text">1 kg</span>
                                                            <i class="fas fa-chevron-down"></i>
                                                        </button>

                                                        <ul class="qty-menu">
                                                            <li data-value="1 kg" class="active">1 kg</li>
                                                            <li data-value="5 kg">5 kg</li>
                                                            <li data-value="10 kg">10 kg</li>
                                                            <li data-value="500 g">500 g</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <!-- Slide 3 -->
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="card product-card">
                                                <div class="img-area">
                                                    <div class="img-placeholder">
                                                        <img src="{{asset('assets/images/img/salt.png') }}"
                                                            alt="Product Image">
                                                    </div>
                                                    <span class="pro-orange-badge">17% Off</span>
                                                    <button class="wishlist-btn">
                                                        <svg class="heart" xmlns="http://www.w3.org/2000/svg"
                                                            viewBox="0 0 100 100" fill="none" stroke-width="5"
                                                            stroke-linecap="round" stroke-linejoin="round">
                                                            <path
                                                                d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                                                        </svg>

                                                    </button>
                                                    <div class="cart-btn" id="cartBtn">

                                                        <div class="counter-area">
                                                            <div class="minus-btn" id="minusBtn">−</div>
                                                            <div class="count-val" id="countVal">1</div>
                                                        </div>

                                                        <div class="plus-icon" id="plusIcon">
                                                            <svg width="20" height="20" viewBox="0 0 20 20">
                                                                <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e"
                                                                    stroke-width="2.5" stroke-linecap="round" id="vLine" />
                                                                <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e"
                                                                    stroke-width="2.5" stroke-linecap="round" id="hLine" />
                                                            </svg>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="info">
                                                    <div class="price-row">
                                                        <span class="price-now">₹249</span>
                                                        <span class="price-old">₹299</span>
                                                    </div>
                                                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                                                    <div class="qty-dropdown">
                                                        <button class="qty-selected" type="button">
                                                            <span class="selected-text">1 kg</span>
                                                            <i class="fas fa-chevron-down"></i>
                                                        </button>

                                                        <ul class="qty-menu">
                                                            <li data-value="1 kg" class="active">1 kg</li>
                                                            <li data-value="5 kg">5 kg</li>
                                                            <li data-value="10 kg">10 kg</li>
                                                            <li data-value="500 g">500 g</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <!-- Slide 4-->
                                        <div class="col-lg-3 col-md-4 col-6">
                                            <div class="card product-card">
                                                <div class="img-area">
                                                    <div class="img-placeholder">
                                                        <img src="{{asset('assets/images/img/biscuit.png') }}"
                                                            alt="Product Image">
                                                    </div>
                                                    <span class="pro-orange-badge">17% Off</span>
                                                    <button class="wishlist-btn">
                                                        <svg class="heart" xmlns="http://www.w3.org/2000/svg"
                                                            viewBox="0 0 100 100" fill="none" stroke-width="5"
                                                            stroke-linecap="round" stroke-linejoin="round">
                                                            <path
                                                                d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                                                        </svg>

                                                    </button>
                                                    <div class="cart-btn" id="cartBtn">

                                                        <div class="counter-area">
                                                            <div class="minus-btn" id="minusBtn">−</div>
                                                            <div class="count-val" id="countVal">1</div>
                                                        </div>

                                                        <div class="plus-icon" id="plusIcon">
                                                            <svg width="20" height="20" viewBox="0 0 20 20">
                                                                <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e"
                                                                    stroke-width="2.5" stroke-linecap="round" id="vLine" />
                                                                <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e"
                                                                    stroke-width="2.5" stroke-linecap="round" id="hLine" />
                                                            </svg>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="info">
                                                    <div class="price-row">
                                                        <span class="price-now">₹249</span>
                                                        <span class="price-old">₹299</span>
                                                    </div>
                                                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                                                    <div class="qty-dropdown">
                                                        <button class="qty-selected" type="button">
                                                            <span class="selected-text">1 kg</span>
                                                            <i class="fas fa-chevron-down"></i>
                                                        </button>

                                                        <ul class="qty-menu">
                                                            <li data-value="1 kg" class="active">1 kg</li>
                                                            <li data-value="5 kg">5 kg</li>
                                                            <li data-value="10 kg">10 kg</li>
                                                            <li data-value="500 g">500 g</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>



                                    <div class="wishlist-container-sec">

                                        <div class="icon-circle">
                                            <img src="{{ asset('assets/images/img/wish-icon.gif') }}" alt="wishlist-icon">
                                        </div>

                                        <h4 class="wishlist-title">Your Wishlist is Empty</h4>
                                        <p class="wishlist-text">
                                            Add products to your wishlist and shop them anytime with ease.
                                        </p>

                                        <a href="javascript:void(0);" class="btn btn-explore">Explore Chotekisan</a>

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

                            <div class="tab-pane fade" id="NotificationsPreferences">
                                <div class="container p-4 rounded-3 ">
                                    <div class="d-flex align-items-center mb-4">
                                        <i class="fa-solid fa-arrow-left fs-5 me-3"></i>
                                        <h2 class="h5 mb-0 tab-opt-title">Notifications Preference</h2>
                                    </div>

                                    <div
                                        class="d-flex align-items-center justify-content-between p-3 border rounded-3 mb-3">
                                        <div>
                                            <h6 class="mb-0 fw-medium text-black">WhatsApp Messages</h6>
                                            <small class="text-muted">Get updates from us on WhatsApp</small>
                                        </div>
                                        <label class="custom-toggle">
                                            <input type="checkbox" checked>
                                            <span class="slider green"></span>
                                        </label>
                                    </div>

                                    <div class="d-flex align-items-center justify-content-between p-3 border rounded-3">
                                        <div>
                                            <h6 class="mb-0 fw-medium text-black">Push Notifications</h6>
                                            <small class="text-muted">Turn on to get live order updates & offers</small>
                                        </div>
                                        <label class="custom-toggle">
                                            <input type="checkbox" checked>
                                            <span class="slider red"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="MyRewards">
                                <!-- <p>Content for MyRewards</p> -->
                            </div>

                            <div class="tab-pane fade" id="InviteFriends">
                                <div class="container bg-white p-0 rounded-4 overflow-hidden">

                                    <div id="referSection">
                                        <div class="refer-header p-4 text-center text-white position-relative">
                                            <span class="refer-arrow  position-absolute start-0 top-0">
                                                <i class="fa-solid fa-arrow-left fs-6"></i>
                                            </span>
                                            <span class="refer-faq position-absolute end-0 top-0">
                                                <i class="fa-regular  fa-circle-question fs-6" id="faqBtn"
                                                    style="cursor: pointer;"></i>

                                            </span>



                                            <div class="d-flex flex-column gap-3 align-items-center justify-content-center">
                                                <h2 class="h4 refe-title mt-3">Invite Your Friends & <br> Earn ₹000
                                                </h2>
                                                <img src="{{asset('assets/images/img/gift.png') }}" alt="Gift" class="my-3"
                                                    style="width: 80px;">

                                                <div class="refer-link-container d-flex align-items-center gap-4 p-2 rounded-3 mx-auto"
                                                    style="max-width: 90%;">
                                                    <div class="text-start ref-email-sec ps-2">
                                                        <small class="d-block opacity-75">Your Referral
                                                            Code</small>
                                                        <span class="fw-medium small">www.yourapp.com/parthi100</span>
                                                    </div>
                                                    <button class="btn ref-copy-sec rounded-3 py-1 px-2 border-0">
                                                        <small class="d-block opacity-75 ">Copy</small>
                                                        <span>
                                                            <img src="{{asset('assets/images/img/copy.svg') }}" width="20"
                                                                alt="Copy Icon">
                                                        </span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="p-3">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <span class="fw-bold">My Referalls</span>
                                                <span class="text-grey  small fw-medium">Total : <span
                                                        class="fw-bold small">₹000</span></span>
                                            </div>

                                            <div
                                                class="referral-item d-flex align-items-center justify-content-between py-3 border-bottom">
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar me-3">P</div>
                                                    <div>
                                                        <p class="mb-0 fw-bold small">Nisho</p>
                                                        <small class=" text-grey">Reward
                                                            Earned</small>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <p class="mb-0 fw-bold small">₹000</p>
                                                    <small class=" text-grey">2 hrs ago</small>
                                                </div>
                                            </div>
                                            <div
                                                class="referral-item d-flex align-items-center justify-content-between py-3 border-bottom">
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar me-3">P</div>
                                                    <div>
                                                        <p class="mb-0 fw-bold small">Nisho</p>
                                                        <small class=" text-grey">Reward
                                                            Earned</small>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <p class="mb-0 fw-bold small">₹000</p>
                                                    <small class=" text-grey">2 hrs ago</small>
                                                </div>
                                            </div>
                                            <div
                                                class="referral-item d-flex align-items-center justify-content-between py-3 border-bottom">
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar me-3">P</div>
                                                    <div>
                                                        <p class="mb-0 fw-bold small">Nisho</p>
                                                        <small class=" text-grey">Reward
                                                            Earned</small>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <p class="mb-0 fw-bold small">₹000</p>
                                                    <small class=" text-grey">2 hrs ago</small>
                                                </div>
                                            </div>
                                            <div
                                                class="referral-item d-flex align-items-center justify-content-between py-3 border-bottom">
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar me-3">P</div>
                                                    <div>
                                                        <p class="mb-0 fw-bold small">Nisho</p>
                                                        <small class=" text-grey">Reward
                                                            Earned</small>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <p class="mb-0 fw-bold small">₹000</p>
                                                    <small class=" text-grey">2 hrs ago</small>
                                                </div>
                                            </div>
                                            <div
                                                class="referral-item d-flex align-items-center justify-content-between py-3 border-bottom">
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar me-3">P</div>
                                                    <div>
                                                        <p class="mb-0 fw-bold small">Nisho</p>
                                                        <small class=" text-grey">Reward
                                                            Earned</small>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <p class="mb-0 fw-bold small">₹000</p>
                                                    <small class=" text-grey">2 hrs ago</small>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="p-3 bg-white border-top invite-btn-sec mt-5">
                                            <button class="btn invite-btn  py-2 fw-bold rounded-3">Invite
                                                Friends</button>
                                        </div>
                                    </div>

                                    <div id="faqSection" class="d-none" style="max-width:500px">
                                        <div class="p-4">
                                            <div class="d-flex align-items-center mb-4">
                                                <i class="fa-solid fa-arrow-left fs-5 me-3" id="backToRefer"
                                                    style="cursor: pointer;"></i>
                                                <h2 class="h5 mb-0 tab-opt-title">FAQ</h2>
                                            </div>

                                            <div class="faq-list border rounded-3 overflow-hidden">

                                                <div class="faq-item border-bottom">
                                                    <button class="faq-btn" type="button">
                                                        <span>What is Refer &amp; Earn?</span>
                                                        <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                    </button>

                                                    <div class="faq-content show">
                                                        <p>
                                                            Refer &amp; Earn allows you to invite your friends to the app.
                                                            When your friend signs up and places their first order, you earn
                                                            rewards.
                                                        </p>
                                                    </div>
                                                </div>

                                                <div class="faq-item border-bottom">
                                                    <button class="faq-btn" type="button">
                                                        <span>How do I invite friends?</span>
                                                        <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                    </button>

                                                    <div class="faq-content">
                                                        <p class="text-grey">
                                                            Tap the referral section, copy your invite code, and share it
                                                            with your friends.
                                                        </p>
                                                    </div>
                                                </div>

                                                <div class="faq-item  border-bottom">
                                                    <button class="faq-btn" type="button">
                                                        <span>Who can I invite?</span>
                                                        <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                    </button>

                                                    <div class="faq-content">
                                                        <p class="text-grey">
                                                            You can invite any friend who has not already registered on the
                                                            app.
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="faq-item  border-bottom">
                                                    <button class="faq-btn" type="button">
                                                        <span>Why didn’t I receive my reward?</span>
                                                        <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                    </button>

                                                    <div class="faq-content">
                                                        <p class="text-grey">
                                                            You can invite any friend who has not already registered on the
                                                            app.
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="faq-item  border-bottom">
                                                    <button class="faq-btn" type="button">
                                                        <span>When will I get my reward?</span>
                                                        <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                    </button>

                                                    <div class="faq-content">
                                                        <p class="text-grey">
                                                            You can invite any friend who has not already registered on the
                                                            app.
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="faq-item">
                                                    <button class="faq-btn" type="button">
                                                        <span>Where can I check my rewards?</span>
                                                        <i class="fa-solid fa-chevron-right faq-icon"></i>
                                                    </button>

                                                    <div class="faq-content">
                                                        <p class="text-grey">
                                                            You can invite any friend who has not already registered on the
                                                            app.
                                                        </p>
                                                    </div>
                                                </div>

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

                                </div>
                            </div>

                            <div class="tab-pane fade" id="PrivacyandPolicy">
                                <section class="policy-card">
                                    <div class="d-flex align-items-center mb-4">
                                        <i class="fa-solid fa-arrow-left fs-5 me-3" id="backToRefer"
                                            style="cursor: pointer;"></i>
                                        <h2 class="h5 mb-0 tab-opt-title">Privacy and Policy</h2>
                                    </div>

                                    <h2 class="policy-title">Privacy Policy</h2>
                                    <p class="policy-date">last Updated in January, 2026</p>

                                    <p class="policy-text">
                                        Welcome to <b><span class="text-black">chote</span><span
                                                class="brand">kisan</span></b> Your privacy is important to us.
                                        This Privacy Policy explains how we collect, use, and protect your personal
                                        information
                                        when you use our mobile application.
                                    </p>

                                    <h3 class="policy-subtitle">Information We Collect</h3>

                                    <ul class="policy-list">
                                        <li>Personal Information: Name, phone number, email</li>
                                        <li>Address Details: Delivery address and location</li>
                                        <li>Payment Information: UPI / card details</li>
                                        <li>Usage Data: App activity, preferences, and interactions</li>
                                    </ul>

                                    <h3 class="policy-subtitle">How We Use Your Information</h3>

                                    <ul class="policy-list">
                                        <li>Process and deliver your orders</li>
                                        <li>Provide customer support</li>
                                        <li>Improve app performance and user experience</li>
                                        <li>Send updates, offers, and notifications</li>
                                        <li>Ensure secure transactions</li>
                                    </ul>
                                </section>
                            </div>

                            <div class="tab-pane fade" id="TermsandConditions">
                                <section class="terms-card">
                                    <div class="d-flex align-items-center mb-4">
                                        <i class="fa-solid fa-arrow-left fs-5 me-3" id="backToRefer"
                                            style="cursor: pointer;"></i>
                                        <h2 class="h5 mb-0 tab-opt-title">Terms &amp; Conditions</h2>
                                    </div>
                                    <h2 class="terms-title">Terms &amp; Conditions</h2>
                                    <p class="terms-date">last Updated in January, 2026</p>

                                    <p class="terms-text">
                                        By using <b><span class="text-black">chote</span><span
                                                class="brand">kisan</span></b>, you agree to these terms and
                                        conditions.
                                        Please read them carefully before placing an order, as they govern your use of our
                                        services,
                                        including orders, payments, and deliveries.
                                    </p>

                                    <h3 class="terms-subtitle">Using Our Service</h3>
                                    <ul class="terms-list">
                                        <li>You must provide accurate details (name, address, contact).</li>
                                        <li>Orders are subject to availability.</li>
                                        <li>Prices and offers may change without prior notice.</li>
                                    </ul>

                                    <h3 class="terms-subtitle">Payments</h3>
                                    <ul class="terms-list">
                                        <li>Payments can be made via UPI, cards, or COD (if available)</li>
                                        <li>All payments are processed securely through trusted partners</li>
                                    </ul>

                                    <h3 class="terms-subtitle">Cancellations &amp; Refunds</h3>
                                    <ul class="terms-list">
                                        <li>Orders can be cancelled before dispatch</li>
                                        <li>Perishable items are non-returnable</li>
                                        <li>Refunds are provided for damaged or incorrect items</li>
                                    </ul>
                                </section>
                            </div>

                            <div class="tab-pane fade" id="ReturnPolicy">
                                <section class="return-card">
                                    <div class="d-flex align-items-center mb-4">
                                        <i class="fa-solid fa-arrow-left fs-5 me-3" id="backToRefer"
                                            style="cursor: pointer;"></i>
                                        <h2 class="h5 mb-0 tab-opt-title">Return Policy</h2>
                                    </div>
                                    <h2 class="return-title">Return Policy</h2>
                                    <p class="return-date">last Updated in January, 2026</p>

                                    <p class="return-text">
                                        At <b><span class="text-black">chote</span><span class="brand">kisan</span></b>, we
                                        strive to deliver fresh and
                                        high-quality
                                        products to your doorstep. Due to the perishable nature of grocery items such as
                                        fruits,
                                        vegetables, dairy, and frozen products, these items are non-returnable.

                                        However, if you receive a damaged, spoiled, incorrect, or missing item, you can
                                        request
                                        a refund within 24 hours of delivery by providing relevant details or images for
                                        verification.

                                        Once approved, the refund will be processed to your original payment method and may
                                        take
                                        5–7 business days to reflect.

                                        Orders can be cancelled before dispatch, but cancellations may not be possible once
                                        the
                                        order is shipped.

                                        For any issues or assistance, you can contact our support team through the app or
                                        via email.
                                    </p>
                                </section>
                            </div>

                        </div>
                        {{-- Tab Second End --}}
                    </div>
                </div>
            </div>
        </div>
    </section>



@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const $doc = $(document);

    /* Select2 */
    $('.select2-common').select2({
        minimumResultsForSearch: Infinity,
        width: 'style'
    });

    /* Helpers */
    const getEl = (selector) => document.querySelector(selector);
    const getAll = (selector) => document.querySelectorAll(selector);
    const hide = (el) => el?.classList.add('d-none');
    const show = (el) => el?.classList.remove('d-none');
    const toggleActive = (el) => el?.classList.toggle('active');
    const removeActive = (el) => el?.classList.remove('active');

    /* Other reason textarea */
    const otherReasonBox = getEl('#otherReasonBox');

    getAll('input[name="reason"]').forEach((radio) => {
        radio.addEventListener('change', function () {
            this.value === 'others' ? show(otherReasonBox) : hide(otherReasonBox);
        });
    });

    /* Wishlist toggle */
    getAll('.wishlist-btn').forEach((btn) => {
        btn.addEventListener('click', () => toggleActive(btn));
    });

    /* Toast */
    const toastEl = getEl('#successToast');
    const submitRequestBtn = getEl('#submit-Request');

    if (toastEl && submitRequestBtn) {
        const toast = new bootstrap.Toast(toastEl, { delay: 2000 });

        submitRequestBtn.addEventListener('click', () => {
            toast.show();
        });
    }

    /* Custom dropdown */
    window.toggleDropdown = function (button) {
        const currentDropdown = button.closest('.custom-dropdown');

        getAll('.custom-dropdown').forEach((dropdown) => {
            if (dropdown !== currentDropdown) removeActive(dropdown);
        });

        toggleActive(currentDropdown);
    };

    document.addEventListener('click', (e) => {
        if (!e.target.closest('.custom-dropdown')) {
            getAll('.custom-dropdown').forEach(removeActive);
        }
    });

    /* Manual tabs */
    const tabs = getAll('#My-Order-tab-first .nav-link, #My-Order-tab .nav-link');
    const panes = getAll('#My-Order-tab-first-content .tab-pane, #My-Order-tab-content .tab-pane');

    tabs.forEach((tab) => {
        tab.addEventListener('click', function (e) {
            e.preventDefault();

            const targetPane = getEl(this.dataset.bsTarget);

            tabs.forEach(removeActive);
            panes.forEach((pane) => pane.classList.remove('show', 'active'));

            this.classList.add('active');
            targetPane?.classList.add('show', 'active');
        });
    });

    /* Floating input validation */
    window.handleInput = function (inputId, wrapperId) {
        const input = document.getElementById(inputId);
        const wrapper = document.getElementById(wrapperId);

        if (!input || !wrapper) return;

        wrapper.classList.toggle('filled', input.value.trim().length > 0);
        validateForm();
    };

    window.validateForm = function () {
        const name = getEl('#name')?.value.trim() || '';
        const mobile = getEl('#mobile')?.value.trim() || '';
        const email = getEl('#email')?.value.trim() || '';
        const updateBtn = getEl('#updateBtn');

        if (!updateBtn) return;

        updateBtn.disabled = !(name && mobile.length === 10 && email);
    };

    /* Refer / FAQ section toggle */
    const referSection = getEl('#referSection');
    const faqSection = getEl('#faqSection');

    getEl('#faqBtn')?.addEventListener('click', () => {
        hide(referSection);
        show(faqSection);
    });

    getEl('#backToRefer')?.addEventListener('click', () => {
        hide(faqSection);
        show(referSection);
    });

    /* Help section switch */
    const helpSections = ['mainSection', 'orderSection', 'paymentSection', 'couponSection'];

    window.showSection = function (sectionId) {
        helpSections.forEach((id) => hide(document.getElementById(id)));
        show(document.getElementById(sectionId));
    };

    /* FAQ accordion */
    getAll('.faq-btn').forEach((btn) => {
        btn.addEventListener('click', function () {
            const currentItem = this.closest('.faq-item');

            getAll('.faq-item').forEach((item) => {
                if (item !== currentItem) removeActive(item);
            });

            toggleActive(currentItem);
        });
    });

    /* Mobile number input protection */
    const mobileInput = getEl('#mobile');

    if (mobileInput) {
        mobileInput.addEventListener('wheel', (e) => {
            e.preventDefault();
        }, { passive: false });

        mobileInput.addEventListener('keydown', (e) => {
            if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
                e.preventDefault();
            }
        });
    }

    /* Quantity dropdown */
    getAll('.qty-dropdown').forEach((dropdown) => {
        const button = dropdown.querySelector('.qty-selected');
        const selectedText = dropdown.querySelector('.selected-text');
        const items = dropdown.querySelectorAll('.qty-menu li');

        if (!button || !selectedText) return;

        button.addEventListener('click', (e) => {
            e.stopPropagation();

            getAll('.qty-dropdown').forEach((item) => {
                if (item !== dropdown) removeActive(item);
            });

            toggleActive(dropdown);
        });

        items.forEach((item) => {
            item.addEventListener('click', () => {
                items.forEach(removeActive);

                item.classList.add('active');
                selectedText.textContent = item.dataset.value || item.textContent.trim();
                removeActive(dropdown);
            });
        });
    });

    document.addEventListener('click', () => {
        getAll('.qty-dropdown').forEach(removeActive);
    });
});
</script>
@endsection