GCC_Officer_Portal/target/classes/templates/modules/nulm/appointment.html

<!DOCTYPE html>
<html lang="en" dir="">
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="~{fragments/modules/base/head :: head}">

</head>

<body>
	<!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

	<div class="wrapper">
		<!-- header top menu Start -->
		<header th:replace="~{fragments/modules/base/header :: header}"></header>
		<!-- header top menu end -->

		<div class="page-wrap">
			<!--=============== Left Menu side Start ================-->
			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
			<!--=============== Left side End ================-->
			<div class="main-content">
				<div class="container-fluid">
					<div class="page-header">
						<div class="row align-items-end">
							<div class="col-lg-6">
								<div class="page-header-title">
									<i class="ik ik-thumbs-up bg-blue"></i>
									<div class="d-inline">
										<h5>NULM STAFF</h5>
										<span>Appointment</span>
									</div>
								</div>
							</div>
							<div class="col-lg-6">
								<nav class="breadcrumb-container" aria-label="breadcrumb">
									<ol class="breadcrumb">
										<li class="breadcrumb-item">
											<a href="/index"><i class="ik ik-home"></i></a>
										</li>
										<li class="breadcrumb-item active" aria-current="page">Appointment</li>
									</ol>
								</nav>
							</div>
						</div>
					</div>

					<hr>
					<div class="row align-items-center justify-content-center"
						style="color: white;background-color:#414f69 ;padding: 10px;">
						<h3 class="title resizable-content">Appoinment</h3>
					</div>



					<!-- Card Section -->
					<div class="card mt-5 p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">


						<!-- Add the resizable-content class to the card sections -->
						<div class="card mb-3 resizable-content">

							<div class="card-body">
								<div class="row">
									<div class="col-md-6 d-flex justify-content-between align-items-center">
										<label
											style="font-size: large; font-weight: 700; color: #414f69;">Order:</label>
										<select id="orderNumberDropdown" class="form-control"
											style="font-size: large; width: 70%;">
											<option value="">Select Order</option>
										</select>
									</div>
								</div>

								<div class="mt-3" id="orderDetails" style="display: none;">
									<div class="card-block" style="text-align:center;">
										<div id="chart" class="row">
											<div class="col-sm-12 col-lg-4">
												<div class="card" style="height: 100px;">
													<div class="card-body">
														<h5 class="card-title" style="font-size:14px;">Total Staff</h5>
														<p class="card-text" id="total"
															style="font-size:large; font-weight: bold;">0</p>
													</div>
												</div>
											</div>
											<div class="col-sm-12 col-lg-4">
												<div class="card" style="height: 100px;">
													<div class="card-body">
														<h5 class="card-title" style="font-size:14px;">Appointed</h5>
														<p class="card-text" id="pending"
															style="font-size: large;font-weight: bold;">0</p>
													</div>
												</div>
											</div>
											<div class="col-sm-12 col-lg-4">
												<div class="card" style="height: 100px;">
													<div class="card-body">
														<h5 class="card-title" style="font-size:14px;">Available
														</h5>
														<p class="card-text" id="notappointed"
															style="font-size: large;font-weight: bold;">0</p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<br>
								<div class="row" id="groupboxsection" style="display:none">
									<div class="col-md-6 d-flex justify-content-between align-items-center">

										<label
											style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
										<select id="grouplist" class="form-control"
											style="font-size: large; width: 70%;">
											<option value="">Select Group</option>
										</select>
									</div>
								</div>

								<!-- Appointment Date Section (Initially Hidden) -->
								<div class="row mt-3" id="appointmentSection" style="display: none;">
									<div class="col-md-6 d-flex align-items-center">
										<label
											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Appointment
											Date:</label>
										<input type="date" id="appointmentDate" class="form-control"
											style="font-size: large; width: 70%;">
									</div>
								</div>

								<!-- Orders Table Section (Initially Hidden) -->
								<div class="row mt-3" id="ordersTableSection" style="display: none;">
									<div class="col-md-12">
										<table class="table table-bordered">
											<thead>
												<tr>
													<th style="width: 10%;">
														<input type="checkbox" id="selectAll">
													</th>
													<th style="width: 30%;">Name</th>
													<th style="width: 30%;">Phone Number</th>
													<th style="width: 30%;">Address</th>
													<th style="width: 30%;">Education Qualification</th>
												</tr>
											</thead>
											<tbody id="ordersTableBody">
												<!-- Table rows will be populated here -->
											</tbody>
										</table>
									</div>
								</div>
								<div class="row mt-3" id="inchargemobilenosection" style="display: none;">
									<div class="col-md-6 d-flex align-items-center">
										<label style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Designation:</label>
										<select id="designation" class="form-control"
											style="font-size: large; width: 70%;">
											<option value="">Select Designation</option>
											<option>CI</option>
											<option>Software Developer</option>
										</select>
									</div>
									<div class="col-md-6 d-flex align-items-center">
										<label
											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Incharge
											Mobileno:</label>
										<input type="text" id="inchargemobileno" class="form-control"
											style="font-size: large; width: 70%;">
									</div>
									<div class="col-md-6 d-flex align-items-center">
										<label
											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Incharge
											Name:</label>
										<input type="text" id="inchargeName" class="form-control"
											style="font-size: large; width: 70%;">
									</div>
								</div>

							</div>
						</div>
						<div class="d-flex justify-content-center">
							<button class="btn"
								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
								id="createorder">
								Create Appointment
							</button>
						</div>

					</div>




				</div>



			</div>


		
		<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
	</div>
	</div>
	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>

	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>

	<script th:replace="~{fragments/modules/base/script :: script}"></script>
	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
	<script th:inline="javascript">



		$(document).ready(function () {
			// Function to load scheme group names
			function loadSchemeGroupNames() {
				$.ajax({
					url: '/gcc/api/nulm/getAllSchemeGroupNames', // Endpoint URL
					method: 'GET',
					dataType: 'json',
					success: function (data) {
						// Get the dropdown element
						var $dropdown = $('#schemeGroupDropdown');
						// Clear existing options
						$dropdown.empty();
						// Add the default option
						$dropdown.append('<option value="">Select Scheme Group</option>');
						// Populate the dropdown with scheme group names
						$.each(data, function (index, value) {
							$dropdown.append('<option value="' + value + '">' + value + '</option>');
						});
					},
					error: function (xhr, status, error) {
						console.error('Error fetching scheme group names:', error);
					}
				});
			}

			// Load the scheme group names when the document is ready
			loadSchemeGroupNames();
		});

