@foreach($payments as $payment)

<!-- View Details Modal -->
<div class="modal fade" id="viewModal-{{ $payment->id }}" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <!-- Header with Primary Gradient -->
            <div class="modal-header border-0" style="background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);">
                <h5 class="modal-title fw-bold text-white">
                    <i class="fas fa-file-invoice-dollar me-2"></i>Payment Review Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-4" style="background-color: #f8f9fa;">
                <!-- Row 1: Member & Payment Info -->
                <div class="row g-3 mb-3">
                    <!-- Member Information -->
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #0d6efd !important;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="rounded-circle bg-primary bg-opacity-10 p-2 me-2">
                                        <i class="fas fa-user text-primary"></i>
                                    </div>
                                    <h6 class="mb-0 fw-bold text-primary">Member Information</h6>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="small text-muted mb-1">Full Name</label>
                                    <div class="fw-semibold text-dark">{{ ucwords($payment->enquiry->full_name) }}</div>
                                </div>
                                
                                <div class="row g-2 mb-3">
                                    <div class="col-6">
                                        <label class="small text-muted mb-1">Force Number</label>
                                        <div class="fw-semibold text-dark">{{ $payment->enquiry->force_no ?? 'N/A' }}</div>
                                    </div>
                                    <div class="col-6">
                                        <label class="small text-muted mb-1">Check Number</label>
                                        <div><span class="badge bg-primary">{{ $payment->enquiry->check_number }}</span></div>
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="small text-muted mb-1">Phone Number</label>
                                    <div class="fw-semibold text-dark">
                                        <i class="fas fa-phone text-primary me-1"></i>{{ $payment->enquiry->phone ?? 'N/A' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Bank Details -->
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #0d6efd !important;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="rounded-circle bg-primary bg-opacity-10 p-2 me-2">
                                        <i class="fas fa-university text-primary"></i>
                                    </div>
                                    <h6 class="mb-0 fw-bold text-primary">Bank Details</h6>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="small text-muted mb-1">Bank Name</label>
                                    <div class="fw-semibold text-dark">{{ strtoupper($payment->enquiry->bank_name ?? 'N/A') }}</div>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="small text-muted mb-1">Account Number</label>
                                    <div class="fw-semibold text-dark font-monospace">{{ $payment->enquiry->account_number ?? 'N/A' }}</div>
                                </div>
                                
                                <div>
                                    <label class="small text-muted mb-1">Enquiry Type</label>
                                    <div>
                                        <span class="badge bg-primary bg-opacity-75">
                                            {{ ucfirst(str_replace('_', ' ', $payment->enquiry->type)) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Amount -->
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #0d6efd !important;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="rounded-circle bg-primary bg-opacity-10 p-2 me-2">
                                        <i class="fas fa-money-bill-wave text-primary"></i>
                                    </div>
                                    <h6 class="mb-0 fw-bold text-primary">Payment Amount</h6>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="small text-muted mb-1">Total Amount</label>
                                    <div class="display-6 fw-bold text-primary">Tsh {{ number_format($payment->amount) }}</div>
                                </div>
                                
                                <div class="mb-2">
                                    <label class="small text-muted mb-1">Initiated By</label>
                                    <div class="fw-semibold text-dark">{{ $payment->initiatedBy->name ?? 'N/A' }}</div>
                                    <small class="text-muted">
                                        <i class="fas fa-user-tag me-1"></i>{{ $payment->initiatedBy->getRoleNames()->first() ?? '' }}
                                    </small>
                                </div>
                                
                                <div>
                                    <label class="small text-muted mb-1">Date Initiated</label>
                                    <div class="fw-semibold text-dark">{{ $payment->created_at->format('M d, Y H:i') }}</div>
                                    <small class="text-muted">
                                        <i class="far fa-clock me-1"></i>{{ $payment->created_at->diffForHumans() }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Supporting Documents -->
                @if($payment->folios && $payment->folios->count() > 0)
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="rounded-circle bg-primary bg-opacity-10 p-2 me-2">
                                <i class="fas fa-paperclip text-primary"></i>
                            </div>
                            <h6 class="mb-0 fw-bold text-primary">Supporting Documents</h6>
                            <span class="badge bg-primary ms-auto">{{ $payment->folios->count() }}</span>
                        </div>
                        
                        <div class="row g-3">
                            @foreach($payment->folios as $folio)
                                @php
                                    $fileName = basename($folio->file_path);
                                    $extension = strtolower(pathinfo($folio->file_path, PATHINFO_EXTENSION));
                                    $iconClass = match($extension) {
                                        'pdf' => 'fa-file-pdf text-danger',
                                        'doc', 'docx' => 'fa-file-word text-primary',
                                        'jpg', 'jpeg', 'png' => 'fa-file-image text-success',
                                        default => 'fa-file text-secondary'
                                    };
                                @endphp
                                <div class="col-md-6">
                                    <div class="card border shadow-sm h-100">
                                        <div class="card-body p-3">
                                            <div class="d-flex align-items-center mb-2">
                                                <div class="me-3">
                                                    <i class="fas {{ $iconClass }} fa-2x"></i>
                                                </div>
                                                <div class="flex-grow-1 min-w-0">
                                                    <div class="fw-semibold text-truncate" title="{{ $fileName }}">
                                                        {{ $fileName }}
                                                    </div>
                                                    <small class="text-muted">
                                                        <i class="fas fa-tag me-1"></i>{{ $folio->description ?? 'Document' }}
                                                    </small>
                                                </div>
                                                <div class="ms-2">
                                                    <a href="{{ asset($folio->file_path) }}" target="_blank"
                                                       class="btn btn-sm btn-primary me-1"
                                                       title="View Document">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ asset($folio->file_path) }}" download
                                                       class="btn btn-sm btn-outline-primary"
                                                       title="Download">
                                                        <i class="fas fa-download"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <!-- Footer -->
            <div class="modal-footer border-0 bg-white">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Close
                </button>
                <a href="{{ route('enquiries.show', $payment->enquiry->id) }}" class="btn btn-primary">
                    <i class="fas fa-external-link-alt me-1"></i>View Full Details
                </a>
            </div>
        </div>
    </div>
</div>

<style>
.min-w-0 {
    min-width: 0;
}
</style>

<!-- Approve Payment Modal with OTP -->
<div class="modal fade" id="approveModal-{{ $payment->id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-check-circle me-2"></i>Approve Payment
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="alert alert-success d-flex align-items-center">
                    <i class="fas fa-check-circle me-3"></i>
                    <div>
                        <strong>Payment Approval</strong><br>
                        <small>Approve payment of <strong>Tsh {{ number_format($payment->amount) }}</strong> for {{ ucwords($payment->enquiry->full_name) }}</small>
                    </div>
                </div>

                <!-- Step 1: Request OTP -->
                <div id="otpRequestSection-{{ $payment->id }}">
                    <div class="text-center">
                        <div class="mb-4">
                            <i class="fas fa-shield-alt fa-3x text-success mb-3"></i>
                            <h6>Security Verification Required</h6>
                            <p class="text-muted">Click below to send OTP to your registered phone number</p>
                        </div>
                        <button type="button" class="btn btn-success" onclick="sendSingleOTP({{ $payment->id }})">
                            <i class="fas fa-mobile-alt me-1"></i>Send OTP
                        </button>
                    </div>
                </div>

                <!-- Step 2: Enter OTP -->
                <div id="otpVerifySection-{{ $payment->id }}" style="display: none;">
                    <div class="text-center">
                        <div class="mb-4">
                            <i class="fas fa-key fa-2x text-success mb-3"></i>
                            <h6>Enter Verification Code</h6>
                            <p class="text-muted">Enter the 6-digit code sent to your phone</p>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-md-8">
                                <div class="d-flex gap-2 justify-content-center mb-3">
                                    <input type="text" class="form-control text-center otp-input-single" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center otp-input-single" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center otp-input-single" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center otp-input-single" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center otp-input-single" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center otp-input-single" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                </div>
                                <input type="hidden" id="singleOTP-{{ $payment->id }}">
                            </div>
                        </div>
                        <button type="button" class="btn btn-success" onclick="verifySingleOTP({{ $payment->id }})">
                            <i class="fas fa-check me-1"></i>Verify & Approve Payment
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-top-0 bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Reject Payment Modal - Modern UI -->
<div class="modal fade" id="rejectModal-{{ $payment->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 15px; overflow: hidden;">
            <!-- Modern Header -->
            <div class="modal-header border-0" style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); padding: 1.5rem;">
                <div class="d-flex align-items-center">
                    <div class="me-3" style="width: 50px; height: 50px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items-center; justify-content: center;">
                        <i class="fas fa-ban text-white fa-lg"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-white mb-0">Reject Payment Request</h5>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-4" style="background: #f8f9fa;">
                <!-- Payment Info Card -->
                <div class="card border-0 mb-4 bg-primary">
                    <div class="card-body text-white p-3">
                        <div class="row g-3">
                            <div class="col-md-4 text-center">
                                <i class="fas fa-money-bill-wave mb-1"></i>
                                <div class="small">Amount</div>
                                <strong class="text-uppercase">Tsh {{ number_format($payment->amount) }}</strong>
                            </div>
                            <div class="col-md-4 text-center">
                                <i class="fas fa-receipt mb-1"></i>
                                <div class="small">Check Number</div>
                                <strong class="text-uppercase">{{ $payment->enquiry->check_number }}</strong>
                            </div>
                            <div class="col-md-4 text-center">
                                <i class="fas fa-tag mb-1"></i>
                                <div class="small">Type</div>
                                <strong class="text-uppercase">{{ ucwords(str_replace('_', ' ', $payment->enquiry->type)) }}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <form id="singleRejectForm-{{ $payment->id }}" action="{{ route('payment.reject', $payment->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <!-- Rejection Reason Selection -->
                    <div class="mb-4">
                        <label class="form-label fw-bold text-dark mb-3">
                            <i class="fas fa-list-ul me-2 text-danger"></i>Select Rejection Reason <span class="text-danger">*</span>
                        </label>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="payReason1-{{ $payment->id }}" value="insufficient_funds" required>
                                <label class="btn btn-outline-danger w-100 text-start" for="payReason1-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-wallet me-2"></i>Insufficient Funds
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="payReason2-{{ $payment->id }}" value="invalid_documents">
                                <label class="btn btn-outline-danger w-100 text-start" for="payReason2-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-file-excel me-2"></i>Invalid Documents
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="payReason3-{{ $payment->id }}" value="policy_violation">
                                <label class="btn btn-outline-danger w-100 text-start" for="payReason3-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-gavel me-2"></i>Policy Violation
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="payReason4-{{ $payment->id }}" value="duplicate_request">
                                <label class="btn btn-outline-danger w-100 text-start" for="payReason4-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-copy me-2"></i>Duplicate Request
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="payReason5-{{ $payment->id }}" value="incorrect_amount">
                                <label class="btn btn-outline-danger w-100 text-start" for="payReason5-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-calculator me-2"></i>Incorrect Amount
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="payReason6-{{ $payment->id }}" value="other">
                                <label class="btn btn-outline-danger w-100 text-start" for="payReason6-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-ellipsis-h me-2"></i>Other (Specify)
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Details -->
                    <div class="mb-3">
                        <label class="form-label fw-bold text-dark">
                            <i class="fas fa-comment-dots me-2 text-info"></i>Additional Details
                        </label>
                        <textarea class="form-control" name="rejection_detail" rows="3" placeholder="Provide additional context (optional)..." style="border-radius: 10px;"></textarea>
                    
                    </div>

                    <!-- Warning Alert -->
                     
                </form>
            </div>

            <div class="modal-footer border-0 p-3" style="background: #f8f9fa;">
                <button type="button" class="btn btn-warning px-4" data-bs-dismiss="modal" style="border-radius: 10px;">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-danger px-4" onclick="submitSingleReject({{ $payment->id }})" style="border-radius: 10px; background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
                    <i class="fas fa-ban me-1"></i>Confirm Rejection
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Loan Application Approve Modal -->
@if($payment->enquiry->type === 'loan_application')
<div class="modal fade" id="approveLoanModal-{{ $payment->id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-check-circle me-2"></i>Approve Loan Application
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="alert alert-success d-flex align-items-center">
                    <i class="fas fa-check-circle me-3"></i>
                    <div>
                        <strong>Loan Application Approval</strong><br>
                        <small>Approve loan application for {{ ucwords($payment->enquiry->full_name) }}</small>
                    </div>
                </div>

                <form id="approveLoanForm-{{ $payment->id }}">
                    @csrf
                    <input type="hidden" name="payment_id" value="{{ $payment->id }}">
                    <input type="hidden" name="enquiry_id" value="{{ $payment->enquiry->id }}">
                </form>

                <!-- Step 1: Request OTP -->
                <div id="loanOtpRequestSection-{{ $payment->id }}">
                    <div class="text-center">
                        <div class="mb-4">
                            <i class="fas fa-shield-alt fa-3x text-success mb-3"></i>
                            <h6>Security Verification Required</h6>
                            <p class="text-muted">Click below to send OTP to your registered phone number</p>
                        </div>
                        <button type="button" class="btn btn-success" onclick="sendLoanOTP({{ $payment->id }})">
                            <i class="fas fa-mobile-alt me-1"></i>Send OTP
                        </button>
                    </div>
                </div>

                <!-- Step 2: Enter OTP -->
                <div id="loanOtpVerifySection-{{ $payment->id }}" style="display: none;">
                    <div class="text-center">
                        <div class="mb-4">
                            <i class="fas fa-key fa-2x text-success mb-3"></i>
                            <h6>Enter Verification Code</h6>
                            <p class="text-muted">Enter the 6-digit code sent to your phone</p>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-md-8">
                                <div class="d-flex gap-2 justify-content-center mb-3">
                                    <input type="text" class="form-control text-center loan-otp-input" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center loan-otp-input" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center loan-otp-input" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center loan-otp-input" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center loan-otp-input" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center loan-otp-input" data-payment="{{ $payment->id }}" maxlength="1" style="width: 50px;">
                                </div>
                                <input type="hidden" id="loanOTP-{{ $payment->id }}">
                            </div>
                        </div>
                        <button type="button" class="btn btn-success" onclick="verifyLoanOTP({{ $payment->id }})">
                            <i class="fas fa-check me-1"></i>Verify & Approve Loan
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-top-0 bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Loan Application Reject Modal - Modern UI -->
<div class="modal fade" id="rejectLoanModal-{{ $payment->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 15px; overflow: hidden;">
            <!-- Modern Header -->
            <div class="modal-header border-0" style="background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #8b0000 100%); padding: 1.5rem;">
                <div class="d-flex align-items-center">
                    <div class="me-3" style="width: 50px; height: 50px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items-center; justify-content: center;">
                        <i class="fas fa-exclamation-triangle text-white fa-lg"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-white mb-0">Reject Loan Application</h5>
                        <small class="text-white opacity-75">{{ ucwords($payment->enquiry->full_name) }}</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-4" style="background: #f8f9fa;">
                <!-- Loan Info Card -->
                @php
                    $loanApp = $payment->enquiry->loanApplication;
                @endphp
                <div class="card border-0 mb-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <div class="card-body text-white p-3">
                        <div class="row g-3">
                            <div class="col-md-3 text-center">
                                <i class="fas fa-money-bill-wave mb-1"></i>
                                <div class="small">Requested Amount</div>
                                <strong>Tsh {{ number_format($loanApp->requested_amount ?? $loanApp->loan_amount) }}</strong>
                            </div>
                            <div class="col-md-3 text-center">
                                <i class="fas fa-clock mb-1"></i>
                                <div class="small">Duration</div>
                                <strong>{{ $loanApp->loan_duration ?? 'N/A' }} months</strong>
                            </div>
                            <div class="col-md-3 text-center">
                                <i class="fas fa-hand-holding-usd mb-1"></i>
                                <div class="small">Monthly Deduction</div>
                                <strong>Tsh {{ number_format($loanApp->monthly_deduction ?? 0) }}</strong>
                            </div>
                            <div class="col-md-3 text-center">
                                <i class="fas fa-phone mb-1"></i>
                                <div class="small">Contact</div>
                                <strong>{{ $payment->enquiry->phone ?? 'N/A' }}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <form id="rejectLoanForm-{{ $payment->id }}">
                    @csrf
                    <input type="hidden" name="payment_id" value="{{ $payment->id }}">
                    <input type="hidden" name="enquiry_id" value="{{ $payment->enquiry->id }}">

                    <!-- Rejection Reason Selection -->
                    <div class="mb-4">
                        <label class="form-label fw-bold text-dark mb-3">
                            <i class="fas fa-list-ul me-2 text-danger"></i>Select Rejection Reason <span class="text-danger">*</span>
                        </label>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="loanReason1-{{ $payment->id }}" value="incomplete_application" required>
                                <label class="btn btn-outline-danger w-100 text-start" for="loanReason1-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-file-alt me-2"></i>Incomplete Application
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="loanReason2-{{ $payment->id }}" value="insufficient_income">
                                <label class="btn btn-outline-danger w-100 text-start" for="loanReason2-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-money-bill-wave me-2"></i>Insufficient Income
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="loanReason3-{{ $payment->id }}" value="credit_history">
                                <label class="btn btn-outline-danger w-100 text-start" for="loanReason3-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-history me-2"></i>Poor Credit History
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="loanReason4-{{ $payment->id }}" value="not_eligible">
                                <label class="btn btn-outline-danger w-100 text-start" for="loanReason4-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-user-times me-2"></i>Not Eligible
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="loanReason5-{{ $payment->id }}" value="high_debt_ratio">
                                <label class="btn btn-outline-danger w-100 text-start" for="loanReason5-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-chart-line me-2"></i>High Debt Ratio
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="radio" class="btn-check" name="rejection_reason" id="loanReason6-{{ $payment->id }}" value="invalid_documents">
                                <label class="btn btn-outline-danger w-100 text-start" for="loanReason6-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-file-excel me-2"></i>Invalid Documents
                                </label>
                            </div>
                            <div class="col-12">
                                <input type="radio" class="btn-check" name="rejection_reason" id="loanReason7-{{ $payment->id }}" value="other">
                                <label class="btn btn-outline-danger w-100 text-start" for="loanReason7-{{ $payment->id }}" style="border-radius: 10px; padding: 12px;">
                                    <i class="fas fa-ellipsis-h me-2"></i>Other (Please specify below)
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Details -->
                    <div class="mb-3">
                        <label class="form-label fw-bold text-dark">
                            <i class="fas fa-comment-dots me-2 text-info"></i>Additional Details
                        </label>
                        <textarea class="form-control" name="rejection_detail" rows="3" placeholder="Provide additional context or details about the rejection (optional)..." style="border-radius: 10px;"></textarea>
                        <div class="form-text mt-2">
                            <i class="fas fa-info-circle me-1"></i>This information will be included in the SMS notification to the applicant
                        </div>
                    </div>

                    <!-- Warning Alert -->
                    <div class="alert alert-warning d-flex align-items-start mb-0" role="alert" style="border-radius: 10px; border-left: 4px solid #ffc107;">
                        <i class="fas fa-exclamation-triangle me-3 mt-1" style="font-size: 24px;"></i>
                        <div>
                            <strong>Important Notice!</strong>
                            <p class="mb-0 small">This will permanently reject the loan application and send an SMS notification to <strong>{{ $payment->enquiry->full_name }}</strong> at <strong>{{ $payment->enquiry->phone }}</strong>. This action cannot be undone.</p>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer border-0 p-3" style="background: #f8f9fa;">
                <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal" style="border-radius: 10px;">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-danger px-4 fw-bold" onclick="rejectLoanApplication({{ $payment->id }})" style="border-radius: 10px; background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
                    <i class="fas fa-ban me-1"></i>Confirm Rejection
                </button>
            </div>
        </div>
    </div>
</div>
@endif

@endforeach

<!-- Bulk Approve Modal with OTP -->
<div class="modal fade" id="bulkApproveModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-check-double me-2"></i>Bulk Approve Payments
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="alert alert-success d-flex align-items-center mb-3">
                    <i class="fas fa-check-circle me-3"></i>
                    <div>
                        <strong>Bulk Approval</strong><br>
                        <small>Approve <span id="bulkApproveCount">0</span> selected payments</small>
                    </div>
                </div>

                <!-- Selected Payments List -->
                <div style="max-height: 400px; overflow-y: auto; margin-bottom: 20px;">
                    <table class="table table-hover table-bordered" style="margin-bottom: 0;">
                        <thead style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; position: sticky; top: 0; z-index: 10;">
                            <tr>
                                <th style="width: 60px; text-align: center;">SN</th>
                                <th>Full Name</th>
                                <th style="width: 150px;">Check Number</th>
                                <th>Type</th>
                                <th style="width: 150px; text-align: right;">Amount</th>
                            </tr>
                        </thead>
                        <tbody id="bulkApprovePaymentsList">
                            <!-- Will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div>

                <!-- Step 1: Request OTP -->
                <div id="bulkOtpRequestSection">
                    <div class="text-center">
                        <div class="mb-4">
                            <i class="fas fa-shield-alt fa-3x text-success mb-3"></i>
                            <h6>Security Verification Required</h6>
                            <p class="text-muted">Click below to send OTP to your registered phone number</p>
                        </div>
                        <button type="button" id="sendBulkOTPBtn" class="btn btn-success" onclick="sendBulkOTPManager()">
                            <i class="fas fa-mobile-alt me-1"></i>Send OTP
                        </button>
                    </div>
                </div>

                <!-- Step 2: Enter OTP -->
                <div id="bulkOtpVerifySection" style="display: none;">
                    <div class="text-center">
                        <div class="mb-4">
                            <i class="fas fa-key fa-2x text-success mb-3"></i>
                            <h6>Enter Verification Code</h6>
                            <p class="text-muted">Enter the 6-digit code sent to your phone</p>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-md-8">
                                <div class="d-flex gap-2 justify-content-center mb-3">
                                    <input type="text" class="form-control text-center bulk-otp-input" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center bulk-otp-input" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center bulk-otp-input" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center bulk-otp-input" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center bulk-otp-input" maxlength="1" style="width: 50px;">
                                    <input type="text" class="form-control text-center bulk-otp-input" maxlength="1" style="width: 50px;">
                                </div>
                                <input type="hidden" id="bulkOTP">
                            </div>
                        </div>
                        <button type="button" id="verifyBulkOTPBtn" class="btn btn-success" onclick="verifyBulkOTPManager()">
                            <i class="fas fa-check me-1"></i>Verify & Approve All
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-top-0 bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Reject Modal -->
<div class="modal fade" id="bulkRejectModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-times-circle me-2"></i>Bulk Reject Payments
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="alert alert-warning d-flex align-items-center">
                    <i class="fas fa-exclamation-triangle me-3"></i>
                    <div>
                        <strong>Bulk Rejection</strong><br>
                        <small>Reject <span id="bulkRejectCount">0</span> selected payments</small>
                    </div>
                </div>

                <!-- Selected Payments List -->
                <div class="card border-0 shadow-sm mb-4" style="max-height: 300px; overflow-y: auto;">
                    <div class="card-header text-white fw-bold" style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); position: sticky; top: 0; z-index: 10;">
                        <i class="fas fa-list me-2"></i>Selected Payments for Rejection
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0">
                            <thead style="background: #f8f9fa; position: sticky; top: 0; z-index: 5;">
                                <tr>
                                    <th class="fw-semibold text-dark">Member Name</th>
                                    <th class="fw-semibold text-dark">Check #</th>
                                    <th class="fw-semibold text-dark">Type</th>
                                    <th class="fw-semibold text-dark text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody id="bulkRejectPaymentsList">
                                <!-- Will be populated by JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <form id="bulkRejectForm">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-comment me-1"></i>Rejection Reason
                        </label>
                        <textarea class="form-control" id="bulkRejectReason" rows="4" required
                                  placeholder="Please provide detailed reason for bulk rejection..."></textarea>
                        <div class="form-text">
                            <i class="fas fa-info-circle me-1"></i>This reason will be applied to all selected payments
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-top-0 bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-danger" onclick="submitBulkReject()">
                    <i class="fas fa-times-circle me-1"></i>Reject All Selected
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// OTP Input handling for single and bulk approvals
document.addEventListener('DOMContentLoaded', function() {
    // Handle single OTP input auto-advance
    document.querySelectorAll('.otp-input-single').forEach((input, index, inputs) => {
        input.addEventListener('input', function() {
            if (this.value.length === 1 && index < inputs.length - 1) {
                const nextInput = inputs[index + 1];
                if (nextInput && nextInput.dataset.payment === this.dataset.payment) {
                    nextInput.focus();
                }
            }

            // Combine all OTP inputs for this payment
            const paymentId = this.dataset.payment;
            const paymentInputs = document.querySelectorAll(`.otp-input-single[data-payment="${paymentId}"]`);
            const fullOTP = Array.from(paymentInputs).map(i => i.value).join('');
            document.getElementById(`singleOTP-${paymentId}`).value = fullOTP;
        });

        input.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace' && this.value === '' && index > 0) {
                const prevInput = inputs[index - 1];
                if (prevInput && prevInput.dataset.payment === this.dataset.payment) {
                    prevInput.focus();
                }
            }
        });
    });

    // Handle loan OTP input auto-advance
    document.querySelectorAll('.loan-otp-input').forEach((input, index, inputs) => {
        input.addEventListener('input', function() {
            if (this.value.length === 1 && index < inputs.length - 1) {
                const nextInput = inputs[index + 1];
                if (nextInput && nextInput.dataset.payment === this.dataset.payment) {
                    nextInput.focus();
                }
            }

            // Combine all OTP inputs for this loan
            const paymentId = this.dataset.payment;
            const paymentInputs = document.querySelectorAll(`.loan-otp-input[data-payment="${paymentId}"]`);
            const fullOTP = Array.from(paymentInputs).map(i => i.value).join('');
            document.getElementById(`loanOTP-${paymentId}`).value = fullOTP;
        });

        input.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace' && this.value === '' && index > 0) {
                const prevInput = inputs[index - 1];
                if (prevInput && prevInput.dataset.payment === this.dataset.payment) {
                    prevInput.focus();
                }
            }
        });
    });

    // Handle bulk OTP input auto-advance
    document.querySelectorAll('.bulk-otp-input').forEach((input, index, inputs) => {
        input.addEventListener('input', function() {
            if (this.value.length === 1 && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }

            // Combine all bulk OTP inputs
            const fullOTP = Array.from(inputs).map(i => i.value).join('');
            document.getElementById('bulkOTP').value = fullOTP;
        });

        input.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace' && this.value === '' && index > 0) {
                inputs[index - 1].focus();
            }
        });
    });
});

