<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Society Management System </title>
  <link rel="icon" type="image/png" href="assets/images/sys.png" sizes="16x16">
  <!-- remix icon font css  -->
  <link rel="stylesheet" href="assets/css/remixicon.css">
  <!-- BootStrap css -->
  <link rel="stylesheet" href="assets/css/lib/bootstrap.min.css">
  <!-- Apex Chart css -->
  <link rel="stylesheet" href="assets/css/lib/apexcharts.css">
  <!-- Data Table css -->
  <link rel="stylesheet" href="assets/css/lib/dataTables.min.css">
  <!-- Text Editor css -->
  <link rel="stylesheet" href="assets/css/lib/editor-katex.min.css">
  <link rel="stylesheet" href="assets/css/lib/editor.atom-one-dark.min.css">
  <link rel="stylesheet" href="assets/css/lib/editor.quill.snow.css">
  <!-- Date picker css -->
  <link rel="stylesheet" href="assets/css/lib/flatpickr.min.css">
  <!-- Calendar css -->
  <link rel="stylesheet" href="assets/css/lib/full-calendar.css">
  <!-- Vector Map css -->
  <link rel="stylesheet" href="assets/css/lib/jquery-jvectormap-2.0.5.css">
  <!-- Popup css -->
  <link rel="stylesheet" href="assets/css/lib/magnific-popup.css">
  <!-- Slick Slider css -->
  <link rel="stylesheet" href="assets/css/lib/slick.css">
  <!-- prism css -->
  <link rel="stylesheet" href="assets/css/lib/prism.css">
  <!-- file upload css -->
  <link rel="stylesheet" href="assets/css/lib/file-upload.css">
  <!--sweet alert-->
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <!--bootstrap css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  <link rel="stylesheet" href="assets/css/lib/audioplayer.css">
 <!--Date picker-->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/litepicker/dist/css/litepicker.css">
  <!-- main css -->
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <style>
    /* ---------------- Buttons ---------------- */
.btn-primary, .btn-primary-600 {
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
}

/* ---------------- Table Styling ---------------- */
.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.modern-table thead th {
    background: #f1f3f9;
    padding: 14px;
    font-weight: 700;
    color: #4c4f5a;
    border-bottom: 2px solid #e0e6f1;
    text-transform: uppercase;
    font-size: 14px;
}

.modern-table tbody tr {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    
}

.modern-table tbody td {
    padding: 10px;
    vertical-align: middle;
    font-size: 14px;
    color: #333;
}

