|
|
<!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">×</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> <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">×</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 – 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 & 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>×</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 += ' Booking ID : ' + bookingId + '<br>'; // body += ' Booking Status : ' + (bookingStatus || 'N/A') + '<br>'; body += ' Transaction ID : ' + (transactionId || 'N/A') + '<br>'; body += ' TPSL ID : ' + (tpslId || 'N/A') + '<br>'; body += ' Transaction Date : ' + (transactionDate || 'N/A') + '<br>'; body += ' <b>Refund Amount : ₹ ' + 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 & 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 & Mark as Mail Sent'; Swal.fire('Error', 'Failed to record mail. Please try again.', 'error'); } }); } </script></body>
</html>
|