// Send OTP for single approval
function sendSingleOTP(paymentId) {
    fetch(`/payment/send-otp-approve/${paymentId}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById(`otpRequestSection-${paymentId}`).style.display = 'none';
            document.getElementById(`otpVerifySection-${paymentId}`).style.display = 'block';
            showAlert('OTP sent successfully', 'success');
        } else {
            showAlert('Failed to send OTP: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('Error sending OTP', 'error');
    });
}

// Verify OTP for single approval
function verifySingleOTP(paymentId) {
    const otp = document.getElementById(`singleOTP-${paymentId}`).value;
    const button = document.querySelector(`button[onclick="verifySingleOTP(${paymentId})"]`);

    if (otp.length !== 6) {
        showAlert('Please enter complete 6-digit OTP', 'warning');
        return;
    }

    // Show loading state
    const originalHtml = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Verifying OTP...';
    button.disabled = true;

    fetch(`/payment/verify-otp-approve/${paymentId}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ otp: otp })
    })
    .then(response => response.json())
    .then(data => {
        // Reset button state
        button.innerHTML = originalHtml;
        button.disabled = false;

        if (data.success) {
            showAlert('Payment approved successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('OTP verification failed: ' + data.message, 'error');
        }
    })
    .catch(error => {
        // Reset button state
        button.innerHTML = originalHtml;
        button.disabled = false;
        console.error('Error:', error);
        showAlert('Error verifying OTP', 'error');
    });
}

