@php
    $headerOption = [
        'title' => 'Payment Collections',
        'header_buttons' => [],
        'filters' => [],
        'data' => []
    ];
    
    $sponsorship = $sponsorship ?? null;
    $installments = $installments ?? collect();
    $beneficiaryName = $beneficiaryName ?? 'N/A';
    $sponsorName = $sponsorName ?? 'N/A';
@endphp
@extends('admin.layouts.layout', $headerOption)

@push('page_css')
    <link href="{{ asset('assets/css/admin-sponsorships.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
    <div class="payment-collections-page">
        <!-- Breadcrumbs -->
        <div class="breadcrumb-section">
            <span class="breadcrumb-item">Admin</span>
            <span class="breadcrumb-separator">></span>
            <a href="{{ route('sponsorships.index') }}" class="breadcrumb-item">Manage Sponsorships</a>
            <span class="breadcrumb-separator">></span>
            <span class="breadcrumb-item active">Payment Collections</span>
        </div>

        <!-- Back Link -->
        <div class="back-link-section">
            <a href="{{ route('sponsorships.index') }}" class="back-link">
                <i class="bx bx-arrow-back"></i>
                Back to Manage Sponsorships
            </a>
        </div>

        <!-- Page Title -->
        <div class="page-header-section">
            <h1 class="page-title">Payment Collections</h1>
            <p class="page-subtitle">{{ $beneficiaryName }} - {{ $sponsorship->offer_title ?? 'N/A' }}</p>
        </div>

        <!-- Summary Cards -->
        <div class="summary-cards-row payment-summary-cards">
            <div class="summary-card payment-summary-card-success">
                <div class="card-icon">
                    <i class="bx bx-dollar"></i>
                </div>
                <div class="card-content">
                    <div class="card-value">{!! \App\Helpers\Helper::price($totalCollected ?? 0, $sponsorship->currency ?? 'USD') !!}</div>
                    <div class="card-label">Total Collected From sponsor</div>
                    <div class="card-subtitle">All payments received</div>
                </div>
            </div>

            <div class="summary-card payment-summary-card-info">
                <div class="card-icon">
                    <i class="bx bx-trending-up"></i>
                </div>
                <div class="card-content">
                    <div class="card-value">{!! \App\Helpers\Helper::price($adminFees ?? 0, $sponsorship->currency ?? 'USD') !!}</div>
                    <div class="card-label">Admin Fees ({{ $adminFeePercent ?? \Config::get('settings.admin_transaction_fees', 10) }}%)</div>
                    <div class="card-subtitle">Platform revenue</div>
                </div>
            </div>

            <div class="summary-card payment-summary-card-primary">
                <div class="card-icon">
                    <i class="bx bx-wallet"></i>
                </div>
                <div class="card-content">
                    <div class="card-value">{!! \App\Helpers\Helper::price($totalPayable ?? 0, $sponsorship->currency ?? 'USD') !!}</div>
                    <div class="card-label">Total Payable To recipient</div>
                    <div class="card-subtitle">Net amount after fees</div>
                </div>
            </div>

            <div class="summary-card payment-summary-card-warning">
                <div class="card-icon">
                    <i class="bx bx-time"></i>
                </div>
                <div class="card-content">
                    <div class="card-value">{!! \App\Helpers\Helper::price($pendingAmount ?? 0, $sponsorship->currency ?? 'USD') !!}</div>
                    <div class="card-label">Pending Transfers</div>
                    <div class="card-subtitle">{{ $pendingCount ?? 0 }} pending</div>
                </div>
            </div>
        </div>

        <!-- Selected Transactions Summary -->
        <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 Milestones:</strong>
                                <div id="selectedMilestones" 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-success update-bank-transfer-btn" id="updatePayoutStatusBtn">
                        <i class="bx bx-dollar"></i>
                        Update Bank Transfer Status
                    </button>
                </div>
            </div>
        </div>

        <!-- Filter Tabs -->
        <div class="filter-section">
            <div class="filter-tabs">
                <a href="{{ route('sponsorships.payment-collections', $sponsorship->id) }}?status=all" 
                   class="filter-tab {{ $statusFilter === 'all' ? 'active' : '' }}">
                    All
                </a>
                <a href="{{ route('sponsorships.payment-collections', $sponsorship->id) }}?status=pending" 
                   class="filter-tab {{ $statusFilter === 'pending' ? 'active' : '' }}">
                    Pending Transfer
                </a>
                <a href="{{ route('sponsorships.payment-collections', $sponsorship->id) }}?status=transferred" 
                   class="filter-tab {{ $statusFilter === 'transferred' ? 'active' : '' }}">
                    Transferred
                </a>
            </div>
        </div>

        <!-- Transactions Table -->
        <div class="table-responsive">
            <table class="table table-hover admin-sponsorships-table payment-collections-table">
                <thead>
                    <tr>
                        <th width="50">
                            <input type="checkbox" id="selectAllCheckbox" title="Select All">
                        </th>
                        <th>DATE</th>
                        <th>SPONSORSHIP</th>
                        <th>RECIPIENT</th>
                        <th>MILESTONE</th>
                        <th>AMOUNT</th>
                        <th>ADMIN FEE ({{ $adminFeePercent ?? \Config::get('settings.admin_transaction_fees', 10) }}%)</th>
                        <th>PAYABLE</th>
                        <th>TRANSACTION ID</th>
                        <th>TRANSFER DATE</th>
                        <th>STATUS</th>
                        <th class="text-center">ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($installments as $installment)
                        @php
                            $isPaid = $installment->payment_status === \App\Models\Users\SponsorshipInstallment::STATUS_PAID;
                            $isApprovedAndReleased = $installment->payment_status === \App\Models\Users\SponsorshipInstallment::STATUS_APPROVED_AND_RELEASED;
                            $isPending = $installment->payment_status === \App\Models\Users\SponsorshipInstallment::STATUS_PENDING;
                            $isDisputed = $installment->payment_status === \App\Models\Users\SponsorshipInstallment::STATUS_DISPUTE;
                            $isSubmitted = $installment->payment_status === \App\Models\Users\SponsorshipInstallment::STATUS_SUBMITTED_FOR_APPROVAL;
                            
                            // Check if already transferred (has vendor_payout_transaction_id)
                            $isTransferred = !empty($installment->vendor_payout_transaction_id);
                            
                            // Only "Approved and Released" milestones without vendor_payout_transaction_id can be checked
                            // All others (pending, disputed, transferred, etc.) are disabled
                            $canCheck = $isApprovedAndReleased && !$isTransferred;
                            
                            // Transferred installments are checked and disabled
                            // Disputed and other statuses are disabled and unchecked
                            
                            $adminFeePercent = $adminFeePercent ?? \Config::get('settings.admin_transaction_fees', 10);
                            $adminFee = $installment->installment_amount * ($adminFeePercent / 100);
                            $payable = $installment->installment_amount - $adminFee;
                            
                            $installmentDate = $installment->installment_date 
                                ? \App\Helpers\Helper::showdate($installment->installment_date, false)
                                : 'N/A';
                            
                            // Get transfer date from vendor payout transaction if exists, otherwise from paid_at or approval_release_date
                            $transferDate = 'N/A';
                            if ($installment->vendorPayoutTransaction && $installment->vendorPayoutTransaction->transaction_date) {
                                $transferDate = \App\Helpers\Helper::showdate($installment->vendorPayoutTransaction->transaction_date, false);
                            } elseif ($installment->paid_at) {
                                $transferDate = \App\Helpers\Helper::showdate($installment->paid_at, false);
                            } elseif ($installment->approval_release_date) {
                                $transferDate = \App\Helpers\Helper::showdate($installment->approval_release_date, false);
                            }
                            
                            // Get transaction ID from vendor payout transaction if exists, otherwise from payment_reference
                            $transactionId = 'N/A';
                            if ($installment->vendorPayoutTransaction) {
                                $transactionId = $installment->vendorPayoutTransaction->transaction_id ?? 'N/A';
                            } elseif (!empty($installment->payment_reference) && $installment->payment_reference !== 'N/A') {
                                $transactionId = $installment->payment_reference;
                            }
                            $milestoneName = $installment->fund_purpose ?? 'Milestone ' . $installment->installment_number;
                            
                            $statusName = $installment->statuses[$installment->payment_status]['name'] ?? 'Unknown';
                            $statusClass = 'badge-secondary';
                            if ($isTransferred) {
                                $statusName = 'Transferred';
                                $statusClass = 'badge-success';
                            } elseif ($isApprovedAndReleased && !$isTransferred) {
                                $statusName = 'Pending Transfer';
                                $statusClass = 'badge-warning';
                            } elseif ($isPending) {
                                $statusName = 'Pending';
                                $statusClass = 'badge-warning';
                            } elseif ($isDisputed) {
                                $statusName = 'Dispute';
                                $statusClass = 'badge-danger';
                            } elseif ($isSubmitted) {
                                $statusName = 'Submitted for Approval';
                                $statusClass = 'badge-secondary';                            
                            } elseif ($isDisputed) {
                                $statusName = 'Dispute';
                                $statusClass = 'badge-danger';                           
                            }

                            
                            // Beneficiary initials for avatar
                            $beneficiaryInitials = strtoupper(substr($beneficiaryName, 0, 2));
                            if (strpos($beneficiaryName, ' ') !== false) {
                                $nameParts = explode(' ', $beneficiaryName);
                                $beneficiaryInitials = strtoupper(substr($nameParts[0], 0, 1) . substr($nameParts[count($nameParts) - 1], 0, 1));
                            }
                        @endphp
                        <tr>
                            <td>
                                <input type="checkbox" 
                                       class="transaction-checkbox" 
                                       name="installment_ids[]" 
                                       value="{{ $installment->id }}"
                                       data-installment-id="{{ $installment->id }}"
                                       data-milestone="{{ $milestoneName }}"
                                       data-payable-amount="{{ $payable }}"
                                       {{ $isTransferred ? 'checked disabled' : ($canCheck ? '' : 'disabled') }}>
                            </td>
                            <td>{{ $installmentDate }}</td>
                            <td>
                                <div class="sponsorship-info">
                                    <div class="sponsorship-title">{{ $sponsorship->offer_title ?? 'N/A' }}</div>
                                    <div class="sponsorship-sponsor">{{ $sponsorName }}</div>
                                </div>
                            </td>
                            <td>
                                <div class="recipient-info">
                                    <div class="recipient-avatar">{{ $beneficiaryInitials }}</div>
                                    <div class="recipient-details">
                                        <div class="recipient-name">{{ $beneficiaryName }}</div>
                                        <div class="recipient-type">{{ ucfirst($sponsorship->beneficiary_type ?? 'N/A') }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $milestoneName }}</td>
                            <td class="amount-cell">{!! \App\Helpers\Helper::price($installment->installment_amount, $sponsorship->currency ?? 'USD') !!}</td>
                            <td class="amount-cell admin-fee-cell">{!! \App\Helpers\Helper::price($adminFee, $sponsorship->currency ?? 'USD') !!}</td>
                            <td class="amount-cell payable-cell">{!! \App\Helpers\Helper::price($payable, $sponsorship->currency ?? 'USD') !!}</td>
                            <td>{{ $transactionId }}</td>
                            <td>{{ $transferDate }}</td>
                            <td>
                                <span class="badge {{ $statusClass }}">{{ $statusName }}</span>
                            </td>
                            <td class="text-center">
                                @php
                                    $vendorPayout = $installment->vendorPayoutTransaction ?? null;
                                @endphp
                                @if($isTransferred && $vendorPayout)
                                    <button type="button" 
                                            class="btn btn-sm btn-info transaction-info-btn" 
                                            data-toggle="tooltip" 
                                            data-original-title="View Transfer Details"
                                            onclick="showPayoutDetails({{ $vendorPayout->id }})">
                                        <!-- <i data-lucide="info" style="width: 16px; height: 16px;"></i> -->
                                        <i class="mdi mdi-information-outline"></i>
                                    </button>
                                @else
                                    <span class="empty-action">—</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="12" class="text-center">
                                <div class="no-data-message">No transactions found</div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Update Bank Transfer 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('sponsorships.update-transfer-status', $sponsorship->id) }}" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <input type="hidden" name="installment_ids" id="selectedInstallmentIds">
                            
                            <!-- 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="modalMilestones" 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">Transfer 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>

        <!-- Transaction Summary -->
        <div class="transaction-summary-section">
            <h3 class="summary-section-title">Transaction Summary</h3>
            <div class="summary-cards-row payment-summary-cards">
                <div class="summary-card payment-summary-card-white">
                    <div class="card-content">
                        <div class="card-label-small">Total Collected</div>
                        <div class="card-value-small">{!! \App\Helpers\Helper::price($totalCollected ?? 0, $sponsorship->currency ?? 'USD') !!}</div>
                    </div>
                </div>

                <div class="summary-card payment-summary-card-info">
                    <div class="card-icon-small">
                        <i class="bx bx-trending-up"></i>
                    </div>
                    <div class="card-content">
                        <div class="card-label-small">Total Admin Fees</div>
                        <div class="card-value-small">{!! \App\Helpers\Helper::price($adminFees ?? 0, $sponsorship->currency ?? 'USD') !!}</div>
                    </div>
                </div>

                <div class="summary-card payment-summary-card-primary-light">
                    <div class="card-icon-small">
                        <i class="bx bx-wallet"></i>
                    </div>
                    <div class="card-content">
                        <div class="card-label-small">Total Payable</div>
                        <div class="card-value-small">{!! \App\Helpers\Helper::price($totalPayable ?? 0, $sponsorship->currency ?? 'USD') !!}</div>
                    </div>
                </div>

                <div class="summary-card payment-summary-card-success">
                    <div class="card-icon-small">
                        <i class="bx bx-check-circle"></i>
                    </div>
                    <div class="card-content">
                        <div class="card-label-small">Total Transferred</div>
                        <div class="card-value-small">{!! \App\Helpers\Helper::price($totalPayable ?? 0, $sponsorship->currency ?? 'USD') !!}</div>
                    </div>
                </div>

                <div class="summary-card payment-summary-card-warning">
                    <div class="card-icon-small">
                        <i class="bx bx-time"></i>
                    </div>
                    <div class="card-content">
                        <div class="card-label-small">Pending Transfers</div>
                        <div class="card-value-small">{!! \App\Helpers\Helper::price($pendingAmount ?? 0, $sponsorship->currency ?? 'USD') !!}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('page_script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
        
        // Re-initialize icons after any dynamic content is added
        setTimeout(function() {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }, 100);
        const selectAllCheckbox = document.getElementById('selectAllCheckbox');
        const updatePayoutStatusBtn = document.getElementById('updatePayoutStatusBtn');
        const updatePayoutStatusModal = document.getElementById('updatePayoutStatusModal');
        const updatePayoutStatusForm = document.getElementById('updatePayoutStatusForm');
        const selectedInstallmentIdsInput = document.getElementById('selectedInstallmentIds');

        // 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 milestonesDiv = document.getElementById('selectedMilestones');
            const totalPayableDiv = document.getElementById('totalPayableAmount');
            
            if (checkedBoxes.length === 0) {
                if (summaryDiv) summaryDiv.style.display = 'none';
                return;
            }
            
            // Collect milestones and calculate total payable
            const milestones = [];
            let totalPayable = 0;
            
            checkedBoxes.forEach(function(checkbox) {
                const milestone = checkbox.getAttribute('data-milestone');
                const payableAmount = parseFloat(checkbox.getAttribute('data-payable-amount')) || 0;
                
                if (milestone && milestone.trim() !== '') {
                    milestones.push(milestone);
                }
                totalPayable += payableAmount;
            });
            
            // Display milestones with comma separator
            if (milestonesDiv) {
                if (milestones.length > 0) {
                    milestonesDiv.textContent = milestones.join(', ');
                } else {
                    milestonesDiv.textContent = '—';
                }
            }
            
            // Display total payable amount formatted
            if (totalPayableDiv) {
                totalPayableDiv.textContent = '$' + totalPayable.toFixed(2);
            }
            
            if (summaryDiv) 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) {
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'warning',
                            title: 'No Selection',
                            text: 'Please check at least one transaction',
                            confirmButtonText: 'OK',
                            confirmButtonColor: '#ffc107'
                        });
                    } else {
                        alert('Please check at least one transaction');
                    }
                    return;
                }

                // Get selected installment IDs
                const selectedIds = checkedCheckboxes.map(cb => cb.value);
                if (selectedInstallmentIdsInput) {
                    selectedInstallmentIdsInput.value = JSON.stringify(selectedIds);
                }

                // Update modal summary
                updateModalSummary(checkedCheckboxes);

                // Show modal
                if (typeof $ !== 'undefined' && $.fn.modal) {
                    $(updatePayoutStatusModal).modal('show');
                } else {
                    updatePayoutStatusModal.classList.add('show');
                    updatePayoutStatusModal.style.display = 'block';
                }
            });
        }
        
        // Function to update modal summary
        function updateModalSummary(checkedBoxes) {
            const modalMilestonesDiv = document.getElementById('modalMilestones');
            const modalTotalPayableDiv = document.getElementById('modalTotalPayable');
            
            if (!modalMilestonesDiv || !modalTotalPayableDiv) {
                return;
            }
            
            // Collect milestones and calculate total payable
            const milestones = [];
            let totalPayable = 0;
            
            checkedBoxes.forEach(function(checkbox) {
                const milestone = checkbox.getAttribute('data-milestone');
                const payableAmount = parseFloat(checkbox.getAttribute('data-payable-amount')) || 0;
                
                if (milestone && milestone.trim() !== '') {
                    milestones.push(milestone);
                }
                totalPayable += payableAmount;
            });
            
            // Display milestones with comma separator
            if (milestones.length > 0) {
                modalMilestonesDiv.textContent = milestones.join(', ');
            } else {
                modalMilestonesDiv.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();
                }
            }
            
            // 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
        if (updatePayoutStatusModal) {
            updatePayoutStatusModal.addEventListener('click', function(e) {
                if (e.target.classList.contains('close') || e.target.closest('.close')) {
                    e.preventDefault();
                    e.stopPropagation();
                    closeModal();
                }
            });

            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="bx bx-loader-alt bx-spin"></i> Updating...';
                }
            });
        }
        
        // Initialize datepicker when modal is shown
        if (updatePayoutStatusModal && typeof $ !== 'undefined') {
            $(updatePayoutStatusModal).on('shown.bs.modal', function() {
                const transactionDateField = $('#transaction_date');
                
                // Destroy any existing datepickers
                if (transactionDateField.data('bootstrapMaterialDatePicker')) {
                    transactionDateField.bootstrapMaterialDatePicker('destroy');
                }
                if (transactionDateField.data('flatpickr')) {
                    transactionDateField.flatpickr().destroy();
                }
                
                // Initialize with m-d-Y format using Bootstrap Material DatePicker
                if (typeof moment !== 'undefined') {
                    transactionDateField.bootstrapMaterialDatePicker({
                        format: 'MM-DD-YYYY',
                        clearButton: true,
                        weekStart: 1,
                        time: false,
                        maxDate: moment()
                    });
                }
            });
        }

        // Reset form when modal is hidden
        if (updatePayoutStatusModal && typeof $ !== 'undefined') {
            $(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';
                    }
                }
            });
        }

        // Cancel button handler
        const cancelModalBtn = document.getElementById('cancelModalBtn');
        if (cancelModalBtn) {
            cancelModalBtn.onclick = function(e) {
                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("sponsorships.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);
                    // Re-initialize Lucide icons after content is loaded
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                } 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