@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' => 'Wallet'])

    <!-- Top Bar with Title -->
    <div class="campaigns-top-bar">
        <div class="campaigns-top-bar-left">
            <h1 class="campaigns-main-title">My Wallet</h1>
            <p class="campaigns-subtitle">View your transaction history and manage your balance.</p>
        </div>
    </div>

    <!-- Wallet Balance Card -->
    <div class="stats mb-4">
        <div class="stat-card green ">
            <div class="stat-top-row">
                <div class="stat-value">{!! \App\Helpers\Helper::price($walletBalance ?? 0) !!}</div>
                <div class="stat-icon"><i data-lucide="wallet"></i></div>
            </div>
            <div class="stat-label">Current Balance</div>
            <div class="stat-subtext stat-subtext-green">Available for withdrawal</div>
        </div>

        <div class="stat-card red">
            <div class="stat-top-row">
                <div class="stat-value">{!! \App\Helpers\Helper::price($totalCredits ?? 0) !!}</div>
                <div class="stat-icon"><i data-lucide="arrow-down-circle"></i></div>
            </div>
            <div class="stat-label">Total Credits</div>
            <div class="stat-subtext stat-subtext-red">All time</div>
        </div>

        <div class="stat-card purple">
            <div class="stat-top-row">
                <div class="stat-value">{!! \App\Helpers\Helper::price($thisMonthCredits ?? 0) !!}</div>
                <div class="stat-icon"><i data-lucide="trending-up"></i></div>
            </div>
            <div class="stat-label">This Month Credits</div>
            <div class="stat-subtext stat-subtext-purple">Current month</div>
        </div>

        <div class="stat-card orange">
            <div class="stat-top-row">
                <div class="stat-value">{!! \App\Helpers\Helper::price($thisMonthDebits ?? 0) !!}</div>
                <div class="stat-icon"><i data-lucide="arrow-up-circle"></i></div>
            </div>
            <div class="stat-label">This Month Debits</div>
            <div class="stat-subtext stat-subtext-orange">Current month</div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="campaign-management-card mb-4 pb-1 pt-2">
        <div class="filter-form">
            <form method="GET" action="{{ route('profile.wallet') }}" class="wallet-filter-form">
                <div class="filter-form-row">
                    <div class="filter-form-group">
                        <label class="form-label">Date From</label>
                        <input type="date" name="date_from" value="{{ $dateFrom }}" class="form-control">
                    </div>
                    <div class="filter-form-group">
                        <label class="form-label">Date To</label>
                        <input type="date" name="date_to" value="{{ $dateTo }}" class="form-control">
                    </div>
                    <div class="filter-form-group">
                        <label class="form-label">Transaction Type</label>
                        <select name="transaction_type" class="form-control">
                            @foreach($transactionTypes as $value => $label)
                            <option value="{{ $value }}" {{ $typeFilter == $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-form-group">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-control">
                            @foreach($statusOptions as $value => $label)
                            <option value="{{ $value }}" {{ $statusFilter == $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-form-group filter-form-buttons">
                        <button type="submit" class="btn btn-primary"> <i data-lucide="search"></i>  Filter </button>
                        @if($dateFrom || $dateTo || ($typeFilter && $typeFilter !== 'all') || ($statusFilter && $statusFilter !== 'all'))
                        <a href="{{ route('profile.wallet') }}" class="btn btn-secondary text-black">
                            <i data-lucide="refresh-cw"></i> Clear
                        </a>
                        @endif
                    </div>
                </div>
            </form>
        </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>Campaign</th>
                        <th>Description</th>
                        <th>Reference</th>
                        <th>Amount</th>
                        <th>Balance After</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transactions as $transaction)
                    @php 
   
                    $formattedDate = $transaction->transaction_date ? \App\Helpers\Helper::showdate($transaction->transaction_date, false, 'M d, Y') : 'N/A';
                    $formattedTime = $transaction->transaction_date ? \App\Helpers\Helper::showdate($transaction->transaction_date, false, 'h:i A') : '';

                    // Format amount using model's formatted_amount accessor
                    $formattedAmount = $transaction->formatted_amount;

                    
                    @endphp
                    <tr>
                        <td>
                            <div>
                                <div class="date-main">{{ $formattedDate }}</div>
                                <div class="date-time">{{ $formattedTime }}</div>
                            </div>
                        </td> 
                        <td width="20%">
                            @if($transaction->campaign)
                            <div class="campaign-name-cell">
                                <a href="{{ route('front.campaigns.show', ['id' => $transaction->campaign->id]) }}" target="_blank" class="type-label wallet-campaign-link">
                                    {{ \Illuminate\Support\Str::limit($transaction->campaign->title ?? '--', 50) }}
                                </a>
                            </div>
                            @else
                            <span class="empty-text">--</span>
                            @endif
                        </td>
                        <td>
                            <div>
                                <div class="description-text">{{ $transaction->title ?? 'Transaction' }}</div>
                                @if(isset($transaction->description) && $transaction->description)
                                <div class="description-subtext">{{ \Illuminate\Support\Str::limit($transaction->description, 50) }}</div>
                                @endif
                            </div>
                        </td>
                        <td>
                            @if(isset($transaction->reference_number) && $transaction->reference_number)
                            <div class="reference-number">
                                {{ \Illuminate\Support\Str::limit($transaction->reference_number, 20) }}
                            </div>
                            @else
                                <span class="empty-text">--</span>
                            @endif
                        </td>
                        <td>
                            <div class="amount {{ $transaction->isCredit() ? 'amount-credit' : 'amount-debit' }}">
                                {{ $formattedAmount }}
                            </div>
                        </td>
                        <td>
                            <div class="balance-text">
                                {!! \App\Helpers\Helper::price($transaction->balance_after ?? 0) !!}
                            </div>
                        </td>
                        <td>
                            <span class="status-dot {{ $transaction->status_label['class'] }}"></span>
                            {{ $transaction->status_label['name'] }}
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="empty-state">
                            <i data-lucide="receipt" class="empty-icon"></i>
                            <div class="empty-title">No transactions found</div>
                            <div class="empty-subtitle">Start by making a transaction to see it here.</div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($transactions->hasPages())
        <div class="mt-4 d-flex justify-content-center">
            {{ $transactions->links() }}
        </div>
        @endif
    </div>

</div>
@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Flatpickr for date inputs
        if (typeof flatpickr !== 'undefined') {
            flatpickr('input[type="date"]', {
                dateFormat: 'Y-m-d',
            });
        }

        // Initialize Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
@endpush