// Send OTP for bulk approval
function sendBulkOTP() {
    fetch('/payment/send-bulk-otp', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('bulkOtpRequestSection').style.display = 'none';
            document.getElementById('bulkOtpVerifySection').style.display = 'block';
            showAlert('OTP sent successfully', 'success');
        } else {
            showAlert('Failed to send OTP: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('Error sending OTP', 'error');
    });
}

// Verify OTP for bulk approval
function verifyBulkOTP() {
    const otp = document.getElementById('bulkOTP').value;
    const button = document.querySelector('button[onclick="verifyBulkOTP()"]');

    if (otp.length !== 6) {
        showAlert('Please enter complete 6-digit OTP', 'warning');
        return;
    }

    // Show loading state
    const originalHtml = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Processing Approvals...';
    button.disabled = true;

    fetch('/payment/bulk-approve', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            payment_ids: selectedPayments,
            otp: otp
        })
    })
    .then(response => response.json())
    .then(data => {
        // Reset button state
        button.innerHTML = originalHtml;
        button.disabled = false;

        if (data.success) {
            showAlert('Payments approved successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('Bulk approval failed: ' + data.message, 'error');
        }
    })
    .catch(error => {
        // Reset button state
        button.innerHTML = originalHtml;
        button.disabled = false;
        console.error('Error:', error);
        showAlert('Error processing bulk approval', 'error');
    });
}