$(document).ready(function () {
    // Function to load scheme group names
    function loadNotappointed() {
        $.ajax({
            url: '/gcc/api/nulm/getAllSchemeGroupNames', // Endpoint URL
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                var $dropdown = $('#grouplist');
                $dropdown.empty();
                $dropdown.append('<option value="">Select Group</option>');
                $.each(data, function (index, group) {
                    $dropdown.append('<option value="' + group.group_id + '">' + group.group_name + '</option>');
                });
            },
            error: function (xhr, status, error) {
                console.error('Error fetching scheme group names:', error);
            }
        });
    }

    // Load the scheme group names when the document is ready
    loadNotappointed();

    $('#grouplist').change(function () {
        var groupId = $(this).val();

        if (groupId) {
            $.ajax({
                url: '/gcc/api/nulm/enrollmentCountsbygroupId',
                method: 'GET',
                data: { groupId: groupId },
                dataType: 'json',
                success: function (data) {
                    console.log("data==", data);
                    function getTodayDate() {
				return new Date().toISOString().split('T')[0];
			}

                    var $ordersTableBody = $('#ordersTableBody');
                    $ordersTableBody.empty();
                    $('#appointmentSection').show();
					$('#inchargemobilenosection').show();
					$('#appointmentDate').val(getTodayDate());

                    if (data.length > 0) {
                        $.each(data, function (index, enrollment) {
                            var row = '<tr>' +
                                '<td><input type="checkbox" class="form-check-input order-checkbox" name="selectRow" value="' + enrollment.enrollment_id + '" style="margin-left:0px"></td>' +
                                '<td>' + enrollment.name + '</td>' +
                                '<td>' + enrollment.phone_number + '</td>' +
                                '<td>' + enrollment.address + '</td>' +
                                '<td>' + enrollment.education_qualification + '</td>' +
                                '</tr>';
                            $ordersTableBody.append(row);
                        });
                        $('#ordersTableSection').show();
                    } else {
                        $ordersTableBody.append('<tr><td colspan="5">No enrollments found.</td></tr>');
                        $('#ordersTableSection').show();
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching enrollment counts:', error);
                }
            });
        } else {
            $('#ordersTableSection').hide(); // Hide the table if no group is selected
            $('#appointmentSection').hide();
			$('#inchargemobilenosection').hide();
        }
        
        			$('#selectAll').click(function () {
				var isChecked = $(this).is(':checked');
				$('.order-checkbox').prop('checked', isChecked);
			});

			// Optionally, if you want to uncheck the "Select All" checkbox when any individual checkbox is unchecked
			$(document).on('click', '.order-checkbox', function () {
				if (!$(this).is(':checked')) {
					$('#selectAll').prop('checked', false);
				} else if ($('.order-checkbox:checked').length === $('.order-checkbox').length) {
					$('#selectAll').prop('checked', true);
				}
			});
    });
});



