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.
 
 
 
 
 

1732 lines
73 KiB

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/head-sm :: head}"></head>
<style>
.nav-tabs .nav-link.active {
background: #1a73e8;
color: #fff !important;
border-color: #1a73e8;
border-radius: 6px 6px 0 0;
}
.nav-tabs .nav-link {
color: #444;
font-weight: 500;
cursor: pointer;
}
.tab-badge {
background: #e8f0fe;
color: #1a73e8;
border-radius: 10px;
padding: 1px 8px;
font-size: 12px;
font-weight: 700;
margin-left: 4px;
}
.nav-tabs .nav-link.active .tab-badge {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
.table-responsive {
overflow-x: auto;
}
.btn-sendmail {
background: #1a73e8;
color: #fff;
border: none;
border-radius: 4px;
padding: 4px 12px;
cursor: pointer;
font-size: 12px;
}
.btn-sendmail:hover {
background: #1558b0;
}
.btn-sendmail:disabled,
.btn-sendmail[disabled] {
background: #9ca3af;
cursor: not-allowed;
opacity: 0.65;
}
.btn-viewdetails {
background: #f59e0b;
color: #fff;
border: none;
border-radius: 4px;
padding: 4px 12px;
cursor: pointer;
font-size: 12px;
margin-right: 4px;
}
.btn-viewdetails:hover {
background: #b45309;
}
.badge-cancelled {
background: #dc2626;
color: #fff;
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
}
.badge-rejected {
background: #7c3aed;
color: #fff;
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
}
.badge-approved {
background: #16a34a;
color: #fff;
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
}
.badge-other {
background: #64748b;
color: #fff;
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
}
.not-initiated {
color: #dc2626;
font-style: italic;
font-size: 12px;
}
/* Draft mail preview */
#draftMailBody {
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 16px;
font-family: Arial, sans-serif;
font-size: 14px;
white-space: pre-wrap;
line-height: 1.6;
}
.mail-header-row {
margin-bottom: 6px;
font-size: 13px;
}
.mail-header-row strong {
display: inline-block;
width: 50px;
color: #475569;
}
/* DataTables UI layout enhancements */
.dataTables_wrapper .dataTables_filter label {
font-weight: 500;
}
.dataTables_wrapper .dataTables_filter input {
margin-left: 0.5em;
display: inline-block;
width: auto;
border: 1px solid #ced4da;
border-radius: 4px;
padding: 4px 8px;
}
.dataTables_wrapper .dt-buttons {
margin-bottom: 8px;
}
.dataTables_wrapper .dt-buttons .btn {
margin-right: 4px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 4px 10px;
margin-left: 2px;
border-radius: 4px;
}
.card-body table {
width: 100% !important;
}
.table {
width: 100% !important;
}
</style>
<body>
<!-- Page Container -->
<div id="page-container"
class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
<!-- Side Overlay aside (right)-->
<aside th:replace="~{fragments/aside-right :: aside}"></aside>
<!-- END Side Overlay (right)-->
<!-- Sidebar Nav-->
<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
<!-- END Sidebar -->
<!-- Header -->
<header th:replace="~{fragments/header-sm :: header}"></header>
<!-- END Header -->
<!-- Main Container -->
<main id="main-container">
<div class="content">
<div class="block block-rounded">
<div class="block-header block-header-default">
<h3 class="block-title">6 Months Old Transaction Details</h3>
</div>
<div class="block-content">
<!-- ── TABS ───────────────────────────────────────────── -->
<ul class="nav nav-tabs mb-0" id="sixMonthTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tab-sixmonth-lnk" data-target="#tab-sixmonth" role="tab"
aria-controls="tab-sixmonth" aria-selected="true">
6 Month Old Bookings
<span class="tab-badge"
th:text="${sixMonthOldBookings != null ? #lists.size(sixMonthOldBookings) : 0}">0</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="tab-cancelled-lnk" data-target="#tab-cancelled" role="tab"
aria-controls="tab-cancelled" aria-selected="false">
Cancelled Bookings
<span class="tab-badge"
th:text="${cancelledBookings != null ? #lists.size(cancelledBookings) : 0}">0</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="tab-rejected-lnk" data-target="#tab-rejected" role="tab"
aria-controls="tab-rejected" aria-selected="false">
Rejected Bookings
<span class="tab-badge"
th:text="${rejectedBookings != null ? #lists.size(rejectedBookings) : 0}">0</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="tab-mailsent-lnk" data-target="#tab-mailsent" role="tab"
aria-controls="tab-mailsent" aria-selected="false">
Mail Sent Bookings
<span class="tab-badge"
th:text="${mailSentBookings != null ? #lists.size(mailSentBookings) : 0}">0</span>
</a>
</li>
</ul>
<div class="tab-content border border-top-0 p-3" id="sixMonthTabContent">
<!-- ══════════════════════════════════════════════════
TAB 1 – 6 Month Old Bookings (non-cancelled/rejected)
══════════════════════════════════════════════════ -->
<div class="tab-pane fade show active" id="tab-sixmonth" role="tabpanel"
aria-labelledby="tab-sixmonth-lnk">
<div class="table-responsive">
<table
class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
id="tbl-sixmonth">
<thead class="thead-light">
<tr>
<th>S.No</th>
<th>Zone</th>
<th>Division</th>
<th>Hall Name</th>
<th>Booking Id</th>
<th>Booking Date</th>
<th>Event Date (Start – End)</th>
<th>Settlement Raised Date</th>
<th>Refund Amount (₹)</th>
<th>Refund Status</th>
<th>Booking Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="row, rowStat : ${sixMonthOldBookings}">
<td class="text-center" th:text="${rowStat.index + 1}"></td>
<td th:text="${row['zone'] != null ? row['zone'] : ''}"></td>
<td th:text="${row['division'] != null ? row['division'] : ''}"></td>
<td th:text="${row['hall_name'] != null ? row['hall_name'] : ''}"></td>
<td th:text="${row['booking_id'] != null ? row['booking_id'] : ''}">
</td>
<td class="text-center"
th:text="${row['booking_date'] != null ? row['booking_date'] : ''}">
</td>
<td class="text-center">
<span
th:text="${row['event_start_date'] != null ? row['event_start_date'] : ''}"></span>
<span> – </span>
<span
th:text="${row['event_end_date'] != null ? row['event_end_date'] : ''}"></span>
</td>
<!-- Settlement Raised Date: N/A if no settlement -->
<td class="text-center">
<span th:if="${row['settlement_raised_date'] != null}"
th:text="${row['settlement_raised_date']}"></span>
<span th:if="${row['settlement_raised_date'] == null}"
class="not-initiated">Settlement Not Initiated</span>
</td>
<!-- Refund Amount: from settlement.refunded_amount -->
<td class="text-right">
<span th:if="${row['refunded_amount'] != null}"
th:text="${'₹ ' + row['refunded_amount']}"></span>
<span th:if="${row['refunded_amount'] == null}"
class="not-initiated">—</span>
</td>
<td class="text-center"
th:text="${row['refund_status'] != null ? row['refund_status'] : ''}">
</td>
<td class="text-center">
<span
th:class="${row['booking_status'] == 'CANCELED' || row['booking_status'] == 'CANCELLED' ? 'badge-cancelled' : (row['booking_status'] == 'REJECTED' ? 'badge-rejected' : (row['booking_status'] == 'APPROVED' ? 'badge-approved' : 'badge-other'))}"
th:text="${row['booking_status'] != null ? row['booking_status'] : ''}"></span>
</td>
<td class="text-center">
<!-- View Details: calls getSettlementList if settlement exists -->
<button th:if="${row['settlement_id'] != null}"
class="btn-viewdetails btn-view-settlement"
th:data-settlement-id="${row['settlement_id']}">
View Details
</button><br>
<span th:if="${row['settlement_id'] == null}"
class="not-initiated d-block mb-1">Settlement Not
Initiated</span></br>
<!-- Send Mail: disabled when settlement_raised_date is null -->
<!--<button class="btn-sendmail btn-open-mail"
th:disabled="${row['settlement_raised_date'] == null || row['refunded_amount'] == 0.0}"
th:title="${row['settlement_raised_date'] == null ?
'Send Mail is available only after settlement is raised' :
(row['refunded_amount'] == 0.0 ?
'Send Mail is available only for refund minimum of 1 rupee(s).' :
'Send refund mail')}" th:data-booking-id="${row['booking_id']}"
th:data-booking-status="${row['booking_status']}"
th:data-transaction-id="${row['txansaction_id']}"
th:data-tpsl-id="${row['tpsl_txn_id']}"
th:data-transaction-date="${row['transaction_date']}"
th:data-refund-amount="${row['refunded_amount'] != null ? row['refunded_amount'] : 0}">
Send Mail
</button>-->
</td>
<!-- Empty table state handled natively by DataTables -->
</tbody>
</table>
</div>
</div><!-- /tab-sixmonth -->
<!-- ══════════════════════════════════════════════════
TAB 2 – Cancelled Bookings
Refund Amount = deposit_amount
No Settlement Raised Date column
══════════════════════════════════════════════════ -->
<div class="tab-pane fade" id="tab-cancelled" role="tabpanel"
aria-labelledby="tab-cancelled-lnk">
<div class="table-responsive">
<table
class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
id="tbl-cancelled">
<thead class="thead-light">
<tr>
<th>S.No</th>
<th>Zone</th>
<th>Division</th>
<th>Hall Name</th>
<th>Booking Id</th>
<th>Booking Date</th>
<th>Event Date (Start – End)</th>
<th>Refund Amount (₹)</th>
<th>Booking Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="row, rowStat : ${cancelledBookings}">
<td class="text-center" th:text="${rowStat.index + 1}"></td>
<td th:text="${row['zone'] != null ? row['zone'] : ''}"></td>
<td th:text="${row['division'] != null ? row['division'] : ''}"></td>
<td th:text="${row['hall_name'] != null ? row['hall_name'] : ''}"></td>
<td th:text="${row['booking_id'] != null ? row['booking_id'] : ''}">
</td>
<td class="text-center"
th:text="${row['booking_date'] != null ? row['booking_date'] : ''}">
</td>
<td class="text-center">
<span
th:text="${row['event_start_date'] != null ? row['event_start_date'] : ''}"></span>
<span> – </span>
<span
th:text="${row['event_end_date'] != null ? row['event_end_date'] : ''}"></span>
</td>
<td class="text-right"
th:text="${row['refund_amount'] != null ? '₹ ' + row['refund_amount'] : '—'}">
</td>
<td class="text-center">
<span class="badge-cancelled"
th:text="${row['booking_status'] != null ? row['booking_status'] : ''}"></span>
</td>
<td class="text-center">
<!-- View Details: Cancelled bookings hide EB & Settlement sections -->
<button class="btn-viewdetails btn-view-booking-status"
th:data-booking-id="${row['booking_id']}"
th:data-booking-status="${row['booking_status']}">
View Details
</button><br><br>
<!--<button class="btn-sendmail btn-open-mail"
th:data-booking-id="${row['booking_id']}"
th:data-booking-status="${row['booking_status']}"
th:data-transaction-id="${row['txansaction_id']}"
th:data-tpsl-id="${row['tpsl_txn_id']}"
th:data-transaction-date="${row['transaction_date']}"
th:data-refund-amount="${row['refund_amount'] != null ? row['refund_amount'] : 0}">
Send Mail
</button>-->
</td>
<!-- Empty table state handled natively by DataTables -->
</tbody>
</table>
</div>
</div><!-- /tab-cancelled -->
<!-- ══════════════════════════════════════════════════
TAB 3 – Rejected Bookings
Refund Amount = amount_received (full amount)
No Settlement Raised Date column
══════════════════════════════════════════════════ -->
<div class="tab-pane fade" id="tab-rejected" role="tabpanel"
aria-labelledby="tab-rejected-lnk">
<div class="table-responsive">
<table
class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
id="tbl-rejected">
<thead class="thead-light">
<tr>
<th>S.No</th>
<th>Zone</th>
<th>Division</th>
<th>Hall Name</th>
<th>Booking Id</th>
<th>Booking Date</th>
<th>Event Date (Start – End)</th>
<th>Refund Amount (₹)</th>
<th>Booking Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="row, rowStat : ${rejectedBookings}">
<td class="text-center" th:text="${rowStat.index + 1}"></td>
<td th:text="${row['zone'] != null ? row['zone'] : ''}"></td>
<td th:text="${row['division'] != null ? row['division'] : ''}"></td>
<td th:text="${row['hall_name'] != null ? row['hall_name'] : ''}"></td>
<td th:text="${row['booking_id'] != null ? row['booking_id'] : ''}">
</td>
<td class="text-center"
th:text="${row['booking_date'] != null ? row['booking_date'] : ''}">
</td>
<td class="text-center">
<span
th:text="${row['event_start_date'] != null ? row['event_start_date'] : ''}"></span>
<span> – </span>
<span
th:text="${row['event_end_date'] != null ? row['event_end_date'] : ''}"></span>
</td>
<td class="text-right"
th:text="${row['refund_amount'] != null ? '₹ ' + row['refund_amount'] : '—'}">
</td>
<td class="text-center">
<span class="badge-rejected"
th:text="${row['booking_status'] != null ? row['booking_status'] : ''}"></span>
</td>
<td class="text-center">
<!-- View Details: Rejected bookings hide EB & Settlement sections -->
<button class="btn-viewdetails btn-view-booking-status"
th:data-booking-id="${row['booking_id']}"
th:data-booking-status="${row['booking_status']}">
View Details
</button><br><br>
<!--<button class="btn-sendmail btn-open-mail"
th:data-booking-id="${row['booking_id']}"
th:data-booking-status="${row['booking_status']}"
th:data-transaction-id="${row['txansaction_id']}"
th:data-tpsl-id="${row['tpsl_txn_id']}"
th:data-transaction-date="${row['transaction_date']}"
th:data-refund-amount="${row['refund_amount'] != null ? row['refund_amount'] : 0}">
Send Mail
</button>-->
</td>
<!-- Empty table state handled natively by DataTables -->
</tbody>
</table>
</div>
</div><!-- /tab-rejected -->
<!-- ══════════════════════════════════════════════════
TAB 4 – Mail Sent Bookings
══════════════════════════════════════════════════ -->
<div class="tab-pane fade" id="tab-mailsent" role="tabpanel"
aria-labelledby="tab-mailsent-lnk">
<div class="table-responsive">
<table
class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
id="tbl-mailsent">
<thead class="thead-light">
<tr>
<th>S.No</th>
<th>Zone</th>
<th>Division</th>
<th>Hall Name</th>
<th>Booking Id</th>
<th>Booking Date</th>
<th>Event Date (Start – End)</th>
<th>Booking Status</th>
<th>Transaction ID</th>
<th>TPSL ID</th>
<th>Mail Sent Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="row, rowStat : ${mailSentBookings}">
<td class="text-center" th:text="${rowStat.index + 1}"></td>
<td th:text="${row['zone'] != null ? row['zone'] : ''}"></td>
<td th:text="${row['division'] != null ? row['division'] : ''}"></td>
<td th:text="${row['hall_name'] != null ? row['hall_name'] : ''}"></td>
<td class="text-center"
th:text="${row['booking_id'] != null ? row['booking_id'] : ''}">
</td>
<td class="text-center"
th:text="${row['booking_date'] != null ? row['booking_date'] : ''}">
</td>
<td class="text-center">
<span
th:text="${row['event_start_date'] != null ? row['event_start_date'] : ''}"></span>
<span> – </span>
<span
th:text="${row['event_end_date'] != null ? row['event_end_date'] : ''}"></span>
</td>
<td class="text-center">
<span
th:class="${row['booking_status'] == 'CANCELED' || row['booking_status'] == 'CANCELLED' ? 'badge-cancelled' : (row['booking_status'] == 'REJECTED' ? 'badge-rejected' : (row['booking_status'] == 'APPROVED' ? 'badge-approved' : 'badge-other'))}"
th:text="${row['booking_status'] != null ? row['booking_status'] : ''}"></span>
</td>
<td class="text-center"
th:text="${row['txansaction_id'] != null ? row['txansaction_id'] : ''}">
</td>
<td class="text-center"
th:text="${row['tpsl_txn_id'] != null ? row['tpsl_txn_id'] : ''}">
</td>
<td class="text-center"
th:text="${row['mail_sent_date'] != null ? row['mail_sent_date'] : ''}">
</td>
<td class="text-center">
<!-- View Details: route by booking_status (APPROVED→settlement modal, CANCELLED/REJECTED→booking modal) -->
<button class="btn-viewdetails btn-view-mailsent"
th:data-booking-id="${row['booking_id']}"
th:data-booking-status="${row['booking_status']}"
th:data-settlement-id="${row['settlement_id']}">
View Details
</button><br><br>
<!-- Update Refund Details: opens refund update modal (calls /updateApprovedSettlementStatus) -->
<!--<button class="btn-sendmail btn-update-refund"
th:if="${row['booking_status'] != 'COMPLETED'}"
th:data-booking-id="${row['booking_id']}"
th:data-booking-status="${row['booking_status']}"
th:data-settlement-id="${row['settlement_id']}">
Update Refund Details
</button>-->
</td>
<!-- Empty table state handled natively by DataTables -->
</tbody>
</table>
</div>
</div><!-- /tab-mailsent -->
</div><!-- /tab-content -->
</div><!-- /block-content -->
</div><!-- /block -->
</div><!-- /content -->
</main>
<!-- END Main Container -->
<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 />
<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="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: #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="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 id="ebDetailsSection" 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: #f2f2f2;">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 colspan="3" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_endingSlot"></td>
</tr>
</table>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" id="ebDetailsSection">
<div class="card-body">
<table>
<tr>
<th colspan="6" style="background-color: #f2f2f2;">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;"
id="td_EBNumber">
</td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount Per
Unit:
</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_ebamountperunit"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">MF DT Unit:
</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_mfDtUnit"></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;"
id="td_startingReading"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">END Reading:
</th>
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_endingReading"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">Unit Consumed:
</th>
<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
id="td_usedunit"></td>
</tr>
<tr>
<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
id="td_electricityamount"></td>
</tr>
</table>
</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="td_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="td_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="td_paymentStatus"></td>
</tr>
</table>
</div>
</div>
<div id="damageDetails" style="margin-bottom: -17px;"></div>
<div id="amountRefundSection" class="col-md-12 col-lg-12 col-sm-12">
<div class="card-body">
<table>
<tr>
<th colspan="2" style="background-color: #f2f2f2;font-weight: normal">
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-secondary"
data-bs-dismiss="modal">Close</button>
<!--<button type="submit" class="btn btn-sm btn-primary">Reject</button>-->
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="updateRefundModal" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="updateRefundModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header" style="background:#1a73e8; color:#fff;">
<h5 class="modal-title" id="updateRefundModalLabel">
<i class="fa fa-refresh mr-2"></i> Update Refund Details
</h5>
<button type="button" class="close text-black" onclick="$('#updateRefundModal').modal('hide')"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="mb-3">
<span class="font-weight-bold"></span>
<span id="ur_bookingId" style="color:#1a73e8; font-weight:bold;"></span>
&nbsp;&nbsp;
<span class="font-weight-bold">Booking Status: </span>
<span id="ur_bookingStatus" class="badge badge-secondary"
style="color:black; font-weight:bold;"></span>
</div>
<input type="hidden" id="ur_settlementId">
<!-- Refund Status Selection -->
<div class="form-group">
<label for="ur_status"><strong>Refund Status <span
class="text-danger">*</span></strong></label>
<select class="form-control" id="ur_status">
<option value="">-- Select Status --</option>
<option value="COMPLETED">COMPLETED</option>
<!-- <option value="CLOSED">CLOSED</option> -->
</select>
</div>
<!-- Refund Date -->
<div class="form-group">
<label for="ur_refundDate">
<strong>Refund Date <span class="text-danger">*</span></strong>
</label>
<input type="date" class="form-control" id="ur_refundDate" onkeydown="return false;"
onpaste="return false;" autocomplete="off" onclick="this.showPicker();" required>
</div>
<!-- ARN Number -->
<div class="form-group">
<label for="ur_arnNumber"><strong>ARN Number <span
class="text-danger">*</span></strong></label>
<input type="text" class="form-control" id="ur_arnNumber" placeholder="Enter ARN Number..."
maxlength="15" minlength="12" pattern="[0-9]{12,15}" inputmode="numeric"
oninput="this.value = this.value.replace(/\D/g, '')" required>
</div>
<!-- Comments -->
<div class="form-group">
<label for="ur_comments"><strong>Comments <span
class="text-danger">*</span></strong></label>
<textarea class="form-control" id="ur_comments" rows="3"
placeholder="Enter comments..."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="$('#updateRefundModal').modal('hide')">
Cancel
</button>
<button type="button" class="btn btn-primary" id="btn-submit-refund"
onclick="submitRefundUpdate()">
Update Refund Status
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="draftMailModal" data-backdrop="static" tabindex="-1" role="dialog"
aria-labelledby="draftMailModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background:#1a73e8; color:#fff;">
<h5 class="modal-title" id="draftMailModalLabel">
<i class="fa fa-envelope mr-2"></i> Draft Mail Preview
</h5>
<button type="button" class="close text-black" onclick="$('#draftMailModal').modal('hide')"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Mail Header Fields -->
<div class="mail-header-row"><strong>From:</strong>
communityhallsupport@chennaicorporation.gov.in</div>
<div class="mail-header-row">
<strong>To:</strong>
pgsupport@mail.in.worldline-solutions.com, ranjithkumar@federal.bank.in,
megha.mattamana@federal.bank.in
</div>
<div class="mail-header-row">
<strong>CC:</strong>
arohqcc@gmail.com, it@chennaicorporation.gov.in
</div>
<div class="mail-header-row"><strong>Sub:</strong>Refund Status Update Request
&ndash; Community Hall Booking</div>
<hr class="my-2">
<!-- Mail Body -->
<div id="draftMailBody"></div>
<!-- Hidden fields to carry data through to confirm step -->
<input type="hidden" id="dm_bookingId">
<input type="hidden" id="dm_bookingStatus">
<input type="hidden" id="dm_transactionId">
<input type="hidden" id="dm_tpslId">
<input type="hidden" id="dm_transactionDate">
<input type="hidden" id="dm_refundAmount">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="$('#draftMailModal').modal('hide')">
Close
</button>
<button type="button" class="btn btn-primary" id="btn-confirm-mail" onclick="confirmMailSent()">
Confirm &amp; Mark as Mail Sent
</button>
</div>
</div>
</div>
</div>
<!-- File Preview Modal (for settlement images) -->
<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">File Preview</h5>
<button type="button" class="close" data-dismiss="modal"><span>&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-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer th:replace="~{fragments/footer2 :: footer}"></footer>
</div>
<!-- END Page Container -->
<div th:replace="~{fragments/resetpassword :: div}"></div>
<script th:replace="~{fragments/loginscript :: script}"></script>
<script th:inline="none">
// ─────────────────────────────────────────────────────────────────────
// DataTable initialisation & Tab Switch Handlers
// ─────────────────────────────────────────────────────────────────────
$(document).ready(function () {
var dtButtons = [
{ extend: 'pageLength', className: 'btn btn-primary' },
{ extend: 'copyHtml5', text: 'Copy', className: 'btn btn-primary' },
{ extend: 'excelHtml5', text: 'Excel', className: 'btn btn-primary' },
{ extend: 'csvHtml5', text: 'CSV', className: 'btn btn-primary' },
{ extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-primary' }
];
var dtOpts = {
dom: "<'row mb-3'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6 text-right'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row mt-3'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 text-right'p>>",
buttons: dtButtons,
columnDefs: [{ targets: 'no-sort', orderable: false }],
lengthMenu: [[10, 25, 50, 100, 200, -1], ['10 rows', '25 rows', '50 rows', '100 rows', '200 rows', 'Show all']],
responsive: true,
searching: true,
autoWidth: false,
retrieve: true
};
// Initialize DataTables for all 4 tabs with full Bootstrap UI design layout
$('#tbl-sixmonth').DataTable(dtOpts);
$('#tbl-cancelled').DataTable(dtOpts);
$('#tbl-rejected').DataTable(dtOpts);
$('#tbl-mailsent').DataTable(dtOpts);
// Direct tab switching in jQuery to prevent Bootstrap tab issues and base href routing
$('#sixMonthTab a').on('click', function (e) {
e.preventDefault();
var target = $(this).attr('data-target') || $(this).attr('href');
if (target) {
$('#sixMonthTab a').removeClass('active');
$(this).addClass('active');
$('#sixMonthTabContent .tab-pane').removeClass('show active');
$(target).addClass('show active');
if ($.fn.dataTable) {
$(target).find('table').each(function () {
if ($.fn.dataTable.isDataTable(this)) {
$(this).DataTable().columns.adjust().responsive.recalc();
}
});
}
}
});
// Delegated click handlers for Action buttons
$(document).on('click', '.btn-view-settlement', function () {
var settlementId = $(this).attr('data-settlement-id');
if (settlementId) {
viewSettlement(settlementId);
}
});
// Tab 2 & 3: Cancelled/Rejected – view booking details (hides EB & Settlement sections)
$(document).on('click', '.btn-view-booking-status', function () {
var bookingId = $(this).attr('data-booking-id');
var bookingStatus = $(this).attr('data-booking-status');
if (bookingId) {
viewBookingDetailsWithStatus(bookingId, bookingStatus);
}
});
// Tab 4: Mail Sent – route View Details by booking status
$(document).on('click', '.btn-view-mailsent', function () {
var bookingId = $(this).attr('data-booking-id');
var bookingStatus = $(this).attr('data-booking-status');
var settlementId = $(this).attr('data-settlement-id');
if (bookingStatus === 'APPROVED') {
// APPROVED → show full settlement modal
if (settlementId) {
viewSettlement(settlementId);
} else {
viewBookingDetailsWithStatus(bookingId, bookingStatus);
}
} else {
// CANCELLED/REJECTED → booking modal hiding EB & Settlement
viewBookingDetailsWithStatus(bookingId, bookingStatus);
}
});
// Tab 4: Mail Sent – Update Refund Details button
$(document).on('click', '.btn-update-refund', function () {
var bookingId = $(this).attr('data-booking-id');
var bookingStatus = $(this).attr('data-booking-status');
var settlementId = $(this).attr('data-settlement-id');
var today = new Date().toISOString().split('T')[0];
document.getElementById('ur_refundDate').setAttribute('max', today);
openUpdateRefundModal(bookingId, bookingStatus, settlementId);
});
$(document).on('click', '.btn-open-mail', function () {
var bookingId = $(this).attr('data-booking-id');
var bookingStatus = $(this).attr('data-booking-status');
var transactionId = $(this).attr('data-transaction-id');
var tpslId = $(this).attr('data-tpsl-id');
var transactionDate = $(this).attr('data-transaction-date');
var refundAmount = $(this).attr('data-refund-amount');
openSendMail(bookingId, bookingStatus, transactionId, tpslId, transactionDate, refundAmount);
});
});
function viewSettlement(settlementId) {
if (!settlementId || settlementId === 0) {
Swal.fire('Warning', 'Invalid Settlement ID.', 'warning');
return;
}
$.ajax({
type: 'GET',
url: '/communityhall/api/officer/getSettlementList',
data: { settlementsid: settlementId },
success: function (data) {
// populateSettlementModal(data);
showSettlementInfo(data, false);
showDamageDetails(data);
// settlementModal is not defined; the modal is initiateSettlementForm
},
error: function () {
Swal.fire('Error', 'Failed to fetch settlement details.', 'error');
}
});
}
// showSettlementInfo: populates the settlement/booking modal.
// hideEbAndSettlement = true → hides EB Details and Settlement Details (for Cancelled/Rejected).
function showSettlementInfo(list, hideEbAndSettlement) {
$('#initiateSettlementForm').modal({
backdrop: 'static',
keyboard: false
});
$('#initiateSettlementForm').modal('show');
// Safely set settlement ID (null for cancelled/rejected bookings)
if (list.settlement && list.settlement.settlementId) {
document.getElementById("settlementid").value = list.settlement.settlementId;
} else {
document.getElementById("settlementid").value = '';
}
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);
// EB Details fields – safe null access (cancelled/rejected bookings may have no ebDetails)
var hasEb = list.ebDetails != null;
document.getElementById("td_EBNumber").innerHTML = list.hallDetails ? list.hallDetails.ebNumber : 'N/A';
document.getElementById("td_startingReading").innerHTML = hasEb ? list.ebDetails.startingReading : 'N/A';
document.getElementById("td_endingReading").innerHTML = hasEb ? list.ebDetails.endingReading : 'N/A';
document.getElementById("td_usedunit").innerHTML = hasEb ? list.ebDetails.usedUnit : 'N/A';
document.getElementById("td_ebamountperunit").innerHTML = list.hallDetails ? '₹ ' + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2) : 'N/A';
document.getElementById("td_mfDtUnit").innerHTML = (list.hallDetails && list.hallDetails.mfDtUnit != null) ? '₹ ' + parseFloat(list.hallDetails.mfDtUnit).toFixed(2) : 'N/A';
document.getElementById("td_depositeamountforrefund").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
document.getElementById("td_electricityamount").innerHTML = hasEb ? '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2) : 'N/A';
document.getElementById("td_ebAmount").innerHTML = hasEb ? '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2) : 'N/A';
// Settlement damage – null safe
var hasSett = list.settlement != null;
document.getElementById("td_damage").innerHTML = hasSett ? '₹ ' + parseFloat(list.settlement.damageAmount).toFixed(2) : 'N/A';
document.getElementById("td_transactionId").innerHTML = list.payments && list.payments.transactionId ? list.payments.transactionId : "NA";
// Check if amountReceived is not null, otherwise set to "NA"
document.getElementById("td_payamountReceived").innerHTML = list.payments && list.payments.amountReceived ? '₹ ' + list.payments.amountReceived : "NA";
// Check if paymentStatus is not null, otherwise set to "NA"
document.getElementById("td_paymentStatus").innerHTML = list.payments && list.payments.paymentStatus ? list.payments.paymentStatus : "NA";
// Hide or show EB Details and Settlement sections based on booking status
if (hideEbAndSettlement) {
// Use ID-based hide for the EB Details section and refund section
$('#ebDetailsSection').hide();
$('#amountRefundSection').hide();
$('#damageDetails').hide();
$('#challonTableContainer').hide();
$('#ddTableContainer').hide();
} else {
// Restore visibility for APPROVED bookings (full settlement view)
$('#ebDetailsSection').show();
$('#amountRefundSection').show();
$('#damageDetails').show();
var eb_amt = parseFloat(list.ebDetails ? list.ebDetails.ebAmount : 0).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': '#f2f2f2',
'font-weight': 'bold',
'color': 'black',
}).appendTo(headerRow);
// Create table header row
var columnHeadersRow = $('<tr>').css('background-color', '#f2f2f2').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;
//console.log("temp_total=",temp_total);
//console.log("totalAmount=",totalAmount);
if (settleAmount < 0) {
$("#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 populateSettlementModal(d) {
var html = '<div class="col-12">';
html += '<table class="table table-sm table-bordered">';
html += '<tr><th colspan="4" style="background:#f2f2f2;">User Details</th></tr>';
html += '<tr><th style="font-weight:normal">User Name:</th><td>' + (d.users ? d.users.name : '') + '</td>';
html += '<th style="font-weight:normal">Mobile No:</th><td>' + (d.users ? d.users.mobileNo : '') + '</td></tr>';
html += '<tr><th style="font-weight:normal">User Type:</th><td colspan="3">' + (d.users ? d.users.usertype : '') + '</td></tr>';
html += '<tr><th colspan="4" style="background:#f2f2f2;">Hall Details</th></tr>';
html += '<tr><th style="font-weight:normal">Hall Name:</th><td colspan="3">' + (d.hallDetails ? d.hallDetails.hallName : '') + '</td></tr>';
html += '<tr><th colspan="4" style="background:#f2f2f2;">Booking Details (ID: ' + d.bookingId + ')</th></tr>';
html += '<tr><th style="font-weight:normal">Booking Date:</th><td>' + d.bookingDate + '</td>';
html += '<th style="font-weight:normal">Deposit Amount:</th><td>₹ ' + parseFloat(d.depositAmount).toFixed(2) + '</td></tr>';
html += '<tr><th style="font-weight:normal">Start Date:</th><td>' + d.startDate + '</td>';
html += '<th style="font-weight:normal">End Date:</th><td>' + d.endDate + '</td></tr>';
// Settlement
if (d.settlement) {
html += '<tr><th colspan="4" style="background:#f2f2f2;">Settlement Details</th></tr>';
html += '<tr><th style="font-weight:normal">Refunded Amount:</th><td>₹ ' + parseFloat(d.settlement.refundedAmount || 0).toFixed(2) + '</td>';
html += '<th style="font-weight:normal">Damage Amount:</th><td>₹ ' + parseFloat(d.settlement.damageAmount || 0).toFixed(2) + '</td></tr>';
} else {
html += '<tr><td colspan="4" class="text-danger text-center font-italic">Settlement Not Initiated</td></tr>';
}
html += '</table></div>';
$('#settlementModalBody').html(html);
}
// viewBookingDetailsWithStatus: used by Cancelled, Rejected tabs and Mail Sent (non-APPROVED)
// When status is CANCELLED or REJECTED, hides EB Details and Settlement Details in the modal.
function viewBookingDetailsWithStatus(bookingId, bookingStatus) {
if (!bookingId || bookingId === 0) {
Swal.fire('Warning', 'Invalid Booking ID.', 'warning');
return;
}
var isCancelledOrRejected = (bookingStatus === 'CANCELLED' || bookingStatus === 'CANCELED' || bookingStatus === 'REJECTED');
$.ajax({
type: 'GET',
url: '/communityhall/api/officer/getBookingDetails',
data: { bookingsId: bookingId },
success: function (data) {
showSettlementInfo(data, isCancelledOrRejected);
$('#initiateSettlementForm').modal('show');
},
error: function () {
Swal.fire('Error', 'Failed to fetch booking details.', 'error');
}
});
}
// openUpdateRefundModal: opens the refund details update modal for Mail Sent tab.
// For APPROVED bookings → settlementId is used as identifier.
// For CANCELLED/REJECTED bookings → bookingId is used as identifier.
function openUpdateRefundModal(bookingId, bookingStatus, settlementId) {
var isApproved = (bookingStatus === 'APPROVED');
// For approved bookings, a settlementId is expected; warn but allow for cancelled/rejected.
if (isApproved && !settlementId) {
Swal.fire('Info', 'No settlement record found for this approved booking.', 'info');
return;
}
// Display ID info in modal header
var displayId = isApproved ? ('Settlement ID: ' + settlementId) : ('Booking ID: ' + bookingId);
document.getElementById('ur_bookingId').textContent = displayId;
document.getElementById('ur_bookingStatus').textContent = bookingStatus || '';
document.getElementById('ur_settlementId').value = settlementId || '';
// Store bookingId and bookingStatus for submit
document.getElementById('ur_bookingId').setAttribute('data-booking-id', bookingId || '');
document.getElementById('ur_bookingId').setAttribute('data-booking-status', bookingStatus || '');
document.getElementById('ur_status').value = '';
document.getElementById('ur_arnNumber').value = '';
document.getElementById('ur_comments').value = '';
$('#updateRefundModal').modal('show');
}
// submitRefundUpdate: posts to /updateRefundDetails with the correct ID depending on booking status
function submitRefundUpdate() {
var today = new Date().toISOString().split('T')[0];
var settlementId = document.getElementById('ur_settlementId').value;
var status = document.getElementById('ur_status').value;
var refundDate = document.getElementById('ur_refundDate').value;
var arnNumber = document.getElementById('ur_arnNumber').value.trim();
var comments = document.getElementById('ur_comments').value.trim();
var bookingId = document.getElementById('ur_bookingId').getAttribute('data-booking-id');
var bookingStatus = document.getElementById('ur_bookingId').getAttribute('data-booking-status');
if (!/^\d{12,15}$/.test(arnNumber)) {
alert("ARN Number must contain 12 to 15 digits.");
$('#ur_arnNumber').focus();
return false;
}
if (!status) {
Swal.fire('Validation', 'Please select a Refund Status.', 'warning');
return;
}
if (!refundDate) {
Swal.fire('Validation', 'Please select the Refund Date.', 'warning');
$('#ur_refundDate').focus();
return;
}
if (refundDate > today) {
Swal.fire('Validation', 'Refund Date cannot be a future date.', 'warning');
$('#ur_refundDate').focus();
return;
}
if (!arnNumber) {
Swal.fire('Validation', 'Please enter the ARN Number.', 'warning');
return;
}
if (!comments) {
Swal.fire('Validation', 'Please enter comments.', 'warning');
return;
}
var btn = document.getElementById('btn-submit-refund');
btn.disabled = true;
btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i>Processing...';
$.ajax({
type: 'POST',
url: '/communityhall/headquarters/sixmonthold-transactions/updateRefundDetails',
data: {
bookingId: bookingId,
settlementId: settlementId || '',
bookingStatus: bookingStatus,
refundStatus: status,
refundDate: refundDate,
arnNumber: arnNumber,
comments: comments
},
success: function (resp) {
$('#updateRefundModal').modal('hide');
btn.disabled = false;
btn.innerHTML = '<i class="fa fa-check mr-1"></i>Update Refund Status';
if (resp.status === 'success') {
Swal.fire({
icon: 'success',
title: 'Refund Details Updated!',
text: 'Booking ID ' + bookingId + ' has been updated successfully.',
confirmButtonColor: '#1a73e8'
}).then(function () {
location.reload();
});
} else {
Swal.fire('Error', resp.message || 'An error occurred.', 'error');
}
},
error: function (xhr) {
btn.disabled = false;
btn.innerHTML = '<i class="fa fa-check mr-1"></i>Update Refund Status';
var errMsg = 'Failed to update refund details. Please try again.';
try {
var errResp = JSON.parse(xhr.responseText);
if (errResp && errResp.message) errMsg = errResp.message;
} catch (e) { }
Swal.fire('Error', errMsg, 'error');
}
});
}
function populateBookingModal(d) {
var html = '<div class="col-12">';
html += '<table class="table table-sm table-bordered">';
html += '<tr><th colspan="4" style="background:#f2f2f2;">User Details</th></tr>';
html += '<tr><th style="font-weight:normal">User Name:</th><td>' + (d.users ? d.users.name : '') + '</td>';
html += '<th style="font-weight:normal">Mobile No:</th><td>' + (d.users ? d.users.mobileNo : '') + '</td></tr>';
html += '<tr><th style="font-weight:normal">User Type:</th><td colspan="3">' + (d.users ? d.users.usertype : '') + '</td></tr>';
html += '<tr><th colspan="4" style="background:#f2f2f2;">Hall Details</th></tr>';
html += '<tr><th style="font-weight:normal">Hall Name:</th><td colspan="3">' + (d.hallDetails ? d.hallDetails.hallName : '') + '</td></tr>';
html += '<tr><th colspan="4" style="background:#f2f2f2;">Booking Details (ID: ' + d.bookingId + ')</th></tr>';
html += '<tr><th style="font-weight:normal">Booking Date:</th><td>' + d.bookingDate + '</td>';
html += '<th style="font-weight:normal">Booking Status:</th><td>' + d.bookingStatus + '</td></tr>';
html += '<tr><th style="font-weight:normal">Start Date:</th><td>' + d.startDate + '</td>';
html += '<th style="font-weight:normal">End Date:</th><td>' + d.endDate + '</td></tr>';
html += '<tr><th style="font-weight:normal">Deposit Amount:</th><td>₹ ' + parseFloat(d.depositAmount).toFixed(2) + '</td>';
html += '<th style="font-weight:normal">Total Amount:</th><td>₹ ' + parseFloat(d.amountReceived).toFixed(2) + '</td></tr>';
// Payment
if (d.payments) {
html += '<tr><th colspan="4" style="background:#f2f2f2;">Payment Details</th></tr>';
html += '<tr><th style="font-weight:normal">Transaction ID:</th><td colspan="3">' + d.payments.transactionId + '</td></tr>';
html += '<tr><th style="font-weight:normal">Amount Received:</th><td>₹ ' + d.payments.amountReceived + '</td>';
html += '<th style="font-weight:normal">Payment Status:</th><td>' + d.payments.paymentStatus + '</td></tr>';
}
html += '</table></div>';
$('#bookingModalBody').html(html);
}
// ─────────────────────────────────────────────────────────────────────
// Send Mail Flow
// ─────────────────────────────────────────────────────────────────────
function openSendMail(bookingId, bookingStatus, transactionId, tpslId, transactionDate, refundAmount) {
Swal.fire({
title: 'Send Refund Mail?',
html: 'This will send a refund status request mail for Booking ID <strong>' + bookingId + '</strong>.<br>Do you want to proceed?',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Yes, Show Draft',
cancelButtonText: 'Cancel',
confirmButtonColor: '#1a73e8'
}).then(function (result) {
if (result.isConfirmed) {
showDraftMail(bookingId, bookingStatus, transactionId, tpslId, transactionDate, refundAmount);
}
});
}
function showDraftMail(bookingId, bookingStatus, transactionId, tpslId, transactionDate, refundAmount) {
document.getElementById('dm_bookingId').value = bookingId;
document.getElementById('dm_bookingStatus').value = bookingStatus;
document.getElementById('dm_transactionId').value = transactionId || '';
document.getElementById('dm_tpslId').value = tpslId || '';
document.getElementById('dm_transactionDate').value = transactionDate || '';
document.getElementById('dm_refundAmount').value = refundAmount || 0;
var amt = parseFloat(refundAmount || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
var body = 'Hi,<br><br>';
body += 'Kindly update refund status for the below mentioned transaction made for Community Hall Booking.<br><br>';
body += '<b>Transaction Details:</b><br><br>';
body += '&nbsp;&nbsp;Booking ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: ' + bookingId + '<br>';
// body += '&nbsp;&nbsp;Booking Status &nbsp;&nbsp;&nbsp;: ' + (bookingStatus || 'N/A') + '<br>';
body += '&nbsp;&nbsp;Transaction ID &nbsp;&nbsp;&nbsp;: ' + (transactionId || 'N/A') + '<br>';
body += '&nbsp;&nbsp;TPSL ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: ' + (tpslId || 'N/A') + '<br>';
body += '&nbsp;&nbsp;Transaction Date : ' + (transactionDate || 'N/A') + '<br>';
body += '&nbsp;&nbsp;<b>Refund Amount &nbsp;&nbsp;&nbsp;: ₹ ' + amt + '</b><br><br>';
body += 'If refund was not initiated, <b>kindly initiate the refund</b> and update refund status at the earliest. ';
body += 'Make sure that no duplicate refund was processed against this transaction.<br><br>';
body += 'Regards,<br>';
body += 'Community Hall Support<br>';
body += 'Greater Chennai Corporation';
document.getElementById('draftMailBody').innerHTML = body;
$('#draftMailModal').modal('show');
}
function confirmMailSent() {
var bookingId = document.getElementById('dm_bookingId').value;
var bookingStatus = document.getElementById('dm_bookingStatus').value;
var transactionId = document.getElementById('dm_transactionId').value;
var tpslId = document.getElementById('dm_tpslId').value;
var transactionDate = document.getElementById('dm_transactionDate').value;
var refundAmount = document.getElementById('dm_refundAmount').value;
var btn = document.getElementById('btn-confirm-mail');
btn.disabled = true;
btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i>Processing...';
$.ajax({
type: 'POST',
url: '/communityhall/headquarters/sixmonthold-transactions/markMailSent',
data: {
bookingId: bookingId,
bookingStatus: bookingStatus,
transactionId: transactionId,
tpslId: tpslId,
transactionDate: transactionDate,
refundAmount: refundAmount
},
success: function (resp) {
$('#draftMailModal').modal('hide');
btn.disabled = false;
btn.innerHTML = '<i class="fa fa-check mr-1"></i>Confirm &amp; Mark as Mail Sent';
if (resp.status === 'success') {
Swal.fire({
icon: 'success',
title: 'Mail Processed!',
text: 'Booking ID ' + bookingId + ' has been marked as mail sent and moved to "Mail Sent Bookings" tab.',
confirmButtonColor: '#1a73e8'
}).then(function () {
location.reload();
});
} else {
Swal.fire('Error', resp.message || 'An error occurred.', 'error');
}
},
error: function () {
btn.disabled = false;
btn.innerHTML = '<i class="fa fa-check mr-1"></i>Confirm &amp; Mark as Mail Sent';
Swal.fire('Error', 'Failed to record mail. Please try again.', 'error');
}
});
}
</script>
</body>
</html>