@extends('front.layouts.app-auth')

@push('page_css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@section('content')
<div class="">

    <!-- Breadcrumbs -->
    @include('front.components.breadcrumbs', [
        'currentPage' => 'Transactions',
        'breadcrumbs' => [
            ['label' => 'Campaigns', 'url' => route('profile.campaigns')]
        ]
    ])

    <!-- Top Bar with Title -->
    <div class="campaigns-top-bar">
        <div class="campaigns-top-bar-left">
            <h1 class="campaigns-main-title">{{ $campaign->title ?? 'Campaign' }} Transactions</h1>
            <p class="campaigns-subtitle">View all payment transactions for this campaign.</p>
        </div>
        <div class="campaigns-top-bar-right">
            <a href="{{ route('profile.campaigns') }}" class="btn-create-campaign">
                <i data-lucide="arrow-left" class="btn-icon"></i>
                Back to Campaigns
            </a>
        </div>
    </div>

    <!-- Campaign Summary Card -->
    <div class="stats mb-4">
        <div class="stat-card green ">
            <div class="stat-top-row">
                <div class="stat-value">{!! \App\Helpers\Helper::price($totalRaised ?? 0) !!}</div>
                <div class="stat-icon"><i data-lucide="dollar-sign"></i></div>
            </div>
            <div class="stat-label">Total Raised</div>
            <div class="stat-subtext stat-subtext-green">From {{$totalContributors }} contributors</div>
        </div>

        <div class="stat-card red">
            <div class="stat-top-row">
                <div class="stat-value">{!! \App\Helpers\Helper::price($campaign->fund_target ?? 0) !!}</div>
                <div class="stat-icon"><i data-lucide="target"></i></div>
            </div>
            <div class="stat-label">Campaign Goal</div>
            <div class="stat-subtext stat-subtext-red">Funding target</div>
        </div>

        <div class="stat-card purple">
            <div class="stat-top-row"> 
                <div class="stat-value">{{ number_format($totalProgress, 0) }}%</div>
                <div class="stat-icon"><i data-lucide="trending-up"></i></div>
            </div>
            <div class="stat-label">Progress</div>
            <div class="stat-subtext stat-subtext-purple">{{ number_format($totalProgress, 1) }}% of goal reached</div>
        </div>

        <div class="stat-card orange">
            <div class="stat-top-row">
                <div class="stat-value">{{ count($transactions ?? []) }}</div>
                <div class="stat-icon"><i data-lucide="users"></i></div>
            </div>
            <div class="stat-label">Total Contributions</div>
            <div class="stat-subtext stat-subtext-orange">Number of transactions</div>
        </div>
    </div>

    <!-- Transactions Table -->
    <div class="campaign-management-card">
        <h2 class="activity-card-title">
            <i data-lucide="receipt" class="wallet-section-icon"></i> Transaction History
        </h2>

        <div class="campaign-table-wrapper">
            <table class="campaign-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Contributor</th>                        
                        <th>Payment Method</th>
                        <th>Reference</th>
                        <th class="right-text-align">Rem. Goal</th>
                        <th class="right-text-align">Amount</th>
                        <th class="right-text-align">Admin Fees</th>
                        <th class="right-text-align">Amount Receivable</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
                    // $referenceNumber = $transaction->vendorPayoutTransaction->transaction_id ?? $transaction->reference_number ?? 'N/A';
                    $referenceNumber = $transaction->reference_number ?? 'N/A';

                    // Balance after
                    $balanceAfter = \App\Models\Users\WalletTransaction::calculateTransactionBalanceCampaign($transaction, $campaign->fund_target);
                    @endphp
                    <tr>
                        <td>
                            <div>
                                <div class="date-main">{{ $dateTimeFormatted }}</div>
                            </div>
                        </td>
                        <td>
                            <div class="campaign-name-cell">
                                <span class="type-label">{{ $transaction->contributor_name ?? 'N/A' }}</span>
                            </div>
                        </td>
                        
                        <td>
                            <div class="description-text">
                                {{ $paymentMethodLabel }}
                            </div>
                        </td>
                        <td>
                            @if($referenceNumber && $referenceNumber !== 'N/A')
                            <div class="reference-number">
                                {{ \Illuminate\Support\Str::limit($referenceNumber, 20) }}
                            </div>
                            @else
                            <span class="empty-text">—</span>
                            @endif
                        </td>
                        <td>
                            <div class="balance-text right-text-align">
                                {!! \App\Helpers\Helper::price($balanceAfter ?? 0, 2) !!}
                            </div>
                        </td>
                        <td>
                            <div class="amount amount-credit right-text-align">
                                {{ $transaction->formatted_amount }}
                            </div>
                        </td>
                        <td>
                            <div class="amount amount-credit right-text-align">
                                ${{ number_format($transaction->admin_fees, 2) }}
                            </div>
                        </td>
                        <td>
                            <div class="balance-text right-text-align">
                                {!! \App\Helpers\Helper::price($transaction->vendor_payout_amount ?? 0, 2) !!}
                            </div>
                        </td>
                        <td class="text-center">
                            <span class="status-dot {{ ($transaction->vendor_payout_transaction_id) ? 'status-dot-active' : $transaction->status_label['class'] }}"></span>
                            {{ ($transaction->vendor_payout_transaction_id) ? 'Transfered to Bank' : $transaction->status_label['name'] }}
                        </td>
                        <td class="text-right">
                            @php
                                $vendorPayout = $transaction->vendorPayoutTransaction ?? null;
                            @endphp
                            @if($transaction->vendor_payout_transaction_id && $vendorPayout)
                                <button type="button" 
                                        class="action-btn action-btn-view" 
                                        data-toggle="tooltip" 
                                        data-original-title="View Payout Details"
                                        onclick="showPayoutDetails({{ $vendorPayout->id }})">
                                    <i data-lucide="info" style="width: 16px; height: 16px;"></i>
                                </button>
                            @else
                                <span class="empty-text">—</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="empty-state">
                            <i data-lucide="receipt" class="empty-icon"></i>
                            <div class="empty-title">No transactions found</div>
                            <div class="empty-subtitle">No contributions have been made to this campaign yet.</div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if(isset($transactions) && method_exists($transactions, 'hasPages') && $transactions->hasPages())
        <div class="mt-4 d-flex justify-content-center">
            {{ $transactions->links() }}
        </div>
        @endif
    </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>

</div>
@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></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);
    });

    // 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);
                    // 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>
@endpush