@extends('layouts.brand')

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

@section('styles')
<style>
    .dashboard-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 30px;
        padding: 40px 0;
    }
    .welcome-card {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        color: white;
        padding: 40px;
        border-radius: 20px;
        margin-bottom: 30px;
    }
    .stats-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }
    .stat-item {
        text-align: center;
        padding: 20px;
        background: white;
        border-radius: 15px;
        box-shadow: var(--shadow);
    }
    .stat-icon {
        font-size: 24px;
        margin-bottom: 10px;
        display: block;
    }
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .appointment-card {
        padding: 15px;
        border-bottom: 1px solid #edf2f7;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .appointment-card:last-child {
        border-bottom: none;
    }
</style>
@endsection

@section('content')
<div class="container">
    <div class="dashboard-grid">
        <div class="main-content">
            <div class="welcome-card animate-fade-in">
                <h2>Hello, {{ $user->name }}!</h2>
                <p>How are you feeling today? Access your healthcare services below.</p>
            </div>

            <div class="section-header">
                <h3>Our Services</h3>
            </div>
            
            <div class="stats-row">
                <a href="{{ url('/patient/doctors') }}" style="text-decoration: none; color: inherit;">
                    <div class="stat-item card">
                        <span class="stat-icon">🌿</span>
                        <div style="font-weight: 600;">Ayurveda</div>
                    </div>
                </a>
                <a href="{{ url('/patient/doctors') }}" style="text-decoration: none; color: inherit;">
                    <div class="stat-item card">
                        <span class="stat-icon">⚕️</span>
                        <div style="font-weight: 600;">Allopathy</div>
                    </div>
                </a>
                <a href="{{ url('/patient/labs') }}" style="text-decoration: none; color: inherit;">
                    <div class="stat-item card">
                        <span class="stat-icon">🔬</span>
                        <div style="font-weight: 600;">Lab Tests</div>
                    </div>
                </a>
                <a href="tel:108" style="text-decoration: none; color: inherit;">
                    <div class="stat-item card" style="border-bottom: 4px solid #E53E3E;">
                        <span class="stat-icon">🚑</span>
                        <div style="font-weight: 600; color: #E53E3E;">Emergency</div>
                    </div>
                </a>
            </div>

            <div class="section-header">
                <h3>Upcoming Appointments</h3>
                <a href="#" style="color: var(--ayurveda); font-weight: 600; text-decoration: none; font-size: 14px;">View All</a>
            </div>
            
            <div class="card" style="padding: 0;">
                @forelse($upcomingAppointments as $appointment)
                    <div class="appointment-card">
                        <div style="background: var(--bg-light); padding: 10px; border-radius: 10px; text-align: center; min-width: 60px;">
                            <div style="font-size: 12px; color: var(--text-muted);">{{ \Carbon\Carbon::parse($appointment->date)->format('M') }}</div>
                            <div style="font-size: 18px; font-weight: 700;">{{ \Carbon\Carbon::parse($appointment->date)->format('d') }}</div>
                        </div>
                        <div style="flex: 1;">
                            <div style="font-weight: 600; font-size: 16px;">Dr. {{ $appointment->doctorProfile->user->name }}</div>
                            <div style="font-size: 14px; color: var(--text-muted);">{{ $appointment->time }}</div>
                        </div>
                        <div class="badge" style="background: {{ $appointment->consultation_type == 'ayurveda' ? 'var(--ayurveda)' : 'var(--allopathy)' }}; padding: 4px 12px; border-radius: 20px; color: white; font-size: 12px;">
                            {{ ucfirst($appointment->consultation_type) }}
                        </div>
                    </div>
                @empty
                    <div style="padding: 40px; text-align: center; color: var(--text-muted);">
                        No upcoming appointments.
                    </div>
                @endforelse
            </div>
        </div>

        <div class="sidebar">
            <div class="section-header">
                <h3>Recent Reports</h3>
            </div>
            <div class="card">
                @forelse($recentReports as $report)
                    <div style="padding: 10px 0; border-bottom: 1px solid #edf2f7;">
                        <div style="font-weight: 600;">{{ $report->test_name }}</div>
                        <div style="font-size: 12px; color: var(--text-muted);">{{ $report->created_at->format('d M Y') }}</div>
                        <a href="{{ $report->report_file }}" class="btn btn-outline" style="padding: 5px 15px; font-size: 12px; margin-top: 10px;">Download PDF</a>
                    </div>
                @empty
                    <p style="text-align: center; color: var(--text-muted);">No reports found.</p>
                @endforelse
            </div>
            
            <div class="card" style="margin-top: 30px; background: var(--gold); color: var(--primary);">
                <h3>Health Tip of the Day</h3>
                <p style="margin-top: 10px; font-size: 14px;">"Early to bed and early to rise makes a man healthy, wealthy, and wise." — Traditional Ayurveda Wisdom</p>
            </div>
        </div>
    </div>
</div>
@endsection