@extends('layouts.brand')

@section('title', 'Agent Dashboard - Bharat Ayur Setu')

@section('styles')
<style>
    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }
    .metric-card {
        padding: 30px;
        text-align: center;
    }
    .metric-value {
        font-size: 32px;
        font-weight: 700;
        color: var(--primary);
    }
    .metric-label {
        font-size: 14px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
    }
</style>
@endsection

@section('content')
<div class="container animate-fade-in" style="padding: 40px 0;">
    <div class="welcome-card" style="background: var(--ayurveda); color: white; padding: 40px; border-radius: 20px; margin-bottom: 40px;">
        <h2>Agent Network Center</h2>
        <p>Bridging communities with healthcare excellence.</p>
    </div>

    <div class="metrics-grid">
        <div class="card metric-card">
            <div class="metric-value">124</div>
            <div class="metric-label">Total Patients</div>
        </div>
        <div class="card metric-card">
            <div class="metric-value">₹45,200</div>
            <div class="metric-label">Commissions</div>
        </div>
        <div class="card metric-card">
            <div class="metric-value">12</div>
            <div class="metric-label">Active Referrals</div>
        </div>
        <div class="card metric-card">
            <div class="metric-value">4.8</div>
            <div class="metric-label">Agent Rating</div>
        </div>
    </div>

    <div class="section-header">
        <h3>Managed Patients</h3>
    </div>

    <div class="card" style="padding: 0; overflow: hidden;">
        <table class="appointment-table" style="width: 100%; border-collapse: collapse;">
            <thead style="background: var(--bg-light);">
                <tr>
                    <th style="padding: 15px; text-align: left;">Name</th>
                    <th style="padding: 15px; text-align: left;">Contact</th>
                    <th style="padding: 15px; text-align: left;">City</th>
                    <th style="padding: 15px; text-align: left;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($patients as $patient)
                    <tr style="border-bottom: 1px solid #edf2f7;">
                        <td style="padding: 15px;">{{ $patient->name }}</td>
                        <td style="padding: 15px;">{{ $patient->phone ?? 'N/A' }}</td>
                        <td style="padding: 15px;">{{ $patient->city ?? 'India' }}</td>
                        <td style="padding: 15px;">
                            <a href="#" class="btn btn-outline" style="padding: 5px 15px; font-size: 12px;">View History</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection