@extends('layouts.app')

@section('title', __('clinic.scan_profile'))
@section('heading', __('clinic.scan_profile'))

@section('content')
    <div style="max-width: 600px; margin: 0 auto;">
        
        <!-- Quick Summary Header Card -->
        <div class="card" style="text-align: center; border-top: 4px solid var(--primary); padding: 2rem 1.5rem;">
            <div style="width: 64px; height: 64px; background: var(--primary-soft); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; font-size: 1.8rem; font-weight: bold;">
                {{ strtoupper(substr($patient->full_name, 0, 1)) }}
            </div>
            <h2 style="margin: 0; font-size: 1.4rem;">{{ $patient->full_name }}</h2>
            <span class="pill pill-muted" style="margin-top: 0.5rem; display: inline-block; font-family: monospace; font-size: 0.95rem;">{{ $patient->patient_code }}</span>
            
            <div style="display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem;">
                <a href="{{ route('patients.show', $patient) }}" class="btn btn-primary btn-sm">🗂️ {{ __('clinic.view_all') }}</a>
                <a href="{{ route('visits.create', ['patient_id' => $patient->id]) }}" class="btn btn-ghost btn-sm">➕ {{ __('clinic.new_visit') }}</a>
            </div>
        </div>

        <!-- Medical Warning Flag (Allergies / Chronic Diseases) -->
        @if($patient->allergies || $patient->chronic_diseases)
            <div class="card" style="border-right: 4px solid var(--danger); border-left: 4px solid var(--danger); background: rgba(220, 38, 38, 0.04);">
                <h3 style="margin-top:0; font-size: 1rem; color: var(--danger);">⚠️ {{ __('clinic.allergies') }} & {{ __('clinic.chronic_diseases') }}</h3>
                @if($patient->allergies)
                    <div style="margin-bottom: 0.5rem;">
                        <strong>{{ __('clinic.allergies') }}:</strong> {{ $patient->allergies }}
                    </div>
                @endif
                @if($patient->chronic_diseases)
                    <div>
                        <strong>{{ __('clinic.chronic_diseases') }}:</strong> {{ $patient->chronic_diseases }}
                    </div>
                @endif
            </div>
        @endif

        <!-- Latest Visit Vitals -->
        @php
            $latestVisit = $patient->visits->first();
        @endphp
        @if($latestVisit && ($latestVisit->blood_pressure || $latestVisit->pulse || $latestVisit->temperature || $latestVisit->weight || $latestVisit->height))
            <div class="card">
                <h3 class="card-title" style="margin-top:0; border-bottom:1px solid var(--border); padding-bottom:0.5rem; margin-bottom:1rem; font-size:1rem; color:var(--accent-cyan)">
                    📈 {{ __('clinic.vital_signs') }} ({{ __('clinic.latest_visits') }})
                </h3>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.75rem; text-align: center;">
                    @if($latestVisit->blood_pressure)
                        <div style="background: var(--bg); padding: 0.5rem; border-radius: var(--radius-sm);">
                            <div style="font-size: 0.75rem; color: var(--muted);">{{ __('clinic.blood_pressure') }}</div>
                            <strong style="font-size: 1.1rem; color: var(--text);">{{ $latestVisit->blood_pressure }}</strong>
                        </div>
                    @endif
                    @if($latestVisit->pulse)
                        <div style="background: var(--bg); padding: 0.5rem; border-radius: var(--radius-sm);">
                            <div style="font-size: 0.75rem; color: var(--muted);">{{ __('clinic.pulse') }}</div>
                            <strong style="font-size: 1.1rem; color: var(--text);">{{ $latestVisit->pulse }}</strong>
                        </div>
                    @endif
                    @if($latestVisit->temperature)
                        <div style="background: var(--bg); padding: 0.5rem; border-radius: var(--radius-sm);">
                            <div style="font-size: 0.75rem; color: var(--muted);">{{ __('clinic.temperature') }}</div>
                            <strong style="font-size: 1.1rem; color: var(--text);">{{ $latestVisit->temperature }}°C</strong>
                        </div>
                    @endif
                    @if($latestVisit->weight)
                        <div style="background: var(--bg); padding: 0.5rem; border-radius: var(--radius-sm);">
                            <div style="font-size: 0.75rem; color: var(--muted);">{{ __('clinic.weight') }}</div>
                            <strong style="font-size: 1.1rem; color: var(--text);">{{ $latestVisit->weight }} kg</strong>
                        </div>
                    @endif
                </div>
            </div>
        @endif

        <!-- Demographics & Emergency Contact -->
        <div class="card">
            <h3 class="card-title" style="margin-top:0; border-bottom:1px solid var(--border); padding-bottom:0.5rem; margin-bottom:1rem; font-size:1rem;">
                📞 {{ __('clinic.overview') }}
            </h3>
            
            <dl class="detail-grid" style="display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin:0;">
                <div>
                    <dt style="font-size: 0.8rem; color: var(--muted);">{{ __('clinic.phone') }}</dt>
                    <dd style="margin:0; font-weight:600;">{{ $patient->phone }}</dd>
                </div>
                @if($patient->emergency_contact_name)
                    <div style="border-top: 1px dashed var(--border); padding-top: 0.75rem; margin-top: 0.25rem;">
                        <dt style="font-size: 0.8rem; color: var(--muted);">{{ __('clinic.emergency_contact_name') }}</dt>
                        <dd style="margin:0; font-weight:600;">{{ $patient->emergency_contact_name }} ({{ $patient->emergency_contact_phone }})</dd>
                    </div>
                @endif
            </dl>
        </div>

    </div>
@endsection