@extends('layouts.app')

@section('title', __('clinic.visits') . ' - ' . $visit->patient->full_name)
@section('heading', __('clinic.visits'))

@section('content')
    <div class="flex-between mb-1" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;">
        <div class="flex gap">
            <a href="{{ route('patients.show', $visit->patient_id) }}" class="btn btn-ghost btn-sm">← {{ __('clinic.patients') }}</a>
        </div>
        <div class="flex gap">
            <a href="{{ route('visits.edit', $visit) }}" class="btn btn-ghost btn-sm">⚙ {{ __('clinic.edit_patient') }}</a>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1rem; align-items: start;">
        <!-- Left Column: Patient & Vital Signs -->
        <div style="display: flex; flex-direction: column; gap: 1.5rem;">
            <!-- Patient Mini Profile Card -->
            <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:1.05rem; color:var(--primary);">🗂️ {{ __('clinic.patients') }}</h3>
                <h4 style="margin:0; font-size:1.15rem;"><a href="{{ route('patients.show', $visit->patient) }}">{{ $visit->patient->full_name }}</a></h4>
                <div style="font-family:monospace; color:var(--muted); font-size:0.9rem; margin-top:0.25rem;">{{ $visit->patient->patient_code }}</div>
                
                <div style="margin-top: 1rem; border-top: 1px dashed var(--border); padding-top:0.75rem; font-size:0.9rem;">
                    <strong>{{ __('clinic.phone') }}:</strong> {{ $visit->patient->phone }}
                </div>
            </div>

            <!-- Vital Signs -->
            @if($visit->blood_pressure || $visit->pulse || $visit->temperature || $visit->weight || $visit->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:1.05rem; color:var(--accent-cyan);">📈 {{ __('clinic.vital_signs') }}</h3>
                <dl class="detail-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin:0;">
                    @if($visit->blood_pressure)
                    <div>
                        <dt style="font-size:0.8rem; color:var(--muted)">{{ __('clinic.blood_pressure') }}</dt>
                        <dd style="margin:0; font-weight:600; font-size:1.05rem;">{{ $visit->blood_pressure }}</dd>
                    </div>
                    @endif
                    @if($visit->pulse)
                    <div>
                        <dt style="font-size:0.8rem; color:var(--muted)">{{ __('clinic.pulse') }}</dt>
                        <dd style="margin:0; font-weight:600; font-size:1.05rem;">{{ $visit->pulse }} BPM</dd>
                    </div>
                    @endif
                    @if($visit->temperature)
                    <div>
                        <dt style="font-size:0.8rem; color:var(--muted)">{{ __('clinic.temperature') }}</dt>
                        <dd style="margin:0; font-weight:600; font-size:1.05rem;">{{ $visit->temperature }} °C</dd>
                    </div>
                    @endif
                    @if($visit->weight)
                    <div>
                        <dt style="font-size:0.8rem; color:var(--muted)">{{ __('clinic.weight') }}</dt>
                        <dd style="margin:0; font-weight:600; font-size:1.05rem;">{{ $visit->weight }} kg</dd>
                    </div>
                    @endif
                    @if($visit->height)
                    <div>
                        <dt style="font-size:0.8rem; color:var(--muted)">{{ __('clinic.height') }}</dt>
                        <dd style="margin:0; font-weight:600; font-size:1.05rem;">{{ $visit->height }} cm</dd>
                    </div>
                    @endif
                </dl>
            </div>
            @endif

            <!-- Invoice Card -->
            @if($visit->invoice)
            <div class="card" style="border-right: 4px solid var(--accent-cyan); border-left: 4px solid var(--accent-cyan);">
                <h3 class="card-title" style="margin-top:0; border-bottom:1px solid var(--border); padding-bottom:0.5rem; margin-bottom:1rem; font-size:1.05rem; color:var(--accent-cyan);">💵 {{ __('clinic.invoice') }}</h3>
                <div style="display:flex; justify-content:space-between; align-items:center;">
                    <div>
                        <strong style="font-size:1rem;"><a href="{{ route('invoices.show', $visit->invoice) }}">{{ $visit->invoice->invoice_number }}</a></strong>
                        <div style="font-size:0.8rem; color:var(--muted); margin-top:0.25rem;">
                            {{ __('clinic.total_amount') }}: {{ number_format($visit->invoice->total_amount, 2) }} $
                        </div>
                    </div>
                    <span class="pill @if($visit->invoice->payment_status === 'paid') pill-success @elseif($visit->invoice->payment_status === 'partial') pill-warning @else pill-danger @endif">
                        {{ __('clinic.' . $visit->invoice->payment_status) }}
                    </span>
                </div>
            </div>
            @endif
        </div>

        <!-- Right Column: Medical Sheet Details -->
        <div style="display: flex; flex-direction: column; gap: 1.5rem; grid-column: span 2;">
            <div class="card">
                <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:0.75rem; margin-bottom:1.25rem; align-items:center;">
                    <h3 class="card-title" style="margin:0; font-size:1.15rem; color:var(--primary)">📄 {{ __('clinic.new_visit') }}</h3>
                    <span style="font-size:0.85rem; color:var(--muted)">
                        📅 {{ $visit->visit_date->format('Y-m-d H:i') }} · 👨‍⚕️ {{ $visit->doctor->name ?? '—' }}
                    </span>
                </div>

                <dl class="detail-grid" style="display: flex; flex-direction: column; gap: 1.25rem; margin:0;">
                    <div>
                        <dt style="font-weight: 700; color: var(--accent-rose); font-size: 0.95rem; margin-bottom: 0.25rem;">{{ __('clinic.chief_complaint') }}</dt>
                        <dd style="margin:0; font-size:1.1rem; font-weight:600; line-height:1.5;">{{ $visit->chief_complaint }}</dd>
                    </div>

                    @if($visit->complaint_details)
                    <div style="border-top:1px dashed var(--border); padding-top:1rem;">
                        <dt style="font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 0.25rem;">{{ __('clinic.complaint_details') }}</dt>
                        <dd style="margin:0; font-size:0.95rem; line-height:1.6; white-space: pre-wrap;">{{ $visit->complaint_details }}</dd>
                    </div>
                    @endif

                    @if($visit->symptoms)
                    <div style="border-top:1px dashed var(--border); padding-top:1rem;">
                        <dt style="font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 0.25rem;">{{ __('clinic.symptoms') }}</dt>
                        <dd style="margin:0; font-size:0.95rem; line-height:1.6; white-space: pre-wrap;">{{ $visit->symptoms }}</dd>
                    </div>
                    @endif

                    @if($visit->diagnosis)
                    <div style="border-top:1px dashed var(--border); padding-top:1rem; background: var(--primary-soft); padding: 1rem; border-radius: var(--radius-sm);">
                        <dt style="font-weight: 700; color: var(--primary); font-size: 0.95rem; margin-bottom: 0.25rem;">🔬 {{ __('clinic.diagnosis') }}</dt>
                        <dd style="margin:0; font-size:1rem; font-weight:600; line-height:1.5;">{{ $visit->diagnosis }}</dd>
                    </div>
                    @endif

                    @if($visit->examination_notes)
                    <div style="border-top:1px dashed var(--border); padding-top:1rem;">
                        <dt style="font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 0.25rem;">{{ __('clinic.examination_notes') }}</dt>
                        <dd style="margin:0; font-size:0.95rem; line-height:1.6; white-space: pre-wrap;">{{ $visit->examination_notes }}</dd>
                    </div>
                    @endif

                    @if($visit->prescription_notes)
                    <div style="border-top:1px dashed var(--border); padding-top:1rem; background: rgba(16, 185, 129, 0.05); border-right: 4px solid var(--accent-emerald); border-left: 4px solid var(--accent-emerald); padding: 1rem; border-radius: var(--radius-sm);">
                        <dt style="font-weight: 700; color: var(--accent-emerald); font-size: 0.95rem; margin-bottom: 0.25rem;">💊 {{ __('clinic.prescription_notes') }}</dt>
                        <dd style="margin:0; font-size:1rem; font-weight:600; line-height:1.6; white-space: pre-wrap;">{{ $visit->prescription_notes }}</dd>
                    </div>
                    @endif

                    @if($visit->treatment_plan)
                    <div style="border-top:1px dashed var(--border); padding-top:1rem;">
                        <dt style="font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 0.25rem;">{{ __('clinic.treatment_plan') }}</dt>
                        <dd style="margin:0; font-size:0.95rem; line-height:1.6; white-space: pre-wrap;">{{ $visit->treatment_plan }}</dd>
                    </div>
                    @endif

                    @if($visit->required_tests || $visit->required_radiology)
                    <div style="border-top:1px dashed var(--border); padding-top:1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                        @if($visit->required_tests)
                        <div>
                            <dt style="font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 0.25rem;">🧪 {{ __('clinic.required_tests') }}</dt>
                            <dd style="margin:0; font-size:0.95rem;">{{ $visit->required_tests }}</dd>
                        </div>
                        @endif
                        @if($visit->required_radiology)
                        <div>
                            <dt style="font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 0.25rem;">🩻 {{ __('clinic.required_radiology') }}</dt>
                            <dd style="margin:0; font-size:0.95rem;">{{ $visit->required_radiology }}</dd>
                        </div>
                        @endif
                    </div>
                    @endif

                    @if($visit->follow_up_date)
                    <div style="border-top:1px dashed var(--border); padding-top:1rem;">
                        <dt style="font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 0.25rem;">{{ __('clinic.follow_up_date') }}</dt>
                        <dd style="margin:0; font-size:0.95rem; font-weight: 600;">{{ $visit->follow_up_date->format('Y-m-d') }}</dd>
                    </div>
                    @endif

                    @if($visit->private_notes)
                    <div style="border-top:1px dashed var(--border); padding-top:1rem; border-right: 4px solid var(--accent-rose); border-left: 4px solid var(--accent-rose); padding: 1rem; border-radius: var(--radius-sm); background: rgba(244, 63, 94, 0.02)">
                        <dt style="font-weight: 700; color: var(--accent-rose); font-size: 0.95rem; margin-bottom: 0.25rem;">🔒 {{ __('clinic.private_notes') }}</dt>
                        <dd style="margin:0; font-size:0.95rem; line-height:1.6; white-space: pre-wrap;">{{ $visit->private_notes }}</dd>
                    </div>
                    @endif
                </dl>
            </div>
        </div>
    </div>
@endsection