.modern-table tbody tr:hover {
    transition: 0.2s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ---------------- Pagination ---------------- */
.pagination {
    margin-top: 10px;
}

.page-item .page-link {
    border-radius: 8px;
    border: none;
    background: #f0f2f6;
    color: #333;
    transition: 0.3s;
    font-weight: 500;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #007bff, #0056d2);
    color: #fff;
    font-weight: 600;
}

.page-item .page-link:hover {
    background: #007bff;
    color: #fff;
}

/* ---------------- Error Message ---------------- */
.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

    .role-dropdown {
        display: none;
        /* hidden by default */
        position: absolute;
        /* relative to parent */
        top: 100%;
        /* below input */
        left: 0;
        width: 100%;
        max-height: 200px;
        /* set max height */
        overflow-y: auto;
        /* scroll if content exceeds max-height */
        background: #fff;
        border: 1px solid #ccc;
        z-index: 1000;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .role-dropdown li {
        padding: 8px 12px;
        cursor: pointer;
    }

    .role-dropdown li:hover {
        background-color: #f0f0f0;
    }
    .chatbox1 {
        position: fixed;
        right: 0;
        top: 0;
        width: 300px;
        height: 100%;
        background-color: white;
        z-index: 9999;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
        overflow-y: scroll;
        transition: all 0.3s ease;
        display: flex;          /* ADD */
        flex-direction: column; /* ADD */
    }
    
        .swal-modern {
      border-radius: 12px !important;
      padding: 15px !important;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    }

    .swal-title {
      font-size: 18px !important;
      font-weight: 600 !important;
      margin-bottom: 5px !important;
    }

    .swal-text {
      font-size: 14px !important;
      margin-bottom: 15px !important;
    }

    .swal-modern .swal2-icon {
      transform: scale(0.75);
      margin: 10px auto;
    }

    /* Buttons */
    .swal-confirm {
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      margin-right: 5px;
    }

    .swal-cancel {
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
    }
</style>
    
<aside class="sidebar">
        <button type="button" class="sidebar-close-btn">
            <iconify-icon icon="radix-icons:cross-2"></iconify-icon>
        </button>

        <div class="sidecolor2">
            <a href="Dashboard_Main.php" style="padding-left: 20px">
                <img src="assets/images/sys.png" alt="site logo" class="light-logo" style="max-width:70px;">
            </a>
        </div>

        <div class="sidebar-menu-area">
            <ul class="sidebar-menu" id="sidebar-menu">

                
                <li>
                    <a href="society_dashboard.php">
                        <iconify-icon icon="mdi:view-dashboard" class="menu-icon"></iconify-icon>
                        <span>Society Dashboard</span>
                    </a>
                </li>
                
                   <li>
                    <a href="user_dashboard.php">
                        <iconify-icon icon="mdi:view-dashboard" class="menu-icon"></iconify-icon>
                        <span>User Dashboard</span>
                    </a>
                </li>

                <li style="padding-bottom:5px;">
                    <a href="user.php">
                        <iconify-icon icon="mdi:account-outline" class="menu-icon"></iconify-icon>
                        <span>Users</span>
                    </a>
                </li>


                <li class="dropdown">
                    <a href="javascript:void(0)">
                        <iconify-icon icon="mdi:database-outline" class="menu-icon"></iconify-icon>
                        <span>Master</span>
                    </a>
                    <ul class="sidebar-submenu">
                        <li>
                            <a href="country.php">
                                <i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i>
                                Country
                            </a>
                        </li>
                        <li>
                            <a href="state.php">
                                <i class="ri-circle-fill circle-icon text-primary-600  w-auto"></i>
                                State
                            </a>
                        </li>
                        <li>
                            <a href="city.php">
                                <i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i>
                                City
                            </a>
                        </li>
                        <li>
                            <a href="region.php">
                                <i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i>
                                Region(Area)
                            </a>
                        </li>
                        <li>
                            <a href="location.php">
                                <i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i>
                                Location
                            </a>
                        </li>
                        <!--<li>-->
                        <!--    <a href="family.php">-->
                        <!--        <i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i>-->
                        <!--        Add Family Member-->
                        <!--    </a>-->
                        <!--</li>-->
                        <!-- <li>-->
                        <!--    <a href="vehicle.php">-->
                        <!--        <i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i>-->
                        <!--       Add Vehicle-->
                        <!--    </a>-->
                        <!--</li>-->
                           <li>
                            <a href="domestic.php">
                                <i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i>
                               Add Domestic Help
                            </a>
                        </li>
                           <li>
                            <a href="amenities.php">
                                <i class="ri-circle-fill circle-icon text-primary-600 w-auto"></i>
                               Amenities
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="javascript:void(0)">
                        <iconify-icon icon="mdi:currency-inr" class="menu-icon"></iconify-icon>
                        <span>Billing & Accounting</span>
                    </a>
                    <ul class="sidebar-submenu">
                        <li>
                            <a href="maintenance_bill.php">
                                <i class="ri-circle-fill circle-icon text-warning-600 w-auto"></i>
                                Maintenance Bills
                            </a>
                        </li>
                        <li>
                            <a href="dues_payment.php">
                                <i class="ri-circle-fill circle-icon text-primary-600  w-auto"></i>
                                Track payments and dues
                            </a>
                        </li>
                        <li>
                            <a href="expense_manage.php">
                                <i class="ri-circle-fill circle-icon text-danger-600 w-auto"></i>
                                Expense management
                            </a>
                        </li>
                        <li>
                            <a href="income_manage.php">
                                <i class="ri-circle-fill circle-icon text-danger-600 w-auto"></i>
                                Income management
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="javascript:void(0)">
                       <iconify-icon icon="mdi:account-arrow-right-outline" class="menu-icon"></iconify-icon>
                        <span>Visitor Management</span>
                    </a>
                    <ul class="sidebar-submenu">
                        <li>
                            <a href="visitor_record.php">
                                <i class="ri-circle-fill circle-icon text-warning-600 w-auto"></i>
                                 Visitor Record
                            </a>
                        </li>
                        <li>
                            <a href="security_gate_management.php">
                                <i class="ri-circle-fill circle-icon text-primary-600  w-auto"></i>
                                Security Gate Management
                            </a>
                        </li>
                        <li>
                            <a href="visitor_pre_approval.php">
                                <i class="ri-circle-fill circle-icon text-primary-600  w-auto"></i>
                                Visitor Pre Approval
                            </a>
                        </li>
                    </ul>
                </li>

                
                 <li style="padding-bottom:5px;">
                    <a href="complaint.php">
                         <iconify-icon icon="mdi:alert-circle-outline" class="menu-icon"></iconify-icon>
                       <span>Complaint Management</span>
                    </a>
                </li>
                
                <li style="padding-bottom:5px;">
                    <a href="announcement_notices.php">
                        <iconify-icon icon="mdi:bullhorn-outline" class="menu-icon"></iconify-icon>
                        <span>Announcements</span>
                    </a>
                </li>
                
                <li class="menu-item">
                    <a href="notices.php">
                       <iconify-icon icon="mdi:clipboard-text-outline" class="menu-icon" width="20" height="20"></iconify-icon>
                        <span>Notice</span>
                    </a>
                </li>
                
                <li style="padding-bottom:5px;">
                    <a href="event_notify.php">
                        <iconify-icon icon="mdi:calendar-alert-outline" class="menu-icon"></iconify-icon>
                        <span>Event notifications</span>
                    </a>
                </li>
                
                <li class="dropdown">
                    <a href="javascript:void(0)">
                       <iconify-icon icon="mdi:account-arrow-right-outline" class="menu-icon"></iconify-icon>
                        <span>Flat Management</span>
                    </a>
                    <ul class="sidebar-submenu">
                        <li>
                            <a href="resident.php">
                                <i class="ri-circle-fill circle-icon text-warning-600 w-auto"></i>
                                 Maintain resident database
                            </a>
                        </li>
                        <li>
                            <a href="track_owner.php">
                                <i class="ri-circle-fill circle-icon text-primary-600  w-auto"></i>
                                Track Flat Owners
                            </a>
                        </li>
                    </ul>
                </li>
                
                <li style="padding-bottom:5px;">
                    <a href="facility_book.php">
                        <iconify-icon icon="mdi:calendar-check-outline" class="menu-icon"></iconify-icon>
                        <span>Amenity Booking</span>
                    </a>
                </li>
                
                <li class="dropdown">
                    <a href="javascript:void(0)">
                       <iconify-icon icon="mdi:account-arrow-right-outline" class="menu-icon"></iconify-icon>
                        <span>Security & Staff Management</span>
                    </a>
                    <ul class="sidebar-submenu">
                        <li>
                            <a href="staff.php">
                                <i class="ri-circle-fill circle-icon text-warning-600 w-auto"></i>
                                Staff List
                            </a>
                        </li>
                          <li>
                            <a href="staff_attendance.php">
                                <i class="ri-circle-fill circle-icon text-warning-600 w-auto"></i>
                                Staff Attendance
                            </a>
                        </li>
                        <li>
                            <a href="alert.php">
                                <i class="ri-circle-fill circle-icon text-warning-600  w-auto"></i>
                                Security alerts
                            </a>
                        </li>
                        <li>
                            <a href="delivery_entry.php">
                                <i class="ri-circle-fill circle-icon text-warning-600  w-auto"></i>
                                Delivery Entery
                            </a>
                        </li>
                    </ul>
                </li>
                
                <li>
                    <a href="package.php">
                        <iconify-icon icon="mdi:currency-usd" class="menu-icon"></iconify-icon>
                        <span>Pricing Plans</span>
                    </a>
                </li>
                
                 <li style="padding-bottom:5px;">
                    <a href="ticket.php">
                       <!-- Ticket Icon -->
                        <iconify-icon icon="mdi:ticket-confirmation-outline" class="menu-icon"></iconify-icon>
                        <span>Ticket</span>
                    </a>
                </li>
            </ul>
        </div>

    </aside>
    
    <main class="dashboard-main">
        <div class="navbar-header">
            <div class="row align-items-center justify-content-between">
                <div class="col-auto">
                    <div class="d-flex flex-wrap align-items-center gap-4">
                        <button type="button" class="sidebar-toggle">
                            <iconify-icon icon="heroicons:bars-3-solid" class="icon text-2xl non-active"></iconify-icon>
                            <iconify-icon icon="iconoir:arrow-right" class="icon text-2xl active"></iconify-icon>
                        </button>
                        <button type="button" class="sidebar-mobile-toggle">
                            <iconify-icon icon="heroicons:bars-3-solid" class="icon"></iconify-icon>
                        </button>
                    </div>
                </div>
                
                <!-- Notification dropdown start -->
                <div class="col-auto">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <div class="dropdown">
                            <button class="has-indicator w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center" type="button" data-bs-toggle="dropdown">
                                <iconify-icon icon="iconoir:bell" class="text-primary-light text-xl"></iconify-icon>
                            </button>
                            <div class="dropdown-menu to-top dropdown-menu-lg p-0">
                                <div class="m-16 py-12 px-16 radius-8 bg-primary-50 mb-16 d-flex align-items-center justify-content-between gap-2">
                                    <div>
                                        <h6 class="text-lg text-primary-light fw-semibold mb-0">Notifications</h6>
                                    </div>
                                    <span class="text-primary-600 fw-semibold text-lg w-40-px h-40-px rounded-circle bg-base d-flex justify-content-center align-items-center">05</span>
                                </div>
                                <div class="text-center py-12 px-16">
                                    <a href="javascript:void(0)" class="text-primary-600 fw-semibold text-md">See All Notification</a>
                                </div>

                            </div>
                        </div>
                <!-- Notification dropdown end -->
                <!-- Profile dropdown start -->
                <div class="dropdown">
                    <button class="d-flex justify-content-center align-items-center rounded-circle" type="button" data-bs-toggle="dropdown">
                        <img src="assets/images/sys.png" alt="image" class="w-40-px h-40-px object-fit-cover rounded-circle">
                    </button>
                    <div class="dropdown-menu to-top dropdown-menu-sm">
                        <div class="py-12 px-16 radius-8 bg-primary-50 mb-16 d-flex align-items-center justify-content-between gap-2">
                            <div>
                                <h6 class="text-lg text-primary-light fw-semibold mb-2">System Admin</h6>
                                <span class="text-secondary-light fw-medium text-sm">System Admin</span>
                            </div>
                            <button type="button" class="hover-text-danger">
                                <iconify-icon icon="radix-icons:cross-1" class="icon text-xl"></iconify-icon> 
                            </button>
                        </div>
                        
                        <ul class="to-top-list">
                            <li>
                                <a class="dropdown-item text-black px-0 py-8 hover-bg-transparent hover-text-primary d-flex align-items-center gap-3" href="my_profile.php"> 
                                <iconify-icon icon="solar:user-linear" class="icon text-xl"></iconify-icon>  My Profile</a>
                            </li>
                            <li>
                                <a class="dropdown-item text-black px-0 py-8 hover-bg-transparent hover-text-danger d-flex align-items-center gap-3" href="index.php"> 
                                <iconify-icon icon="lucide:power" class="icon text-xl"></iconify-icon>  Log Out</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- Profile dropdown end -->
                    </div>
                </div>
            </div>
        </div> 





  