<!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">Event Details</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>Events</span>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span class="text-secondary">Event Details</span>
                                </li>
                            </ol>
                        </nav>
                    </div>

                    <div class="mb-4">
                        <img src="assets/images/event-details.jpg" class="rounded-10" alt="event-details">
                    </div>
                    
                    <div class="row">
                        <div class="col-xxl-7 col-xxxl-12">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-20">
                                <h3 class="mb-20">Event Details</h3>
                                <h3 class="fs-16 mb-10">Annual Conference 2025</h3>
                                <p class="lh-1-8 fs-16 mb-10">The Annual Conference 2025 is a flagship event organized by ABC Corporation. This conference aims to bring together industry leaders, experts, and enthusiasts to discuss the latest trends, innovations, and challenges in our field. Participants can expect insightful keynote sessions, engaging panel discussions, and valuable networking opportunities.</p>
                                <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center border-border-color-50" style="margin-top: 22px; border-bottom: 1px dashed; padding-bottom: 30px; margin-bottom: 30px;">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="material-symbols-outlined d-inline-block bg-light rounded-circle text-center fs-45 text-info" style="width: 75px; height: 75px; line-height: 75px;">schedule</div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h3 class="fs-16 text-secondary mb-1">Time</h3>
                                            <span class="fs-16 text-body">01 Dec, 2025, 09:00 AM</span>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="material-symbols-outlined d-inline-block bg-light rounded-circle text-center fs-45 text-primary" style="width: 75px; height: 75px; line-height: 75px;">place</div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h3 class="fs-16 text-secondary mb-1">Location</h3>
                                            <span class="fs-16 text-body">Convention Center</span>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="material-symbols-outlined d-inline-block bg-light rounded-circle text-center fs-45 text-primary-50" style="width: 75px; height: 75px; line-height: 75px;">event_seat</div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h3 class="fs-16 text-secondary mb-1">Event Seat</h3>
                                            <span class="fs-16 text-body">50</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex flex-wrap" style="gap: 10px;">
                                    <button class="bg-primary border border-primary d-flex align-items-center gap-2 text-secondary rounded-1" style="padding: 7px 30px;">
                                        <i class="material-symbols-outlined fs-20 text-white">local_activity</i>
                                        <span class="position-relative fs-16 text-white">Get Ticket</span>
                                    </button>
                                    <button class="bg-transparent border border-border-color-50 d-flex align-items-center gap-2 text-secondary hover-bg rounded-1" style="padding: 7px 30px;">
                                        <i class="material-symbols-outlined fs-20 text-secondary">event</i>
                                        <span class="position-relative fs-16">Add To Calendar</span>
                                    </button>
                                    <button class="bg-transparent border border-border-color-50 d-flex align-items-center gap-2 text-secondary hover-bg rounded-1" style="padding: 7px 30px;">
                                        <i class="material-symbols-outlined fs-20 text-secondary">favorite_border</i>
                                        <span class="position-relative fs-16">5937</span>
                                    </button>
                                    <button class="bg-transparent border border-border-color-50 d-flex align-items-center gap-2 text-secondary hover-bg rounded-1" style="padding: 7px 30px;">
                                        <i class="material-symbols-outlined fs-20 text-secondary">share</i>
                                        <span class="position-relative fs-16">2582</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-5 col-xxxl-12">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-20">
                                <h3 class="mb-20">Event Info</h3>
                                <ul class="p-0 mb-0 list-unstyled last-child-none">
                                    <li class="fs-16 mb-11">
                                       <span class="text-secondary">08:00 AM</span> - Registration
                                    </li>
                                    <li class="fs-16 mb-11">
                                       <span class="text-secondary">09:00 AM</span> - Opening Keynote
                                    </li>
                                    <li class="fs-16 mb-11">
                                       <span class="text-secondary">10:30 AM</span> - Panel Discussion: Future Trends
                                    </li>
                                    <li class="fs-16 mb-11">
                                       <span class="text-secondary">12:00 PM</span> - Lunch Break
                                    </li>
                                    <li class="fs-16 mb-11">
                                       <span class="text-secondary">02:00 PM</span> - Interactive Workshops
                                    </li>
                                    <li class="fs-16 mb-11">
                                       <span class="text-secondary">04:30 PM</span> - Networking Reception
                                    </li>
                                </ul>
                                <h3 style="margin-top: 26px; margin-bottom: 17px;">Registration Information</h3>
                                <ul class="p-0 mb-0 list-unstyled last-child-none">
                                    <li class="fs-16 mb-11">Early Bird Registration Deadline: November 15, 2025</li>
                                    <li class="fs-16 mb-11">Standard Registration Deadline: November 30, 202</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-6 col-xxxl-12">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-20">
                                <h3 class="mb-20">About This Event</h3>
                                <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>
                                <p class="lh-1-8 fs-16">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>
                                <ul class="p-0 mb-0 list-unstyled last-child-none">
                                    <li class="d-flex align-items-center mb-10">
                                        <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                        <span class="ms-10 fs-16">Pellentesque viverra lorem malesuada nunc tristique sapien.</span>
                                    </li>
                                    <li class="d-flex align-items-center mb-10">
                                        <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                        <span class="ms-10 fs-16">Imperdiet sit hendrerit tincidunt bibendum donec adipiscing.</span>
                                    </li>
                                    <li class="d-flex align-items-center mb-10">
                                        <span class="d-block bg-info rounded-circle" style="width: 6px; height: 6px;"></span>
                                        <span class="ms-10 fs-16">Tellus non morbi nascetur cursus etiam facilisis mi.</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xxxl-12">
                            <div class="card bg-white rounded-10 border border-white mb-20 pb-20">
                                <h3 class="p-20">Speakers</h3>
                                <div class="default-table-area mx-minus-1 table-speakers">
                                    <div class="table-responsive">
                                        <table class="table align-middle">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="fw-medium">Speaker</th>
                                                    <th scope="col" class="fw-medium text-start">Topic</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-body">
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user15.jpg" class="rounded-circle" style="width: 40px; height: 40px;" alt="user15">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Walter Frazier</h3>
                                                                <span class="fs-15">Event speaker</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-start">Opening Keynote</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user5.jpg" class="rounded-circle" style="width: 40px; height: 40px;" alt="user5">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Russell Colon</h3>
                                                                <span class="fs-15">Event speaker</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-start">Panel Discussion: Future Trends</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-body">
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user6.jpg" class="rounded-circle" style="width: 40px; height: 40px;" alt="user6">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Cynthia Baggett</h3>
                                                                <span class="fs-15">Event speaker</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-start">Interactive Workshops</td>
                                                </tr>
                                                <tr class="last-child-border-none">
                                                    <td class="text-body">
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user15.jpg" class="rounded-circle" style="width: 40px; height: 40px;" alt="user15">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12">
                                                                <h3 class="fs-16">Raymond Nguyen</h3>
                                                                <span class="fs-15">Event speaker</span>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-start">Networking Reception</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </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>