@extends('front.layout.app')
@section('content')
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>


<section class="GallerySection customization">
    <div class="container-fluid">

        <div class="row">
            <div class="col-md-3">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('home.front')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">My account</a></li>
                    <li class="breadcrumb-item active" id="breadcrumb-active" aria-current="page">My photo gallery
                    </li>
                </ol>

                <div class="accountInfo" style="display: none;">
                    <h2>Hello Amina</h2>
                    <p>Welcome to your account</p>
                </div>

                <div class="accountTabs">


                    <ul class="nav nav-tabs" id="nav-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="nav-order-tab" data-toggle="tab" href="#nav-order"
                               role="tab" aria-controls="nav-order" aria-selected="true"><img
                                    src="{{asset('assets/images/order.png')}}" alt="image"> My Orders</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="nav-feed-tab" data-toggle="tab" href="#nav-feed" role="tab"
                               aria-controls="nav-feed" aria-selected="false"><img src="{{asset('assets/images/feed.png')}}"
                                                                                   alt="image"> Activity Feed</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="nav-gallery-tab" data-toggle="tab" href="#nav-gallery"
                               role="tab" aria-controls="nav-gallery" aria-selected="false"><img
                                    src="{{asset('assets/images/gallery.png')}}" alt="image"> My photo gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="nav-events-tab" data-toggle="tab" href="#nav-events" role="tab"
                               aria-controls="nav-events" aria-selected="false"><img src="{{asset('assets/images/events.png')}}"
                                                                                     alt="image"> My events</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="nav-info-tab" data-toggle="tab" href="#nav-info" role="tab"
                               aria-controls="nav-info" aria-selected="false"><img src="{{asset('assets/images/info.png')}}"
                                                                                   alt="image"> My Info</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="nav-invites-tab" data-toggle="tab" href="#nav-invites"
                               role="tab" aria-controls="nav-invites" aria-selected="false"><img
                                    src="{{asset('assets/images/invites.png')}}" alt="image"> My Invites</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  href="{{route('logout')}}"
                               role="tab" aria-controls="nav-signout" aria-selected="false"><img
                                    src="{{asset('assets/images/logout.png')}}" alt="image"> Sign Out</a>
                        </li>
                        <!-- More tabs here -->
                    </ul>


                </div>

                <div class="designers t-fashion costStyles" style="display: none;">
                    <h4>Customization styles</h4>
                    <h6>What others are creating.</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <figure class="fshn-img1">
                                <a href="#">
                                    <img src="{{asset('assets/images/artimg1.png')}}" class="img-fluid" alt=""></a>
                            </figure>
                        </div>
                        <div class="col-md-6">
                            <figure class="fshn-img1">
                                <a href="#">
                                    <img src="{{asset('assets/images/artimg2.png')}}" class="img-fluid" alt=""></a>
                            </figure>
                        </div>
                        <div class="col-md-6">
                            <figure class="fshn-img1">
                                <a href="#">
                                    <img src="{{asset('assets/images/artimg3.png')}}" class="img-fluid" alt=""></a>
                            </figure>
                        </div>
                        <div class="col-md-6">
                            <figure class="fshn-img1">
                                <a href="#">
                                    <img src="{{asset('assets/images/artimg4.png')}}" class="img-fluid" alt=""></a>
                            </figure>
                        </div>
                        <div class="col-md-6">
                            <figure class="fshn-img1">
                                <a href="#">
                                    <img src="{{asset('assets/images/artimg5.png')}}" class="img-fluid" alt=""></a>
                            </figure>
                        </div>
                        <div class="col-md-6">
                            <figure class="fshn-img1">
                                <a href="#">
                                    <img src="{{asset('assets/images/artimg6.png')}}" class="img-fluid" alt="">
                                </a>
                            </figure>
                        </div>
                    </div>
                </div>

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

                <div class="tab-content" id="nav-tabContent">
                    @include('user.components.order')

                    <div class="tab-pane fade " id="nav-feed" role="tabpanel" aria-labelledby="nav-feed-tab">
                        <div class="activity-feed">
                            <div class="row">
                                <div class="col-md-7">
                                    <!-- Nav tabs -->
                                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="myFeed-tab" data-toggle="tab"
                                               href="#myFeed" role="tab" aria-controls="myFeed"
                                               aria-selected="true">
                                                My feed
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="photoGallery-tab" data-toggle="tab"
                                               href="#photoGallery" role="tab" aria-controls="photoGallery"
                                               aria-selected="false">
                                                My photo gallery
                                            </a>
                                        </li>
                                    </ul>

                                    <!-- Tab panes -->
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="myFeed" role="tabpanel"
                                             aria-labelledby="myFeed-tab">
                                            <div class="feedCntnt">
                                                <div class="user">
                                                    <div class="user-img">
                                                        <figure>
                                                            <img src="{{asset('assets/images/user1img.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="user-info">
                                                        <h6>Amina Suleiman</h6>
                                                        <select>
                                                            <option><i class="fas fa-globe"></i> Public</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <textarea type="text" placeholder="What's new with you?"></textarea>
                                                <div class="postFeed">
                                                    <ul class="galImg">
                                                        <li><a href="#">
                                                                <img src="{{asset('assets/images/galimg.png')}}" class="img-fluid"
                                                                     alt="">
                                                                <span>Images</span> <span
                                                                    class="imginfoBar">|</span>
                                                            </a>
                                                        </li>
                                                        <li><a href="#">
                                                                <img src="{{asset('assets/images/vidimg.png')}}" class="img-fluid"
                                                                     alt="">
                                                                <span>Vidoes</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                    <ul class="galImg">
                                                        <li><a href="#">
                                                                <i class="far fa-smile"></i>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#" class="themeBtn">Post</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="postCntnt">
                                                <div class="user">
                                                    <div class="user-img">
                                                        <figure>
                                                            <img src="{{asset('assets/images/user1img.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="user-info">
                                                        <h6>Amina Suleiman</h6>
                                                        <select>
                                                            <option><i class="fas fa-globe"></i> Public</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="postInfo">
                                                    <p>New course uploaded collapse of the online-advertising market
                                                        in 2001 made marketing on the Internet seem even less
                                                        compelling. Website usability, press releases.</p>
                                                    <figure>
                                                        <img src="{{asset('assets/images/postimg.png')}}" class="img-fluid" alt="">
                                                    </figure>
                                                </div>
                                                <div class="postFeed">
                                                    <ul class="galImg pst-like">
                                                        <li><a href="#">
                                                                <span>Like</span>
                                                                <i class="far fa-thumbs-up"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                    <ul class="galImg pst-like">
                                                        <li>
                                                            <span>104 Likes</span><span class="imginfoBar pstBar"> |
                                                                </span>
                                                        </li>
                                                        <li>
                                                            <span>4 Comments</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="user comentCntnt">
                                                    <div class="user-img">
                                                        <figure>
                                                            <img src="{{asset('assets/images/user1img.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="user-info comentArea">
                                                            <textarea type="text"
                                                                      placeholder="Write a comment"></textarea>
                                                        <a href="#">
                                                            <i class="far fa-smile"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="photoGallery" role="tabpanel"
                                             aria-labelledby="photoGallery-tab">
                                            <div class="galleryCntnt">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg1">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg1">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg1">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg1">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg1">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg1">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg1">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg1">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg1">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg2">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg2">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <figure class="blnkImg2">
                                                            <img src="{{asset('assets/images/blnkimg1.png')}}" class="img-fluid" alt="">
                                                        </figure>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="designers">
                                        <h4>Recommendations</h4>
                                        <h6>Designer to follow</h6>
                                        <div class="designInfo">
                                            <div class="user-img">
                                                <figure>
                                                    <img src="{{asset('assets/images/design1.png')}}" class="img-fluid" alt="">
                                                </figure>
                                            </div>
                                            <div class="img-info d-info">
                                                <h6>Cameron Williamson</h6>
                                                <p>Designer</p>
                                                <span class="design-border"></span>
                                            </div>
                                            <a class="designer-anch" href="javascript:void(0);">
                                                <i class="fal fa-plus-circle"></i>
                                                <i class="fas fa-check"></i>
                                            </a>
                                        </div>
                                        <div class="designInfo">
                                            <div class="user-img">
                                                <figure>
                                                    <img src="{{asset('assets/images/design2.png')}}" class="img-fluid" alt="">
                                                </figure>
                                            </div>
                                            <div class="img-info d-info">
                                                <h6>Brooklyn Simmons</h6>
                                                <p>Designer</p>
                                                <span class="design-border"></span>
                                            </div>
                                            <a class="designer-anch active" href="javascript:void(0);">
                                                <i class="fal fa-plus-circle"></i>
                                                <i class="fas fa-check"></i>
                                            </a>
                                        </div>
                                        <div class="designInfo">
                                            <div class="user-img">
                                                <figure>
                                                    <img src="{{asset('assets/images/design3.png')}}" class="img-fluid" alt="">
                                                </figure>
                                            </div>
                                            <div class="img-info d-info">
                                                <h6>Cameron Williamson</h6>
                                                <p>Designer</p>
                                                <span class="design-border"></span>
                                            </div>
                                            <a class="designer-anch" href="javascript:void(0);">
                                                <i class="fal fa-plus-circle"></i>
                                                <i class="fas fa-check"></i>
                                            </a>
                                        </div>
                                        <div class="designInfo">
                                            <div class="user-img">
                                                <figure>
                                                    <img src="{{asset('assets/images/design4.png')}}" class="img-fluid" alt="">
                                                </figure>
                                            </div>
                                            <div class="img-info d-info">
                                                <h6>Brooklyn Simmons</h6>
                                                <p>Designer</p>
                                                <span class="design-border"></span>
                                            </div>
                                            <a class="designer-anch active" href="javascript:void(0);">
                                                <i class="fal fa-plus-circle"></i>
                                                <i class="fas fa-check"></i>
                                            </a>
                                        </div>
                                        <div class="designInfo">
                                            <div class="user-img">
                                                <figure>
                                                    <img src="{{asset('assets/images/design5.png')}}" class="img-fluid" alt="">
                                                </figure>
                                            </div>
                                            <div class="img-info d-info">
                                                <h6>Brooklyn Simmons</h6>
                                                <p>Designer</p>
                                            </div>
                                            <a class="designer-anch" href="javascript:void(0);">
                                                <i class="fal fa-plus-circle"></i>
                                                <i class="fas fa-check"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="designers t-fashion">
                                        <h4>Trendy styles</h4>
                                        <h6>What’s trending in fashion</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <figure class="fshn-img1">
                                                    <a href="#">
                                                        <img src="{{asset('assets/images/fshnimg1.png')}}" class="img-fluid" alt=""></a>
                                                </figure>
                                            </div>
                                            <div class="col-md-6">
                                                <figure class="fshn-img1">
                                                    <a href="#">
                                                        <img src="{{asset('assets/images/fshnimg2.png')}}" class="img-fluid" alt=""></a>
                                                </figure>
                                            </div>
                                            <div class="col-md-6">
                                                <figure class="fshn-img1">
                                                    <a href="#">
                                                        <img src="{{asset('assets/images/fshnimg3.png')}}" class="img-fluid" alt=""></a>
                                                </figure>
                                            </div>
                                            <div class="col-md-6">
                                                <figure class="fshn-img1">
                                                    <a href="#">
                                                        <img src="{{asset('assets/images/fshnimg4.png')}}" class="img-fluid" alt=""></a>
                                                </figure>
                                            </div>
                                            <div class="col-md-6">
                                                <figure class="fshn-img1">
                                                    <a href="#">
                                                        <img src="{{asset('assets/images/fshnimg5.png')}}" class="img-fluid" alt=""></a>
                                                </figure>
                                            </div>
                                            <div class="col-md-6">
                                                <figure class="fshn-img1">
                                                    <a href="#">
                                                        <img src="{{asset('assets/images/fshnimg6.png')}}" class="img-fluid" alt="">
                                                    </a>
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @include('user.components.gallery')

                    <div class="tab-pane fade " id="nav-events" role="tabpanel" aria-labelledby="nav-events-tab">
                        <div class="order-sec">
                            <h2>My Events</h2>
                            <div class="row">
                                <div class="col-md-8">
                                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link active" id="orderActive-tab" data-toggle="tab"
                                               data-target="#home" role="tab" aria-controls="home"
                                               aria-selected="true">Active</a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="orderCmplt-tab" data-toggle="tab"
                                               data-target="#profile" role="tab" aria-controls="profile"
                                               aria-selected="false">Completed</a>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <a class="nav-link" id="orderCncld-tab" data-toggle="tab"
                                               data-target="#messages" role="tab" aria-controls="messages"
                                               aria-selected="false">Cancelled</a>
                                        </li>
                                    </ul>

                                    <!-- Tab panes -->
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="home" role="tabpanel"
                                             aria-labelledby="orderActive-tab">
                                            <div class="event-details">
                                                <ul>
                                                    <li>
                                                        <span>My birthday party</span>
                                                    </li>
                                                    <li>
                                                        <strong>No of attendees: </strong><span class="birth-para">
                                                                30</span>
                                                    </li>
                                                    <li>
                                                        <strong>Date: </strong><span class="birth-para"> Jun 30
                                                                2023</span>
                                                    </li>
                                                </ul>
                                                <ul class="birth-total">
                                                    <li>
                                                        <strong>Order status: </strong><span class="birth-para"> In
                                                                progress</span>
                                                    </li>
                                                    <li>
                                                        <strong>Payment method: </strong><span class="birth-para">
                                                                Cash on delievry</span>
                                                    </li>
                                                    <li>
                                                        <strong>Total: </strong><span class="birth-para">
                                                                ₦2,500,000</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="event-description">
                                                <h6>Description</h6>
                                                <p>Lorem ipsum dolor sit amet consectetur. Consequat duis augue amet
                                                    vulputate vitae lacus odio. Pulvinar pulvinar faucibus at ornare
                                                    mi. Venenatis adipiscing magna ut amet lacus accumsan.
                                                    Condimentum tempor amet dui velit. Aenean sit laoreet vitae
                                                    tortor ultrices felis eget. Lorem ipsum dolor sit amet
                                                    consectetur. Consequat duis augue amet vulputate vitae lacus
                                                    odio.
                                                </p>
                                            </div>
                                            <div class="order-type">
                                                <div class="outfit-details">
                                                    <figure>
                                                        <img src="{{asset('assets/images/ordr1.png')}}" alt="">
                                                    </figure>
                                                    <div class="outfitInfo">
                                                        <h6>Outfit name</h6>
                                                        <p><strong>Type:</strong> Customized</p>
                                                        <p><strong>Quantity:</strong> 1</p>
                                                        <p><strong>Total price:</strong> ₦25,000</p>
                                                    </div>
                                                </div>
                                                <div class="birthday-friends">
                                                    <h6>Friends: <span>(6)</span></h6>
                                                    <div class="friends-imgs">
                                                        <img src="{{asset('assets/images/friend1.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="order-type">
                                                <div class="outfit-details">
                                                    <figure>
                                                        <img src="{{asset('assets/images/ordr1.png')}}" alt="">
                                                    </figure>
                                                    <div class="outfitInfo">
                                                        <h6>Outfit name</h6>
                                                        <p><strong>Type:</strong> Customized</p>
                                                        <p><strong>Quantity:</strong> 1</p>
                                                        <p><strong>Total price:</strong> ₦25,000</p>
                                                    </div>
                                                </div>
                                                <div class="birthday-friends">
                                                    <h6>Friends: <span>(6)</span></h6>
                                                    <div class="friends-imgs">
                                                        <img src="{{asset('assets/images/friend1.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="order-type">
                                                <div class="outfit-details">
                                                    <figure>
                                                        <img src="{{asset('assets/images/ordr1.png')}}" alt="">
                                                    </figure>
                                                    <div class="outfitInfo">
                                                        <h6>Outfit name</h6>
                                                        <p><strong>Type:</strong> Customized</p>
                                                        <p><strong>Quantity:</strong> 1</p>
                                                        <p><strong>Total price:</strong> ₦25,000</p>
                                                    </div>
                                                </div>
                                                <div class="birthday-friends">
                                                    <h6>Friends: <span>(6)</span></h6>
                                                    <div class="friends-imgs">
                                                        <img src="{{asset('assets/images/friend1.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                        <img src="{{asset('assets/images/friend2.png')}}" class="img-fluid" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="event-details">
                                                <ul>
                                                    <li>
                                                        <span>My birthday party</span>
                                                    </li>
                                                    <li>
                                                        <strong>No of attendees: </strong><span class="birth-para">
                                                                30</span>
                                                    </li>
                                                    <li>
                                                        <strong>Date: </strong><span class="birth-para"> Jun 30
                                                                2023</span>
                                                    </li>
                                                </ul>
                                                <ul class="birth-total">
                                                    <li>
                                                        <strong>Order status: </strong><span class="birth-para"> In
                                                                progress</span>
                                                    </li>
                                                    <li>
                                                        <strong>Payment method: </strong><span class="birth-para">
                                                                Cash on delievry</span>
                                                    </li>
                                                    <li>
                                                        <strong>Total: </strong><span class="birth-para">
                                                                ₦2,500,000</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="event-description">
                                                <h6>Description</h6>
                                                <p>Lorem ipsum dolor sit amet consectetur. Consequat duis augue amet
                                                    vulputate vitae lacus odio. Pulvinar pulvinar faucibus at ornare
                                                    mi. Venenatis adipiscing magna ut amet lacus accumsan.
                                                    Condimentum tempor amet dui velit. Aenean sit laoreet vitae
                                                    tortor ultrices felis eget. Lorem ipsum dolor sit amet
                                                    consectetur. Consequat duis augue amet vulputate vitae lacus
                                                    odio.
                                                </p>
                                            </div>
                                            <div class="event-details">
                                                <ul>
                                                    <li>
                                                        <span>My birthday party</span>
                                                    </li>
                                                    <li>
                                                        <strong>No of attendees: </strong><span class="birth-para">
                                                                30</span>
                                                    </li>
                                                    <li>
                                                        <strong>Date: </strong><span class="birth-para"> Jun 30
                                                                2023</span>
                                                    </li>
                                                </ul>
                                                <ul class="birth-total">
                                                    <li>
                                                        <strong>Order status: </strong><span class="birth-para"> In
                                                                progress</span>
                                                    </li>
                                                    <li>
                                                        <strong>Payment method: </strong><span class="birth-para">
                                                                Cash on delievry</span>
                                                    </li>
                                                    <li>
                                                        <strong>Total: </strong><span class="birth-para">
                                                                ₦2,500,000</span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="event-description">
                                                <h6>Description</h6>
                                                <p>Lorem ipsum dolor sit amet consectetur. Consequat duis augue amet
                                                    vulputate vitae lacus odio. Pulvinar pulvinar faucibus at ornare
                                                    mi. Venenatis adipiscing magna ut amet lacus accumsan.
                                                    Condimentum tempor amet dui velit. Aenean sit laoreet vitae
                                                    tortor ultrices felis eget. Lorem ipsum dolor sit amet
                                                    consectetur. Consequat duis augue amet vulputate vitae lacus
                                                    odio.
                                                </p>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="profile" role="tabpanel"
                                             aria-labelledby="orderCmplt-tab">
                                        </div>
                                        <div class="tab-pane" id="messages" role="tabpanel"
                                             aria-labelledby="orderCncld-tab">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @include('user.components.user-info')

                    <div class="tab-pane fade " id="nav-invites" role="tabpanel" aria-labelledby="nav-invites-tab">
                        <div class="invite-section">
                            <div class="row">
                                <div class="col-md-12">
                                    <h2>My Invites</h2>
                                    <p>Lorem ipsum dolor sit amet consectetur. Faucibus tellus leo morbi risus ut
                                        non id. Duis turpis <br> penatibus pharetra hac suscipit. Non quis et eget
                                        mauris
                                        urna nisl. Quam pellentesque amet proin mi <br> nunc. Habitant cras arcu
                                        vitae
                                        consequat dapibus sed tellus morbi tincidunt.
                                    </p>
                                    <div class="inviteAnchor">
                                        <a href="#" class="themeBtn" data-toggle="modal"
                                           data-target="#exampleModal"><i class="far fa-plus-square"></i><span>SEND
                                                    INVITES</span></a>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="invite-portion">
                                        <h2>Pending<span>(20)</span></h2>
                                        <div class="invite-card">
                                            <div class="user-invite">
                                                <div class="user-img">
                                                    <img src="{{asset('assets/images/useimg1.png')}}" class="img-fluid" alt="">
                                                </div>
                                                <div class="userInfo">
                                                    <h6>Cameron Williamson</h6>
                                                    <p>@gmail.com<span>Designer</span></p>
                                                </div>
                                            </div>
                                            <div class="invite-anchor">
                                                <a href="#" class="themeBtn">Cencil invite</a>
                                                <a href="#" class="themeBtn">Resend invite</a>
                                            </div>
                                        </div>
                                        <div class="invite-card">
                                            <div class="user-invite">
                                                <div class="user-img">
                                                    <img src="{{asset('assets/images/useimg1.png')}}" class="img-fluid" alt="">
                                                </div>
                                                <div class="userInfo">
                                                    <h6>Cameron Williamson</h6>
                                                    <p>@gmail.com<span>Designer</span></p>
                                                </div>
                                            </div>
                                            <div class="invite-anchor">
                                                <a href="#" class="themeBtn">Cencil invite</a>
                                                <a href="#" class="themeBtn">Resend invite</a>
                                            </div>
                                        </div>
                                        <div class="invite-card">
                                            <div class="user-invite">
                                                <div class="user-img">
                                                    <img src="{{asset('assets/images/useimg2.png')}}" class="img-fluid" alt="">
                                                </div>
                                                <div class="userInfo">
                                                    <h6>Cameron Williamson</h6>
                                                    <p>@gmail.com<span>Designer</span></p>
                                                </div>
                                            </div>
                                            <div class="invite-anchor">
                                                <a href="#" class="themeBtn">Cencil invite</a>
                                                <a href="#" class="themeBtn">Resend invite</a>
                                            </div>
                                        </div>
                                        <div class="invite-card">
                                            <div class="user-invite">
                                                <div class="user-img">
                                                    <img src="{{asset('assets/images/useimg3.png')}}" class="img-fluid" alt="">
                                                </div>
                                                <div class="userInfo">
                                                    <h6>Cameron Williamson</h6>
                                                    <p>@gmail.com<span>Designer</span></p>
                                                </div>
                                            </div>
                                            <div class="invite-anchor">
                                                <a href="#" class="themeBtn">Cencil invite</a>
                                                <a href="#" class="themeBtn">Resend invite</a>
                                            </div>
                                        </div>
                                        <div class="invite-card">
                                            <div class="user-invite">
                                                <div class="user-img">
                                                    <img src="{{asset('assets/images/useimg4.png')}}" class="img-fluid" alt="">
                                                </div>
                                                <div class="userInfo">
                                                    <h6>Cameron Williamson</h6>
                                                    <p>@gmail.com<span>Designer</span></p>
                                                </div>
                                            </div>
                                            <div class="invite-anchor">
                                                <a href="#" class="themeBtn">Cencil invite</a>
                                                <a href="#" class="themeBtn">Resend invite</a>
                                            </div>
                                        </div>
                                        <div class="invite-navigation">
                                            <nav aria-label="Page navigation example">
                                                <ul class="pagination justify-content-end">
                                                    <li class="page-item disabled">
                                                        <a class="page-link" href="#" tabindex="-1"
                                                           aria-disabled="true"><i
                                                                class="fas fa-chevron-left"></i></a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                                                    <li class="page-item"><a class="page-link" href="#">...</a></li>
                                                    <li class="page-item">
                                                        <a class="page-link" href="#"><i
                                                                class="fas fa-chevron-right"></i></a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
    @endsection