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

@section('content')
@php
    $activeSource = $activeSource ?? 'campaign';
    $baseUrl = route('profile.transactions.index');
    $queryParams = $queryParams ?? ['type' => $activeType, 'source' => $activeSource];
    $isCampaign = ($activeSource === 'campaign');
    $isReceive = ($activeType === 'receive');
@endphp
<div class="">

    <!-- Breadcrumbs -->
    @include('front.components.breadcrumbs', ['currentPage' => 'Transactions'])

    <!-- Top Bar with Title -->
    <div class="campaigns-top-bar">
        <div class="campaigns-top-bar-left">
            <h1 class="campaigns-main-title">Transaction History</h1>
            <p class="campaigns-subtitle">View total received and spent amounts from campaigns and sponsorships.</p>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="stats mb-4">
        <div class="stat-card green">
            <div class="stat-top-row">
                <div class="stat-value">{!! \App\Helpers\Helper::price($totalReceived ?? 0) !!}</div>
                <div class="stat-icon"><i data-lucide="arrow-down-circle"></i></div>
            </div>
            <div class="stat-label">Total Received Amount</div>
            <div class="stat-subtext stat-subtext-green">From campaigns & sponsorships</div>
        </div>

        <div class="stat-card red">
            <div class="stat-top-row">
                <div class="stat-value">{!! \App\Helpers\Helper::price($totalSpent ?? 0) !!}</div>
                <div class="stat-icon"><i data-lucide="arrow-up-circle"></i></div>
            </div>
            <div class="stat-label">Total Spent Amount</div>
            <div class="stat-subtext stat-subtext-red">Campaigns & sponsorships</div>
        </div>
    </div>

    <!-- Tabs: Receive | Spent (links trigger full page load with query params) -->
    <div class="campaign-management-card mb-4">
        <ul class="nav nav-tabs transaction-main-tabs" id="transactionMainTabs" role="tablist">
            @if(in_array($userRoleSlug, ['athlete', 'fan']))            
            <li class="nav-item" role="presentation">
                <a href="{{ $baseUrl }}?type=receive&source={{ $activeSource }}" class="nav-link {{ $activeType === 'receive' ? 'active' : '' }}">Receive</a>
            </li>
            @endif
            <li class="nav-item" role="presentation">
                <a href="{{ $baseUrl }}?type=spent&source={{ $activeSource }}" class="nav-link {{ $activeType === 'spent' ? 'active' : '' }}">Spent</a>
            </li>
            
        </ul>

        <div class="tab-content pt-3" id="transactionMainTabContent">
            <div class="tab-pane fade show active" role="tabpanel">
                <!-- Sub-tabs: Campaign | Sponsor -->
                <ul class="nav nav-pills mb-3 transaction-sub-tabs" role="tablist">
                    <li class="nav-item">
                        <a href="{{ $baseUrl }}?type={{ $activeType }}&source=campaign" class="nav-link {{ $activeSource === 'campaign' ? 'active' : '' }}">Campaign</a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ $baseUrl }}?type={{ $activeType }}&source=sponsor" class="nav-link {{ $activeSource === 'sponsor' ? 'active' : '' }}">Sponsor</a>
                    </li>
                </ul>

                <!-- Single table: content depends on active tab -->
                <div class="campaign-table-wrapper">
                    @if($isCampaign)
                    <table class="campaign-table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Campaign</th>
                                @if($isReceive)
                                <th>Contributor</th>
                                @endif
                                <th>Reference</th>
                                <th class="right-text-align">Amount</th>
                                <th class="text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($transactionList as $tx)
                            @php
                                $dateFormatted = $tx->transaction_date ? \App\Helpers\Helper::showdate($tx->transaction_date, false, 'M d, Y') : 'N/A';
                                $timeFormatted = $tx->transaction_date ? \App\Helpers\Helper::showdate($tx->transaction_date, false, 'h:i A') : '';
                            @endphp
                            <tr>
                                <td>
                                    <div class="date-main">{{ $dateFormatted }}</div>
                                    <div class="date-time">{{ $timeFormatted }}</div>
                                </td>
                                <td>
                                    @if($tx->campaign ?? null)
                                    <a href="{{ route('front.campaigns.show', ['id' => $tx->campaign->id]) }}" class="type-label wallet-campaign-link">{{ \Illuminate\Support\Str::limit($tx->campaign->title ?? '--', 40) }}</a>
                                    @else
                                    <span class="empty-text">--</span>
                                    @endif
                                </td>
                                @if($isReceive)
                                <td>{{ $tx->contributor_name ?? '--' }}</td>
                                @endif
                                <td>{{ ($tx->reference_number ?? null) ? \Illuminate\Support\Str::limit($tx->reference_number, 16) : '--' }}</td>
                                <td class="right-text-align amount {{ $isReceive ? 'amount-credit' : 'amount-debit' }}">
                                    @if($isReceive){!! \App\Helpers\Helper::price($tx->amount) !!}@else -{!! \App\Helpers\Helper::price($tx->amount) !!}@endif
                                </td>
                                <td class="text-center"><span class="status-dot {{ ($tx->status_label ?? [])['class'] ?? '' }}"></span> {{ ($tx->status_label ?? [])['name'] ?? 'N/A' }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="{{ $isReceive ? 6 : 5 }}" class="empty-state">
                                    <i data-lucide="banknote" class="empty-icon"></i>
                                    <div class="empty-title">No {{ $isReceive ? 'received' : 'spent' }} campaign transactions</div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    @else
                    <table class="campaign-table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Sponsorship</th>
                                <th>Installment #</th>
                                <th class="right-text-align">Amount</th>
                                <th class="text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($transactionList as $inst)
                            @php
                                $releaseDate = $inst->approval_release_date ?? $inst->paid_at ?? $inst->installment_date;
                                $dateFormatted = $releaseDate ? (\Carbon\Carbon::parse($releaseDate)->format('M d, Y')) : 'N/A';
                                $currency = ($inst->sponsorship ?? null) ? ($inst->sponsorship->currency ?? 'USD') : 'USD';
                            @endphp
                            <tr>
                                <td><div class="date-main">{{ $dateFormatted }}</div></td>
                                <td>
                                    @if($inst->sponsorship ?? null)
                                    <a href="{{ route('profile.sponsorships.show', ['id' => $inst->sponsorship->id]) }}" class="type-label">{{ \Illuminate\Support\Str::limit($inst->sponsorship->offer_title ?? '--', 40) }}</a>
                                    @else
                                    <span class="empty-text">--</span>
                                    @endif
                                </td>
                                <td>{{ $inst->installment_number ?? '--' }}</td>
                                <td class="right-text-align amount {{ $isReceive ? 'amount-credit' : 'amount-debit' }}">
                                    @if($isReceive){!! \App\Helpers\Helper::price($inst->installment_amount, $currency) !!}@else -{!! \App\Helpers\Helper::price($inst->installment_amount, $currency) !!}@endif
                                </td>
                                <td class="text-center">{{ $inst->statuses[$inst->payment_status]['name'] ?? 'N/A' }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="empty-state">
                                    <i data-lucide="file-edit" class="empty-icon"></i>
                                    <div class="empty-title">No {{ $isReceive ? 'received' : 'spent' }} sponsor installments</div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    @endif
                </div>

                @if($transactionList->hasPages())
                <div class="mt-3 d-flex justify-content-center">
                    {{ $transactionList->withQueryString()->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>

</div>
@endsection

@push('page_script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
@endpush