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

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

@section('content')

<section class="my-orders-main py-5">
    <div class="container-fluid px-5">
        <div class="row g-3">
            <div class="col-lg-4">
                {{-- inner row start --}}
                <div class="row g-3">
                    <div class="col-12">
                        <div class="border-card">
                            <div class="border-card-header p-3">
                                {{-- inner profile row start --}}
                                <div class="row g-3 align-items-center">
                                    <div class="col-3">
                                        <div class="user-profile">
                                            <img src="{{ asset('assets/images/img/user-image.png') }}" alt="User-Image">
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <div class="user-name-content">
                                            <h5>Nisho</h5>
                                            <p class="mb-0">+91 9754689183</p>
                                        </div>
                                    </div>
                                </div>
                                {{-- inner profile row end --}}
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="border-card">
                            {{-- tab header start --}}
                            <ul class="nav nav-tabs myorders-tab-header flex-column p-2" id="My-Order-tab" role="tablist">

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#OrderDetails" type="button">
                                        <img src="{{ asset('assets/images/img/tab-shopping-bag.svg') }}" class="order-tab-icon" alt="icon">
                                        <span>Order Details</span>
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#MyWishlist" type="button">
                                        <img src="{{ asset('assets/images/img/tab-heart.svg') }}" class="order-tab-icon" alt="icon">
                                        <span>My Wishlist</span>
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#NotificationsPreferences" type="button">
                                        <img src="{{ asset('assets/images/img/tab-notification-bing.svg') }}" class="order-tab-icon" alt="icon">
                                        <span>Notifications Preferences</span>
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#MyAddress" type="button">
                                        <img src="{{ asset('assets/images/img/tab-map-pinned.svg') }}" class="order-tab-icon" alt="icon">
                                        <span>My Address</span>
                                    </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#CustomerService" type="button">
                                        <img src="{{ asset('assets/images/img/tab-message-square-text.svg') }}" class="order-tab-icon" alt="icon">
                                        <span>Customer Service</span>
                                    </button>
                                </li>

                            </ul>
                            {{-- tab header end --}}
                        </div>
                    </div>
                </div>
                {{-- inner row end --}}
            </div>
            <div class="col-lg-8">
                <div class="border-card h-100">
                    <div class="tab-content">

                        <div class="tab-pane fade show active" id="OrderDetails">

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

                            {{-- product List empty Show this Start --}}
                            <div class="d-block" id="Product_List_Empty">
                                <div class="tab-content-center">
                                    <div class="ops-image-container mb-2">
                                        <img src="{{ asset('assets/images/img/ops-cat.gif') }}" alt="ops-image">
                                    </div>
                                    <h6 class="tab-order-title">No Orders Yet</h6>
                                    <p class="tab-order-para w-50 text-center">From groceries to everyday essentials — everything in one place. Start shopping now!</p>

                                    <a href="javascript:void(0)" class="primary-green-btn Explore-flow">Explore Chotekisan</a>
                                </div>
                            </div>
                            {{-- Product List empty end --}}

                            {{-- Product List Start --}}
                            <div class="d-none" id="Product_List">
                                <div class="tab-order-header d-flex align-items-center justify-content-between p-4">
                                    <a href="javascript:void(0)" class="Back-flow 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">My Order</h5>
                                    </a>

                                    <div class="d-flex align-items-center gap-3">
                                       <div class="search-expand-wrap">
                                            <input type="text"
                                                class="expand-search-input"
                                                placeholder="Search products...">
                                            <div class="search-toggle">
                                                <img src="{{ asset('assets/images/icon/searchbar-outline.svg') }}" alt="Search">
                                            </div>
                                        </div>
                                        <select class="select2-common" style="width: 140px;">
                                            <option>Order type</option>
                                            <option>Pending</option>
                                            <option>Completed</option>
                                            <option>Cancelled</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="tab-order-content px-4 py-0">
                                    {{-- card satrt --}}
                                    <div class="border-card mb-3">
                                        <div class="order-card-header p-3">
                                            <div>
                                                <h6 class="card-order-title mb-1">Ordered</h6>
                                                <p class="card-order-para mb-0">Ordered: 23rd January 2026, 08:42 PM</p>
                                            </div>
                                            <div class="order-price-flex">
                                                <h6 class="Tab-Price-Flow tab-order-title mb-0">₹000</h6>
                                                <a href="javascript:void(0);">
                                                    <img src="{{ asset('assets/images/icon/next-page-arrow.svg') }}" alt="Arrow Right">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="order-card-content p-3">
                                            {{-- inner row start --}}
                                            <div class="row justify-content-between align-items-end">
                                                <div class="col-9">
                                                    <div class="order-card-list">
                                                        {{-- inner row start --}}
                                                        <div class="row g-3">
                                                            <div class="col-3">
                                                                <div class="order-card">
                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="order-card">
                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="order-card">
                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="product-count">
                                                                    <h6>+5 Items</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        {{-- inner row end --}}
                                                    </div>
                                                </div>
                                                <div class="col-3">
                                                    <div class="text-end">
                                                        <a href="javascript:void(0)" class="secondary-green-btn">Order Again</a>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- inner row end --}}
                                        </div>
                                    </div>
                                    {{-- card end --}}

                                    {{-- card satrt --}}
                                    <div class="border-card mb-3">
                                        <div class="order-card-header p-3">
                                            <div>
                                                <h6 class="card-order-title mb-1">Ordered</h6>
                                                <p class="card-order-para mb-0">Ordered: 23rd January 2026, 08:42 PM</p>
                                            </div>
                                            <div class="order-price-flex">
                                                <h6 class="Tab-Price-Flow tab-order-title mb-0">₹000</h6>
                                                <a href="javascript:void(0);">
                                                    <img src="{{ asset('assets/images/icon/next-page-arrow.svg') }}" alt="Arrow Right">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="order-card-content p-3">
                                            {{-- inner row start --}}
                                            <div class="row justify-content-between align-items-end">
                                                <div class="col-9">
                                                    <div class="order-card-list">
                                                        {{-- inner row start --}}
                                                        <div class="row g-3">
                                                            <div class="col-3">
                                                                <div class="order-card">
                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="order-card">
                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="order-card">
                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="product-count">
                                                                    <h6>+5 Items</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        {{-- inner row end --}}
                                                    </div>
                                                </div>
                                                <div class="col-3">
                                                    <div class="text-end">
                                                        <a href="javascript:void(0)" class="secondary-green-btn">Order Again</a>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- inner row end --}}
                                        </div>
                                    </div>
                                    {{-- card end --}}

                                    {{-- card satrt --}}
                                    <div class="border-card mb-3">
                                        <div class="order-card-header p-3">
                                            <div>
                                                <h6 class="card-order-title mb-1">Ordered</h6>
                                                <p class="card-order-para mb-0">Ordered: 23rd January 2026, 08:42 PM</p>
                                            </div>
                                            <div class="order-price-flex">
                                                <h6 class="Tab-Price-Flow tab-order-title mb-0">₹000</h6>
                                                <a href="javascript:void(0);">
                                                    <img src="{{ asset('assets/images/icon/next-page-arrow.svg') }}" alt="Arrow Right">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="order-card-content p-3">
                                            {{-- inner row start --}}
                                            <div class="row justify-content-between align-items-end">
                                                <div class="col-9">
                                                    <div class="order-card-list">
                                                        {{-- inner row start --}}
                                                        <div class="row g-3">
                                                            <div class="col-3">
                                                                <div class="order-card">
                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="order-card">
                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="order-card">
                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="product-count">
                                                                    <h6>+5 Items</h6>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        {{-- inner row end --}}
                                                    </div>
                                                </div>
                                                <div class="col-3">
                                                    <div class="text-end">
                                                        <a href="javascript:void(0)" class="secondary-green-btn">Order Again</a>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- inner row end --}}
                                        </div>
                                    </div>
                                    {{-- card end --}}
                                </div>
                            </div>
                            {{-- Product List End --}}

                            {{-- Product Order Placed Start --}}
                            <div class="d-none" id="Product_Order_Placed">
                                <div class="tab-order-header d-flex align-items-center justify-content-between p-4">
                                    <a href="javascript:void(0)" class="Back-flow 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">Order</span> #1234567890</h5>
                                    </a>

                                    <div class="d-flex align-items-center gap-3">
                                        {{-- Change status order-yellow / order-blue / order-red / order-violet / order-green --}}
                                        <h6 class="order-status order-yellow">Ordered</h6>
                                    </div>
                                </div>

                                <div class="tab-order-content px-4 py-0">
                                    {{-- inner row satrt --}}
                                        <div class="row">
                                            <div class="col-lg-6">
                                                {{-- Product Details start --}}
                                                <div class="mb-2">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <h6 class="card-title-main">Product Details</h6>
                                                        <h6 class="card-count-main">5 items</h6>
                                                    </div>
                                                    <div class="border-card mb-3 p-3">
                                                        <div class="row g-3 flex-column">
                                                            {{-- Product-card start --}}
                                                            <div class="col-12">
                                                                <div class="border-card p-2">
                                                                    <div class="row g-2 align-items-end">
                                                                        <div class="col-9">
                                                                            <div class="d-flex flex-row align-items-center gap-2">
                                                                                <div class="order-card-mini">
                                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                                </div>
                                                                                <div class="order-product-info">
                                                                                    <h6>Tata Salt Iodized</h6>
                                                                                    <p>500g X 1</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-3">
                                                                            <div class="order-product-price d-flex gap-1 align-items-center">
                                                                                <h6 class="mb-0 fw-bold">₹45</h6>
                                                                                <p class="mb-0 text-decoration-line-through text-muted ">₹90</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {{-- Product-card end --}}
                                                            {{-- Product-card start --}}
                                                            <div class="col-12">
                                                                <div class="border-card p-2">
                                                                    <div class="row g-2 align-items-end">
                                                                        <div class="col-9">
                                                                            <div class="d-flex flex-row align-items-center gap-2">
                                                                                <div class="order-card-mini">
                                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                                </div>
                                                                                <div class="order-product-info">
                                                                                    <h6>Tata Salt Iodized</h6>
                                                                                    <p>500g X 1</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-3">
                                                                            <div class="order-product-price d-flex gap-1 align-items-center">
                                                                                <h6 class="mb-0 fw-bold">₹45</h6>
                                                                                <p class="mb-0 text-decoration-line-through text-muted ">₹90</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {{-- Product-card end --}}
                                                            {{-- Product-card start --}}
                                                            <div class="col-12">
                                                                <div class="border-card p-2">
                                                                    <div class="row g-2 align-items-end">
                                                                        <div class="col-9">
                                                                            <div class="d-flex flex-row align-items-center gap-2">
                                                                                <div class="order-card-mini">
                                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                                </div>
                                                                                <div class="order-product-info">
                                                                                    <h6>Tata Salt Iodized</h6>
                                                                                    <p>500g X 1</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-3">
                                                                            <div class="order-product-price d-flex gap-1 align-items-center">
                                                                                <h6 class="mb-0 fw-bold">₹45</h6>
                                                                                <p class="mb-0 text-decoration-line-through text-muted ">₹90</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {{-- Product-card end --}}
                                                            {{-- Product-card start --}}
                                                            <div class="col-12">
                                                                <div class="border-card p-2">
                                                                    <div class="row g-2 align-items-end">
                                                                        <div class="col-9">
                                                                            <div class="d-flex flex-row align-items-center gap-2">
                                                                                <div class="order-card-mini">
                                                                                    <img src="{{ asset('assets/images/img/product-1.png') }}" alt="Product">
                                                                                </div>
                                                                                <div class="order-product-info">
                                                                                    <h6>Tata Salt Iodized</h6>
                                                                                    <p>500g X 1</p>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-3">
                                                                            <div class="order-product-price d-flex gap-1 align-items-center">
                                                                                <h6 class="mb-0 fw-bold">₹45</h6>
                                                                                <p class="mb-0 text-decoration-line-through text-muted ">₹90</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {{-- Product-card end --}}
                                                        </div>
                                                    </div>
                                                </div>
                                                {{-- Product Details end --}}

                                                {{-- Track your Order start --}}
                                                <div class="mb-2">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <h6 class="card-title-main">Track your Order</h6>

                                                    </div>
                                                    <div class="border-card mb-3 p-3">
                                                        {{-- if Stage is Active add in class "stage-active" changeing style --}}
                                                        {{-- Next, add "stage-completed" previous li class to maintain the style --}}
                                                        <ul class="ps-0 mb-0">
                                                            <li class="stage-completed" id="Order-Placed">
                                                                <div class="row g-2 mt-0 p-2">
                                                                    <div class="col-1">
                                                                        <div class="order_icons">
                                                                            <img class="active_icon" src="{{ asset('assets/images/icon/order-confirmed-tick.svg') }}" alt="icon">
                                                                            <img class="inactive_icon" src="{{ asset('assets/images/icon/order-confirmed-tick-empty.svg') }}" alt="icon">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-11">
                                                                        <h6>Order Placed</h6>
                                                                        <p>Your order has been placed. Wed, 22 Apr • 10:30 AM</p>
                                                                    </div>
                                                                </div>
                                                            </li>

                                                            <li class="stage-completed" id="Order-Confirmed">
                                                                <div class="row g-2 mt-0 p-2">
                                                                    <div class="col-1">
                                                                        <div class="order_icons">
                                                                            <img class="active_icon" src="{{ asset('assets/images/icon/order-confirmed-tick-blue.svg') }}" alt="icon">
                                                                            <img class="inactive_icon" src="{{ asset('assets/images/icon/order-confirmed-tick-empty.svg') }}" alt="icon">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-11">
                                                                        <h6>Order Confirmed</h6>
                                                                        <p>Your order has been confirmed. Thu, 23 Apr • 9:15 AM</p>
                                                                    </div>
                                                                </div>
                                                            </li>

                                                            <li class="stage-completed" id="Out-For-Delivery">
                                                                <div class="row g-2 mt-0 p-2">
                                                                    <div class="col-1">
                                                                        <div class="order_icons">
                                                                            <img class="active_icon" src="{{ asset('assets/images/icon/order-confirmed-tick-violet.svg') }}" alt="icon">
                                                                            <img class="inactive_icon" src="{{ asset('assets/images/icon/order-confirmed-tick-empty.svg') }}" alt="icon">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-11">
                                                                        <h6>Out For Delivery</h6>
                                                                        <p>Your order is out for delivery. Expected today</p>
                                                                    </div>
                                                                </div>
                                                            </li>

                                                            <li class="stage-active" id="Delivered">
                                                                <div class="row g-2 mt-0 p-2">
                                                                    <div class="col-1">
                                                                        <div class="order_icons">
                                                                            <img class="active_icon" src="{{ asset('assets/images/icon/order-confirmed-tick-green.svg') }}" alt="icon">
                                                                            <img class="inactive_icon" src="{{ asset('assets/images/icon/order-confirmed-tick-empty.svg') }}" alt="icon">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-11">
                                                                        <h6>Delivered</h6>
                                                                        <p>Your order will be delivered by Fri, 24 Apr • 11:00 PM</p>
                                                                    </div>
                                                                </div>
                                                            </li>

                                                            {{-- show in order cancell --}}
                                                            <li class="stage-active" id="Order-Cancelled">
                                                                <div class="row g-2 mt-0 p-2">
                                                                    <div class="col-1">
                                                                        <div class="order_icons">
                                                                            <img class="active_icon" src="{{ asset('assets/images/icon/order-confirmed-tick-red.svg') }}" alt="icon">
                                                                            <img class="inactive_icon" src="{{ asset('assets/images/icon/order-confirmed-tick-empty.svg') }}" alt="icon">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-11">
                                                                        <h6>Order Cancelled</h6>
                                                                        <p>Your order was cancelled on Wed, 22 Apr • 11:15 AM</p>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                {{-- Track your Order end --}}
                                            </div>

                                            <div class="col-lg-6">
                                                {{-- Bill Summary start --}}
                                                <div class="mb-2">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <h6 class="card-title-main">Bill Summary</h6>

                                                    </div>
                                                    <div class="border-card mb-3 p-3">
                                                        <div>
                                                            <div class="row g-3">
                                                                <div class="col-6"><p class="bill-info-left">Item Total</p></div>
                                                                <div class="col-6"><p class="bill-info-right">₹000</p></div>

                                                                <div class="col-6"><p class="bill-info-left">Discount</p></div>
                                                                <div class="col-6"><p class="bill-info-right txt-green">-₹100</p></div>

                                                                <div class="col-6"><p class="bill-info-left">Delivery Fee</p></div>
                                                                <div class="col-6"><p class="bill-info-right">FREE</p></div>

                                                                <div class="col-6"><p class="bill-info-left">Handling Charge</p></div>
                                                                <div class="col-6"><p class="bill-info-right">₹04</p></div>
                                                            </div>
                                                            <div class="border-top pt-2 mt-2">
                                                                <div class="row g-3">
                                                                    <div class="col-6"><p class="bill-info-left fw-bold txt-black">Total Amount</p></div>
                                                                    <div class="col-6"><p class="bill-info-right fw-bold text-black">₹000</p></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{-- Bill Summary end --}}

                                                {{-- Download btn if Order Is Completed Start --}}
                                                <div class="mb-4">
                                                    <button class="warning-yellow-btn d-flex align-items-center gap-2 justify-content-center w-100">
                                                        Download Invoice
                                                        <img src="{{ asset('assets/images/icon/download-icon.svg') }}" alt="icon">
                                                    </button>
                                                </div>
                                                {{-- Download btn if Order Is Completed End --}}

                                                {{-- Order Details start --}}
                                                <div class="mb-2">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <h6 class="card-title-main">Order Details</h6>
                                                    </div>
                                                    <div class="border-card mb-3 p-3">
                                                        <div class="row flex-column g-3">
                                                            <div class="col-12">
                                                                <p class="bill-info-left">Order Id</p>
                                                                <p class="bill-info-left fw-bold txt-black">#1234567890</p>
                                                            </div>

                                                            <div class="col-12">
                                                                <p class="bill-info-left">Payment Status</p>
                                                                <p class="bill-info-left fw-bold txt-black">Cash on Delivery</p>
                                                            </div>

                                                            <div class="col-12">
                                                                <p class="bill-info-left">Delivery to</p>
                                                                <p class="bill-info-left fw-bold txt-black">Parthi, 123 Main St, Apt 4, Coimbatore, 641001</p>
                                                            </div>

                                                            <div class="col-12">
                                                                <p class="bill-info-left">Order Placed</p>
                                                                <p class="bill-info-left fw-bold txt-black">23rd January 2026, 08:42 PM</p>
                                                            </div>

                                                            <div class="col-12">
                                                                <p class="bill-info-left">Order Delivered</p>
                                                                <p class="bill-info-left fw-bold txt-black">-</p>
                                                            </div>

                                                            <div class="col-12">
                                                                <div class="order-details d-flex align-items-center gap-3">
                                                                    <button class="order-status order-red border-0" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">Order Cancel</button>
                                                                </div>
                                                            </div>

                                                            <div class="col-12">
                                                                <button class="primary-green-btn w-100 mt-3" data-bs-toggle="modal" data-bs-target="#orderSuccessModal">Order Again</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{-- Order Details end --}}
                                            </div>

                                        </div>
                                    {{-- inner row end --}}
                                </div>
                            </div>
                            {{-- Product Order Placed End --}}
                        </div>

                        <div class="tab-pane fade" id="MyWishlist">
                            <div class="container">
    <div class="wishlist-container-sec">

        <div class="icon-circle">
            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"></path>
                <line x1="3" y1="6" x2="21" y2="6"></line>
                <path d="M16 10a4 4 0 0 1-8 0"></path>
            </svg>
        </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="#" class="btn btn-explore">Explore Chotekisan</a>

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

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

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

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

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


