@extends('Layout.mainlayout')

@section('content')

<div class="employee-profile-container">
        <!-- Employee Header -->
        <div class="employee-header-section">
            <div class="employee-header-top">
                <div>
                    <div class="employee-name-section">
                        <h1 class="employee-name">{{ $advocate->first_name }} {{ $advocate->last_name }}</h1>
                    </div>
                    <p class="employee-subtitle">{{ $advocate->occupation ?? 'Advocate' }}</p>
                    <p class="employee-office">{{ $advocate->city ?? '' }}{{ $advocate->city && $advocate->state ? ', ' : '' }}{{ $advocate->state ?? '' }}</p>
                </div>
            </div>

            <div class="employee-info-grid">
                <div class="employee-photo-section">
                    <img 
                        src="{{ $advocate->profile_image ? asset('storage/' . $advocate->profile_image) : 'https://ui-avatars.com/api/?name=' . urlencode($advocate->first_name . ' ' . $advocate->last_name) . '&size=150' }}" 
                        alt="{{ $advocate->first_name }} {{ $advocate->last_name }}" 
                        class="employee-photo"
                    >
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Full Name</span>
                    <span class="employee-info-value">{{ $advocate->first_name }} {{ $advocate->last_name }}</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Joining Date</span>
                    <span class="employee-info-value">{{ $advocate->created_at->format('F d, Y') }}</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Referral Code</span>
                    <span class="employee-info-value">{{ $advocate->referral_code ?? 'N/A' }}</span>
                    <button class="employee-actions-menu">⋮</button>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Email</span>
                    <span class="employee-info-value">{{ $advocate->email }}</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Occupation</span>
                    <span class="employee-info-value">{{ $advocate->occupation ?? 'Advocate' }}</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Address</span>
                    <span class="employee-info-value">{{ $advocate->address ?? 'N/A' }}</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Phone Number</span>
                    <span class="employee-info-value">{{ $advocate->phone ?? 'N/A' }}</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Identification No</span>
                    <span class="employee-info-value">{{ $advocate->identification_number ?? 'N/A' }}</span>
                </div>
            </div>
        </div>


        <!-- Content Grid -->
        <div class="employee-content-grid">
            <!-- Left Column -->
            <div>


                <!-- Payment Section -->
                <div class="employee-payment-section">
                    <div class="employee-payment-card">
                        <div class="employee-payment-header">
                            <span class="employee-payment-title">Past Payment Settled</span>
                        </div>
                        <div class="employee-payment-grid">
                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">₦{{ number_format($totalPoliciesSales, 2) }}</span>
                                <span class="employee-payment-label">Policies Sales</span>
                            </div>

                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">{{ number_format($totalRefers) }}</span>
                                <span class="employee-payment-label">Total Refers</span>
                            </div>
                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">₦{{ number_format($totalAmountPaid, 2) }}</span>
                                <span class="employee-payment-label">Total Amount Paid</span>
                            </div>
                        </div>
                    </div>

                    <div class="employee-payment-card next">
                        <div class="employee-payment-header">
                            <span class="employee-payment-title">Next Payment</span>
                        </div>
                        <div class="employee-payment-grid">
                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">₦{{ number_format($totalPoliciesSales * 1.2, 2) }}</span>
                                <span class="employee-payment-label">Policies Sales</span>
                            </div>

                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">{{ number_format($totalRefers) }}</span>
                                <span class="employee-payment-label">Total Refers</span>
                            </div>
                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">₦{{ number_format($totalAmountPaid * 1.2, 2) }}</span>
                                <span class="employee-payment-label">Total Amount to be Paid</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Search Bar -->
                <div class="employee-search-container">
                    <form method="GET" action="{{ url()->current() }}" id="transactionSearchForm">
                        <div class="employee-search-wrapper">
                            <span class="employee-search-icon">🔍</span>
                            <input 
                                type="text" 
                                name="transaction_search" 
                                class="employee-search-input" 
                                placeholder="Search transactions..."
                                value="{{ request('transaction_search') }}"
                                id="transactionSearchInput"
                            >
                        </div>
                    </form>
                </div>

                <div class="activity-section">
                    <h2 class="section-title">Transaction History</h2>

                    @if(count($transactions) > 0)
                        @foreach($transactions as $transaction)
                        <div class="activity-group">
                            <div class="activity-date">For {{ $transaction->customer_name ?? 'Customer' }}</div>

                            <div class="activity-item">
                                <div class="activity-icon {{ $transaction->status == 'success' ? 'received' : 'returned' }}">✕</div>
                                <div class="activity-amount">
                                    ₦{{ number_format($transaction->amount, 2) }} NGN
                                    <div class="activity-amount-sub">Policy No: {{ $transaction->policy_number ?? 'N/A' }}</div>
                                </div>
                                <div class="activity-status">
                                    <span class="status-badge {{ $transaction->status == 'success' ? 'status-received' : 'status-returned' }}">
                                        {{ ucfirst($transaction->status) }}
                                    </span>
                                </div>
                                <div class="activity-details">
                                    <div class="activity-school">{{ $transaction->customer_name ?? 'N/A' }}</div>
                                    <div class="activity-description">{{ $transaction->policy_type ?? 'N/A' }}</div>
                                </div>
                                <div class="activity-link">
                                    <a href="{{ url('/Admin/dashboard/transaction/' . $transaction->id) }}">View transaction</a>
                                    <div class="activity-link-date">Date: {{ $transaction->created_at->format('m/d/y') }}</div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @else
                        <div class="activity-group">
                            <div class="activity-item" style="justify-content: center; padding: 40px;">
                                <p style="color: #6b7280; font-size: 14px; text-align: center;">No transactions found</p>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Pagination -->
                @if(is_object($transactions) && method_exists($transactions, 'links'))
                <div class="employee-pagination">
                    @if($transactions->onFirstPage())
                        <button class="employee-pagination-btn" disabled>‹ Previous</button>
                    @else
                        <a href="{{ $transactions->appends(request()->query())->previousPageUrl() }}" class="employee-pagination-btn">‹ Previous</a>
                    @endif

                    @php
                        $start = max(1, $transactions->currentPage() - 2);
                        $end = min($transactions->lastPage(), $transactions->currentPage() + 2);
                    @endphp

                    @for($page = $start; $page <= $end; $page++)
                        @if($page == $transactions->currentPage())
                            <button class="employee-pagination-btn active">{{ $page }}</button>
                        @else
                            <a href="{{ $transactions->appends(request()->query())->url($page) }}" class="employee-pagination-btn">{{ $page }}</a>
                        @endif
                    @endfor

                    @if($transactions->hasMorePages())
                        <a href="{{ $transactions->appends(request()->query())->nextPageUrl() }}" class="employee-pagination-btn">Next ›</a>
                    @else
                        <button class="employee-pagination-btn" disabled>Next ›</button>
                    @endif
                </div>
                @endif
            </div>

            <!-- Right Column -->
            <div>
                <!-- File Documents Section -->
                <div class="employee-files-section">
                    <div class="employee-files-header">
                        <h3 class="employee-files-title">File Documents</h3>
                    </div>
                    @if(count($documents) > 0)
                        @foreach($documents as $document)
                        <div class="employee-file-item">
                            <div class="employee-file-left">
                                <div class="employee-file-icon">📄</div>
                                <div>
                                    <div class="employee-file-name">{{ $document->name ?? 'Document' }}</div>
                                    <div class="employee-file-size">{{ $document->size ?? 'N/A' }}</div>
                                </div>
                            </div>
                            <a href="{{ asset('storage/' . $document->file_path) }}" download class="employee-file-download" style="color: #3b82f6; text-decoration: none; font-size: 12px;">Download</a>
                        </div>
                        @endforeach
                    @else
                        <!-- Show default documents if none uploaded -->
                        <div class="employee-file-item">
                            <div class="employee-file-left">
                                <div class="employee-file-icon">📄</div>
                                <div>
                                    <div class="employee-file-name">Agent Licence</div>
                                    <div class="employee-file-size">Not uploaded</div>
                                </div>
                            </div>
                        </div>
                        <div class="employee-file-item">
                            <div class="employee-file-left">
                                <div class="employee-file-icon">📄</div>
                                <div>
                                    <div class="employee-file-name">Identification ID</div>
                                    <div class="employee-file-size">Not uploaded</div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

<!-- Add JavaScript for search -->
<script>
    // Real-time search functionality for transactions
    const searchInput = document.getElementById('transactionSearchInput');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            clearTimeout(window.transactionSearchTimeout);
            window.transactionSearchTimeout = setTimeout(function() {
                document.getElementById('transactionSearchForm').submit();
            }, 500);
        });
    }
</script>

@endsection