@foreach($enquiries as $enquiry)

<!-- View Details Modal -->
<div class="modal fade" id="viewModal-{{ $enquiry->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-eye me-2"></i>Payment Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <h6 class="card-title text-primary mb-3">
                                    <i class="fas fa-user me-1"></i>Personal Information
                                </h6>
                                <div class="mb-2">
                                    <strong>Full Name:</strong>
                                    <span class="text-muted">{{ ucwords($enquiry->full_name) }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Force Number:</strong>
                                    <span class="text-muted">{{ $enquiry->force_no ?? 'N/A' }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Phone:</strong>
                                    <span class="text-muted">{{ $enquiry->phone ?? 'N/A' }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Check Number:</strong>
                                    <span class="badge bg-primary">{{ $enquiry->check_number }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <h6 class="card-title text-success mb-3">
                                    <i class="fas fa-university me-1"></i>Bank Information
                                </h6>
                                <div class="mb-2">
                                    <strong>Bank Name:</strong>
                                    <span class="text-muted">{{ strtoupper($enquiry->bank_name ?? 'N/A') }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Account Number:</strong>
                                    <span class="text-muted">{{ $enquiry->account_number ?? 'N/A' }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Enquiry Type:</strong>
                                    <span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $enquiry->type)) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if($enquiry->payment)
                <div class="mt-4">
                    <div class="card border-0 bg-warning-soft">
                        <div class="card-body">
                            <h6 class="card-title text-warning mb-3">
                                <i class="fas fa-money-bill-wave me-1"></i>Payment Information
                            </h6>
                            <div class="row">
                                <div class="col-md-4">
                                    <strong>Amount:</strong>
                                    <div class="h5 text-success mb-0">Tsh {{ number_format($enquiry->payment->amount) }}</div>
                                </div>
                                <div class="col-md-4">
                                    <strong>Status:</strong>
                                    @switch($enquiry->payment->status)
                                        @case('initiated')
                                            <div><span class="badge bg-info fs-6">Initiated</span></div>
                                            @break
                                        @case('approved')
                                            <div><span class="badge bg-success fs-6">Approved</span></div>
                                            @break
                                        @case('paid')
                                            <div><span class="badge bg-primary fs-6">Paid</span></div>
                                            @break
                                        @case('rejected')
                                            <div><span class="badge bg-danger fs-6">Rejected</span></div>
                                            @break
                                    @endswitch
                                </div>
                                <div class="col-md-4">
                                    <strong>Date:</strong>
                                    <div class="text-muted">{{ $enquiry->payment->created_at->format('M d, Y H:i') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </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>Close
                </button>
                <a href="{{ route('enquiries.show', $enquiry->id) }}" class="btn btn-primary">
                    <i class="fas fa-external-link-alt me-1"></i>View Full Details
                </a>
            </div>
        </div>
    </div>
</div>

@if(!$enquiry->payment)
<!-- Initiate Payment Modal - Enhanced UI -->
<div class="modal fade" id="initiateModal-{{ $enquiry->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 15px; overflow: hidden;">
            <!-- Modern Gradient Header -->
            <div class="modal-header border-0 bg-primary" style=" 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-money-check-alt text-white fa-lg"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-white mb-0">Initiate Payment Request</h5>
                        <small class="text-white opacity-75">{{ ucwords($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;">
                <!-- Member 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-user mb-1"></i>
                                <div class="small">Member</div>
                                <strong class="text-uppercase">{{ ucwords($enquiry->full_name) }}</strong>
                            </div>
                            <div class="col-md-4 text-center">
                                <i class="fas fa-receipt mb-1"></i>
                                <div class="small">Check Number</div>
                                <strong>{{ $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('_', ' ', $enquiry->type)) }}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Progress Indicator (Hidden initially) -->
                <div id="initiateProgress-{{ $enquiry->id }}" class="alert alert-info mb-4" style="display: none; border-radius: 10px;">
                    <div class="d-flex align-items-center">
                        <div class="spinner-border spinner-border-sm text-info me-3" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div>
                            <strong>Processing Payment Initiation...</strong><br>
                            <small>Please wait while we process your request</small>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height: 6px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 100%"></div>
                    </div>
                </div>

                <form id="initiateForm-{{ $enquiry->id }}" action="{{ route('payment.initiate', $enquiry->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-4">
                        <label class="form-label fw-bold text-dark">
                            <i class="fas fa-money-bill-wave me-2 text-success"></i>Payment Amount (Tsh) <span class="text-danger">*</span>
                        </label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text bg-white" style="border-radius: 10px 0 0 10px;">
                                <i class="fas fa-dollar-sign text-success"></i>
                            </span>
                            <input type="number" class="form-control form-control-lg" name="amount" id="amount-{{ $enquiry->id }}" required
                                   placeholder="0.00" min="1000" step="100" style="border-radius: 0 10px 10px 0; font-size: 1.25rem; font-weight: 600;">
                        </div>
                         
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold text-dark">
                            <i class="fas fa-paperclip me-2 text-primary"></i>Supporting Documents
                        </label>
                        <div class="upload-area" style="border: 2px dashed #667eea; border-radius: 10px; padding: 2rem; text-align: center; background: white; cursor: pointer;" onclick="document.getElementById('fileInput-{{ $enquiry->id }}').click()">
                            <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-2"></i>
                            <p class="mb-1"><strong>Click to upload</strong> or drag and drop</p>
                            <small class="text-muted">PDF, DOC, DOCX, JPG, PNG (Max 5MB)</small>
                            <input type="file" id="fileInput-{{ $enquiry->id }}" class="d-none" name="note"
                                   accept=".pdf,.doc,.docx,.jpeg,.jpg,.png" onchange="showFileName({{ $enquiry->id }}, this)">
                            <div id="fileName-{{ $enquiry->id }}" class="mt-2 text-success fw-bold"></div>
                        </div>
                    </div>

                     

                    
                </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-primary px-4" id="submitBtn-{{ $enquiry->id }}" onclick="initiatePaymentWithProgress({{ $enquiry->id }})" style="border-radius: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-paper-plane me-1"></i>Submit Request
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Reject Enquiry Modal (For enquiries without payment - status 'assigned') -->
<div class="modal fade" id="rejectEnquiryModal-{{ $enquiry->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 bg-primary">
                <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 Enquiry</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;">
                <!-- Enquiry 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-user mb-1"></i>
    <div class="small">NAME</div>
    <strong class="text-uppercase">{{ ucwords($enquiry->full_name) }}</strong>
</div>
<div class="col-md-4 text-center">
    <i class="fas fa-receipt mb-1"></i>
    <div class="small">CHECK NO</div>
    <strong class="text-uppercase">{{ $enquiry->check_number }}</strong>
</div>
<div class="col-md-4 text-center">
    <i class="fas fa-tag mb-1"></i>
    <div class="small">ENQUIRY</div>
    <strong class="text-uppercase">{{ ucwords(str_replace('_', ' ', $enquiry->type)) }}</strong>
</div>
                        </div>
                    </div>
                </div>

                <form id="rejectEnquiryForm-{{ $enquiry->id }}" action="{{ route('enquiry.reject', $enquiry->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="enqReason1-{{ $enquiry->id }}" value="incomplete_application" required>
                                <label class="btn btn-outline-danger w-100 text-start" for="enqReason1-{{ $enquiry->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="enqReason2-{{ $enquiry->id }}" value="invalid_documents">
                                <label class="btn btn-outline-danger w-100 text-start" for="enqReason2-{{ $enquiry->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="enqReason3-{{ $enquiry->id }}" value="not_eligible">
                                <label class="btn btn-outline-danger w-100 text-start" for="enqReason3-{{ $enquiry->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="enqReason4-{{ $enquiry->id }}" value="duplicate_request">
                                <label class="btn btn-outline-danger w-100 text-start" for="enqReason4-{{ $enquiry->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="enqReason5-{{ $enquiry->id }}" value="policy_violation">
                                <label class="btn btn-outline-danger w-100 text-start" for="enqReason5-{{ $enquiry->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="enqReason6-{{ $enquiry->id }}" value="other">
                                <label class="btn btn-outline-danger w-100 text-start" for="enqReason6-{{ $enquiry->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 class="form-text mt-2">
                            <i class="fas fa-info-circle me-1"></i>This information will be included in the SMS to the member
                        </div>
                    </div>

                    
                </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="submitRejectEnquiry({{ $enquiry->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

@if($enquiry->payment)
    @if(in_array($enquiry->payment->status, ['initiated', 'approved']))
    <!-- Reject Payment Modal - Modern UI -->
    <div class="modal fade" id="rejectModal-{{ $enquiry->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>
                            <small class="text-white opacity-75">{{ ucwords($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;">
                    <!-- Payment Info Card -->
                    <div class="card border-0 mb-4" style="background: linear-gradient(135deg, #17479E 0%, #4facfe 100%);">
                        <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>Tsh {{ number_format($enquiry->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>{{ $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>{{ ucwords(str_replace('_', ' ', $enquiry->type)) }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form id="rejectForm-{{ $enquiry->payment->id }}" action="{{ route('payment.reject', $enquiry->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="accReason1-{{ $enquiry->payment->id }}" value="insufficient_funds" required>
                                    <label class="btn btn-outline-danger w-100 text-start" for="accReason1-{{ $enquiry->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="accReason2-{{ $enquiry->payment->id }}" value="invalid_documents">
                                    <label class="btn btn-outline-danger w-100 text-start" for="accReason2-{{ $enquiry->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="accReason3-{{ $enquiry->payment->id }}" value="policy_violation">
                                    <label class="btn btn-outline-danger w-100 text-start" for="accReason3-{{ $enquiry->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="accReason4-{{ $enquiry->payment->id }}" value="duplicate_request">
                                    <label class="btn btn-outline-danger w-100 text-start" for="accReason4-{{ $enquiry->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="accReason5-{{ $enquiry->payment->id }}" value="incorrect_amount">
                                    <label class="btn btn-outline-danger w-100 text-start" for="accReason5-{{ $enquiry->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="accReason6-{{ $enquiry->payment->id }}" value="other">
                                    <label class="btn btn-outline-danger w-100 text-start" for="accReason6-{{ $enquiry->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 class="form-text mt-2">
                                <i class="fas fa-info-circle me-1"></i>This information will be included in the SMS to the member
                            </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"></i>
                            <div>
                                <strong>Important!</strong>
                                <p class="mb-0 small">This will reject the payment request and notify <strong>{{ $enquiry->full_name }}</strong> via SMS. 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" onclick="submitReject({{ $enquiry->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

    @if($enquiry->payment->status === 'approved')
    <!-- Pay Payment Modal with OTP -->
    <div class="modal fade" id="payModal-{{ $enquiry->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-money-bill-wave me-2"></i>Process 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 Processing</strong><br>
                            <small>Process payment of <strong>Tsh {{ number_format($enquiry->payment->amount) }}</strong> for {{ ucwords($enquiry->full_name) }}</small>
                        </div>
                    </div>

                    <!-- Step 1: Request OTP -->
                    <div id="otpRequestSection-{{ $enquiry->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="sendOTPPay({{ $enquiry->payment->id }})">
                                <i class="fas fa-mobile-alt me-1"></i>Send OTP
                            </button>
                        </div>
                    </div>

                    <!-- Step 2: Enter OTP -->
                    <div id="otpVerifySection-{{ $enquiry->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" maxlength="1" style="width: 50px;">
                                        <input type="text" class="form-control text-center otp-input" maxlength="1" style="width: 50px;">
                                        <input type="text" class="form-control text-center otp-input" maxlength="1" style="width: 50px;">
                                        <input type="text" class="form-control text-center otp-input" maxlength="1" style="width: 50px;">
                                        <input type="text" class="form-control text-center otp-input" maxlength="1" style="width: 50px;">
                                        <input type="text" class="form-control text-center otp-input" maxlength="1" style="width: 50px;">
                                    </div>
                                    <input type="hidden" id="fullOTP-{{ $enquiry->payment->id }}">
                                </div>
                            </div>
                            <button type="button" class="btn btn-success" onclick="verifyOTPPay({{ $enquiry->payment->id }})">
                                <i class="fas fa-check me-1"></i>Verify & Process 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>
    @endif
@endif

@endforeach

<!-- 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>

                <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
document.addEventListener('DOMContentLoaded', function() {
    // Handle OTP input auto-advance
    document.querySelectorAll('.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 OTP inputs
            const paymentId = this.closest('.modal').id.split('-')[1];
            const fullOTP = Array.from(inputs).map(i => i.value).join('');
            document.getElementById(`fullOTP-${paymentId}`).value = fullOTP;
        });

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

// Send OTP for payment
function sendOTPPay(paymentId) {
    fetch(`/payment/${paymentId}/send-otp-pay`, {
        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 payment
function verifyOTPPay(paymentId) {
    const otp = document.getElementById(`fullOTP-${paymentId}`).value;

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

    fetch(`/payment/${paymentId}/verify-otp-pay`, {
        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 => {
        if (data.success) {
            showAlert('Payment processed successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('OTP verification failed: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('Error verifying OTP', 'error');
    });
}

// Initiate payment with OTP
// Show file name when selected
function showFileName(enquiryId, input) {
    const fileNameDiv = document.getElementById(`fileName-${enquiryId}`);
    if (input.files && input.files[0]) {
        const fileName = input.files[0].name;
        const fileSize = (input.files[0].size / 1024 / 1024).toFixed(2); // Convert to MB
        fileNameDiv.innerHTML = `<i class="fas fa-check-circle me-1"></i>${fileName} (${fileSize} MB)`;
    } else {
        fileNameDiv.innerHTML = '';
    }
}

// Initiate payment with progress indicator
function initiatePaymentWithProgress(enquiryId) {
    const form = document.getElementById(`initiateForm-${enquiryId}`);
    const formData = new FormData(form);
    const progressDiv = document.getElementById(`initiateProgress-${enquiryId}`);
    const submitBtn = document.getElementById(`submitBtn-${enquiryId}`);

    // Validate amount
    const amount = formData.get('amount');
    if (!amount || amount < 1000) {
        showAlert('Please enter a valid amount (minimum Tsh 1,000)', 'warning');
        return;
    }

    // Show progress and disable button
    progressDiv.style.display = 'block';
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Processing...';

    // Submit form
    fetch(form.action, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            progressDiv.classList.remove('alert-info');
            progressDiv.classList.add('alert-success');
            progressDiv.innerHTML = `
                <div class="d-flex align-items-center">
                    <i class="fas fa-check-circle fa-2x text-success me-3"></i>
                    <div>
                        <strong>Payment Initiated Successfully!</strong><br>
                        <small>Redirecting to dashboard...</small>
                    </div>
                </div>
            `;
            showAlert('Payment initiated successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            progressDiv.style.display = 'none';
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Submit Request';
            showAlert('Failed to initiate payment: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        // If not JSON response, treat as redirect
        progressDiv.classList.remove('alert-info');
        progressDiv.classList.add('alert-success');
        progressDiv.innerHTML = `
            <div class="d-flex align-items-center">
                <i class="fas fa-check-circle fa-2x text-success me-3"></i>
                <div>
                    <strong>Payment Initiated Successfully!</strong><br>
                    <small>Redirecting to dashboard...</small>
                </div>
            </div>
        `;
        showAlert('Payment initiated successfully!', 'success');
        setTimeout(() => location.reload(), 2000);
    });
}

// Legacy function for compatibility
function initiatePaymentWithOTP(enquiryId) {
    const form = document.getElementById(`initiateForm-${enquiryId}`);
    const formData = new FormData(form);

    // Validate amount
    const amount = formData.get('amount');
    if (!amount || amount < 1000) {
        showAlert('Please enter a valid amount (minimum 1000)', 'warning');
        return;
    }

    // Submit form
    fetch(form.action, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('Payment initiated successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('Failed to initiate payment: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        // If not JSON response, treat as redirect
        showAlert('Payment initiated successfully!', 'success');
        setTimeout(() => location.reload(), 2000);
    });
}

// Submit reject payment
function submitReject(paymentId) {
    const form = document.getElementById(`rejectForm-${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 reject enquiry (for enquiries without payment)
function submitRejectEnquiry(enquiryId) {
    const form = document.getElementById(`rejectEnquiryForm-${enquiryId}`);
    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/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');
    });
}

// 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);
}

// Bulk file name display
function showBulkFileName(input) {
    const fileNameDiv = document.getElementById('bulkFileName');
    if (input.files && input.files[0]) {
        const fileName = input.files[0].name;
        const fileSize = (input.files[0].size / 1024 / 1024).toFixed(2);
        fileNameDiv.innerHTML = `<i class="fas fa-check-circle me-1"></i>${fileName} (${fileSize} MB)`;
    } else {
        fileNameDiv.innerHTML = '';
    }
}

// Open bulk initiate modal
function openBulkInitiateModal() {
    const checkboxes = document.querySelectorAll('.payment-checkbox:checked');
    const bulkItemsTable = document.getElementById('bulkItemsTable');
    const bulkSubmitCount = document.getElementById('bulkSubmitCount');

    if (checkboxes.length === 0) {
        showAlert('Please select at least one enquiry', 'warning');
        return;
    }

    // Clear previous items
    bulkItemsTable.innerHTML = '';

    // Populate table with selected items
    let index = 1;
    checkboxes.forEach(checkbox => {
        const row = checkbox.closest('tr');
        const enquiryId = checkbox.value;
        const memberName = row.getAttribute('data-member-name') || 'N/A';
        const checkNumber = row.getAttribute('data-check-number') || 'N/A';
        const enquiryType = row.getAttribute('data-enquiry-type') || 'N/A';

        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td class="text-center">${index}</td>
            <td><strong class="text-muted  text-uppercase">${memberName}</strong></td>
            <td><strong class="text-muted text-uppercase">${checkNumber}</strong></td>
            <td><small class="text-muted  text-uppercase">${enquiryType}</small></td>
            <td>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-money-bill-wave me-1"></i></span>
                    <input type="number" class="form-control bulk-amount-input" name="amounts[${enquiryId}]"
                           placeholder="Enter amount" min="1000" step="100" required data-enquiry-id="${enquiryId}">
                </div>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFromBulk(this, ${enquiryId})">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        bulkItemsTable.appendChild(tr);
        index++;
    });

    bulkSubmitCount.textContent = checkboxes.length;

    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('bulkInitiateModal'));
    modal.show();
}

// Remove item from bulk modal
function removeFromBulk(btn, enquiryId) {
    // Remove from table
    btn.closest('tr').remove();

    // Uncheck checkbox
    const checkbox = document.querySelector(`.payment-checkbox[value="${enquiryId}"]`);
    if (checkbox) {
        checkbox.checked = false;
    }

    // Update count
    const remainingRows = document.querySelectorAll('#bulkItemsTable tr').length;
    document.getElementById('bulkSubmitCount').textContent = remainingRows;

    // Close modal if no items left
    if (remainingRows === 0) {
        bootstrap.Modal.getInstance(document.getElementById('bulkInitiateModal')).hide();
        showAlert('No items remaining for bulk initiate', 'info');
    }

    // Update selection count in main table
    updateSelectionCount();
}

// Submit bulk initiate
function submitBulkInitiate() {
    const form = document.getElementById('bulkInitiateForm');
    const amountInputs = document.querySelectorAll('.bulk-amount-input');
    const progressDiv = document.getElementById('bulkInitiateProgress');
    const submitBtn = document.getElementById('bulkSubmitBtn');

    // Validate all amounts
    let hasError = false;
    amountInputs.forEach(input => {
        if (!input.value || parseFloat(input.value) < 1000) {
            input.classList.add('is-invalid');
            hasError = true;
        } else {
            input.classList.remove('is-invalid');
        }
    });

    if (hasError) {
        showAlert('Please enter valid amounts (minimum Tsh 1,000) for all items', 'warning');
        return;
    }

    // Show progress
    progressDiv.style.display = 'block';
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Processing...';

    // Prepare form data
    const formData = new FormData(form);

    // Submit via fetch
    fetch('{{ route("payment.bulk.initiate") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            progressDiv.classList.remove('alert-info');
            progressDiv.classList.add('alert-success');
            progressDiv.innerHTML = `
                <div class="d-flex align-items-center">
                    <i class="fas fa-check-circle fa-2x text-success me-3"></i>
                    <div>
                        <strong>Bulk Initiation Successful!</strong><br>
                        <small>${data.message || 'Payments initiated successfully'}</small>
                    </div>
                </div>
            `;
            showAlert(data.message || 'Payments initiated successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            progressDiv.style.display = 'none';
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Submit <span id="bulkSubmitCount"></span> Payments';
            showAlert(data.message || 'Failed to initiate payments', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        progressDiv.style.display = 'none';
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Submit <span id="bulkSubmitCount"></span> Payments';
        showAlert('An error occurred during processing', 'error');
    });
}
</script>

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

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

.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>

<!-- Bulk Initiate Payment Modal -->
<div class="modal fade" id="bulkInitiateModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 15px; overflow: hidden;">
            <!-- Modern Gradient Header -->
            <div class="modal-header border-0 bg-primary">
                <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-layer-group text-white fa-lg"></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-white mb-0">Bulk Initiate Payments</h5>
                        <small class="text-white opacity-75">Process multiple payment requests at once</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;">
                <!-- Progress Indicator (Hidden initially) -->
                <div id="bulkInitiateProgress" class="alert alert-info mb-4" style="display: none; border-radius: 10px;">
                    <div class="d-flex align-items-center">
                        <div class="spinner-border spinner-border-sm text-info me-3" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div>
                            <strong>Processing Bulk Payment Initiation...</strong><br>
                            <small>Please wait while we process your requests</small>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height: 6px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 100%"></div>
                    </div>
                </div>

                <form id="bulkInitiateForm" method="POST" enctype="multipart/form-data">
                    @csrf

                    <!-- Shared Document Upload -->
                    <div class="card border-0 mb-4">
                        <div class="card-body" style="background: white; border-radius: 10px;">
                            <h6 class="fw-bold text-dark mb-3">
                                <i class="fas fa-paperclip me-2 text-primary"></i>Supporting Documents (Shared for All)
                            </h6>
                            <div class="upload-area" style="border: 2px dashed #667eea; border-radius: 10px; padding: 2rem; text-align: center; background: #f8f9fa; cursor: pointer;" onclick="document.getElementById('bulkFileInput').click()">
                                <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-2"></i>
                                <p class="mb-1"><strong>Click to upload</strong> or drag and drop</p>
                                <small class="text-muted">PDF, DOC, DOCX, JPG, PNG (Max 10MB)</small>
                                <input type="file" id="bulkFileInput" class="d-none" name="document"
                                       accept=".pdf,.doc,.docx,.jpeg,.jpg,.png" onchange="showBulkFileName(this)">
                                <div id="bulkFileName" class="mt-2 text-success fw-bold"></div>
                            </div>
                            
                        </div>
                    </div>

                    <!-- Items List -->
                    <div class="card border-0">
                        <div class="card-body p-0" style="background: white; border-radius: 10px;">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead style="background: #f8f9fa;">
                                        <tr>
                                            <th width="50" class="text-center">SN</th>
                                            <th>NAME</th>
                                            <th>CHECK-NO</th>
                                            <th>ENQUIRY</th>
                                            <th width="250">PAYMENT AMOUNT<span class="text-danger">*</span></th>
                                            <th width="80" class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="bulkItemsTable">
                                        <!-- Items will be populated by JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                  
                </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-primary px-4" id="bulkSubmitBtn" onclick="submitBulkInitiate()" style="border-radius: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-paper-plane me-1"></i>Submit <span id="bulkSubmitCount"></span> Payments
                </button>
            </div>
        </div>
    </div>
</div>