{{-- Cancel Order Modal start --}}
<div class="modal fade" id="cancelOrderModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content cancel-modal">

      {{-- Header --}}
      <div class="modal-header border-0">
        <div class="modal-title d-flex align-items-center gap-2" data-bs-dismiss="modal">
            <img src="{{asset('assets/images/icon/login-arrow-left.svg')}}" alt="Arrow">
            Cancel Order
        </div>
        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
      </div>

      {{-- Content --}}
      <div class="modal-body pt-0">
          <div class="reason-box">
            <h6 class="mb-3">Select Reason <span class="text-danger">*</span></h6>

            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="reason" id="r1" checked>
                <label class="form-check-label" for="r1">Ordered by mistake</label>
            </div>

            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="reason" id="r2">
                <label class="form-check-label" for="r2">Changed my mind</label>
            </div>

            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="reason" id="r3">
                <label class="form-check-label" for="r3">Found a better price</label>
            </div>

            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="reason" id="r4">
                <label class="form-check-label" for="r4">Delivery taking too long</label>
            </div>

            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="reason" id="r5">
                <label class="form-check-label" for="r5">Wrong items selected</label>
            </div>

            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="reason" id="r6" value="others">
                <label class="form-check-label" for="r6">Others</label>
            </div>

            <!-- Hidden textarea -->
            <div id="otherReasonBox" class="mt-2 d-none">
                <textarea class="form-control" rows="3" placeholder="Enter your reason here..."></textarea>
            </div>
        </div>
      </div>

      {{-- Footer --}}
      <div class="modal-footer footer-btn border-0 d-flex ">
        <button class="secondary-green-btn" data-bs-dismiss="modal">
          Keep Order
        </button>
        <button id="submit-Request" class="primary-green-btn">
          Submit Request
        </button>
      </div>

    </div>
  </div>
