<?php
include('dbconnect.php');
include('header.php');
?>

        <!-- ==================================================== -->
        <!-- 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 Role Edit Permissions</h4>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Users Role</a></li>
                                <li class="breadcrumb-item active">List</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <!-- ========== Page Title End ========== -->
				
					<!-- right offcanvas -->
					<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas" aria-labelledby="rightOffcanvasLabel">
						<div class="offcanvas-header">
							<h4 class="offcanvas-title mt-0" id="rightOffcanvasLabel">Invite User</h4>
							<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
						</div>
						<div class="offcanvas-body">
							<form class="row g-3" name="userForm" action="#" method="POST" onsubmit="return validateForm()">
								<div class="col-md-12">
									<label for="validationDefault01" class="form-label">User name</label>
									<input type="text" class="form-control" name="user_name" id="validationDefault01" value="Enter User Name">
								</div>
								<div class="col-md-12">
									<label for="validationDefault02" class="form-label">Mobile No.</label>
									<input type="text" class="form-control" name="user_mobile" id="validationDefault02" value="" >
								</div>
								<div class="col-md-12">
									<label for="validationDefault02" class="form-label">Email</label>
									<input type="text" class="form-control" name="user_email" id="validationDefault02" value="" >
								</div>
								<div class="col-md-12">
									<label for="validationDefault04" class="form-label">Role</label>
									<select class="form-select" name="user_role" id="validationDefault04">
										<option selected disabled value="">Choose...</option>
										<option value="ADMIN">ADMIN</option>
										<option value="STANDARD">STANDARD</option>
									</select>
								</div><br><br><br><br><br>
								<div class="col-md-6">
									<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas" >Cancel</button>
								</div>
								<div class="col-md-6">
									<button class="btn btn-primary" type="submit">Invite User</button>
								</div>
							</form>
						</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>")
                }
            }, "User Role Type",                 
            {
                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">Edit Permissions</a><a class="dropdown-item" href="javascript: void(0);" data-bs-toggle="offcanvas" data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas">Customize Columns</a></div></li>')
                }
            }],
            pagination: {
                limit: 5
            },
            sort: true,
            search: true,
            server: {
                url: 'http://localhost/realState/crm/lahomes/admin/user-role-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');
?>

 <?php
// Check if the form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Retrieve form data
	$action="<a href='javascript: void(0);' class='dropdown-toggle arrow-none text-dark' data-bs-toggle='dropdown' aria-expanded='false'>
	<i class='ri-more-2-fill'></i>
	 </a>
	 <div class='dropdown-menu dropdown-menu-end'>
		  <a class='dropdown-item' href='javascript: void(0);'><i class='ri-user-6-line me-2'></i>View Profile</a>
		  <a class='dropdown-item' href='javascript: void(0);'><i class='ri-music-2-line me-2'></i>Media, Links and Docs</a>
		  <a class='dropdown-item' href='javascript: void(0);'><i class='ri-search-2-line me-2'></i>Search</a>
		  <a class='dropdown-item' href='javascript: void(0);'><i class='ri-image-line me-2'></i>Wallpaper</a>
		  <a class='dropdown-item' href='javascript: void(0);'><i class='ri-arrow-right-circle-line me-2'></i>More</a>
	 </div>";
    
	$sql="insert into tbl_invite_user set name='".$_POST['user_name']."',email='".$_POST['user_email']."',
	mobile_no='".$_POST['user_mobile']."',role='".$_POST['user_role']."',cdate='".date('y-m-d h:i:s')."',flag=0,cuser='ADMIN',deleted_flag=0,status='ACTIVE'
	";
	$result=mysqli_query($conn,$sql);
	
	if($result==1){
		print("<script language='javascript'>alert('Requested Completed...');window.location.href='users-list.php'");
		exit;
	}
	else{
		print("<script language='javascript'>alert('Requested Incomplete Please Try Again!...');window.location.href='users-list.php'");
		exit;
	}
    
    
}

?>