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.
 
 
 
 
 

1450 lines
54 KiB

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/head-admin :: head}"></head>
<style>
.card-body table {
width: 100%;
padding: 100px;
}
.card-body th,
td {
padding: 8px;
text-align: left;
}
.amount-cell {
text-align: right;
padding-right: 1rem;
/* Adjust padding as needed */
}
.table {
width: 100% !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
integrity="sha384-vUDzXQ+PSziH/FUbe0YVEv7qEoRJRT5D02B1RWZC1yyP3+n6K8N7q0clmKf3nDOJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"></script>
<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">
<div class="content">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="settlement-approved-tab" data-toggle="tab"
href="#settlement-approved" role="tab" aria-controls="settlement-approved"
aria-selected="true">Settlement Refund</a>
</li>
<li class="nav-item">
<a class="nav-link" id="cancelled-bookings-tab" data-toggle="tab" href="#cancelled-bookings"
role="tab" aria-controls="cancelled-bookings" aria-selected="false">Cancelled Bookings
Refund</a>
</li>
<li class="nav-item">
<a class="nav-link" id="gcc-blocked-tab" data-toggle="tab" href="#gcc-blocked" role="tab"
aria-controls="gcc-blocked" aria-selected="false">GCC Blocked/Rejected Refund</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!-- Tab pane for Settlement Approved -->
<div class="tab-pane fade show active" id="settlement-approved" role="tabpanel"
aria-labelledby="settlement-approved-tab">
<div class="block block-rounded">
<div class="block-header block-header-default">
<h3 class="block-title">List of Settlement Refund Approved</h3>
</div>
<div class="block-content p-0">
<div class="p-sm-4 p-0">
<div class="table-responsive">
<table id="SettlementApprovedListTable"
class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
<thead class="thead-light">
<tr>
<th>S.no</th>
<th>Zone/Division</th>
<th>Hall Name</th>
<th>Booking Id</th>
<th width="10%">Booking Date</th>
<th>Settlement Approved Date</th>
<th width="5%">Settlement Id</th>
<th>Deposit Amount</th>
<th>Collection Amount</th>
<th>Refunded Amount</th>
<th>Refund Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Populate rows with Thymeleaf -->
<tr th:each="settlements, rowStat : ${settlementlist}">
<td class="text-center" th:text="${rowStat.index + 1}"></td>
<td class="text-center"
th:text="${settlements.hallDetails.zone + ' / ' + settlements.hallDetails.division}">
</td>
<td class="text-center"
th:text="${settlements.hallDetails.hallName}"></td>
<td class="text-center" th:text="${settlements.bookingId}"></td>
<td class="text-center" th:text="${settlements.bookingDate}"></td>
<td class="text-center"
th:text="${settlements.settlement.updatedDate}"></td>
<td class="text-center"
th:text="${settlements.settlement.settlementId}"></td>
<td class="text-center"
th:text="${settlements.settlement.depositAmount}"></td>
<td class="text-center"
th:text="${settlements.settlement.collectionPending}"></td>
<td class="text-center"
th:text="${settlements.settlement.refundedAmount}"></td>
<td class="text-center" th:text="${settlements.refundStatus}"></td>
<td>
<p>
<span class="badge bg-warning" style="cursor: pointer;"
th:onclick="approve([[${settlements.settlement.settlementId}]])">Initiate</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Tab pane for Cancelled Bookings Approved -->
<div class="tab-pane fade" id="cancelled-bookings" role="tabpanel"
aria-labelledby="cancelled-bookings-tab">
<!-- Repeat similar structure for Cancelled Bookings Approved -->
<div class="block block-rounded">
<div class="block-header block-header-default">
<h3 class="block-title">List of Refund Approved for Cancelled Bookings</h3>
</div>
<div class="block-content p-0">
<div class="p-sm-4 p-0">
<div class="table-responsive">
<table id="cancelledApprovedListTable"
class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
<thead class="thead-light">
<tr>
<th>S.no</th>
<th>Booking Id</th>
<th>Booking Date</th>
<th>Hall Name</th>
<th>User Name</th>
<th>User type</th>
<th>Reason for Booking</th>
<th>Refund Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="cancelledbookings, rowStat : ${approvedcancelledbookings}">
<td class="text-center" th:text="${rowStat.index + 1}"></td>
<td class="text-center" th:text="${cancelledbookings.bookingId}">
</td>
<td class="text-center" th:text="${cancelledbookings.bookingDate}">
</td>
<td class="text-center"
th:text="${cancelledbookings.hallDetails.hallName}"></td>
<td class="text-center" th:text="${cancelledbookings.users.name}">
</td>
<td class="text-center"
th:text="${cancelledbookings.users.usertype}"></td>
<td class="text-center" th:text="${cancelledbookings.reason}"></td>
<td class="text-center"
th:text="${cancelledbookings.depositAmount}"></td>
<td>
<p>
<span class="badge bg-warning" style="cursor: pointer;"
th:onclick="approvedcancelledbooking([[${cancelledbookings.bookingId}]])">Approve</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Tab pane for GCC Blocked/Rejected Approved -->
<div class="tab-pane fade" id="gcc-blocked" role="tabpanel" aria-labelledby="gcc-blocked-tab">
<!-- Repeat similar structure for GCC Blocked/Rejected Approved -->
<div class="block block-rounded">
<div class="block-header block-header-default">
<h3 class="block-title">List of Refund Approved for GCC Blocked/Rejected</h3>
</div>
<div class="block-content p-0">
<div class="p-sm-4 p-0">
<div class="table-responsive">
<table id="rejectedApprovedListTable"
class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
<thead class="thead-light">
<tr>
<th>S.no</th>
<th>Booking Id</th>
<th>Booking Date</th>
<th>Hall Name</th>
<th>User Name</th>
<th>User type</th>
<th>Reason for Booking</th>
<th>Reason for Rejection</th>
<th>Refund Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="rejectedbookings, rowStat : ${approvedrejectedbookings}">
<td class="text-center" th:text="${rowStat.index + 1}"></td>
<td class="text-center" th:text="${rejectedbookings.bookingId}">
</td>
<td class="text-center" th:text="${rejectedbookings.bookingDate}">
</td>
<td class="text-center"
th:text="${rejectedbookings.hallDetails.hallName}"></td>
<td class="text-center" th:text="${rejectedbookings.users.name}">
</td>
<td class="text-center"
th:text="${rejectedbookings.users.usertype}"></td>
<td class="text-center" th:text="${rejectedbookings.reason}"></td>
<td class="text-center" th:text="${rejectedbookings.comments}"></td>
<td class="text-center"
th:text="${rejectedbookings.amountReceived}">
</td>
<td>
<p>
<span class="badge bg-warning" style="cursor: pointer;"
th:onclick="approvedcancelledbooking([[${rejectedbookings.bookingId}]])">Approve</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- END Main Container -->
<!--modal for pending-->
<div class="modal fade backdrop" id="initiateSettlementForm" 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">
<div class="block block-rounded block-themed block-transparent mb-0">
<div class="block-header bg-primary-dark">
<h3 class="block-title" id="2mtitle">Settlement 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">
<div class="col-md-12 col-lg-12 col-sm-12">
<input type="hidden" class="form-control text-center" name="settlementid"
id="settlementid" disabled />
<input type="hidden" class="form-control text-center" name="refundAmount"
id="refundAmount" disabled />
<div class="card-body">
<table>
<tr>
<th colspan="10" style="background-color: lightgrey;">User Details</th>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_userName"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_mobileNumber"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_usertype"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
</th>
<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_useraddress"></td>
</tr>
<input type="hidden" class="form-control text-center" name="bookingid"
id="bookingid" disabled />
<tr>
<th colspan="10" style="background-color: lightgrey;">Hall Details</th>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
</th>
<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_hallName"></td>
</tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_halladdress"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
Name:</th>
<td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_caretakername"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
Mobile Number:</th>
<td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_caretakermobileNumber"></td>
</tr>
</table>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12">
<input type="hidden" class="form-control text-center" name="settlementid"
id="settlementid" disabled />
<div class="card-body">
<table>
<tr>
<th colspan="4" style="background-color: lightgrey;">Booking
Details (Booking Id:-<span id="booking_id"
style="color:blue"></span>)</th>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_bookingDate"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
Amount:</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_depositeAmount"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_startDate"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_hallAmount"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">END
Date:</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_endDate"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_gst"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_startingSlot"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_totalAmount"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_endingSlot"></td>
</tr>
<tr>
<th colspan="4" style="background-color: lightgrey;">EB
Details</th>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Consumer Number:</th>
<td class="fw-semibold"
style="padding: 0.45rem 0.45rem;text-align:center;"
id="td_EBNumber"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount Per
Unit:</th>
<td class="fw-semibold"
style="padding: 0.45rem 0.45rem;text-align:right;"
id="td_ebamountperunit"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Reading:
</th>
<td class="fw-semibold"
style="padding: 0.45rem 0.45rem;text-align:center;"
id="td_startingReading"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Unit Consumed:
</th>
<td class="fw-semibold"
style="padding: 0.45rem 0.45rem;text-align:right;" id="td_usedunit">
</td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">END Reading:
</th>
<td class="fw-semibold"
style="padding: 0.45rem 0.45rem;text-align:center;"
id="td_endingReading"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
<td class="fw-semibold"
style="padding: 0.45rem 0.45rem;text-align:right;"
id="td_electricityamount"></td>
</tr>
</table>
</div>
</div>
<div id="damageDetails" style="margin-bottom: -17px;"></div>
<div class="col-md-12 col-lg-12 col-sm-12">
<div class="card-body">
<table>
<tr>
<th colspan="2" style="background-color: lightgrey;">Amount to be
Refunded</th>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
Amount:</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_depositeamountforrefund">0</td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_ebAmount"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Damage Amount:
</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_damage"></td>
</tr>
<tr id="pendingcolumn">
<th id="th_settel_label"
style="padding: 0.45rem 0.45rem;font-weight: normal">Collected Amount:</th>
<td class="fw-semibold amount-cell"
style="padding: 0.45rem 0.45rem; color: green;" id="td_pending_amt">
0</td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Actual
refundable Amount:</th>
<td class="fw-semibold amount-cell"
style="padding: 0.45rem 0.45rem; color: green;" id="td_settel_amt">0
</td>
</tr>
</table>
</div>
</div>
<!-- DD detail -->
<div id="challonTableContainer"></div>
<div id="ddTableContainer" style=" margin-top: -16px;"></div>
</div>
<div class="block-content block-content-full text-end bg-body" id="mbutton2">
<button type="button" class="btn btn-sm btn-alt-success" id="initiatebutton"
th:onclick="initiate()">Initiate</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">Reject</button>-->
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Approved Bookingform-->
<div class="modal fade backdrop" id="approvedcancelledBookingForm" 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">
<div class="block block-rounded block-themed block-transparent mb-0">
<div class="block-header bg-primary-dark">
<h3 class="block-title" id="2mtitle">Booking Information</h3>
<div class="block-options">
<button type="button" class="btn-block-option" data-bs-dismiss="modal"
aria-label="Close">
<i class="fa fa-fw fa-times"></i>
</button>
</div>
</div>
<div class="block-content row">
<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
<input type="hidden" class="form-control text-center" name="booksid" id="booksId"
disabled />
<div class="card-body">
<table>
<tr>
<th colspan="10" style="background-color: #f2f2f2;">User Details</th>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="username">
</td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="mobileno">
</td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="usertype">
</td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
</th>
<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="useraddress"></td>
</tr>
</table>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
<div class="card-body">
<table>
<tr>
<th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
</th>
<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="hallname"></td>
</tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="halladdress"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
Name:</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="caretakername"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
Mobile Number:</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="caretakermobileNumber"></td>
</tr>
</table>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12">
<div class="card-body">
<table>
<tr>
<th colspan="4" style="background-color: #f2f2f2;">Booking
Details (Booking Id:-<span id="bookid" style="color:blue"></span>)
</th>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="bookingDate"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="bookingStatus"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="startDate"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit Amount
(in Rs):</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="depositeAmount"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">END
Date:</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="endDate">
</td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="hallAmount"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="startingSlot"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="gst"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="endingSlot"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="totalAmount"></td>
</tr>
</table>
</div>
</div>
<div class="col-sm-12">
<!--<label class="form-label">Documents:<span class="text-danger"></span></label>-->
<div class="documents" id="documents"></div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
<input type="hidden" class="form-control text-center" name="bookingid"
id="bookingid" disabled />
<div class="card-body">
<table>
<tr>
<th colspan="10" style="background-color: #f2f2f2;">Booking Payment
Details</th>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
ID:</th>
<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="transactionId"></td>
</tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:
</th>
<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="payamountReceived"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
Status:</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="paymentStatus"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="block-content block-content-full text-end bg-body" id="mbutton2">
<!--<button type="button" class="btn btn-sm btn-alt-success"
th:onclick="accept()">Accept</button>-->
<button type="button" class="btn btn-sm btn-alt-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-sm btn-alt-success" id="initiatebutton"
th:onclick="initiaterefund()">Initiate</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fileModalLabel">File Preview</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">
<embed id="filePreview" src="" width="100%" height="600px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer th:replace="~{fragments/footer2 :: footer}"></footer>
<!-- END Footer -->
</div>
<div th:replace="~{fragments/resetpassword :: div}"></div>
<script th:replace="~{fragments/loginscript :: script}"></script>
<script>
$(document).ready(function () {
$('#myTab a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
})
$(document).ready(function () {
// DataTables buttons configuration
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'
}
];
// Initialize DataTable for each tab on tab shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var targetTable = $(e.target).attr('href'); // activated tab
$(targetTable).find('.dataTable').DataTable().columns.adjust();
});
// Initialize DataTable for Settlement Approved tab
$('#SettlementApprovedListTable').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']
],
buttons: buttons,
responsive: true,
searching: true,
select: false,
processing: false,
// Set width to 100%
"autoWidth": true
});
// Initialize DataTable for Cancelled Bookings Approved tab
$('#cancelledApprovedListTable').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']
],
buttons: buttons,
responsive: true,
searching: true,
select: false,
processing: false,
// Set width to 100%
"autoWidth": true
});
// Initialize DataTable for GCC Blocked/Rejected Approved tab
$('#rejectedApprovedListTable').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']
],
buttons: buttons,
responsive: true,
searching: true,
select: false,
processing: false,
// Set width to 100%
"autoWidth": true
});
});
function approve(settlementId) {
$.ajax({
type: "GET",
url: '/victoriahallbooking/api/officer/getSettlementList',
data: {
'settlementsid': settlementId
},
success: function (x) {
// console.log(x);
showSettlementInfo(x)
showDamageDetails(x);
}
});
}
function showSettlementInfo(list) {
// console.log(list); // Log the damageList array
// console.log(list.damageList[0]);
$('#initiateSettlementForm').modal({
backdrop: 'static',
keyboard: false
});
$('#initiateSettlementForm').modal('show');
document.getElementById("settlementid").value = list.settlement.settlementId;
document.getElementById("refundAmount").value = list.settlement.refundedAmount;
document.getElementById("td_userName").innerHTML = list.users.name;
document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
document.getElementById("td_usertype").innerHTML = list.users.usertype;
var userDetails = list.users;
var userDetailsString =
userDetails.doorNo + ", " +
userDetails.street + ", " +
userDetails.area + ", " +
userDetails.location + " ,Chennai- " +
userDetails.pinCode;
document.getElementById("td_useraddress").innerHTML = userDetailsString;
document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
var hallDetails = list.hallDetails;
var hallDetailsString =
hallDetails.doorNo + ", " +
hallDetails.street + ", " +
hallDetails.area + ", " +
hallDetails.city + "- " +
hallDetails.pinCode;
document.getElementById("td_halladdress").innerHTML = hallDetailsString;
document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
// Calculate GST and total amount
var gstAmount = (parseFloat(list.hallAmount) * (list.hallDetails.gst/100)).toFixed(2);
var totalAmount = parseFloat(list.amountReceived).toFixed(2);
document.getElementById("td_gst").innerHTML = '₹ ' + gstAmount;
document.getElementById("td_totalAmount").innerHTML = '₹ ' + totalAmount;
document.getElementById("td_startDate").innerHTML = list.startDate;
document.getElementById("td_endDate").innerHTML = list.endDate;
document.getElementById("booking_id").innerHTML = list.bookingId;
function getTimeSlot(slotValue) {
var timeSlot;
var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
if (trimmedSlotValue === '1') {
timeSlot = 'Morning';
} else if (trimmedSlotValue === '2') {
timeSlot = 'Evening';
} else {
timeSlot = 'Unknown';
}
return timeSlot;
}
document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
document.getElementById("td_EBNumber").innerHTML = list.hallDetails.ebNumber;
document.getElementById("td_startingReading").innerHTML = list.ebDetails.startingReading;
document.getElementById("td_endingReading").innerHTML = list.ebDetails.endingReading;
document.getElementById("td_usedunit").innerHTML = list.ebDetails.usedUnit;
document.getElementById("td_ebamountperunit").innerHTML = '₹ ' + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2);
document.getElementById("td_depositeamountforrefund").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
document.getElementById("td_electricityamount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
document.getElementById("td_ebAmount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
document.getElementById("td_damage").innerHTML = '₹ ' + parseFloat(list.settlement.damageAmount).toFixed(2);
var eb_amt = parseFloat(list.ebDetails.ebAmount).toFixed(2);
var deposit_amt = parseFloat(list.depositAmount).toFixed(2);
var tem_total = (deposit_amt - eb_amt).toFixed(2);
$("#td_settel_amt").html(tem_total);
}
function showDamageDetails(data) {
var damageFieldContainer = $('#damageDetails');
damageFieldContainer.empty();
// Create a div for table responsiveness
var tableResponsiveDiv = $('<div>').addClass('table-responsive');
// Create table with similar classes and styles to the modal table
var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '97%', 'border-color': 'black', 'border-top-color': 'white'});
var thead = $('<thead>').addClass('thead-light');
var tbody = $('<tbody>');
// Create Damage Details header row
var headerRow = $('<tr>').appendTo(thead);
$('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
'padding': '0.45rem 0.45rem',
'background-color': 'lightgrey',
'font-weight': 'bold',
'color': 'black',
}).appendTo(headerRow);
// Create table header row
var columnHeadersRow = $('<tr>').css('background-color', 'white').appendTo(thead);
$('<th>').text('S.No').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
$('<th>').text('Asset Name').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
$('<th>').text('Damage Img').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
$('<th>').text('Cost').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
$('<th>').text('Qty').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
$('<th>').text('Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnHeadersRow);
var totalAmount = 0;
// Check if damageList is empty
if (data.damageList.length === 0) {
var row = $('<tr>').appendTo(tbody);
$('<td>').attr('colspan', '6').text('No Damaged Items').css({
'padding': '0.45rem 0.45rem',
'text-align': 'center',
'font-weight': 'bold',
'background-color': '#f2f2f2'
}).appendTo(row);
} else {
$.each(data.damageList, function (index, detail) {
var row = $('<tr>').appendTo(tbody);
$('<td>').text(index + 1).css({
'padding': '0.45rem 0.45rem',
'text-align': 'center'
}).appendTo(row);
$('<td>').text(detail.assetName).css({
'padding': '0.45rem 0.45rem',
'text-align': 'center'
}).appendTo(row);
var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
showDamageImage(detail.damageImageUrl);
});
$('<td>').css({
'padding': '0.45rem 0.45rem',
'text-align': 'center'
}).append(viewLink).appendTo(row);
var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
$('<td>').text('₹ ' + assetamt).css({
'padding': '0.45rem 0.45rem',
'text-align': 'center'
}).appendTo(row);
$('<td>').text(detail.quantity).css({
'padding': '0.45rem 0.45rem',
'text-align': 'center'
}).appendTo(row);
var amount = detail.assetAmount;
totalAmount += amount;
$('<td>').text('₹ ' + amount.toFixed(2)).css({
'padding': '0.45rem 0.45rem',
'text-align': 'right'
}).appendTo(row);
});
// Add row for total amount
var totalRow = $('<tr>').appendTo(tbody);
$('<td>').attr('colspan', '5').text('Total Amount').css({
'padding': '0.45rem 0.45rem',
'font-weight': 'bold',
'background-color': '#f2f2f2'
}).appendTo(totalRow);
$('<td>').text('₹ ' + totalAmount.toFixed(2)).css({
'padding': '0.45rem 0.45rem',
'text-align': 'right'
}).appendTo(totalRow);
$("#td_dam_amt").html('₹ ' + totalAmount.toFixed(2));
}
// Append the table elements to the container div
table.append(thead, tbody);
tableResponsiveDiv.append(table);
damageFieldContainer.append(tableResponsiveDiv);
var temp_total = parseFloat($("#td_settel_amt").html());
var settleAmount = temp_total - totalAmount;
var refundStatus = data.refundStatus;
if (settleAmount < 0) {
// console.log(settleAmount);
$("#td_settel_amt").html(0.00);
$("#pendingcolumn").show();
$("#td_pending_amt").html('₹ ' + Math.abs(settleAmount).toFixed(2));
$("#td_pending_amt").css("color", "red");
} else {
$("#td_settel_amt").html('₹ ' + settleAmount.toFixed(2));
$("#pendingcolumn").hide();
$("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
}
if (data.settlement.challonamount) {
// Show the table containing ddnumber and challan image
var challonTableContainer = $("#challonTableContainer"); // Assuming you have a div with this ID for the table
challonTableContainer.empty(); // Clear any existing content
challonTableContainer.show(); // Ensure the container is visible
var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
// Create table with similar classes and styles to the modal table
var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '100%', 'border-color': 'black', 'border-top-color': 'white'});
var thead = $('<thead>').addClass('thead-light');
var tbody = $('<tbody>');
var headerRow = $('<tr>').appendTo(thead);
$('<th>').attr('colspan', '6').text('Challan Details').css({
'padding': '0.45rem 0.45rem',
'background-color': '#f2f2f2',
'font-weight': 'bold',
'color': 'black',
}).appendTo(headerRow);
var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
//$('<th>').text('DD Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
//$('<th>').text('DD Date').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
$('<th>').text('Challan Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
$('<th>').text('Challan Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
$('<th>').text('Challan Image').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
var row = $('<tr>').appendTo(tbody);
//$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
//$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
$('<td>').text(data.settlement.challonnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
$('<td>').text(data.settlement.challonamount).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
//$('<td>').text(data.settlement.dddate).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
var challanImgLink = $('<a>').attr('href', 'javascript:void(0)').text('View Image').on('click', function () {
showchallonimage(data.settlement.challon);
});
$('<td>').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).append(challanImgLink).appendTo(row);
table.append(thead, tbody);
challonTableContainer.append(table);
// Hide all buttons
$("#generatechallon").hide();
$("#uploadchallon").hide();
$("#approvebutton").prop("disabled", false);
} else {
// Hide the ddTableContainer if ddnumber is not present
$("#challonTableContainer").hide();
}
if (data.settlement.ddnumber) {
// Show the table containing ddnumber and challan image
var ddTableContainer = $("#ddTableContainer"); // Assuming you have a div with this ID for the table
ddTableContainer.empty(); // Clear any existing content
ddTableContainer.show(); // Ensure the container is visible
var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
// Create table with similar classes and styles to the modal table
var table = $('<table>').addClass('table table-bordered table-striped').css({'width': '100%', 'border-color': 'black', 'border-top-color': 'white'});
var thead = $('<thead>').addClass('thead-light');
var tbody = $('<tbody>');
var headerRow = $('<tr>').appendTo(thead);
$('<th>').attr('colspan', '6').text('DD Details').css({
'padding': '0.45rem 0.45rem',
'background-color': '#f2f2f2',
'font-weight': 'bold',
'color': 'black',
}).appendTo(headerRow);
var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
$('<th>').text('DD Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
$('<th>').text('DD Amount').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
$('<th>').text('DD Date').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
var row = $('<tr>').appendTo(tbody);
$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
$('<td>').text(data.settlement.ddamount).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
$('<td>').text(data.settlement.dddate).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
table.append(thead, tbody);
ddTableContainer.append(table);
// Hide all buttons
$("#generatechallon").hide();
$("#uploadchallon").hide();
$("#approvebutton").prop("disabled", false);
} else {
// Hide the ddTableContainer if ddnumber is not present
$("#ddTableContainer").hide();
}
}
function showDamageImage(damageImageUrl) {
document.getElementById('filePreview').src = damageImageUrl;
$('#fileModal').modal('show');
}
function showchallonimage(challanImgLink){
document.getElementById('filePreview').src = challanImgLink;
$('#fileModal').modal('show');
}
function showddImage(ddImageUrl) {
document.getElementById('filePreview').src = ddImageUrl;
$('#fileModal').modal('show');
}
function openFileModal(fileURL) {
$('#filePreview').attr('src', fileURL);
$('#fileModal').modal('show');
}
function initiate() {
let id = document.getElementById("settlementid").value;
let refundAmount = document.getElementById("refundAmount").value;
// console.log(refundAmount);
Swal.fire({
title: 'Do you want to Initiate this Settlement?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: 'YES',
denyButtonText: `NO`,
}).then((result) => {
if (result.isConfirmed) {
let status = (refundAmount > 0) ? 'INITIATED' : 'COMPLETED';
// console.log(status);
$.ajax({
type: "POST",
url: '/victoriahallbooking/admin/api/updateInitiatedSettlementStatus/' + id,
data: {
'status': status,
'comments': 'Admin Initiated',
'settlementId': id
},
success: function (data, textStatus, xhr) {
if (xhr.status === 200) {
if (status === 'COMPLETED') {
Swal.fire(
'Process Completed',
'Settlement process completed successfully for ID: ' + id,
'success'
).then(() => {
location.reload();
});
} else {
Swal.fire(
'Done',
'Successfully Initiated to the ID:' + id,
'success'
).then(() => {
location.reload();
});
}
} else {
Swal.fire(
'Error',
'Failed to initiate the settlement',
'error'
);
}
},
error: function (xhr, textStatus, errorThrown) {
Swal.fire(
'Error',
'Failed to initiate the settlement',
'error'
);
}
});
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info');
}
});
}
function approvedcancelledbooking(bookingId) {
$.ajax({
type: "GET",
url: '/victoriahallbooking/api/officer/getBookingDetails',
data: {
'bookingsId': bookingId
},
success: function (x) {
// console.log(x);
showApprovedcancelledbookingDetails(x);
}
});
}
function showApprovedcancelledbookingDetails(list) {
$('#approvedcancelledBookingForm').modal({
backdrop: 'static',
keyboard: false
});
$('#approvedcancelledBookingForm').modal('show');
document.getElementById("username").innerHTML = list.users.name;
document.getElementById("mobileno").innerHTML = list.users.mobileNo;
document.getElementById("usertype").innerHTML = list.users.usertype;
document.getElementById("booksId").value = list.bookingId;
var userDetails = list.users;
var userDetailsString =
userDetails.doorNo + ", " +
userDetails.street + ", " +
userDetails.area + ", " +
userDetails.location + "- " +
userDetails.pinCode;
document.getElementById("useraddress").innerHTML = userDetailsString;
document.getElementById("hallname").innerHTML = list.hallDetails.hallName;
var hallDetails = list.hallDetails;
var hallDetailsString =
hallDetails.doorNo + ", " +
hallDetails.street + ", " +
hallDetails.area + ", " +
hallDetails.city + "- " +
hallDetails.pinCode;
document.getElementById("halladdress").innerHTML = hallDetailsString;
document.getElementById("caretakername").innerHTML = list.hallDetails.hallInchargeName;
document.getElementById("caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
document.getElementById("bookingDate").innerHTML = list.bookingDate;
document.getElementById("depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
document.getElementById("hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
document.getElementById("totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
var gstcl = (list.hallAmount * (list.hallDetails.gst/100));
var formattedGst = gstcl.toFixed(2);
document.getElementById("gst").innerHTML = formattedGst;
document.getElementById("startDate").innerHTML = list.startDate;
document.getElementById("endDate").innerHTML = list.endDate;
document.getElementById("bookid").innerHTML = list.bookingId;
function getTimeSlot(slotValue) {
// console.log("Slot Value in getTimeSlot function:", slotValue);
var timeSlot;
var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
if (trimmedSlotValue === '1') {
timeSlot = 'Morning';
} else if (trimmedSlotValue === '2') {
timeSlot = 'Evening';
} else {
timeSlot = 'Unknown';
}
// console.log("Time Slot:", timeSlot);
return timeSlot;
}
document.getElementById("startingSlot").innerHTML = getTimeSlot(list.startingSlot);
document.getElementById("endingSlot").innerHTML = getTimeSlot(list.endingSlot);
document.getElementById("bookingStatus").innerHTML = list.bookingStatus;
document.getElementById("transactionId").innerHTML = list.payments.transactionId;
document.getElementById("payamountReceived").innerHTML = '₹ ' + list.payments.amountReceived;
document.getElementById("paymentStatus").innerHTML = list.payments.paymentStatus;
showReasonDocuments(list);
}
function showReasonDocuments(list) {
$.ajax({
type: "GET",
url: '/victoriahallbooking/api/officer/getReasonByName',
data: {
'reasonName': list.reason
},
success: function (x) {
// console.log(x);
showReasonWithDocument(x, list);
}
});
}
// Display booking documents
function showReasonWithDocument(reasonData, list) {
var reasonDocumentData = reasonData.reasonDocumentMasterList;
var bookingDocumentsList = list.bookingDocumentsList;
const reasonFieldsContainer = $('#documents');
reasonFieldsContainer.empty();
// Create a responsive table container
var tableResponsiveDiv = $('<div>').addClass('table-responsive');
// Create the table with Bootstrap classes and custom styles
var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
'width': '100%',
'height': 'auto',
'border': '1px solid black'
});
// Create the table header (thead)
var thead = $('<thead>').appendTo(table);
var headerRow = $('<tr>').appendTo(thead);
$('<th>').attr('colspan', '3').text('Document Details').css({
'color': 'black',
'font-weight': 'bold',
'background-color': '#f2f2f2',
'padding': '0.45rem 0.45rem'
}).appendTo(headerRow);
// Create header row for columns
var columnHeadersRow = $('<tr>').appendTo(thead);
$('<th>').text('S.No').appendTo(columnHeadersRow);
$('<th>').text('Required Info').appendTo(columnHeadersRow);
$('<th>').text('Required Documents').appendTo(columnHeadersRow);
// Create the table body (tbody)
var tbody = $('<tbody>').appendTo(table);
// Iterate through the documents list and populate rows
for (var i = 0; i < bookingDocumentsList.length; i++) {
(function (index) {
var row = $('<tr>').appendTo(tbody);
$('<td>').text(index + 1).appendTo(row);
$('<td>').text(reasonDocumentData[index].fieldName + ': ' + bookingDocumentsList[index].name).appendTo(row);
// Create a link to view document image
var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
});
$('<td>').append(viewLink).appendTo(row);
})(i);
}
// Append table to the responsive container
tableResponsiveDiv.append(table);
// Append table to the container in the DOM
reasonFieldsContainer.append(tableResponsiveDiv);
}
function showDocumentImage(fileURL) {
//console.log(fileURL);
openFileModal(fileURL);
}
// Event delegation for dynamically added elements
$(document).on('click', '.view-document', function () {
const fileURL = $(this).data('url');
openFileModal(fileURL);
});
function initiaterefund() {
let id = document.getElementById("booksId").value;
Swal.fire({
title: 'Do you want to Initiate this Settlement ?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: 'YES',
denyButtonText: 'NO',
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
$.ajax({
type: "POST",
url: '/victoriahallbooking/api/officer/approveCancelledBookingRefund/' + id,
data: {
'status': 'INITIATED',
},
success: function (data, textStatus, xhr) {
if (xhr.status === 200) { // Check if the response status is OK
Swal.fire(
'Done',
'Successfully Initiated to the ID:' + id,
'success'
).then(() => {
location.reload();
});
} else {
Swal.fire(
'Error',
'Failed to initiate the refund',
'error'
);
}
},
error: function (xhr, textStatus, errorThrown) {
Swal.fire(
'Error',
'Failed to initiate the refund',
'error'
);
}
});
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
});
}
</script>
</body>
</html>