kanimozhi
/
VictoriaHallBooking_V1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Victoria Hall Booking for Events
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.
2 Commits
1 Branch
0 Tags
98 MiB
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
VictoriaHallBooking_V1/target/classes/templates/counter/counter-booking.html

3958 lines
122 KiB
Raw Permalink Normal View History

VPH hall booking initial commit
9 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/head :: head}">
  5. </head>
  7. <style>
  8. .card {
  9. margin-top: -16px;
  10. margin-right: -116px;
  11. margin-left: -116px;
  12. }
  14. .ui-datepicker-container {
  15. width: 100%
  16. }
  20. .highlight-greens .ui-state-default {
  21. background: green !important;
  22. color: #FFF !important;
  23. }
  25. .highlight-yellow .ui-state-default {
  26. background: yellow !important;
  27. color: #000 !important;
  28. }
  30. .highlight-violet .ui-state-default {
  31. background: #a93da9 !important;
  32. color: #000 !important;
  33. }
  35. .highlight-pink .ui-state-default {
  36. background: red !important;
  37. color: #000 !important;
  38. }
  41. .btn-square-md {
  42. width: 16px !important;
  43. max-width: 100% !important;
  44. max-height: 50% !important;
  45. height: 30px !important;
  46. text-align: center;
  47. padding: 0px;
  48. font-size: 2px;
  49. }
  51. .disabled {
  52. pointer-events: none;
  53. opacity: 1;
  54. /* Example: reduce opacity to indicate disabled state */
  55. }
  59. .ui-datepicker {
  60. width: 100%;
  61. background-color: #333;
  62. /* Dark background color */
  63. }
  65. .ui-datepicker-header {
  66. background-color: #f0f0f0;
  67. /* Light gray background for header */
  68. border: none;
  69. border-radius: 5px 5px 0 0;
  70. }
  72. .ui-datepicker-title {
  73. font-size: 1.2em;
  74. margin: 0;
  75. padding: 10px;
  76. text-align: center;
  77. }
  79. .ui-datepicker-calendar {
  80. margin: 0;
  81. padding: 0;
  82. color: white;
  83. /* Text color for dates */
  84. font-weight: bold;
  85. /* Bold font for dates */
  86. }
  88. .ui-datepicker-calendar th,
  89. .ui-datepicker-calendar td {
  90. text-align: center;
  91. }
  95. .ui-datepicker-week-end {
  96. color: yellow;
  97. font-weight: bold;
  98. }
  101. /* Style for the label */
  102. .date-label {
  103. display: block;
  104. margin-bottom: 6px;
  105. font-weight: bold;
  106. }
  108. .highlight-current-date a {
  109. background-color: green;
  110. /* Current date highlight color */
  111. color: white;
  112. }
  114. .highlight-greens a {
  115. background-color: green;
  116. color: white;
  117. }
  119. .highlight-yellow a {
  120. background-color: yellow;
  121. color: black;
  122. /* Change text color for visibility */
  123. }
  125. .highlight-pink a,
  126. input[type=button]:disabled {
  127. background-color: pink;
  128. /* Pink highlight for disabled or booked dates */
  129. color: white;
  130. }
  132. .highlight-orange a {
  133. background-color: orange;
  134. /* Orange highlight color */
  135. color: white;
  136. }
  138. input[type=button]:disabled {
  139. background: red;
  140. }
  142. .hidden {
  143. display: none;
  144. }
  146. #selecthall.select2-container--default .select2-selection--single {
  147. height: 35px;
  148. border: 1px solid #ddd;
  149. padding-left: 10px;
  150. }
  152. .select2-container--default .select2-selection--single .select2-selection__rendered {
  153. color: #444;
  154. line-height: 28px;
  155. margin-top: -8px;
  156. }
  158. #hallDetailsContainer {
  159. display: flex;
  160. flex-direction: column;
  161. align-items: center;
  162. /* Center items horizontally */
  163. justify-content: center;
  164. /* Center items vertically */
  165. border: 1px solid #ccc;
  166. border-radius: 5px;
  167. padding: 20px;
  168. margin-top: 20px;
  169. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  170. background-color: #fff;
  172. }
  175. /* Style for the image */
  176. #hallImagesCarousel {
  177. margin-bottom: 20px;
  178. }
  180. .row {
  181. display: flex;
  182. flex-wrap: wrap;
  183. margin-right: 0px;
  184. margin-left: 0px;
  185. }
  187. .col-md-6 {
  188. width: 50%;
  189. padding: 0 10px;
  190. /* Optional: Add padding to columns */
  191. }
  193. @media (max-width: 768px) {
  194. .col-md-6 {
  195. width: 100%;
  196. /* Full width on smaller screens */
  197. }
  198. }
  200. #hallDetailsContainer p {
  201. margin: 0;
  202. padding: 5px 0;
  203. }
  205. #hallDetailsContainer p:nth-child(even) {
  206. background-color: #f9f9f9;
  207. }
  209. /* CSS styles for the amount details container */
  210. #amountDetailsContainer {
  211. border: 1px solid #ccc;
  212. border-radius: 5px;
  213. padding: 20px;
  214. margin-top: 20px;
  215. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  216. background-color: #fff;
  217. }
  219. #amountDetailsContainer h4 {
  220. margin-top: 0;
  221. margin-bottom: 10px;
  222. }
  224. #amountDetailsContainer div {
  225. list-style: none;
  226. padding: 0;
  227. }
  229. #amountDetailsContainer p {
  230. margin-bottom: 10px;
  231. }
  233. #amountDetailsContainer p span {
  234. font-weight: bold;
  235. }
  237. #amountDetailsContainer p:nth-child(even) {
  238. background-color: #f9f9f9;
  239. }
  241. /* Style for the image container */
  242. #hallImagesCarousel {
  243. display: flex;
  244. justify-content: center;
  245. /* Center content horizontally */
  246. align-items: center;
  247. /* Center content vertically */
  248. margin-bottom: 20px;
  249. position: relative;
  251. }
  253. /* Style for the images inside the carousel */
  254. .carousel-item img {
  255. max-width: 100%;
  256. /* Ensure image does not exceed container width */
  257. min-height: 9%;
  258. /* Maintain aspect ratio */
  259. display: block;
  260. /* Ensure image is block-level element */
  261. max-width: 100%;
  262. max-height: 100%;
  263. display: block;
  264. margin: 0 auto;
  265. /* Center the image horizontally */
  266. }
  270. .content-container {
  271. padding: 20px;
  272. }
  275. .otp-input {
  276. width: 30px;
  277. height: 30px;
  278. border: 1px solid #ccc;
  279. border-radius: 5px;
  280. text-align: center;
  281. font-size: 16px;
  282. margin-right: 10px;
  284. }
  286. /* Ensures content within these classes is centered */
  287. .modal-header,
  288. .modal-body,
  289. .modal-footer,
  290. #resend-container {
  291. text-align: center;
  292. }
  294. /* Center content with Flexbox if needed */
  295. .center-flex {
  296. display: flex;
  297. justify-content: center;
  298. align-items: center;
  299. flex-direction: column;
  300. /* Stack elements vertically */
  301. }
  303. /* Adjust the margin of the otp-input-box for better alignment */
  304. .otp-input-box {
  305. justify-content: center;
  306. margin: 0 auto;
  307. /* Centers the box horizontally */
  308. align-items: center;
  309. /* Align items in the center for flex containers */
  310. width: 100%;
  311. }
  313. .center-content {
  314. display: flex;
  315. justify-content: center;
  316. align-items: center;
  317. height: 100%;
  318. /* Or set a specific height */
  319. flex-direction: column;
  320. /* Stack children vertically */
  321. }
  323. /* To ensure the form takes up the necessary width */
  324. .form-group {
  325. width: 100%;
  326. /* Adjust based on your layout's needs */
  327. }
  329. /* Custom styles for the jQuery UI Dialog */
  330. .custom-dialog .ui-dialog-content {
  331. background-color: #fff;
  332. color: #333;
  333. padding: 20px;
  334. }
  336. .custom-dialog .ui-dialog-titlebar {
  337. background: #007bff;
  338. color: #ffffff;
  339. }
  341. .custom-dialog .ui-dialog-buttonpane {
  342. background-color: #f1f1f1;
  343. }
  345. .custom-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
  346. background-color: #007bff;
  347. color: #ffffff;
  348. border-color: #007bff;
  349. }
  351. .custom-dialog a {
  352. color: #007bff;
  353. text-decoration: none;
  354. }
  356. .custom-dialog a:hover {
  357. text-decoration: underline;
  358. }
  360. table {
  361. width: 100%;
  362. border-collapse: collapse;
  363. }
  365. th,
  366. td {
  367. border: 1px solid black;
  368. padding: 8px;
  369. text-align: center;
  370. }
  372. .date-box {
  373. border: 1px solid #ccc;
  374. padding: 10px;
  375. margin: 5px;
  376. text-align: center;
  377. background-color: #f8f9fa;
  378. border-radius: 5px;
  379. }
  381. .checkbox-label {
  382. display: block;
  383. margin-top: 5px;
  384. }
  386. #calendar {
  387. margin-top: 20px;
  388. padding: 20px;
  389. border: 1px solid #ccc;
  390. border-radius: 5px;
  391. background-color: #f8f9fa;
  392. }
  394. /* Style for date checkboxes */
  395. .date-checkboxes {
  396. margin-top: 10px;
  397. }
  399. /* Style for checkbox labels */
  400. label {
  401. margin-right: 10px;
  402. }
  405. .ui-datepicker-container {
  406. width: 100%
  407. }
  409. .fixedcontainer {
  410. width: 250%;
  411. margin: -332px 0;
  412. }
  414. .ui-widget {
  415. width: 40%
  416. }
  418. .ui-datepicker {
  419. padding: 3px;
  420. margin: 372px 0;
  421. border: 1px solid #ccc;
  422. border-radius: 5px;
  423. background-color: white;
  424. left: 29.1418px;
  425. }
  427. .ui-datepicker-header {
  428. background-color: #f0f0f0;
  429. border: none;
  430. border-radius: 5px 5px 0 0;
  431. }
  433. .ui-datepicker-title {
  434. font-size: 1.2em;
  435. margin: 0;
  436. padding: 10px;
  437. text-align: center;
  438. }
  440. .ui-datepicker-calendar {
  441. margin: 0;
  442. padding: 0;
  443. font-weight: bold;
  444. /* Bold font for dates */
  445. }
  447. .ui-datepicker-calendar th,
  448. .ui-datepicker-calendar td {
  449. padding: 5px;
  450. text-align: center;
  451. }
  453. .ui-datepicker-calendar .ui-state-default {
  454. cursor: pointer;
  455. width: 100%;
  456. height: 100%;
  457. display: flex;
  458. justify-content: center;
  459. align-items: center;
  460. }
  462. .ui-datepicker-week-end {
  463. color: black;
  464. font-weight: bold;
  465. }
  467. .ui-datepicker-calendar th span {
  468. color: black;
  469. font-weight: bold;
  470. }
  472. .booking-form-container {
  473. margin: 20px auto;
  474. padding: 20px;
  475. border: 1px solid #ddd;
  476. border-radius: 8px;
  477. background-color: #f9f9f9;
  478. max-width: 960px;
  479. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  480. }
  482. .booking-form-container label {
  483. font-weight: bold;
  484. }
  486. .booking-form-container .form-control {
  487. margin-bottom: 10px;
  488. }
  490. .booking-form-container .btn-primary {
  491. background-color: #017bff;
  492. }
  494. .white-background {
  495. background-color: white;
  496. /* Set the background color as needed */
  497. border: 1px solid #ccc;
  498. /* Optional: Add border for better visualization */
  499. padding: 20px;
  500. margin-bottom: 20px;
  501. overflow: hidden;
  502. /* Hide overflow content during animation */
  503. position: relative;
  504. }
  506. /* Example styling for animation */
  507. .slide-left {
  508. animation: slideLeft 0.5s ease both;
  509. }
  511. .slide-right {
  512. animation: slideRight 0.5s ease both;
  513. }
  515. @keyframes slideLeft {
  516. 0% {
  517. transform: translateX(0);
  518. }
  520. 100% {
  521. transform: translateX(-100%);
  522. opacity: 0;
  523. }
  524. }
  526. @keyframes slideRight {
  527. 0% {
  528. transform: translateX(-100%);
  529. opacity: 0;
  530. }
  532. 100% {
  533. transform: translateX(0);
  534. opacity: 1;
  535. }
  536. }
  538. /* Apply styles to the booking-section container */
  539. .booking-section {
  540. margin: 20px auto;
  541. padding: 20px;
  542. border: 1px solid #ddd;
  543. border-radius: 8px;
  544. background-color: #f9f9f9;
  545. max-width: 960px;
  546. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  547. }
  549. .booking-section label {
  550. font-weight: bold;
  551. }
  553. .booking-section .form-control {
  554. margin-bottom: 10px;
  555. }
  557. .booking-section .btn-primary {
  558. background-color: #017bff;
  559. }
  561. /* Apply white background to the booking-section */
  562. #reasonforbookingSection {
  563. background-color: #ffffff;
  564. /* White background color */
  565. padding: 20px;
  566. /* Optional: Add padding for spacing */
  567. }
  569. body {
  570. font-family: Arial, sans-serif;
  571. margin: 0;
  572. padding: 0;
  573. }
  575. .progressbar {
  576. display: flex;
  577. margin-bottom: 20px;
  578. }
  582. .progress-step {
  583. width: 100%;
  584. height: 9px;
  585. background-color: #e0e0e0;
  586. /* Light gray background */
  587. border-radius: 10px;
  588. /* Rounded corners */
  589. margin-right: 10px;
  590. }
  592. .progress-step-active {
  593. background-color: #4caf50;
  594. /* Green active step */
  595. color: white;
  596. /* White text color */
  597. font-weight: bold;
  598. /* Bold font for active step */
  599. }
  601. .progress {
  602. width: 100%;
  603. height: 10px;
  604. background-color: #ddd;
  605. position: relative;
  606. }
  610. .progress-step::before {
  611. content: attr(data-title);
  612. display: block;
  613. position: absolute;
  614. top: 20px;
  615. left: 50%;
  616. transform: translateX(-50%);
  617. font-size: 12px;
  618. color: #888;
  619. }
  622. .form {
  623. margin-bottom: 20px;
  624. }
  626. .form-step {
  627. display: none;
  628. margin-bottom: 20px;
  629. }
  631. .form-step-active {
  632. display: block;
  633. }
  635. .btn-prev,
  636. .btn-next {
  637. padding: 10px 20px;
  638. font-size: 14px;
  639. cursor: pointer;
  640. border: none;
  641. background-color: #337ab7;
  642. color: #fff;
  643. }
  645. .btn-prev {
  646. margin-right: 10px;
  647. }
  649. /* Media Query for small screens */
  650. @media (max-width: 768px) {
  651. .progress-step::before {
  652. display: none;
  653. /* Hide step titles on small screens */
  654. }
  655. }
  657. #container {
  658. max-width: 1000px;
  659. }
  661. .step-container {
  662. position: relative;
  663. text-align: center;
  664. transform: translateY(-60%);
  665. }
  667. .step-circle {
  668. width: 30px;
  669. height: 30px;
  670. line-height: 29px;
  671. text-align: center;
  672. border-radius: 50%;
  673. cursor: pointer;
  674. background-color: #016d6f;
  675. color: white;
  676. border: 2px solid #016d6f;
  677. }
  679. .step-circle.active {
  680. background-color: #FFFFFF;
  681. color: #016d6f;
  682. }
  684. .step-line {
  685. position: absolute;
  686. top: 16px;
  687. left: 50px;
  688. width: calc(100% - 100px);
  689. height: 2px;
  690. background-color: #FFFFFF;
  691. /* Set the line color here */
  692. z-index: -1;
  693. }
  695. #multi-step-form {
  696. overflow-x: hidden;
  697. }
  699. body {
  700. font-family: Arial, sans-serif;
  701. margin: 0;
  702. padding: 0;
  703. }
  705. .custom-container {
  706. padding: 20px;
  707. border-radius: 8px;
  708. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  709. background-color: #FFFFFF;
  710. border: 1px solid #CCCCCC;
  711. overflow: auto;
  713. }
  715. .header {
  716. z-index: 1000;
  717. margin-bottom: 20px;
  718. }
  720. .logo-img {
  721. height: 30px;
  722. position: absolute;
  723. left: 10px;
  724. top: 10px;
  725. }
  727. .header h6 {
  728. color: white;
  729. text-align: center;
  730. margin: 0;
  731. line-height: 2.1;
  732. }
  734. .invoice-details h3 {
  735. margin: 5px 0;
  736. }
  738. .invoice-details p {
  739. margin: 5px 0;
  740. /* Adjusted margin for <p> tags */
  741. }
  743. .total-section {
  744. margin-top: 20px;
  745. text-align: right;
  746. }
  748. .step-content p {
  749. display: inline-block;
  750. margin-right: 20px;
  751. margin-bottom: 20px;
  752. }
  754. .error {
  755. border: 1px solid red;
  756. }
  758. .error-message {
  759. color: red;
  760. font-size: 12px;
  761. padding-top: 5px;
  762. }
  764. /* Style for small thumbnail images */
  765. .thumbnail-img {
  766. width: 44px;
  767. /* Adjust the width as needed */
  768. height: 35px;
  769. /* Adjust the height as needed */
  770. cursor: pointer;
  771. /* Show cursor as pointer on hover */
  772. margin-right: 10px;
  773. /* Optional margin between images */
  774. }
  776. .large-image-container {
  777. position: fixed;
  778. top: 10%;
  779. left: 34%;
  780. width: 36%;
  781. height: 72%;
  782. background-color: slategrey;
  783. z-index: 1050;
  784. /* High z-index to ensure it's on top of other content */
  785. padding: 25px;
  786. box-sizing: border-box;
  787. overflow: hidden;
  788. /* Prevents scrollbars from iframe from appearing outside the container */
  789. }
  792. #largeImage {
  793. max-width: 90%;
  794. /* Limit maximum width of large image */
  795. max-height: 90vh;
  796. /* Limit maximum height of large image */
  797. display: block;
  798. /* Ensure it behaves as a block element */
  799. margin: 0 auto;
  800. /* Center horizontally */
  801. }
  803. .btn-square-md {
  804. width: 72px !important;
  805. max-width: 100% !important;
  806. max-height: 50% !important;
  807. height: 18px !important;
  808. text-align: center;
  809. padding: 0px;
  810. font-size: 2px;
  811. }
  813. .close-button {
  814. position: absolute;
  815. top: 5px;
  816. right: 5px;
  817. z-index: 1051;
  818. /* Ensure close button is above the iframe */
  819. }
  821. iframe {
  822. width: 100%;
  823. height: 100%;
  824. /* Take full size of the container minus any paddings if necessary */
  825. border: none;
  826. }
  828. #uploadedDocsList {
  829. list-style-type: none;
  830. /* Removes the bullet points */
  831. padding: 0;
  832. /* Removes padding */
  833. margin: 0;
  834. /* Removes margin */
  835. }
  837. #uploadedDocsList li {
  838. margin-bottom: 10px;
  839. /* Adds space between items */
  840. }
  842. #termsModal .table td,
  843. #termsModal .table th {
  844. padding: 0.5rem;
  845. /* Reducing padding */
  846. font-size: 0.8rem;
  847. /* Smaller font size */
  848. }
  850. .table-wrap td {
  851. white-space: normal;
  852. word-wrap: break-word;
  853. }
  855. .swal2-container {
  856. z-index: 9999999999999 !important;
  857. /* Adjust this value if needed */
  858. }
  859. </style>
  861. <body>
  862. <div id="page-container"
  863. class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
  864. <aside th:replace="~{fragments/aside-right :: aside}"></aside>
  865. <nav th:replace="~{fragments/nav-counter :: nav}"></nav>
  866. <header th:replace="~{fragments/header-counter :: header}"></header>
  867. <main id="main-container">
  868. <div class="container mt-5" id="container">
  869. <div class="card">
  870. <div class="block block-rounded block-themed block-transparent mb-0">
  871. <div class="block-header bg-primary-dark">
  872. <h3 class="block-title" id="2mtitle">User Information</h3>
  873. </div>
  874. </div>
  875. <div class="card-body">
  876. <form id="userInfoForm">
  877. <div class="col col-lg-3 col-md-3 col-sm-3">
  878. <label for="userType" class="form-label">User Type</label>
  879. <select id="usertypes" class="form-select" onchange="handleUserTypeChange()">
  880. <option value="select">Select</option>
  881. <option value="public">Public</option>
  882. </select>
  883. </div>
  884. <div id="mobileNoContainer" class="col col-lg-3 col-md-3 col-sm-3" style="display: none;">
  885. <label for="mobileNumber" class="form-label">Mobile No</label>
  886. <div class="input-group">
  887. <input type="text" id="mobileNumber" name="mobileNumber" pattern="[0-9]{10}"
  888. minlength="10" maxlength="10" class="form-control">
  890. </div>
  891. <div>
  892. <button type="button" class="btn btn-info" id="sendOTPButton">Send OTP</button>
  893. </div>
  894. </div>
  896. <br>
  897. </form>
  898. </div>
  899. </div>
  900. </div>
  901. <!--OTP Form-->
  902. <div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel"
  903. aria-hidden="true">
  904. <div class="modal-dialog" role="document">
  905. <div class="modal-content">
  906. <form action="#" th:action="@{/otpForm}" th:object="${otpForm}" method="post"
  907. onsubmit="return verifyOtp(); ">
  908. <div class="modal-header">
  909. <h6 class="modal-title m-0" id="exampleModalDefaultLabel">OTP Login</h6>
  910. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
  911. style="color:black;border: white;background-color: white;">
  912. <span aria-hidden="true">&times;</span></button>
  913. </div><!--end modal-header-->
  914. <div class="modal-body">
  915. <div class="row">
  916. <div class="mb-3 text-center">
  917. <img src="media/images/mobileotp.png" width="50%" alt="Mobileotp">
  918. </div>
  919. <div class="mb-0 text-center">
  920. <h4>OTP Verification</h4>
  921. <p class="text-mute">Enter the OTP sent to <b class="text-info"
  922. id="mobilenotxt"></b>
  923. </p>
  924. <p class="text-danger" id="otperror"></p>
  925. </div>
  926. <div class="mb-3 text-center">
  927. <div class="otp-input-box">
  928. <input type="text" maxlength="1" class="otp-input" id="otp1" required />
  929. <input type="text" maxlength="1" class="otp-input" id="otp2" required />
  930. <input type="text" maxlength="1" class="otp-input" id="otp3" required />
  931. <input type="text" maxlength="1" class="otp-input" id="otp4" required />
  932. <input type="text" maxlength="1" class="otp-input" id="otp5" required />
  933. </div>
  934. </div>
  935. <div class="mb-3 text-center">
  936. <div id="resend-containers">
  937. <p class="mb-0">Didn't receive OTP?</p>
  938. <p class="mb-0 text-info" id="resendlink"></p>
  939. </div>
  940. </div>
  941. </div><!--end row-->
  942. </div><!--end modal-body-->
  943. <div class="modal-footer">
  944. <button type="button" class="btn btn-de-secondary btn-sm"
  945. data-bs-dismiss="modal">Close</button>
  946. <button type="submit" class="btn btn-primary btn-sm" id="but">Verify OTP</button>
  947. </div><!--end modal-footer-->
  948. </form>
  949. </div><!--end modal-content-->
  950. </div><!--end modal-dialog-->
  951. </div>
  953. <!-- Registration Modal -->
  954. <div class="modal fade" id="registrationModal" tabindex="-1" aria-labelledby="registrationModalLabel"
  955. aria-hidden="true">
  956. <div class="modal-dialog modal-lg">
  957. <div class="modal-content">
  958. <div class="modal-header">
  959. <h5 class="modal-title" id="registrationModalLabel">Register</h5>
  960. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  961. </div>
  962. <div class="modal-body">
  963. <div class="tab-pane fade show active" id="register" role="tabpanel"
  964. aria-labelledby="register-tab">
  965. <form id="counterform" method="post" name="counterform"
  966. onsubmit="return validateUserType();" enctype="multipart/form-data">
  968. <div class="row">
  969. <div class="col-sm-4" style="margin-left:0%">
  970. <div class="form-group">
  971. <label for="userType">User Type:<span
  972. class="required-field">*</span></label>
  973. <select class="form-control" id="userType" name="usertype"
  974. placeholder="User Type">
  975. <option value="PUBLIC">General Public</option>
  976. </select>
  977. </div>
  978. </div>
  979. <!--<div class="hidden" id="employeeFields" style="display:none">
  980. <div class="row">
  981. <div class="col-sm-3">
  982. <div class="form-group">
  983. <label for="employeeId">Employee ID<span
  984. class="required">*</span>:</label>
  985. <input type="text" class="form-control" id="employeeId"
  986. name="employeeId" placeholder="Employee ID">
  987. </div>
  988. </div>
  989. <div class="col-sm-3">
  990. <div class="form-group">
  991. <label for="employeename">Employee Name<span
  992. class="required">*</span>:</label>
  993. <input type="text" class="form-control" id="employeename"
  994. name="employeename" placeholder="Employee Name">
  995. </div>
  996. </div>
  997. </div>
  998. </div>
  999. <div class="hidden" id="pensionerFields" style="display:none">
  1000. <div class="row">
  1001. <div class="col-sm-6">
  1002. <label for="pensionerId">Pensioner ID<span
  1003. class="required">*</span>:</label>
  1004. <input type="text" class="form-control" id="pensionerId"
  1005. name="pensionerId" placeholder="Pensioner ID">
  1006. </div>
  1007. <div class="col-sm-6">
  1008. <label for="pensionername">Pensioner Name<span
  1009. class="required">*</span>:</label>
  1010. <input type="text" class="form-control" id="pensionername"
  1011. name="pensionername" placeholder="Pensioner Name" disabled>
  1012. </div>
  1013. </div>
  1014. <div id="validationResult"></div>
  1015. </div>
  1016. <div class="hidden" id="familypensionerFields" style="display:none">
  1017. <div class="row">
  1018. <div class="col-sm-6">
  1019. <label for="familypensionerId">Pensioner ID<span
  1020. class="required">*</span>:</label>
  1021. <input type="text" class="form-control" id="familypensionerId"
  1022. name="pensionerId" placeholder="Pensioner ID">
  1023. </div>
  1024. <div class="col-sm-6">
  1025. <label for="familypensionername">Pensioner Name<span
  1026. class="required">*</span>:</label>
  1027. <input type="text" class="form-control" id="familypensionername"
  1028. name="familypensionername" placeholder="Pensioner Name"
  1029. disabled>
  1030. </div>
  1031. </div>
  1032. <div id="validationResult"></div>
  1033. </div>-->
  1034. </div>
  1035. <!-- Registration Form Fields -->
  1036. <div class="row">
  1037. <div class="col-sm-4">
  1038. <div class="form-group">
  1039. <label for="name">Name:<span class="required-field">*</span></label>
  1040. <input type="text" class="form-control" id="name" name="name"
  1041. placeholder="First Name" required>
  1042. </div>
  1043. </div>
  1044. <div class="col-sm-4">
  1045. <div class="form-group">
  1046. <label for="mobileno">Mobile Number:<span
  1047. class="required-field">*</span></label>
  1048. <input type="text" class="form-control" id="mobileno" name="mobileNo"
  1049. placeholder="Mobile No" minlength="10" maxlength="10"
  1050. pattern="[0-9]{10}"
  1051. onkeypress="return event.charCode >= 48 && event.charCode <= 57"
  1052. required>
  1053. </div>
  1054. </div>
  1055. <div class="col-sm-4">
  1056. <div class="form-group">
  1057. <label for="mobileno">Aadhar Number:<span
  1058. class="required-field">*</span></label>
  1059. <input type="text" class="form-control" id="aadharnumber"
  1060. name="aadharnumber"
  1061. placeholder="Aadhar No" minlength="12" maxlength="12"
  1062. pattern="[0-9]{12}"
  1063. onkeypress="return event.charCode >= 48 && event.charCode <= 57"
  1064. required>
  1065. </div>
  1066. </div>
  1068. </div>
  1069. <div class="row">
  1070. <div class="col-sm-4">
  1071. <div class="form-group">
  1072. <label for="userPhoto">Profile Photo:</label>
  1073. <input type="file" class="form-control hall-image file-upload-field"
  1074. id="userPhoto" name="userPhoto"
  1075. accept="image/jpeg, image/png, image/gif">
  1076. </div>
  1077. </div>
  1078. <div class="col-sm-4">
  1079. <div class="form-group">
  1080. <label for="email">E-Mail ID:</label>
  1081. <input type="email" class="form-control" id="email" name="email"
  1082. placeholder="email" maxlength="255">
  1083. </div>
  1084. </div>
  1085. <div class="col-sm-4">
  1086. <div class="form-group">
  1087. <label for="doorNo">Door No:<span
  1088. class="required-field">*</span></label>
  1089. <input type="text" class="form-control" id="doorNo" name="doorNo"
  1090. placeholder="doorNo" required>
  1091. </div>
  1092. </div>
  1093. </div>
  1094. <div class="row">
  1095. <div class="col-sm-4">
  1096. <div class="form-group">
  1097. <label for="street">Street:<span class="required-field">*</span></label>
  1098. <input type="text" class="form-control" id="street" name="street"
  1099. placeholder="street" required>
  1100. </div>
  1101. </div>
  1102. <div class="col-sm-4">
  1103. <div class="form-group">
  1104. <label for="area">Area:<span class="required-field">*</span></label>
  1105. <input type="area" class="form-control" id="area" name="area"
  1106. placeholder="area" required>
  1107. </div>
  1108. </div>
  1109. <div class="col-sm-4">
  1110. <div class="form-group">
  1111. <label for="location">Location:<span
  1112. class="required-field">*</span></label>
  1113. <input type="text" class="form-control" id="location" name="location"
  1114. placeholder="location" required>
  1115. </div>
  1116. </div>
  1117. <div class="col-sm-4">
  1118. <div class="form-group">
  1119. <label for="pincode">Pincode:<span
  1120. class="required-field">*</span></label>
  1121. <input type="text" class="form-control" id="pincode" name="pinCode"
  1122. placeholder="pincode" minlength="6" maxlength="6" pattern="[0-9]{6}"
  1123. onkeypress="return event.charCode >= 48 && event.charCode <= 57"
  1124. required>
  1125. </div>
  1126. </div>
  1127. </div>
  1129. <div class="form-row">
  1130. <div class="col text-center">
  1131. <button type="submit" class="btn btn-primary"
  1132. style="background-color: #2c726c !important">Submit</button>
  1133. </div>
  1134. </div>
  1135. </form>
  1136. </div>
  1137. </div>
  1138. </div>
  1139. </div>
  1140. </div>
  1141. <!--Profile modal-->
  1142. <div class="card" id="profileCard" tabindex="-1" aria-labelledby="profileCardLabel"
  1143. style="display: none; margin-top: 35px; margin-left: 25px; margin-right: 25px;" aria-hidden="true">
  1144. <div class="block-header bg-primary-dark">
  1145. <h5 class="modal-title" id="profileCardLabel" style="color: white;">User Details</h5>
  1146. </div>
  1147. <div class="card-body">
  1148. <div class="row">
  1149. <div class="col-sm-4">
  1150. <div
  1151. style="border-radius: 50%; overflow: hidden; width: 110px; height: 110px; margin: 0 auto; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);">
  1152. <img id="p_image_card" name="p_image_card" style="width: 100%; height: 100%;" alt="-">
  1153. </div>
  1154. </div>
  1155. <div class="col-sm-8">
  1156. <div class="row">
  1157. <div class="col-sm-6">
  1158. <label for="p_name_card">Name:</label>
  1159. <input type="text" class="form-control" id="p_name_card" readonly>
  1160. </div>
  1161. <div class="col-sm-6">
  1162. <label for="p_email_card">Email:</label>
  1163. <input type="text" class="form-control" id="p_email_card" readonly>
  1164. </div>
  1165. <div class="col-sm-6">
  1166. <label for="p_mobnum_card">Mobile No:</label>
  1167. <input type="text" class="form-control" id="p_mobnum_card" readonly>
  1168. </div>
  1169. <div class="col-sm-6">
  1170. <label for="p_doornum_card">Door no:</label>
  1171. <input type="text" class="form-control" id="p_doornum_card" readonly>
  1172. </div>
  1173. <div class="col-sm-6">
  1174. <label for="p_area_card">Area:</label>
  1175. <input type="text" class="form-control" id="p_area_card" readonly>
  1176. </div>
  1177. <div class="col-sm-6">
  1178. <label for="p_location_card">Location:</label>
  1179. <input type="text" class="form-control" id="p_location_card" readonly>
  1180. </div>
  1181. <div class="col-sm-6">
  1182. <label for="p_pincode_card">Pincode:</label>
  1183. <input type="text" class="form-control" id="p_pincode_card" readonly>
  1184. </div>
  1185. <div class="col-sm-6">
  1186. <label for="p_userstatus_card">User Status:</label>
  1187. <input type="text" class="form-control" id="p_userstatus_card" readonly>
  1188. </div>
  1189. </div>
  1190. </div>
  1191. </div>
  1192. <div class="row mt-3">
  1193. <div class="col-sm-6">
  1194. <button type="button" class="btn btn-secondary" id="backButton">Back</button>
  1195. </div>
  1196. <div class="col-sm-6 text-end">
  1197. <button type="button" class="btn btn-primary" id="nextButton">Next</button>
  1198. </div>
  1199. </div>
  1200. </div>
  1201. </div>
  1202. <!--Hallbooking Form-->
  1203. <div class="card" id="nextPageCard" tabindex="-1" aria-labelledby="nextPageCardLabel"
  1204. style="display: none; margin-top: 35px; margin-left: 25px; margin-right: 25px;" aria-hidden="true">
  1206. <div class="block-header bg-primary-dark">
  1207. <h5 class="modal-title" id="nextPageCardLabel" style="color:white">Hall Booking Details</h5>
  1208. </div>
  1209. <div class="card-body">
  1210. <br>
  1211. <div class="progress px-1" style="height: 3px;">
  1212. <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0"
  1213. aria-valuemin="0" aria-valuemax="100">
  1214. </div>
  1215. </div>
  1216. <div class="step-container d-flex justify-content-between">
  1217. <div class="step-circle" onclick="displayStep(1)">1</div>
  1218. <div class="step-circle" onclick="displayStep(2)">2</div>
  1219. <div class="step-circle" onclick="displayStep(3)">3</div>
  1220. <div class="step-circle" onclick="displayStep(4)">4</div>
  1221. </div>
  1222. </br>
  1223. <form action="javascript:void(0);" id="booking" method="post" enctype="multipart/form-data"
  1224. onsubmit="return saveCounterBooking()">
  1225. <input type="hidden" id="serverDate" th:value="${serverDate}">
  1226. <div class="step step-1">
  1227. <div class="container custom-container"
  1228. style="padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;overflow-x: hidden;">
  1229. <!-- Updated inline styles -->
  1230. <div class="row justify-content-center">
  1231. <div class="col-sm-6 col-md-6 col-lg-6">
  1232. <label class="form-check-label" for="selecthall">Select Hall:</label>
  1233. <select id="selecthall" class="form-control" name="hallId" required
  1234. onchange="toggleHallDetailsContainer()">
  1235. <option value="">Select a hall</option>
  1236. </select>
  1237. </div>
  1238. </div>
  1239. <br>
  1240. <!-- Main content row -->
  1241. <div id="hallDetailsContainer" style="display: none;">
  1242. <!-- Initially hidden -->
  1243. <div class="row">
  1244. <!-- Hall Images Carousel -->
  1245. <div class="col-md-6 col-lg-6 col-sm-6">
  1246. <h6>Hall Images:</h6>
  1247. <br>
  1248. <div id="hallImagesCarousel" class="carousel slide" data-ride="carousel">
  1249. <div class="carousel-inner">
  1250. <div class="carousel-item active">
  1251. <img id="hallImage" class="d-block w-100" alt="Hall Image">
  1252. </div>
  1253. </div>
  1254. <a class="carousel-control-prev" href="#hallImagesCarousel"
  1255. role="button" data-slide="prev">
  1256. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  1257. <span class="sr-only">Previous</span>
  1258. </a>
  1259. <a class="carousel-control-next" href="#hallImagesCarousel"
  1260. role="button" data-slide="next">
  1262. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  1264. <span class="sr-only">Next</span>
  1266. </a>
  1268. </div>
  1269. </div>
  1270. <div class="col-md-6 col-lg-6 col-sm-6">
  1271. <div id="datepicker-container" class="fixedcontainer"></div>
  1272. <div class="row">
  1273. <div class="col col-lg-2 col-sm-2 col-md-2">
  1274. <button type="button" class="btn btn-primary btn-square-md"
  1275. style="background-color:#008000;"></button>
  1276. <span style="margin-left: 21px;">Day<br>
  1277. (Available)</span>
  1278. </div>
  1279. <div class="col col-lg-2 col-sm-2 col-md-2">
  1280. <button type="button" class="btn btn-primary btn-square-md"
  1281. style="background-color: #ac2bac;"></button>
  1282. <span style="margin-left: 14px;">Morning <br>
  1283. &nbsp;&nbsp;(Available)</span>
  1284. </div>
  1285. <div class="col col-lg-2 col-sm-2 col-md-2">
  1286. <button type="button" class="btn btn-primary btn-square-md"
  1287. style="background-color:#FFEA00;"></button>
  1288. <span style="margin-left: 14px;">Evening<br>
  1289. &nbsp;&nbsp;(Available)</span>
  1290. </div>
  1291. <div class="col col-lg-2 col-sm-2 col-md-2">
  1292. <button type="button" class="btn btn-primary btn-square-md"
  1293. style="background-color: red;"></button>
  1294. <span style="margin-left: 14px;">Not Available</span>
  1295. </div>
  1296. </div>
  1297. </div>
  1298. <br>
  1299. <!-- Hall Details -->
  1300. <!--<div class="col-md-6 col-lg-6 col-sm-6">
  1301. <div id="hallDetails">
  1302. <br>
  1303. <h6>Hall Details:</h6>
  1304. <p>Zone: <span id="zone"></span></p>
  1305. <p>Division: <span id="division"></span>
  1306. </p>
  1307. <p>Address: <span id="address"></span>
  1308. </p>
  1309. <p>Landmark: <span id="landmark"></span>
  1310. </p>
  1311. <p>Seating Capacity: <span id="seatingCapacity"></span></p>
  1312. <p>Parking Capacity: <span
  1313. id="parkingCapacity"></span></p>
  1314. <input type="hidden" id="statichallId">
  1315. <p>CareTaker Number: <span id="caretakerNumber"></span></p>
  1316. </div>
  1317. </div>-->
  1318. <div class="col-md-6 col-lg-6 col-sm-6">
  1319. <div id="hallDetails">
  1320. <br>
  1321. <h6><b>Hall Details:</b></h6>
  1322. <p>Zone: <span id="zone"></span></p>
  1323. <p>Address: <span id="address"></span></p>
  1324. <p>Landmark: <span id="landmark"></span></p>
  1325. <p>Total Area: <span
  1326. id="hallareainsqft"></span></p>
  1327. <p>Seating Capacity: <span
  1328. id="seatingCapacity"></span></p>
  1329. <p>Parking Capacity: <span
  1330. id="parkingCapacity"></span></p>
  1331. <input type="hidden" id="statichallId">
  1332. </div>
  1333. </div>
  1334. <br>
  1335. <!-- Amount Details -->
  1336. <!--<div class="col-md-6 col-lg-6 col-sm-6">
  1337. <div id="amountDetails">
  1338. <br>
  1339. <h6>Amount Details:</h6>
  1340. <p>Security Deposit: Rs <span id="rentAmount"></span></p>
  1341. <p>Full Day Rent: Rs <span id="fullDayAmount"></span></p>
  1342. <p>Half Day Rent: Rs <span id="halfDayAmount"></span></p>
  1343. <p>GST: <span id="gst"></span>%</p>
  1344. <p>EB for 1 Unit: Rs <span id="ebunit"></span></p>
  1345. <input type="hidden" id="depositAmount" name="depositamount"
  1346. value="100">
  1347. <input type="hidden" id="hallamount" name="hallamount" value="100">
  1348. </div>
  1350. </div>-->
  1352. <div class="col-md-6 col-lg-6 col-sm-6">
  1353. <div id="amountDetails">
  1354. <br>
  1355. <h6><b>Amount Details:</b></h6>
  1356. <p>Security Deposit: Rs <span
  1357. id="rentAmount"></span></p>
  1358. <p>Full Day Rent: Rs <span
  1359. id="fullDayAmount"></span></p>
  1360. <p>Half Day Rent: Rs <span
  1361. id="halfDayAmount"></span></p>
  1362. <p>GST: <span id="gst"></span>%</p>
  1363. <p>EB for 1 Unit:* Rs <span
  1364. id="ebunit"></span></p>
  1365. <p>CareTaker Number: <span
  1366. id="caretakerNumber"></span></p>
  1367. <input type="hidden" id="depositAmount"
  1368. name="depositamount" value="100">
  1369. <input type="hidden" id="hallamount"
  1370. name="hallamount" value="100">
  1371. </div>
  1372. </div>
  1373. </div>
  1374. <div class="row">
  1375. <div class="col-md-12 col-sm-12 col-lg-12">
  1376. <!-- Center align the button -->
  1377. <button type="button" class="btn btn-primary next-step"
  1378. style="background-color: #016d6f; color: white;float: right;">Book
  1379. & Continue</button>
  1380. </div>
  1381. </div>
  1382. </div>
  1383. </div>
  1384. </div>
  1385. <div class="step step-2">
  1386. <div class="container custom-container"
  1387. style=" padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;">
  1388. <!-- Updated inline styles -->
  1389. <div class="mb-3">
  1390. <div class="row">
  1391. <div class="col-md-12 col-lg-12 col-sm-12">
  1392. <table class="table table-bordered">
  1393. <tbody>
  1394. <tr>
  1395. <td><strong>Hall Name:</strong>
  1396. <span id="hallNameDisplayStep2"></span>
  1397. </td>
  1398. <td><strong>Zone: </strong>
  1399. <span id="zoneStep2"></span>
  1400. </td>
  1401. <td><strong>Division: </strong>
  1402. <span id="divisionStep2"></span>
  1403. </td>
  1404. </tr>
  1405. </tbody>
  1406. </table>
  1407. </div>
  1408. <div class="row">
  1409. <div class="col col-lg-3 col-md-3 col-sm-3" style="display: flex; ">
  1410. <button type="button" class="btn btn-primary btn-square-md"
  1411. style="background-color:#008000;"></button>
  1412. <span style="margin-left: 10px;">Day(Available)</span>
  1413. </div>
  1414. <div class="col col-lg-3 col-md-3 col-sm-3" style="display: flex; ">
  1415. <button type="button" class="btn btn-primary btn-square-md"
  1416. style="background-color: #ac2bac;"></button>
  1417. <span style="margin-left: 10px;">Morning(Available)</span>
  1418. </div>
  1419. <div class="col col-lg-3 col-md-3 col-sm-3" style="display: flex; ">
  1420. <button type="button" class="btn btn-primary btn-square-md"
  1421. style="background-color:#FFEA00;"></button>
  1422. <span style="margin-left: 10px;">Evening(Available)</span>
  1423. </div>
  1424. <div class="col col-lg-3 col-md-3 col-sm-3" style="display: flex; ">
  1425. <button type="button" class="btn btn-primary btn-square-md"
  1426. style="background-color: red;"></button>
  1427. <span style="margin-left: 26px;">Not Available <br>
  1428. </span>
  1429. </div>
  1430. <div class="col col-lg-2 col-sm-2 col-md-2">
  1431. <button type="button"
  1432. class="btn btn-primary btn-square-md"
  1433. style="background-color: blue"></button>
  1434. <p style="margin-left:-1px;">Gcc
  1435. Blocked</p>
  1436. </div>
  1437. </div>
  1438. <br>
  1439. <br>
  1440. <!--<div class="col-sm-4 col-lg-4 col-md-4">
  1441. <label for="startDateInput">Start Date:</label>
  1442. &lt;!&ndash; Input field for start date &ndash;&gt;
  1443. <input type="text" id="startDateInput" name="startDate"
  1444. class="date-input form-control" style="background-color:white" readonly
  1445. required>
  1446. </div>
  1448. <div class="col-sm-4 col-lg-4 col-md-4">
  1449. <label for="endDateInput">End Date:</label>
  1450. <select id="endDateInput" name="endDate" class="form-control" disabled>
  1451. <option value="0">Select</option>
  1452. </select>
  1453. </div>
  1454. <div class="col-sm-4 col-lg-4 col-md-4">
  1455. <label for="numDaysCount">Number of
  1456. Days:</label>
  1458. <input class="form-control" id="numDaysCount" name="days" value=""
  1459. style="background-color: white;" readonly>
  1460. </div>
  1461. <div class="col-sm-4 col-lg-4 col-md-4">
  1462. <label for="startPeriodDropdown">Start
  1463. Period:</label>
  1464. <select id="startPeriodDropdown" name="startingSlot" class="form-control"
  1465. required>
  1466. <option value="0">select</option>
  1467. <option value="1">Morning (6:00
  1468. AM)</option>
  1469. <option value="2">Evening (2:00
  1470. PM)</option>
  1471. </select>
  1472. </div>
  1473. <div class="col-sm-4 col-lg-4 col-md-4">
  1474. <label>End
  1475. Period:</label>
  1476. <select id="endPeriodDropdown" name="endingSlot" class="form-control"
  1477. required>
  1478. <option value="0">select</option>
  1479. <option value="1">Morning (2:00
  1480. PM)</option>
  1481. <option value="2">Evening (10:00
  1482. PM)</option>
  1483. </select>
  1484. </div>
  1485. </div>
  1487. <br>
  1489. <div class="row">
  1490. <div class="col-md-12 col-lg-12 col-sm-12 text-center">
  1491. &lt;!&ndash; Center align the button &ndash;&gt;
  1492. <button type="button" class="btn btn-primary prev-step"
  1493. style="background-color: #016d6f; color: white;float: left;">Previous</button>
  1494. <button type="button" class="btn btn-warning reset-step"
  1495. style=" background-color: orangered; color: white; margin: auto;">Reset</button>
  1497. <button type="button" class="btn btn-primary next-step"
  1498. style="background-color: #016d6f; color: white; float: right;">Next</button>
  1499. </div>
  1500. </div>-->
  1501. <div class="col-sm-4 col-lg-6 col-md-4">
  1502. <label>Relationship of the Functionary:*</label>
  1503. <select id="relation" name="relation"
  1504. class="form-control"
  1505. onchange="validateForm()" required>
  1506. <option value="0">Select</option>
  1507. <option value="self">Self</option>
  1508. <option value="son">Son</option>
  1509. <option value="daughter">Daughter</option>
  1510. <option value="granddaughter">GrandDaughter
  1511. </option>
  1512. <option value="grandson">GrandSon</option>
  1513. <option value="sister">Sister</option>
  1514. <option value="brother">Brother</option>
  1515. </select>
  1516. </div>
  1517. <!--edit code-->
  1518. <input type="hidden" id="reasonMaxDates">
  1519. <div class="col-sm-4 col-lg-6 col-md-4">
  1520. <label>Reason for
  1521. Booking:*</label>
  1522. <select type="text" class="form-control"
  1523. id="reasonforbooking" name="reasonId"
  1524. required>
  1525. </select>
  1526. </div>
  1527. <br>
  1528. <br>
  1529. <br>
  1530. <br>
  1532. <!--end of edit code-->
  1533. <div class="col-sm-4 col-lg-6 col-md-4">
  1534. <label for="startDateInput">Start Date:*</label>
  1535. <!-- Input field for start date -->
  1536. <input type="text" id="startDateInput"
  1537. name="startDate"
  1538. class="date-input form-control"
  1539. style="background-color:white" readonly
  1540. required>
  1541. </div>
  1542. <div class="col-sm-4 col-lg-6 col-md-4">
  1543. <label for="endDateInput">End Date:*</label>
  1544. <select id="endDateInput" name="endDate"
  1545. class="form-control" disabled>
  1546. <option value="0">Select</option>
  1547. </select>
  1548. </div>
  1549. <br>
  1550. <br>
  1551. <br>
  1552. <br>
  1553. <input type="hidden" id="numDaysCount" val=""
  1554. name="days">
  1555. <input type="hidden" id="noofdaysbetweenstartend"
  1556. val="" name="daysrange">
  1557. <div class="col-sm-4 col-lg-6 col-md-4">
  1559. <label for="startPeriodDropdown">Start
  1560. Period:*</label>
  1562. <select id="startPeriodDropdown"
  1563. name="startingSlot" class="form-control"
  1564. required>
  1565. <option value="0">Select</option>
  1566. <option value="1">Morning (6:00
  1567. AM)
  1568. </option>
  1569. <option value="2">Afternoon (2:00
  1570. PM)
  1571. </option>
  1572. </select>
  1573. </div>
  1574. <div class="col-sm-4 col-lg-6 col-md-4">
  1575. <label>End
  1576. Period:*</label>
  1577. <select id="endPeriodDropdown" name="endingSlot"
  1578. class="form-control" required>
  1579. <option value="0">Select</option>
  1580. <option value="1">Afternoon (2:00
  1581. PM)
  1582. </option>
  1583. <option value="2">Evening (10:00
  1584. PM)
  1585. </option>
  1586. </select>
  1587. </div>
  1588. <br>
  1589. <br>
  1590. <br>
  1591. <br>
  1593. <div class="col-sm-4 col-lg-6 col-md-4">
  1594. <label for="numDaysCountDisplay">Selected
  1595. Slots:</label>
  1596. <textarea type="text" id="numDaysCountDisplay"
  1597. class="form-control" readonly
  1598. style="background-color:white"></textarea>
  1599. </div>
  1600. <div class="col-sm-4 col-lg-6 col-md-4">
  1601. <h4>Booking Summary:</h4>
  1602. <p id="summary" val=""></p>
  1603. </div>
  1605. </div>
  1606. <br>
  1607. <div class="row">
  1608. <div
  1609. class="col-md-12 col-lg-12 col-sm-12 text-center">
  1610. <!-- Center align the button -->
  1611. <button type="button"
  1612. class="btn btn-primary prev-step"
  1613. style="background-color: #016d6f; color: white;float: left;">
  1614. Previous
  1615. </button>
  1616. <button type="button"
  1617. class="btn btn-warning reset-step"
  1618. style=" background-color: orangered; color: white; margin: auto;">
  1619. Reset
  1620. </button>
  1621. <button type="button"
  1622. class="btn btn-primary next-step"
  1623. style="background-color: #016d6f; color: white; float: right;">
  1624. Next
  1625. </button>
  1626. </div>
  1627. </div>
  1628. </div>
  1629. </div>
  1630. </div>
  1631. <div class="step step-3">
  1632. <!-- Step 3 form fields here -->
  1633. <div class="container custom-container"
  1634. style="padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background-color: #FFFFFF; border: 1px solid #CCCCCC;">
  1635. <div class="mb-3">
  1636. <div class="block-content block-content-full ">
  1637. <div class="card-body">
  1638. <div class="col-md-12 col-sm-12 col-lg-12">
  1639. <table class="table table-bordered">
  1640. <tbody>
  1641. <tr>
  1642. <td><strong>Hall
  1643. Name:</strong><span
  1644. id="hallNameDisplayStep3"></span>
  1645. </td>
  1646. <td><strong>Zone:
  1647. </strong><span id="zoneStep3"></span>
  1648. </td>
  1649. <td><strong>Division:
  1650. </strong><span id="divisionStep3"></span>
  1651. </td>
  1652. </tr>
  1653. </tbody>
  1654. </table>
  1656. <input type="hidden" id="userId" name="userId">
  1657. <div class="col-sm-4 col-lg-4 col-md-4">
  1658. <label class="form-check-label" for="reasonforbooking">Reason
  1659. for
  1660. Booking</label>
  1661. <select type="text" class="form-control" id="reasonforbooking"
  1662. name="reasonId" required>
  1663. </select>
  1664. </div>
  1665. <br>
  1666. <div id="reasonFieldsContainer">
  1667. </div>
  1668. <input type="hidden" name="bookingId" id="bookingId" value="0">
  1669. </div>
  1670. </div>
  1671. <div class="row">
  1672. <div class="col-md-12 col-lg-12 col-sm-12 text-center">
  1673. <!-- Center align the button -->
  1674. <button type="button" class="btn btn-primary prev-step"
  1675. style="background-color: #016d6f; color: white; float: left;">Previous</button>
  1676. <button type="button" class="btn btn-warning reset-step"
  1677. style="background-color: orangered; color: white; margin: auto;">Reset</button>
  1679. <button type="submit" class="btn btn-primary next-step"
  1680. style="background-color: #016d6f; color: white; float: right;">Next</button>
  1681. <!--<button type="button"
  1682. class="btn btn-secondary cancel-step">Cancel</button>-->
  1683. </div>
  1684. </div>
  1685. </div>
  1686. </div>
  1687. </div>
  1688. </div>
  1689. <div class="step step-4">
  1690. <div class="container custom-container">
  1691. <div class="header" style="background-color: rgb(21,69,93); position: relative;">
  1692. <img src="media/images/logo-sm.png" alt="Logo"
  1693. style="position: absolute; left: 10px; top: 7px; height: 30px;">
  1694. <h6 style="color: white; text-align: center; line-height: 3.1;">
  1695. Payment Confirmation Receipt</h6>
  1696. </div>
  1697. <div class="col-md-12">
  1698. <table class="table table-bordered">
  1699. <tbody>
  1700. <tr>
  1701. <td><strong>Full Name:</strong> <span id="name_td"></span></td>
  1702. <td><strong>MobileNumber:</strong> <span id="mobileno_td"></span></td>
  1703. <td><strong>User Type:</strong> <span id="usertype_td"></span></td>
  1704. </tr>
  1705. </tbody>
  1706. </table>
  1707. </div>
  1709. <div class="row">
  1710. <div class="col-md-6">
  1711. <table class="table table-bordered">
  1712. <tbody>
  1713. <tr>
  1714. <td><strong>Hall Name:</strong></td>
  1715. <td><span id="selecthall_td"></span>
  1716. </td>
  1717. </tr>
  1719. <tr>
  1720. <td><strong>No. of Days:</strong>
  1721. </td>
  1722. <td><span id="numDaysCount_td"></span>
  1723. </td>
  1724. </tr>
  1725. <tr>
  1726. <td><strong>Start Date:</strong>
  1727. </td>
  1728. <td><span id="startDateInput_td"></span>
  1729. </td>
  1730. </tr>
  1731. <tr>
  1732. <td><strong>End Date:</strong></td>
  1733. <td><span id="endDateInput_td"></span>
  1734. </td>
  1735. </tr>
  1736. <tr>
  1737. <td><strong>Startinng Slot & Ending Slot</strong></td>
  1738. <td><span id="startingslot_td"></span>
  1739. </td>
  1740. </tr>
  1741. <tr>
  1742. <td><strong>Uploaded
  1743. Documents:</strong></td>
  1744. <td>
  1745. <!-- List to display uploaded docs with small images and names -->
  1746. <div id="uploadedDocsList" class="uploaded-docs-list">
  1747. <!-- Each item in the list will have a small image and name -->
  1748. </div>
  1749. </td>
  1750. </tr>
  1752. <div id="largeImageContainer" class="large-image-container"
  1753. style="display: none;">
  1754. <button id="closeButton" type="button" class="close-button">
  1755. <i class="fa fa-times"></i>
  1756. </button>
  1757. <img id="largeImage" src="" alt="Large Image">
  1758. </div>
  1762. </tbody>
  1763. </table>
  1764. </div>
  1765. <div class="col-md-6">
  1766. <table class="table table-bordered">
  1767. <tbody>
  1769. <tr>
  1770. <td><strong>ReasonforBooking:</strong>
  1771. </td>
  1772. <td><span id="reasonforbooking_td"></span>
  1773. </td>
  1774. </tr>
  1775. <tr>
  1776. <td><strong>Hall Amount:</strong>
  1777. </td>
  1778. <td><span id="hallAmount_td">Rs</span>
  1779. </td>
  1780. </tr>
  1781. <tr>
  1782. <td><strong>GST:</strong></td>
  1783. <td><span id="gst_td">Rs</span></td>
  1784. </tr>
  1785. <tr>
  1786. <td><strong>Refundable
  1787. Deposit:</strong></td>
  1788. <td><span id="depositAmount_td">Rs</span>
  1789. </td>
  1790. </tr>
  1791. <tr>
  1792. <td><strong>Discount:</strong></td>
  1793. <td><span id="discount_td">0%</span>
  1794. </td>
  1795. </tr>
  1796. <tr>
  1797. <td><strong>Total Amount:</strong>
  1798. </td>
  1799. <td><span id="totalAmount_td">Rs</span>
  1800. </td>
  1801. </tr>
  1802. </tbody>
  1803. </table>
  1804. </div>
  1805. </div>
  1806. <div class="row">
  1807. <div class="col-md-12 text-center">
  1808. <!-- Center align the button -->
  1809. <button type="button" class="btn btn-primary prev-step"
  1810. style="background-color: #016d6f; color: white;float: left;">Previous</button>
  1811. </div>
  1812. </div>
  1813. <div align="center">
  1814. <label data-toggle="tooltip" data-placement="top"
  1815. title="Check community hall list for Terms and Conditions">
  1816. <input type="checkbox" id="checkin" onchange="togglePaymentButton(this)" />
  1817. <a href="#" id="termsLink">I agree to the Terms and Conditions</a>
  1818. </label>
  1819. <button type="button" id="confirmPaymentBtn" class="btn btn-success"
  1820. onclick="paymentForCounter()" disabled>Confirm Payment</button>
  1821. <input type="hidden" id="btnSubmit"></input>
  1822. </div>
  1824. </div>
  1825. </div>
  1826. <!--<div class="row mt-3">
  1827. <div class="col-sm-6">
  1828. <button type="button" class="btn btn-secondary" id="backToProfileButton">Back</button>
  1829. </div>
  1830. </div>-->
  1831. </form>
  1832. </div>
  1833. </div>
  1837. <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
  1838. <div class="modal-dialog modal-lg">
  1839. <div class="modal-content">
  1840. <div class="modal-header">
  1841. <h5 class="modal-title" id="termsModalLabel">Terms and Conditions</h5>
  1842. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1843. </div>
  1844. <div class="modal-body">
  1845. <div class="table-responsive">
  1846. <table class="table table-bordered table-wrap">
  1847. <tbody>
  1848. <tr>
  1849. <td>1</td>
  1850. <td>Community center shall be booked on daily rental basis for religious,
  1851. social,
  1852. and cultural purposes only. Political based functions, against the
  1853. Government
  1854. Policy and illegal programmes shall not be allowed.</td>
  1855. </tr>
  1856. <tr>
  1857. <td>2</td>
  1858. <td><b>Address proof</b> of the applicant should be furnished with filled in
  1859. application in two copies.</td>
  1860. </tr>
  1861. <tr>
  1862. <td>3</td>
  1863. <td>For marriage, <b>bride and bridegroom photos</b> and age proof should be
  1864. furnished in two copies. (21 years should be completed for men and 18
  1865. years
  1866. should be completed for women)</td>
  1867. </tr>
  1868. <tr>
  1869. <td>4</td>
  1870. <td>For Reception bride and bridegroom photos (two copies) should be
  1871. furnished.</td>
  1872. </tr>
  1873. <tr>
  1874. <td>5</td>
  1875. <td>For Birthday/Ear boring/Puberty/Betrothal/Upanayanam and seemantham
  1876. functions
  1877. photo of the individual should be furnished.</td>
  1878. </tr>
  1879. <tr>
  1880. <td>6</td>
  1881. <td>Separate application to be made for the other than family functions with
  1882. <b>No
  1883. Objection Certificate from the Police Department</b> concerned
  1884. jurisdiction
  1885. of the community hall.</td>
  1886. </tr>
  1887. <tr>
  1888. <td>7</td>
  1889. <td>Those who have applied with required documents and necessary payment
  1890. will be
  1891. given first priority (First come, first served basis)</td>
  1892. </tr>
  1893. <tr>
  1894. <td>8</td>
  1895. <td>Order shall not be transferred to any reason. No permission shall be
  1896. given any
  1897. one to perform the function other than allotted person.</td>
  1898. </tr>
  1899. <tr>
  1900. <td>9</td>
  1901. <td>No permission shall be given to perform function other than mentioned in
  1902. the
  1903. allotment order.</td>
  1904. </tr>
  1905. <tr>
  1906. <td>10</td>
  1907. <td>In case of essentiality for Greater Chennai Corporation for the purpose
  1908. of
  1909. meetings, relief measures on natural calamities and election period
  1910. permission
  1911. order will be cancelled with short intimation.</td>
  1912. </tr>
  1913. <tr>
  1914. <td>11</td>
  1915. <td>Emblem and Name of the Greater Chennai Corporation shall not be
  1916. permitted to be
  1917. displayed or to be used in any other manner.</td>
  1918. </tr>
  1919. <tr>
  1920. <td>12</td>
  1921. <td>Function should be performed without stigma of Greater Chennai
  1922. Corporation.</td>
  1923. </tr>
  1924. <tr>
  1925. <td>13</td>
  1926. <td>After finishing the function, all materials other than Corporation
  1927. should be
  1928. removed from the community center.</td>
  1929. </tr>
  1930. <tr>
  1931. <td>14</td>
  1932. <td>Cooking should be done only in the kitchen or place provided for the
  1933. purpose.
  1934. </td>
  1935. </tr>
  1936. <tr>
  1937. <td>15</td>
  1938. <td>The Corporation will not be responsible for any theft or loss of motor
  1939. vehicles,
  1940. properties or any damages which occur to the parties.</td>
  1941. </tr>
  1942. <tr>
  1943. <td>16</td>
  1944. <td>Vessels, furniture and other materials of the Corporation should not be
  1945. taken
  1946. out from the community center, and no nails, posters, stickers and
  1947. notices fixed
  1948. in the walls.</td>
  1949. </tr>
  1950. <tr>
  1951. <td>17</td>
  1952. <td>The electricity consumption charge has to be deducted from the amount
  1953. deposit if
  1954. any additional electrical illuminations of decorations have to be done
  1955. prior
  1956. approval of the Electrical Engineer, Corporation of Chennai has to be
  1957. obtained.
  1958. </td>
  1959. </tr>
  1960. <tr>
  1961. <td>18</td>
  1962. <td>No nuisance like spitting, throwing leaves and other materials on the
  1963. neighborhood premises etc.</td>
  1964. </tr>
  1965. <tr>
  1966. <td>19</td>
  1967. <td>Permission order will be given only to the applicant.</td>
  1968. </tr>
  1969. <tr>
  1970. <td>20</td>
  1971. <td>The Commissioner is empowered to grant permission or reject the
  1972. application
  1973. without assigning any reasons therefor.</td>
  1974. </tr>
  1975. <tr>
  1976. <td>21</td>
  1977. <td>If vessels and other materials, chair, table of the Corporation received
  1978. for the
  1979. function, it has to be returned safely after the function is over. If
  1980. any
  1981. damages or loss of material, programmer is responsible and should pay
  1982. the
  1983. charges.</td>
  1984. </tr>
  1985. <tr>
  1986. <td>22</td>
  1987. <td>Monitoring the rules and regulations and maintenance of the community
  1988. hall/auditorium has to be continued by the Zonal Offices concerned.</td>
  1989. </tr>
  1990. </tbody>
  1991. </table>
  1992. <div class="container">
  1993. <div class="text-end">
  1994. Commissioner<br>
  1995. Greater Chennai Corporation.
  1996. </div>
  1997. </div>
  1998. </div>
  1999. </div>
  2000. <div class="modal-footer">
  2001. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  2002. </div>
  2003. </div>
  2004. </div>
  2005. </div>
  2008. <div class="modal fade backdrop" id="ddDetailsModal" data-backdrop="static" tabindex="-1" role="dialog"
  2009. aria-labelledby="staticBackdropLabel" aria-hidden="true">
  2010. <div class="modal-dialog modal-lg" role="document">
  2011. <div class="modal-content">
  2012. <form action="/counter/saveDDdetails" id="ddform" method="post" onsubmit="return submitForm()"
  2013. enctype="multipart/form-data">
  2014. <div class="block block-rounded block-themed block-transparent mb-0">
  2015. <div class="block-header bg-primary-dark">
  2016. <h3 class="block-title" id="mtitle">Add Demand Draft Number</h3>
  2017. <div class="block-options">
  2018. <button type="button" class="btn-block-option" data-bs-dismiss="modal"
  2019. aria-label="Close">
  2020. <i class="fa fa-fw fa-times"></i>
  2021. </button>
  2022. </div>
  2023. </div>
  2024. <div class="block-content row">
  2025. <!-- Existing form fields -->
  2026. <div class="col-md-4">
  2027. <div class="form-group">
  2028. <label for="bankName">Bank Name:</label>
  2029. <input type="text" class="form-control" id="bankName" name="bankName"
  2030. placeholder="Bank Name" pattern="[A-Za-z\s-]+" required>
  2031. </div>
  2032. </div>
  2033. <div class="col-md-4">
  2034. <div class="form-group">
  2035. <label for="bankAccNo">Bank Account Number:</label>
  2036. <input type="text" class="form-control" id="bankAccNo" name="bankAccNo"
  2037. placeholder="Bank Account No" minlength="6" maxlength="24" pattern="\d+"
  2038. required>
  2039. </div>
  2040. </div>
  2041. <div class="col-md-4">
  2042. <div class="form-group">
  2043. <label for="ddNumber">Demand Draft Number:</label>
  2044. <input type="text" class="form-control" id="ddNumber" name="ddNumber"
  2045. placeholder="DD No" minlength="6" maxlength="10" pattern="\d+" required>
  2046. </div>
  2047. </div>
  2048. <div class="col-md-4">
  2049. <div class="form-group">
  2050. <label for="totalamount">Total Amount:</label>
  2051. <input type="text" class="form-control" id="totalamount" name="totalamount"
  2052. readonly>
  2053. </div>
  2054. </div>
  2055. <div class="col-4">
  2056. <div class="form-group">
  2057. <lable for="amountReceived">DD Amount:</lable>
  2058. <input type="text" class="form-control" id="amountReceived"
  2059. name="amountReceived" required="required" pattern="[0-9]">
  2060. </div>
  2061. </div>
  2062. <div class="col-md-4">
  2063. <input type="hidden" id="bookingId" name="bookingId">
  2064. </div>
  2065. <div class="row">
  2066. <div class="col">
  2067. <p class="p1 text-center"><strong>DOCUMENTS DETAILS</strong></p>
  2068. </div>
  2069. </div>
  2070. <div class="row" id="photoInputs">
  2071. <div class="col-md-8">
  2072. <div class="form-group">
  2073. <label for="counterddphoto" style="color:red;">Photo 1: Only (.JPEG,
  2074. .JPG, .PDF)
  2075. then uploading File size should not exceed above 1mb</label>
  2076. <input type="file" class="form-control dd-image" id="counterddphoto"
  2077. name="counterddphoto" accept="image/jpeg, image/jpg, image/pdf"
  2078. required>
  2079. </div>
  2080. </div>
  2081. </div>
  2082. </div>
  2083. </div>
  2084. <div class="block-content block-content-full text-end bg-body" id="mbutton">
  2085. <button type="button" class="btn btn-sm btn-alt-secondary"
  2086. data-bs-dismiss="modal">Close</button>
  2087. <button type="submit" class="btn btn-sm btn-primary">Submit</button>
  2088. </div>
  2089. </form>
  2090. </div>
  2091. </div>
  2092. </div>
  2096. </main>
  2097. <footer th:replace="~{fragments/footer2 :: footer}"></footer>
  2098. </div>
  2100. <script th:replace="~{fragments/script :: script}"></script>
  2101. <script th:replace="~{fragments/PaymentScript :: script}"></script>
  2103. <script>
  2104. $('.carousel').carousel({
  2105. interval: 6000
  2106. });
  2107. var currentStep = 1;
  2108. var updateProgressBar;
  2109. var userId;
  2110. var bookingId;
  2111. let selectedHallName = '';
  2112. let selectedZone = '';
  2115. function toggleNextButton(step) {
  2116. var nextButton = document.querySelector('.step-' + step + ' .next-step');
  2117. var fields = document.querySelectorAll('.step-' + step + ' [required]');
  2120. var allFieldsFilled = true;
  2121. fields.forEach(function (field) {
  2122. if (!field.value) {
  2123. allFieldsFilled = false;
  2124. }
  2125. });
  2127. if (allFieldsFilled) {
  2128. nextButton.disabled = false; // Enable the button
  2129. } else {
  2130. nextButton.disabled = true; // Disable the button
  2131. }
  2132. }
  2134. // Call the function for Step 1 when the page loads
  2135. document.addEventListener('DOMContentLoaded', function () {
  2136. // toggleNextButton(1);
  2137. toggleNextButton(2);
  2138. toggleNextButton(3);
  2139. });
  2141. // Attach event listeners for each step's form fields
  2142. /* document.querySelectorAll('.step-1 [required]').forEach(function(field) {
  2143. field.addEventListener('input', function() {
  2144. toggleNextButton(1);
  2145. });
  2146. });*/
  2148. document.querySelectorAll('.step-2 [required]').forEach(function (field) {
  2149. field.addEventListener('input', function () {
  2150. toggleNextButton(2);
  2151. });
  2152. });
  2153. document.querySelectorAll('.step-3 [required]').forEach(function (field) {
  2154. field.addEventListener('input', function () {
  2155. toggleNextButton(3);
  2156. });
  2157. });
  2159. function fetchReasonDocumentDetails(reasonId) {
  2160. $.ajax({
  2161. url: '/victoriahallbookingooking/admin/api/getReasonDocumentDetails',
  2162. type: 'GET',
  2163. dataType: 'json',
  2164. data: {reasonId: reasonId}
  2165. })
  2166. .done(function (data) {
  2167. const reasonFieldsContainer = $('#reasonFieldsContainer');
  2168. reasonFieldsContainer.empty();
  2169. const rowDiv = $('<div class="row"></div>');
  2170. $.each(data, function (index, detail) {
  2171. if (detail.addTextField == true) {
  2172. const fieldDiv = $('<div class="col-sm-4 form-group"></div>');
  2173. const label = $('<label>' + detail.fieldName + '</label>');
  2174. const input = $('<input type="text" class="form-control" name="' + detail.fieldName + '" required>');
  2176. // Add event listener for input validation
  2177. input.on('input', function () {
  2178. // Replace any non-letter characters with an empty string
  2179. this.value = this.value.replace(/[^a-zA-Z]/g, '');
  2180. });
  2182. fieldDiv.append(label);
  2183. fieldDiv.append(input);
  2184. rowDiv.append(fieldDiv);
  2185. }
  2187. if (detail.addDocumentField == true) {
  2188. const fieldDiv2 = $('<div class="col-sm-4 form-group"></div>');
  2189. fieldDiv2.append('<label>' + detail.docFieldName + '</label><input type="file" class="form-control file-upload-field" name="' + detail.docFieldName + '" required accept=".jpg,.jpeg, .pdf">');
  2190. rowDiv.append(fieldDiv2);
  2191. }
  2192. });
  2193. reasonFieldsContainer.append(rowDiv);
  2195. // File upload field validation for size and error display
  2196. $('.file-upload-field').on('change', function () {
  2197. const file = this.files[0];
  2198. if (file && file.size > 2097152) { // size is in bytes
  2199. $(this).addClass('error'); // Add error class
  2200. $(this).after('<div class="error-message">File size should not exceed 2 MB</div>'); // Display error message
  2201. this.value = ''; // Reset the file input
  2202. } else {
  2203. $(this).removeClass('error'); // Remove error class
  2204. $(this).next('.error-message').remove(); // Remove error message if present
  2205. }
  2206. });
  2208. })
  2209. .fail(function (xhr, status, error) {
  2210. console.error('Error fetching reason document details:', error);
  2211. });
  2212. }
  2216. // Call the function to fetch reasons and populate the dropdown when the document is ready
  2217. $(document).ready(function () {
  2218. fetchReasonsAndPopulateDropdown();
  2220. $('#reasonforbooking').change(function () {
  2221. const selectedReasonId = parseInt($(this).val()); // Convert the value to an integer
  2222. fetchReasonDocumentDetails(selectedReasonId);
  2223. });
  2225. });
  2227. var ch = 0;
  2229. function saveCounterBooking() {
  2230. // console.log("saveCounterBooking called");
  2232. $("#startPeriodDropdown").prop("disabled", false);
  2233. $("#endPeriodDropdown").prop("disabled", false);
  2235. var form = document.getElementById('booking');
  2236. var formData = new FormData(form);
  2238. // console.log(formData);
  2239. // Debugging: Log each FormData entry
  2240. for (var pair of formData.entries()) {
  2241. //console.log(pair[0] + ', ', pair[1]);
  2242. }
  2244. $.ajax({
  2245. url: '../victoriahallbookingooking/user/api/counter-booking',
  2246. type: 'POST',
  2247. data: formData,
  2248. processData: false,
  2249. contentType: false,
  2250. success: function (response) {
  2251. // console.log("response=", response);
  2252. // Update the UI with the response data
  2253. $("#bookingId").val(response.bookingId);
  2254. $("#userId").val(response.userId);
  2255. $("#selecthall_td").html(response.hallName);
  2256. $("#numDaysCount_td").html(response.noOfDays);
  2257. $("#startDateInput_td").html(response.startDate);
  2258. $("#endDateInput_td").html(response.endDate);
  2259. function getTimeOfDay(slot) {
  2260. if (slot === 1) {
  2261. return "Morning";
  2262. } else if (slot === 2) {
  2263. return "Evening";
  2264. } else {
  2265. return "Invalid slot";
  2266. }
  2267. }
  2269. $("#startingslot_td").html(getTimeOfDay(response.startingSlot) + " to " + getTimeOfDay(response.endingSlot));
  2271. $("#reasonforbooking_td").html(response.reason);
  2272. $("#hallAmount_td").html(response.hallAmount);
  2273. $("#gst_td").html(response.gst);
  2274. $("#depositAmount_td").html(response.depositAmount);
  2275. $("#discount_td").html(response.discount + "%")
  2276. $("#totalAmount_td").html(response.totalAmount);
  2277. $("#name_td").html(response.username);
  2278. $("#mobileno_td").html(response.mobileNo);
  2279. $("#usertype_td").html(response.userType);
  2281. displayDocumentDetails(response.uploadedDocs);
  2283. // Set the onclick event for the confirmPaymentBtn to include the bookingId
  2284. //$('#confirmPaymentBtn').attr('onclick', 'addnewdd(' + response.bookingId + ')');
  2285. // Enable the button to ensure it can be clicked
  2286. //$('#confirmPaymentBtn').prop('disabled', false);
  2287. },
  2288. error: function (xhr, status, error) {
  2289. console.error('Error saving booking details:', error);
  2290. }
  2291. });
  2292. }
  2294. function addnewdd(bookingId) {
  2295. // console.log("bookingId==", bookingId);
  2296. $('#ddDetailsModal').modal('show');
  2297. // Set the bookingId value in the hidden input field
  2298. $('#ddform #bookingId').val(bookingId);
  2300. // Make an AJAX request to fetch booking details
  2301. $.ajax({
  2302. url: '/victoriahallbookingooking/user/api/getBooking',
  2303. type: 'GET',
  2304. data: {bookingId: bookingId},
  2305. success: function (response) {
  2306. // Assuming the response contains the booking details
  2307. // console.log("Booking details: ", response);
  2308. // Display the amountReceived field in the modal's readonly input field
  2309. $('#totalamount').val(response.amountReceived); // Adjust according to your response structure
  2310. },
  2311. error: function (error) {
  2312. // console.log("Error fetching booking details: ", error);
  2313. }
  2314. });
  2315. }
  2317. function submitForm() {
  2318. var bookingId = $('#ddform #bookingId').val();
  2319. if (!bookingId) {
  2320. alert("Booking ID is missing!");
  2321. return false;
  2322. }
  2323. // console.log("Submitting form with bookingId=", bookingId);
  2324. return true;
  2325. }
  2331. function displayDocumentDetails(uploadedDocs) {
  2332. const uploadedDocsList = $("#uploadedDocsList");
  2333. uploadedDocsList.empty(); // Clear existing items
  2334. uploadedDocs.forEach(function (doc) {
  2335. const listItem = $('<li>');
  2336. const thumbnail = $('<img>').addClass('thumbnail-img');
  2338. if (doc.bookingDocUrl.endsWith('.pdf')) {
  2339. thumbnail.attr('src', doc.bookingDocUrl);
  2340. listItem.append(thumbnail).append(' ' + doc.documentName);
  2341. thumbnail.on('click', function () {
  2342. const pdfViewer = $('<iframe>').attr({
  2343. src: doc.bookingDocUrl
  2344. });
  2345. $('#largeImage').hide();
  2346. $('#largeImageContainer').find('iframe').remove();
  2347. $('#largeImageContainer').append(pdfViewer);
  2348. $('#largeImageContainer').show();
  2349. });
  2350. } else {
  2351. thumbnail.attr('src', doc.bookingDocUrl);
  2352. listItem.append(thumbnail).append(' ' + doc.documentName);
  2353. thumbnail.on('click', function () {
  2354. $('#largeImageContainer iframe').remove();
  2355. $('#largeImage').attr('src', doc.bookingDocUrl).show();
  2356. $('#largeImageContainer').show();
  2357. });
  2358. }
  2360. uploadedDocsList.append(listItem);
  2361. });
  2362. }
  2363. $("#closeButton").on('click', function () {
  2364. $('#largeImageContainer').hide(); // Hide the large image container
  2365. $('#largeImage').attr('src', '').hide(); // Reset and hide image
  2366. $('#largeImageContainer iframe').remove(); // Remove iframe if present
  2367. });
  2370. /*function fetchReasonsAndPopulateDropdown() {
  2371. // Make an AJAX call to fetch all reasons
  2372. $.ajax({
  2373. url: '/victoriahallbooking/admin/api/getReasons',
  2374. type: 'GET',
  2375. dataType: 'json'
  2376. })
  2377. .done(function (data) {
  2378. const reasonDropdown = $('#reasonforbooking');
  2379. reasonDropdown.empty();
  2380. reasonDropdown.append($('<option selected value="0"></option>').text('Select a reason'));
  2381. $.each(data, function (index, reason) {
  2382. reasonDropdown.append($('<option></option>').attr('value', reason.reasonId).text(reason.reason));
  2383. });
  2384. })
  2385. .fail(function (xhr, status, error) {
  2386. console.error('Error fetching reasons:', error);
  2387. });
  2388. }*/
  2390. function fetchReasonsAndPopulateDropdown() {
  2391. // Make an AJAX call to fetch all reasons
  2392. $.ajax({
  2393. url: '/victoriahallbooking/admin/api/getReasons',
  2394. type: 'GET',
  2395. dataType: 'json'
  2396. })
  2397. .done(function (data) {
  2398. const reasonDropdown = $('#reasonforbooking');
  2399. reasonDropdown.empty();
  2400. reasonDropdown.append($('<option selected value="0"></option>').text('Select a reason'));
  2402. // Populate the dropdown and store reason metadata
  2403. $.each(data, function (index, reason) {
  2404. reasonDropdown.append($('<option></option>').attr('value', reason.reasonId).text(reason.reason));
  2405. reasonMaxData.set(reason.reasonId, reason.maxdays);
  2406. reasonLabelData.set(reason.reasonId, reason.reason);
  2407. reasoncode.set(reason.reasonId, reason.reasoncode);
  2408. });
  2410. // Add change event listener to the dropdown
  2411. reasonDropdown.change(function () {
  2412. const selectedReasonId = $(this).val();
  2413. const selectedReasonCode = reasoncode.get(parseInt(selectedReasonId));
  2414. const selectedHallId = document.getElementById("statichallId").value; // Getting the selected hall ID
  2416. // Make another AJAX call to get hall details based on the selected hall ID
  2417. $.ajax({
  2418. type: 'GET',
  2419. url: '/victoriahallbooking/user/api/gethalldetails/' + selectedHallId,
  2420. success: function (response) {
  2421. // console.log(response);
  2422. const isSGE = response.sge; // Fetch SGE status from the response
  2423. const isCGE = response.cge; // Fetch CGE status from the response
  2425. // Check for State Government Event (SGE)
  2426. if (selectedReasonCode === 'SGE' && !isSGE) {
  2427. // Show popup for State govt event
  2428. Swal.fire({
  2429. title: 'Government Event',
  2430. text: 'Shenoy Nagar Community Center (Auditorium) full Mandapam (Amma Arangam) is available for state government events.',
  2431. icon: 'info',
  2432. confirmButtonText: 'OK'
  2433. }).then((result) => {
  2434. if (result.isConfirmed && !isSGE) {
  2435. window.location.href = '/victoriahallbooking/hallbookingform';
  2436. }
  2437. });
  2438. }
  2439. // Check for Central Government Event (CGE)
  2440. else if (selectedReasonCode === 'CGE' && !isCGE) {
  2441. // Show popup for Central govt event
  2442. Swal.fire({
  2443. title: 'Government Event',
  2444. text: 'Shenoy Nagar Community Center (Auditorium) full Mandapam (Amma Arangam) is available for central government events.',
  2445. icon: 'info',
  2446. confirmButtonText: 'OK'
  2447. }).then((result) => {
  2448. if (result.isConfirmed && !isCGE) {
  2449. // Redirect only if hallId is not 3
  2450. window.location.href = '/counter/counter-booking';
  2451. }
  2452. });
  2453. }
  2454. },
  2455. error: function (xhr, status, error) {
  2456. console.error('Error fetching hall details:', error);
  2457. }
  2458. });
  2459. });
  2460. })
  2461. .fail(function (xhr, status, error) {
  2462. console.error('Error fetching reasons:', error);
  2463. });
  2464. }
  2466. function togglePaymentButton(checkbox) {
  2467. var confirmPaymentBtn = document.getElementById('confirmPaymentBtn');
  2468. confirmPaymentBtn.disabled = !checkbox.checked;
  2469. }
  2471. document.getElementById('termsLink').addEventListener('click', function (event) {
  2472. event.preventDefault();
  2473. $('#termsModal').modal('show');
  2474. });
  2476. function togglePaymentButton(checkbox) {
  2477. document.getElementById('confirmPaymentBtn').disabled = !checkbox.checked;
  2478. }
  2479. function displayStep(stepNumber) {
  2480. // console.log(stepNumber);
  2482. if (stepNumber >= 1 && stepNumber <= 4) {
  2484. if (validateStep(currentStep)) {
  2485. /* console.log(currentStep);*/
  2486. $(".step-" + currentStep).hide();
  2487. $(".step-" + stepNumber).show();
  2488. currentStep = stepNumber;
  2489. updateProgressBar();
  2491. // Populate hallName, zone, and division in Step 2 and Step 3
  2492. if (stepNumber === 2 || stepNumber === 3) {
  2493. $('#hallNameDisplayStep2').text(selectedHallName);
  2494. $('#hallNameDisplayStep3').text(selectedHallName);
  2495. $('#zoneStep2').text(zone);
  2496. $('#zoneStep3').text(zone);
  2497. $('#divisionStep2').text('');
  2498. $('#divisionStep3').text('');
  2500. $('#selecthall_td').text(selectedHallName);
  2501. }
  2503. // Handle displaying the SweetAlert in Step 3
  2505. } else {
  2506. //alert("Please fill in all required fields before proceeding.");
  2507. }
  2508. }
  2509. }
  2512. function validateStep(stepNumber) {
  2514. }
  2516. $(document).ready(function () {
  2517. $('.step').hide();
  2518. $('.step-1').show();
  2519. var currentStep = 1; // Assuming you have this variable defined somewhere in your code
  2521. // Function to validate step 3
  2522. // Function to validate step 3
  2523. // Function to validate step 3
  2524. function validateStep3() {
  2525. let isValid = true;
  2526. let selectedReason = $('#reasonforbooking').val();
  2528. // Check if a reason is selected
  2529. if (!selectedReason) {
  2530. isValid = false;
  2531. } else {
  2532. // Iterate through each input associated with the selected reason
  2533. $(`#reasonFieldsContainer .${selectedReason} input[type="text"], #reasonFieldsContainer .${selectedReason} input[type="file"]`).each(function () {
  2534. if ($(this).prop('required') && !$(this).val()) {
  2535. isValid = false;
  2536. return false; // Exit the loop early if any required field is empty
  2537. }
  2538. });
  2539. }
  2541. // Enable/disable the next button based on validation
  2542. $('.next-step').prop('disabled', !isValid);
  2543. }
  2546. // Event listener for reason dropdown change
  2547. $('#reasonforbooking').change(function () {
  2548. let selectedReason = $(this).val();
  2550. // Show/hide fields based on selected reason
  2551. $('#reasonFieldsContainer').children().hide();
  2552. if (selectedReason) {
  2553. $(`#reasonFieldsContainer .${selectedReason}`).show();
  2554. }
  2556. // Validate the fields for the selected reason
  2557. validateStep3();
  2558. });
  2560. // Event listener for input changes within reason fields
  2561. $('#reasonFieldsContainer').on('change', 'input, select', function () {
  2562. validateStep3();
  2563. });
  2565. $(".next-step").click(function () {
  2566. var valid = true;
  2568. // Validate all required text inputs and file fields in Step 3
  2569. if (currentStep === 3) {
  2570. $('.step-3 input[required], .step-3 select[required]').each(function () {
  2571. if ($(this).val() === '') {
  2572. $(this).addClass('error'); // Add error class
  2573. valid = false;
  2574. return false; // Break the loop
  2575. } else {
  2576. $(this).removeClass('error'); // Remove error class if valid
  2577. }
  2578. });
  2580. $('.step-3 input[type="file"][required]').each(function () {
  2581. if ($(this)[0].files.length === 0) {
  2582. $(this).addClass('error'); // Add error class
  2583. valid = false;
  2584. return false; // Break the loop
  2585. } else {
  2586. $(this).removeClass('error'); // Remove error class if valid
  2587. }
  2588. });
  2589. }
  2591. if (!valid) {
  2592. return; // Stop if validation fails
  2593. }
  2594. if (currentStep < 4) {
  2595. $(".step-" + currentStep).fadeOut(500, function () {
  2596. if (currentStep === 4) {
  2597. $(".step-" + currentStep).fadeIn(500);
  2598. // console.log(currentStep);
  2599. updateProgressBar();
  2600. return "";
  2601. } else {
  2602. currentStep++;
  2603. $(".step-" + currentStep).fadeIn(500);
  2604. updateProgressBar();
  2605. }
  2606. });
  2607. }
  2608. });
  2610. $(".prev-step").click(function () {
  2611. if (currentStep > 1) {
  2612. $(".step-" + currentStep).fadeOut(500, function () {
  2613. currentStep--;
  2614. $(".step-" + currentStep).fadeIn(500);
  2615. updateProgressBar();
  2616. });
  2617. }
  2618. });
  2620. $(".step-2 .reset-step").click(function () {
  2621. $('.step-2 input[type="text"], .step-2 select').val(function () {
  2622. return this.defaultValue;
  2623. });
  2625. $('.step-2 input[type="checkbox"], .step-2 input[type="radio"]').prop('checked', false);
  2626. $('#endDateInput').prop('disabled', true).val('0');
  2627. $('#startPeriodDropdown').val('0');
  2628. $('#endPeriodDropdown').val('0');
  2629. $('#numDaysCount').val(''); // Reset the number of days input
  2630. $('.step-2 .error-message').hide();
  2631. toggleNextButton(2); // Ensure button state reflects field values after reset
  2632. });
  2634. $(".step-3 .reset-step").click(function () {
  2635. // Reset input fields and selects, excluding #reasonforbooking
  2636. $('.step-3 input[type="text"], input[type="file"], .step-3 select').each(function () {
  2637. $(".step-3 .next-step").prop("disabled", true);
  2638. // Check if element is not #reasonforbooking
  2639. if (!$(this).is('#reasonforbooking')) {
  2640. $(this).val(this.defaultValue);
  2641. }
  2642. });
  2644. // Hide error messages and validate step 3
  2645. $('.step-3 .error-message').hide();
  2646. validateStep3();
  2647. });
  2649. $(".step-2 .next-step").click(function () {
  2650. var reasonforbooking = $("#reasonforbooking").val();
  2651. if (reasonforbooking !== "0") {
  2652. $(".step-3 .next-step").prop("disabled", false);
  2653. } else {
  2654. $(".step-3 .next-step").prop("disabled", true);
  2655. };
  2656. });
  2659. $(".cancel-step").click(function () {
  2660. // Redirect to the cancel page or handle cancellation logic here
  2661. window.location.href = "/dashboard";
  2662. });
  2664. updateProgressBar = function () {
  2665. var progressPercentage = ((currentStep - 1) / 3) * 100;
  2666. $(".progress-bar").css("width", progressPercentage + "%");
  2667. };
  2669. // File upload field validation for size and error display
  2670. $('.file-upload-field').on('change', function () {
  2671. const file = this.files[0];
  2672. if (file && file.size > 20480) { // size is in bytes
  2673. $(this).addClass('error'); // Add error class
  2674. $(this).after('<div class="error-message">File size should not exceed 20 KB</div>'); // Display error message
  2675. this.value = ''; // Reset the file input
  2676. } else {
  2677. $(this).removeClass('error'); // Remove error class
  2678. $(this).next('.error-message').remove(); // Remove error message if present
  2679. }
  2680. });
  2682. // Initial validation check for step 3
  2683. validateStep3();
  2685. // Log statement to ensure the button is being enabled
  2686. // console.log("Enabling the button...");
  2687. $('.step-1 .next-step').prop('disabled', false);
  2688. });
  2692. $(document).ready(function () {
  2693. // Function to show/hide fields based on the selected User Type
  2694. $("#userType").change(function () {
  2695. var selectedUserType = $(this).val();
  2696. // Hide all fields initially
  2697. $("#employeeFields, #pensionerFields, #familypensionerFields").hide();
  2698. if (selectedUserType === "PUBLIC") {
  2699. $("#pensionerFields").hide();
  2700. $("#familypensionerFields").hide();
  2701. $("#employeeFields").hide();
  2702. }
  2703. else if (selectedUserType === "GCC_EMPLOYEE") {
  2704. $("#employeeFields").show();
  2705. } else if (selectedUserType === "PENSIONER") {
  2706. $("#pensionerFields").show();
  2707. } else if (selectedUserType == "FAMILYPENSIONER") {
  2708. $("#familypensionerFields").show();
  2709. }
  2710. });
  2712. // Validation for alphanumeric input
  2713. $("#employeeId, #pensionerId").on("input", function () {
  2714. var inputValue = $(this).val();
  2715. if (!/^[a-zA-Z0-9]*$/.test(inputValue)) {
  2716. alert("Please enter alphanumeric characters only.");
  2717. $(this).val("");
  2718. }
  2719. });
  2721. // Validation for numeric input
  2722. $("#wardNo").on("input", function () {
  2723. var inputValue = $(this).val();
  2724. if (!/^\d*$/.test(inputValue)) {
  2725. alert("Please enter numeric characters only for Ward No.");
  2726. $(this).val("");
  2727. }
  2728. });
  2729. });
  2731. // Function to toggle hall details container and fetch hall details
  2732. function toggleHallDetailsContainer() {
  2733. var selectBox = document.getElementById("selecthall");
  2734. var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  2735. var hallDetailsContainer = document.getElementById("hallDetailsContainer");
  2737. if (selectedValue !== "") {
  2738. hallDetailsContainer.style.display = "block"; // Show hall details container if a hall is selected
  2740. // Get the selected hall ID
  2741. var hallId = selectBox.options[selectBox.selectedIndex].value;
  2742. getHallDetails(hallId); // Fetch hall details
  2744. // Other code for displaying selected details
  2745. } else {
  2746. hallDetailsContainer.style.display = "none"; // Hide hall details container if no hall is selected
  2748. // Clear the selected details in Step 2 and Step 3
  2749. $('#hallNameDisplayStep2').text('');
  2750. $('#hallNameDisplayStep3').text('');
  2751. $('#zoneStep2').text('');
  2752. $('#zoneStep3').text('');
  2753. $('#divisionStep2').text('');
  2754. $('#divisionStep3').text('');
  2757. // Clear other details if needed
  2758. }
  2759. }
  2762. var index = 0;
  2763. var hall;
  2766. $(function () {
  2767. $("#selecthall").select2();
  2768. });
  2769. $.ajax({
  2770. type: 'GET',
  2771. url: '/victoriahallbooking/user/api/gethallnames',
  2772. success: function (response) {
  2773. // Populate the dropdown options with the received hall names
  2775. var selectHallDropdown = $('#selecthall');
  2776. $.each(response, function (index, hall) {
  2777. // console.log("response==", response);
  2778. // console.log("halls", hall);
  2779. var hallId = 0;
  2780. if (hallId == hall.hallId) {
  2781. selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
  2782. selectHallDropdown.find('option[value="' + hall.hallId + '"]').prop('selected', true);
  2784. } else {
  2785. selectHallDropdown.append($('<option></option>').attr('value', hall.hallId).text(hall.hallName));
  2786. }
  2787. });
  2788. },
  2789. error: function (xhr, status, error) {
  2790. console.error('Error fetching hall names:', error);
  2791. }
  2792. });
  2794. $(document).ready(function () {
  2795. $('#selecthall').change(function () {
  2796. var selectedHallId = $(this).val();
  2797. // console.log('Selected hall ID:', selectedHallId);
  2798. // Call the getHallDetails function with the selected hall ID
  2799. getHallDetails(selectedHallId);
  2800. });
  2801. });
  2803. // Function to retrieve hall details based on hallId
  2804. function getHallDetails(hallId) {
  2805. $.ajax({
  2806. type: 'GET',
  2807. url: '/victoriahallbooking/user/api/gethalldetails/' + hallId,
  2808. success: function (response) {
  2809. // console.log(response);
  2811. // Display the container
  2812. $('#hallDetailsContainer').show();
  2813. // Set hall details
  2814. $('#zone').html('<strong>' + response.zone + '</strong>&nbsp;&nbsp;&nbsp;&nbsp; Division: <strong>' + response.division + '</strong>');
  2815. $('#address').html('<strong>' + response.doorNo + ', ' + response.street + ', ' + response.area + ', ' + response.city + ', ' + response.pinCode + '</strong>');
  2816. // $('#address').text(response.doorNo + ', ' + response.street + ', ' + response.area + ', ' + response.city + ', ' + response.pinCode);
  2817. $('#landmark').html('<strong>' + response.landMark + '</strong>');
  2818. $('#seatingCapacity').html('<strong>' + response.seatingCapacity + '</strong>');
  2819. var parkingCapacity = response.parkingCapacity;
  2820. var parkingAvailability = parkingCapacity > 0 ? "Yes" : "No";
  2821. $('#caretakerNumber').html('<strong>' + response.hallInchargeMobno + '</strong>');
  2822. $('#rentAmount').html('<strong>' + response.depositAmount + '</strong>');
  2823. // Set amount details
  2824. $('#gst').html('<strong>' + response.gst + '</strong>');
  2825. $('#fullDayAmount').html('<strong>' + response.fullDayRent + '</strong>');
  2826. $('#halfDayAmount').html('<strong>' + response.halfDayRent + '</strong>');
  2827. $('#ebunit').html('<strong>' + response.ebCostPerUnit + '</strong>');
  2828. $('#statichallId').val(response.hallId);
  2830. // Set hall images
  2831. var carouselInner = $('#hallImagesCarousel .carousel-inner');
  2832. carouselInner.empty(); // Clear existing images
  2834. $.each(response.hallImagesList, function (index, image) {
  2835. var itemClass = (index === 0) ? 'carousel-item active' : 'carousel-item';
  2836. var img = $('<img>').addClass('d-block w-100').attr('src', image.hallImage).attr('alt', 'Hall Image');
  2837. var carouselItem = $('<div>').addClass(itemClass).append(img);
  2838. carouselInner.append(carouselItem);
  2839. });
  2841. // Clear existing floor details to prevent duplicates
  2842. $('#hallareainsqft').empty();
  2844. // Use a Set to store unique floor details
  2845. var uniqueFloorDetails = new Set();
  2847. $.each(response.floorDetailsList, function (index, hallarea) {
  2849. // Construct the text for each floor's details
  2850. var floorDetailText = hallarea.floor + " - " + hallarea.hallarea + " Sq.ft ,";
  2852. // Add to the Set if it's not a duplicate
  2853. if (!uniqueFloorDetails.has(floorDetailText)) {
  2854. uniqueFloorDetails.add(floorDetailText);
  2855. // Append the floor details to the target element
  2856. $('#hallareainsqft').append('<strong>' + floorDetailText + '</strong>');
  2857. }
  2858. });
  2860. // Initialize ViewerJS on the carousel after images are loaded
  2861. initializeViewerJS();
  2863. getBookingCalendar(hallId);
  2865. // Set hall details in Step 2 and Step 3
  2866. $('#hallNameDisplayStep2').text(response.hallName);
  2867. $('#hallNameDisplayStep3').text(response.hallName);
  2868. $('#zoneStep2').text(response.zone);
  2869. $('#zoneStep3').text(response.zone);
  2870. $('#divisionStep2').text(response.division);
  2871. $('#divisionStep3').text(response.division);
  2872. },
  2873. error: function (xhr, status, error) {
  2874. console.error('Error fetching hall details:', error);
  2875. }
  2876. });
  2877. }
  2879. function initializeViewerJS() {
  2880. // Ensure ViewerJS initialization after images are added to the DOM
  2881. var carouselInner = document.querySelector('#hallImagesCarousel .carousel-inner');
  2882. var floordetails = document.querySelector('#hallareainsqft');
  2884. // Destroy existing viewer instance if it exists
  2885. if (carouselInner.viewer) {
  2886. carouselInner.viewer.destroy();
  2887. }
  2888. if (floordetails.viewer) {
  2889. floordetails.viewer.destroy();
  2890. }
  2891. // Initialize ViewerJS
  2892. var viewer = new Viewer(carouselInner, {
  2893. inline: false,
  2894. viewed: function () {
  2895. viewer.zoomTo(0.5); // Adjust the zoom level here
  2896. },
  2897. toolbar: {
  2898. zoomIn: 4,
  2899. zoomOut: 4,
  2900. oneToOne: 4,
  2901. reset: 4,
  2902. prev: 4,
  2903. play: {
  2904. show: 4,
  2905. size: 'large',
  2906. },
  2908. next: 4,
  2909. rotateLeft: 4,
  2910. rotateRight: 4,
  2911. flipHorizontal: 4,
  2912. flipVertical: 4,
  2913. },
  2914. });
  2915. carouselInner.viewer = viewer;
  2916. }
  2918. /*function getBookingCalendar(hall_id) {
  2919. // Make an AJAX call to fetch booking data
  2920. $.ajax({
  2921. type: 'GET',
  2922. url: '/victoriahallbooking/user/api/getPastData',
  2923. data: {
  2924. hall_id: hall_id
  2925. },
  2926. success: function (response) {
  2927. window.bookingResponse = {};
  2928. if (response && Array.isArray(response)) {
  2929. $("#startDateInput").datepicker("destroy");
  2931. for (var i = 0; i < response.length; i++) {
  2932. var dateString = datepickerFormat(response[i].bdate);
  2933. window.bookingResponse[dateString] = [response[i].morningSlot, response[i].eveningSlot];
  2934. }
  2935. initializeDatepickerWithColors(hall_id);
  2936. if (response.length == 0) {
  2937. initializeDatepickerWithColors(hall_id);
  2938. }
  2939. } else {
  2940. console.error('Invalid or empty response data.');
  2941. }
  2942. },
  2943. error: function (xhr, status, error) {
  2944. console.error('Error fetching hall details:', error);
  2945. }
  2946. });
  2947. }*/
  2949. function getBookingCalendar(hall_id) {
  2950. // Make an AJAX call to fetch booking data
  2951. $.ajax({
  2952. type: 'GET',
  2953. url: '/victoriahallbooking/user/api/getPastData',
  2954. data: {
  2955. hall_id: hall_id
  2956. },
  2957. success: function (response) {
  2958. window.bookingResponse = {};
  2959. if (response && Array.isArray(response)) {
  2960. $("#startDateInput").datepicker("destroy");
  2961. for (var i = 0; i < response.length; i++) {
  2962. var dateString = datepickerFormat(response[i].bdate);
  2963. window.bookingResponse[dateString] = [response[i].morningSlot, response[i].eveningSlot, response[i].is_blocked];
  2964. }
  2966. initializeDatepickerWithColors(hall_id);
  2967. if (response.length == 0) {
  2968. initializeDatepickerWithColors(hall_id);
  2969. }
  2970. } else {
  2971. console.error('Invalid or empty response data.');
  2972. }
  2973. },
  2974. error: function (xhr, status, error) {
  2975. console.error('Error fetching hall details:', error);
  2976. }
  2977. });
  2978. }
  2980. // Function to update the end date and slot availability
  2981. function updateEndDate() {
  2982. var startDate = new Date(document.getElementById("startDateInput").value);
  2983. var formatStartDate = formatDate(startDate);
  2985. var endDateInput = document.getElementById("endDateInput");
  2986. endDateInput.innerHTML = '<option value="0">Select</option>';
  2987. endDateInput.disabled = true;
  2989. // Add options for next 7 days from the selected start date
  2990. for (var i = 0; i < 7; i++) {
  2991. var date = new Date(startDate);
  2992. date.setDate(startDate.getDate() + i);
  2994. var formattedDate = formatDate(date);
  2996. if (isNaN(date.getTime())) {
  2997. console.error("Invalid date:", date);
  2998. continue;
  2999. }
  3000. var bookingStatus = window.bookingResponse[formattedDate];
  3001. if (bookingStatus) {
  3002. if (bookingStatus[0] && bookingStatus[1]) {
  3003. break;
  3004. }
  3005. else if (bookingStatus[0]) {
  3006. if (formatStartDate == formattedDate) {
  3007. var option = document.createElement('option');
  3008. option.value = formattedDate;
  3009. option.text = formattedDate;
  3010. endDateInput.appendChild(option);
  3011. } else {
  3012. break;
  3013. }
  3014. }
  3015. else if (bookingStatus[1]) {
  3016. var option = document.createElement('option');
  3017. option.value = formattedDate;
  3018. option.text = formattedDate;
  3019. endDateInput.appendChild(option);
  3020. break;
  3021. } else {
  3022. var option = document.createElement('option');
  3023. option.value = formattedDate;
  3024. option.text = formattedDate;
  3025. endDateInput.appendChild(option);
  3026. }
  3028. } else {
  3029. var option = document.createElement('option');
  3030. option.value = formattedDate;
  3031. option.text = formattedDate;
  3032. endDateInput.appendChild(option);
  3033. }
  3034. }
  3035. endDateInput.disabled = false;
  3037. }
  3039. // Utility function to format date as yyyy-mm-dd
  3040. function formatDate(date) {
  3041. var year = date.getFullYear();
  3042. var month = ("0" + (date.getMonth() + 1)).slice(-2);
  3043. var day = ("0" + date.getDate()).slice(-2);
  3044. return year + "-" + month + "-" + day;
  3045. }
  3049. function calculateNumDays() {
  3050. if (document.getElementById("endDateInput").value == 0) {
  3051. return true;
  3052. }
  3053. var startDate = new Date(document.getElementById("startDateInput").value);
  3054. var endDate = new Date(document.getElementById("endDateInput").value);
  3055. var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
  3056. var numDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
  3057. numDays += 1;
  3059. document.getElementById("numDaysCount").value = numDays;
  3060. }
  3066. // Event listener for when the end date is selected
  3067. document.getElementById("endDateInput").addEventListener("change", function () {
  3068. calculateNumDays();
  3069. $("#endPeriodDropdown").val(0).prop("disabled", false);
  3070. var bookingStatus = window.bookingResponse[$("#endDateInput").val()];
  3071. if (bookingStatus) {
  3072. if (bookingStatus[0]) {
  3073. // console.log("hi1", bookingStatus[0]);
  3074. $("#endPeriodDropdown").val(2);
  3075. $("#endPeriodDropdown").prop("disabled", true);
  3076. }
  3077. else if (bookingStatus[1]) {
  3078. // console.log("hi2", bookingStatus[1]);
  3079. $("#endPeriodDropdown").val(1)
  3080. $("#endPeriodDropdown").prop("disabled", true);
  3081. }
  3082. } else {
  3083. $("#endPeriodDropdown").prop("disabled", false);
  3084. }
  3085. });
  3087. /*function initializeDatepickerWithColors(hallId) {
  3088. // console.log("Initializing Datepicker with hallId:", hallId); // Confirm hallId is passed here
  3089. $("#datepicker-container").datepicker("destroy");
  3090. $("#startDateInput,#datepicker-container").datepicker({
  3091. dateFormat: "yy-mm-dd",
  3092. minDate: "+7D",
  3093. maxDate: "+6M",
  3094. beforeShowDay: function (eDate) {
  3096. var dateString = $.datepicker.formatDate("yy-mm-dd", eDate);
  3097. var bookingStatus = window.bookingResponse[dateString];
  3099. if (bookingStatus) {
  3101. if (bookingStatus[0] === false && bookingStatus[1] === false) {
  3102. return [true, "highlight-greens", "Slot Available"];
  3103. } else if (bookingStatus[0] === true && bookingStatus[1] === true) {
  3104. return [true, "highlight-pink disabled", "Slot Occuiped"];
  3105. } else if (bookingStatus[0] === true && bookingStatus[1] === false) {
  3106. return [true, "highlight-yellow", "Evening Slot Available"];
  3107. }
  3108. else if (bookingStatus[0] === false && bookingStatus[1] === true) {
  3109. return [true, "highlight-violet", "Only Morning Slot Available"];
  3110. }
  3111. }
  3113. return [true, "highlight-greens", "Slot Available"];
  3115. },
  3116. });
  3118. $('#selecthall').on('click', function () {
  3119. $('#datepicker-container').datepicker('show');
  3121. });
  3124. $("#startDateInput").on("change", function () {
  3125. var selectedDate = $(this).val();
  3126. var endDate = $("#endDateInput").val();
  3127. $("#startPeriodDropdown").val(0).prop("disabled", false);
  3128. $("#endPeriodDropdown").val(0).prop("disabled", false);
  3129. var startPeriod = $("#startPeriodDropdown").val();
  3130. var endPeriod = $("#endPeriodDropdown").val();
  3131. if (endDate !== "0" && startPeriod !== "0" && endPeriod !== "0") {
  3132. $(".next-step").prop("disabled", false);
  3133. } else {
  3134. $(".next-step").prop("disabled", true);
  3135. }
  3136. var bookingStatus = window.bookingResponse[selectedDate];
  3137. if (bookingStatus) {
  3138. if (bookingStatus[0]) {
  3139. // console.log("hi3", bookingStatus[0]);
  3140. $("#startPeriodDropdown").val(2);
  3141. $("#startPeriodDropdown").prop("disabled", true);
  3142. } else if (bookingStatus[1]) {
  3143. // console.log("hi4", bookingStatus[1]);
  3144. $("#startPeriodDropdown").val(1);
  3145. $("#startPeriodDropdown").prop("disabled", true);
  3146. }
  3147. } else {
  3148. $("#startPeriodDropdown").prop("disabled", false);
  3149. }
  3150. updateEndDate(selectedDate);
  3151. });
  3152. }*/
  3154. function initializeDatepickerWithColors(hallId) {
  3155. // Destroy existing datepicker to avoid duplicate initialization
  3156. $("#datepicker-container").datepicker("destroy");
  3158. const serverDate =new Date($("#serverDate").val() + "T00:00:00")
  3159. // console.log("serverDate:", serverDate);
  3161. const maxDate = new Date(serverDate);
  3162. maxDate.setMonth(maxDate.getMonth() + 6);
  3163. // console.log(" hall booking form Max Date: "+maxDate);
  3165. // Initialize the datepicker
  3166. $("#startDateInput,#datepicker-container").datepicker({
  3167. dateFormat: "yy-mm-dd",
  3168. minDate: serverDate,
  3169. maxDate: maxDate,
  3170. beforeShowDay: function (eDate) {
  3171. const dateString = $.datepicker.formatDate("yy-mm-dd", eDate);
  3172. const bookingStatus = window.bookingResponse[dateString] || {};
  3174. // const currentDate = new Date();
  3175. serverDate.setHours(0, 0, 0, 0); // Normalize current date to midnight
  3176. eDate.setHours(0, 0, 0, 0); // Normalize selected date to midnight
  3178. // Logic for other dates
  3179. if (eDate < serverDate) {
  3180. return [false, "highlight-disabled", "Slot not Available"];
  3181. }
  3183. const isToday = eDate.getTime() === serverDate.getTime();
  3184. const currentHour = new Date().getHours();
  3185. const isBefore6AM = currentHour < 6;
  3186. const isAfter2PM = currentHour >= 14;
  3188. // Block 3-day logic for specific event types
  3189. // const today = new Date();
  3190. const blockedDate = new Date(serverDate);
  3191. blockedDate.setDate(serverDate.getDate() + 2);
  3193. if (eDate <= blockedDate && window.isThreeDayBlock) {
  3194. return [false, "highlight-disabled", "Blocked due to event type"];
  3195. }
  3197. // Logic for today
  3198. if (isToday) {
  3199. if (isBefore6AM) {
  3200. // Before 6 AM: Allow full-day booking or adjust based on booking status
  3201. return handleBookingStatus(bookingStatus, "Full Day Available");
  3202. } else if (isAfter2PM) {
  3203. // After 2 PM: Block all bookings
  3204. return handleAfter2PM(bookingStatus);
  3205. } else {
  3206. // Between 6 AM and 2 PM: Check status and disable morning slots
  3207. return handleMorningSlots(bookingStatus);
  3208. }
  3209. }
  3211. return handleBookingStatus(bookingStatus, "Slot Available");
  3212. },
  3213. });
  3215. // Show datepicker when hall is selected
  3216. $('#selecthall').off('click').on('click', function () {
  3217. $('#datepicker-container').datepicker('show');
  3218. });
  3220. // Handle changes in the start date input
  3221. $("#startDateInput").on("change", function () {
  3222. const selectedDate = $(this).val();
  3223. const bookingStatus = window.bookingResponse[selectedDate] || {};
  3224. // const currentDate = new Date();
  3225. const currentHours = serverDate.getHours();
  3226. const currentDateString = serverDate.toISOString().split("T")[0];
  3228. $("#startPeriodDropdown").val(0).prop("disabled", false);
  3229. $("#endPeriodDropdown").val(0).prop("disabled", false);
  3230. $("#numDaysCount").val('');
  3231. validateForm();
  3233. if (selectedDate === currentDateString && currentHours >= 6) {
  3234. $("#startPeriodDropdown").val(2).prop("disabled", true);
  3235. } else if (bookingStatus[0]) {
  3236. $("#startPeriodDropdown").val(2).prop("disabled", true);
  3237. } else if (bookingStatus[1]) {
  3238. $("#startPeriodDropdown").val(1).prop("disabled", true);
  3239. }
  3240. updateEndDate(selectedDate);
  3241. });
  3243. // Event type change logic
  3244. $("#reasonforbooking").on("change", function () {
  3245. const selectedEventType = $(this).find("option:selected").text().trim();
  3246. window.isThreeDayBlock = ["Commercial", "State Govt Event", "Central Govt Event"].includes(selectedEventType);
  3247. $("#datepicker-container").datepicker("refresh");
  3248. });
  3249. }
  3251. function datepickerFormat(dateString) {
  3252. var dateObject = new Date(dateString);
  3253. var year = dateObject.getFullYear();
  3254. var month = (dateObject.getMonth() + 1).toString().padStart(2, "0");
  3255. var day = dateObject.getDate().toString().padStart(2, "0");
  3256. return `${year}-${month}-${day}`;
  3257. }
  3259. // Update the event listeners to include date inputs
  3260. $("#endDateInput").on("change", function () {
  3261. var starting = $("#startPeriodDropdown").val();
  3262. var ending = $("#endPeriodDropdown").val();
  3263. var startDate = $("#startDateInput").val();
  3264. var endDate = $("#endDateInput").val();
  3266. // Call validateSlot with updated parameters
  3267. validateSlot(starting, ending, startDate, endDate);
  3268. validateForm();
  3269. });
  3271. // Event listener for changes in startPeriodDropdown
  3272. $("#startPeriodDropdown").on("change", function () {
  3273. var starting = $(this).val();
  3274. var ending = $("#endPeriodDropdown").val();
  3275. var startDate = $("#startDateInput").val();
  3276. var endDate = $("#endDateInput").val();
  3278. // Call validateSlot with updated parameters
  3279. validateSlot(starting, ending, startDate, endDate);
  3280. validateForm();
  3281. });
  3283. // Event listener for changes in endPeriodDropdown
  3284. $("#endPeriodDropdown").on("change", function () {
  3285. var starting = $("#startPeriodDropdown").val();
  3286. var ending = $(this).val();
  3287. var startDate = $("#startDateInput").val();
  3288. var endDate = $("#endDateInput").val();
  3290. // Call validateSlot with updated parameters
  3291. // console.log("hiiii");
  3292. validateSlot(starting, ending, startDate, endDate);
  3293. validateForm();
  3294. });
  3296. function validateSlot(starting, ending, startDate, endDate) {
  3297. // Check if startDate is equal to endDate and starting is 2 and ending is 1
  3298. if (startDate === endDate && starting == 2 && ending == 1) {
  3299. Swal.fire({
  3300. icon: 'error',
  3301. title: 'Oops!',
  3302. text: "The starting slot cannot be set to Evening if the ending slot is Morning when the dates are the same.",
  3303. }).then(() => {
  3304. $("#startPeriodDropdown").val(1); // Reset startPeriodDropdown to 1
  3305. });
  3306. }
  3307. validateForm(); // Call validateForm to update form validation status
  3308. }
  3310. function validateForm() {
  3311. var startDate = $("#startDateInput").val();
  3312. var endDate = $("#endDateInput").val();
  3313. var startPeriod = $("#startPeriodDropdown").val();
  3314. var endPeriod = $("#endPeriodDropdown").val();
  3315. var reasonforbooking = $("#reasonforbooking").val();
  3317. if (startDate && endDate && startPeriod !== "0" && endPeriod !== "0") {
  3318. $(".next-step").prop("disabled", false);
  3319. } else {
  3320. $(".next-step").prop("disabled", true);
  3321. }
  3322. }
  3325. // Function to toggle visibility of mobileNoContainer based on usertypes selection
  3326. function handleUserTypeChange() {
  3327. const usertypes = document.getElementById('usertypes').value;
  3328. const mobileNoContainer = document.getElementById('mobileNoContainer');
  3329. if (usertypes === 'public') {
  3330. mobileNoContainer.style.display = 'block';
  3331. } else {
  3332. mobileNoContainer.style.display = 'none';
  3333. }
  3334. }
  3335. function reloadUserInformationForm() {
  3336. // Reset the user type dropdown to 'select'
  3337. $("#usertypes").val("select");
  3339. // Hide the mobile number container
  3340. $("#mobileNoContainer").hide();
  3341. document.getElementById("userInfoForm").reset();
  3342. }
  3344. // Function to handle initial page load and browser back navigation
  3345. document.addEventListener('DOMContentLoaded', function () {
  3346. handleUserTypeChange(); // Call to initially hide/show mobileNoContainer based on usertypes
  3347. });
  3349. // Add event listener for sendOTPButton click
  3350. document.getElementById('sendOTPButton').addEventListener('click', function (event) {
  3351. event.preventDefault();
  3352. checkMobileNo();
  3353. });
  3356. function checkMobileNo() {
  3357. var mobileNo = $("#mobileNumber").val().trim(); // Get and trim the mobile number input value
  3359. // Validate the length of the mobile number
  3360. if (mobileNo.length !== 10) {
  3361. Swal.fire({
  3362. title: "Invalid Mobile Number",
  3363. text: "Please enter a 10-digit mobile number.",
  3364. icon: "error",
  3365. confirmButtonText: "OK",
  3366. });
  3367. return; // Exit function if length is not valid
  3368. }
  3370. $.ajax({
  3371. type: "GET",
  3372. url: '/victoriahallbooking/user/api/counterbookinglimit',
  3373. data: {mobileNo: mobileNo},
  3374. success: function (statusResponse) {
  3375. // console.log("hiiii", statusResponse);
  3376. if (statusResponse === "deactive") {
  3377. Swal.fire({
  3378. title: "Account Deactivated",
  3379. text: "Please contact Admin to active.",
  3380. icon: "info",
  3381. showCancelButton: false,
  3382. confirmButtonText: "OK",
  3383. });
  3384. }
  3385. else if (statusResponse === "bookinglimitreached") {
  3386. // User status is pending, show SweetAlert
  3387. Swal.fire({
  3388. title: "Booking Limitation Reached",
  3389. text: "Sorry, you have reached your booking limit. You are allowed to book up to two times in a year.",
  3390. icon: "info",
  3391. showCancelButton: false,
  3392. confirmButtonText: "OK",
  3393. });
  3394. } else if (statusResponse === "checkmobilenoexists") {
  3395. // User status is not pending, proceed to check mobile number existence
  3396. // console.log("statusResponse===", statusResponse);
  3397. $.ajax({
  3398. type: "GET",
  3399. url: '/victoriahallbooking/user/api/checkMobileExits',
  3400. data: {mobileno: mobileNo},
  3401. success: function (mobileResponse) {
  3402. if (mobileResponse === "success") {
  3403. sendOTP(mobileNo);
  3404. } else {
  3405. var alertMessage = "This Mobile Number Is Not Registered! Please register.";
  3406. $('#otpForm').modal('hide'); // Hide OTP form modal
  3407. $('#loginModal').modal('hide');
  3408. Swal.fire({
  3409. title: "Registration Required",
  3410. html: alertMessage,
  3411. icon: "info",
  3412. showCancelButton: true,
  3413. confirmButtonText: "REGISTER",
  3414. customClass: {
  3415. container: 'custom-swal-container', // Add a custom class to the container
  3416. },
  3417. backdrop: true, // Enable backdrop to prevent clicks on the main popup
  3418. }).then((result) => {
  3419. if (result.isConfirmed) {
  3420. $("#registrationModal").modal('show')
  3421. }
  3422. });
  3423. }
  3424. },
  3425. error: function (errortxt) {
  3426. console.error(errortxt);
  3427. }
  3428. });
  3429. }
  3430. },
  3431. error: function (errortxt) {
  3432. console.error(errortxt);
  3433. }
  3434. });
  3435. }
  3438. function sendOTP(mobileNum) {
  3439. if (mobileNum != "" || mobileNum != undefined || mobileNum != null) {
  3440. mobileNo = mobileNum;
  3441. $("#mobilenotxt").html(mobileNo);
  3442. $.ajax({
  3443. type: "GET",
  3444. url: '/victoriahallbooking/user/api/sendOTP',
  3445. data: {'mobileNo': mobileNo, 'purpose': 'New User'},
  3446. success: function (bodyMessage) {
  3447. if (bodyMessage != "Error") {
  3448. $('#otpForm').modal({
  3449. backdrop: 'static',
  3450. keyboard: false
  3451. });
  3452. $('#otpForm').modal('show');
  3453. startCountdown();
  3454. } else {
  3455. alert("OTP Not Send!!!");
  3456. }
  3457. }
  3458. });
  3459. }
  3460. return false;
  3461. }
  3463. function startCountdown() {
  3464. var resendTimeout;
  3465. $("#resendlink").html('Please wait..<span id="countdown">60</span>s');
  3466. var countdown = $("#countdown");
  3468. var timeleft = 60;
  3469. countdown.text(timeleft);
  3471. resendTimeout = setInterval(function () {
  3472. timeleft--;
  3473. countdown.text(timeleft);
  3475. if (timeleft <= 0) {
  3476. clearInterval(resendTimeout);
  3477. $("#resendlink").html('<a href="#" id="resend-link" class="text-info" onclick="return sendOTP(mobileNo);">Resend OTP</a>');
  3478. }
  3479. }, 1000);
  3480. }
  3482. document.getElementById("backButton").addEventListener("click", function () {
  3483. document.getElementById("profileCard").style.display = "none";
  3484. document.getElementById("container").style.display = "block";
  3486. // Reload the user information form
  3487. reloadUserInformationForm();
  3488. });
  3490. document.getElementById("nextButton").addEventListener("click", function () {
  3491. document.getElementById("profileCard").style.display = "none";
  3492. document.getElementById("nextPageCard").style.display = "block";
  3493. });
  3495. /* document.getElementById("backToProfileButton").addEventListener("click", function () {
  3496. document.getElementById("nextPageCard").style.display = "none";
  3497. document.getElementById("profileCard").style.display = "block";
  3498. });*/
  3501. var verifyLogin = "";
  3503. function verifyOtp() {
  3504. var otpInputs = $('.otp-input');
  3505. var otpValue = '';
  3506. otpInputs.each(function () {
  3507. otpValue += $(this).val();
  3508. });
  3509. var mobileNoValue = $("#mobileNumber").val();
  3510. var aadharnumber = $("#aadharnumber").val();
  3512. $.ajax({
  3513. type: "GET",
  3514. url: '/victoriahallbooking/user/api/verifyOTP',
  3515. data: {
  3516. 'otp': otpValue,
  3517. 'mobileNo': mobileNoValue
  3518. },
  3519. dataType: 'text',
  3520. success: function (bodyMessage) {
  3521. if (bodyMessage.trim() == "Success") {
  3522. // console.log("OTP is Verified!!!");
  3523. $('#otpForm').modal('hide');
  3524. if (verifyLogin == "new") {
  3526. var formData = new FormData();
  3527. formData.append('mobileNo', mobileNoValue);
  3528. formData.append('aadharnumber', aadharnumber);
  3529. formData.append('name', $('#name').val());
  3530. formData.append('email', $('#email').val());
  3531. formData.append('doorNo', $('#doorNo').val());
  3532. formData.append('street', $('#street').val());
  3533. formData.append('area', $('#area').val());
  3534. formData.append('location', $('#location').val());
  3535. formData.append('pinCode', $('#pincode').val());
  3537. var photoFile = $('#userPhoto')[0].files[0];
  3538. if (photoFile) {
  3539. formData.append('userPhoto', photoFile);
  3540. }
  3542. $.ajax({
  3543. type: "POST",
  3544. url: '/victoriahallbooking/user/api/newcounterregistrationform',
  3545. data: formData,
  3546. processData: false,
  3547. contentType: false,
  3548. success: function (response) {
  3549. // console.log("Registration successful:", response);
  3550. // alert(response.message);
  3551. showProfileDetailsInCard();
  3552. document.getElementById("profileCard").style.display = "block";
  3553. document.getElementById("container").style.display = "none";
  3554. },
  3555. error: function (jqXHR, textStatus, errorThrown) {
  3556. // console.log("Error registering user:", textStatus, errorThrown);
  3557. alert("Registration failed. Please try again.");
  3558. }
  3559. });
  3560. } else {
  3561. // If already logged in, retrieve user details and display them
  3562. $.ajax({
  3563. type: "GET",
  3564. url: '/victoriahallbooking/user/api/getUserDetails',
  3565. data: {'mobileNo': mobileNoValue},
  3566. success: function (userDetails) {
  3567. // console.log("User details retrieved:", userDetails);
  3568. showexistedProfileDetailsInCard(userDetails); // Pass the user details to the function
  3569. },
  3570. error: function (jqXHR, textStatus, errorThrown) {
  3571. // console.log("Error retrieving user details:", textStatus, errorThrown);
  3572. }
  3573. });
  3574. }
  3575. } else {
  3576. $("#otperror").html("OTP is Incorrect!!!");
  3577. }
  3578. },
  3580. error: function () {
  3581. // console.log("Error verifying OTP");
  3582. }
  3583. });
  3584. return false;
  3585. }
  3589. $('.otp-input').on('keyup', function (e) {
  3590. var $this = $(this);
  3591. if ($this.val().length === 1) {
  3592. $this.next('.otp-input').focus();
  3593. }
  3594. if ($this.val().length === 0) {
  3595. $this.prev('.otp-input').focus();
  3596. }
  3597. });
  3599. function validatePensioner() {
  3600. var pensionerId = $('#pensionerId').val();
  3601. var pensionerName = $('#pensionername').val();
  3602. var mobileNo = $('#mobileno').val();
  3603. var pinCode = $('#pincode').val();
  3605. // Validate mobile number
  3606. if (!/^\d+$/.test(mobileNo) || mobileNo.length !== 10) {
  3607. alert("Mobile number must be a 10-digit number.");
  3608. return false;
  3609. }
  3611. // Validate pincode
  3612. if (!/^\d+$/.test(pinCode) || pinCode.length !== 6) {
  3613. alert("Pincode must be a 6-digit number.");
  3614. return false;
  3615. }
  3617. $.ajax({
  3618. url: 'https://erp.chennaicorporation.gov.in/pgr/external/mobileservice',
  3619. type: 'GET',
  3620. data: {
  3621. serviceId: 'getPensionerDetailsList',
  3622. pensionerId: pensionerId
  3623. },
  3624. success: function (response) {
  3625. // Assuming response is in JSON format
  3626. var pensionerDetails = response.PensionerDetailsResult;
  3627. var message = response.Message;
  3629. // Check if the pensioner details match the entered data
  3630. var isValid = false;
  3631. for (var i = 0; i < pensionerDetails.length; i++) {
  3632. if (pensionerDetails[i].Pensioner_Code === pensionerId && pensionerDetails[i].Name === pensionerName) {
  3633. isValid = true;
  3634. break;
  3635. }
  3636. }
  3638. if (isValid) {
  3639. $('#validationResult').html('Pensioner validated successfully.');
  3640. } else {
  3641. $('#validationResult').html('Invalid pensioner ID or name.');
  3642. }
  3643. },
  3644. error: function (xhr, status, error) {
  3645. console.error('Error:', error);
  3646. $('#validationResult').html('Failed to validate pensioner. Please try again later.');
  3647. }
  3648. });
  3649. }
  3652. document.addEventListener("DOMContentLoaded", function () {
  3653. // Function to fetch employee data from the URL
  3654. function fetchEmployeeData() {
  3655. const url = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=getEmployeeDetail&EmployeeID=731650";
  3657. fetch(url)
  3658. .then(response => response.json())
  3659. .then(data => {
  3660. // Get input field values
  3661. const employeeId = document.getElementById("employeeId").value;
  3662. const employeeName = document.getElementById("employeename").value;
  3663. const department = document.getElementById("department").value;
  3664. const designation = document.getElementById("designation").value;
  3666. // Compare fetched data with input field values
  3667. if (data.EmployeeID === employeeId && data.EmployeeName === employeeName && data.Department === department && data.Designation === designation) {
  3668. alert("Data validated successfully!");
  3669. } else {
  3670. alert("Error: Data validation failed!");
  3671. }
  3672. })
  3673. .catch(error => {
  3674. console.error("Error fetching employee data:", error);
  3675. alert("Error: Unable to fetch employee data. Please try again later.");
  3676. });
  3677. }
  3679. // Add event listener for button click
  3680. // document.getElementById("validateButton").addEventListener("click", fetchEmployeeData);
  3681. });
  3683. function validateUserType() {
  3684. var usertype = $("#userType").val();
  3685. if (usertype == "PUBLIC") {
  3686. validateNumber();
  3687. return false;
  3688. }
  3689. else if (usertype == "GCC_EMPLOYEE") {
  3690. var employeeId = $("#employeeId").val();
  3691. // console.log(employeeId);
  3692. $.ajax({
  3693. type: "GET",
  3694. url: '/victoriahallbooking/user/api/EmployeeDetails',
  3695. data: {'employeeId': $("#employeeId").val()},
  3696. success: function (response) {
  3697. // console.log(response);
  3698. if (response.ResultStatus == false) {
  3699. var alertMessage = "The Employee Id Not Found! " + employeeId;
  3700. Swal.fire({
  3701. title: "Oops",
  3702. html: alertMessage,
  3703. icon: "info",
  3704. showCancelButton: false,
  3705. confirmButtonText: "Ok"
  3706. });
  3707. return false;
  3708. } else if (response.ResultStatus) {
  3709. $("#employeename").val(response.EmployeeDetailsResult[0].name);
  3710. validateNumber();
  3711. }
  3712. },
  3713. error: function () {
  3714. // console.log("Error");
  3715. }
  3716. });
  3717. return false;
  3718. }
  3719. else if (usertype == "FAMILYPENSIONER") {
  3720. $.ajax({
  3721. type: "GET",
  3722. url: '/victoriahallbooking/user/api/FamilyPensionerDetails',
  3723. data: {'id': $("#familypensionerId").val()},
  3724. success: function (response) {
  3725. if (response.mobileNo) {
  3726. $("#mobileno").val(response.mobileNo);
  3727. validateNumber();
  3728. } else {
  3729. var alertMessage = "The Pensioner Id Not Found!";
  3730. Swal.fire({
  3731. title: "Oops",
  3732. html: alertMessage,
  3733. icon: "info",
  3734. showCancelButton: false,
  3735. confirmButtonText: "Ok"
  3736. });
  3737. }
  3738. },
  3739. error: function (xhr, status, error) {
  3740. console.error(xhr.responseText);
  3741. }
  3742. });
  3743. return false;
  3744. }
  3745. else if (usertype == "PENSIONER") {
  3746. $.ajax({
  3747. type: "GET",
  3748. url: '/victoriahallbooking/user/api/PensionerDetails',
  3749. data: {'id': $("#pensionerId").val()},
  3750. success: function (response) {
  3751. if (response.mobileNo) {
  3752. $("#mobileno").val(response.mobileNo);
  3753. validateNumber();
  3754. } else {
  3755. var alertMessage = "The Pensioner Id Not Found!";
  3756. Swal.fire({
  3757. title: "Oops",
  3758. html: alertMessage,
  3759. icon: "info",
  3760. showCancelButton: false,
  3761. confirmButtonText: "Ok"
  3762. });
  3763. }
  3764. },
  3765. error: function (xhr, status, error) {
  3766. console.error(xhr.responseText);
  3767. }
  3768. });
  3769. return false;
  3770. }
  3771. return false;
  3772. }
  3774. function validateNumber() {
  3775. var mobileNo = $("#mobileno").val();
  3776. $.ajax({
  3777. type: "GET",
  3778. url: '/victoriahallbooking/user/api/checkMobileExits',
  3779. data: {'mobileno': mobileNo},
  3780. success: function (bodyMessage) {
  3781. if (bodyMessage == "success") {
  3782. var alertMessage = "This Mobile Number Is Already Registered!</a>";
  3783. $('#otpForm').modal('hide');
  3784. //$('#registrationModal').modal('show');
  3785. Swal.fire({
  3786. title: "Mobile Number exist",
  3787. html: alertMessage,
  3788. icon: "info",
  3789. showCancelButton: false,
  3790. confirmButtonText: "Ok"
  3791. });
  3792. return false;
  3793. } else {
  3794. $('#registrationModal').modal('hide');
  3795. verifyLogin = "new";
  3796. sendOTP(mobileNo);
  3797. return false;
  3798. }
  3799. },
  3800. error: function (errortxt) {
  3801. console.error(errortxt);
  3802. }
  3803. });
  3804. return false;
  3805. }
  3809. function showProfileDetailsInCard() {
  3810. $.ajax({
  3811. url: '/victoriahallbooking/user/api/getuserforcounter',
  3812. type: 'GET',
  3813. data: {
  3814. 'userId': 0 // Use session user ID if not provided
  3815. },
  3816. success: function (response) {
  3817. // Check if the response contains expected user details
  3818. if (response && response.name) {
  3819. $('#p_name_card').val(response.name);
  3820. $('#p_email_card').val(response.email);
  3821. $('#p_mobnum_card').val(response.mobileNo);
  3822. $('#p_doornum_card').val(response.doorNo);
  3823. $('#p_area_card').val(response.area);
  3824. $('#p_location_card').val(response.location);
  3825. $('#p_pincode_card').val(response.pinCode);
  3826. $('#p_userstatus_card').val(response.userstatus);
  3827. $('#p_image_card').attr('src', response.profilephoto);
  3828. $('#profileCard').show(); // Show the profile card
  3829. $('#container').hide(); // Hide the container
  3830. } else {
  3831. console.error("Profile details not found in response.");
  3832. // Optionally, you can show an error message to the user
  3833. }
  3834. },
  3835. error: function (xhr, status, error) {
  3836. console.error("Error occurred while fetching user details:", xhr.responseText);
  3837. // Optionally, you can show an error message to the user
  3838. }
  3839. });
  3840. }
  3844. function showexistedProfileDetailsInCard(userDetails) {
  3845. // Check if user details are provided
  3846. if (userDetails && userDetails.name) {
  3847. $('#p_name_card').val(userDetails.name);
  3848. $('#p_email_card').val(userDetails.email);
  3849. $('#p_mobnum_card').val(userDetails.mobileNo);
  3850. $('#p_doornum_card').val(userDetails.doorNo);
  3851. $('#p_area_card').val(userDetails.area);
  3852. $('#p_location_card').val(userDetails.location);
  3853. $('#p_pincode_card').val(userDetails.pinCode);
  3854. $('#p_userstatus_card').val(userDetails.userstatus);
  3855. $('#p_image_card').attr('src', userDetails.profilephoto);
  3856. $('#profileCard').show(); // Show the profile card
  3857. $('#container').hide(); // Hide the container
  3858. } else {
  3859. console.error("Profile details not found in response.");
  3860. // Optionally, you can show an error message to the user
  3861. }
  3862. }
  3867. // Attach CSS styles for error messages dynamically
  3868. $('head').append('<style>.error-message { color: red; font-size: 12px; margin-top: 5px; }</style>');
  3870. $('.file-upload-field').on('change', function () {
  3871. const file = this.files[0];
  3872. if (file && file.size > 2097152) { // size is in bytes
  3873. $(this).addClass('error'); // Add error class
  3874. $(this).after('<div class="error-message">File size should not exceed 2 MB</div>').next('.error-message').addClass('error-text'); // Display error message with error-text class
  3875. this.value = ''; // Reset the file input
  3876. } else {
  3877. $(this).removeClass('error'); // Remove error class
  3878. $(this).next('.error-message').remove(); // Remove error message if present
  3879. }
  3880. });
  3882. document.getElementById("bankAccNo").addEventListener("input", function (e) {
  3883. var value = e.target.value;
  3884. if (!/^\d*$/.test(value)) {
  3885. e.target.setCustomValidity("Please enter only Numbers without space.");
  3886. } else {
  3887. e.target.setCustomValidity("");
  3888. }
  3889. });
  3891. document.getElementById("ddNumber").addEventListener("input", function (e) {
  3892. var value = e.target.value;
  3893. if (!/^\d*$/.test(value)) {
  3894. e.target.setCustomValidity("Please enter only Numbers without space.");
  3895. } else {
  3896. e.target.setCustomValidity("");
  3897. }
  3898. });
  3900. document.getElementById("bankName").addEventListener("input", function (e) {
  3901. var value = e.target.value;
  3902. if (!/^[A-Za-z\s-]*$/.test(value)) {
  3903. e.target.setCustomValidity("Please enter only Alphabets letters.");
  3904. } else {
  3905. e.target.setCustomValidity("");
  3906. }
  3907. });
  3908. function paymentForCounter() {
  3910. var userId = document.getElementById("userId").value;
  3911. var bookingId = document.getElementById("bookingId").value;
  3912. paymentStart(userId, bookingId, true);
  3913. }
  3915. // Newly added for calendar
  3917. function handleBookingStatus(bookingStatus, defaultMessage) {
  3918. if (bookingStatus[2]) {
  3919. return [true, "highlight-blue disabled", "GCC Blocked"];
  3920. } /*else if (bookingStatus[3]) {
  3921. return [true, "highlight-lightpink disabled", "Temporary Blocked"];
  3922. } */else if (bookingStatus[0] && bookingStatus[1]) {
  3923. return [true, "highlight-pink disabled", "Slot Occupied"];
  3924. } else if (bookingStatus[0] && !bookingStatus[1]) {
  3925. return [true, "highlight-yellow", "Evening Slot Available"];
  3926. } else if (!bookingStatus[0] && bookingStatus[1]) {
  3927. return [true, "highlight-violet", "Only Morning Slot Available"];
  3928. }
  3929. return [true, "highlight-greens", defaultMessage];
  3930. }
  3932. // Helper function: Handles logic after 2 PM
  3933. function handleAfter2PM(bookingStatus) {
  3934. if (bookingStatus[2]) {
  3935. return [true, "highlight-blue disabled", "GCC Blocked"];
  3936. } else if (bookingStatus[0] || bookingStatus[1]) {
  3937. return [true, "highlight-pink disabled", "Slot Occupied"];
  3938. }
  3939. return [false, "highlight-disabled", "Not Allowed to Book"];
  3940. }
  3942. // Helper function: Handles morning slots between 6 AM and 2 PM
  3943. function handleMorningSlots(bookingStatus) {
  3944. if (bookingStatus[2]) {
  3945. return [true, "highlight-blue disabled", "GCC Blocked"];
  3946. } else if (bookingStatus[0] && bookingStatus[1]) {
  3947. return [true, "highlight-pink disabled", "Slot Occupied"];
  3948. } else if (bookingStatus[0] && !bookingStatus[1]) {
  3949. return [true, "highlight-yellow", "Evening Slot Available"];
  3950. } else if (!bookingStatus[0] && bookingStatus[1]) {
  3951. return [false, "highlight-disabled", "Slot Occupied"];
  3952. }
  3953. return [true, "highlight-yellow", "Evening Slot Available"];
  3954. }
  3956. </script>
  3957. </body>
  3959. </html>