</div>
{{-- Cancel Order Modal end --}}

{{-- Cancel Order toast start --}}
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
  <div id="successToast" class="toast order-custom-toast align-items-center border-0" role="alert">
    <div class="d-flex">
      <div class="toast-body">
        Cancel Request submitted Successfully
      </div>
    </div>
  </div>
</div>
{{-- Cancel Order toast end --}}

{{-- Order Success Modal Start --}}
<div class="modal fade" id="orderSuccessModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered order-success-dialog">
    <div class="modal-content order-success-modal">

      <div class="modal-body text-center">
        <div class="order-success-icon my-4 mt-2">
          <img src="{{ asset('assets/images/icon/tick-scs.svg') }}" alt="icon">
        </div>

        <h5 class="order-success-title">Order Placed Successfully</h5>

        <p class="order-success-text">
          Your order has been placed successfully. Your groceries are on the way 🚚
        </p>

        <div class="d-flex gap-3 mb-3">
          <button type="button" class="secondary-green-btn w-100" data-bs-dismiss="modal">
            Shop More
          </button>
          <button type="button" class="primary-green-btn w-100">
            Track Order
          </button>
        </div>

        <div class="order-summary-box text-start">
          <h6 class="d-flex align-items-center gap-2 border-bottom mb-2 pb-2">
            <img src="{{ asset('assets/images/icon/order-summary-green.svg') }}" alt="icon">
            Order Summary
          </h6>

          <div class="summary-flex">
            <span>Order ID</span>
            <strong>#12345</strong>
          </div>

          <div class="summary-flex">
            <span>Total Items</span>
            <strong>05</strong>
          </div>

          <div class="summary-flex">
            <span>Total Paid</span>
            <strong>₹0000</strong>
          </div>

        </div>
        <a href="javascript:void(0);" class="model-view-details mt-2 mb-0">
          View Order Details
          <img src="{{asset('assets/images/icon/arrow-right-green.svg')}}" alt="Arrow">
        </a>
      </div>

    </div>
  </div>
