@extends('Layout.mainlayout')

@section('content')

    <div class="stats-row">
        <div class="stat-card">
            <div class="stat-label">TOTAL Transaction Made</div>
            <div class="stat-value">{{ number_format($total_transactions) }}</div>
            <div class="stat-change {{ $transaction_change >= 0 ? 'positive' : 'negative' }}">
                <span>{{ $transaction_change >= 0 ? '↗' : '↘' }}</span> {{ abs($transaction_change) }}% More than yesterday
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Income Made This Month</div>
            <div class="stat-value">₦{{ number_format($this_month_income, 2) }}</div>
            <div class="stat-change {{ $month_income_change >= 0 ? 'positive' : 'negative' }}">
                <span>{{ $month_income_change >= 0 ? '↗' : '↘' }}</span> {{ abs($month_income_change) }}% More than Last
                Month
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Fail/Incomplete Transaction</div>
            <div class="stat-value">{{ number_format($failed_transactions) }}</div>
            <div class="stat-change negative">
                <span>↘</span> Total No of Fail/Incomplete Transaction
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-label">TOTAL Income Made</div>
            <div class="stat-value">₦{{ number_format($total_income, 2) }}</div>
            <div class="stat-change positive">
                <span>↗</span> Overall Income Made
            </div>
        </div>
    </div>

    <!-- Search and Filter Bar -->
    <div class="filter-bar">
        <div class="search-wrapper">
            <span class="search-icon">🔍</span>
            <input type="text" name="search" placeholder="Search transactions..." value="{{ $current_search }}">
        </div>

        <input type="date" class="date-filter" name="date" placeholder="Filter by date" value="{{ $current_date }}">

        <select class="policy-filter" name="policy_type">
            <option value="">All Policy Types</option>
            <option value="third_party" {{ $current_policy_type == 'third_party' ? 'selected' : '' }}>Third Party</option>
            <option value="comprehensive" {{ $current_policy_type == 'comprehensive' ? 'selected' : '' }}>Comprehensive
            </option>
            <option value="enhanced" {{ $current_policy_type == 'enhanced' ? 'selected' : '' }}>Enhanced</option>
        </select>

        <button type="button" class="filter-button" onclick="applyFilters()">Filter</button>
        <button type="button" class="clear-filter-button" onclick="clearFilters()">Clear</button>

        
    </div>

    <div class="activity-section">
        <h2 class="section-title">Transaction History ({{ $transactions->count() }})</h2>

        @php
            $groupedTransactions = $transactions->groupBy(function ($transaction) {
                $date = $transaction->created_at;
                if ($date->isToday()) {
                    return 'TODAY';
                } elseif ($date->isYesterday()) {
                    return 'YESTERDAY';
                } else {
                    return $date->format('F d, Y');
                }
            });
        @endphp

        @forelse($groupedTransactions as $dateLabel => $dayTransactions)
            <div class="activity-group">
                <div class="activity-date">{{ strtoupper($dateLabel) }}</div>

                @foreach ($dayTransactions as $transaction)
                    <div class="activity-item">
                        <div class="activity-icon {{ $transaction->status == 'paid' ? 'received' : 'returned' }}">✕</div>
                        <div class="activity-amount">
                            ₦{{ number_format($transaction->amount, 2) }}
                            <div class="activity-amount-sub">{{ $transaction->reference ?? 'N/A' }}</div>
                        </div>
                        <div class="activity-status">
                            <span
                                class="status-badge {{ $transaction->status == 'paid' ? 'status-received' : 'status-returned' }}">
                                {{ ucfirst($transaction->status ?? 'Pending') }}
                            </span>
                        </div>
                        <div class="activity-details">
                            <div class="activity-school">{{ $transaction->customer->name ?? 'N/A' }}</div>
                            <div class="activity-description">
                                {{ $transaction->vehicle->policy_type ?? 'Insurance Policy' }} -
                                Policy No: {{ $transaction->vehicle->policy_no ?? 'N/A' }}
                            </div>
                        </div>
                        <div class="activity-link">
                            <a href="#">View transaction</a>
                            <div class="activity-link-date">Date: {{ $transaction->created_at->format('m/d/y') }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        @empty
            <div style="text-align: center; padding: 40px; color: #999;">
                <p style="font-size: 18px; margin-bottom: 10px;">No transactions found</p>
                <p style="font-size: 14px;">Try adjusting your search or filter criteria</p>
            </div>
        @endforelse

    </div>

    <script>
        function applyFilters() {
            const search = document.querySelector('input[name="search"]').value;
            const date = document.querySelector('input[name="date"]').value;
            const policyType = document.querySelector('select[name="policy_type"]').value;

            // Build query string
            const params = new URLSearchParams();
            if (search) params.append('search', search);
            if (date) params.append('date', date);
            if (policyType) params.append('policy_type', policyType);

            // Redirect with filters
            window.location.href = window.location.pathname + '?' + params.toString();
        }

        function clearFilters() {
            // Clear all input values
            document.querySelector('input[name="search"]').value = '';
            document.querySelector('input[name="date"]').value = '';
            document.querySelector('select[name="policy_type"]').value = '';

            // Redirect to clean URL
            window.location.href = window.location.pathname;
        }

        // Optional: Filter on Enter key in search box
        document.querySelector('input[name="search"]').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                applyFilters();
            }
        });
    </script>

@endsection