Victoria Hall Booking for Events
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

1591 lines
79 KiB

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/head-admin :: head}"></head>
<body>
<!-- Page Container -->
<div id="page-container"
class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
<!-- Side Overlay aside (right)-->
<aside th:replace="~{fragments/aside-right :: aside}"></aside>
<!-- END Side Overlay (right)-->
<!-- Sidebar Nav-->
<nav th:replace="~{fragments/nav-admin :: nav}"></nav>
<!-- END Sidebar -->
<!-- Header -->
<header th:replace="~{fragments/header-admin :: header}"></header>
<!-- END Header -->
<!-- Main Container -->
<main id="main-container">
<!-- END Hero -->
<!-- Page Content -->
<div class="content">
<div class="block block-rounded">
<div class="block-header block-header-default">
<h3 class="block-title"> List of Halls</h3>
<div class="block-options">
<button type="button" class="btn-block-option" id="addButton" onclick="addnewhall()"><i
class="far fa-plus-square"></i> Add New Hall
</button>
</div>
</div>
<div class="block-content p-0">
<div class="p-sm-4 p-0">
<div class="table-responsive">
<table id="halldetailsList"
class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
<thead class="thead-light">
<tr class="table-bordered">
<th class="text-center no-sort">S.No</th>
<th class="text-center" width="20%">Hallname</th>
<th class="text-center">Zone</th>
<th class="text-center">Division</th>
<th class="text-center">Status</th>
<th class="text-center">Hall Images</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<!-- Use Thymeleaf to loop through the bookingList -->
<tr th:each="list, i : ${halllist}" class="${halllist}" id="hallRow">
<td th:text="${i.count}">0</td>
<td class="text-center" th:text="${list.hallName}"></td>
<td class="text-center" th:text="${list.zone}"></td>
<td class="text-center" th:text="${list.division}"></td>
<td class="text-center">
<span class="badge bg-success" th:if="${list.isActive}">Active</span>
<span class="badge bg-danger"
th:unless="${list.isActive}">Deactivated</span>
</td>
<td class="text-center">
<a class="view-button">
<span class="badge bg-primary" style="cursor: pointer;"
th:onclick="viewHallImages([[${list.hallId}]])">View</span>
</a>
<a href="javascript:void(0);"
th:onclick="return hallimageEdit([[${list.hallId}]]);"
data-bs-toggle="tooltip" data-bs-animation="true"
data-bs-placement="top" title="Edit Hall Image"><i
class="fas fa-edit" style="font-size: 18px;"></i></a>
</td>
<td class="text-center">
<a href="javascript:void(0);"
th:onclick="return callview([[${list.hallId}]],0);"
data-bs-toggle="tooltip" data-bs-animation="true"
data-bs-placement="top" title="View Hall info"><i class="fa fa-eye"
style="font-size: 18px;"></i></a>
<a href="javascript:void(0);"
th:onclick="return callview([[${list.hallId}]],1);"
data-bs-toggle="tooltip" data-bs-animation="true"
data-bs-placement="top" title="Edit Hall Info"><i
class="fas fa-edit" style="font-size: 18px;"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- END Page Content -->
</main>
<!-- END Main Container -->
<footer th:replace="~{fragments/footer2 :: footer}"></footer>
<!-- END Footer -->
</div>
<!-- END Page Container -->
<div class="modal fade backdrop" id="infoForm" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="block block-rounded block-themed block-transparent mb-0">
<div class="block-header bg-primary-dark">
<h3 class="block-title" id="mtitle1">Hall Information</h3>
<div class="block-options">
<button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
<i class="fa fa-fw fa-times"></i>
</button>
</div>
</div>
<div class="block-content row">
<input type="hidden" class="form-control text-center" name="id" id="id" disabled/>
<!-- <div class="col-sm-4">
<label class="form-label" for="val-digits">Pet ID:<span class="text-danger">*</span></label>
<input type="hidden" class="form-control text-center" name="uniqid" id="uniqid" disabled />
</div> -->
<div class="col-sm-4">
<label class="form-label" for="hallName">Hall Name:<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="hallName" id="hallName"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="zone">Zone:<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="zones" id="zones" disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="division">Division:<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="divisions" id="divisions"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="doorNo">Address:<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="doorNo" id="doorNo" disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="pincode">Pincode:<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="pincode" id="pincode" disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="caretakerNo">Hall Incharge MobileNumber:<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="hallInchargeMobno"
id="hallInchargeMobno" disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="caretakerNo">Hall Incharge Name:<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="InchargeName" id="InchargeName"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="landmark">Landmark:<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="landmark" id="landmark"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="latitude">Latitude:<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="latitude" id="latitude"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="longitude">Longitude:<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="longitude" id="longitude"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="depositAmount">Full Day Deposit Amount:<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="depositAmount" id="depositAmount"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="halfDepositAmount">Half Day Deposit Amount:<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="halfDepositAmount"
id="halfDepositAmount"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="fullDayAmount">FullDayAmount:<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="fullDayAmount" id="fullDayAmount"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="halfDayAmount">HalfDayAmount:<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="halfDayAmount" id="halfDayAmount"
disabled/>
</div>
<div class="col-sm-4">
<label class="form-label" for="seatingCapacity">ParkingCapacity:<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="parkingCapacity"
id="parkingCapacity" disabled/>
</div>
<!--<div class="mb-4">
<label class="form-label" for="reason">Reason:<span class="text-danger"></span></label>
<textarea class="form-control " name="reason" id="reason" disabled ></textarea>
</div>-->
</div>
</div>
<div class="block-content block-content-full text-end bg-body" id="mbutton1">
<button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Edit Form -->
<div class="modal fade backdrop" id="editForm" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="ownform" onsubmit="return editsubmit();">
<div class="block block-rounded block-themed block-transparent mb-0">
<div class="block-header bg-primary-dark">
<h3 class="block-title" id="mtitle">Hall Information Edit Form</h3>
<div class="block-options">
<button type="button" class="btn-block-option" data-bs-dismiss="modal"
aria-label="Close">
<i class="fa fa-fw fa-times"></i>
</button>
</div>
</div>
<div class="block-content row">
<input type="hidden" class="form-control text-center" name="id" id="idd" disabled/>
<div class="col-sm-4">
<label class="form-label" for="hallName">Hall Name:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="hallName" id="hallNam"
required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="zone">Zone:*<span class="text-danger"></span></label>
<select class="form-select" name="zone2" id="zone2" required=""
onchange="getDiv2(this);">
<option value="">---Select Zone---</option>
</select>
</div>
<div class="col-sm-4">
<label class="form-label" for="division">Division:*<span
class="text-danger"></span></label>
<select class="form-select" name="division2" id="division2" required="">
<option value="">---Select Div---</option>
</select>
</div>
<div class="col-sm-4">
<label class="form-label" for="doorNo">Address:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="doorNo" id="doornoo"
required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="street">Street:*<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="street" id="street"
required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="pincode">Pincode:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="pincode" id="pincod"
minlength="6" maxlength="6" pattern="[0-9]{6}" required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="area">Area:*<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="area" id="area" required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="InchargeMobno">Hall Incharge Mobile Number:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="InchargeMobno"
id="InchargeMobno" minlength="10" maxlength="10" pattern="[0-9]{10}" required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="InchargeNamehall">Hall Incharge Name:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="InchargeNamehall"
id="InchargeNamehall" required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="landmark">Landmark:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="landmark" id="landmar"
required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="latitude">Latitude:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="latitude" id="latitu" required
oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="longitude">Longitude:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="longitude" id="longitu"
required
oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="depositAmount">Full Day Deposit Amount:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="depositAmount" id="depositAmo"
required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="halfDepositAmount">Half Day Deposit Amount:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="halfDepositAmount"
id="halfDepositAmo"
required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="fullDayAmount">Full Day Amount:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="fullDayAmount" id="fullDayAmo"
required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="halfDayAmount">Half Day Amount:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="halfDayAmount" id="halfDayAmo"
required oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="parkingCapacity">Parking Capacity:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="parkingCapacity"
id="parkingCapaci" required inputmode="numeric"
oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="seatingCapaci">Seating Capacity:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="seatingCapaci"
id="seatingCapaci" required inputmode="numeric"
oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="ebNumber">Consumer Number:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="ebNumber" id="ebNumber"
required minlength="9" maxlength="12" pattern="^[0-9-+*#]{9,12}$"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="ebCostPerUnit">EB Cost Per Unit:*<span
class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="ebCostPerUnit"
id="ebCostPerUnit" required
oninput="this.value = this.value.replace(/[^0-9]/g, '');"/>
</div>
<div class="col-sm-4">
<label class="form-label" for="city">City:*<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="city" id="city" required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="gst">GST in %:*<span class="text-danger"></span></label>
<input type="text" class="form-control text-center" name="gst" id="updatedgstpercentage"
required/>
</div>
<div class="col-sm-4">
<label class="form-label" for="hallStatus">Hall Status:*<span
class="text-danger"></span></label>
<select class="form-select" name="hallStatus" id="hallStatus" required="">
<option value="1">Activate</option>
<option value="0">Deactivate</option>
</select>
</div>
</div>
<div class="block-content block-content-full text-end bg-body" id="mbutton">
<button type="button" class="btn btn-sm btn-alt-secondary"
data-bs-dismiss="modal">Close
</button>
<button type="submit" class="btn btn-sm btn-primary">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of Edit form -->
<div class="modal fade backdrop" id="hallDetailsModal" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<form action="/victoriahallbooking/admin/saveHallDetails" id="hallform" method="post"
enctype="multipart/form-data">
<div class="block block-rounded block-themed block-transparent mb-0">
<div class="block-header bg-primary-dark">
<h3 class="block-title" id="mtitle">Add New Hall</h3>
<div class="block-options">
<button type="button" class="btn-block-option" data-bs-dismiss="modal"
aria-label="Close">
<i class="fa fa-fw fa-times"></i>
</button>
</div>
</div>
<div class="block-content row">
<div class="col-md-4">
<div class="form-group">
<label class="form-check-label" for="zone1">Select Zone*</label>
<select class="form-select" name="zone1" id="zone1" required=""
onchange="getDiv(this);">
<option val="">---Select Zone---</option>
</select>
</div>
<input type="hidden" class="form-control text-center" name="zone" id="zone" value="0"/>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="form-check-label" for="division">Select Division*</label>
<select class="form-select" name="division" id="division" required="">
<option value="">---Select Div---</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="hallName">Hall Name:*</label> <input type="text" class="form-control"
id="hallName" name="hallName"
placeholder="Hall Name" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="hallArea">Hall Area (in square feet):*</label> <input type="text"
class="form-control"
id="hallArea"
name="hallArea"
placeholder="Hall Area"
pattern="\d*"
inputmode="numeric"
oninput="this.value = this.value.replace(/[^0-9]/g, '');"
required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="doorNo">Door No:*</label>
<input type="text" class="form-control" id="doorNo" name="doorNo" pattern="\d*"
inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
placeholder="Door No" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="street">Street:*</label> <input type="text" class="form-control"
id="street" name="street"
placeholder="Street" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="area">Area:*</label> <input type="text" class="form-control" id="area"
name="area" placeholder="Area" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="city">City:*</label>
<input type="text" class="form-control" id="city" name="city" placeholder="City"
required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="pinCode">Pincode:*</label>
<input type="text" class="form-control" id="pinCode" name="pinCode"
placeholder="Pincode" required minlength="6" maxlength="6" pattern="[0-9]{6}"
onkeypress="return event.charCode >= 48 && event.charCode <= 57">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="hallInchargeName">Caretaker Name:*</label>
<input type="text" class="form-control" id="hallInchargeName"
name="hallInchargeName" placeholder="Caretaker Name" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="hallInchargeNo">Caretaker Number:*</label>
<input type="text" class="form-control" id="hallInchargeNo" name="hallInchargeNo"
placeholder="Caretaker Number" minlength="10" maxlength="10" pattern="[0-9]{10}"
onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="landmark">Landmark:*</label>
<input type="text" class="form-control" id="landMark" name="landMark"
placeholder="Landmark" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="latitude">Latitude:*</label>
<input type="text" class="form-control" id="latitude" name="latitude"
placeholder="Latitude" pattern="\d*" inputmode="numeric"
oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"
required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="longitude">Longitude:*</label>
<input type="text" class="form-control" id="longitude" name="longitude"
placeholder="Longitude" pattern="\d*" inputmode="numeric"
oninput="this.value = this.value.replace(/[^0-9.\-]/g,'').replace(/(\..*)\./g,'$1');"
required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="parkingCapacity">Parking Capacity:*</label> <input type="text"
class="form-control"
id="parkingCapacity"
name="parkingCapacity"
placeholder="Parking Capacity"
pattern="\d*"
inputmode="numeric"
oninput="this.value = this.value.replace(/[^0-9]/g, '');"
required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="seatingCapacity">Seating Capacity:*</label> <input type="text"
class="form-control"
id="seatingCapacity"
name="seatingCapacity"
placeholder="Seating Capacity"
pattern="\d*"
inputmode="numeric"
oninput="this.value = this.value.replace(/[^0-9]/g, '');"
required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ednumber">Consumer Number:*</label> <input type="text"
class="form-control"
id="ebNumber" name="ebNumber"
placeholder="Consumer Number"
minlength="9" maxlength="12"
pattern="^[0-9-+*#]{9,12}$"
required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ebCostPerUnit">EB Cost Per Unit:*</label> <input type="text"
class="form-control"
id="ebCostPerUnit"
name="ebCostPerUnit"
placeholder="EB Cost Per Unit"
required
oninput="this.value = this.value.replace(/[^0-9]/g, '');">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="gst">GST in %:*</label> <input type="text" class="form-control" id="gst"
name="gst" placeholder="GST" required>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col">
<p class="p1 text-center"><strong>PAYMENT DETAILS</strong></p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="depositAmount">Full Day Deposit Amount:*</label>
<input type="text" class="form-control" id="depositAmount" name="depositAmount"
placeholder="Deposit Amount" required
oninput="this.value = this.value.replace(/[^0-9]/g, '');">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="halfdepositAmt">Half Day Deposit Amount:*</label>
<input type="text" class="form-control" id="halfdepositAmt" name="halfdepositAmt"
placeholder="Deposit Amount" required
oninput="this.value = this.value.replace(/[^0-9]/g, '');">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="fullDayAmt">Full Day Amount:*</label>
<input type="text" class="form-control" id="fullDayAmt" name="fullDayAmt"
placeholder="Full Day Amount" required
oninput="this.value = this.value.replace(/[^0-9]/g, '');">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="halfDayAmt">Half Day Amount:*</label> <input type="text"
class="form-control"
id="halfDayAmt"
name="halfDayAmt"
placeholder="Half Day Amount"
required
oninput="this.value = this.value.replace(/[^0-9]/g, '');">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col">
<p class="p1 text-center"><strong>DOCUMENTS DETAILS</strong></p>
</div>
</div>
<div class="row" id="photoInputs">
<div class="col-md-3">
<div class="form-group">
<label for="photo1">Photo 1:* Only .JPEG, .JPG, .PDF </label>
<input type="file" class="form-control hall-image" id="photo1" name="hallImages"
accept="image/jpeg, image/jpg, image/pdf" required>
<small class="text-danger file-size-message"></small>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<button type="button" class="btn btn-primary" id="addPhoto">Add
Photo
</button>
</div>
</div>
</div>
</div>
<div class="block-content block-content-full text-end bg-body" id="mbutton">
<button type="button" class="btn btn-danger" onclick="fieldsreset()" name="reset">Reset</button>
<button type="button" class="btn btn-sm btn-alt-secondary"
data-bs-dismiss="modal">Close
</button>
<button type="submit" class="btn btn-sm btn-primary" onclick="submitForm()">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal for Editing Hall Images -->
<!-- Modal for Editing Hall Images -->
<div class="modal fade" id="hallImageEditModal" tabindex="-1" role="dialog"
aria-labelledby="hallImageEditModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="hallImageEditModalLabel">Edit Hall Images</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="hallImageEditForm">
<div id="currentImages" class="mb-3">
<!-- Current images will be loaded here dynamically -->
</div>
<div id="newImagesContainer" class="mb-3">
<!-- Placeholder for new image upload fields -->
</div>
<button type="button" class="btn btn-primary" id="addImageButton">
<i class="bi bi-plus-circle"></i> Add New Image
</button>
<button type="button" class="btn btn-primary" onclick="saveHallImages()" style="display:none"
id="savenewimage">Save new Image
</button>
<input type="hidden" id="hallId" name="hallId">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" style="max-width: 800px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Hall Image</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- Slides will be dynamically inserted here -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>-->
</div>
</div>
</div>
</div>
<div th:replace="~{fragments/resetpassword :: div}"></div>
<script th:replace="~{fragments/loginscript :: script}"></script>
<script type="text/javascript">
getZoneNo();
$(document).ready(function () {
// Load zones when the document is ready
getZoneNo2();
});
let isCompressing = false;
// Attach the validation function to file input change event
$(document).on('change', '.hall-image', function () {
validateFile(this);
});
function validateFile(fileInput) {
const allowedExtensions = /(\.jpg|\.jpeg|\.pdf)$/i;
const file = fileInput.files[0];
const filePath = fileInput.value;
let errorMessage = '';
// Validate file type
if (!allowedExtensions.exec(filePath)) {
errorMessage = 'Only JPG, JPEG, and PDF files are allowed.';
fileInput.value = ''; // Clear the file input
displayError(fileInput, errorMessage);
} else {
// If the file type is valid, clear any previous error message
clearError(fileInput);
// Handle image files separately
if (/(\.jpg|\.jpeg)$/i.test(filePath) && file.size > 2097152) {
compressImage(file).then(compressedFile => {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(compressedFile);
fileInput.files = dataTransfer.files;
// Validate file size after compression
validateFileSize(fileInput);
}).catch(error => {
errorMessage = 'Error compressing image.';
displayError(fileInput, errorMessage);
});
} else if (/(\.pdf)$/i.test(filePath) && file.size > 2097152) {
errorMessage = 'PDF file size exceeds the 2MB limit.';
fileInput.value = ''; // Clear the file input
displayError(fileInput, errorMessage);
} else {
// console.log('File size is within limit:', file.size, 'bytes');
}
}
}
// Function to clear error messages
function clearError(fileInput) {
const errorContainer = fileInput.nextElementSibling;
if (errorContainer && errorContainer.classList.contains('fileerror-message')) {
errorContainer.style.display = 'none';
errorContainer.textContent = ''; // Clear the error message text
}
}
// Function to compress image using canvas
function compressImage(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = function (event) {
const img = new Image();
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const maxSize = 2097152; // 2MB in bytes
let scale = 1;
if (file.size > maxSize) {
scale = Math.sqrt(maxSize / file.size);
}
canvas.width = img.width * scale;
canvas.height = img.height * scale;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// Convert canvas content to blob
canvas.toBlob(blob => {
resolve(new File([blob], file.name, {type: 'image/jpeg', lastModified: Date.now()}));
}, 'image/jpeg', 0.7); // Adjust JPEG quality as needed (0.7 is 70% quality)
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
}
// Function to validate file size after compression
function validateFileSize(fileInput) {
const file = fileInput.files[0];
if (file && file.size > 2097152) {
//console.log('File size is still greater than 2MB after compression.');
// Handle the situation where the file size is still greater than 2MB
displayError(fileInput, 'File size is still greater than 2MB after compression.');
fileInput.value = ''; // Clear the file input
} else {
//console.log('File size is within limit after compression.');
// Handle the situation where the file size is within the limit
}
}
// Function to display error messages
// Function to display error messages
function displayError(fileInput, errorMessage) {
let errorContainer = fileInput.nextElementSibling;
if (!errorContainer || !errorContainer.classList.contains('fileerror-message')) {
errorContainer = document.createElement('div');
errorContainer.classList.add('fileerror-message');
fileInput.parentNode.insertBefore(errorContainer, fileInput.nextSibling);
}
errorContainer.textContent = errorMessage;
errorContainer.style.display = 'block'; // Ensure the error message is visible
}
callAdd = function () {
window.location.href = '/victoriahallbooking/officer/hall-details';
}
document.addEventListener('DOMContentLoaded', function () {
let imageCount = 0; // Counter to keep track of the number of image fields
// Event listener for the "Add New Image" button
document.getElementById('addImageButton').addEventListener('click', function () {
imageCount++;
$('#savenewimage').show();
// Create a new file input field and add it to the container
const newFileInput = document.createElement('div');
newFileInput.className = 'mb-2';
newFileInput.innerHTML = `
<div class="d-flex align-items-center">
<input type="file" name="newHallImages" class="form-control mt-2 hall-image">&nbsp&nbsp&nbsp
<button type="button" class="btn btn-danger btn-sm ml-2 remove-image">
<i class="fas fa-minus-circle"></i>
</button>
</div>
`;
document.getElementById('newImagesContainer').appendChild(newFileInput);
});
// Event delegation for dynamically added "minus" buttons
document.getElementById('newImagesContainer').addEventListener('click', function (event) {
if (event.target.classList.contains('remove-image') || event.target.parentNode.classList.contains('remove-image')) {
// Find the parent div with class 'mb-2' and remove it
const fileInputDiv = event.target.closest('.mb-2');
if (fileInputDiv) {
fileInputDiv.remove();
}
}
});
});
// Clear file input fields when the modal is shown
$('#hallImageEditModal').on('show.bs.modal', function () {
$('#hallImageEditForm')[0].reset(); // Reset the form to clear previous inputs
$('#newImagesContainer').empty(); // Clear new images
// Clear any file input fields in the form
$('#hallImageEditForm').find('input[type="file"]').val('');
});
function hallimageEdit(hallId) {
$.ajax({
type: "GET",
url: '/victoriahallbooking/admin/api/getHallDetails/' + hallId,
success: function (response) {
//console.log(response);
$('#hallId').val(response.hallId);
// Clear current images
$('#currentImages').empty();
// Load current images with update option
if (response.hallImagesList && response.hallImagesList.length > 0) {
response.hallImagesList.forEach(function (image, index) {
let deleteButton = '';
// If it's not the first (primary) image, show the delete button
if (index > 0) {
deleteButton = `<button type="button" class="btn btn-danger btn-sm ml-2 mt-2" onclick="deleteHallImage(${image.hallImageId})">Delete</button>`;
}
$('#currentImages').append(`
<div class="mb-2" id="image-${image.hallImageId}">
<img src="${image.hallImage}" alt="Hall Image" class="img-thumbnail" width="100">
<input type="file" class="form-control mt-2 hall-image" id="newImage-${image.hallImageId}">
<button type="button" class="btn btn-primary btn-sm mt-2" onclick="updateHallImage(${image.hallImageId})">Update</button>
${deleteButton}
</div>
`);
});
}
// Show the modal
$('#hallImageEditModal').modal('show');
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
// Handle error here
}
});
}
function updateHallImage(hallImageId) {
const fileInput = document.getElementById('newImage-' + hallImageId);
const file = fileInput.files[0];
if (!file) {
Swal.fire({
icon: 'warning',
title: 'No Image Selected',
text: 'Please select an image to update.',
});
return;
}
const formData = new FormData();
formData.append('hallImage', file);
$.ajax({
type: "PUT",
url: '/victoriahallbooking/admin/api/updateHallImage/' + hallImageId,
data: formData,
processData: false,
contentType: false,
success: function (response) {
//console.log(response);
// Optionally update the UI with the new image
$('#image-' + hallImageId + ' img').attr('src', response.newImageUrl);
Swal.fire({
icon: 'success',
title: 'Updated!',
text: 'Image updated successfully.',
timer: 2000, // Optional: Auto-close after 2 seconds
showConfirmButton: false
})
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
Swal.fire({
icon: 'error',
title: 'Update Failed',
text: 'There was an issue updating the image.',
timer: 2000, // Optional: Auto-close after 2 seconds
showConfirmButton: false
});
}
});
}
function saveHallImages() {
var formData = new FormData();
var fileInputs = $('#hallImageEditForm').find('input[type="file"]');
var hasValidFile = false;
// Append hallId to formData
var hallId = $('#hallId').val();
if (hallId) {
formData.append('hallId', hallId);
} else {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Hall ID is missing.',
});
return;
}
// Iterate over all file inputs
fileInputs.each(function () {
if (this.files.length > 0) {
// Add non-empty files to FormData
for (var i = 0; i < this.files.length; i++) {
formData.append(this.name, this.files[i]);
}
hasValidFile = true;
}
});
if (!hasValidFile) {
Swal.fire({
icon: 'warning',
title: 'No Images Selected',
text: 'Please upload at least one new image.',
});
return;
}
$.ajax({
type: "POST",
url: '/victoriahallbooking/admin/api/savenewHallImages',
data: formData,
contentType: false,
processData: false,
success: function (response) {
// Handle success - reload or update the UI accordingly
$('#hallImageEditModal').modal('hide');
Swal.fire({
icon: 'success',
title: 'Success',
text: 'Hall images updated successfully!',
}).then(() => {
// Reload the page after the success message
window.location.reload();
});
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
Swal.fire({
icon: 'error',
title: 'Error',
text: 'An error occurred while updating hall images.',
});
}
});
}
function deleteHallImage(hallImageId) {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: "DELETE",
url: '/victoriahallbooking/admin/api/deleteHallImage/' + hallImageId,
success: function (response) {
//console.log(response);
// Remove the image from the UI
$('#image-' + hallImageId).remove();
Swal.fire({
icon: 'success',
title: 'Deleted!',
text: 'Your image has been deleted.',
timer: 2000, // Optional: Auto-close after 2 seconds
showConfirmButton: false
})
},
error: function (xhr, status, error) {
//console.error(xhr.responseText);
Swal.fire(
'Error!',
'There was an issue deleting the image.',
'error'
);
}
});
}
});
}
function callview(hallId, i) {
$.ajax({
type: "GET",
url: '/victoriahallbooking/admin/api/getHallDetails/' + hallId,
success: function (response) {
if (i === 0) {
showHallInfo(response);
} else if (i === 1) {
getZoneNo2().then(function () {
edit(response);
}).catch(function (error) {
console.error("Failed to load zones.", error);
});
}
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
// Handle error here
}
});
}
function showHallInfo(list) {
$('#infoForm').modal({
backdrop: 'static',
keyboard: false
});
document.getElementById("id").value = list.hallId;
document.getElementById("hallName").value = list.hallName;
document.getElementById("zones").value = list.zone;
document.getElementById("divisions").value = list.division;
document.getElementById("doorNo").value = list.doorNo;
document.getElementById("pincode").value = list.pinCode;
document.getElementById("hallInchargeMobno").value = list.hallInchargeMobno;
document.getElementById("InchargeName").value = list.hallInchargeName;
document.getElementById("landmark").value = list.landMark;
document.getElementById("latitude").value = list.latitude;
document.getElementById("longitude").value = list.longitude;
document.getElementById("depositAmount").value = list.depositAmount;
document.getElementById("halfDepositAmount").value = list.halfDepositAmount;
document.getElementById("fullDayAmount").value = list.fullDayRent;
document.getElementById("halfDayAmount").value = list.halfDayRent;
document.getElementById("parkingCapacity").value = list.parkingCapacity;
$('#infoForm').modal('show');
return false;
}
function edit(list) {
$('#editForm').modal({
backdrop: 'static',
keyboard: false
});
// Populate form fields with data
$('#idd').val(list.hallId);
$('#hallNam').val(list.hallName);
$('#zone2 option').each(function () {
if ($(this).text().trim() === list.zone) {
$('#zone2').val($(this).val());
}
});
$('#street').val(list.street);
getDiv2({value: $('#zone2').val()}).then(function () {
$('#division2 option').each(function () {
if ($(this).text().trim() === list.division) {
$('#division2').val($(this).val());
}
});
}).catch(function (error) {
console.error("Failed to load divisions.", error);
});
$('#doornoo').val(list.doorNo);
$('#pincod').val(list.pinCode);
$('#area').val(list.area);
$('#InchargeMobno').val(list.hallInchargeMobno);
$('#InchargeNamehall').val(list.hallInchargeName);
$('#landmar').val(list.landMark);
$('#latitu').val(list.latitude);
$('#longitu').val(list.longitude);
$('#depositAmo').val(list.depositAmount);
$('#halfDepositAmo').val(list.halfDepositAmount);
$('#fullDayAmo').val(list.fullDayRent);
$('#halfDayAmo').val(list.halfDayRent);
$('#parkingCapaci').val(list.parkingCapacity);
$('#seatingCapaci').val(list.seatingCapacity);
$('#ebNumber').val(list.ebNumber);
$('#ebCostPerUnit').val(list.ebCostPerUnit);
$('#city').val(list.city);
$('#updatedgstpercentage').val(list.gst);
$('#hallStatus').val(list.active ? '1' : '0');
// Display existing images
//document.getElementById("photo1image").src = "data:image/jpeg;base64," + list.hallImagesList.photo1;
$('#editForm').modal('show');
}
function editsubmit() {
var hallId = document.getElementById("idd").value;
var hallName = document.getElementById("hallNam").value;
if (hallName.trim() === '' || hallName === undefined) {
return false;
}
var zoneLabel = $('#zone2 option:selected').text();
var divisionLabel = $('#division2 option:selected').text();
var doorNo = document.getElementById("doornoo").value;
var street = document.getElementById("street").value;
var pinCode = document.getElementById("pincod").value;
var area = document.getElementById("area").value;
var hallInchargeMobno = document.getElementById("InchargeMobno").value;
var hallInchargeName = document.getElementById("InchargeNamehall").value;
var landMark = document.getElementById("landmar").value;
var latitude = document.getElementById("latitu").value;
var longitude = document.getElementById("longitu").value;
var depositamount = document.getElementById("depositAmo").value;
var halfDepositamount = document.getElementById("halfDepositAmo").value;
var fullday = document.getElementById("fullDayAmo").value;
var halfday = document.getElementById("halfDayAmo").value;
var parkingCapacity = document.getElementById("parkingCapaci").value;
var seatingCapacity = document.getElementById("seatingCapaci").value;
var ebNumber = document.getElementById("ebNumber").value;
var ebCostPerUnit = document.getElementById("ebCostPerUnit").value;
var city = document.getElementById("city").value;
var gst = document.getElementById("updatedgstpercentage").value;
var isActive = document.getElementById("hallStatus").value;
var formData = new FormData();
formData.append("hallId", hallId);
formData.append("hallName", hallName);
formData.append("zone", zoneLabel);
formData.append("division", divisionLabel);
formData.append("doorNo", doorNo);
formData.append("street", street);
formData.append("pinCode", pinCode);
formData.append("area", area);
formData.append("hallInchargeMobno", hallInchargeMobno);
formData.append("hallInchargeName", hallInchargeName);
formData.append("landMark", landMark);
formData.append("latitude", latitude);
formData.append("longitude", longitude);
formData.append("depositAmount", parseFloat(depositamount));
formData.append("halfDepositAmount", parseFloat(halfDepositamount));
formData.append("fullDayRent", parseFloat(fullday));
formData.append("halfDayRent", parseFloat(halfday));
formData.append("parkingCapacity", parkingCapacity);
formData.append("seatingCapacity", parseInt(seatingCapacity));
formData.append("ebNumber", ebNumber);
formData.append("ebCostPerUnit", ebCostPerUnit);
formData.append("city", city);
formData.append("gst", gst);
formData.append("isActive", isActive);
$.ajax({
type: "POST",
url: '/victoriahallbooking/admin/api/updateHallDetails',
contentType: false,
processData: false,
data: formData,
dataType: 'text',
success: function (bodyMessage) {
if (bodyMessage.trim() == "Success") {
Swal.fire(
'Success!',
'Successfully updated.',
'success'
).then(() => {
location.reload();
});
} else {
Swal.fire(
'Error!',
'An error occurred while updating hall details.',
'error'
);
}
},
error: function () {
Swal.fire(
'Error!',
'An error occurred while updating hall details.',
'error'
);
}
});
return false;
}
function addnewhall() {
$('#hallDetailsModal').modal('show');
}
// Function to close the modal when the user clicks outside of it
window.onclick = function (event) {
var modal = document.getElementById("hallDetailsModal");
if (event.target == modal) {
modal.style.display = "none";
}
};
$(document).ready(function () {
// Add photo input
$('#addPhoto').click(function () {
var lastPhotoInput = $('#photoInputs').children().last();
var newPhotoInput = lastPhotoInput.clone();
var photoCount = $('#photoInputs').children().length + 1;
// Clear the value of the cloned input field
newPhotoInput.find('.hall-image').val('');
newPhotoInput.find('.hall-image').attr('id', 'photo' + photoCount);
newPhotoInput.find('label').attr('for', 'photo' + photoCount).text('Photo ' + photoCount + ':');
// Check if delete button already exists before appending
if (!newPhotoInput.find('.delete-photo').length) {
newPhotoInput.append('<div class="input-group-append"><button type="button" class="btn btn-danger delete-photo"><i class="fas fa-trash"></i></button></div>');
}
$('#photoInputs').append(newPhotoInput);
});
// Delete photo input
$(document).on('click', '.delete-photo', function () {
$(this).closest('.col-md-3').remove();
// Update photo labels after deletion
$('#photoInputs .col-md-3').each(function (index) {
$(this).find('label').text('Photo ' + (index + 1) + ':');
$(this).find('.hall-image').attr('id', 'photo' + (index + 1));
});
});
});
function viewHallImages(hallId) {
$.ajax({
type: "GET",
url: '/victoriahallbooking/admin/api/getImageById',
data: {
'hallId': hallId
},
success: function (res) {
if (res && res.length > 0) {
getHallImagesById(res);
} else {
console.error('No images found for hallId:', hallId);
}
},
error: function (xhr, status, error) {
console.error('Error fetching images:', error);
}
});
}
function getHallImagesById(images) {
const modalSlidesContainer = document.querySelector('.carousel-inner');
modalSlidesContainer.innerHTML = ''; // Clear existing slides
images.forEach((image, index) => {
const slide = document.createElement('div');
slide.classList.add('carousel-item');
if (index === 0) {
slide.classList.add('active');
}
const img = document.createElement('img');
img.src = image.hallImage;
// img.alt = Slide ${image.hallImageId};
img.alt = `Slide ${image.hallImageId}`;
img.style.maxHeight = '550px'; // Adjust image size
img.style.width = 'auto'; // Maintain aspect ratio
slide.appendChild(img);
modalSlidesContainer.appendChild(slide);
});
$('#exampleModal').modal('show'); // Show Bootstrap modal
}
//Getting Zone No
function getZoneNo() {
$.ajax({
type: "GET",
url: '/victoriahallbooking/user/api/getZoneNo',
dataType: 'json',
success: function (bodyMessage) {
var tempJson = bodyMessage['ZoneDetailsResult'];
//alert("tempJson---:"+tempJson);
for (var i = 0; i < tempJson.length; i++) {
var tempJsonValue = tempJson[i]['ZoneId'];
//var tempJsonValue = tempJson[i]['ZoneName'].replace('N', '');
var tempJsonLabel = tempJson[i]['ZoneName'].replace('N', '');
$('#zone1').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
}
}, error: function (e, ts, et) {
// alert(ts)
}
});
}
//Getting Div
function getDiv($this) {
$('#division option:not(:first)').remove();
var zoneId = $this.value;
var zone = $this.value;
//alert("zone---:"+zone);
$.ajax({
type: "GET",
url: '/victoriahallbooking/user/api/getDiv',
data: {'zoneId': zoneId},
dataType: 'json',
success: function (bodyMessage) {
var tempJson = bodyMessage['DivisionDetailsResult'];
for (var i = 0; i < tempJson.length; i++) {
var tempJsonValue = tempJson[i]['DivisionName'].replace('N', '');
//var tempJsonValue = tempJson[i]['DivisionId'];
var tempJsonLabel = tempJson[i]['DivisionName'].replace('N', '');
$('#division').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
}
}, error: function (e, ts, et) {
// alert(ts)
}
});
}
function submitForm() {
var selectedZone = document.getElementById("zone1");
var selectedZoneValue = selectedZone.value;
// Check if a zone is selected
if (selectedZoneValue === "" || selectedZoneValue === "---Select Zone---") {
selectedZone.setCustomValidity("Please select a zone.");
selectedZone.reportValidity();
return false; // Prevent form submission
} else {
selectedZone.setCustomValidity(""); // Clear any previous error message
}
// Set the hidden zone field value
document.getElementById("zone").value = selectedZone.options[selectedZone.selectedIndex].innerHTML;
// Form is valid, allow submission
return true;
}
$(document).ready(
function () {
var buttons = [{
extend: 'pageLength',
className: 'btn btn-primary'
}, {
title: 'Data export',
extend: 'copyHtml5',
text: 'Copy',
className: 'btn btn-primary',
id: 'copyBtn'
}, {
extend: 'excelHtml5',
text: 'Excel',
className: 'btn btn-primary',
id: 'excelBtn'
}, {
extend: 'csvHtml5',
text: 'CSV',
className: 'btn btn-primary',
id: 'csvBtn'
}, {
extend: 'pdfHtml5',
text: 'PDF',
className: 'btn btn-primary',
id: 'pdfBtn'
},
];
$('#halldetailsList').DataTable(
{
dom: 'Bftip',
columnDefs: [{
targets: 'no-sort',
orderable: false
}],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows',
'500 rows', 'Show all']],
scrollY: '50vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: [buttons],
responsive: true,
searching: true, // Enable search
select: false,
processing: false,
});
// Link the search input to DataTable
$('#searchInput').on('keyup', function () {
dataTable.search(this.value).draw();
});
});
function fieldsreset() {
// Select the form element
var form = document.getElementById('hallform');
// Check if form exists
if (form) {
// Clear all input fields
$(form).find('input').val('');
$(form).find('textarea').val('');
$(form).find('select').prop('selectedIndex', 0);
// Remove any dynamically added error messages and classes
$('.error-message').remove();
$('.file-upload-field').removeClass('error');
// Remove any dynamically added photo inputs
$('#photoInputs .hall-image').not(':first').parent().parent().remove();
} else {
console.error('Form not found');
}
}
$('#hallDetailsModal').on('hidden.bs.modal', function () {
fieldsreset(); // Call resetFormFields function
});
function getZoneNo2() {
return new Promise(function (resolve, reject) {
$.ajax({
type: "GET",
url: '/victoriahallbooking/user/api/getZoneNo',
dataType: 'json',
success: function (bodyMessage) {
var tempJson = bodyMessage['ZoneDetailsResult'];
$('#zone2').empty().append("<option value=''>---Select Zone---</option>");
for (var i = 0; i < tempJson.length; i++) {
var tempJsonValue = tempJson[i]['ZoneId'];
var tempJsonLabel = tempJson[i]['ZoneName'].replace('N', '');
//console.log("Appending option - value:", tempJsonValue, "label:", tempJsonLabel);
$('#zone2').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
}
resolve();
},
error: function (e, ts, et) {
console.error(ts);
reject();
}
});
});
}
function getDiv2($this) {
return new Promise(function (resolve, reject) {
$('#division2 option:not(:first)').remove();
var zoneId = $this.value;
$.ajax({
type: "GET",
url: '/victoriahallbooking/user/api/getDiv',
data: {'zoneId': zoneId},
dataType: 'json',
success: function (bodyMessage) {
var tempJson = bodyMessage['DivisionDetailsResult'];
for (var i = 0; i < tempJson.length; i++) {
var tempJsonValue = tempJson[i]['DivisionId']; // Assuming DivisionId is used for value
var tempJsonLabel = tempJson[i]['DivisionName'].replace('N', '');
//console.log("Appending division option - value:", tempJsonValue, "label:", tempJsonLabel);
$('#division2').append("<option value='" + tempJsonValue + "'>" + tempJsonLabel + "</option>");
}
resolve();
},
error: function (e, ts, et) {
console.error(ts);
reject();
}
});
});
}
</script>
</body>
</html>