@php
    $headerOption = [
        'title' => $module,
        'header_buttons' => [
            '<a class="'. \Config::get('view.buttons.secondary') .'" href="'. route('fund-rising-campaigns.index') .'" data-toggle="tooltip" data-original-title="Back to Campaigns"><i class="mdi mdi-arrow-left"></i> <span>Back</span></a>'
        ],
        'filters' => isset($filters) ? $filters : [],
        'data'    => isset($data) ? $data : []
    ];
@endphp
@extends('admin.layouts.layout', $headerOption)

@section('content')
    <!-- Campaign Information and Statistics Section -->
    <div class="col-xl-12 mb-4">
        <div class="row">
            <!-- Campaign and Creator Information (col-8) -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <!-- Campaign Image -->
                            <div class="col-auto">
                                @php
                                    $campaignImageUrl = null;
                                    if (is_array($campaign->campaign_image ?? [])) {
                                        $campaignImageUrl = $campaign->campaign_image['thumb'] ?? $campaign->campaign_image['original'] ?? null;
                                    } elseif (is_string($campaign->campaign_image ?? null) && !empty($campaign->campaign_image)) {
                                        $campaignImageUrl = $campaign->campaign_image;
                                    }
                                    if (!$campaignImageUrl) {
                                        $campaignImageUrl = asset('assets/images/no-image.jpg');
                                    }
                                @endphp
                                <img src="{{ $campaignImageUrl }}" alt="{{ $campaign->title ?? 'Campaign' }}" class="rounded" style="width: 120px; height: 120px; object-fit: cover;">
                            </div>
                            
                            <!-- Campaign Details -->
                            <div class="col">
                                <h5 class="mb-2">{{ $campaign->title ?? 'Campaign' }}</h5>
                                
                                <!-- Creator Information -->
                                @if($campaign->createdBy)
                                    <div class="d-flex  mb-2 left-txt-sec">
                                        <div class="d-flex align-items-center">
                                            @php
                                                $creatorAvatar = isset($campaign->createdBy->avatar['original']) ? $campaign->createdBy->avatar['original'] : asset('assets/images/no-profile.jpg');
                                                $creatorRoleTitle = $campaign->createdBy->currentUserRoleTitle ?? 'N/A';
                                            @endphp
                                            <img src="{{ $creatorAvatar }}" alt="{{ $campaign->createdBy->full_name ?? 'Creator' }}" class="rounded-circle me-2" style="width: 40px; height: 40px; object-fit: cover;">
                                            <div>
                                                <div class="font-weight-medium">{{ $campaign->createdBy->full_name ?? 'N/A' }}</div>
                                                <small class="text-muted">{{ $creatorRoleTitle }}</small>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <div class="row g-2">
                                                <div class="col-md-6">
                                                    <small class="text-muted d-block">Email</small>
                                                    <div class="font-size-12">{{ $campaign->createdBy->email ?? 'N/A' }}</div>
                                                </div>
                                                <div class="col-md-6">
                                                    <small class="text-muted d-block">Phone</small>
                                                    <div class="font-size-12">
                                                        @if($campaign->createdBy->phone && $campaign->createdBy->phone_code)
                                                            +{{ $campaign->createdBy->phone_code }}{{ $campaign->createdBy->phone }}
                                                        @else
                                                            N/A
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                    
                                    <!-- Bank Information -->
                                    @if($campaign->createdBy->userSettings)
                                        <div class="row g-2 mb-2 pb-2 border-bottom">
                                            <div class="col-12">
                                                <small class="text-muted d-block mb-1 font-size-13">Bank Information</small>
                                                <div class="row g-2">
                                                    <div class="col-md-4">
                                                        <small class="text-muted d-block">Account Holder</small>
                                                        <div class="font-size-13">{{ $campaign->createdBy->userSettings->bank_account_holder_name ?? 'N/A' }}</div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <small class="text-muted d-block">Account Number</small>
                                                        <div class="font-size-13">{{ $campaign->createdBy->userSettings->bank_account_number ? '****' . substr($campaign->createdBy->userSettings->bank_account_number, -4) : 'N/A' }}</div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <small class="text-muted d-block">Routing Number</small>
                                                        <div class="font-size-13">{{ $campaign->createdBy->userSettings->bank_routing_number ?? 'N/A' }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @else
                                    <div class="alert alert-info py-2 px-3 mb-0">
                                        <small>Creator information not available</small>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Statistics (col-4) -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body p-3">
                        <h6 class="card-title mb-3 font-size-15">Transaction Summary</h6>
                        
                        <!-- Total Contribution Received -->
                        <div class="d-flex align-items-center justify-content-between mb-2 pb-2 border-bottom">
                            <div class="d-flex align-items-center">
                                <div class="avatar-xs me-2">
                                    <span class="avatar-title rounded-circle bg-success text-white font-size-14">
                                        <i class="bx bx-dollar"></i>
                                    </span>
                                </div>
                                <small class="text-muted font-size-11">Total Contribution Received</small>
                            </div>
                            <div class="font-weight-medium font-size-14">{!! \App\Helpers\Helper::price($totalContributionReceived ?? 0) !!}</div>
                        </div>
                        
                        <!-- Total Admin Charges -->
                        <div class="d-flex align-items-center justify-content-between mb-2 pb-2 border-bottom">
                            <div class="d-flex align-items-center">
                                <div class="avatar-xs me-2">
                                    <span class="avatar-title rounded-circle bg-warning text-white font-size-14">
                                        <i class="bx bx-receipt"></i>
                                    </span>
                                </div>
                                <small class="text-muted font-size-11">Total Admin Charges</small>
                            </div>
                            <div class="font-weight-medium font-size-14">{!! \App\Helpers\Helper::price($totalAdminCharges ?? 0) !!}</div>
                        </div>
                        
                        <!-- Total Payable -->
                        <div class="d-flex align-items-center justify-content-between mb-2 pb-2 border-bottom">
                            <div class="d-flex align-items-center">
                                <div class="avatar-xs me-2">
                                    <span class="avatar-title rounded-circle bg-primary text-white font-size-14">
                                        <i class="bx bx-money"></i>
                                    </span>
                                </div>
                                <small class="text-muted font-size-11">Total Payable</small>
                            </div>
                            <div class="font-weight-medium font-size-14">{!! \App\Helpers\Helper::price($totalPayable ?? 0) !!}</div>
                        </div>
                        
                        <!-- Total Paid -->
                        <div class="d-flex align-items-center justify-content-between mb-2 pb-2 border-bottom">
                            <div class="d-flex align-items-center">
                                <div class="avatar-xs me-2">
                                    <span class="avatar-title rounded-circle bg-success text-white font-size-14">
                                        <i class="bx bx-check-circle"></i>
                                    </span>
                                </div>
                                <small class="text-muted font-size-11">Total Paid</small>
                            </div>
                            <div class="font-weight-medium font-size-14 text-success">{!! \App\Helpers\Helper::price($totalPaid ?? 0) !!}</div>
                        </div>
                        
                        <!-- Total Pending Transfer -->
                        <div class="d-flex align-items-center justify-content-between mb-0">
                            <div class="d-flex align-items-center">
                                <div class="avatar-xs me-2">
                                    <span class="avatar-title rounded-circle bg-warning text-white font-size-14">
                                        <i class="bx bx-time"></i>
                                    </span>
                                </div>
                                <small class="text-muted font-size-11">Total Pending Transfer</small>
                            </div>
                            <div class="font-weight-medium font-size-14 text-warning">{!! \App\Helpers\Helper::price($totalPendingTransfer ?? 0) !!}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mb-3">
        <div class="row">
            <div class="col-md-8">
                <div id="selectedTransactionsSummary" class="alert alert-info" style="display: none;">
                    <div class="row">
                        <div class="col-md-6">
                            <strong>Selected Reference Numbers:</strong>
                            <div id="selectedReferenceNumbers" class="mt-1"></div>
                        </div>
                        <div class="col-md-6">
                            <strong>Total Payable Amount:</strong>
                            <div id="totalPayableAmount" class="mt-1 font-weight-bold"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 text-right">
                <button type="button" class="btn btn-primary" id="updatePayoutStatusBtn">
                    <i class="mdi mdi-bank-transfer"></i> Update Bank Transfer Status
                </button>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="{!! \Config::get('view.table.table_class') !!}">
            <thead class="{!! \Config::get('view.table.table_head_class') !!}">
                <tr>
                    <th width="50">
                        <input type="checkbox" id="selectAllCheckbox" title="Select All">
                    </th>
                    <th>Date</th>
                    <th>Contributor</th>
                    <th>Payment Method</th>
                    <th>Txn Ref</th>
                    <th style="text-align: right;">Rem. Goal</th>
                    <th style="text-align: right;">Amount</th>
                    <th style="text-align: right;">Admin Fee</th>
                    <th style="text-align: right;">Payable</th>
                    <th>Transaction ID</th>
                    <th>Transaction Date</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($transactions as $transaction)
                    @php 
                        // Convert UTC to user's local timezone
                        $dateTimeFormatted = $transaction->transaction_date ? \App\Helpers\Helper::convertToLocalTime($transaction->transaction_date) : 'N/A';
                        
                        // Payment method
                        $paymentMethodLabel = $transaction->payment_method_label ?? 'N/A';
                        
                        // Reference number - use transaction reference_number, not vendor_payout_transaction_id
                        $referenceNumber = $transaction->reference_number ?? 'N/A';
                        
                        // Balance after
                        $balanceAfter = ($transaction) ? \App\Models\Users\WalletTransaction::calculateTransactionBalanceCampaign($transaction, $campaign->fund_target) : 0;
                        
                        // Contributor name
                        $contributorName = $transaction->contributor_name ?? 'N/A';
                        $isPayoutUpdated = !empty($transaction->vendor_payout_transaction_id);
                    @endphp
                    <tr>
                        <td>
                            <input type="checkbox" 
                                   class="transaction-checkbox" 
                                   name="transaction_ids[]" 
                                   value="{{ $transaction->id }}"
                                   data-transaction-id="{{ $transaction->id }}"
                                   data-reference-number="{{ $referenceNumber !== 'N/A' ? $referenceNumber : '' }}"
                                   data-payable-amount="{{ $transaction->vendor_payout_amount ?? 0 }}"
                                   {{ $isPayoutUpdated ? 'checked disabled' : '' }}>
                        </td>
                        <td>
                            {{ $dateTimeFormatted }}
                        </td>
                        <td>{{ $contributorName }}</td>
                        <td>{{ $paymentMethodLabel }}</td>
                        <td>
                            @if($referenceNumber && $referenceNumber !== 'N/A')
                                {{ \Illuminate\Support\Str::limit($referenceNumber, 20) }}
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-right">
                            {!! \App\Helpers\Helper::price($balanceAfter ?? 0) !!}
                        </td>
                        <td class="text-right">
                            {!! \App\Helpers\Helper::price($transaction->amount ?? 0) !!}
                        </td>
                        <td class="text-right">
                            {!! \App\Helpers\Helper::price($transaction->admin_fees ?? 0) !!}
                        </td>
                        <td class="text-right">
                            {!! \App\Helpers\Helper::price($transaction->vendor_payout_amount ?? 0) !!}
                        </td>
                        <td class="text-center">
                            @php
                                $vendorPayout = $transaction->vendorPayoutTransaction ?? null;
                            @endphp
                            {{ ($vendorPayout && isset($vendorPayout->transaction_id)) ? $vendorPayout->transaction_id : 'N/A' }}
                        </td>
                        <td class="text-center">
                            {{ ($vendorPayout && isset($vendorPayout->transaction_date)) ? \App\Helpers\Helper::convertToLocalTime($vendorPayout->transaction_date, false) : 'N/A' }}
                        </td>
                        <td class="text-center">
                            @php
                                $statusLabel = $transaction->status_label ?? ['name' => 'Unknown', 'class' => 'badge-soft-secondary'];
                            @endphp
                            <span class="badge badge-pill {{($transaction->vendor_payout_transaction_id) ? 'badge-soft-success': 'badge-soft-warning'}} bg-opacity-25 font-size-12">
                                {{ ($transaction->vendor_payout_transaction_id) ? 'Transferred' : 'Pending Transfer' }}
                            </span>
                        </td>
                        <td class="text-center">
                            @if($transaction->vendor_payout_transaction_id && $vendorPayout)
                                <button type="button" 
                                        class="btn btn-sm btn-info btn-rounded waves-effect waves-light" 
                                        data-toggle="tooltip" 
                                        data-original-title="View Payout Details"
                                        onclick="showPayoutDetails({{ $vendorPayout->id }})">
                                    <i class="mdi mdi-information-outline"></i>
                                </button>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="25">
                            <div class="alert alert-info">No transactions found</div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @include('admin.components.pagination')

    <!-- Update Payout Status Modal -->
    <div class="modal fade" id="updatePayoutStatusModal" tabindex="-1" role="dialog" aria-labelledby="updatePayoutStatusModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updatePayoutStatusModalLabel">Update Bank Transfer Status</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updatePayoutStatusForm" method="POST" action="{{ route('fund-rising-campaigns.update-payout-status', $campaign->id) }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="transaction_ids" id="selectedTransactionIds">
                        
                        <!-- Selected Transactions Summary -->
                        <div class="alert alert-info mb-3" id="modalSelectedSummary">
                            <div class="row">
                                <div class="col-md-6">
                                    <strong>Payment made reference number against:</strong>
                                    <div id="modalReferenceNumbers" class="mt-1"></div>
                                </div>
                                <div class="col-md-6">
                                    <strong>Total Payable Amount:</strong>
                                    <div id="modalTotalPayable" class="mt-1 font-weight-bold"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="transaction_id">Transaction ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="transaction_id" name="transaction_id" required placeholder="Enter transaction ID for the bank transfer">
                            <small class="form-text text-muted d-none">This field is required.</small>
                        </div>
                        
                        <div class="form-group mt-3">
                            <label for="transaction_date">Transaction Date <span class="text-danger">*</span></label>
                            <input type="text" class="form-control datepicker transaction-date-picker" id="transaction_date" name="transaction_date" required placeholder="Select date">
                            <small class="form-text text-muted d-none">This field is required.</small>
                        </div>
                        
                        <div class="form-group mt-3">
                            <label for="description">Note</label>
                            <textarea class="form-control" id="description" name="description" rows="4" placeholder="Enter description for the bank transfer status update (optional)"></textarea>
                            <small class="form-text text-muted d-none">Optional: Add a description for the bank transfer status update.</small>
                        </div>
                        
                        <div class="form-group mt-3">
                            <label for="transaction_attachment">Transaction Attachment</label>
                            <input type="file" class="form-control custom-file-input" id="transaction_attachment" name="transaction_attachment" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                            <small class="form-text text-muted d-none">Optional: Upload a single file (PDF, Image, or Document).</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" id="cancelModalBtn" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update Status</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Payout Transaction Details Modal -->
    <div class="modal fade" id="payoutDetailsModal" tabindex="-1" role="dialog" aria-labelledby="payoutDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="payoutDetailsModalLabel">Payout Transaction Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#payoutDetailsModal').modal('hide'); return false;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="payoutDetailsContent">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#payoutDetailsModal').modal('hide'); return false;">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('page_script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectAllCheckbox = document.getElementById('selectAllCheckbox');
        const updatePayoutStatusBtn = document.getElementById('updatePayoutStatusBtn');
        const updatePayoutStatusModal = document.getElementById('updatePayoutStatusModal');
        const updatePayoutStatusForm = document.getElementById('updatePayoutStatusForm');
        const selectedTransactionIdsInput = document.getElementById('selectedTransactionIds');

        // Helper function to get all enabled checkboxes
        function getEnabledCheckboxes() {
            return Array.from(document.querySelectorAll('.transaction-checkbox')).filter(cb => !cb.disabled);
        }

        // Helper function to update select all checkbox state
        function updateSelectAllState() {
            const enabledCheckboxes = getEnabledCheckboxes();
            if (enabledCheckboxes.length === 0) {
                if (selectAllCheckbox) {
                    selectAllCheckbox.checked = false;
                    selectAllCheckbox.disabled = true;
                }
                return;
            }
            
            if (selectAllCheckbox) {
                selectAllCheckbox.disabled = false;
                const allEnabledChecked = enabledCheckboxes.every(cb => cb.checked);
                const noneEnabledChecked = enabledCheckboxes.every(cb => !cb.checked);
                selectAllCheckbox.checked = allEnabledChecked;
                selectAllCheckbox.indeterminate = !allEnabledChecked && !noneEnabledChecked;
            }
        }

        // Select All functionality
        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('change', function() {
                const enabledCheckboxes = getEnabledCheckboxes();
                enabledCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
                updateSelectedTransactionsSummary();
            });
        }

        // Update select all checkbox state when individual checkboxes change
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('transaction-checkbox')) {
                updateSelectAllState();
                updateSelectedTransactionsSummary();
            }
        });

        // Function to update selected transactions summary
        function updateSelectedTransactionsSummary() {
            const checkedBoxes = Array.from(document.querySelectorAll('.transaction-checkbox:checked:not([disabled])'));
            const summaryDiv = document.getElementById('selectedTransactionsSummary');
            const referenceNumbersDiv = document.getElementById('selectedReferenceNumbers');
            const totalPayableDiv = document.getElementById('totalPayableAmount');
            
            if (checkedBoxes.length === 0) {
                summaryDiv.style.display = 'none';
                return;
            }
            
            // Collect reference numbers and calculate total payable
            const referenceNumbers = [];
            let totalPayable = 0;
            
            checkedBoxes.forEach(function(checkbox) {
                const refNumber = checkbox.getAttribute('data-reference-number');
                const payableAmount = parseFloat(checkbox.getAttribute('data-payable-amount')) || 0;
                
                if (refNumber && refNumber !== 'N/A' && refNumber.trim() !== '') {
                    referenceNumbers.push(refNumber);
                }
                totalPayable += payableAmount;
            });
            
            // Display reference numbers with comma separator
            if (referenceNumbers.length > 0) {
                referenceNumbersDiv.textContent = referenceNumbers.join(', ');
            } else {
                referenceNumbersDiv.textContent = '—';
            }
            
            // Display total payable amount formatted
            totalPayableDiv.textContent = '$' + totalPayable.toFixed(2);
            
            summaryDiv.style.display = 'block';
        }

        // Initial state update
        updateSelectAllState();
        updateSelectedTransactionsSummary();

        // Update Payout Status Button Click
        if (updatePayoutStatusBtn) {
            updatePayoutStatusBtn.addEventListener('click', function() {
                const enabledCheckboxes = getEnabledCheckboxes();
                const checkedCheckboxes = enabledCheckboxes.filter(cb => cb.checked);
                
                if (checkedCheckboxes.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No Selection',
                        text: 'Please check at least one transaction',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#ffc107'
                    });
                    return;
                }

                // Get selected transaction IDs
                const selectedIds = checkedCheckboxes.map(cb => cb.value);
                selectedTransactionIdsInput.value = JSON.stringify(selectedIds);

                // Update modal summary
                updateModalSummary(checkedCheckboxes);

                // Show modal
                $(updatePayoutStatusModal).modal('show');
            });
        }
        
        // Function to update modal summary
        function updateModalSummary(checkedBoxes) {
            const modalReferenceNumbersDiv = document.getElementById('modalReferenceNumbers');
            const modalTotalPayableDiv = document.getElementById('modalTotalPayable');
            
            if (!modalReferenceNumbersDiv || !modalTotalPayableDiv) {
                return;
            }
            
            // Collect reference numbers and calculate total payable
            const referenceNumbers = [];
            let totalPayable = 0;
            
            checkedBoxes.forEach(function(checkbox) {
                const refNumber = checkbox.getAttribute('data-reference-number');
                const payableAmount = parseFloat(checkbox.getAttribute('data-payable-amount')) || 0;
                
                if (refNumber && refNumber !== 'N/A' && refNumber.trim() !== '') {
                    referenceNumbers.push(refNumber);
                }
                totalPayable += payableAmount;
            });
            
            // Display reference numbers with comma separator
            if (referenceNumbers.length > 0) {
                modalReferenceNumbersDiv.textContent = referenceNumbers.join(', ');
            } else {
                modalReferenceNumbersDiv.textContent = '—';
            }
            
            // Display total payable amount formatted
            modalTotalPayableDiv.textContent = '$' + totalPayable.toFixed(2);
        }

        // Function to close modal
        function closeModal() {
            if (typeof $ !== 'undefined' && $.fn.modal) {
                $(updatePayoutStatusModal).modal('hide');
            } else {
                updatePayoutStatusModal.classList.remove('show');
                updatePayoutStatusModal.style.display = 'none';
                document.body.classList.remove('modal-open');
                const backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) {
                    backdrop.remove();
                }
                // Remove inline style if any
                updatePayoutStatusModal.removeAttribute('style');
            }
            
            // Reset form
            if (updatePayoutStatusForm) {
                updatePayoutStatusForm.reset();
                const submitBtn = updatePayoutStatusForm.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = 'Update Status';
                }
            }
        }

        // Close modal handlers - use event delegation to ensure it works
        if (updatePayoutStatusModal) {
            // Handle close button (X)
            updatePayoutStatusModal.addEventListener('click', function(e) {
                if (e.target.classList.contains('close') || e.target.closest('.close')) {
                    e.preventDefault();
                    e.stopPropagation();
                    closeModal();
                }
            });

            // Handle cancel button
            updatePayoutStatusModal.addEventListener('click', function(e) {
                const cancelBtn = e.target.closest('button[data-dismiss="modal"]');
                if (cancelBtn && cancelBtn.textContent.trim() === 'Cancel') {
                    e.preventDefault();
                    e.stopPropagation();
                    closeModal();
                }
            });
        }

        // Form submission
        if (updatePayoutStatusForm) {
            updatePayoutStatusForm.addEventListener('submit', function(e) {
                const transactionId = document.getElementById('transaction_id').value.trim();
                const transactionDate = document.getElementById('transaction_date').value;
                
                if (!transactionId) {
                    e.preventDefault();
                    alert('Please enter a transaction ID');
                    return false;
                }
                
                if (!transactionDate) {
                    e.preventDefault();
                    alert('Please select a transaction date');
                    return false;
                }

                // Show loading state
                const submitBtn = this.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="mdi mdi-loading mdi-spin"></i> Updating...';
                }
            });
        }
        
        // Initialize datepicker when modal is shown
        if (updatePayoutStatusModal) {
            $(updatePayoutStatusModal).on('shown.bs.modal', function() {
                const transactionDateField = $('#transaction_date');
                
                // Destroy any existing datepickers (both Bootstrap Material and flatpickr)
                if (transactionDateField.data('bootstrapMaterialDatePicker')) {
                    transactionDateField.bootstrapMaterialDatePicker('destroy');
                }
                // Destroy flatpickr if it exists
                if (transactionDateField.data('flatpickr')) {
                    transactionDateField.flatpickr().destroy();
                }
                
                // Initialize with m-d-Y format using Bootstrap Material DatePicker only
                // Set maxDate to today to prevent selecting future dates
                transactionDateField.bootstrapMaterialDatePicker({
                    format: 'MM-DD-YYYY',
                    clearButton: true,
                    weekStart: 1,
                    time: false,
                    maxDate: moment() // Set maximum date to today
                });
            });
        }

        // Reset form when modal is hidden (Bootstrap event)
        if (updatePayoutStatusModal) {
            $(updatePayoutStatusModal).on('hidden.bs.modal', function() {
                if (updatePayoutStatusForm) {
                    updatePayoutStatusForm.reset();
                    const submitBtn = updatePayoutStatusForm.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = 'Update Status';
                    }
                }
            });
        }

        // Also add direct click handler for cancel button by ID - multiple approaches
        const cancelModalBtn = document.getElementById('cancelModalBtn');
        if (cancelModalBtn) {
            // Remove any existing handlers and add new one
            cancelModalBtn.onclick = function(e) {
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                closeModal();
                return false;
            };
            
            // Also add event listener as backup
            cancelModalBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                closeModal();
                return false;
            }, true); // Use capture phase
        }

        // Handle cancel button via data-dismiss attribute as well
        $(document).on('click', '#cancelModalBtn, button[data-dismiss="modal"]', function(e) {
            if ($(this).text().trim() === 'Cancel' || $(this).attr('id') === 'cancelModalBtn') {
                e.preventDefault();
                e.stopPropagation();
                closeModal();
                return false;
            }
        });
    });

    // Function to show payout transaction details
    function showPayoutDetails(payoutTransactionId) {
        const modal = $('#payoutDetailsModal');
        const content = $('#payoutDetailsContent');
        
        // Show modal with loading state
        content.html('<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>');
        modal.modal('show');
        
        // Fetch payout transaction details
        $.ajax({
            url: '{{ route("fund-rising-campaigns.payout-transaction", ":id") }}'.replace(':id', payoutTransactionId),
            method: 'GET',
            success: function(response) {
                if (response.status === 200 && response.data && response.data.html) {
                    content.html(response.data.html);
                } else {
                    content.html('<div class="alert alert-danger">Failed to load payout transaction details.</div>');
                }
            },
            error: function(xhr) {
                content.html('<div class="alert alert-danger">Error loading payout transaction details. Please try again.</div>');
            }
        });
    }
    
    // Function to download file
    function downloadFile(url, fileName) {
        if (!url) {
            alert('File URL not available');
            return;
        }
        
        // Create a temporary anchor element to trigger download
        const link = document.createElement('a');
        link.href = url;
        link.download = fileName;
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    
    // Ensure payout details modal close buttons work
    $(document).ready(function() {
        // Handle close button (X) - use event delegation on document level
        $(document).on('click', '#payoutDetailsModal .close', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            $('#payoutDetailsModal').modal('hide');
            return false;
        });
        
        // Handle close button in footer
        $(document).on('click', '#payoutDetailsModal button.btn-secondary[data-dismiss="modal"]', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            $('#payoutDetailsModal').modal('hide');
            return false;
        });
        
        // Also handle when modal is shown
        $('#payoutDetailsModal').on('shown.bs.modal', function() {
            // Re-bind close handlers to ensure they work
            $(this).find('.close, button[data-dismiss="modal"]').off('click.modal-close').on('click.modal-close', function(e) {
                e.preventDefault();
                e.stopPropagation();
                $('#payoutDetailsModal').modal('hide');
                return false;
            });
        });
    });
</script>
@include('admin.components.date-time-picker')
@endpush