</div>
{{-- Order Success Modal End --}}

{{-- Order Cancelled Modal Start --}}
<div class="modal fade" id="orderCancelledModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered order-success-dialog">
    <div class="modal-content order-success-modal">

      <div class="modal-body text-center">
        <div class="order-cancelled-icon my-4 mt-2">
          <img src="{{ asset('assets/images/icon/int-reject.svg') }}" alt="icon">
        </div>

        <h5 class="order-success-title">We Couldn’t Place Your Order</h5>

        <p class="order-success-text">
          Your payment didn’t go through. No amount was deducted.  Please try again
        </p>

        <div class="d-flex gap-3 mb-3">
          <button class="primary-green-btn w-100">
            Retry Payment
          </button>
        </div>
      </div>

    </div>
  </div>
</div>
{{-- Order Cancelled Modal End --}}


@endsection

@section('scripts')
  <script>
$(document).ready(function () {
  $('.select2-common').select2({
    minimumResultsForSearch: Infinity,
    width: 'style'
  });
});
</script>

<script>

$(function () {
    $(".search-toggle").click(function (e) {
        e.stopPropagation();
        var wrap = $(this).closest(".search-expand-wrap");
        wrap.toggleClass("active");
        if (wrap.hasClass("active")) {
            wrap.find(".expand-search-input").focus();
        } else {
            wrap.find(".expand-search-input").val("");
        }
    });
    $(document).click(function (e) {
        $(".search-expand-wrap").each(function () {
            var wrap = $(this);
            var input = wrap.find(".expand-search-input");
            if (
                !$(e.target).closest(".search-expand-wrap").length &&
                $.trim(input.val()) === ""
            ) {
                wrap.removeClass("active");
            }
        });
    });
    $(".expand-search-input").on("input", function () {
        var input = $(this);
        var wrap = input.closest(".search-expand-wrap");
        if ($.trim(input.val()) === "") {
            wrap.removeClass("active");
        }
    });
});
</script>

