sanjay
/
VictoriaPublicHall_visitbooking
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
1 Commit
1 Branch
0 Tags
260 MiB
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
VictoriaPublicHall_visitboo.../target/classes/templates/user/hallregistrationbook.html

4108 lines
107 KiB
Raw Permalink Normal View History

initial commit
6 days ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/user-head :: head}"></head>
  6. <header th:replace="~{user/razor-pay :: header}"></header>
  8. <style>
  9. :root {
  10. --accent: #12363b;
  11. --muted: #6b6b6b;
  12. --card-bg: #ffffff;
  13. --slot-radius: 10px;
  14. --green-start: #16a34a;
  15. --green-end: #09905a;
  16. }
  18. * {
  19. box-sizing: border-box;
  20. margin: 0;
  21. padding: 0
  22. }
  24. html,
  25. body {
  26. height: 100%
  27. }
  29. body {
  30. font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  32. background:
  33. linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.82)),
  34. url('/victoriapublichall/images/vph-background_v1.jpg') top center / cover no-repeat,
  35. url('/victoriapublichall/images/vph-background_v1.jpg') bottom center / cover no-repeat;
  37. min-height: 100vh;
  38. background-attachment: fixed;
  39. /* keeps both images static */
  40. background-repeat: no-repeat;
  41. background-size: cover;
  43. -webkit-font-smoothing: antialiased;
  44. min-height: 100vh;
  46. display: flex;
  47. flex-direction: column;
  48. gap: 12px;
  49. padding: 18px 24px;
  50. }
  55. /* container */
  56. .container {
  57. width: 100%;
  58. max-width: 1200px;
  59. margin: 0 auto;
  60. }
  62. /******************************
  63. NAVBAR (desktop + mobile)
  64. ******************************/
  65. .topbar {
  66. display: flex;
  67. align-items: center;
  68. justify-content: space-between;
  69. gap: 16px;
  70. padding: 10px 0;
  71. position: relative;
  72. z-index: 1300;
  73. }
  75. .leftbar {
  76. display: flex;
  77. align-items: center;
  78. gap: 20px;
  79. }
  82. .nav-left {
  83. display: flex;
  84. align-items: center;
  85. gap: 12px;
  86. }
  88. .logo {
  89. width: 72px;
  90. height: 72px;
  91. object-fit: contain;
  92. border-radius: 50%;
  93. }
  95. /* default desktop nav */
  96. nav.primary {
  97. display: flex;
  98. gap: 18px;
  99. align-items: center;
  100. }
  102. /* Desktop Navigation Links (Figma Accurate) */
  103. nav.primary a {
  104. font-family: "Playfair Display", serif !important;
  105. font-weight: 400 !important;
  106. /* Regular */
  107. font-style: normal !important;
  108. font-size: 15px !important;
  109. /* Figma size */
  110. line-height: 100% !important;
  111. letter-spacing: 0 !important;
  113. color: #3C1E12;
  114. /* matches Book a Visit color */
  115. text-decoration: none;
  117. padding: 6px 8px;
  118. /* keep your layout spacing */
  119. border-radius: 6px;
  121. transition: background 0.2s ease;
  122. }
  124. /* Hover state (optional subtle effect like Figma preview) */
  125. nav.primary a:hover {
  126. background: rgba(0, 0, 0, 0.06);
  127. color: #3C1E12;
  128. /* no change in color */
  129. }
  131. /* Mobile menu links */
  132. .mobile-nav a {
  133. font-family: "Playfair Display", serif !important;
  134. font-weight: 400 !important;
  135. font-size: 15px !important;
  136. letter-spacing: 0 !important;
  137. color: #3C1E12;
  138. }
  140. .rightbar {
  141. display: flex;
  142. align-items: center;
  143. gap: 12px;
  144. }
  147. #desktopBookBtn {
  148. width: 174px;
  149. /* Figma button width */
  150. height: 57px;
  151. /* Figma button height */
  152. display: inline-flex;
  153. align-items: center;
  154. justify-content: center;
  156. background: transparent;
  157. border-radius: 8px;
  158. /* Figma corner radius */
  160. /* Border from Figma (thin outline) */
  161. border: 1px solid rgba(60, 30, 18, 0.40);
  162. /* darker visible border */
  164. cursor: pointer;
  166. /* Figma Typography */
  167. font-family: "Playfair Display", serif !important;
  168. font-weight: 700 !important;
  169. /* Bold */
  170. font-style: italic !important;
  171. font-size: 24px !important;
  172. line-height: 100% !important;
  174. /* Letter spacing -6% = -0.06em */
  175. letter-spacing: -0.06em !important;
  177. color: #3C1E12 !important;
  178. }
  180. /* Hover effect (Figma-like subtle shadow) */
  181. #desktopBookBtn:hover {
  182. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  183. }
  190. /* hamburger (hidden on desktop) */
  191. .hamburger {
  192. display: none;
  193. align-items: center;
  194. justify-content: center;
  195. width: 44px;
  196. height: 44px;
  197. border-radius: 8px;
  198. border: 1px solid rgba(0, 0, 0, 0.06);
  199. background: transparent;
  200. cursor: pointer;
  201. padding: 8px;
  202. }
  204. .hamburger .bar {
  205. display: block;
  206. width: 18px;
  207. height: 2px;
  208. background: var(--dark);
  209. margin: 3px 0;
  210. transition: transform .2s, opacity .2s;
  211. }
  213. /* mobile floating menu + overlay (initial hidden) */
  214. .mobile-overlay {
  215. position: fixed;
  216. inset: 0;
  217. background: rgba(0, 0, 0, 0.22);
  218. z-index: 1350;
  219. opacity: 0;
  220. pointer-events: none;
  221. transition: opacity .22s ease;
  222. }
  224. .mobile-overlay.show {
  225. opacity: 1;
  226. pointer-events: auto;
  227. }
  229. .mobile-nav {
  230. position: fixed;
  231. left: 12px;
  232. right: 12px;
  233. top: 68px;
  234. max-width: 420px;
  235. margin: 0 auto;
  236. background: #fff;
  237. border-radius: 12px;
  238. padding: 14px;
  239. box-shadow: 0 22px 60px rgba(0, 0, 0, 0.16);
  240. border: 1px solid rgba(0, 0, 0, 0.06);
  241. z-index: 1400;
  242. transform: translateY(-8px) scale(.995);
  243. opacity: 0;
  244. pointer-events: none;
  245. transition: opacity .22s ease, transform .22s ease;
  246. }
  248. .mobile-nav.open {
  249. opacity: 1;
  250. transform: translateY(0) scale(1);
  251. pointer-events: auto;
  252. }
  254. .mobile-nav a {
  255. display: block;
  256. padding: 10px 12px;
  257. color: var(--dark);
  258. text-decoration: none;
  259. border-radius: 8px;
  260. font-weight: 600;
  261. }
  263. .mobile-nav a+a {
  264. margin-top: 8px;
  265. }
  267. .mobile-nav .book-cta {
  268. background: #f7f9f9;
  269. text-align: center;
  270. padding: 12px;
  271. color: var(--accent);
  272. font-weight: 700;
  273. }
  279. /******************************
  280. PAGE / HERO / PANEL
  281. ******************************/
  282. .page {
  283. width: 100%;
  284. display: flex;
  285. flex-direction: column;
  286. align-items: center;
  287. justify-content: flex-start;
  288. margin-top: 20px;
  289. }
  293. .panel-wrap {
  294. width: 100%;
  295. display: flex;
  296. justify-content: center;
  297. align-items: center;
  298. margin-top: 18px;
  299. }
  301. .hero {
  302. width: 100%;
  303. max-width: 920px;
  304. text-align: center;
  305. margin-bottom: 12px;
  306. }
  308. /* Desktop style */
  309. .page h1 {
  310. font-family: "Inter", sans-serif;
  311. font-weight: 700;
  312. font-style: normal;
  313. font-size: 48px;
  314. line-height: 100%;
  315. letter-spacing: 0;
  316. text-align: center;
  318. width: 100%;
  319. max-width: 444px;
  320. /* Figma width */
  321. margin: 0 auto 10px;
  322. /* Center + bottom spacing */
  323. color: #3B1E14 !important;
  324. }
  328. .hero .lead {
  329. font-family: "Inter", sans-serif;
  330. font-weight: 400;
  331. font-style: normal;
  332. font-size: 20px;
  333. line-height: 100%;
  334. letter-spacing: 0;
  335. text-align: center;
  337. width: 100%;
  338. max-width: 417px;
  339. /* From Figma */
  340. margin: 0 auto 20px;
  341. /* Center + spacing */
  342. color: #000000;
  343. /* BLACK COLOR as requested */
  344. }
  347. .muted-label {
  348. font-family: "Inter", sans-serif;
  349. font-weight: 700;
  350. font-style: normal;
  351. font-size: 16px;
  352. line-height: 100%;
  353. letter-spacing: 0;
  354. color: #3B1E14;
  356. width: 100%;
  357. max-width: 100%;
  358. margin-bottom: 8px;
  360. text-align: left;
  361. display: block;
  363. margin-left: 0px !important;
  364. /* ⬅ FIXES CENTER ISSUE */
  365. }
  369. .input {
  370. width: 100%;
  371. padding: 14px 16px;
  372. border-radius: 12px;
  373. border: 1px solid rgba(0, 0, 0, 0.06);
  374. background: #fff;
  375. font-size: 16px;
  376. }
  378. .btn {
  379. display: inline-block;
  380. padding: 14px 18px;
  381. border-radius: 12px;
  382. background: var(--accent);
  383. color: #fff;
  384. font-weight: 700;
  385. border: none;
  386. cursor: pointer;
  387. box-shadow: 0 8px 26px rgba(18, 54, 59, 0.12);
  388. }
  390. /* CSS - responsive behavior */
  393. /* default field behaviour */
  394. .field {
  395. width: 100%;
  396. max-width: 760px;
  397. /* original maximum */
  398. margin: 0 auto 18px;
  399. /* center and spacing */
  400. margin-top: 0 auto 18px;
  401. }
  403. /* compact variant to match your 536x48 measurement */
  404. .field .input.compact {
  405. box-sizing: border-box;
  406. width: 100%;
  407. height: 48px;
  408. /* your requested height */
  409. padding: 10px 14px;
  410. /* inner spacing */
  411. border-radius: 10px;
  412. border: 1px solid rgba(0, 0, 0, 0.06);
  413. font-size: 15px;
  414. background-color: white;
  415. }
  419. #contactDisplay {
  420. color: #666;
  421. font-weight: 700;
  422. padding: 10px 14px;
  423. border-radius: 10px;
  424. min-width: 180px;
  426. }
  428. #changeContact {
  429. color: #0478D0;
  430. text-decoration: underline;
  431. cursor: pointer;
  432. /*margin-left: 40px;*/
  433. font-size: medium;
  434. }
  438. .muted-label {
  439. display: block;
  440. margin-bottom: 8px;
  442. color: #000;
  443. font-weight: 700;
  444. }
  448. /* Desktop */
  449. .people-row {
  450. display: flex;
  451. align-items: center;
  452. gap: 16px;
  453. /*white-space: nowrap;*/
  454. }
  456. .muted-label-inline {
  457. font-weight: 600;
  458. color: black;
  459. /*margin-right: 320px;*/
  460. font-size: 16px;
  461. }
  464. .small {
  465. height: 40px;
  466. width: 40px;
  467. display: flex;
  468. align-items: center;
  469. justify-content: center;
  470. border-radius: 8px;
  471. border: 1px solid #ddd;
  472. background: #fff;
  473. cursor: pointer;
  474. }
  476. .counter {
  477. min-width: 40px;
  478. height: 40px;
  479. display: flex;
  480. align-items: center;
  481. justify-content: center;
  482. font-weight: 700;
  483. border: 1px solid #ddd;
  484. background: #fff;
  485. border-radius: 8px;
  486. }
  489. .people-support {
  490. margin-top: 10px;
  491. color: #000000 !important;
  492. font-size: 13px;
  493. }
  495. .people-support .link {
  496. color: #0478D0;
  497. text-decoration: none;
  498. }
  501. /* a little spacing when controls are inline with other content */
  502. .spacer {
  503. width: 12px;
  504. }
  509. .date-wrap {
  510. display: flex;
  511. align-items: center;
  512. gap: 10px;
  513. position: relative;
  514. }
  516. /* main date input visual */
  517. .date-wrap .input[type="date"] {
  518. font-family: "Inter", sans-serif !important;
  519. font-size: 16px;
  520. color: #0000 !important;
  521. padding: 12px 44px 12px 12px;
  522. /* reserve space on right for icon */
  523. width: 100%;
  524. background: #fff;
  525. border: 1px solid #ccc;
  526. border-radius: 12px;
  527. box-sizing: border-box;
  528. cursor: pointer;
  529. background-color: white;
  531. /* keep native appearance so browsers show their indicator */
  532. -webkit-appearance: textfield;
  533. appearance: textfield;
  534. }
  536. /* Force inner pieces to be black in WebKit browsers */
  537. .date-wrap .input[type="date"]::-webkit-datetime-edit,
  538. .date-wrap .input[type="date"]::-webkit-datetime-edit-text,
  539. .date-wrap .input[type="date"]::-webkit-datetime-edit-month-field,
  540. .date-wrap .input[type="date"]::-webkit-datetime-edit-day-field,
  541. .date-wrap .input[type="date"]::-webkit-datetime-edit-year-field {
  542. color: #000 !important;
  543. }
  545. .date-wrap .input[type="date"]::-webkit-calendar-picker-indicator {
  546. position: absolute;
  547. /* allow us to place it over the input area */
  548. right: 12px;
  549. /* matches padding-right */
  550. top: 50%;
  551. transform: translateY(-50%);
  552. width: 22px;
  553. height: 22px;
  554. opacity: 1;
  555. /* ensure visible */
  556. cursor: pointer;
  557. filter: none;
  558. /* remove inversion if any */
  559. -webkit-appearance: auto;
  560. /* let browser draw its icon */
  561. }
  563. .date-wrap .input[type="date"]::-moz-focus-inner {
  564. border: 0;
  565. }
  567. /* fallback: custom inline SVG icon placed absolutely (only shows if native icon not visible) */
  568. .date-wrap::after {
  569. content: "";
  570. position: absolute;
  571. right: 12px;
  572. top: 50%;
  573. transform: translateY(-50%);
  574. width: 22px;
  575. height: 22px;
  576. pointer-events: none;
  577. /* indicator should not intercept clicks; native indicator will */
  578. background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%23000'><path d='M7 10h5v5H7zm-2 9h14V8H5zm14-13h-2V4h-2v2H9V4H7v2H5v2h14z'/></svg>");
  579. background-repeat: no-repeat;
  580. background-position: center;
  581. background-size: 20px 20px;
  582. opacity: 0.9;
  583. }
  586. .date-icon {
  587. width: 40px;
  588. height: 40px;
  589. display: flex;
  590. align-items: center;
  591. justify-content: center;
  592. border-radius: 10px;
  593. background: rgba(0, 0, 0, 0.04);
  594. }
  596. .counter {
  597. width: 46px;
  598. text-align: center;
  599. font-weight: 700;
  600. }
  602. /* time range pills */
  603. /* pills */
  604. .time-ranges {
  605. display: flex;
  606. gap: 10px;
  607. flex-wrap: wrap;
  608. margin: 14px 0 8px;
  609. }
  611. .pill {
  612. padding: 10px 12px;
  613. border-radius: 10px;
  614. background: rgba(255, 255, 255, 0.95);
  615. border: 1px solid rgba(0, 0, 0, 0.06);
  616. min-width: 110px;
  617. text-align: center;
  618. cursor: pointer;
  619. user-select: none;
  620. }
  622. .pill small {
  623. display: block;
  624. color: var(--muted);
  625. margin-top: 6px;
  626. font-weight: 600;
  627. font-size: 12px;
  628. }
  630. .pill.active {
  631. background: linear-gradient(180deg, var(--green-start), var(--green-end));
  632. color: #fff;
  633. border-color: transparent;
  634. box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
  635. }
  637. .pill.active small {
  638. color: #fff !important;
  639. }
  641. /* info row: left multi-line, right inline summary */
  642. .info-row {
  643. display: flex;
  644. justify-content: space-between;
  645. align-items: flex-start;
  646. gap: 18px;
  647. margin-top: 6px;
  648. }
  650. .preview-note-box {
  651. width: 320px;
  652. font-size: 13px;
  653. color: var(--muted);
  654. line-height: 1.45;
  655. }
  657. .summary-inline {
  658. display: flex;
  659. gap: 18px;
  660. align-items: center;
  661. /*white-space: nowrap;*/
  662. flex-shrink: 1;
  663. flex-wrap: wrap;
  664. }
  666. .summary-item {
  667. font-size: 13px;
  668. color: var(--muted);
  669. }
  671. .summary-item strong {
  672. margin-left: 6px;
  673. font-weight: 700;
  674. }
  676. /* once a slot is chosen and locked, make it look non-clickable */
  677. .slot.locked {
  678. cursor: not-allowed;
  679. }
  682. /* slots grid and slot styles */
  683. .slots-grid {
  684. display: grid;
  685. grid-template-columns: 1fr 1fr;
  686. gap: 12px;
  687. margin-top: 14px;
  688. }
  690. .slot {
  691. display: flex;
  692. align-items: center;
  693. justify-content: space-between;
  694. padding: 10px 12px;
  695. border-radius: 10px;
  696. background: var(--card-bg);
  697. border: 1px solid rgba(0, 0, 0, 0.06);
  698. cursor: pointer;
  699. }
  701. .slot.disabled {
  702. background: #f1f1f1;
  703. color: #8b8b8b;
  704. cursor: not-allowed;
  705. }
  707. .left {
  708. display: flex;
  709. flex-direction: column;
  710. gap: 6px;
  711. }
  713. .time {
  714. font-weight: 700;
  715. }
  717. .meta {
  718. font-size: 13px;
  719. color: var(--muted);
  720. }
  722. .choose {
  723. width: 36px;
  724. height: 36px;
  725. border-radius: 8px;
  726. border: 1px solid rgba(0, 0, 0, 0.08);
  727. display: flex;
  728. align-items: center;
  729. justify-content: center;
  730. font-weight: 700;
  731. font-size: 16px;
  732. }
  734. .slot .time {
  735. font-weight: 700;
  736. color: #000 !important;
  737. /* always black */
  738. }
  740. .slot.chosen {
  741. background: #ffffff !important;
  742. /* keep slot white */
  743. color: #fff;
  744. border-color: transparent;
  745. border-color: rgba(0, 0, 0, 0.06) !important;
  746. /* optional subtle glow around the entire slot (comment out if not wanted) */
  747. box-shadow: 0 6px 18px rgba(9, 144, 90, 0.04);
  748. }
  750. /* .slot.chosen .meta{ color: rgba(255,255,255,0.9); } */
  751. .slot.chosen .choose {
  752. background: linear-gradient(180deg, var(--green-start), var(--green-end)) !important;
  753. color: #fff;
  754. border-color: transparent !important;
  755. box-shadow: 0 6px 16px rgba(9, 144, 90, 0.12) !important;
  756. }
  758. .info-row {
  759. display: flex !important;
  760. flex-direction: column !important;
  761. /* always stacked */
  762. align-items: center !important;
  763. /* center items horizontally */
  764. justify-content: flex-start;
  765. gap: 14px;
  766. width: 100%;
  767. max-width: 820px;
  768. margin: 0 auto;
  769. box-sizing: border-box;
  770. }
  772. /* preview note becomes a centered block (fluid width) */
  773. .preview-note-box {
  774. width: 100%;
  775. max-width: 640px;
  776. flex: 0 0 auto;
  777. font-size: 13px;
  778. color: #000000;
  779. line-height: 1.45;
  780. text-align: left !important;
  781. /* ← LEFT aligned */
  782. padding: 6px 8px;
  783. }
  786. .summary-inline {
  787. width: 100% !important;
  788. /* use the full container width */
  789. max-width: 100% !important;
  790. /* don't constrain to 420px here */
  791. display: flex !important;
  792. align-items: center !important;
  793. justify-content: flex-end !important;
  794. /* left / right extremes */
  795. gap: 24px !important;
  796. padding: 6px 8px !important;
  797. box-sizing: border-box !important;
  798. margin: 0 auto !important;
  799. white-space: nowrap !important;
  800. }
  802. /* Make each item expand to fill half the line */
  803. .summary-item {
  804. display: flex !important;
  805. justify-content: flex-end !important;
  806. /* both right-aligned */
  807. /* align-items: center !important; */
  808. gap: 8px !important;
  809. line-height: 1 !important;
  810. flex: 0 0 auto !important;
  811. /* allow items to grow and take space */
  812. min-width: 0 !important;
  813. /* prevent overflow due to long text */
  814. text-align: right !important;
  815. }
  817. /* Left block: align contents to left */
  818. .summary-item.unallocated {
  819. justify-content: flex-end !important;
  820. text-align: right !important;
  821. /* color: #E63946 !important; */
  822. }
  824. /* Right block: align contents to right */
  825. .summary-item.allocated {
  826. justify-content: flex-end !important;
  827. text-align: right !important;
  828. /* color: #16A34A !important; */
  829. }
  831. /* Keep numeric counter compact and centered inside its area */
  832. .summary-item strong {
  833. min-width: 28px !important;
  834. display: inline-block !important;
  835. text-align: center !important;
  836. }
  838. /* DEFAULT color = black */
  839. .summary-item span,
  840. .summary-item strong {
  841. color: #000 !important;
  842. }
  844. /* Red */
  845. .text-red span,
  846. .text-red strong {
  847. color: #E63946 !important;
  848. }
  850. /* Green */
  851. .text-green span,
  852. .text-green strong {
  853. color: #16A34A !important;
  854. }
  857. .submit-note {
  858. font-family: "Inter", sans-serif;
  859. font-size: 13px;
  860. color: #000000;
  861. text-align: left;
  862. /* left aligned */
  863. margin: 3px 0 10px 0;
  864. /* top:3px, bottom:10px */
  865. margin-left: 3px;
  866. }
  868. .submit-wrap {
  869. margin-top: 16px;
  870. }
  872. /* Book Visit — visible by default */
  873. .book-vist {
  874. opacity: 1;
  875. pointer-events: auto;
  876. }
  878. /* Cancel Book — HIDDEN by default */
  879. .cancel-book {
  880. display: none;
  881. /* ⬅ start hidden */
  882. }
  884. /* Utility classes that JS toggles */
  885. .section-hidden {
  886. display: none !important;
  887. }
  889. .section-enabled {
  890. display: block !important;
  891. opacity: 1 !important;
  892. pointer-events: auto !important;
  893. }
  895. /* When Cancel is visible, style the button normally */
  896. .cancel-book.section-enabled .btn {
  897. background: #043B55;
  898. color: #ffffff;
  899. border-radius: 10px;
  900. border: none;
  901. cursor: pointer;
  902. font-weight: 700;
  903. box-shadow: 0 8px 26px rgba(18, 54, 59, 0.12);
  904. }
  908. /* summary card inside cancel section (you already had this) */
  909. .summary-card {
  911. max-width: 100%;
  912. background: #fff;
  913. border-radius: 10px;
  914. padding: 18px 20px;
  915. border: 2px solid rgba(0, 0, 0, 0.12);
  916. box-sizing: border-box;
  917. font-family: Inter, sans-serif;
  918. color: #111;
  919. margin: 0 auto;
  920. }
  922. /* Top row */
  923. .summary-row {
  924. display: flex;
  925. justify-content: space-between;
  926. align-items: flex-start;
  927. margin-bottom: 12px;
  928. }
  930. .summary-left .label {
  931. font-size: 13px;
  932. font-weight: 700;
  933. margin-bottom: 10px;
  934. color: black;
  935. }
  937. .summary-right div {
  938. font-size: 13px;
  939. font-weight: 400;
  940. margin-bottom: 10px;
  941. text-align: right;
  942. color: black;
  943. }
  945. /* AV */
  946. .av-title {
  947. font-size: 13px;
  948. font-weight: 700;
  949. color: black;
  950. margin: 6px 0 10px;
  951. }
  953. .av-list {
  954. display: flex;
  955. flex-direction: column;
  956. gap: 8px;
  957. }
  959. .av-row {
  960. display: flex;
  961. justify-content: space-between;
  962. font-size: 13px;
  963. }
  965. .av-time,
  966. .av-seats {
  967. font-size: 13px;
  968. font-weight: 400;
  969. margin-bottom: 10px;
  970. }
  972. /* main buttons (book visit / preview etc.) */
  973. .submit-wrap {
  974. margin-top: 16px;
  975. }
  977. .btn {
  978. width: 100%;
  979. padding: 12px 26px;
  980. background: #043B55;
  981. color: #ffffff;
  982. border-radius: 10px;
  983. border: none;
  984. cursor: pointer;
  985. font-weight: 700;
  986. box-sizing: border-box;
  987. margin-bottom: 15px;
  988. }
  990. /* small note text under cards */
  991. .submit-note {
  992. font-family: "Inter", sans-serif;
  993. font-size: 13px;
  994. color: #000000;
  995. text-align: left;
  996. margin: 10px 0;
  997. margin-left: 3px;
  998. font-weight: 700;
  999. }
  1001. /* make the button INSIDE cancel-book clearly disabled */
  1002. .cancel-book.section-enabled .btn {
  1003. background: #fff;
  1004. /* SAME background */
  1005. color: #000;
  1006. border-radius: 10px;
  1007. border: 3px solid #000;
  1008. /* SAME border */
  1009. cursor: pointer;
  1010. font-weight: 700;
  1011. box-shadow: 0 8px 26px rgba(18, 54, 59, 0.12);
  1012. }
  1016. /* ---------- Mobile polish (drop this at the end of your CSS) ---------- */
  1017. @media (max-width: 520px) {
  1019. /* page / body */
  1020. body {
  1021. padding: 12px 10px;
  1022. background-position: center top;
  1023. background-size: cover;
  1024. -webkit-font-smoothing: antialiased;
  1025. }
  1027. /* container & panels */
  1028. .container,
  1029. .panel-wrap,
  1030. .page {
  1031. width: 100%;
  1032. max-width: 420px;
  1033. margin: 0 auto;
  1034. padding: 0 8px;
  1035. box-sizing: border-box;
  1036. }
  1038. .panel-wrap {
  1039. padding: 6px 0 18px;
  1040. }
  1042. /* header / nav */
  1043. .logo {
  1044. width: 61px;
  1045. height: 61px;
  1046. }
  1048. nav.primary {
  1049. display: none !important;
  1050. }
  1052. #desktopBookBtn {
  1053. display: none !important;
  1054. }
  1056. .hamburger {
  1057. display: flex !important;
  1058. }
  1060. /* hero */
  1061. .page h1 {
  1062. font-size: 32px !important;
  1063. width: 100%;
  1064. max-width: 360px;
  1065. margin: 6px auto 8px;
  1066. }
  1068. .hero .lead {
  1069. font-size: 14px !important;
  1070. max-width: 320px;
  1071. margin-bottom: 12px;
  1072. }
  1074. /* fields */
  1075. .field {
  1076. width: calc(100% - 20px);
  1077. margin-left: 10px;
  1078. margin-right: 10px;
  1079. max-width: none;
  1080. }
  1082. .field .input,
  1083. .field .input.compact {
  1084. width: 100%;
  1085. font-size: 15px;
  1086. padding: 12px 14px;
  1087. height: 46px;
  1088. border-radius: 10px;
  1089. }
  1091. /* contact row */
  1092. #contactLine {
  1093. display: flex;
  1094. align-items: center;
  1095. justify-content: space-between;
  1096. gap: 8px;
  1097. }
  1099. #contactDisplay {
  1100. min-width: 0;
  1101. flex: 1 1 auto;
  1102. padding: 10px 12px;
  1103. font-weight: 700;
  1104. border-radius: 10px;
  1105. overflow: hidden;
  1106. text-overflow: ellipsis;
  1107. white-space: nowrap;
  1108. margin-left: -14px
  1109. }
  1111. #changeContact {
  1112. margin-left: 10px;
  1113. }
  1115. /* label and inline people row */
  1116. .muted-label {
  1117. font-size: 16px;
  1118. margin-left: 0 !important;
  1119. display: block;
  1120. }
  1122. /* whole row */
  1123. .people-row {
  1124. display: flex;
  1125. align-items: center;
  1126. width: 100%;
  1127. gap: 8px;
  1128. /* IMPORTANT: allow wrapping so row doesn't overflow */
  1129. white-space: normal;
  1130. }
  1132. /* label on the left */
  1133. .muted-label-inline {
  1134. flex: 1 1 auto;
  1135. /* take left side space */
  1136. margin-right: 0;
  1137. font-size: 15px;
  1138. font-weight: 600;
  1139. color: black;
  1140. text-align: left;
  1141. }
  1143. /* Hover effect for Select Date input */
  1144. .date-wrap .input[type="date"]:hover {
  1145. border-color: #043B55;
  1146. /* brand color */
  1147. box-shadow: 0 0 0 2px rgba(4, 59, 85, 0.12);
  1148. cursor: pointer;
  1149. }
  1151. /* Focus (keyboard / click) */
  1152. .date-wrap .input[type="date"]:focus {
  1153. outline: none;
  1154. border-color: #043B55;
  1155. box-shadow: 0 0 0 3px rgba(4, 59, 85, 0.18);
  1156. }
  1159. /* push controls to the right */
  1160. #minusPeople {
  1161. margin-left: auto;
  1162. /* this pushes the group to the right */
  1163. }
  1165. #peopleCount,
  1166. #plusPeople {
  1167. margin-left: 6px;
  1168. /* spacing between controls */
  1169. }
  1171. /* touch-friendly sizes */
  1172. .small {
  1173. width: 40px;
  1174. height: 40px;
  1175. border-radius: 10px;
  1176. font-size: 18px;
  1177. }
  1179. .counter {
  1180. min-width: 52px;
  1181. height: 40px;
  1182. border-radius: 10px;
  1183. font-size: 16px;
  1184. }
  1187. /* pills / time ranges */
  1188. .time-ranges {
  1189. gap: 8px;
  1190. margin: 12px 0;
  1191. justify-content: flex-start;
  1192. overflow-x: auto;
  1193. -webkit-overflow-scrolling: touch;
  1194. padding-bottom: 6px;
  1195. }
  1197. .time-ranges::-webkit-scrollbar {
  1198. display: none;
  1199. }
  1201. .pill {
  1202. min-width: 96px;
  1203. padding: 5px;
  1204. border-radius: 10px;
  1205. flex: 0 0 auto;
  1206. }
  1208. /* slots grid -> single column */
  1209. .slots-grid {
  1210. grid-template-columns: 1fr;
  1211. gap: 10px;
  1212. margin-top: 12px;
  1213. }
  1215. .slot {
  1216. padding: 10px 12px;
  1217. border-radius: 10px;
  1218. }
  1220. /* info row -> stack */
  1221. .info-row {
  1222. flex-direction: column;
  1223. align-items: stretch;
  1224. gap: 10px;
  1225. margin-top: 10px;
  1226. }
  1228. .preview-note-box {
  1229. width: 100%;
  1230. max-width: none;
  1231. font-size: 13px;
  1232. }
  1234. .summary-inline {
  1235. justify-content: flex-end !important;
  1236. gap: 12px !important;
  1237. flex-wrap: wrap !important;
  1238. white-space: normal !important;
  1239. }
  1241. .summary-item {
  1242. flex: 0 0 48% !important;
  1243. /* two-column layout on small screens */
  1244. box-sizing: border-box !important;
  1245. }
  1247. .summary-item.unallocated {
  1248. justify-content: flex-start !important;
  1249. text-align: left !important;
  1250. }
  1252. .summary-item.allocated {
  1253. justify-content: flex-end !important;
  1254. text-align: right !important;
  1255. }
  1257. /* submit area */
  1258. .submit-wrap {
  1259. margin-top: 18px;
  1260. padding-bottom: 18px;
  1261. }
  1263. .btn {
  1264. width: 100%;
  1265. padding: 12px 14px;
  1266. font-size: 16px;
  1267. border-radius: 12px;
  1268. }
  1270. /* small text adjustments */
  1271. .muted,
  1272. .people-support,
  1273. .summary-item {
  1274. font-size: 13px;
  1275. line-height: 1.3;
  1276. }
  1278. /* avoid long fixed widths on mobile that break layout */
  1279. .page h1,
  1280. .hero .lead,
  1281. .preview-note-box,
  1282. .summary-inline,
  1283. .field {
  1284. max-width: 100%;
  1285. }
  1287. /* small helper: ensure form controls never overflow */
  1288. input[type="text"],
  1289. input[type="date"],
  1290. textarea,
  1291. select {
  1292. max-width: 100%;
  1293. box-sizing: border-box;
  1294. }
  1296. /* interaction: slightly larger tap areas on interactive elements */
  1297. .pill,
  1298. .slot,
  1299. .small,
  1300. .btn {
  1301. touch-action: manipulation;
  1302. -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
  1303. }
  1305. }
  1308. /* small helpers */
  1309. .link {
  1310. color: #0b76c6;
  1311. text-decoration: underline;
  1312. cursor: pointer;
  1313. font-size: 14px;
  1314. }
  1317. .vph-modal-overlay {
  1318. position: fixed;
  1319. inset: 0;
  1320. background: rgba(0, 0, 0, 0.56);
  1321. display: none;
  1322. align-items: center;
  1323. justify-content: center;
  1324. z-index: 9999;
  1325. padding: 28px;
  1326. -webkit-font-smoothing: antialiased;
  1327. -moz-osx-font-smoothing: grayscale;
  1328. }
  1330. .vph-modal-overlay.show {
  1331. display: flex !important;
  1332. }
  1334. /* modal card */
  1335. .vph-modal {
  1336. width: 500px;
  1337. max-width: 100%;
  1338. background: #fff;
  1339. border-radius: 12px;
  1340. box-shadow: 0 30px 80px rgba(7, 25, 30, 0.45);
  1341. padding: 20px 22px;
  1342. position: relative;
  1343. outline: none;
  1345. /* keep on-screen */
  1346. overflow: hidden;
  1347. /* inner area handles overflow */
  1348. display: flex;
  1349. flex-direction: column;
  1350. gap: 12px;
  1351. transition: transform .18s ease, opacity .18s ease;
  1352. transform: translateY(0);
  1353. }
  1357. /* when overlay appears the modal can fade in (optional) */
  1358. .vph-modal-overlay.show .vph-modal {
  1359. transform: translateY(0);
  1360. opacity: 1;
  1361. }
  1363. /* header */
  1364. .vph-modal-header {
  1365. text-align: center;
  1366. margin-top: 2px;
  1367. }
  1369. .vph-modal-header h3 {
  1370. margin: 0;
  1371. font-weight: 700;
  1372. color: #3B1E14;
  1373. font-size: 18px;
  1374. letter-spacing: 0;
  1375. font-family: "Inter", sans-serif !important;
  1376. /* Add Inter font */
  1377. }
  1379. /* content area (scrollable) */
  1380. .vph-modal .vph-modal-content {
  1381. flex: 1 1 auto;
  1382. overflow-y: auto;
  1383. padding-right: 6px;
  1384. }
  1386. /* summary box (top) */
  1387. .vph-summary-box {
  1389. min-height: auto;
  1390. /* ✅ allow growth */
  1391. height: auto;
  1392. /* ✅ dynamic */
  1395. background: #f3f4f2;
  1396. /* subtle off-white */
  1397. border-radius: 8px;
  1398. padding: 12px;
  1399. margin: 0;
  1400. border: 1px solid rgba(0, 0, 0, 0.02);
  1401. }
  1403. /* two-column summary row */
  1404. .vph-summary-row {
  1405. display: flex;
  1406. gap: 12px;
  1407. align-items: flex-start;
  1408. justify-content: space-between;
  1409. }
  1411. .vph-summary-left,
  1412. .vph-summary-right {
  1413. width: 48%;
  1414. display: flex;
  1415. flex-direction: column;
  1416. gap: 10px;
  1417. }
  1419. .vph-summary-left .vph-label {
  1420. color: #000 !important;
  1421. /* Black text */
  1422. font-size: 13px;
  1423. font-weight: 700 !important;
  1424. /* Normal, not bold */
  1425. font-family: "Inter", sans-serif !important;
  1426. /* Add Inter font */
  1427. }
  1429. .vph-summary-right {
  1430. text-align: right;
  1431. color: #0b0b0b;
  1432. font-size: 14px;
  1433. font-weight: 400;
  1435. }
  1437. /* AV Experience box */
  1438. .vph-av-box {
  1439. /* width:562px; */
  1440. /* height:114px; */
  1441. max-height: 30vh;
  1442. overflow-y: auto;
  1443. background: #f3f4f2;
  1444. border-radius: 8px;
  1445. padding: 10px 12px;
  1446. border: 1px solid rgba(0, 0, 0, 0.02);
  1447. }
  1449. .vph-av-box::-webkit-scrollbar {
  1450. width: 4px;
  1451. }
  1453. .vph-av-box::-webkit-scrollbar-thumb {
  1454. background: #b5b5b5;
  1455. border-radius: 5px;
  1456. }
  1460. .vph-av-row {
  1461. display: flex;
  1462. justify-content: space-between;
  1463. align-items: center;
  1464. padding: 8px 10px;
  1465. border-radius: 6px;
  1466. background: transparent;
  1467. }
  1469. .vph-av-time {
  1470. font-weight: 400;
  1471. color: #0b0b0b;
  1472. font-size: 14px;
  1473. }
  1475. .vph-av-meta {
  1476. font-weight: 400;
  1477. color: #0b0b0b;
  1478. font-size: 14px;
  1479. }
  1481. /* footer area — controls */
  1482. .vph-modal-footer {
  1483. display: flex;
  1484. gap: 12px;
  1485. align-items: center;
  1486. margin-top: auto;
  1487. flex-shrink: 0;
  1488. }
  1490. /* left icon button (circle) */
  1491. .vph-modal-icon-btn {
  1492. Width: 66px;
  1493. Height: 66px;
  1494. border-radius: 10px;
  1495. border: 1px solid #043B55;
  1496. background: #fff;
  1497. display: inline-flex;
  1498. align-items: center;
  1499. justify-content: center;
  1500. cursor: pointer;
  1501. box-shadow: 0 6px 18px rgba(7, 25, 30, 0.04);
  1502. }
  1504. .vph-modal-submit {
  1505. width: 100%;
  1506. /* responsive */
  1507. max-width: 482px;
  1508. /* desktop size */
  1509. height: 66px;
  1511. padding: 12px 36px;
  1512. border-radius: 10px;
  1513. background: #043B55;
  1514. color: #fff;
  1515. border: none;
  1516. font-weight: 700;
  1517. cursor: pointer;
  1518. box-shadow: 0 10px 30px rgba(11, 75, 72, 0.14);
  1519. }
  1521. /* close X */
  1522. .vph-modal-close {
  1523. position: absolute;
  1524. right: 12px;
  1525. top: 12px;
  1526. width: 36px;
  1527. height: 36px;
  1528. border-radius: 8px;
  1529. border: none;
  1530. background: transparent;
  1531. font-size: 20px;
  1532. cursor: pointer;
  1533. color: #6b6b6b;
  1534. }
  1537. /* ===== Cancel Booking modal helpers (re-use existing .vph-modal styles) ===== */
  1539. /* two-step views */
  1540. .vph-view {
  1541. display: none;
  1542. }
  1544. .vph-view.active {
  1545. display: block;
  1546. }
  1548. /* scrollable content area if you ever need body text */
  1551. /* footer: normal row + column variant for success view */
  1552. .vph-modal-footer {
  1553. display: flex;
  1554. gap: 12px;
  1555. align-items: center;
  1556. justify-content: space-between;
  1557. margin-top: 25px;
  1558. }
  1560. .vph-modal-footer.column {
  1561. flex-direction: column;
  1562. align-items: stretch;
  1563. gap: 12px;
  1564. margin-top: 14px;
  1565. }
  1567. /* icon button on left */
  1568. .vph-modal-icon-btn {
  1569. width: 66px;
  1570. height: 50px;
  1571. border-radius: 10px;
  1572. border: 1px solid #043B55;
  1573. background: #fff;
  1574. display: inline-flex;
  1575. align-items: center;
  1576. justify-content: center;
  1577. cursor: pointer;
  1578. box-shadow: 0 6px 18px rgba(7, 25, 30, 0.04);
  1579. }
  1581. /* primary + ghost buttons for cancel modal */
  1582. .vph-modal-submit.primary {
  1583. height: 50px;
  1584. width: 100%;
  1585. padding: 14px 18px;
  1586. border-radius: 10px;
  1587. background: #043B55;
  1588. color: #fff;
  1589. border: none;
  1590. font-weight: 700;
  1591. cursor: pointer;
  1592. box-shadow: 0 10px 30px rgba(11, 75, 72, 0.14);
  1593. }
  1595. .vph-modal-submit.ghost {
  1596. height: 50px;
  1597. width: 100%;
  1598. padding: 12px 16px;
  1599. border-radius: 10px;
  1600. background: #fff;
  1601. color: #0b0b0b;
  1602. border: 2px solid rgba(0, 0, 0, 0.08);
  1603. font-weight: 700;
  1604. cursor: pointer;
  1605. }
  1607. /* small compact info box (if needed later) */
  1608. .vph-summary-box.small {
  1609. background: #f7f7f6;
  1610. border-radius: 8px;
  1611. padding: 10px;
  1612. border: 1px solid rgba(0, 0, 0, 0.04);
  1613. margin-bottom: 6px;
  1614. text-align: center;
  1615. }
  1617. /* small screens: stack and make scrollable */
  1618. @media (max-width: 520px) {
  1619. .vph-modal {
  1620. width: 94%;
  1621. padding: 14px;
  1622. border-radius: 12px;
  1623. max-height: 92vh;
  1624. }
  1626. .vph-summary-row {
  1627. gap: 10px;
  1628. flex-direction: row;
  1629. }
  1631. .vph-summary-left,
  1632. .vph-summary-right {
  1633. width: 48%;
  1634. }
  1636. /*.vph-av-list {*/
  1637. /* max-height: 30vh;*/
  1638. /*}*/
  1640. .vph-modal-footer {
  1641. gap: 10px;
  1642. align-items: center;
  1643. }
  1645. .vph-modal-submit {
  1646. width: 56%;
  1647. padding: 12px;
  1648. width: 256px;
  1649. }
  1650. }
  1652. /* optional: thin custom scrollbar inside modal for better UX */
  1654. .vph-modal ::-webkit-scrollbar {
  1655. height: 8px;
  1656. width: 8px;
  1657. }
  1660. .vph-modal ::-webkit-scrollbar-thumb {
  1661. background: rgba(0, 0, 0, 0.08);
  1662. border-radius: 6px;
  1663. }
  1665. /* make sure text wrapping and truncation are tidy */
  1666. .vph-summary-right div,
  1667. .vph-summary-left div,
  1668. .vph-av-row {
  1669. word-break: break-word;
  1670. }
  1672. .panel {
  1673. background: transparent;
  1674. }
  1676. .date-wrap .form-control[readonly] {
  1677. background-color: #fff !important;
  1678. color: #000 !important;
  1679. }
  1681. .disabled-pill {
  1682. background-color: #eee !important;
  1683. border-color: #ddd !important;
  1684. }
  1686. .no-slots-message {
  1687. margin-top: 10px;
  1688. color: #c62828;
  1689. font-size: 14px;
  1690. font-weight: 600;
  1691. }
  1693. .no-slots-message-box {
  1694. padding: 12px;
  1695. margin-top: 10px;
  1696. text-align: center;
  1697. color: #d9534f;
  1698. /* red */
  1699. font-weight: 600;
  1700. font-size: 14px;
  1701. /* background: #ffeaea; */
  1702. /* soft red background */
  1703. border-radius: 6px;
  1704. }
  1706. /* make sure summary left labels are visible and take up space */
  1707. .summary-row {
  1708. display: flex;
  1709. align-items: flex-start;
  1710. gap: 12px;
  1711. }
  1713. .summary-left,
  1714. .summary-right {
  1715. width: 50%;
  1716. box-sizing: border-box;
  1717. }
  1719. .summary-left .label {
  1720. display: block;
  1721. color: #111 !important;
  1722. /* force readable color */
  1723. font-size: 13px;
  1724. font-weight: 700;
  1725. margin-bottom: 10px;
  1726. }
  1728. .summary-right>div {
  1729. display: block;
  1730. color: #111 !important;
  1731. font-weight: 400;
  1732. text-align: right;
  1733. margin-bottom: 10px;
  1734. }
  1736. /* =========================================
  1737. CALENDAR HOVER — FINAL GUARANTEED FIX
  1738. ========================================= */
  1740. /* Target the REAL visible flatpickr input */
  1741. .date-wrap input.input.form-control {
  1742. cursor: pointer;
  1743. background-color: #fff !important;
  1744. transition: border-color 0.15s ease,
  1745. box-shadow 0.15s ease,
  1746. background-color 0.15s ease;
  1747. }
  1749. /* Hover */
  1750. .date-wrap input.input.form-control:hover {
  1751. border-color: #043B55 !important;
  1752. box-shadow: 0 0 0 2px rgba(4, 59, 85, 0.18) !important;
  1753. background-color: #fafafa !important;
  1754. }
  1756. /* Focus */
  1757. .date-wrap input.input.form-control:focus {
  1758. outline: none !important;
  1759. border-color: #043B55 !important;
  1760. box-shadow: 0 0 0 3px rgba(4, 59, 85, 0.28) !important;
  1761. }
  1763. /* Optional: hover anywhere in wrapper */
  1764. .date-wrap:hover input.input.form-control {
  1765. border-color: #043B55 !important;
  1766. }
  1768. /* FIX: Cancel Booking button should NOT be full width */
  1769. #cancelBookSection .submit-wrap {
  1770. display: flex;
  1771. gap:12px;
  1772. justify-content: center;
  1774. flex-wrap: wrap; /* allow stacking */
  1775. }
  1777. #cancelBookSection .submit-wrap .btn {
  1778. width: auto !important;
  1779. max-width: none !important;
  1780. min-width: 240px;
  1781. padding: 12px 32px;
  1782. margin-right: 4px
  1783. }
  1785. /*
  1786. bugs follows
  1787. */
  1789. /* Interchange font sizes */
  1791. /* Make preview note text bigger */
  1792. .preview-note-box {
  1793. font-size: 16px !important;
  1794. font-weight: 500;
  1795. line-height: 1.6;
  1796. }
  1798. /* Make the label slightly smaller */
  1799. .field>.muted-label {
  1800. font-size: 14px !important;
  1801. font-weight: 600;
  1802. }
  1804. @keyframes shake {
  1805. 0% {
  1806. transform: translateX(0);
  1807. }
  1809. 20% {
  1810. transform: translateX(-5px);
  1811. }
  1813. 40% {
  1814. transform: translateX(5px);
  1815. }
  1817. 60% {
  1818. transform: translateX(-5px);
  1819. }
  1821. 80% {
  1822. transform: translateX(5px);
  1823. }
  1825. 100% {
  1826. transform: translateX(0);
  1827. }
  1828. }
  1830. .slot.shake {
  1831. animation: shake 0.35s ease;
  1832. border-color: #dc2626 !important;
  1833. }
  1836. .border-field {
  1837. border: 1px solid rgba(0, 0, 0, 0.15);
  1838. /* visible but subtle */
  1839. border-radius: 12px;
  1840. /* matches your UI */
  1841. padding: 16px 18px;
  1842. /* space inside box */
  1843. background: #ffffff;
  1844. /* white card look */
  1845. }
  1850. /* age group details Container */
  1851. /* Container */
  1852. .people-type-list {
  1853. margin-top: 12px;
  1854. display: grid;
  1855. /*grid-template-columns: repeat(2, 1fr); !* 2 by 2 *!*/
  1856. column-gap: 24px;
  1857. row-gap: 16px;
  1858. }
  1860. /* Each card */
  1861. .people-type-row {
  1862. display: flex;
  1863. justify-content: space-between;
  1864. align-items: center;
  1865. }
  1867. /* Label */
  1868. .people-type-label {
  1869. font-weight: 600;
  1870. }
  1872. /* Controls */
  1873. .people-type-controls {
  1874. display: flex;
  1875. align-items: center;
  1876. gap: 10px;
  1877. }
  1880. .people-total-row {
  1881. display: flex;
  1882. justify-content: flex-end;
  1883. /* ✅ pushes content to right */
  1884. align-items: center;
  1885. margin-top: 20px;
  1886. font-weight: 700;
  1887. font-size: 20px;
  1888. }
  1890. .people-total-label {
  1891. margin-right: 15px;
  1892. }
  1894. .people-total-value {
  1895. color: #043B55;
  1896. }
  1899. /* aadhar & passport */
  1900. .id-row {
  1901. display: grid;
  1902. grid-template-columns: 1fr 1fr;
  1903. gap: 12px;
  1904. margin-top: 6px;
  1905. padding-top: 10px;
  1906. padding-bottom: 10px;
  1907. }
  1911. /* ================================
  1912. PREVIEW MODAL – EXTRA DETAILS
  1913. ================================ */
  1915. /* Shared box (re-uses your visual language) */
  1916. .breakdown-box {
  1917. background: #f3f4f2;
  1918. border-radius: 8px;
  1919. padding: 14px 16px;
  1920. margin-top: 14px;
  1921. border: 1px solid rgba(0, 0, 0, 0.05);
  1922. }
  1924. /* Header row */
  1925. .breakdown-header {
  1926. display: flex;
  1927. justify-content: space-between;
  1928. align-items: center;
  1929. font-family: "Inter", sans-serif;
  1930. font-weight: 700;
  1931. font-size: 14px;
  1932. color: #111;
  1933. margin-bottom: 10px;
  1934. }
  1936. /* Rows container */
  1937. .breakdown-body {
  1938. display: flex;
  1939. flex-direction: column;
  1940. gap: 8px;
  1941. }
  1943. /* Each row */
  1944. .breakdown-row {
  1945. display: grid;
  1946. grid-template-columns: 1fr auto;
  1947. align-items: center;
  1948. font-family: "Inter", sans-serif;
  1949. font-size: 14px;
  1950. }
  1952. /* Labels */
  1953. .breakdown-label {
  1954. color: #111;
  1955. font-weight: 500;
  1956. }
  1958. /* Amount values */
  1959. .breakdown-value {
  1960. font-weight: 600;
  1961. text-align: right;
  1962. min-width: 70px;
  1963. }
  1965. /* Divider line */
  1966. .breakdown-divider {
  1967. margin: 10px 0;
  1968. border-top: 1px solid #d1d5db;
  1969. }
  1971. /* Total row */
  1972. .breakdown-row.total {
  1973. font-size: 16px;
  1974. font-weight: 700;
  1975. }
  1977. .breakdown-row.total .breakdown-value {
  1978. color: #043B55;
  1979. }
  1981. /* ================================
  1982. ID PROOF SECTION
  1983. ================================ */
  1985. .breakdown-idproof {
  1986. margin-top: 8px;
  1987. font-family: "Inter", sans-serif;
  1988. font-size: 14px;
  1989. color: #111;
  1990. display: flex;
  1991. gap: 8px;
  1992. flex-wrap: wrap;
  1993. }
  1995. .breakdown-idproof strong {
  1996. font-weight: 700;
  1997. }
  2003. @media (min-width: 768px) {
  2006. .muted-label-inline {
  2007. margin-right: 320px;
  2008. }
  2010. .people-type-list {
  2011. grid-template-columns: repeat(2, 1fr);
  2012. }
  2013. }
  2015. @media(min-width: 768px) {
  2017. #contactLine {
  2018. display: flex;
  2019. gap: 360px;
  2020. margin-left: -14px;
  2021. }
  2022. }
  2026. @media (max-width: 520px) {
  2027. .people-type-list {
  2028. grid-template-columns: 1fr;
  2029. }
  2030. }
  2033. @media (min-width: 521px) {
  2034. #cancelBookSection .submit-wrap .btn {
  2035. min-width: 200px;
  2036. width: auto !important;
  2037. }
  2038. }
  2040. /* Mobile */
  2041. @media (max-width: 520px) {
  2042. #cancelBookSection .submit-wrap {
  2043. flex-direction: column;
  2044. align-items: stretch;
  2045. }
  2047. #cancelBookSection .submit-wrap .btn {
  2048. width: 100% !important;
  2049. min-width: unset !important;
  2050. margin-right: 0 !important;
  2051. }
  2052. }
  2054. /* Cancel button – Red */
  2055. #cancelBtn {
  2056. background: #dc2626 !important; /* red-600 */
  2057. color: #fff !important;
  2058. border: none;
  2059. }
  2061. #cancelBtn:hover {
  2062. background: #b91c1c !important; /* darker red */
  2063. }
  2065. /* QR button – Green */
  2066. #qrBtn {
  2067. background: #16a34a !important; /* green-600 */
  2068. color: #fff !important;
  2069. border: none;
  2070. }
  2072. #qrBtn:hover {
  2073. background: #15803d !important; /* darker green */
  2074. }
  2076. </style>
  2084. <!-- </head> -->
  2086. <body>
  2087. <div class="container">
  2088. <header class="topbar" role="banner">
  2089. <div class="leftbar">
  2090. <div class="nav-left">
  2091. <!-- logo image — use same img src you already have -->
  2093. <img th:src="@{images/VPH-logo_main-EN 1.png}" alt="VPH logo" class="logo">
  2094. </div>
  2096. <!-- desktop nav (hidden on mobile) -->
  2097. <nav class="primary" aria-label="Primary navigation">
  2098. <a href="/victoriapublichall/home">Home</a>
  2099. <!-- <a href="#">About VPH</a>-->
  2100. <a href="/victoriapublichall/visit">Visit</a>
  2101. <!--<a href="#">Contact Us</a>-->
  2102. </nav>
  2103. </div>
  2105. <!-- right side: hamburger (mobile) + desktop CTA -->
  2106. <div class="rightbar">
  2107. <button id="hambtn" class="hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="mobileNav">
  2108. <span class="bar bar1" aria-hidden="true"></span>
  2109. <span class="bar bar2" aria-hidden="true"></span>
  2110. <span class="bar bar3" aria-hidden="true"></span>
  2111. </button>
  2114. </div>
  2115. </header>
  2117. <!-- overlay (click to close) -->
  2118. <div id="mobileOverlay" class="mobile-overlay" aria-hidden="true"></div>
  2120. <!-- mobile nav -->
  2121. <nav id="mobileNav" class="mobile-nav" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Mobile menu">
  2123. <a href="/victoriapublichall/home">Home</a>
  2124. <a href="#">About VPH</a>
  2125. <a href="/victoriapublichall/visit">Visit</a>
  2126. <a href="#">Contact Us</a>
  2128. </nav>
  2130. <main class="page" role="main" aria-labelledby="hero-heading">
  2131. <div class="hero" aria-hidden="false">
  2132. <h1 id="hero-heading">Victoria Public Hall</h1>
  2133. <div class="lead">Experience Chennai's First Town Hall</div>
  2134. </div>
  2136. <div class="panel-wrap">
  2138. <div class="panel" role="region" aria-label="Booking panel">
  2141. <div class="people-support">
  2142. For booking more than 10 people, please click here:
  2143. <!-- <a class="link" href="/victoriapublichall/bulkbooking" onclick="storeMobileForBulk()"> </a>-->
  2144. <a class="link" href="javascript:void(0)" onclick="handleBulkBookingClick()">
  2145. Bulk Booking Request
  2146. </a>
  2148. </div>
  2151. <!-- phone/email & OTP -->
  2154. <div class="field mt-4">
  2155. <label class="muted-label">Phone / Email</label>
  2156. <div id="contactLine">
  2157. <div id="contactDisplay">
  2159. </div>
  2160. <a id="changeContact" href="/victoriapublichall/register">
  2161. Change
  2162. </a>
  2163. </div>
  2164. </div>
  2167. <div id="bookVisitSection" class="book-vist">
  2169. <!-- select date -->
  2170. <div class="field">
  2171. <label class="muted-label">Select Date</label>
  2172. <div class="date-wrap">
  2173. <input id="dateInput" class="input" type="date" aria-label="Select date">
  2174. </div>
  2175. </div>
  2176. <div class="field">
  2177. <div class="date-note">
  2178. <strong>Note:</strong> Victoria Public Hall remains closed every Tuesday for maintenance.
  2180. </div>
  2181. </div>
  2184. <div class="field">
  2185. <label class="muted-label">Identity Proof</label>
  2187. <div class="id-row">
  2188. <!-- DROPDOWN -->
  2189. <select id="idType" class="input compact">
  2190. <option value="">Select ID Proof</option>
  2191. </select>
  2193. <!-- NUMBER INPUT -->
  2194. <input type="text" id="idNumber" class="input compact" placeholder="Enter ID Number" disabled />
  2195. <small id="idError" style="color:#dc2626; display:none; font-weight:600;"></small>
  2196. </div>
  2197. </div>
  2199. <div class="field" style="margin-bottom:30px;">
  2201. <!-- SINGLE LABEL -->
  2202. <label class="muted-label-inline">Number of people</label>
  2204. <!-- DYNAMIC LIST -->
  2205. <div id="peopleTypeList" class="people-type-list"></div>
  2208. <div class="field">
  2209. <div class="people-total-row">
  2210. <span class="people-total-label">Total Amount</span>
  2211. <span id="totalAmount" class="people-total-value">₹0</span>
  2212. </div>
  2213. </div>
  2217. </div>
  2219. <hr>
  2221. <br>
  2223. <!-- Pick your time ranges -->
  2224. <!-- time-range pills -->
  2227. <div class="field border-field">
  2228. <label class="muted-label">Pick your time</label>
  2229. <div class="time-ranges" id="timeRanges" role="tablist" aria-label="Time ranges">
  2231. </div>
  2233. <div id="noAvInfoMsg" class="no-slots-message-box" style="display:none;">
  2234. </div>
  2236. <!-- <div id="noAvInfoMsg" class="no-slots-message-box" style="display:none;">
  2237. During the above time slots, the public will be permitted only within the premises of Victoria Public Hall.
  2238. Entry into the building will not be allowed.
  2239. </div>-->
  2241. <!--<div class="info-row">
  2242. <div class="preview-note-box">
  2243. <Strong>Your visit includes a audio visual experience, please select as many shows as required
  2244. to
  2245. accommodate all visitors.</Strong>
  2246. </div>
  2248. <div class="summary-inline" aria-hidden="false">
  2249. <div class="summary-item unallocated" aria-label="Guest unallocated">
  2250. <span>Guest unallocated</span>
  2251. <strong>03</strong>
  2252. </div>
  2254. <div class="summary-item allocated" aria-label="Guest allocated">
  2255. <span>Guest allocated</span>
  2256. <strong>03</strong>
  2257. </div>
  2258. </div>
  2260. </div>-->
  2263. </div>
  2265. <!-- slots grid -->
  2266. <div class="field border-field">
  2268. <div class="info-row">
  2269. <div class="preview-note-box">
  2270. <Strong>Your visit includes a audio visual experience, please select as many shows as required
  2271. to
  2272. accommodate all visitors.</Strong>
  2273. </div>
  2275. <div class="summary-inline" aria-hidden="false">
  2276. <div class="summary-item unallocated" aria-label="Guest unallocated">
  2277. <span>Guest unallocated</span>
  2278. <strong>03</strong>
  2279. </div>
  2281. <div class="summary-item allocated" aria-label="Guest allocated">
  2282. <span>Guest allocated</span>
  2283. <strong>03</strong>
  2284. </div>
  2285. </div>
  2287. </div>
  2288. <label style="margin:8px 0 6px 0" class="muted-label">Pick one or more shows for all visitors</label>
  2289. <div id="slotsGrid" class="slots-grid" aria-live="polite"></div>
  2290. </div>
  2292. <div class="submit-wrap">
  2293. <p class="submit-note">Your booking details will be sent to you via email/SMS.</p>
  2294. <button id="previewBtn" class="btn">Preview & Submit</button>
  2295. </div>
  2297. </div>
  2300. <!-- CANCEL BOOK SECTION (DISABLED BUT VISIBLE) -->
  2301. <div id="cancelBookSection" class="cancel-book">
  2302. <div class="summary-card">
  2304. <!-- TOP SUMMARY ROW -->
  2305. <div class="summary-row">
  2306. <div class="summary-left">
  2307. <div class="label">Visiting on</div>
  2308. <div class="label">Time</div>
  2309. <div class="label">Total Guest(s)</div>
  2310. </div>
  2312. <div class="summary-right">
  2313. <div id="confirmDate"></div>
  2314. <div id="confirmRange"></div>
  2315. <div id="confirmPeople"></div>
  2316. </div>
  2317. </div>
  2319. <div class="av-title">AV Experience</div>
  2320. <!-- AV LIST -->
  2321. <div class="av-list">
  2322. <div class="av-row">
  2323. <div class="av-time"></div>
  2324. <div class="av-seats"></div>
  2325. </div>
  2326. </div>
  2328. <!-- Disabled cancel button inside cancel-book -->
  2329. <div class="submit-wrap">
  2330. <button id="cancelBtn" class="btn" type="button">Cancel Booking</button>
  2331. <button id="qrBtn" class="btn" type="button">Get BookingQR</button>
  2333. </div>
  2335. </div>
  2337. <p class="submit-note">
  2338. You can book additional visits only after completing/canceling your current visit.
  2339. </p>
  2340. </div>
  2342. </div>
  2343. </div>
  2344. </main>
  2345. </div>
  2347. <!-- Booking Preview Modal (add to end of <body>) -->
  2348. <div id="vphBookingModalOverlay" class="vph-modal-overlay" aria-hidden="true">
  2349. <div id="vphBookingModal" class="vph-modal" role="dialog" aria-modal="true" aria-labelledby="vphModalTitle"
  2350. tabindex="-1">
  2351. <header class="vph-modal-header">
  2352. <h3 id="vphModalTitle">Your visit details</h3>
  2353. </header>
  2355. <section class="vph-summary-box" aria-live="polite">
  2356. <div class="vph-summary-row">
  2357. <div class="vph-summary-left">
  2358. <div class="vph-label">Visiting on</div>
  2359. <div class="vph-label">Time</div>
  2360. <div class="vph-label">ID Proof</div>
  2361. <div class="vph-label">ID Number</div>
  2362. <div class="vph-label">Total Guest(s)</div>
  2363. </div>
  2364. <div class="vph-summary-right">
  2365. <div id="vphModalDate">—</div>
  2366. <div id="vphModalRange">—</div>
  2367. <div id="vphModalIdType">—</div>
  2368. <div id="vphModalIdNumber">—</div>
  2369. <div id="vphModalPeople">—</div>
  2370. </div>
  2371. </div>
  2372. <!--class="vph-av-title"-->
  2373. <div id="vphAvTitle" class="vph-label">AV Experience</div>
  2374. <div id="vphModalSlotsList" aria-hidden="false">
  2375. <!-- populated by JS -->
  2376. </div>
  2378. </section>
  2381. <!-- Guest Breakdown -->
  2382. <section class="vph-summary-box breakdown-box">
  2383. <div class="breakdown-header">
  2384. <span>Guest Details</span>
  2385. <span>Amount</span>
  2386. </div>
  2388. <div id="previewGuestBreakdown" class="breakdown-body">
  2389. <!-- Filled by JS -->
  2390. </div>
  2392. <div class="breakdown-divider"></div>
  2394. <div class="breakdown-row total">
  2395. <span>Total Amount</span>
  2396. <span id="previewTotalAmount">₹0</span>
  2397. </div>
  2398. </section>
  2401. <footer class="vph-modal-footer">
  2402. <button id="vphModalBack" class="vph-modal-icon-btn" aria-label="Back">
  2403. <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
  2404. <path d="M15 18l-6-6 6-6" stroke="#0f4b4a" stroke-width="2" stroke-linecap="round"
  2405. stroke-linejoin="round" />
  2406. </svg>
  2407. </button>
  2409. <button id="vphModalSubmit" class="vph-modal-submit">Proceed to Payment</button>
  2410. </footer>
  2412. <!-- <button id="vphModalClose" class="vph-modal-close" aria-label="Close dialog">×</button> -->
  2413. <button class="vph-modal-close preview-close" aria-label="Close dialog">×</button>
  2415. </div>
  2416. </div>
  2419. <!-- Cancel Booking – 2-step modal -->
  2420. <div id="vphModalOverlay" class="vph-modal-overlay" aria-hidden="true">
  2421. <div id="vphModal" class="vph-modal" role="dialog" aria-modal="true" aria-labelledby="vphModalTitleConfirm"
  2422. tabindex="-1">
  2424. <div class="vph-modal-body">
  2426. <!-- VIEW 1: Confirmation -->
  2427. <div id="vphViewConfirm" class="vph-view" role="document" aria-hidden="true">
  2428. <header class="vph-modal-header">
  2429. <h3 id="vphModalTitleConfirm">Are you sure you want to cancel your visit?</h3>
  2430. </header>
  2432. <footer class="vph-modal-footer">
  2433. <button id="vphConfirmBack" class="vph-modal-icon-btn" aria-label="Go back">
  2434. <!-- left arrow icon -->
  2435. <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
  2436. <path d="M15 18l-6-6 6-6" stroke="#0f4b4a" stroke-width="2" stroke-linecap="round"
  2437. stroke-linejoin="round" />
  2438. </svg>
  2439. </button>
  2441. <button id="vphConfirmYes" class="vph-modal-submit primary">
  2442. Yes, Cancel booking
  2443. </button>
  2444. </footer>
  2445. </div>
  2447. <!-- VIEW 2: Result / Success -->
  2448. <div id="vphViewCancelled" class="vph-view" role="document" aria-hidden="true">
  2449. <header class="vph-modal-header">
  2450. <h3 id="vphModalTitleCancelled">Booking Cancelled!</h3>
  2451. </header>
  2455. <footer class="vph-modal-footer column">
  2456. <button id="vphGoMain" class="vph-modal-submit ghost">
  2457. Go back to main page
  2458. </button>
  2459. <button id="vphBookAnother" class="vph-modal-submit primary">
  2460. Book another visit
  2461. </button>
  2462. </footer>
  2463. </div>
  2465. </div>
  2467. <!-- Close X -->
  2468. <!-- <button id="vphModalClose" class="vph-modal-close" aria-label="Close dialog">×</button> -->
  2469. <button class="vph-modal-close cancel-close" aria-label="Close dialog">×</button>
  2471. </div>
  2472. </div>
  2473. <div id="pageLoader"
  2474. style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 9999; text-align: center;">
  2475. <div style="position: relative; top: 50%; transform: translateY(-50%);">
  2476. <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;"></div>
  2477. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
  2478. </div>
  2479. </div>
  2482. <script th:replace="~{fragments/user-script :: script}"></script>
  2483. <!-- <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> -->
  2485. <script type="text/javascript">
  2487. function showLoader() {
  2488. $('#pageLoader').show();
  2489. }
  2491. function hideLoader() {
  2492. $('#pageLoader').hide();
  2493. }
  2496. $('#pageLoader').hide();
  2498. //checking
  2501. /* Full corrected booking JS */
  2502. let activeRange = null;
  2503. let activeTimeId = null;
  2504. let bookingId = null;
  2505. let bookingemail = null;
  2506. let bookingmob_no = null;
  2508. let people = 0;
  2509. // const MIN_PEOPLE = 1;
  2510. // const MAX_PEOPLE = 10;
  2512. // Selected time slots map
  2513. const chosenSlots = new Map();
  2514. let slotsGrid;
  2515. let unallocEl, allocEl, dateInput;
  2517. let peopleTypes = [];
  2519. let isIdNumberValid = false;
  2524. $(document).ready(function () {
  2526. updateGuestSummary();
  2527. // DOM refs (safe)
  2528. slotsGrid = document.getElementById('slotsGrid');
  2529. // minusPeople = document.getElementById('minusPeople');
  2530. // plusPeople = document.getElementById('plusPeople');
  2531. // peopleCount = document.getElementById('peopleCount');
  2532. unallocEl = document.querySelector('.summary-item.unallocated strong');
  2533. allocEl = document.querySelector('.summary-item.allocated strong');
  2534. dateInput = document.getElementById('dateInput');
  2535. //Booking / cancel sections
  2536. const bookVisit = document.getElementById("bookVisitSection");
  2537. const cancelBook = document.getElementById("cancelBookSection");
  2538. const cancelBtn = document.getElementById("cancelBtn");
  2540. const previewBtn = document.getElementById('previewBtn');
  2542. const qrBtn = document.getElementById("qrBtn");
  2544. // Basic session handling
  2545. let hasBooking = sessionStorage.getItem("hasBooking") === "true";
  2546. let hasuser = sessionStorage.getItem("hasuser");
  2547. let bookingdetails = sessionStorage.getItem("bookingdetails");
  2548. console.log("→ hasBooking:", hasBooking);
  2549. console.log("→ hasuser:", hasuser);
  2550. console.log("→ bookingdetails:", bookingdetails);
  2556. if (hasuser === null || hasuser.trim() === "") {
  2557. window.location.href = "/victoriapublichall/register";
  2558. return;
  2559. }
  2561. const Displayname = document.getElementById("contactDisplay");
  2562. if (Displayname && hasuser) Displayname.textContent = hasuser;
  2564. let validBooking = false;
  2566. if (bookingdetails && bookingdetails.trim() !== "") {
  2567. try {
  2568. let b = JSON.parse(bookingdetails);
  2569. validBooking = b && b.id; // valid only if id exists
  2570. } catch (e) {
  2571. validBooking = false;
  2572. }
  2573. }
  2574. if (hasBooking || validBooking) {
  2576. bookVisit.classList.add("section-hidden");
  2577. cancelBook.classList.add("section-enabled");
  2578. cancelBtn.disabled = false;
  2580. if (validBooking) {
  2581. let b = JSON.parse(bookingdetails);
  2583. console.log("details>>>>>>>>>",b)
  2585. bookingId = b.id;
  2587. bookingemail = b.email;
  2588. bookingmob_no = b.mob_no;
  2590. bookingorderid=b.order_id;
  2592. console.log(bookingemail);
  2593. console.log(bookingmob_no);
  2595. console.log("bookingorderid>>>>",bookingorderid);
  2597. document.getElementById("confirmDate").textContent = formatDisplayDate(b.visitingDate);
  2598. document.getElementById("confirmRange").textContent = b.timeRange;
  2599. document.getElementById("confirmPeople").textContent =
  2600. String(b.no_of_people).padStart(2, "0");
  2602. const avList = document.querySelector(".av-list");
  2603. avList.innerHTML = "";
  2605. b.allocatedSlots.forEach(s => {
  2606. console.log(s);
  2607. avList.innerHTML += `
  2608. <div class="av-row">
  2609. <div class="av-time">${s.time} (${s.language})</div>
  2610. <div class="av-seats">${s.people} Seat(s)</div>
  2611. </div>
  2612. `;
  2613. });
  2614. }
  2616. } else {
  2618. cancelBook.classList.remove("section-enabled");
  2619. bookVisit.classList.remove("section-hidden");
  2620. cancelBtn.disabled = true;
  2621. }
  2625. if (!dateInput) return;
  2627. // flatpickr setup
  2628. const now = new Date();
  2629. const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  2630. const maxDate = new Date(today);
  2631. maxDate.setDate(maxDate.getDate() + 7);
  2633. const fp = flatpickr(dateInput, {
  2634. dateFormat: "Y-m-d",
  2635. altInput: true,
  2636. altFormat: "d-m-Y",
  2637. minDate: today,
  2638. maxDate: maxDate,
  2639. allowInput: false,
  2640. clickOpens: true,
  2641. disable: [
  2642. function (date) {
  2643. if (!(date instanceof Date)) return false;
  2644. return date.getDay() === 2;
  2645. }
  2646. ],
  2647. onReady: function (selectedDates, dateStr, instance) {
  2648. instance.altInput.setAttribute("placeholder", "dd-mm-yyyy");
  2649. },
  2651. onChange: function (selectedDates, dateStr, instance) {
  2652. if (!dateStr) instance.altInput.setAttribute("placeholder", "dd-mm-yyyy");
  2653. // When date changes we must reset state and reload ranges
  2654. activeTimeId = null;
  2655. activeRange = null;
  2656. chosenSlots.clear();
  2657. if (slotsGrid) slotsGrid.innerHTML = "";
  2658. loadTimeRanges();
  2659. }
  2660. });
  2662. fp.setDate(today);
  2664. // enable opening on click/focus
  2665. dateInput.addEventListener('focus', () => fp.open());
  2666. dateInput.addEventListener('click', () => fp.open());
  2669. loadTimeRanges();
  2671. // modal submit handler
  2672. document.getElementById("vphModalSubmit").addEventListener("click", function () {
  2676. const userInput = (document.getElementById("contactDisplay") || {}).textContent?.trim() || "";
  2677. const visitDate = (dateInput || {}).value || "";
  2678. const no_of_people = people;
  2679. const timeId = activeTimeId;
  2683. const slotDetails = [...chosenSlots].map(([time, obj]) => {
  2684. const el = Array.from(document.querySelectorAll(".slot"))
  2685. .find(s => s.dataset.time === time);
  2687. return {
  2688. slotId: Number(el?.dataset?.slotId || 0),
  2689. people: obj.seats
  2691. };
  2692. });
  2695. /*if (slotDetails.length === 0) {
  2696. Swal.fire({ icon: "warning", text: "Please select at least one show." });
  2697. return;
  2698. }
  2699. */
  2700. // Close modal before showing any Swal to avoid focus-lock issues
  2701. const overlayEl = document.getElementById('vphBookingModalOverlay');
  2702. if (overlayEl) {
  2703. overlayEl.classList.remove("show");
  2704. document.body.style.overflow = "";
  2705. // blur modal to remove active focus
  2706. const modalEl = document.getElementById('vphBookingModal');
  2707. if (modalEl) modalEl.blur();
  2708. }
  2711. $.ajax({
  2712. type: "POST",
  2713. url: "/victoriapublichall/bookingapi/saveRegistration",
  2714. data: {
  2715. userInput: userInput,
  2716. visitDate: visitDate,
  2717. no_of_people: no_of_people,
  2718. timeId: timeId,
  2719. slotDetails: JSON.stringify(slotDetails),
  2721. peopleDetails: JSON.stringify(
  2722. peopleTypes
  2723. .filter(p => p.count > 0)
  2724. .map(p => ({
  2725. id: p.id,
  2726. count: p.count
  2727. }))
  2728. ),
  2730. idType: $("#idType").val() || null,
  2731. idDetails: $("#idNumber").val() || null,
  2732. totalAmount: $("#totalAmount").text().replace("₹", ""),
  2733. source: 1
  2735. },
  2736. success: function (response) {
  2737. console.log("response", response)
  2738. // response might be string or JSON. handle both.
  2740. if (response.status === "success") {
  2741. // 1️ Save booking reference
  2742. const refId = response.refId;
  2743. const amount = $("#totalAmount").text().replace("₹", "");
  2745. sessionStorage.setItem("confirmrefid", response.refId);
  2747. showLoader();
  2748. paymentStart(refId, amount);
  2750. } else if (response.status === "error") {
  2751. hideLoader();
  2752. Swal.fire({ icon: "error", title: "Booking Failed", text: "Slots are fully booked. Please select another slot" });
  2753. } else {
  2754. hideLoader();
  2755. Swal.fire({ icon: "error", title: "Booking Failed", text: response.message || "Failed" });
  2756. }
  2758. },
  2759. error: function (xhr) {
  2760. Swal.fire({ icon: "error", title: "Booking Failed", text: xhr.responseText || "Something went wrong!" });
  2761. }
  2762. });
  2763. });
  2765. /* PEOPLE COUNT – DB DRIVEN (JDBC) */
  2767. const MAX_TOTAL_PEOPLE = 10;
  2770. /* TOTAL PEOPLE */
  2771. function getTotalPeople() {
  2772. return peopleTypes.reduce((sum, p) => sum + p.count, 0);
  2773. }
  2776. /* TOTAL AMOUNT */
  2777. function getTotalAmount() {
  2778. return peopleTypes.reduce((sum, p) => {
  2779. return sum + (p.count * p.amount);
  2780. }, 0);
  2781. }
  2783. /* UPDATE TOTAL AMOUNT UI */
  2784. function updateTotalAmount() {
  2785. const total = getTotalAmount();
  2786. const totalEl = document.getElementById("totalAmount");
  2787. if (totalEl) {
  2788. totalEl.textContent = "₹" + total;
  2789. }
  2790. }
  2792. /* RENDER PEOPLE UI */
  2793. function renderPeopleTypes() {
  2794. const container = document.getElementById("peopleTypeList");
  2795. if (!container) return;
  2797. container.innerHTML = "";
  2799. const total = getTotalPeople();
  2801. peopleTypes.forEach((item, index) => {
  2802. const row = document.createElement("div");
  2803. row.className = "people-type-row";
  2805. row.innerHTML = `
  2806. <div class="people-type-label">${item.user_type}
  2807. <span class="people-amount">(₹${item.amount})</span>
  2808. </div>
  2809. <div class="people-type-controls">
  2810. <button class="small minus-btn" data-i="${index}">−</button>
  2811. <div class="counter">${String(item.count).padStart(2, "0")}</div>
  2812. <button class="small plus-btn" data-i="${index}">+</button>
  2813. </div>
  2814. `;
  2816. container.appendChild(row);
  2817. });
  2819. // minus
  2820. container.querySelectorAll(".minus-btn").forEach(btn => {
  2821. btn.onclick = () => {
  2822. const i = btn.dataset.i;
  2823. if (peopleTypes[i].count > 0) {
  2824. peopleTypes[i].count--;
  2825. renderPeopleTypes();
  2826. syncPeopleWithBooking();
  2827. }
  2828. };
  2829. });
  2831. // plus
  2832. container.querySelectorAll(".plus-btn").forEach(btn => {
  2833. btn.onclick = () => {
  2834. if (getTotalPeople() >= MAX_TOTAL_PEOPLE) return;
  2835. const i = btn.dataset.i;
  2836. peopleTypes[i].count++;
  2837. renderPeopleTypes();
  2838. syncPeopleWithBooking();
  2839. };
  2840. });
  2842. // disable + buttons when max reached
  2843. if (total >= MAX_TOTAL_PEOPLE) {
  2844. container.querySelectorAll(".plus-btn").forEach(btn => btn.disabled = true);
  2845. }
  2846. }
  2848. function syncPeopleWithBooking() {
  2849. const total = getTotalPeople();
  2851. // single source of truth
  2852. window.people = total;
  2853. people = total;
  2855. // auto adjust slot allocations
  2856. autoAllocateExtraGuests();
  2857. deallocateExtraGuests();
  2859. // update summary counts correctly
  2860. updateGuestSummary();
  2862. updateTotalAmount();
  2863. }
  2865. /* LOAD PEOPLE TYPES FROM DB */
  2866. $.ajax({
  2867. url: "/victoriapublichall/bookingapi/getamountbyusertype",
  2868. type: "GET",
  2869. success: function (data) {
  2870. peopleTypes = data.map(row => ({
  2871. id: row.id,
  2872. user_type: row.user_type,
  2873. amount: row.amount,
  2874. count: 0,
  2875. maxCount: row.user_type &&
  2876. row.user_type.trim().toLowerCase() === 'family' ? 5 : 0
  2877. }));
  2879. renderPeopleTypes();
  2880. syncPeopleWithBooking();
  2881. },
  2882. error: function () {
  2883. Swal.fire({
  2884. icon: "error",
  2885. text: "Unable to load people categories"
  2886. });
  2887. }
  2888. });
  2890. $.ajax({
  2891. url: "/victoriapublichall/bookingapi/getidproofs",
  2892. type: "GET",
  2893. success: function (data) {
  2894. const select = document.getElementById("idType");
  2896. data.forEach(row => {
  2897. const opt = document.createElement("option");
  2898. opt.value = row.id; // store ID
  2899. opt.textContent = row.id_name; // show Aadhar Card / Passport
  2900. select.appendChild(opt);
  2901. });
  2902. },
  2903. error: function () {
  2904. Swal.fire({
  2905. icon: "error",
  2906. text: "Unable to load ID proof types"
  2907. });
  2908. }
  2909. });
  2911. /* ENABLE ID NUMBER ONLY AFTER SELECT */
  2912. const idType = document.getElementById("idType");
  2913. const idNumber = document.getElementById("idNumber");
  2914. const idError = document.getElementById("idError");
  2916. idType.addEventListener("change", function () {
  2917. const selectedText = this.options[this.selectedIndex].text.toLowerCase();
  2919. idNumber.disabled = !this.value;
  2920. idNumber.value = "";
  2921. idError.style.display = "none";
  2922. idError.textContent = "";
  2924. if (!this.value) return;
  2926. idNumber.focus();
  2928. // 🔹 AADHAR
  2930. if (selectedText.includes("aadhar")) {
  2931. idNumber.maxLength = 12;
  2932. idNumber.placeholder = "Enter 12-digit Aadhar Number";
  2934. idNumber.oninput = function () {
  2935. this.value = this.value.replace(/\D/g, "");
  2937. if (this.value.length === 12) {
  2938. idError.style.display = "none";
  2939. isIdNumberValid = true;
  2940. } else {
  2941. idError.textContent = "Aadhar number must be exactly 12 digits";
  2942. idError.style.display = "block";
  2943. isIdNumberValid = false;
  2944. }
  2945. };
  2946. }
  2948. // 🔹 PASSPORT
  2950. else if (selectedText.includes("passport")) {
  2951. idNumber.maxLength = 9;
  2952. idNumber.placeholder = "Enter Passport Number";
  2954. idNumber.oninput = function () {
  2955. this.value = this.value.replace(/[^a-zA-Z0-9]/g, "");
  2957. if (this.value.length >= 6 && this.value.length <= 9) {
  2958. idError.style.display = "none";
  2959. isIdNumberValid = true;
  2960. } else {
  2961. idError.textContent = "Passport number must be 6–9 characters";
  2962. idError.style.display = "block";
  2963. isIdNumberValid = false;
  2964. }
  2965. };
  2966. }
  2967. });
  2970. qrBtn && qrBtn.addEventListener("click", function () {
  2972. if (!bookingorderid) {
  2973. Swal.fire({
  2974. icon: "error",
  2975. text: "Order ID not found"
  2976. });
  2977. return;
  2978. }
  2980. const qrUrl =
  2981. "/victoriapublichall/bookingQRCode?orderid=" + bookingorderid;
  2983. window.open(qrUrl, "_blank");
  2984. });
  2988. });
  2990. function formatDisplayDate(dateStr) {
  2991. if (!dateStr || typeof dateStr !== "string") return "--";
  2993. // Trim & normalize
  2994. const s = dateStr.trim();
  2996. // If already in an ISO-ish form, handle both "yyyy-mm-dd" and "dd-mm-yyyy"
  2997. // Detect by first token length: if first token has length 4 -> yyyy-mm-dd
  2998. const parts = s.split("-");
  2999. let yyyy, mm, dd;
  3001. if (parts.length === 3) {
  3002. if (parts[0].length === 4) {
  3003. // format: yyyy-mm-dd
  3004. yyyy = parts[0];
  3005. mm = parts[1];
  3006. dd = parts[2];
  3007. } else {
  3008. // assume dd-mm-yyyy
  3009. dd = parts[0];
  3010. mm = parts[1];
  3011. yyyy = parts[2];
  3012. }
  3013. } else {
  3014. // fallback parse attempt — try Date constructor
  3015. const d = new Date(s);
  3016. if (isNaN(d)) return s;
  3017. return d.toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" });
  3018. }
  3020. // safe integer conversion
  3021. const y = Number(yyyy), m = Number(mm) - 1, d = Number(dd);
  3022. const dateObj = new Date(y, m, d);
  3023. if (isNaN(dateObj)) return dateStr;
  3025. // Example output: "13 Dec 2025"
  3026. return dateObj.toLocaleDateString("en-IN", {
  3027. day: "2-digit",
  3028. month: "short",
  3029. year: "numeric"
  3030. });
  3031. }
  3035. /* ---------- API functions ---------- */
  3037. function loadSlotsFromAPI() {
  3038. const dateValue = dateInput?.value;
  3039. if (!dateValue || !activeTimeId) {
  3040. // clear slotsGrid and show message to indicate no selection
  3041. if (slotsGrid) slotsGrid.innerHTML = `<div class="no-slots-message-box">Please select a time range to view AV slots.</div>`;
  3042. return;
  3043. }
  3045. $.ajax({
  3046. type: "GET",
  3047. url: "/victoriapublichall/bookingapi/getTimeSlotDetails",
  3048. data: { visitDate: dateValue, timeId: activeTimeId },
  3049. success: function (data) {
  3050. const slotList = (data || []).map(item => ({
  3051. slotId: item.slot_id,
  3052. time: item.timing,
  3053. seats: item.availCap,
  3054. language: item.language
  3055. }));
  3056. renderSlotsWithData(slotList);
  3057. },
  3058. error: function () {
  3059. console.error("Failed to load slot details");
  3060. }
  3061. });
  3062. }
  3064. function renderSlotsWithData(slotArray) {
  3065. if (!slotsGrid) return;
  3067. slotsGrid.innerHTML = "";
  3068. chosenSlots.clear();
  3070. if (!slotArray || slotArray.length === 0) {
  3071. slotsGrid.innerHTML = `<div class="no-slots-message-box">Sorry, No AV time slots available for the selected date.</div>`;
  3072. return;
  3073. }
  3075. slotArray.forEach(item => {
  3076. const time = item.time;
  3077. const seats = Number(item.seats);
  3078. const slotId = item.slotId;
  3079. const language = item.language
  3081. const slotEl = document.createElement("div");
  3082. slotEl.className = "slot";
  3083. slotEl.tabIndex = 0;
  3085. slotEl.dataset.time = time;
  3086. slotEl.dataset.seats = seats;
  3087. slotEl.dataset.originalSeats = seats;
  3088. slotEl.dataset.slotId = slotId;
  3089. slotEl.dataset.language = language;
  3091. if (seats <= 0) {
  3092. slotEl.classList.add("disabled");
  3093. slotEl.style.border = "1px solid #d9534f";
  3094. } else {
  3095. slotEl.style.border = "1px solid #28a745";
  3096. }
  3098. slotEl.innerHTML = `
  3099. <div class="left">
  3100. <div class="time">${time} <span class="slot-lang">(${language})</span></div>
  3101. <div class="meta">${seats <= 0 ? "0 Seats available" : seats + (seats === 1 ? " Seat available" : " Seats available")}</div>
  3102. </div>
  3103. <div class="choose"></div>
  3104. `;
  3106. slotEl.addEventListener("click", () => toggleSlot(slotEl));
  3107. slotsGrid.appendChild(slotEl);
  3108. });
  3110. updateGuestSummary();
  3111. }
  3113. function loadTimeRanges() {
  3114. const timeRanges = document.getElementById("timeRanges");
  3115. const previewBtn = document.getElementById("previewBtn");
  3116. if (!timeRanges) return;
  3118. // clear UI + old messages and reset state
  3119. timeRanges.innerHTML = "";
  3120. const oldMsg = document.getElementById("noSlotsMsg");
  3121. if (oldMsg) oldMsg.remove();
  3123. activeTimeId = null;
  3124. activeRange = null;
  3125. chosenSlots.clear();
  3126. if (slotsGrid) slotsGrid.innerHTML = "";
  3128. if (previewBtn) {
  3129. previewBtn.disabled = true;
  3130. previewBtn.classList.add("disabled-btn");
  3131. }
  3133. const visitDate = dateInput?.value;
  3134. if (!visitDate) {
  3135. return;
  3136. }
  3138. $.ajax({
  3139. type: "GET",
  3140. url: "/victoriapublichall/bookingapi/getTimeMaster",
  3141. data: { visitDate: visitDate,
  3142. view: "book"},
  3143. success: function (data) {
  3144. if (!data || data.length === 0) {
  3145. // No ranges at all
  3146. if (slotsGrid) {
  3147. slotsGrid.innerHTML = `<div class="no-slots-message-box">Sorry,No AV time slots available for the selected date.</div>`;
  3148. }
  3149. const msg = document.createElement("div");
  3150. msg.id = "noSlotsMsg";
  3151. msg.className = "no-slots-message";
  3152. msg.textContent = "Sorry, No time slots available for the selected date.";
  3153. timeRanges.after(msg);
  3154. return;
  3155. }
  3157. let firstActiveSet = false;
  3158. let allZero = true;
  3160. // create pills
  3161. data.forEach(item => {
  3162. if (item.availCap > 0) allZero = false;
  3164. const pill = document.createElement("div");
  3165. pill.className = "pill";
  3166. pill.setAttribute("data-range", item.timing);
  3167. pill.setAttribute("data-id", item.time_id);
  3168. pill.innerHTML = `${item.timing}<br><small>${item.availCap} Available</small>`;
  3170. if (item.availCap === 0) {
  3171. pill.classList.add("disabled-pill");
  3172. pill.style.pointerEvents = "none";
  3173. } else if (!firstActiveSet) {
  3174. pill.classList.add("active");
  3175. activeRange = item.timing;
  3176. activeTimeId = item.time_id;
  3177. firstActiveSet = true;
  3178. }
  3180. timeRanges.appendChild(pill);
  3181. });
  3183. attachPillClickHandlers();
  3185. // if any pill active, load slots for it and enable preview
  3186. if (activeTimeId) {
  3187. loadSlotsFromAPI();
  3189. onTimeSelected(activeTimeId,false);
  3190. if (previewBtn) {
  3191. previewBtn.disabled = false;
  3192. previewBtn.classList.remove("disabled-btn");
  3193. }
  3194. }
  3196. // if every pill had zero availability -> show message in slots area
  3197. if (allZero) {
  3198. if (slotsGrid) {
  3199. slotsGrid.innerHTML = `<div class="no-slots-message-box">Sorry, No AV time slots available for the selected date and time.</div>`;
  3200. }
  3201. const msg = document.createElement("div");
  3202. msg.id = "noSlotsMsg";
  3203. msg.className = "no-slots-message";
  3204. msg.textContent = "No time slots available for the selected date.";
  3205. timeRanges.after(msg);
  3206. if (previewBtn) {
  3207. previewBtn.disabled = true;
  3208. previewBtn.classList.add("disabled-btn");
  3209. }
  3210. }
  3211. },
  3212. error: function () {
  3213. console.error("Failed to load time ranges");
  3214. }
  3215. });
  3216. }
  3218. function attachPillClickHandlers() {
  3219. const timeRanges = document.getElementById("timeRanges");
  3220. if (!timeRanges) return;
  3222. // since we recreate pills every time, it's safe to add listeners directly
  3223. timeRanges.querySelectorAll('.pill').forEach(pill => {
  3224. pill.addEventListener('click', () => {
  3225. // if this pill is disabled, ignore
  3226. if (pill.classList.contains('disabled-pill')) return;
  3230. // RESET message + Swal state on EVERY time change
  3231. resetAvInfoState();
  3233. // clear active class
  3234. timeRanges.querySelectorAll('.pill').forEach(x => x.classList.remove('active'));
  3235. pill.classList.add('active');
  3237. activeRange = pill.getAttribute('data-range');
  3238. activeTimeId = pill.getAttribute('data-id');
  3240. // reset chosen slots and reload slot grid
  3241. chosenSlots.clear();
  3242. if (slotsGrid) slotsGrid.innerHTML = "";
  3244. onTimeSelected(activeTimeId,true);
  3246. });
  3247. });
  3248. }
  3250. let requiresSlot = true; // default safe value
  3251. let avInfoShownOnce = false;
  3253. let lastTimeId = null;
  3255. function onTimeSelected(timeId,fromClick = false) {
  3257. fetch(`/victoriapublichall/bookingapi/slot-rule?timeId=${timeId}`)
  3258. .then(res => {
  3259. if (!res.ok) throw new Error("Slot rule API failed");
  3260. return res.json();
  3261. })
  3262. .then(data => {
  3264. requiresSlot = Boolean(data.requiresSlot);
  3265. const message = (data.message || "").trim();
  3267. const slotsGrid = document.getElementById("slotsGrid");
  3268. const avSection = slotsGrid ? slotsGrid.closest(".field") : null;
  3269. const infoBox = document.getElementById("noAvInfoMsg");
  3271. if (!avSection || !infoBox) return;
  3273. if (requiresSlot) {
  3275. avSection.style.display = "block";
  3276. infoBox.style.display = "none";
  3277. infoBox.textContent = "";
  3279. chosenSlots.clear();
  3280. loadSlotsFromAPI();
  3282. }
  3284. else {
  3286. avSection.style.display = "none";
  3287. chosenSlots.clear();
  3288. updateGuestSummary();
  3290. // show DB-driven message
  3291. if (message) {
  3292. infoBox.textContent = message;
  3293. infoBox.style.display = "block";
  3295. // show Swal only when switching to a NEW timeId
  3296. if (fromClick) {
  3297. Swal.fire({
  3298. icon: "info",
  3299. title: "Important Information",
  3300. text: message,
  3301. confirmButtonText: "OK",
  3302. allowOutsideClick: false
  3303. });
  3304. }
  3305. } else {
  3306. infoBox.style.display = "none";
  3307. }
  3308. }
  3310. lastTimeId = timeId;
  3311. })
  3312. .catch(err => {
  3313. console.error("Slot rule error:", err);
  3314. });
  3315. }
  3321. function resetAvInfoState() {
  3322. const infoMsg = document.getElementById("noAvInfoMsg");
  3323. if (infoMsg) infoMsg.style.display = "none";
  3325. avInfoShownOnce = false;
  3326. }
  3329. function updateGuestSummary() {
  3330. let totalAllocated = 0;
  3332. chosenSlots.forEach(obj => {
  3333. totalAllocated += Number(obj?.seats || 0);
  3334. });
  3336. const allocated = Math.min(people, totalAllocated);
  3337. const unallocated = Math.max(people - allocated, 0);
  3339. if (unallocEl) unallocEl.textContent = String(unallocated).padStart(2, '0');
  3340. if (allocEl) allocEl.textContent = String(allocated).padStart(2, '0');
  3342. const unallocItem = document.querySelector('.summary-item.unallocated');
  3343. const allocItem = document.querySelector('.summary-item.allocated');
  3345. // Remove old states
  3346. unallocItem?.classList.remove('text-red', 'text-green');
  3347. allocItem?.classList.remove('text-red', 'text-green');
  3349. // Apply new colors
  3350. if (allocated === people) {
  3351. allocItem?.classList.add('text-green'); // fully allocated
  3352. } else {
  3353. unallocItem?.classList.add('text-red'); // still missing allocation
  3354. }
  3355. }
  3357. //ak minus function
  3358. function deallocateExtraGuests() {
  3359. let totalAllocated = 0;
  3361. chosenSlots.forEach(obj => {
  3362. totalAllocated += Number(obj?.seats || 0);
  3363. });
  3365. // Nothing to remove
  3366. if (totalAllocated <= people) return;
  3368. let extraToRemove = totalAllocated - people;
  3370. for (const [time, obj] of chosenSlots.entries()) {
  3371. if (extraToRemove <= 0) break;
  3373. const slotEl = [...document.querySelectorAll('#slotsGrid .slot')]
  3374. .find(s => s.dataset.time === time);
  3376. if (!slotEl) continue;
  3378. const originalSeats = Number(slotEl.dataset.originalSeats || 0);
  3379. const usedSoFar = Number(obj.seats || 0);
  3381. const removeSeats = Math.min(usedSoFar, extraToRemove);
  3382. const newUsed = usedSoFar - removeSeats;
  3383. const newRemaining = originalSeats - newUsed;
  3385. if (newUsed > 0) {
  3386. // preserve language
  3387. chosenSlots.set(time, {
  3388. seats: newUsed,
  3389. language: obj.language
  3390. });
  3391. } else {
  3392. chosenSlots.delete(time);
  3393. slotEl.classList.remove('chosen');
  3394. const choose = slotEl.querySelector('.choose');
  3395. if (choose) choose.textContent = '';
  3396. }
  3398. slotEl.dataset.seats = newRemaining;
  3400. const meta = slotEl.querySelector('.meta');
  3401. if (meta) {
  3402. meta.textContent =
  3403. `${newRemaining} Seat${newRemaining === 1 ? '' : 's'} available`;
  3404. }
  3406. slotEl.classList.remove('disabled');
  3407. extraToRemove -= removeSeats;
  3408. }
  3409. }
  3413. //plus function
  3414. function autoAllocateExtraGuests() {
  3415. let currentlyAllocated = 0;
  3417. chosenSlots.forEach(obj => {
  3418. currentlyAllocated += Number(obj?.seats || 0);
  3419. });
  3421. let remainingGuests = people - currentlyAllocated;
  3422. if (remainingGuests <= 0) return;
  3424. const chosenSlotNodes = document.querySelectorAll('#slotsGrid .slot.chosen');
  3426. chosenSlotNodes.forEach(slotEl => {
  3427. if (remainingGuests <= 0) return;
  3429. const time = slotEl.dataset.time;
  3430. const originalSeats = Number(slotEl.dataset.originalSeats || 0);
  3432. const slotObj = chosenSlots.get(time);
  3433. const usedSoFar = Number(slotObj?.seats || 0);
  3435. const remainingCap = originalSeats - usedSoFar;
  3436. if (remainingCap <= 0) return;
  3438. const extraUse = Math.min(remainingCap, remainingGuests);
  3439. const newUsed = usedSoFar + extraUse;
  3440. const newRemaining = originalSeats - newUsed;
  3442. // keep language intact
  3443. chosenSlots.set(time, {
  3444. seats: newUsed,
  3445. language: slotObj.language
  3446. });
  3448. slotEl.dataset.seats = newRemaining;
  3450. const meta = slotEl.querySelector('.meta');
  3451. if (meta) {
  3452. meta.textContent =
  3453. `${newRemaining} Seat${newRemaining === 1 ? '' : 's'} available`;
  3454. }
  3456. if (newRemaining === 0) {
  3457. slotEl.classList.add('disabled');
  3458. } else {
  3459. slotEl.classList.remove('disabled');
  3460. }
  3462. remainingGuests -= extraUse;
  3463. });
  3464. }
  3468. function toggleSlot(slotEl) {
  3469. const time = slotEl.dataset.time;
  3471. if (chosenSlots.has(time)) {
  3472. slotEl.classList.add('shake');
  3474. // remove shake after animation
  3475. setTimeout(() => {
  3476. slotEl.classList.remove('shake');
  3477. }, 350);
  3479. return;
  3480. }
  3482. const currentSeats = Number(slotEl.dataset.seats || 0);
  3483. const originalSeats = Number(slotEl.dataset.originalSeats || 0);
  3484. /* NOT ENOUGH SEATS FOR SELECTED PEOPLE → SHAKE & STOP */
  3485. if (currentSeats < people) {
  3486. slotEl.classList.add('shake');
  3487. setTimeout(() => slotEl.classList.remove('shake'), 400);
  3488. return;
  3489. }
  3491. if (currentSeats <= 0) return;
  3494. document.querySelectorAll('#slotsGrid .slot.chosen').forEach(el => {
  3495. el.classList.remove('chosen', 'disabled');
  3497. const choose = el.querySelector('.choose');
  3498. const meta = el.querySelector('.meta');
  3499. const origSeats = Number(el.dataset.originalSeats || 0);
  3501. el.dataset.seats = origSeats;
  3502. if (choose) choose.textContent = '';
  3503. if (meta) {
  3504. meta.textContent =
  3505. `${origSeats} Seat${origSeats === 1 ? '' : 's'} available`;
  3506. }
  3507. });
  3509. // Reset selection
  3510. chosenSlots.clear();
  3513. const seatsUsed = Math.min(currentSeats, people);
  3514. const remainingSeats = currentSeats - seatsUsed;
  3516. //chosenSlots.set(time, seatsUsed);
  3517. chosenSlots.set(time, {
  3518. seats: seatsUsed,
  3519. language: slotEl.dataset.language
  3520. });
  3524. slotEl.classList.add('chosen');
  3525. slotEl.dataset.seats = remainingSeats;
  3527. const choose = slotEl.querySelector('.choose');
  3528. const meta = slotEl.querySelector('.meta');
  3530. if (choose) choose.textContent = '✓';
  3531. if (meta) {
  3532. meta.textContent =
  3533. `${remainingSeats} Seat${remainingSeats === 1 ? '' : 's'} available`;
  3534. }
  3536. if (remainingSeats === 0) {
  3537. slotEl.classList.add('disabled');
  3538. }
  3540. updateGuestSummary();
  3541. }
  3544. /* Validation helpers */
  3545. function isEmail(text) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(text); }
  3546. function isPhone(text) { const d = (text || '').replace(/\D/g, ''); return d.length === 10; }
  3547. function isValidContact(text) { const v = text.trim(); return isEmail(v) || isPhone(v); }
  3548. </script>
  3551. <script>
  3553. (function () {
  3554. const hambtn = document.getElementById('hambtn');
  3555. const mobileNav = document.getElementById('mobileNav');
  3556. const mobileOverlay = document.getElementById('mobileOverlay');
  3557. const desktopBook = document.getElementById('desktopBookBtn');
  3558. const mobileBook = document.getElementById('mobileBook');
  3560. if (!hambtn || !mobileNav || !mobileOverlay) {
  3561. // nothing to do if elements missing
  3562. } else {
  3563. function openMenu() {
  3564. hambtn.setAttribute('aria-expanded', 'true');
  3565. mobileNav.classList.add('open'); mobileNav.setAttribute('aria-hidden', 'false');
  3566. mobileOverlay.classList.add('show'); mobileOverlay.setAttribute('aria-hidden', 'false');
  3567. document.body.style.overflow = 'hidden';
  3568. const first = mobileNav.querySelector('a'); if (first) first.focus();
  3569. }
  3570. function closeMenu() {
  3571. hambtn.setAttribute('aria-expanded', 'false');
  3572. mobileNav.classList.remove('open'); mobileNav.setAttribute('aria-hidden', 'true');
  3573. mobileOverlay.classList.remove('show'); mobileOverlay.setAttribute('aria-hidden', 'true');
  3574. document.body.style.overflow = '';
  3575. hambtn.focus();
  3576. }
  3578. hambtn.addEventListener('click', () => {
  3579. const isOpen = hambtn.getAttribute('aria-expanded') === 'true';
  3580. if (isOpen) closeMenu(); else openMenu();
  3581. });
  3583. mobileOverlay.addEventListener('click', closeMenu);
  3585. document.addEventListener('keydown', (e) => {
  3586. if (e.key === 'Escape' && mobileNav.classList.contains('open')) closeMenu();
  3587. });
  3589. mobileNav.querySelectorAll('a').forEach(a => {
  3590. a.addEventListener('click', () => {
  3591. // close after clicking any mobile link
  3592. closeMenu();
  3593. });
  3594. });
  3596. // ensure menu closes when resizing to desktop
  3597. window.addEventListener('resize', () => {
  3598. if (window.innerWidth > 900 && mobileNav.classList.contains('open')) closeMenu();
  3599. });
  3600. }
  3602. // Optional: wire desktop Book a Visit to the same booking action as mobile
  3603. if (desktopBook && mobileBook) {
  3604. desktopBook.addEventListener('click', (e) => {
  3605. e.preventDefault();
  3606. // mimic mobile behavior for demo: show alert (replace with real action)
  3607. alert('Book a Visit clicked — open booking flow here.');
  3608. });
  3609. mobileBook.addEventListener('click', (e) => {
  3610. // mobile link closes menu via handler above and then can navigate or open booking flow
  3611. // if you want to override, uncomment below
  3612. // e.preventDefault(); alert('Mobile Book clicked (replace with action).');
  3613. });
  3614. }
  3615. })();
  3624. </script>
  3627. <!-- Booking preview Button -->
  3628. <script>
  3629. (function () {
  3630. const previewBtn = document.getElementById('previewBtn');
  3631. const overlay = document.getElementById('vphBookingModalOverlay');
  3632. const modal = document.getElementById('vphBookingModal');
  3634. const modalDate = document.getElementById('vphModalDate');
  3635. const modalRange = document.getElementById('vphModalRange');
  3636. const modalPeople = document.getElementById('vphModalPeople');
  3637. const modalSlotsList = document.getElementById('vphModalSlotsList');
  3639. const closeBtn = document.querySelector('.preview-close');
  3640. const backBtn = document.getElementById('vphModalBack');
  3641. const submitBtn = document.getElementById('vphModalSubmit');
  3643. if (!previewBtn || !overlay || !modal) {
  3644. console.warn('VPH modal: required elements not found.');
  3645. return;
  3646. }
  3649. function gatherData() {
  3651. // 1️ DATE
  3652. const dateInput = document.getElementById('dateInput');
  3653. const dateVal = dateInput?.value ? new Date(dateInput.value) : null;
  3654. const dateFormat = dateVal
  3655. ? dateVal.toLocaleDateString("en-IN", { day: '2-digit', month: 'short', year: 'numeric' })
  3656. : "";
  3658. // TIME RANGE (active pill)
  3659. const activePill = document.querySelector('.time-ranges .pill.active');
  3660. const timeRangeText = activePill
  3661. ? activePill.getAttribute("data-range")
  3662. : "";
  3666. // PEOPLE BREAKDOWN
  3667. const peopleBreakdown = peopleTypes
  3668. .filter(p => p.count > 0)
  3669. .map(p => ({
  3670. label: p.user_type,
  3671. count: p.count,
  3672. amount: p.amount,
  3673. total: p.count * p.amount
  3674. }));
  3676. // TOTAL AMOUNT
  3677. const totalAmount = peopleBreakdown.reduce(
  3678. (sum, p) => sum + p.total, 0
  3679. );
  3681. // ID PROOF
  3682. const idTypeSelect = document.getElementById("idType");
  3683. const idNumberInput = document.getElementById("idNumber");
  3685. const idProof = {
  3686. type: idTypeSelect?.value || "",
  3687. label: idTypeSelect?.selectedOptions[0]?.text || "",
  3688. number: idNumberInput?.value || ""
  3689. };
  3694. const slots = [...chosenSlots].map(([time, obj]) => ({
  3695. time,
  3696. language: obj.language,
  3697. seats: obj.seats + " Seat(s)"
  3698. }));
  3702. return { dateFormat, timeRangeText, people, slots, peopleBreakdown, totalAmount, idProof };
  3703. }
  3706. // SHOW MODAL WITH FILLED DATA
  3708. function showModal() {
  3710. const {
  3711. dateFormat,
  3712. timeRangeText,
  3713. people,
  3714. slots, peopleBreakdown,
  3715. totalAmount,
  3716. idProof
  3717. } = gatherData();
  3719. // Date validation
  3720. if (!dateFormat) {
  3721. Swal.fire({
  3722. icon: "warning",
  3723. text: "Please select a date before previewing."
  3724. });
  3725. document.getElementById('dateInput').focus();
  3726. return;
  3727. }
  3730. if (!idProof.type) {
  3731. Swal.fire({
  3732. icon: "warning",
  3733. title: "ID proof required",
  3734. text: "Please select an identity proof."
  3735. }).then(() => {
  3736. idTypeSelect?.focus();
  3737. });
  3738. return;
  3739. }
  3741. if (!idProof.number || idProof.number.trim() === "") {
  3742. Swal.fire({
  3743. icon: "warning",
  3744. title: "ID Number Required",
  3745. text: "Please enter your ID number to continue.",
  3746. confirmButtonText: "OK",
  3747. allowOutsideClick: false
  3748. }).then(() => {
  3749. idNumberInput.focus();
  3750. });
  3751. return;
  3752. }
  3756. if (!isIdNumberValid) {
  3757. Swal.fire({
  3758. icon: "error",
  3759. title: "Invalid ID Number",
  3760. text: "Please enter a valid ID number before proceeding."
  3761. });
  3762. idNumberInput.focus();
  3763. return; // BLOCK SUBMIT
  3764. }
  3767. if (!people || people <= 0) {
  3768. Swal.fire({
  3769. icon: "warning",
  3770. title: "People count required",
  3771. text: "Please select at least one visitor before proceeding."
  3772. }).then(() => {
  3773. document.querySelector(".people-type-list")?.focus();
  3775. });
  3776. return;
  3777. }
  3780. // Slot selection validation
  3781. if (requiresSlot && slots.length === 0) {
  3782. Swal.fire({
  3783. icon: "warning",
  3784. text: "Please select at least one show before previewing."
  3785. });
  3786. return;
  3787. }
  3791. modalDate.textContent = dateFormat;
  3792. modalRange.textContent = timeRangeText;
  3793. modalPeople.textContent = people;
  3796. // ADD ID PROOF HERE
  3797. const idTypeEl = document.getElementById("vphModalIdType");
  3798. const idNumberEl = document.getElementById("vphModalIdNumber");
  3800. if (idTypeEl) {
  3801. idTypeEl.textContent = idProof?.label?.trim() || "—";
  3802. }
  3804. if (idNumberEl) {
  3805. idNumberEl.textContent = idProof?.number?.trim() || "—";
  3806. }
  3808. modalSlotsList.innerHTML = "";
  3809. if (slots.length === 0) {
  3810. modalSlotsList.innerHTML = `
  3811. <div class="vph-av-row">
  3812. <div class="vph-av-time">No shows selected</div>
  3813. </div>`;
  3814. } else {
  3815. slots.forEach(s => {
  3816. console.log(s);
  3817. const row = document.createElement("div");
  3818. row.className = "vph-av-row";
  3819. row.innerHTML = `
  3820. <div class="vph-av-time">
  3821. ${s.time} <span class="slot-lang">(${s.language})</span>
  3822. </div>
  3823. <div class="vph-av-meta">${s.seats}</div>
  3824. `;
  3825. modalSlotsList.appendChild(row);
  3826. });
  3828. }
  3830. const breakdownEl = document.getElementById("previewGuestBreakdown");
  3831. const totalAmountEl = document.getElementById("previewTotalAmount");
  3833. breakdownEl.innerHTML = "";
  3835. peopleBreakdown.forEach(p => {
  3836. const row = document.createElement("div");
  3837. row.className = "breakdown-row";
  3838. row.innerHTML = `
  3839. <span class="breakdown-label">
  3840. ${p.label} × ${p.count}
  3841. </span>
  3842. <span class="breakdown-value">
  3843. ₹${p.total}
  3844. </span>
  3845. `;
  3846. breakdownEl.appendChild(row);
  3847. });
  3849. totalAmountEl.textContent = "₹" + totalAmount;
  3852. overlay.classList.add("show");
  3853. modal.focus();
  3854. document.body.style.overflow = "hidden";
  3855. }
  3858. // CLOSE MODAL
  3859. function closeModal() {
  3860. overlay.classList.remove("show");
  3861. document.body.style.overflow = "";
  3862. previewBtn.focus();
  3863. }
  3870. previewBtn.addEventListener(
  3871. "click",
  3872. function (e) {
  3873. e.preventDefault();
  3876. showModal();
  3877. },
  3878. true
  3879. );
  3881. // Close options
  3882. overlay.addEventListener("click", (e) => { if (e.target === overlay) closeModal(); });
  3883. closeBtn?.addEventListener("click", closeModal);
  3884. backBtn?.addEventListener("click", closeModal);
  3886. })();
  3888. </script>
  3890. <script>
  3891. (function () {
  3892. // Button inside the cancel-card
  3893. const cancelBtn = document.getElementById('cancelBtn');
  3894. const overlay = document.getElementById('vphModalOverlay');
  3895. const modal = document.getElementById('vphModal');
  3896. const viewConfirm = document.getElementById('vphViewConfirm');
  3897. const viewCancelled = document.getElementById('vphViewCancelled');
  3898. const confirmBack = document.getElementById('vphConfirmBack');
  3899. const confirmYes = document.getElementById('vphConfirmYes');
  3900. const goMain = document.getElementById('vphGoMain');
  3901. const bookAnother = document.getElementById('vphBookAnother');
  3902. const closeBtn = document.querySelector('.cancel-close');
  3904. if (!cancelBtn || !overlay || !modal) {
  3905. console.warn('Cancel modal: required elements not found.');
  3906. return;
  3907. }
  3909. function showView(view) {
  3910. [viewConfirm, viewCancelled].forEach(v => {
  3911. if (!v) return;
  3912. v.classList.remove('active');
  3913. v.setAttribute('aria-hidden', 'true');
  3914. });
  3915. if (view === 'confirm' && viewConfirm) {
  3916. viewConfirm.classList.add('active');
  3917. viewConfirm.setAttribute('aria-hidden', 'false');
  3918. setTimeout(() => confirmYes && confirmYes.focus(), 40);
  3919. } else if (view === 'cancelled' && viewCancelled) {
  3920. viewCancelled.classList.add('active');
  3921. viewCancelled.setAttribute('aria-hidden', 'false');
  3922. setTimeout(() => bookAnother && bookAnother.focus(), 40);
  3923. }
  3924. }
  3926. function openModal(initialView) {
  3927. overlay.classList.add('show');
  3928. overlay.setAttribute('aria-hidden', 'false');
  3929. document.body.style.overflow = 'hidden';
  3930. showView(initialView || 'confirm');
  3931. }
  3933. function closeModal() {
  3934. overlay.classList.remove('show');
  3935. overlay.setAttribute('aria-hidden', 'true');
  3936. document.body.style.overflow = '';
  3937. cancelBtn && cancelBtn.focus();
  3938. }
  3941. cancelBtn.addEventListener('click', function (e) {
  3942. e.preventDefault();
  3943. openModal('confirm');
  3944. });
  3947. closeBtn && closeBtn.addEventListener('click', closeModal);
  3948. overlay.addEventListener('click', function (e) {
  3949. if (e.target === overlay) closeModal();
  3950. });
  3953. confirmBack && confirmBack.addEventListener('click', closeModal);
  3956. confirmYes && confirmYes.addEventListener('click', function () {
  3957. if (!bookingId) {
  3958. Swal.fire({
  3959. icon: "error",
  3960. text: "Invalid booking. Try again."
  3961. });
  3962. return;
  3963. }
  3965. $.ajax({
  3966. type: "POST",
  3967. url: "/victoriapublichall/bookingapi/cancelBooking",
  3968. data: { id: bookingId },
  3969. success: function (res) {
  3970. if (res.status === "success") {
  3971. showView('cancelled');
  3972. } else {
  3973. closeCancelModal();
  3974. Swal.fire({
  3975. icon: "error",
  3976. text: res.message || "Cancellation failed"
  3977. });
  3978. }
  3979. },
  3980. error: function () {
  3981. closeCancelModal();
  3982. Swal.fire({
  3983. icon: "error",
  3984. text: "Server error. Try again later."
  3985. });
  3986. }
  3987. });
  3990. });
  3992. // success view actions
  3993. goMain && goMain.addEventListener('click', function () {
  3994. window.location.href = '/victoriapublichall/home'; // change if needed
  3995. });
  3997. bookAnother && bookAnother.addEventListener('click', function () {
  3999. let userentry = null;
  4001. if (bookingmob_no && bookingmob_no.trim() !== "") {
  4002. userentry = bookingmob_no;
  4003. }
  4004. else if (bookingemail && bookingemail.trim() !== "") {
  4005. userentry = bookingemail;
  4006. }
  4008. if (userentry) {
  4009. // user used mobile or email earlier → continue booking
  4010. sessionStorage.setItem("hasBooking", "false");
  4011. sessionStorage.setItem("hasuser", userentry);
  4012. sessionStorage.setItem("bookingdetails", ""); // very important!
  4013. window.location.href = '/victoriapublichall/registerbook';
  4014. } else {
  4015. // no mobile or email found; force fresh login
  4016. window.location.href = '/victoriapublichall/register';
  4017. }
  4019. });
  4021. document.addEventListener('keydown', function (e) {
  4022. if (e.key === 'Escape' && overlay.classList.contains('show')) {
  4023. closeModal();
  4024. }
  4025. });
  4027. document.addEventListener('focus', function (e) {
  4028. if (overlay.classList.contains('show') && !modal.contains(e.target)) {
  4029. e.stopPropagation();
  4030. modal.focus();
  4031. }
  4032. }, true);
  4033. })();
  4035. function closeCancelModal() {
  4036. const overlay = document.getElementById('vphModalOverlay');
  4037. overlay.classList.remove('show');
  4038. overlay.setAttribute('aria-hidden', 'true');
  4039. document.body.style.overflow = '';
  4040. }
  4041. </script>
  4045. <script>
  4046. const redirectPath = '/victoriapublichall/register';
  4047. // This runs when the user presses the browser's back button
  4048. window.addEventListener('popstate', function (event) {
  4050. window.location.href = redirectPath;
  4052. });
  4053. // Push a dummy state so that the popstate event triggers properly
  4054. history.pushState(null, null, location.href);
  4057. function storeMobileForBulk() {
  4058. const mobile = sessionStorage.getItem("hasuser"); // already stored
  4059. if (mobile) {
  4060. sessionStorage.setItem("bulkMobile", mobile);
  4061. }
  4062. }
  4063. </script>
  4065. <script>
  4067. sessionStorage.setItem("bulkMobile", contact);
  4069. function handleBulkBookingClick() {
  4071. // Get contact from UI / session
  4072. const contact =
  4073. $("#contactDisplay").text().trim() ||
  4074. sessionStorage.getItem("bulkMobile");
  4076. if (!contact) {
  4077. Swal.fire("Error", "Contact not found", "error");
  4078. return;
  4079. }
  4081. // Call backend to check existing booking
  4082. $.get("/victoriapublichall/bookingapi/checkBulkBooking",
  4083. { contact: contact },
  4084. function (res) {
  4086. if (res.status === "found") {
  4088. window.location.href =
  4089. "/victoriapublichall/acknowledgement?refId=" + res.refId;
  4091. } else {
  4093. sessionStorage.setItem("bulkMobile", contact);
  4094. window.location.href =
  4095. "/victoriapublichall/bulkbooking";
  4096. }
  4097. }
  4098. ).fail(function () {
  4099. Swal.fire("Error", "Unable to verify booking", "error");
  4100. });
  4101. }
  4104. </script>
  4107. </body>
  4109. </html>