$(document).ready(function() {
    // Function to load order details
    function loadOrderDetails() {
        $.ajax({
            url: '/gcc/api/nulm/getAllOrderDetails', // Updated Endpoint URL
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                var $dropdown = $('#orderNumberDropdown');
                $dropdown.empty();
                $dropdown.append('<option value="">Select Order</option>');
                $.each(data, function(index, order) {
                    $dropdown.append('<option value="' + order.order_id + '">' + order.order_number + '</option>');
                });
            },
            error: function(xhr, status, error) {
                console.error('Error fetching order details:', error);
            }
        });
    }

    // Load order details when the document is ready
    loadOrderDetails();

    // Handle order number selection
    $('#orderNumberDropdown').change(function() {
        var orderId = $(this).val();
        var $orderDetails = $('#orderDetails');
        var $groupBoxSection = $('#groupboxsection');

        if (orderId) {
            // Display the order details and group section
            $orderDetails.show();
            $groupBoxSection.show();

            // Fetch the enrollment counts based on the selected order ID
            $.ajax({
                url: '/gcc/api/nulm/enrollmentCountsbyorderId',
                method: 'GET',
                data: { orderId: orderId },
                dataType: 'json',
                success: function(counts) {
                    // Update the values in the cards
                    $('#total').text(counts.total_count || 0);
                    $('#pending').text(counts.total_yes || 0);
                    $('#notappointed').text(counts.output_value || 0);
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching enrollment counts:', error);
                }
            });
        } else {
            // Hide the order details and group section if no order is selected
            $orderDetails.hide();
            $groupBoxSection.hide();
        }
    });
});

		$(document).ready(function () {
			// Function to load scheme group names
			function loadStaffName() {
				$.ajax({
					url: '/gcc/api/nulm/getAllStaffNames', // Endpoint URL
					method: 'GET',
					dataType: 'json',
					success: function (data) {
						// Get the dropdown element
						var $dropdown = $('#staffNameDropdown');
						// Clear existing options
						$dropdown.empty();
						// Add the default option
						$dropdown.append('<option value="">Select Staff Name</option>');
						// Populate the dropdown with scheme group names
						$.each(data, function (index, value) {
							$dropdown.append('<option value="' + value + '">' + value + '</option>');
						});
					},
					error: function (xhr, status, error) {
						console.error('Error fetching scheme group names:', error);
					}
				});
			}

			// Load the scheme group names when the document is ready
			loadStaffName();
		});
$(document).ready(function () {
    $('#createorder').click(function () {
        var totalstaff = parseInt($('#total').text(), 10); // Convert total staff to an integer
        var selectedEnrollments = [];
        var orderId = parseInt($('#orderNumberDropdown').val(), 10); // Ensure orderId is an integer
        var inchargePhoneno = $('#inchargemobileno').val(); // Get the in-charge mobile number
        var designation = $('#designation').val(); // Get the designation
        
        $('.order-checkbox:checked').each(function () {
            selectedEnrollments.push(parseInt($(this).val(), 10)); // Ensure enrollmentIds are integers
        });

        if (selectedEnrollments.length > totalstaff) {
            // Show SweetAlert if the number of selected enrollments exceeds the total staff count
            Swal.fire({
                icon: 'warning',
                title: 'Limit Exceeded',
                text: `For this order, only ${totalstaff} staff members are allowed.`
            });
        } else {
            // Proceed with the order creation logic
            $.ajax({
                url: '/gcc/api/nulm/assignAppointment',
                method: 'POST',
                contentType: 'application/json', // Set the content type to JSON
                data: JSON.stringify({
                    enrollmentIds: selectedEnrollments,
                    orderId: orderId,
                    incharge_phoneno: inchargePhoneno, // Include the in-charge mobile number
                    designation: designation // Include the designation
                }), // Convert the data to JSON string
                success: function(response) {
                    // Show SweetAlert on success
                    Swal.fire({
                        icon: 'success',
                        title: 'Order Created',
                        text: 'The order has been successfully created.',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Reload the page after SweetAlert is confirmed
                            location.reload();
                        }
                    });
                },
                error: function(xhr, status, error) {
                    // Show error message using SweetAlert
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'An error occurred while creating the order. Please try again later.'
                    });
                    console.error('Error creating order:', error);
                }
            });
        }
    });
});
</script>
</body>

</html>