<!DOCTYPE html>
<html lang="zxx">
    <?php require __DIR__ . '/includes/head.php'; ?>

    <body class="bg-body-bg"><?php require __DIR__ . '/includes/loading.php'; ?><?php require __DIR__ . '/includes/sidebar.php'; ?>


        <!-- Start Main Content Area -->
        <div class="container-fluid">
            <div class="main-content d-flex flex-column">
                <?php require __DIR__ . '/includes/topbar.php'; ?>


                <div class="main-content-container overflow-hidden">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4 mt-1">
                        <h3 class="mb-0">Profile</h3>

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb align-items-center mb-0 lh-1">
                                <li class="breadcrumb-item">
                                    <a href="index.html" class="d-flex align-items-center text-decoration-none">
                                        <i class="ri-home-8-line fs-15 text-primary me-1"></i>
                                        <span class="text-body fs-14 hover">Dashboard</span>
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span>Social</span>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span class="text-secondary">Profile</span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                    
                    <div class="row">
                        <div class="col-xxl-9">
                            <div class="social-profile">
                                <div class="card border-0 bg-white rounded-10 mb-4">
                                    <div class="position-relative">
                                        <img src="assets/images/profile-cover.jpg" class="rounded-top-3 w-100" alt="profile-cover">
                                        <div class="position-absolute z-1" style="bottom: 20px; right: 20px;">
                                            <button class="btn btn-primary text-white fs-16 fw-normal hover rounded-1" style="padding: 14px 26px;">
                                                Edit Cover Photo
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card border-0 rounded-10 p-20 pb-0 rounded-top-0 profile-info" style="background-color: transparent !important;">
                                        <div class="d-flex justify-content-between align-items-end flex-wrap gap-3">
                                            <div class="d-flex align-items-end">
                                                <div class="flex-shrink-0 position-relative">
                                                    <div class="avatar-upload">
                                                        <div class="avatar-edit" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Image Size (190x190)">
                                                            <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
                                                            <label for="imageUpload"></label>
                                                        </div>
                                                        <div class="avatar-preview">
                                                            <div id="imagePreview" style="background-image: url(https://angular.hibootstrap.com/daxa/images/profile.jpg);"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 ms-20 mb-45">
                                                    <h3 class="mb-1">Micheal Collins</h3>
                                                    <span class="fs-16">micheal@gmail.com</span>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center mb-sm-4">
                                                <button class="btn btn-outline-border-color-70 text-secondary fw-normal fs-16 hover-bg" style="padding: 12px 15px;">Message</button>
                                                <button class="btn btn-outline-border-color-70 text-secondary fw-normal fs-16 hover-bg ms-10" style="padding: 12px 15px;">Follow</button>
                                            </div>
                                        </div>

                                        <ul class="nav nav-tabs profile-tabs border-0 justify-content-center gap-2" id="myTab" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link rounded-0 fs-16 border-0 p-0 bg-transparent text-body active" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline-tab-pane" type="button" role="tab" aria-controls="timeline-tab-pane" aria-selected="true">Timeline</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link rounded-0 fs-16 border-0 p-0 bg-transparent text-body" id="about-tab" data-bs-toggle="tab" data-bs-target="#about-tab-pane" type="button" role="tab" aria-controls="about-tab-pane" aria-selected="false">About</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link rounded-0 fs-16 border-0 p-0 bg-transparent text-body" id="activity-tab" data-bs-toggle="tab" data-bs-target="#activity-tab-pane" type="button" role="tab" aria-controls="activity-tab-pane" aria-selected="false">Activity</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-lg-4 order-2 order-lg-1">
                                        <div class="card bg-white border border-white rounded-10 mb-4">
                                            <div class="p-20 pb-0">
                                                <h3 class="mb-20">Friends</h3>
                                                <form class="table-src-form position-relative mx-0">
                                                    <input type="text" class="form-control w-100" placeholder="Search">
                                                    <div class="src-btn position-absolute top-50 start-0 translate-middle-y bg-transparent p-0 border-0">
                                                        <span class="material-symbols-outlined">search</span>
                                                    </div>
                                                </form>
                                            </div>
        
                                            <ul class="p-20 mb-0 list-unstyled last-child-none" style="max-height: 787px;" data-simplebar>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/user15.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user15">
                                                            <div class="position-absolute p-1 bg-success border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Marcia Baker</h6>
                                                            <span class="fs-14 text-body">baker@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/user16.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user16">
                                                            <div class="position-absolute p-1 bg-danger border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Carolyn Barnes</h6>
                                                            <span class="fs-14 text-body">barnes@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/user17.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user17">
                                                            <div class="position-absolute p-1 bg-success border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Donna Miller</h6>
                                                            <span class="fs-14 text-body">miller@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/user14.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user14">
                                                            <div class="position-absolute p-1 bg-success border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Barbara Cross</h6>
                                                            <span class="fs-14 text-body">cross@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/user13.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user13">
                                                            <div class="position-absolute p-1 bg-danger border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Rebecca Block</h6>
                                                            <span class="fs-14 text-body">block@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/user12.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user12">
                                                            <div class="position-absolute p-1 bg-danger border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Ramiro McCarty</h6>
                                                            <span class="fs-14 text-body">mccarty@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/user11.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user11">
                                                            <div class="position-absolute p-1 bg-success border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Robert Fairweather</h6>
                                                            <span class="fs-14 text-body">fairweather@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/user10.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user10">
                                                            <div class="position-absolute p-1 bg-danger border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Marcelino Haddock</h6>
                                                            <span class="fs-14 text-body">haddock@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/profile.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="profile">
                                                            <div class="position-absolute p-1 bg-danger border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Thomas Wilson</h6>
                                                            <span class="fs-14 text-body">wilson@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="pb-3 mb-3 border-light border-bottom">
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0 position-relative">
                                                            <img src="assets/images/user8.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user8">
                                                            <div class="position-absolute p-1 bg-danger border border-2 border-white rounded-circle bottom-0 end-0"></div>
                                                        </div>
                                                        <div class="flex-grow-1 ms-12 position-relative top-2">
                                                            <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Nathaniel Hulsey</h6>
                                                            <span class="fs-14 text-body">hulsey@gmail.com</span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 order-1 order-lg-2">
                                        <div class="tab-content" id="myTabContent">
                                            <div class="tab-pane fade show active" id="timeline-tab-pane" role="tabpanel" aria-labelledby="timeline-tab" tabindex="0">
                                                <div class="card bg-white border border-white p-20 rounded-10 mb-4">
                                                    <ul class="p-0 mb-20 list-unstyled d-flex flex-wrap border-border-color-80 border-bottom" style="gap: 35px;" id="active-class">
                                                        <li class="menu-item fs-16 fw-medium active">Create Post</li>
                                                        <li class="menu-item fs-16 fw-medium">Photos/Videos</li>
                                                        <li class="menu-item fs-16 fw-medium">Story</li>
                                                    </ul>
                                                    <form>
                                                        <div class="mb-20">
                                                            <div class="form-floating">
                                                                <textarea class="form-control" placeholder="What's on your mind, Micheal?" id="floatingTextarea1" style="height: 152px"></textarea>
                                                                <label for="floatingTextarea1">What's on your mind, Micheal?</label>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center gap-2 gap-sm-3">
                                                            <button type="button" class="btn btn-primary fs-16 fw-normal text-white">Publish Post</button>
                                                            <button type="button" class="p-0 bg-transparent border-0 fs-20 text-body hover">
                                                                <i class="ri-emotion-line"></i>
                                                            </button>
                                                            <button type="button" class="p-0 bg-transparent border-0 fs-20 text-body hover">
                                                                <i class="ri-link-m"></i>
                                                            </button>
                                                            <button type="button" class="p-0 bg-transparent border-0 fs-20 text-body hover">
                                                                <i class="ri-mic-line"></i>
                                                            </button>
                                                            <button type="button" class="p-0 bg-transparent border-0 fs-20 text-body hover">
                                                                <i class="ri-image-line"></i>
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="card bg-white border border-white p-20 rounded-10 mb-4">
                                                    <div class="d-flex justify-content-between align-items-center border-bottom border-border-color-80 pb-20 mb-20">
                                                        <a href="profile.html" class="d-flex align-items-center text-decoration-none">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user15.jpg" class="rounded-circle" style="width: 55px; height: 55px;" alt="user15">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h6 class="mb-1 fs-16 fw-medium">Cynthia Baggett</h6>
                                                                <span class="fs-14 text-body">05 mins ago</span>
                                                            </div>
                                                        </a>
                                                        <div class="dropdown select-dropdown without-border" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="More">
                                                            <button class="bg-transparent border-0 p-0 position-relative top-3 text-body" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                                <i class="material-symbols-outlined fs-24 text-secondary">more_horiz</i>
                                                            </button>
                                                        
                                                            <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                                                <li>
                                                                    <button class="dropdown-item text-secondary">Save Post</button>
                                                                </li>
                                                                <li>
                                                                    <button class="dropdown-item text-secondary">Hide Post</button>
                                                                </li>
                                                                <li>
                                                                    <button class="dropdown-item text-secondary">Report Photo</button>
                                                                </li>
                                                                <li>
                                                                    <button class="dropdown-item text-secondary">Block Cynthia</button>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <p class="lh-1-8 fs-16">Pellentesque viverra lorem malesuada nunc tristique sapien. Imperdiet sit hendrerit tincidunt bibendum donec adipiscing. Tellus non morbi nascetur cursus etiam facilisis mi. Dolor aliquam sed amet aliquam venenatis. Ac viverra interdum tortor enim. Molestie tincidunt ut consequat a urna tortor. Vitae velit ac nisl velit mauris placerat nisi placerat.</p>

                                                    <div class="border-top border-bottom border-light py-2 mb-20">
                                                        <div class="d-flex align-items-center flex-wrap gap-2 gap-sm-4">
                                                            <button class="p-0 bg-transparent border-0 fs-20 text-body hover align-items-center d-flex">
                                                                <i class="ri-thumb-up-line fs-18"></i>
                                                                <span class="fs-15 ms-2">10 Likes</span>
                                                            </button>
                                                            <button class="p-0 bg-transparent border-0 fs-20 text-body hover align-items-center d-flex">
                                                                <i class="ri-chat-4-line fs-18"></i>
                                                                <span class="fs-15 ms-2">0 Comments</span>
                                                            </button>
                                                            <button class="p-0 bg-transparent border-0 fs-20 text-body hover align-items-center d-flex">
                                                                <i class="ri-share-line fs-18"></i>
                                                                <span class="fs-15 ms-2">0 Share</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <form>
                                                        <div class="d-flex flex-wrap flex-sm-nowrap gap-2 gap-sm-0 justify-content-between align-items-center">
                                                            <div class="d-flex align-items-center text-decoration-none w-100">
                                                                <div class="flex-shrink-0">
                                                                    <img src="assets/images/profile.jpg" class="rounded-circle" style="width: 55px; height: 55px;" alt="user">
                                                                </div>
                                                                <div class="flex-grow-1 ms-3 position-relative top-2">
                                                                    <input type="text" class="form-control" placeholder="Type something....">
                                                                </div>
                                                            </div>
                                                            <div class="d-flex align-items-center gap-3 ms-3">
                                                                <button type="button" class="p-0 bg-primary border-0 rounded-2 d-flex align-items-center justify-content-center" style="width: 56px; height: 56px;">
                                                                    <i class="material-symbols-outlined text-white">send</i>
                                                                </button>
                                                                <button type="button" class="p-0 bg-transparent border-0 fs-20 text-body hover">
                                                                    <i class="ri-emotion-line"></i>
                                                                </button>
                                                                <button type="button" class="p-0 bg-transparent border-0 fs-20 text-body hover">
                                                                    <i class="ri-link-m"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="card bg-white border border-white p-20 rounded-10 mb-4">
                                                    <div class="d-flex justify-content-between align-items-center border-bottom border-border-color-80 pb-20 mb-20">
                                                        <a href="profile.html" class="d-flex align-items-center text-decoration-none">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user17.jpg" class="rounded-circle" style="width: 55px; height: 55px;" alt="user17">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h6 class="mb-1 fs-16 fw-medium">Douglas Hairston</h6>
                                                                <span class="fs-14 text-body">1 hour ago</span>
                                                            </div>
                                                        </a>
                                                        <div class="dropdown select-dropdown without-border" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="More">
                                                            <button class="bg-transparent border-0 p-0 position-relative top-3 text-body" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                                <i class="material-symbols-outlined fs-24 text-secondary">more_horiz</i>
                                                            </button>
                                                        
                                                            <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                                                <li>
                                                                    <button class="dropdown-item text-secondary">Save Post</button>
                                                                </li>
                                                                <li>
                                                                    <button class="dropdown-item text-secondary">Hide Post</button>
                                                                </li>
                                                                <li>
                                                                    <button class="dropdown-item text-secondary">Report Photo</button>
                                                                </li>
                                                                <li>
                                                                    <button class="dropdown-item text-secondary">Block Cynthia</button>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <p class="lh-1-8 fs-16">Pellentesque viverra lorem malesuada nunc tristique sapien. Imperdiet sit hendrerit tincidunt bibendum donec adipiscing. Tellus non morbi nascetur cursus etiam facilisis mi. Dolor aliquam sed amet aliquam venenatis. Ac viverra interdum tortor enim. Molestie tincidunt ut consequat a urna tortor. Vitae velit ac nisl velit mauris placerat nisi placerat.</p>

                                                    <div class="border-top border-bottom border-light py-2 mb-20">
                                                        <div class="d-flex align-items-center flex-wrap gap-2 gap-sm-4">
                                                            <button class="p-0 bg-transparent border-0 fs-20 text-body hover align-items-center d-flex">
                                                                <i class="ri-thumb-up-line fs-18"></i>
                                                                <span class="fs-15 ms-2">42 Likes</span>
                                                            </button>
                                                            <button class="p-0 bg-transparent border-0 fs-20 text-body hover align-items-center d-flex">
                                                                <i class="ri-chat-4-line fs-18"></i>
                                                                <span class="fs-15 ms-2">2 Comments</span>
                                                            </button>
                                                            <button class="p-0 bg-transparent border-0 fs-20 text-body hover align-items-center d-flex">
                                                                <i class="ri-share-line fs-18"></i>
                                                                <span class="fs-15 ms-2">1 Share</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <form>
                                                        <div class="d-flex flex-wrap flex-sm-nowrap gap-2 gap-sm-0 justify-content-between align-items-center">
                                                            <div class="d-flex align-items-center text-decoration-none w-100">
                                                                <div class="flex-shrink-0">
                                                                    <img src="assets/images/profile.jpg" class="rounded-circle" style="width: 55px; height: 55px;" alt="profile">
                                                                </div>
                                                                <div class="flex-grow-1 ms-3 position-relative top-2">
                                                                    <input type="text" class="form-control" placeholder="Type something....">
                                                                </div>
                                                            </div>
                                                            <div class="d-flex align-items-center gap-3 ms-3">
                                                                <button type="button" class="p-0 bg-primary border-0 rounded-2 d-flex align-items-center justify-content-center" style="width: 56px; height: 56px;">
                                                                    <i class="material-symbols-outlined text-white">send</i>
                                                                </button>
                                                                <button type="button" class="p-0 bg-transparent border-0 fs-20 text-body hover">
                                                                    <i class="ri-emotion-line"></i>
                                                                </button>
                                                                <button type="button" class="p-0 bg-transparent border-0 fs-20 text-body hover">
                                                                    <i class="ri-link-m"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="about-tab-pane" role="tabpanel" aria-labelledby="about-tab" tabindex="0">
                                                <div class="card bg-white border border-white rounded-10 p-20 mb-4">
                                                    <h3 class="mb-3">Profile Information</h3>
                                                    <ul class="p-0 mb-30 list-unstyled last-child-none">
                                                        <li class="mb-10 fs-16">User ID: <span class="text-secondary">7001</span></li>
                                                        <li class="mb-10 fs-16">Full Name: <span class="text-secondary">Micheal Collins</span></li>
                                                        <li class="mb-10 fs-16">Email: <span class="text-secondary">micheal@gmail.com</span></li>
                                                        <li class="mb-10 fs-16">Role: <span class="text-secondary">Administrator</span></li>
                                                        <li class="mb-10 fs-16">Location: <span class="text-secondary">New York, USA</span></li>
                                                        <li class="mb-10 fs-16">Join Date: <span class="text-secondary">May 10, 2025</span></li>
                                                    </ul>
                                                    <h3 class="mb-3">Additional Information</h3>
                                                    <ul class="p-0 mb-0 list-unstyled last-child-none">
                                                        <li class="mb-10 fs-16">Phone: <span class="text-secondary">+1 444 266 5599</span></li>
                                                        <li class="mb-10 fs-16">Address: <span class="text-secondary">84 S. Arrowhead Court Branford</span></li>
                                                        <li class="mb-10 fs-16">Orders: <span class="text-secondary">696</span></li>
                                                        <li class="mb-10 fs-16">Product: <span class="text-secondary">9240</span></li>
                                                        <li class="mb-10 fs-16">Event: <span class="text-secondary">5 events</span></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="activity-tab-pane" role="tabpanel" aria-labelledby="activity-tab" tabindex="0">
                                                <div class="card bg-white border border-white rounded-10 p-20 mb-4">
                                                    <h3 class="mb-20">Recent Activity</h3>

                                                    <ul class="p-0 mb-20 list-unstyled last-child-none">
                                                        <li class="pb-3 mb-3 border-light border-bottom">
                                                            <div class="d-flex">
                                                                <div class="flex-shrink-0">
                                                                    <img src="assets/images/user1.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user1">
                                                                </div>
                                                                <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                    <h6 class="fs-16 fw-medium mb-1" style="margin-bottom: 2.5px;">Justin Butler</h6>
                                                                    <span class="fs-14 text-body d-block mb-1">20 Nov, 2025 (09:30 AM)</span>
                                                                    <p class="fs-16">User Justin Butler updated their profile information.</p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="pb-3 mb-3 border-light border-bottom">
                                                            <div class="d-flex">
                                                                <div class="flex-shrink-0">
                                                                    <img src="assets/images/user2.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user2">
                                                                </div>
                                                                <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                    <h6 class="fs-16 fw-medium mb-1" style="margin-bottom: 2.5px;">Joshua Thayer</h6>
                                                                    <span class="fs-14 text-body d-block mb-1">18 Nov, 2025 (03:45 PM)</span>
                                                                    <p class="fs-16">Discuss with the customer what kind of benefits will be provided in a project</p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="pb-3 mb-3 border-light border-bottom">
                                                            <div class="d-flex">
                                                                <div class="flex-shrink-0">
                                                                    <img src="assets/images/user3.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user3">
                                                                </div>
                                                                <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                    <h6 class="fs-16 fw-medium mb-1" style="margin-bottom: 2.5px;">Gladys Keen</h6>
                                                                    <span class="fs-14 text-body d-block mb-1">17 Nov, 2025 (11:15 AM)</span>
                                                                    <p class="fs-16">Estimate the full budget of the project and take customer feedback</p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="pb-3 mb-3 border-light border-bottom">
                                                            <div class="d-flex">
                                                                <div class="flex-shrink-0">
                                                                    <img src="assets/images/user4.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user4">
                                                                </div>
                                                                <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                    <h6 class="fs-16 fw-medium mb-1" style="margin-bottom: 2.5px;">Stanley Mathews</h6>
                                                                    <span class="fs-14 text-body d-block mb-1">15 Nov, 2025 (02:00 PM)</span>
                                                                    <p class="fs-16">Attempted access to a restricted area.</p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                        <li class="pb-3 mb-3 border-light border-bottom">
                                                            <div class="d-flex">
                                                                <div class="flex-shrink-0">
                                                                    <img src="assets/images/user4.jpg" class="rounded-circle" style="width: 50px; height: 50px;" alt="user4">
                                                                </div>
                                                                <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                    <h6 class="fs-16 fw-medium mb-1" style="margin-bottom: 2.5px;">Jennifer Lockhart</h6>
                                                                    <span class="fs-14 text-body d-block mb-1">14 Nov, 2025 (04:20 PM)</span>
                                                                    <p class="fs-16">User Jennifer Lockhart deactivated their account</p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3">
                            <div class="row">
                                <div class="col-xxl-12 col-md-6">
                                    <div class="card bg-white border border-white rounded-10 p-20 mb-4">
                                        <h3 class="mb-20">Profile Intro</h3>
    
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/profile.jpg" class="rounded-circle" style="width: 75px;" alt="profile">
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h3 class="fs-18" style="margin-bottom: 2px;">Micheal Collins</h3>
                                                <span class="fs-16">micheal@gmail.com</span>
                                            </div>
                                        </div>
    
                                        <h4 class="fw-medium fs-16 mb-2">About Me</h4>
                                        <p class="lh-1-8 fs-16">Molestie tincidunt ut consequat a urna tortor. Vitae velit ac nisl velit mauris placerat nisi placerat. Pellentesque viverra lorem malesuada nunc tristique sapien. Imperdiet sit hendrerit tincidunt bibendum donec adipiscing.</p>
                                        <h3 class="mb-2 pb-1">Social Profile</h3>
                                        <ul class="p-0 mb-0 list-unstyled d-flex" style="gap: 10px;">
                                            <li>
                                                <a href="https://www.facebook.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #3a559f;">
                                                    <i class="ri-facebook-fill"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="https://www.twitter.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #03a9f4;">
                                                    <i class="ri-twitter-x-line"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="https://www.linkedin.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #007ab9;">
                                                    <i class="ri-linkedin-fill"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="https://www.google.com/" target="_blank" class="d-inline-block rounded-circle text-decoration-none text-center text-white transition-y fs-16" style="width: 24px; height: 24px; line-height: 24px; background-color: #2196f3;">
                                                    <i class="ri-mail-line"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-xxl-12 col-md-6">
                                    <div class="card bg-white border border-white rounded-10 mb-4">
                                        <h3 class="p-20 pb-0">Followers</h3>
    
                                        <ul class="p-20 mb-0 list-unstyled last-child-none" style="max-height: 345px;" data-simplebar>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user1.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user1">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Salvatore Dewall</h6>
                                                        <span class="fs-14 text-body">dewall@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user3.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user3">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Alina Smith</h6>
                                                        <span class="fs-14 text-body">smith@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user5.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user5">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Russell Colon</h6>
                                                        <span class="fs-14 text-body">colon@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user6.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user6">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Leslie Shadle</h6>
                                                        <span class="fs-14 text-body">shadle@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user7.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user7">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Raymond Nguyen</h6>
                                                        <span class="fs-14 text-body">nguyen@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-xxl-12 col-md-6">
                                    <div class="card bg-white border border-white rounded-10 mb-4">
                                        <h3 class="p-20 pb-0">Following</h3>
    
                                        <ul class="p-20 mb-0 list-unstyled last-child-none" style="max-height: 345px;" data-simplebar>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user8.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user8">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Lenore Crum</h6>
                                                        <span class="fs-14 text-body">crum@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user9.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user9">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Paul Bartlett</h6>
                                                        <span class="fs-14 text-body">bartlett@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user10.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user10">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Nikki Lowe</h6>
                                                        <span class="fs-14 text-body">lowe@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user11.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user11">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Milton Laskowski</h6>
                                                        <span class="fs-14 text-body">laskowski@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                            <li class="mb-20 d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/user12.jpg" class="rounded-circle" style="width: 45px; height: 45px;" alt="user12">
                                                    </div>
                                                    <div class="flex-grow-1 ms-12 position-relative top-2">
                                                        <h6 class="fs-16 fw-medium" style="margin-bottom: 2.5px;">Ethel Hillen</h6>
                                                        <span class="fs-14 text-body">hillen@gmail.com</span>
                                                    </div>
                                                </div>

                                                <button class="bg-transparent p-0 border-0 text-body hover-text">Add Friend</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-xxl-12 col-md-6">
                                    <div class="card bg-white border border-white rounded-10 p-20 pb-10 mb-4">
                                        <h3 class="mb-lg-4 mb-3">Photos</h3>
                                        <div class="row" style="--bs-gutter-x: 10px;">
                                            <div class="col-lg-4 col-sm-4">
                                                <a href="javascript:void(0);" class="d-block mb-10">
                                                    <img src="assets/images/photo1.jpg" class="rounded-2" alt="photo1">
                                                </a>
                                            </div>
                                            <div class="col-lg-4 col-sm-4">
                                                <a href="javascript:void(0);" class="d-block mb-10">
                                                    <img src="assets/images/photo2.jpg" class="rounded-2" alt="photo2">
                                                </a>
                                            </div>
                                            <div class="col-lg-4 col-sm-4">
                                                <a href="javascript:void(0);" class="d-block mb-10">
                                                    <img src="assets/images/photo3.jpg" class="rounded-2" alt="photo3">
                                                </a>
                                            </div>
                                            <div class="col-lg-4 col-sm-4">
                                                <a href="javascript:void(0);" class="d-block mb-10">
                                                    <img src="assets/images/photo4.jpg" class="rounded-2" alt="photo4">
                                                </a>
                                            </div>
                                            <div class="col-lg-4 col-sm-4">
                                                <a href="javascript:void(0);" class="d-block mb-10">
                                                    <img src="assets/images/photo5.jpg" class="rounded-2" alt="photo5">
                                                </a>
                                            </div>
                                            <div class="col-lg-4 col-sm-4">
                                                <a href="javascript:void(0);" class="d-block mb-10">
                                                    <img src="assets/images/photo6.jpg" class="rounded-2" alt="photo6">
                                                </a>
                                            </div>
                                            <div class="col-lg-4 col-sm-4">
                                                <a href="javascript:void(0);" class="d-block mb-10">
                                                    <img src="assets/images/photo7.jpg" class="rounded-2" alt="photo7">
                                                </a>
                                            </div>
                                            <div class="col-lg-4 col-sm-4">
                                                <a href="javascript:void(0);" class="d-block mb-10">
                                                    <img src="assets/images/photo8.jpg" class="rounded-2" alt="photo8">
                                                </a>
                                            </div>
                                            <div class="col-lg-4 col-sm-4">
                                                <a href="javascript:void(0);" class="d-block mb-10">
                                                    <img src="assets/images/photo9.jpg" class="rounded-2" alt="photo9">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex-grow-1"></div>

                <?php require __DIR__ . '/includes/footer.php'; ?>

            </div>
        </div>
        <!-- Start Main Content Area -->

        <!-- Start Theme Setting Area -->
        <button class="btn btn-primary theme-settings-btn p-0 position-fixed z-2 text-center rounded-circle" style="bottom: 24px; right: 24px; width: 56px; height: 56px; line-height: 54px;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">
            <i class="text-white ri-settings-3-fill fs-28" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Click On Theme Settings"></i>
        </button>

        <!-- Start Theme Setting Area -->
        <div class="offcanvas offcanvas-end bg-white border-0" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel" style="box-shadow: 0 4px 20px #2f8fe812 !important; max-width: 300px;">
            <div class="offcanvas-header bg-light p-20">
                <h5 class="offcanvas-title fs-18 fw-medium" id="offcanvasScrollingLabel">Configuration Panel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body p-0 overflow-hidden">
                <div class="last-child-none" style="max-height: 858px;" data-simplebar>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">RTL Mode</h4>
                        <div class="rtl-btn">
                            <label id="switch">
                                <input type="checkbox" onchange="toggleTheme()" class="toggle-switch rtl-switch" id="slider">
                            </label>
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Sidebar Dark</h4>
                        <div class="sidebar-light-dark" id="sidebar-light-dark">
                            <input type="checkbox" class="toggle-switch sidebar-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Header Dark</h4>
                        <div class="header-light-dark" id="header-light-dark">
                            <input type="checkbox" class="toggle-switch header-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Right Sidebar</h4>
                        <div class="right-sidebar" id="right-sidebar">
                            <input type="checkbox" class="toggle-switch right-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Hide Sidebar</h4>
                        <div class="icon-sidebar" id="icon-sidebar">
                            <input type="checkbox" class="toggle-switch icon-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Bordered Card</h4>
                        <div class="card-border" id="card-border">
                            <input type="checkbox" class="toggle-switch border-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Card Border Radius</h4>
                        <div class="card-radius-square" id="card-radius-square">
                            <input type="checkbox" class="toggle-switch border-radius-switch">
                        </div>
                    </div>
                    
                    <div class="p-20 border-bottom child">
                        <a href="#" class="btn btn-primary text-white">
                            Buy Fila
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Theme Setting Area -->
     
        <!-- Link Of JS File -->
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/sidebar-menu.js"></script>
        <script src="assets/js/quill.min.js"></script>
        <script src="assets/js/data-table.js"></script>
        <script src="assets/js/prism.js"></script>
        <script src="assets/js/clipboard.min.js"></script>
        <script src="assets/js/simplebar.min.js"></script>
        <script src="assets/js/apexcharts.min.js"></script>
        <script src="assets/js/echarts.min.js"></script>
        <script src="assets/js/swiper-bundle.min.js"></script>
        <script src="assets/js/fullcalendar.main.js"></script>
        <script src="assets/js/jsvectormap.min.js"></script>
        <script src="assets/js/world-merc.js"></script>
        <script src="assets/js/custom/apexcharts.js"></script>
        <script src="assets/js/custom/echarts.js"></script>
        <script src="assets/js/custom/maps.js"></script>
        <script src="assets/js/custom/custom.js"></script>
    </body>
</html>