@extends('Layout.mainlayout')

@section('content')


    <!-- Policy Stats Cards -->
<div class="policy-stats-container">
    <div class="policy-stat-card">
        <div class="policy-stat-icon green">✓</div>
        <div class="policy-stat-title">Total Revenue</div>
        <div class="policy-stat-value">₦ {{ number_format($total_revenue, 2) }}</div>
        <div class="policy-stat-subtitle">Total Income Make</div>
        <a href="#"><span class="policy-stat-arrow">↗</span></a>
    </div>
    <div class="policy-stat-card">
        <div class="policy-stat-icon orange">⏰</div>
        <div class="policy-stat-title">ACTIVE POLICIES</div>
        <div class="policy-stat-value">{{ $active_policies }}</div>
        <div class="policy-stat-subtitle">Total active insurance policies</div>
        <a href="#"><span class="policy-stat-arrow">↗</span></a>
    </div>
    <div class="policy-stat-card">
        <div class="policy-stat-icon yellow">⚠</div>
        <div class="policy-stat-title">Total Advocate</div>
        <div class="policy-stat-value">{{ $total_advocates }}</div>
        <div class="policy-stat-subtitle">Total Number of Advocate in the system</div>
        <a href="#"><span class="policy-stat-arrow">↗</span></a>
    </div>
    <div class="policy-stat-card">
        <div class="policy-stat-icon gray">⊗</div>
        <div class="policy-stat-title">Total Transaction</div>
        <div class="policy-stat-value">{{ $total_transactions }}</div>
        <div class="policy-stat-subtitle">Payment Made</div>
        <a href="#"><span class="policy-stat-arrow">↗</span></a>
    </div>
</div>

<!-- Policy Content -->
<div class="policy-content-wrapper">
    <!-- Policy Main Section -->
    <div class="policy-main-section">
        <div class="policy-section-header">
            <h2 class="policy-section-title">Last policies</h2>
            <a href="#" class="policy-section-link">↗</a>
        </div>

        <!-- Filter Bar -->
        <div class="policy-filter-bar">
            <div class="policy-search-box">
                <span class="policy-search-icon">🔍</span>
                <input type="text" placeholder="Search...">
            </div>
            <select class="policy-sort-dropdown">
                <option>Sort by Policy Type</option>
                <option>Thirty Insurance</option>
                <option>Comprehensive Insurance</option>
                <option>Enhance Insuranc</option>
            </select>
        </div>

        <!-- Table -->
        <div class="policy-table-container">
            <table class="policy-table">
                <thead>
                    <tr>
                        <th class="policy-checkbox-cell">☰</th>
                        <th>Client ↓</th>
                        <th>Policy ID ↓</th>
                        <th>Policy Class ↓</th>
                        <th>StartDate ↓</th>
                        <th>Status ↓</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($last_policies as $policy)
                    <tr>
                        <td class="policy-checkbox-cell"></td>
                        <td><span class="policy-client-name">{{ $policy->customer->title ?? 'N/A' }} {{ $policy->customer->fname ?? 'N/A' }}</span></td>
                        <td><span class="policy-id">#{{ $policy->policy_no ?? 'N/A' }}</span></td>
                        <td>{{ $policy->ins_class ?? 'N/A' }}</td>
                        <td>
                            <div class="policy-assignee">
                                <span class="policy-assignee-name">{{ $policy->startDate->format('d/m/Y') }}</span>
                            </div>
                        </td>
                        <td>
                            <span class="policy-status-badge {{ $policy->transaction && $policy->transaction->status == 'paid' ? 'policy-status-paid' : 'policy-status-failed' }}">
                                • {{ $policy->transaction ? ucfirst($policy->transaction->status) : 'Pending' }}
                            </span>
                        </td>
                        <td><span class="policy-action-menu">⋮</span></td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" style="text-align: center; padding: 20px;">No policies found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Policy Sidebar -->
    <div class="policy-sidebar-section">
        <!-- Performance Review Card -->
        <div class="performance-review-card">
            <div class="performance-review-header">
                <h3 class="performance-review-title">Recently Join Advocates</h3>
                <a href="#" class="policy-section-link">↗</a>
            </div>
            @forelse($recent_advocates as $advocate)
            <div class="performance-review-item">
                <div class="performance-review-info">
                    <div class="performance-review-name">{{ $advocate->first_name ?? 'N/A' }} {{ $advocate->last_name ?? 'N/A' }}</div>
                    <div class="performance-review-policies">{{ $advocate->phone_number ?? 'N/A' }}</div>
                </div>
                <div class="performance-review-status">
                    <div class="performance-review-status-text">Email</div>
                    <div class="performance-review-status-sub">{{ $advocate->email ?? 'N/A' }}</div>
                </div>
            </div>
            @empty
            <div style="text-align: center; padding: 20px; color: #999;">No advocates found</div>
            @endforelse
        </div>
    </div>
</div>




@endsection