@extends('Layout.mainlayout')

@section('content')
<div class="job-statistics-container">
    <!-- Header -->
    <div class="job-header">
        <div class="job-title">
            <span class="job-title-main">Advocates</span>
            <span class="job-title-sub">Management</span>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="job-stats-grid">
        <div class="job-stat-card">
            <div class="job-stat-label">Last Month Total Register Advocate</div>
            <div class="job-stat-value">{{ $lastMonthTotal }}</div>
            <div class="job-stat-change">
                <span>↑</span>
                <span>{{ $lastMonthTotal > 0 ? round(($thisMonthTotal / $lastMonthTotal) * 100, 1) : 0 }}%</span>
            </div>
        </div>
        <div class="job-stat-card">
            <div class="job-stat-label">This Month Total Register Advocate</div>
            <div class="job-stat-value">{{ $thisMonthTotal }}</div>
            <div class="job-stat-change">
                <span>↑</span>
                <span>{{ $thisMonthTotal > 0 ? round(($thisMonthTotal / max($lastMonthTotal, 1)) * 100, 1) : 0 }}%</span>
            </div>
        </div>
        <div class="job-stat-card">
            <div class="job-stat-label">OverAll Register Advocate</div>
            <div class="job-stat-value">{{ $overallTotal }}</div>
            <div class="job-stat-change">
                <span>↑</span>
                <span>100%</span>
            </div>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="job-search-container">
        <form method="GET" action="{{ route('admin.advocate') }}" id="searchForm">
            <div class="job-search-wrapper">
                <span class="job-search-icon">🔍</span>
                <input 
                    type="text" 
                    name="search" 
                    class="job-search-input" 
                    placeholder="Search by name or email..."
                    value="{{ request('search') }}"
                    id="searchInput"
                >
            </div>
        </form>
    </div>

    <!-- Schedule Management -->
    <div class="job-schedule-container">
        <h2 class="job-schedule-title">Advocate History</h2>
        <div style="overflow-x: auto;">
            <table class="job-schedule-table">
                <thead>
                    <tr>
                        <th>SI No.</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Date Join</th>
                        <th>Channel</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($advocates as $index => $advocate)
                    <tr>
                        <td>{{ $advocates->firstItem() + $index }}</td>
                        <td>
                            <div class="job-employee-cell">
                                <img 
                                    src="{{ $advocate->profile_image ? asset('storage/' . $advocate->profile_image) : 'https://ui-avatars.com/api/?name=' . urlencode($advocate->first_name . ' ' . $advocate->last_name) }}" 
                                    alt="{{ $advocate->first_name }} {{ $advocate->last_name }}" 
                                    class="job-employee-avatar"
                                >
                                <span class="job-employee-name">{{ $advocate->first_name }} {{ $advocate->last_name }}</span>
                            </div>
                        </td>
                        <td class="job-schedule-shift">{{ $advocate->email }}</td>
                        <td class="job-schedule-period">{{ $advocate->created_at->format('M d, Y') }}</td>
                        <td>
                            <span class="job-status-badge active">
                                {{ ucfirst($advocate->channel ?? 'Other') }}
                            </span>
                        </td>
                        <td>
                            <div class="job-action-cell">
                                <a 
                                    href="{{ route('advocate.detail', $advocate->id) }}" 
                                    class="job-view-btn" 
                                    title="View Details"
                                    data-toggle="tooltip"
                                >
                                    👁
                                </a>
                                <button class="job-menu-btn">⋮</button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 40px;">
                            <p style="color: #6b7280; font-size: 14px;">No advocates found</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="job-pagination">
            @if($advocates->onFirstPage())
                <button class="job-pagination-btn" disabled>‹ Previous</button>
            @else
                <a href="{{ $advocates->previousPageUrl() }}" class="job-pagination-btn">‹ Previous</a>
            @endif

            @foreach(range(1, $advocates->lastPage()) as $page)
                @if($page == $advocates->currentPage())
                    <button class="job-pagination-btn active">{{ $page }}</button>
                @else
                    <a href="{{ $advocates->url($page) }}" class="job-pagination-btn">{{ $page }}</a>
                @endif
            @endforeach

            @if($advocates->hasMorePages())
                <a href="{{ $advocates->nextPageUrl() }}" class="job-pagination-btn">Next ›</a>
            @else
                <button class="job-pagination-btn" disabled>Next ›</button>
            @endif
        </div>
    </div>
</div>

<!-- Add JavaScript for search and tooltip -->
<script>
    // Real-time search functionality
    document.getElementById('searchInput').addEventListener('input', function() {
        clearTimeout(window.searchTimeout);
        window.searchTimeout = setTimeout(function() {
            document.getElementById('searchForm').submit();
        }, 500); // 500ms delay after user stops typing
    });

    // Initialize tooltips (if using Bootstrap)
    document.addEventListener('DOMContentLoaded', function() {
        const viewButtons = document.querySelectorAll('[data-toggle="tooltip"]');
        viewButtons.forEach(function(button) {
            button.addEventListener('mouseenter', function() {
                this.style.position = 'relative';
            });
        });
    });

    // Add CSS for tooltip hover effect
    const style = document.createElement('style');
    style.textContent = `
        .job-view-btn {
            position: relative;
        }
        .job-view-btn:hover::after {
            content: attr(title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            padding: 5px 10px;
            background: #1f2937;
            color: #fff;
            font-size: 12px;
            white-space: nowrap;
            border-radius: 6px;
            margin-bottom: 5px;
            z-index: 1000;
        }
        .job-view-btn:hover::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #1f2937;
            margin-bottom: -5px;
        }
    `;
    document.head.appendChild(style);
</script>
@endsection