<?php
// Aktifkan error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// Sertakan koneksi database
include 'koneksi.php';

if (!isset($_SESSION['admin_id'])) {
    header("Location: index");
    exit();
}

// Get all blog posts with category and admin info
$query = $pdo->query("
    SELECT 
       *
    FROM galeri
    ORDER BY created_at DESC
");
$galleries = $query->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en" dir="ltr" data-bs-theme="light" data-color-theme="Blue_Theme" data-layout="vertical">

<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Favicon icon-->
    <link rel="shortcut icon" type="image/png" href="assets/images/logos/logo.png" />

    <!-- Core Css -->
    <link rel="stylesheet" href="assets/css/styles.css" />

    <title>Master Admin</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
    <style>
        table.dataTable {
            width: 100% !important;
            table-layout: auto !important;
        }

        /* Memastikan tabel bisa di-scroll secara horizontal di layar lebar */
        @media (min-width: 992px) {
            .table-responsive {
                overflow-x: auto !important;
                white-space: nowrap !important;
            }
        }

        #table_chats_filter {
            width: 100%;
        }

        #table_chats_filter label {
            display: block;
            width: 100%;
        }

        #table_chats_filter input {
            width: 100%;
        }
    </style>

</head>

<body>
    <!-- Preloader -->
    <div class="preloader">
        <img src="assets/images/logos/logo.png" alt="loader" class="lds-ripple img-fluid" style="width: 10vw; max-width: 1000px; min-width: 100px;" />
    </div>
    <div id="main-wrapper">
        <!-- Sidebar Start -->
        <aside class="left-sidebar with-vertical">
            <div><!-- ---------------------------------- -->
                <!-- Start Vertical Layout Sidebar -->
                <!-- ---------------------------------- -->
                <!-- Sidebar scroll-->
                <nav class="sidebar-nav scroll-sidebar" data-simplebar>
                    <!-----------Profile------------------>
                    <div class="user-profile position-relative" style="background: url(assets/images/backgrounds/user-info.jpg) no-repeat;">
                        <!-- User profile image -->
                        <div class="profile-img">
                            <img src="assets/images/profile/user-1.jpg" alt="user" class="w-100 rounded-circle overflow-hidden" />
                        </div>
                        <!-- User profile text-->
                        <div class="profile-text hide-menu pt-1 dropdown">
                            <a href="javascript:void(0)" class="dropdown-toggle u-dropdown w-100 text-white
                  d-block
                  position-relative
                " id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"><?= $_SESSION['admin_username'] ?></a>
                            <div class="dropdown-menu animated flipInY" aria-labelledby="dropdownMenuLink">

                                <a class="dropdown-item d-flex gap-2" href="logout">
                                    <i data-feather="log-out" class="feather-sm text-danger "></i>
                                    Logout
                                </a>

                            </div>
                        </div>
                    </div>
                    <!-----------Profile End------------------>

                    <ul id="sidebarnav">
                        <li class="nav-small-cap">
                            <iconify-icon icon="solar:menu-dots-bold" class="nav-small-cap-icon fs-4"></iconify-icon>
                            <span class="hide-menu">Dashboard</span>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="dashboard">
                                <iconify-icon icon="bi-house" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">dashboard</span>
                            </a>
                        </li>
                        <!-- Section: Message -->
                        <li class="nav-small-cap">
                            <iconify-icon icon="solar:menu-dots-bold" class="nav-small-cap-icon fs-4"></iconify-icon>
                            <span class="hide-menu">Message</span>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=chats">
                                <iconify-icon icon="bi-chat" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Chats</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=chat_messages">
                                <iconify-icon icon="bi-envelope" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Chat Messages</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=chat_participants">
                                <iconify-icon icon="bi-person" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Chat Participants</span>
                            </a>
                        </li>

                        <!-- Section: Koperasi -->
                        <li class="nav-small-cap">
                            <iconify-icon icon="solar:menu-dots-bold" class="nav-small-cap-icon fs-4"></iconify-icon>
                            <span class="hide-menu">Koperasi</span>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=jenis_iuran">
                                <iconify-icon icon="bi-cash-coin" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Jenis Iuran</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=pembayaran_iuran">
                                <iconify-icon icon="bi-credit-card" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Pembayaran Iuran</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=ppob">
                                <iconify-icon icon="bi-coin" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">PPOB</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=transactions">
                                <iconify-icon icon="bi-wallet" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Transactions</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link" href="deposit">
                                <iconify-icon icon="bi-piggy-bank" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Deposit</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link" href="withdraw">
                                <iconify-icon icon="mdi:wallet-outline" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Withdraw</span>
                            </a>
                        </li>

                        <!-- Section: Admin -->
                        <li class="nav-small-cap">
                            <iconify-icon icon="solar:menu-dots-bold" class="nav-small-cap-icon fs-4"></iconify-icon>
                            <span class="hide-menu">Admin</span>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=menu_items">
                                <iconify-icon icon="bi-list" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Menu Items</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=setting">
                                <iconify-icon icon="bi-sliders" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Setting</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="home?tab=users">
                                <iconify-icon icon="bi-person-fill" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Users</span>
                            </a>
                        </li>
                        

                        <!-- Section: Laporan -->
                        <li class="nav-small-cap">
                            <iconify-icon icon="solar:menu-dots-bold" class="nav-small-cap-icon fs-4"></iconify-icon>
                            <span class="hide-menu">Laporan</span>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link tab-link" href="unpaid_users">
                                <iconify-icon icon="bi-exclamation-circle" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Anggota belum bayar iuran</span>
                            </a>
                        </li>
                        
                        <!-- Market Place -->
                        <li class="nav-small-cap">
                            <iconify-icon icon="solar:menu-dots-bold" class="nav-small-cap-icon fs-4"></iconify-icon>
                            <span class="hide-menu">MarketPlace</span>
                        </li>

                        <li class="sidebar-item">
                            <a class="sidebar-link" href="kategori_barang">
                                <iconify-icon icon="ph:tag-duotone" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Kategori Barang</span>
                            </a>
                        </li>

                        <li class="sidebar-item">
                            <a class="sidebar-link" href="produk">
                                <iconify-icon icon="ph:package-duotone" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Produk</span>
                            </a>
                        </li>

                        <li class="sidebar-item">
                            <a class="sidebar-link" href="history_belanja">
                                <iconify-icon icon="ph:shopping-cart-duotone" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Histori Belanja</span>
                            </a>
                        </li>

                        <li class="nav-small-cap">
                            <iconify-icon icon="solar:menu-dots-bold" class="nav-small-cap-icon fs-4"></iconify-icon>
                            <span class="hide-menu">Blogs</span>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link" href="kategori">
                                <iconify-icon icon="bi-bookmark" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Kategori</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link" href="post">
                                <iconify-icon icon="bi-file-earmark-text" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Post</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link" href="comment">
                                <iconify-icon icon="bi-chat-text" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Comment</span>
                            </a>
                        </li>
                        <li class="nav-small-cap">
                            <iconify-icon icon="solar:menu-dots-bold" class="nav-small-cap-icon fs-4"></iconify-icon>
                            <span class="hide-menu">Website Profile</span>
                        </li>

                        <li class="sidebar-item">
                            <a class="sidebar-link" href="tim">
                                <iconify-icon icon="mdi:account-group" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Tim</span>
                            </a>
                        </li>

                        <li class="sidebar-item">
                            <a class="sidebar-link active" href="galeri">
                                <iconify-icon icon="mdi:image-multiple" class="aside-icon"></iconify-icon>
                                <span class="hide-menu">Galeri</span>
                            </a>
                        </li>
                    </ul>




                </nav>

                <!-- End Sidebar scroll-->
            </div>
        </aside>
        <!--  Sidebar End -->
        <div class="page-wrapper">
            <!--  Header Start -->
            <header class="topbar rounded-0 border-0 bg-primary">
                <div class="with-vertical"><!-- ---------------------------------- -->
                    <!-- Start Vertical Layout Header -->
                    <!-- ---------------------------------- -->
                    <nav class="navbar navbar-expand-lg px-lg-0 px-3 py-0">
                        <div class="d-none d-lg-block">
                            <div class="brand-logo d-flex align-items-center justify-content-between">
                                <a href="home" class="text-nowrap logo-img d-flex align-items-center gap-2">
                                    <b class="logo-icon">
                                        <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                                        <!-- Dark Logo icon -->
                                        <img src="assets/images/logos/logo.png" alt="homepage" class="dark-logo" style="width: 5vw; max-width: 50px; min-width: 50px;" />
                                        <!-- Light Logo icon -->
                                        <img src="assets/images/logos/logo.png" alt="homepage" class="light-logo" style="width: 5vw; max-width: 50px; min-width: 50px;" />
                                    </b>
                                    <!--End Logo icon -->
                                    <!-- Logo text -->

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

                        <ul class="navbar-nav gap-2">

                            <li class="nav-item nav-icon-hover-bg rounded-circle">
                                <a class="nav-link nav-icon-hover sidebartoggler" id="headerCollapse" href="javascript:void(0)">
                                    <iconify-icon icon="solar:list-bold"></iconify-icon>
                                </a>
                            </li>
                        </ul>

                        <div class="d-block d-lg-none">
                            <div class="brand-logo d-flex align-items-center justify-content-between">
                                <a href="../main/index.html" class="text-nowrap logo-img d-flex align-items-center gap-2">
                                    <b class="logo-icon">
                                        <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                                        <!-- Dark Logo icon -->
                                        <img src="assets/images/logos/logo.png" alt="homepage" class="dark-logo" style="width: 5vw; max-width: 50px; min-width: 50px;" />
                                        <!-- Light Logo icon -->
                                        <img src="assets/images/logos/logo.png" alt="homepage" class="light-logo" style="width: 5vw; max-width: 50px; min-width: 50px;" />
                                    </b>
                                    <!--End Logo icon -->
                                    <!-- Logo text -->

                                </a>
                            </div>
                        </div>
                        <ul class="navbar-nav flex-row  gap-2 align-items-center justify-content-center d-flex d-lg-none">
                            <li class="nav-item dropdown nav-icon-hover-bg rounded-circle">
                                <a class="navbar-toggler nav-link text-white nav-icon-hover border-0" href="javascript:void(0)" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                    <span class="">
                                        <i class="ti ti-dots fs-7"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                            <div class="d-flex align-items-center justify-content-between py-2 py-lg-0">

                                <ul class="navbar-nav gap-2 flex-row ms-auto align-items-center justify-content-center">

                                    <li class="nav-item nav-icon-hover-bg rounded-circle">
                                        <a class="nav-link nav-icon-hover moon dark-layout" href="javascript:void(0)">
                                            <iconify-icon icon="solar:moon-line-duotone" class="moon"></iconify-icon>
                                        </a>
                                        <a class="nav-link nav-icon-hover sun light-layout" href="javascript:void(0)">
                                            <iconify-icon icon="solar:sun-2-line-duotone" class="sun"></iconify-icon>
                                        </a>
                                    </li>

                                    <!-- ------------------------------- -->
                                    <!-- start profile Dropdown -->
                                    <!-- ------------------------------- -->
                                    <li class="nav-item hover-dd dropdown">
                                        <a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" aria-expanded="false">
                                            <img src="assets/images/profile/user-1.jpg" alt="user" class="profile-pic rounded-circle round-30" />
                                        </a>
                                        <div class="dropdown-menu pt-0 content-dd overflow-hidden pt-0 dropdown-menu-end user-dd" aria-labelledby="drop2">
                                            <div class="profile-dropdown position-relative" data-simplebar>
                                                <div class=" py-3 border-bottom">
                                                    <div class="d-flex align-items-center px-3">
                                                        <img src="assets/images/profile/user-1.jpg" class="rounded-circle round-50" alt="" />
                                                        <div class="ms-3">
                                                            <h5 class="mb-1 fs-4"><?= $_SESSION['admin_username'] ?></h5>
                                                            <p class="mb-0 fs-2 d-flex align-items-center text-muted">
                                                                <?= $_SESSION['admin_username'] ?>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="message-body pb-3">


                                                    <div class="px-3">
                                                        <div class="py-8 px-3 d-flex justify-content-between dropdown-item align-items-center h6 mb-0  rounded-2 link">
                                                            <a href="javascript:void(0)" class="">
                                                                Mode
                                                            </a>
                                                            <div>
                                                                <a class="moon dark-layout" href="javascript:void(0)">
                                                                    <iconify-icon icon="solar:moon-line-duotone" class="moon"></iconify-icon>
                                                                </a>
                                                                <a class="sun light-layout" href="javascript:void(0)">
                                                                    <iconify-icon icon="solar:sun-2-line-duotone" class="sun"></iconify-icon>
                                                                </a>
                                                            </div>
                                                        </div>

                                                        <div class="h6 mb-0 dropdown-item py-8 px-3 rounded-2 link">
                                                            <a href="logout" class=" d-flex  align-items-center ">
                                                                Sign Out
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>

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


                                    <!-- ------------------------------- -->
                                    <!-- end profile Dropdown -->
                                    <!-- ------------------------------- -->
                                </ul>
                            </div>
                        </div>
                    </nav>
                    <!-- ---------------------------------- -->
                    <!-- End Vertical Layout Header -->
                    <!-- ---------------------------------- -->

                    <!-- ------------------------------- -->
                    <!-- apps Dropdown in Small screen -->
                    <!-- ------------------------------- -->
                    <!--  Mobilenavbar -->
                    <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="mobilenavbar" aria-labelledby="offcanvasWithBothOptionsLabel">
                        <nav class="sidebar-nav scroll-sidebar">
                            <div class="offcanvas-header justify-content-between">
                                <a href="../main/index.html" class="text-nowrap logo-img d-block">
                                    <b class="logo-icon">
                                        <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                                        <!-- Dark Logo icon -->
                                        <img src="assets/images/logos/logo.png" alt="homepage">
                                    </b>
                                    <!--End Logo icon -->
                                    <!-- Logo text -->

                                </a>
                                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                            </div>

                        </nav>
                    </div>
                </div>
                <div class="app-header with-horizontal">
                    <nav class="navbar navbar-expand-xl container-fluid">
                        <ul class="navbar-nav gap-2 align-items-center">
                            <li class="nav-item d-block d-xl-none">
                                <a class="nav-link sidebartoggler ms-n3" id="sidebarCollapse" href="javascript:void(0)">
                                    <iconify-icon icon="solar:hamburger-menu-line-duotone"></iconify-icon>
                                </a>
                            </li>
                            <li class="nav-item d-none d-xl-block">
                                <div class="brand-logo d-flex align-items-center justify-content-between">
                                    <a href="../main/index.html" class="text-nowrap logo-img d-flex align-items-center gap-2">
                                        <b class="logo-icon">
                                            <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                                            <!-- Dark Logo icon -->
                                            <img src="assets/images/logos/logo.png" alt="homepage" class="dark-logo" />
                                            <!-- Light Logo icon -->
                                            <img src="assets/images/logos/logo.png" alt="homepage" class="light-logo" />
                                        </b>
                                        <!--End Logo icon -->

                                    </a>
                                </div>
                            </li>

                            <li class="nav-item d-none d-lg-block search-box">
                                <a class="nav-link nav-icon-hover d-none d-md-flex waves-effect waves-dark" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                    <iconify-icon icon="solar:magnifer-linear"></iconify-icon>
                                </a>
                            </li>


                        </ul>


                        <a class="navbar-toggler nav-icon-hover p-0 border-0 text-white" href="javascript:void(0)" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="p-2">
                                <i class="ti ti-dots fs-7"></i>
                            </span>
                        </a>
                        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                            <div class="d-flex align-items-center justify-content-between">
                                <ul class="navbar-nav gap-2 flex-row ms-auto align-items-center justify-content-center">





                                    <!-- ------------------------------- -->
                                    <!-- start profile Dropdown -->
                                    <!-- ------------------------------- -->
                                    <li class="nav-item hover-dd dropdown">
                                        <a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" aria-expanded="false">
                                            <img src="assets/images/profile/user-1.jpg" alt="user" width="30" class="profile-pic rounded-circle" />
                                        </a>
                                        <div class="dropdown-menu pt-0 content-dd overflow-hidden pt-0 dropdown-menu-end user-dd" aria-labelledby="drop2">
                                            <div class="profile-dropdown position-relative" data-simplebar>
                                                <div class=" py-3 border-bottom">
                                                    <div class="d-flex align-items-center px-3">
                                                        <img src="assets/images/profile/user-1.jpg" class="rounded-circle round-50" alt="" />
                                                        <div class="ms-3">
                                                            <h5 class="mb-1 fs-4"><?= $_SESSION['admin_username'] ?></h5>
                                                            <p class="mb-0 fs-2 d-flex align-items-center text-muted">
                                                                <?= $_SESSION['admin_username'] ?>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="message-body pb-3">

                                                    <div class="px-3">
                                                        <div class="py-8 px-3 d-flex justify-content-between dropdown-item align-items-center h6 mb-0  rounded-2 link">
                                                            <a href="javascript:void(0)" class="">
                                                                Mode
                                                            </a>
                                                            <div>
                                                                <a class="moon dark-layout" href="javascript:void(0)">
                                                                    <iconify-icon icon="solar:moon-line-duotone" class="moon"></iconify-icon>
                                                                </a>
                                                                <a class="sun light-layout" href="javascript:void(0)">
                                                                    <iconify-icon icon="solar:sun-2-line-duotone" class="sun"></iconify-icon>
                                                                </a>
                                                            </div>
                                                        </div>

                                                        <div class="h6 mb-0 dropdown-item py-8 px-3 rounded-2 link">
                                                            <a href="../main/authentication-login.html" class=" d-flex  align-items-center ">
                                                                Sign Out
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>

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

                                    <!-- ------------------------------- -->
                                    <!-- end profile Dropdown -->
                                    <!-- ------------------------------- -->
                                </ul>
                            </div>
                        </div>
                    </nav>
                </div>
            </header>
            <!--  Header End -->



            <div class="body-wrapper">
                <div class="container-fluid">
                    <div class="font-weight-medium shadow-none position-relative overflow-hidden mb-7">
                        <div class="card-body px-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h4 class="font-weight-medium  mb-0">DataTable</h4>
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item">
                                                <a class="text-muted text-decoration-none" href="">Home
                                                </a>
                                            </li>
                                            <li class="breadcrumb-item text-muted" aria-current="page">Datatable </li>
                                        </ol>
                                    </nav>
                                </div>

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

                    <div class="datatables">
                        <div class="tab-content mt-3">
                            <div class="tab-pane fade show active">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-3">Daftar Galeri</h4>
                                        <a href='add_galeri' class='btn btn-primary mb-3'>Tambah Gambar</a>

                                        <?php if (isset($_SESSION['success'])): ?>
                                            <div class="alert alert-success alert-dismissible fade show">
                                                <?= htmlspecialchars($_SESSION['success']) ?>
                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                            </div>
                                            <?php unset($_SESSION['success']); ?>
                                        <?php endif; ?>

                                        <?php if (isset($_SESSION['error'])): ?>
                                            <div class="alert alert-danger alert-dismissible fade show">
                                                <?= htmlspecialchars($_SESSION['error']) ?>
                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                            </div>
                                            <?php unset($_SESSION['error']); ?>
                                        <?php endif; ?>

                                        <div class="table-responsive">
                                            <table id="dataTable" class="table table-striped table-bordered display nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Gambar</th>
                                                        <th>Caption</th>
                                                        <th>Created At</th>
                                                        <th>Aksi</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php foreach ($galleries as $gallery): ?>
                                                        <tr>
                                                            <td><?= htmlspecialchars($gallery['id']) ?></td>
                                                            <td>
                                                                <?php if (!empty($gallery['gambar'])): ?>
                                                                    <img src="<?= htmlspecialchars($gallery['gambar']) ?>"
                                                                        class="post-image"
                                                                        alt="Gallery Image" width="200">
                                                                <?php else: ?>
                                                                    <span class="badge bg-secondary">No Image</span>
                                                                <?php endif; ?>
                                                            </td>
                                                            <td><?= htmlspecialchars($gallery['caption']) ?></td>
                                                            <td><?= date('d/m/Y H:i', strtotime($gallery['created_at'])) ?></td>
                                                            <td>
                                                                <a href="edit_galeri?id=<?= $gallery['id'] ?>" class="btn btn-sm btn-warning me-1">
                                                                    <i class="bi bi-pencil"></i> Edit
                                                                </a>
                                                                <a href="delete_galeri?id=<?= $gallery['id'] ?>"
                                                                    class="btn btn-sm btn-danger"
                                                                    onclick="return confirm('Hapus gambar ini?')">
                                                                    <i class="bi bi-trash"></i> Delete
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    <?php endforeach; ?>
                                                </tbody>
                                            </table>
                                        </div>

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




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


    </div>

    <script src="assets/js/vendor.min.js"></script>
    <!-- Import Js Files -->
    <script src="assets/js/breadcrumb/breadcrumbChart.js"></script>
    <script src="assets/libs/apexcharts/dist/apexcharts.min.js"></script>
    <script src="assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/simplebar/dist/simplebar.min.js"></script>
    <script src="assets/js/theme/app.init.js"></script>
    <script src="assets/js/theme/theme.js"></script>
    <script src="assets/js/theme/app.min.js"></script>
    <script src="assets/js/theme/sidebarmenu.js"></script>
    <script src="assets/js/theme/feather.min.js"></script>

    <!-- solar icons -->
    <script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
    <script>
        $(document).ready(function() {
            let dataTable = $("#dataTable").DataTable({
                responsive: true,
                autoWidth: false,
                lengthMenu: [10, 25, 50, 100],
                pageLength: 10,
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan Data _MENU_",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    paginate: {
                        first: "Awal",
                        last: "Akhir",
                        next: "›",
                        previous: "‹"
                    }
                },
                dom: 'fBrtip',
                buttons: [{
                        extend: 'copy',
                        footer: true,
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'csv',
                        footer: true,
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'excel',
                        footer: true,
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'pdf',
                        footer: true,
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'print',
                        footer: true,
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    }
                ]
            });
        });
    </script>

</body>

</html>