<?php
include('dbconnect.php');
include('header.php');
?>
<style>
/* Ensure submenu is hidden initially */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -5px;
}

/* Show submenu when hovering over the parent item */
.dropdown-submenu:hover .dropdown-menu {
    display: block;
}

/* Optional: Style dropdown items */
.dropdown-menu .dropdown-item {
    padding: 8px 16px;
}

/* Optional: Style the dropdown menu to make it look better */
.dropdown-menu {
    min-width: 150px;
}

</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>


        <!-- ==================================================== -->
        <!-- Start right Content here -->
        <!-- ==================================================== -->

        <div class="page-content">

            <!-- Start Container Fluid -->
            <div class="container-fluid">

                <!-- ========== Page Title Start ========== -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <h4 class="mb-0 fw-semibold">Users</h4>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Users</a></li>
                                <li class="breadcrumb-item active">List</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <!-- ========== Page Title End ========== -->
				
				<div class="row">
                         <div class="col-lg-12">
                              <div class="card">
                                   <div class="card-header border-0">
                                        <div class="row justify-content-between">
                                             <div class="col-lg-6">
                                                  <div class="row align-items-center">
                                                       <!--div class="col-lg-6">
                                                            <form class="app-search d-none d-md-block me-auto">
                                                                 <div class="position-relative">
                                                                      <input type="search" class="form-control" placeholder="Search Agent" autocomplete="off" value="">
                                                                      <iconify-icon icon="solar:magnifer-broken" class="search-widget-icon"></iconify-icon>
                                                                 </div>
                                                            </form>
                                                       </div-->
                                                       <!--div class="col-lg-4">
                                                            <h5 class="text-dark fw-medium mb-0">311 <span class="text-muted"> Agent</span></h5>
                                                       </div-->
                                                  </div>
                                             </div>
                                             <div class="col-lg-6">
                                                  <div class="text-md-end mt-3 mt-md-0">
                                                       <!--button type="button" class="btn btn-outline-primary me-1"><i class="ri-settings-2-line me-1"></i>More Setting</button-->
                                                       <!--button type="button" class="btn btn-outline-primary me-1"><i class="ri-filter-line me-1"></i> Filters</button-->
                                                       <button type="button" class="btn btn-success me-1" data-bs-toggle="offcanvas" data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas" onclick="window.location.href='project-add.php';"><i class="ri-add-line"></i> New Project</button>
										
                                                  </div>
                                             </div><!-- end col-->
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>

                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
						
                            <div class="card-body">
                                <div>
                                    <div class="py-3">
                                        <div id="table-gridjs"></div>
                                    </div>
                                     

									 
                                    <div class="">
                                        <!--div class="highlight-toolbar border-top-0">
                                            <ul class="nav nav-pills">
                                                <li class="nav-item">
                                                    <a href="#gridjs-basic-html" data-bs-toggle="tab" aria-expanded="false" class="nav-link active">
                                                        <span class="fs-12 text-uppercase">html</span>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="#gridjs-basic-javascript" data-bs-toggle="tab" aria-expanded="true" class="nav-link">
                                                        <span class="fs-12 text-uppercase">javascript</span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <button class="btn btn-sm btn-outline-success btn-copy-clipboard" data-clipboard-action="copy">Copy</button>
                                        </div-->
                                        <div class="tab-content">
                                            <div class="tab-pane show active" id="gridjs-basic-html">
                                                <!--div class="code">
                                                    <pre class="language-html">
                                                        <code>
                                                            &lt;div id=&quot;table-gridjs&quot;&gt;&lt;/div&gt;
                                                        </code>
                                                    </pre>
                                                </div-->
                                            </div>
                                            <div class="tab-pane" id="gridjs-basic-javascript">
                                                <!--div class="code">
                                                    <pre class="language-javascript">
                                                    <code>
                                                        // Basic Table
                                                        if (document.getElementById("table-gridjs"))
                                                             new gridjs.Grid({
                                                                  columns: [{
                                                                       name: 'ID',
                                                                       formatter: (function (cell) {
                                                                            return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
                                                                       })
                                                                  },
                                                                       "Name",
                                                                  {
                                                                       name: 'Email',
                                                                       formatter: (function (cell) {
                                                                            return gridjs.html('<a href="#">' + cell + '</a>');
                                                                       })
                                                                  },
                                                                       "Position", "Company", "Country",
                                                                  {
                                                                       name: 'Actions',
                                                                       width: '120px',
                                                                       formatter: (function (cell) {
                                                                            return gridjs.html("<a href='#' class='text-reset text-decoration-underline'>" + "Details" + "</a>");
                                                                       })
                                                                  },
                                                                  ],
                                                                  pagination: {
                                                                       limit: 5
                                                                  },
                                                                  sort: true,
                                                                  search: true,
                                                                  data: [
                                                                       ["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
                                                                       ["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
                                                                       ["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
                                                                       ["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
                                                                       ["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
                                                                       ["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
                                                                       ["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
                                                                       ["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
                                                                       ["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
                                                                       ["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
                                                                  ]
                                                             }).render(document.getElementById("table-gridjs"));
                                                    </code>
                                                </pre>
                                                </div-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div> <!-- end card body -->

                   


                </div> <!-- end row -->

            </div>
            <!-- End Container Fluid -->
<script>

$(document).ready(function() {
    if (document.getElementById("table-gridjs")) {
        new gridjs.Grid({
            columns: [{
                name: "S.No.",
                formatter: function(e) {
                    return gridjs.html('<span class="fw-semibold">' + e + "</span>")
                }
            }, "Name","Code","City","Address","API URL","Created Date", 
            {
                name:"Status",
                formatter: function(e) {
					if(e ==0){
						return gridjs.html('<span class="badge bg-success-subtle text-success py-1 px-2 fs-13">Active</span>')
					}else{
						return gridjs.html('<span class="badge bg-danger-subtle text-danger py-1 px-2 fs-13">Inactive</span>')
					}
                }
            },                
            {
                name: "Actions",
                width: "120px",
                formatter: function(e) {
                    return gridjs.html('<li class="list-inline-item fs-20 dropdown d-none d-md-flex"><a href="javascript: void(0);" class="dropdown-toggle arrow-none text-dark show" data-bs-toggle="dropdown" aria-expanded="true"><i class="ri-more-2-fill"></i></a><div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="javascript: void(0);" data-bs-toggle="offcanvas" data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas">Reset Password</a><a class="dropdown-item" href="javascript: void(0);" data-bs-toggle="offcanvas" data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas">Edit User</a></div></li>')
                }
            }],
            pagination: {
                limit: 5
            },
            sort: true,
            search: true,
            server: {
                url: '<?php echo $base_url;?>project-fetch-data.php',  // The PHP script that fetches data
                then: data => data,     // Process the fetched data
                // You can handle any other server-side processing here if necessary
            }
        }).render(document.getElementById("table-gridjs"));
    }
});
</script>	
<script>
        // JavaScript Validation Function
        function validateForm() {
            var name = document.forms["userForm"]["user_name"].value;
			var email = document.forms["userForm"]["user_email"].value;
            var mobile = document.forms["userForm"]["user_mobile"].value;
			var role = document.forms["userForm"]["user_role"].value;
            var errorMessage = "";

            // Check if the name is empty
            if (name == "") {
                errorMessage += "Name is required.\n";
            }

            // Check if the email is empty or invalid
            var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (email == "") {
                errorMessage += "Email is required.\n";
            } else if (!emailPattern.test(email)) {
                errorMessage += "Invalid email format.\n";
            }
			
			// Check if the name is empty
            if (mobile == "") {
                errorMessage += "Mobile No. is required.\n";
            }
			
			// Check if the name is empty
            if (role == "") {
                errorMessage += "Role is required.\n";
            }

            // If there is any error, display it and prevent form submission
            if (errorMessage != "") {
                alert(errorMessage);
                return false; // prevent form submission
            }
            return true; // form is valid
        }
    </script>
	
<?php
include('footer.php');
?>

