You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
962 lines
32 KiB
962 lines
32 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head th:replace="~{fragments/head-counter :: head}"></head>
|
|
|
|
<style>
|
|
#showBookingDetails table {
|
|
width: 100%;
|
|
padding: 100px;
|
|
}
|
|
|
|
#showBookingDetails th,
|
|
td {
|
|
padding: 8px;
|
|
text-align: left;
|
|
word-wrap: break-word;
|
|
/* Break long words */
|
|
white-space: normal;
|
|
/* Allow text to wrap */
|
|
}
|
|
|
|
.otp-input {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
.otp-input-box {
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
/* Centers the box horizontally */
|
|
align-items: center;
|
|
/* Align items in the center for flex containers */
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!-- Page Container -->
|
|
<div id="page-container"
|
|
class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
|
|
<!-- Side Overlay aside (right)-->
|
|
<!-- <aside th:replace="~{fragments/aside-right :: aside}"></aside> -->
|
|
<!-- END Side Overlay (right)-->
|
|
|
|
<!-- Sidebar Nav-->
|
|
<nav th:replace="~{fragments/nav-counter :: nav}"></nav>
|
|
<!-- END Sidebar -->
|
|
|
|
<!-- Header -->
|
|
<header th:replace="~{fragments/header-counter :: header}"></header>
|
|
<!-- END Header -->
|
|
|
|
<!-- Main Container -->
|
|
<main id="main-container">
|
|
<!-- Page Content -->
|
|
<div class="content">
|
|
<div class="block block-rounded">
|
|
<div class="block-header block-header-default">
|
|
<h3 class="block-title"> List of Counter Bookings</h3>
|
|
</div>
|
|
<div class="block-content p-0">
|
|
<div class="p-sm-4 p-0">
|
|
<div class="table-responsive">
|
|
<table id="BookingdetailsList"
|
|
class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
|
|
<thead class="thead-light">
|
|
<tr class="table-bordered">
|
|
<th class="text-center no-sort">S.No</th>
|
|
<th class="text-center">Booking Id</th>
|
|
<th class="text-center">Hall Zone/Div</th>
|
|
<th class="text-center">Booking date</th>
|
|
<th class="text-center">Starting Date</th>
|
|
<th class="text-center">Ending Date</th>
|
|
<th class="text-center">No of Days</th>
|
|
<th class="text-center">Booking Status</th>
|
|
<th class="text-center">Reason for booking</th>
|
|
<th class="text-center">Booking Type</th>
|
|
<th class="text-center">View</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="list, i : ${bookinglist}" class="${bookinglist}" id="ddRow">
|
|
<td th:text="${i.count}">0</td>
|
|
<td class="text-center" th:text="${list['booking_id']}"></td>
|
|
<td class="text-center"
|
|
th:text="${list['hall_zone']} + '/' + ${list['hall_division']}"></td>
|
|
<td class="text-center" th:text="${list['booking_date']}"></td>
|
|
<td class="text-center" th:text="${list['start_date']}"></td>
|
|
<td class="text-center" th:text="${list['end_date']}"></td>
|
|
<td class="text-center" th:text="${list['no_of_days']}"></td>
|
|
<td class="text-center" th:text="${list['booking_status']}"></td>
|
|
<td class="text-center" th:text="${list['reason']}"></td>
|
|
<td th:switch="${list['event_category']}">
|
|
<p th:case="'Current'">
|
|
<span class="badge bg-primary">Current</span>
|
|
</p>
|
|
<p th:case="'Past'">
|
|
<span class="badge bg-info">Past</span>
|
|
</p>
|
|
<!-- <p th:case="'Pay'">
|
|
<a class="view-button" th:if="${list['booking_status'] == 'PENDING'}"
|
|
th:onclick="'openDDForm(' + ${list['booking_id']} + ');'">
|
|
<span class="badge bg-warning" style="cursor: pointer;">Pay</span>
|
|
</a>
|
|
</p>-->
|
|
<p th:case="'Future'">
|
|
<span class="badge bg-success">Future</span>
|
|
<a class="view-button"
|
|
th:if="${list['booking_status'] == 'APPROVED'}">
|
|
<span class="badge bg-danger" style="cursor: pointer;"
|
|
th:onclick="cancelBooking([[${list['booking_id']}]], [[${list['mobile_no']}]], [[${list['booking_type']}]])">
|
|
Cancel Booking
|
|
</span>
|
|
</a>
|
|
</p>
|
|
</td>
|
|
<td>
|
|
<a class="view-button">
|
|
<span class="badge bg-primary" style="cursor: pointer;"
|
|
th:onclick="showBookingDetails([[${list['booking_id']}]] )">View</span>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END Page Content -->
|
|
</main>
|
|
<!-- END Main Container -->
|
|
<!-- Modal for DD Details -->
|
|
<div class="modal fade backdrop" id="ddDetailsModal" data-backdrop="static" tabindex="-1" role="dialog"
|
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<form action="/counter/saveDDdetails" id="ddform" method="post" onsubmit="return submitForm()"
|
|
enctype="multipart/form-data">
|
|
<div class="block block-rounded block-themed block-transparent mb-0">
|
|
<div class="block-header bg-primary-dark">
|
|
<h3 class="block-title" id="mtitle">Add Demand Draft Number</h3>
|
|
<div class="block-options">
|
|
<button type="button" class="btn-block-option" data-bs-dismiss="modal"
|
|
aria-label="Close">
|
|
<i class="fa fa-fw fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="block-content row">
|
|
<!-- Existing form fields -->
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="bankName">Bank Name:</label>
|
|
<input type="text" class="form-control" id="bankName" name="bankName"
|
|
placeholder="Bank Name" pattern="[A-Za-z\s'-]+" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="bankAccNo">Bank Account Number:</label>
|
|
<input type="number" class="form-control" id="bankAccNo" name="bankAccNo"
|
|
placeholder="Bank Account No" minlength="8" maxlength="17" pattern="[0-9]"
|
|
required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="ddNumber">Demand Draft Number:</label>
|
|
<input type="number" class="form-control" id="ddNumber" name="ddNumber"
|
|
placeholder="DD No" minlength="6" maxlength="10" pattern="[0-9]" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="totalamount">Total Amount:</label>
|
|
<input type="number" class="form-control" id="totalamount" name="totalamount"
|
|
readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="form-group">
|
|
<lable for="amountReceived">Cheque Amount:</lable>
|
|
<input type="number" class="form-control" id="amountReceived"
|
|
name="amountReceived" required="required" pattern="[0-9]">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<input type="hidden" id="bookingId" name="bookingId">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="p1 text-center"><strong>DOCUMENTS DETAILS</strong></p>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="photoInputs">
|
|
<div class="col-md-8">
|
|
<div class="form-group">
|
|
<label for="counterddphoto" style="color:red;">Photo 1: Only (.JPEG, .JPG,
|
|
.PDF)
|
|
then uploading File size should not exceed above 1mb</label>
|
|
<input type="file" class="form-control dd-image" id="counterddphoto"
|
|
name="counterddphoto" accept="image/jpeg, image/jpg, image/pdf"
|
|
required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block-content block-content-full text-end bg-body" id="mbutton">
|
|
<button type="button" class="btn btn-sm btn-alt-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade backdrop" id="refundcounterModal" data-backdrop="static" tabindex="-1" role="dialog"
|
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<form id="docsform" enctype="multipart/form-data">
|
|
<input type="hidden" id="counterId" name="counterId" />
|
|
<div class="block block-rounded block-themed block-transparent mb-0">
|
|
<div class="block-header bg-primary-dark">
|
|
<h3 class="block-title" id="mtitle">Upload Documents</h3>
|
|
<div class="block-options">
|
|
<button type="button" class="btn-block-option" data-bs-dismiss="modal"
|
|
aria-label="Close">
|
|
<i class="fa fa-fw fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="block-content row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="photo1">Upload Letter : Only .JPEG, .JPG, .PDF </label>
|
|
<input type="file" class="form-control" id="photo1" name="uploadLetter"
|
|
accept="image/jpeg, image/jpg, application/pdf" required>
|
|
<small class="text-danger file-size-message"></small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="reason">Reason for Cancelling</label>
|
|
<input type="text" class="form-control" id="reason" name="reason" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block-content block-content-full text-end bg-body" id="mbutton">
|
|
<button type="button" class="btn btn-danger" onclick="reset()">Reset</button>
|
|
<button type="button" class="btn btn-sm btn-alt-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--showBookingDetails-->
|
|
<div class="modal fade backdrop" id="showBookingDetails" data-backdrop="static" tabindex="-1" role="dialog"
|
|
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content" id="printableContent">
|
|
|
|
<form id="regform" onsubmit="return rejectsubmit();">
|
|
<div class="block block-rounded block-themed block-transparent mb-0">
|
|
|
|
<div class="block-header bg-primary-dark">
|
|
<h3 class="block-title" id="2mtitle">Booking
|
|
Information</h3>
|
|
<div class="block-options">
|
|
<button type="button" class="btn-block-option" data-bs-dismiss="modal"
|
|
aria-label="Close">
|
|
<i class="fa fa-fw fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block-content row" style="margin: 0px;">
|
|
|
|
<div class="col-md-12 col-lg-12 col-sm-12" style="margin: 0px;">
|
|
|
|
<table>
|
|
<tr>
|
|
<th colspan="4" style="background-color: #f2f2f2; color: red;"><b>User
|
|
Details</b></th>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Name:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="name"></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Mobile
|
|
Number:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="mobileno">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Email:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="email"></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">User type:
|
|
</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="usertype">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">User Address:</th>
|
|
<td class="fw-semibold" style="text-wrap: pretty; padding: 0.45rem 0.45rem;"
|
|
id="userAddress"></td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-md-12 col-lg-12 col-sm-12">
|
|
<input type="hidden" class="form-control text-center" name="bookingid"
|
|
id="bookingid" disabled />
|
|
|
|
<table>
|
|
<tr>
|
|
<th colspan="4" style="background-color: #f2f2f2; color: red;"><b>Booking
|
|
Details</b></th>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">No of Days
|
|
Booked:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="noofdays">
|
|
</td>
|
|
<th style="padding: 0.45rem 0.45rem;">Booking
|
|
Reason:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
|
|
id="reasonforbooking"></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Booking
|
|
Deposit Amount:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
|
|
id="depositeamount">
|
|
</td>
|
|
<th style="padding: 0.45rem 0.45rem;">Hall
|
|
Amount:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="hallamount">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Amount
|
|
Received:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
|
|
id="amountreceived">
|
|
</td>
|
|
<th style="padding: 0.45rem 0.45rem;">Booking
|
|
Status:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
|
|
id="bookingstatus">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Start Date:
|
|
</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="startingdate">
|
|
</td>
|
|
<th style="padding: 0.45rem 0.45rem;">End Date:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="endingdate">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Starting slot:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="startingslot">
|
|
</td>
|
|
<th style="padding: 0.45rem 0.45rem;">Ending slot:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="endingslot">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-12 col-lg-12 col-sm-12" id="paymentsdetails" style="display:none">
|
|
|
|
<table>
|
|
<tr>
|
|
<th colspan="4" style="background-color: #f2f2f2; color: red;"><b>Payment
|
|
Details</b></th>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">
|
|
Bank Name:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="banknames">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Bant Account Number:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
|
|
id="bankaccountNumber"></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">DD
|
|
Number:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="ddnumbers">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Amount
|
|
Received:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
|
|
id="ddamountReceived">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-md-12 col-lg-12 col-sm-12">
|
|
|
|
<table>
|
|
<tr>
|
|
<th colspan="4" style="background-color: #f2f2f2; color: red;"><b>Hall
|
|
Details</b></th>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">Hall
|
|
Details:</th>
|
|
<td class="fw-semibold" style="text-wrap: pretty; padding: 0.45rem 0.45rem;"
|
|
id="hallname"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">CareTaker
|
|
Name:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
|
|
id="hallInchargeName"></td>
|
|
</tr>
|
|
<tr>
|
|
<th style="padding: 0.45rem 0.45rem;">CareTaker
|
|
PhoneNo:</th>
|
|
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
|
|
id="hallInchargeMobno"></td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="block-content block-content-full text-end bg-body" id="mbutton">
|
|
<button class="btn btn-success" onclick="printTables()"
|
|
style="background: #FB6340;">Print</button>
|
|
<button type="button" style="background-color: rgb(21, 69, 93); color: white;"
|
|
class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--OTP Form-->
|
|
<div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<form action="#" th:action="@{/otpForm}" th:object="${otpForm}" method="post"
|
|
onsubmit="return verifyOtp(); ">
|
|
<div class="modal-header">
|
|
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP Login</h6>
|
|
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
|
|
style="color:black;border: white;background-color: white;">
|
|
<span aria-hidden="true">×</span></button>
|
|
</div><!--end modal-header-->
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="mb-3 text-center">
|
|
<img src="media/images/mobileotp.png" width="50%" alt="Mobileotp">
|
|
</div>
|
|
<div class="mb-0 text-center">
|
|
<h4>OTP Verification</h4>
|
|
<p class="text-mute">Enter the OTP sent to <b class="text-info"
|
|
id="mobilenotxt"></b>
|
|
</p>
|
|
<p class="text-danger" id="otperror"></p>
|
|
</div>
|
|
<div class="mb-3 text-center">
|
|
<div class="otp-input-box">
|
|
<input type="text" maxlength="1" class="otp-input" id="otp1" required />
|
|
<input type="text" maxlength="1" class="otp-input" id="otp2" required />
|
|
<input type="text" maxlength="1" class="otp-input" id="otp3" required />
|
|
<input type="text" maxlength="1" class="otp-input" id="otp4" required />
|
|
<input type="text" maxlength="1" class="otp-input" id="otp5" required />
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 text-center">
|
|
<div id="resend-containers">
|
|
<p class="mb-0">Didn't receive OTP?</p>
|
|
<p class="mb-0 text-info" id="resendlink"></p>
|
|
</div>
|
|
</div>
|
|
</div><!--end row-->
|
|
</div><!--end modal-body-->
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-de-secondary btn-sm"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary btn-sm" id="but">Verify OTP</button>
|
|
</div><!--end modal-footer-->
|
|
</form>
|
|
</div><!--end modal-content-->
|
|
</div><!--end modal-dialog-->
|
|
</div>
|
|
|
|
<footer th:replace="~{fragments/footer2 :: footer}"></footer>
|
|
|
|
<!-- END Footer -->
|
|
</div>
|
|
|
|
<!-- END Page Container -->
|
|
|
|
|
|
|
|
<script th:replace="~{fragments/loginscript :: script}"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
// Define the buttons for exporting data
|
|
$(document).ready(
|
|
function () {
|
|
var buttons = [{
|
|
extend: 'pageLength',
|
|
className: 'btn btn-primary'
|
|
}, {
|
|
title: 'Data export',
|
|
extend: 'copyHtml5',
|
|
text: 'Copy',
|
|
className: 'btn btn-primary',
|
|
id: 'copyBtn'
|
|
}, {
|
|
extend: 'excelHtml5',
|
|
text: 'Excel',
|
|
className: 'btn btn-primary',
|
|
id: 'excelBtn'
|
|
}, {
|
|
extend: 'csvHtml5',
|
|
text: 'CSV',
|
|
className: 'btn btn-primary',
|
|
id: 'csvBtn'
|
|
}, {
|
|
extend: 'pdfHtml5',
|
|
text: 'PDF',
|
|
className: 'btn btn-primary',
|
|
id: 'pdfBtn'
|
|
},
|
|
|
|
];
|
|
$('#BookingdetailsList').DataTable(
|
|
{
|
|
dom: 'Bftip',
|
|
columnDefs: [{
|
|
targets: 'no-sort',
|
|
orderable: false
|
|
}],
|
|
lengthMenu: [
|
|
[50, 100, 200, 500, -1],
|
|
['50 rows', '100 rows', '200 rows',
|
|
'500 rows', 'Show all']],
|
|
scrollY: '50vh',
|
|
fixedColumns: {
|
|
left: 1,
|
|
right: 1
|
|
},
|
|
buttons: [buttons],
|
|
responsive: true,
|
|
searching: true, // Enable search
|
|
select: false,
|
|
processing: false,
|
|
});
|
|
|
|
// Link the search input to DataTable
|
|
$('#searchInput').on('keyup', function () {
|
|
dataTable.search(this.value).draw();
|
|
});
|
|
});
|
|
|
|
//function to get the slot value
|
|
function getTimeSlot(slotValue) {
|
|
// console.log("Slot Value in getTimeSlot function:", slotValue);
|
|
var timeSlot;
|
|
var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
|
|
if (trimmedSlotValue === '1') {
|
|
timeSlot = 'Morning';
|
|
} else if (trimmedSlotValue === '2') {
|
|
timeSlot = 'Evening';
|
|
} else {
|
|
timeSlot = 'Unknown';
|
|
}
|
|
// console.log("Time Slot:", timeSlot);
|
|
return timeSlot;
|
|
}
|
|
|
|
//Perform an ajax call to view booking details with the booking id
|
|
function showBookingDetails(bookingId) {
|
|
$.ajax({
|
|
url: '/communityhall/user/api/viewAllBookingDetails',
|
|
method: 'GET',
|
|
data: {bookingId: bookingId},
|
|
success: function (response) {
|
|
// console.log("response=", response);
|
|
document.getElementById("name").innerHTML = response.users.name;
|
|
document.getElementById("mobileno").innerHTML = response.users.mobileNo;
|
|
document.getElementById("email").innerHTML = response.users.email;
|
|
document.getElementById("usertype").innerHTML = response.users.usertype;
|
|
var userDetailsAddress = "Street:-" + response.users.street +
|
|
" Area:-" + response.users.area +
|
|
" Location:-" + response.users.location +
|
|
" Pincode:-" + response.users.pinCode;
|
|
document.getElementById("userAddress").innerHTML = userDetailsAddress
|
|
document.getElementById("noofdays").innerHTML = response.noOfDays;
|
|
document.getElementById("reasonforbooking").innerHTML = response.reason;
|
|
document.getElementById("depositeamount").innerHTML = response.depositAmount;
|
|
document.getElementById("hallamount").innerHTML = response.hallAmount;
|
|
document.getElementById("amountreceived").innerHTML = response.amountReceived;
|
|
document.getElementById("bookingstatus").innerHTML = response.bookingStatus;
|
|
document.getElementById("startingdate").innerHTML = response.startDate;
|
|
document.getElementById("endingdate").innerHTML = response.endDate;
|
|
|
|
document.getElementById("startingslot").innerHTML = getTimeSlot(response.startingSlot);
|
|
document.getElementById("endingslot").innerHTML = getTimeSlot(response.endingSlot);
|
|
var hallDetailsString = "Hall Name: " + response.hallDetails.hallName +
|
|
"Door No: " + response.hallDetails.doorNo +
|
|
"Street: " + response.hallDetails.street +
|
|
"<br>" + // Add an extra <br> to break the line after "Street"
|
|
"Area: " + response.hallDetails.area +
|
|
"Zone: " + response.hallDetails.zone +
|
|
"Division: " + response.hallDetails.division;
|
|
document.getElementById("hallname").innerHTML = hallDetailsString;
|
|
document.getElementById("hallInchargeName").innerHTML = response.hallDetails.hallInchargeName;
|
|
document.getElementById("hallInchargeMobno").innerHTML = response.hallDetails.hallInchargeMobno;
|
|
|
|
if (response.counterDetails) {
|
|
document.getElementById("paymentsdetails").style.display = "block";
|
|
document.getElementById("banknames").innerHTML = response.counterDetails.bankName;
|
|
document.getElementById("bankaccountNumber").innerHTML = response.counterDetails.bankAccNo;
|
|
document.getElementById("ddnumbers").innerHTML = response.counterDetails.ddNumber;
|
|
document.getElementById("ddamountReceived").innerHTML = response.counterDetails.amountReceived;
|
|
}
|
|
// Show the modal
|
|
$('#showBookingDetails').modal('show');
|
|
},
|
|
error: function () {
|
|
}
|
|
});
|
|
}
|
|
|
|
//function to take print
|
|
function printTables() {
|
|
// Get the printable content
|
|
var printableContent = document.getElementById('printableContent').innerHTML;
|
|
|
|
// Open a print window
|
|
var printWindow = window.open('', '', 'height=400,width=600');
|
|
|
|
// Write the printable content to the print window
|
|
printWindow.document.write('<html><head><title>Print</title></head><body>' + printableContent + '</body></html>');
|
|
|
|
// Close the print window after printing
|
|
printWindow.document.close();
|
|
printWindow.print();
|
|
printWindow.close();
|
|
}
|
|
|
|
// Function to cancel the booking
|
|
function cancelBooking(booking, mobileNo, bookingType) {
|
|
var bookingId = booking;
|
|
var mobileNum = mobileNo;
|
|
|
|
// console.log("mobileNumber", mobileNum);
|
|
// console.log("bookingId", bookingId);
|
|
|
|
// Check if the booking type is OFFLINE
|
|
if (bookingType === "ONLINE") {
|
|
Swal.fire({
|
|
title: 'Cancellation Not Available',
|
|
text: 'Cancellation is not available for online bookings.',
|
|
icon: 'error'
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
title: 'Are you sure?',
|
|
text: 'Once canceled, you cannot undo this action!',
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#3085d6',
|
|
cancelButtonColor: '#d33',
|
|
confirmButtonText: 'Yes, cancel it!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// If user confirms, show OTP form
|
|
mobileNumberForCancel = mobileNum;
|
|
cancelBookingId = bookingId;
|
|
cancelBookingLogin = true;
|
|
sendOTP(mobileNum);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
$('.otp-input').on('keyup', function (e) {
|
|
var $this = $(this);
|
|
if ($this.val().length === 1) {
|
|
$this.next('.otp-input').focus();
|
|
}
|
|
if ($this.val().length === 0) {
|
|
$this.prev('.otp-input').focus();
|
|
}
|
|
});
|
|
|
|
|
|
// Function to send OTP
|
|
function sendOTP(mobileNum) {
|
|
if (mobileNum != "" || mobileNum != undefined || mobileNum != null) {
|
|
mobileNo = mobileNum;
|
|
$("#mobilenotxt").html(mobileNo);
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/communityhall/user/api/sendOTP',
|
|
data: {'mobileNo': mobileNo, 'purpose': 'New User'},
|
|
success: function (bodyMessage) {
|
|
if (bodyMessage != "Error") {
|
|
$('#otpForm').modal({
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
$('#otpForm').modal('show');
|
|
|
|
// Resend OTP Link function
|
|
var resendTimeout;
|
|
$("#resendlink").html('Please wait..<span id="countdown">60</span>s');
|
|
var countdown = $("#countdown");
|
|
|
|
// Function to start the countdown timer
|
|
function startCountdown() {
|
|
var timeleft = 60;
|
|
countdown.text(timeleft);
|
|
|
|
resendTimeout = setInterval(function () {
|
|
timeleft--;
|
|
countdown.text(timeleft);
|
|
|
|
if (timeleft <= 0) {
|
|
clearInterval(resendTimeout);
|
|
$("#resendlink").html('<a href="#" id="resend-link" class="text-info" onclick="return sendOTP(mobileNo);">Resend OTP</a>');
|
|
}
|
|
}, 1000);
|
|
}
|
|
startCountdown(); // Start Resend OTP count
|
|
} else {
|
|
alert("OTP Not Send!!!");
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
mobileNo = $("#mobileNumber").val(); // Assuming mobile number input field has ID "mobileNumber"
|
|
$("#mobile").val(mobileNo); // Set final mobile number after request otp
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/communityhall/user/api/sendOTP',
|
|
data: {'mobileNo': mobileNo, 'purpose': 'New User'},
|
|
dataType: 'json',
|
|
success: function (bodyMessage) {
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
return false;
|
|
}
|
|
function verifyOtp() {
|
|
// console.log("cancel booking hhjjjh" + cancelBookingLogin);
|
|
var otpInputs = $('.otp-input');
|
|
var otpValue = '';
|
|
otpInputs.each(function () {
|
|
otpValue += $(this).val();
|
|
});
|
|
|
|
var mobileNoValue = 0;
|
|
if (cancelBookingLogin) {
|
|
mobileNoValue = mobileNumberForCancel;
|
|
bookingId = cancelBookingId;
|
|
} else {
|
|
mobileNoValue = $("#mobileNumber").val(); // Add your logic to get the mobile number value here
|
|
}
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/communityhall/user/api/verifyOTP',
|
|
data: {
|
|
'otp': otpValue,
|
|
'mobileNo': mobileNoValue
|
|
},
|
|
dataType: 'text',
|
|
success: function (bodyMessage) {
|
|
if (bodyMessage.trim() == "Success") {
|
|
// console.log("OTP is Verified!!!");
|
|
$('#otpForm').modal('hide'); // Hide OTP form modal
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/communityhall/user/api/cancelBookingbyId',
|
|
data: {
|
|
bookingId: bookingId,
|
|
status: 'CANCELED',
|
|
comments: 'user cancelled'
|
|
},
|
|
success: function (response) {
|
|
// console.log(response);
|
|
if (response.trim() === "success") {
|
|
Swal.fire(
|
|
'Cancelled!',
|
|
'Your booking has been cancelled.',
|
|
'success'
|
|
).then((result) => {
|
|
if (result.isConfirmed) {
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
Swal.fire(
|
|
'Error!',
|
|
'Contact Admin for cancelling.',
|
|
'error'
|
|
);
|
|
}
|
|
},
|
|
error: function () {
|
|
Swal.fire(
|
|
'Error!',
|
|
'An error occurred while cancelling the booking. Please try again.',
|
|
'error'
|
|
);
|
|
}
|
|
});
|
|
|
|
// Enable the "Select Hall" button upon successful OTP verification
|
|
$('#selectHallButton').prop('disabled', false); // Change to false to enable
|
|
} else {
|
|
$("#otperror").html("OTP is Incorrect!!!");
|
|
}
|
|
},
|
|
error: function () {
|
|
// console.log("Error verifying OTP");
|
|
}
|
|
});
|
|
return false;
|
|
}
|
|
|
|
function newPinCall() {
|
|
|
|
$('#otpForm').modal({
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
$('#otpForm').modal('hide');
|
|
return false;
|
|
}
|
|
|
|
$("#sendOTPButton").click(function (event) {
|
|
event.preventDefault();
|
|
checkMobileNo(); // Call the checkMobileNo() function first
|
|
});
|
|
|
|
//handling the submission form to save a cancellation
|
|
$(document).ready(function () {
|
|
$('#docsform').on('submit', function (event) {
|
|
event.preventDefault(); // Prevent default form submission
|
|
|
|
var formData = new FormData(this);
|
|
var counterId = $('#counterId').val();
|
|
// console.log("counterId: " + counterId);
|
|
$.ajax({
|
|
url: '/communityhall/user/api/saveCancellation',
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function (response) {
|
|
Swal.fire(
|
|
'Cancelled!',
|
|
'Your booking has been cancelled.',
|
|
'success'
|
|
).then((result) => {
|
|
if (result.isConfirmed) {
|
|
location.reload(); // Reload the page
|
|
}
|
|
});
|
|
$('#refundcounterModal').modal('hide');
|
|
$('#docsform')[0].reset();
|
|
},
|
|
error: function (response) {
|
|
Swal.fire(
|
|
'Error!',
|
|
'There was an error cancelling your booking.',
|
|
'error'
|
|
);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
function openDDForm(bookingId) {
|
|
// Set the booking ID in the hidden input field
|
|
document.getElementById('bookingId').value = bookingId;
|
|
$.ajax({
|
|
url: '/communityhall/user/api/viewAllBookingDetails',
|
|
type: 'GET',
|
|
data: {bookingId: bookingId},
|
|
success: function (response) {
|
|
$('#ddDetailsModal').modal('show');
|
|
$('#totalamount').val(response.amountReceived); // Adjust according to your response structure
|
|
},
|
|
error: function (error) {
|
|
// console.log("Error fetching booking details: ", error);
|
|
}
|
|
});
|
|
}
|
|
|
|
//function for submit the form
|
|
function submitForm() {
|
|
var bookingId = $('#ddform #bookingId').val();
|
|
if (!bookingId) {
|
|
alert("Booking ID is missing!");
|
|
return false;
|
|
}
|
|
// console.log("Submitting form with bookingId=", bookingId);
|
|
return true;
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|