{{-- Model other hiden textarea --}}
<script>
    const radios = document.querySelectorAll('input[name="reason"]');
    const otherBox = document.getElementById('otherReasonBox');

    radios.forEach(radio => {
    radio.addEventListener('change', function () {
        if (this.value === "others") {
        otherBox.classList.remove('d-none');
        } else {
        otherBox.classList.add('d-none');
        }
    });
    });
</script>

{{-- toast --}}
<script>
  const toastEl = document.getElementById('successToast');
  const toast = new bootstrap.Toast(toastEl, {
    delay: 2000
  });

  document.getElementById('submit-Request').addEventListener('click', function () {
    toast.show();
  });
</script>

{{-- flow script --}}
<script defer>
document.addEventListener('DOMContentLoaded', () => {
    const screens = {
        empty: document.getElementById('Product_List_Empty'),
        list: document.getElementById('Product_List'),
        order: document.getElementById('Product_Order_Placed'),
    };

    const showScreen = (screenName) => {
        Object.values(screens).forEach((screen) => {
            screen?.classList.remove('d-block');
            screen?.classList.add('d-none');
        });

        screens[screenName]?.classList.remove('d-none');
        screens[screenName]?.classList.add('d-block');
    };

    const getCurrentScreen = () => {
        if (screens.order?.classList.contains('d-block')) return 'order';
        if (screens.list?.classList.contains('d-block')) return 'list';
        return 'empty';
    };

    // Default screen
    showScreen('empty');

    document.addEventListener('click', (event) => {
        const target = event.target;

        if (target.closest('.Explore-flow')) {
            showScreen('list');
            return;
        }

        if (target.closest('.Tab-Price-Flow')) {
            showScreen('order');
            return;
        }

        if (target.closest('.Back-flow')) {
            const currentScreen = getCurrentScreen();

            if (currentScreen === 'order') {
                showScreen('list');
                return;
            }

            if (currentScreen === 'list') {
                showScreen('empty');
            }
        }
    });
});
</script>
@endsection