// Submit single reject
function submitSingleReject(paymentId) {
    const form = document.getElementById(`singleRejectForm-${paymentId}`);
    const rejectionReason = form.querySelector('input[name="rejection_reason"]:checked');

    if (!rejectionReason) {
        showAlert('Please select a rejection reason', 'warning');
        return;
    }

    // If "other" is selected, require additional details
    if (rejectionReason.value === 'other') {
        const rejectionDetail = form.querySelector('textarea[name="rejection_detail"]').value;
        if (!rejectionDetail.trim()) {
            showAlert('Please provide additional details for "Other" reason', 'warning');
            return;
        }
    }

    form.submit();
}

// Submit bulk reject
function submitBulkReject() {
    const reason = document.getElementById('bulkRejectReason').value;

    if (!reason.trim()) {
        showAlert('Please provide rejection reason', 'warning');
        return;
    }

    if (selectedPayments.length === 0) {
        showAlert('No payments selected', 'warning');
        return;
    }

    fetch('/payment/manager-bulk-reject', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            payment_ids: selectedPayments,
            reason: reason
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('Payments rejected successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('Failed to reject payments: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('Error processing bulk rejection', 'error');
    });
}

// Send OTP for loan approval
function sendLoanOTP(paymentId) {
    fetch(`/payment/send-loan-otp/${paymentId}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById(`loanOtpRequestSection-${paymentId}`).style.display = 'none';
            document.getElementById(`loanOtpVerifySection-${paymentId}`).style.display = 'block';
            showAlert('OTP sent successfully', 'success');
        } else {
            showAlert('Failed to send OTP: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('Error sending OTP', 'error');
    });
}

// Verify OTP for loan approval
function verifyLoanOTP(paymentId) {
    const otp = document.getElementById(`loanOTP-${paymentId}`).value;
    const button = document.querySelector(`button[onclick="verifyLoanOTP(${paymentId})"]`);

    if (otp.length !== 6) {
        showAlert('Please enter complete 6-digit OTP', 'warning');
        return;
    }

    // Show loading state
    const originalHtml = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Verifying OTP...';
    button.disabled = true;

    const enquiryId = document.querySelector(`#approveLoanForm-${paymentId} input[name="enquiry_id"]`).value;

    fetch(`/payment/verify-loan-otp/${paymentId}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            otp: otp,
            enquiry_id: enquiryId
        })
    })
    .then(response => response.json())
    .then(data => {
        // Reset button state
        button.innerHTML = originalHtml;
        button.disabled = false;

        if (data.success) {
            showAlert('Loan application approved successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('OTP verification failed: ' + data.message, 'error');
        }
    })
    .catch(error => {
        // Reset button state
        button.innerHTML = originalHtml;
        button.disabled = false;
        console.error('Error:', error);
        showAlert('Error verifying OTP', 'error');
    });
}

// Reject loan application
function rejectLoanApplication(paymentId) {
    const form = document.getElementById(`rejectLoanForm-${paymentId}`);
    const rejectionReason = form.querySelector('input[name="rejection_reason"]:checked');
    const rejectionDetail = form.querySelector('textarea[name="rejection_detail"]').value;
    const enquiryId = form.querySelector('input[name="enquiry_id"]').value;
    const button = document.querySelector(`button[onclick="rejectLoanApplication(${paymentId})"]`);

    if (!rejectionReason) {
        showAlert('Please select a rejection reason', 'warning');
        return;
    }

    // If "other" is selected, require additional details
    if (rejectionReason.value === 'other' && !rejectionDetail.trim()) {
        showAlert('Please provide additional details for "Other" reason', 'warning');
        return;
    }

    // Show loading state
    const originalHtml = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Processing...';
    button.disabled = true;

    fetch(`/payment/reject-loan-application`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            payment_id: paymentId,
            enquiry_id: enquiryId,
            rejection_reason: rejectionReason.value,
            rejection_detail: rejectionDetail
        })
    })
    .then(response => response.json())
    .then(data => {
        // Reset button state
        button.innerHTML = originalHtml;
        button.disabled = false;

        if (data.success) {
            showAlert('Loan application rejected successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('Failed to reject loan application: ' + data.message, 'error');
        }
    })
    .catch(error => {
        // Reset button state
        button.innerHTML = originalHtml;
        button.disabled = false;
        console.error('Error:', error);
        showAlert('Error rejecting loan application', 'error');
    });
}

// Show alert function
function showAlert(message, type = 'info') {
    const alertClass = {
        'success': 'alert-success',
        'error': 'alert-danger',
        'warning': 'alert-warning',
        'info': 'alert-info'
    }[type];

    const alert = document.createElement('div');
    alert.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
    alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alert.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;

    document.body.appendChild(alert);

    setTimeout(() => {
        if (alert.parentNode) {
            alert.remove();
        }
    }, 5000);
}
</script>

<style>
.bg-warning-soft {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.otp-input-single, .bulk-otp-input, .loan-otp-input {
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
}

.otp-input-single:focus, .bulk-otp-input:focus, .loan-otp-input:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: 1px solid #dee2e6;
}

/* Radio button rejection reason styling */
.btn-check:checked + .btn-outline-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-color: #dc3545;
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.btn-outline-danger {
    transition: all 0.3s ease;
}

.btn-outline-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

/* Textarea focus effect */
textarea.form-control:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}
</style>