@extends('layouts.app')

@section('title', __('clinic.dashboard'))
@section('heading', __('clinic.dashboard'))
@section('subheading')
    {{ __('clinic.performance_overview') }} · {{ now()->format('l, Y-m-d') }}
@endsection

@section('content')
    <!-- KPI Statistics Grid -->
    <div class="kpi-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
        
        <!-- Total Patients -->
        <article class="kpi-card kpi-card--indigo">
            <div class="kpi-card-head" style="display:flex; justify-content:space-between; align-items:center;">
                <span class="kpi-card-label">{{ __('clinic.total_patients') }}</span>
                <div class="kpi-card-icon" aria-hidden="true" style="color:var(--primary);">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                </div>
            </div>
            <div class="kpi-card-value" style="font-size: 2rem; font-weight: 700; margin-top: 0.5rem;">{{ number_format($totalPatients) }}</div>
            <p class="kpi-card-hint" style="font-size: 0.8rem; color: var(--muted); margin: 0.25rem 0 0 0;">
                {{ $newPatientsToday }} {{ __('clinic.new_patients_today') }}
            </p>
        </article>

        <!-- Visits Today -->
        <article class="kpi-card kpi-card--cyan">
            <div class="kpi-card-head" style="display:flex; justify-content:space-between; align-items:center;">
                <span class="kpi-card-label">{{ __('clinic.visits_today') }}</span>
                <div class="kpi-card-icon" aria-hidden="true" style="color:var(--accent-cyan);">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                </div>
            </div>
            <div class="kpi-card-value" style="font-size: 2rem; font-weight: 700; margin-top: 0.5rem;">{{ number_format($visitsToday) }}</div>
            <p class="kpi-card-hint" style="font-size: 0.8rem; color: var(--muted); margin: 0.25rem 0 0 0;">
                {{ $waitingPatients }} {{ __('clinic.waiting_patients') }}
            </p>
        </article>

        <!-- Revenue Today -->
        <article class="kpi-card kpi-card--emerald">
            <div class="kpi-card-head" style="display:flex; justify-content:space-between; align-items:center;">
                <span class="kpi-card-label">{{ __('clinic.revenue_today') }}</span>
                <div class="kpi-card-icon" aria-hidden="true" style="color:var(--accent-emerald);">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                </div>
            </div>
            <div class="kpi-card-value" style="font-size: 2rem; font-weight: 700; margin-top: 0.5rem;">
                {{ number_format($revenueToday, 2) }}
                <span style="font-size:1rem; font-weight:600; opacity:0.75;">$</span>
            </div>
            <p class="kpi-card-hint" style="font-size: 0.8rem; color: var(--muted); margin: 0.25rem 0 0 0;">
                {{ __('clinic.active_now') }}
            </p>
        </article>

        <!-- Unpaid Invoices -->
        <article class="kpi-card kpi-card--rose">
            <div class="kpi-card-head" style="display:flex; justify-content:space-between; align-items:center;">
                <span class="kpi-card-label">{{ __('clinic.unpaid_invoices') }}</span>
                <div class="kpi-card-icon" aria-hidden="true" style="color:var(--accent-rose);">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2" ry="2"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
                </div>
            </div>
            <div class="kpi-card-value" style="font-size: 2rem; font-weight: 700; margin-top: 0.5rem; color: var(--danger);">{{ number_format($unpaidInvoices) }}</div>
            <p class="kpi-card-hint" style="font-size: 0.8rem; color: var(--muted); margin: 0.25rem 0 0 0;">
                {{ __('clinic.action_required') ?? 'بحاجة للمتابعة' }}
            </p>
        </article>
    </div>

    <!-- Main Lists Section -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem;">
        
        <!-- Latest Registered Patients -->
        <div class="card" style="margin-bottom: 0;">
            <div class="card-title-row" style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); padding-bottom:0.5rem; margin-bottom:1rem;">
                <h2 class="card-title" style="margin:0; font-size:1.1rem; color:var(--primary);">👥 {{ __('clinic.latest_patients') }}</h2>
                <a href="{{ route('patients.index') }}" style="font-size:0.85rem; font-weight:600;">{{ __('clinic.view_all') }} →</a>
            </div>
            <div class="table-wrap" style="margin:0;">
                <table class="data-table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>{{ __('clinic.patient_code') }}</th>
                            <th>{{ __('clinic.full_name') }}</th>
                            <th>{{ __('clinic.phone') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($latestPatients as $p)
                            <tr>
                                <td><strong><a href="{{ route('patients.show', $p) }}">{{ $p->patient_code }}</a></strong></td>
                                <td>{{ $p->full_name }}</td>
                                <td>{{ $p->phone }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" style="text-align:center; color:var(--muted);">{{ __('clinic.no_records') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Latest Medical Visits -->
        <div class="card" style="margin-bottom: 0;">
            <div class="card-title-row" style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); padding-bottom:0.5rem; margin-bottom:1rem;">
                <h2 class="card-title" style="margin:0; font-size:1.1rem; color:var(--accent-cyan);">🩺 {{ __('clinic.latest_visits') }}</h2>
                <a href="{{ route('visits.index') }}" style="font-size:0.85rem; font-weight:600;">{{ __('clinic.view_all') }} →</a>
            </div>
            <div class="table-wrap" style="margin:0;">
                <table class="data-table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>{{ __('clinic.patients') }}</th>
                            <th>{{ __('clinic.chief_complaint') }}</th>
                            <th>{{ __('clinic.status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($latestVisits as $v)
                            <tr>
                                <td><strong><a href="{{ route('patients.show', $v->patient_id) }}">{{ $v->patient->full_name }}</a></strong></td>
                                <td><a href="{{ route('visits.show', $v) }}">{{ $v->chief_complaint }}</a></td>
                                <td>
                                    <span class="pill @if($v->status === 'completed') pill-success @elseif($v->status === 'waiting') pill-muted @else pill-danger @endif" style="font-size:0.75rem; padding: 2px 6px;">
                                        {{ __('clinic.' . $v->status) }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" style="text-align:center; color:var(--muted);">{{ __('clinic.no_records') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection