@extends('layouts.app')

@section('title', $patient->full_name)
@section('heading')
    <div style="display:flex; align-items:center; gap:0.75rem;">
        <span>{{ $patient->full_name }}</span>
        <span class="pill pill-muted" style="font-size: 0.9rem;">{{ $patient->patient_code }}</span>
    </div>
@endsection

@section('content')
    <!-- Action Bar -->
    <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" style="flex-wrap: wrap;">
            <a href="{{ route('visits.create', ['patient_id' => $patient->id]) }}" class="btn btn-primary btn-sm">➕ {{ __('clinic.new_visit') }}</a>
            <a href="{{ route('invoices.create', ['patient_id' => $patient->id]) }}" class="btn btn-ghost btn-sm">💵 {{ __('clinic.new_invoice') }}</a>
            <a href="{{ route('patients.print-card', $patient) }}" target="_blank" class="btn btn-ghost btn-sm">🪪 {{ __('clinic.print_card') }}</a>
            <a href="{{ route('patients.print-file', $patient) }}" target="_blank" class="btn btn-ghost btn-sm">📄 {{ __('clinic.print_file') }}</a>
        </div>
        <div class="flex gap">
            <a href="{{ route('patients.edit', $patient) }}" class="btn btn-ghost btn-sm">⚙ {{ __('clinic.edit_patient') }}</a>
            <form method="POST" action="{{ route('patients.destroy', $patient) }}" onsubmit="return confirm('{{ __('Are you sure you want to delete this patient?') }}')" style="margin:0;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-ghost btn-sm" style="color:var(--danger)">🗑 {{ __('clinic.delete_patient') }}</button>
            </form>
        </div>
    </div>

    <!-- Layout Grid -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1rem; align-items: start;">
        <!-- Left Side: Patient Info & QR Card -->
        <div style="display: flex; flex-direction: column; gap: 1.5rem;">
            <!-- QR Card -->
            <div class="card" style="text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1.5rem;">
                <h4 style="margin:0; font-size:1.1rem; color:var(--primary);">{{ __('clinic.clinic_card') }}</h4>
                <div style="background: #fff; padding: 10px; border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0,0,0,0.05); display: inline-block;">
                    {!! $qrCode !!}
                </div>
                <div>
                    <strong style="font-size: 1rem; color: var(--text);">{{ $patient->patient_code }}</strong>
                    <div style="font-size: 0.85rem; color: var(--muted); margin-top: 0.25rem;">
                        {{ __('clinic.registration_date') }}: {{ $patient->created_at->format('Y-m-d') }}
                    </div>
                </div>
            </div>

            <!-- Profile Info Details -->
            <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.85rem; margin:0;">
                    <div>
                        <dt style="font-size: 0.85rem; color: var(--muted); font-weight: 500;">{{ __('clinic.phone') }}</dt>
                        <dd style="margin:0; font-weight:600; font-size:0.95rem; color:var(--text);"><a href="tel:{{ $patient->phone }}">{{ $patient->phone }}</a></dd>
                    </div>
                    @if($patient->whatsapp)
                    <div>
                        <dt style="font-size: 0.85rem; color: var(--muted); font-weight: 500;">{{ __('clinic.whatsapp') }}</dt>
                        <dd style="margin:0; font-weight:600; font-size:0.95rem; color:var(--text);"><a href="https://wa.me/{{ preg_replace('/\D/', '', $patient->whatsapp) }}" target="_blank">{{ $patient->whatsapp }}</a></dd>
                    </div>
                    @endif
                    <div>
                        <dt style="font-size: 0.85rem; color: var(--muted); font-weight: 500;">{{ __('clinic.gender') }}</dt>
                        <dd style="margin:0; font-weight: 600;">{{ __('clinic.' . $patient->gender) }}</dd>
                    </div>
                    @if($patient->age || $patient->birth_date)
                    <div>
                        <dt style="font-size: 0.85rem; color: var(--muted); font-weight: 500;">{{ __('clinic.age') }} / {{ __('clinic.birth_date') }}</dt>
                        <dd style="margin:0; font-weight: 600;">
                            @if($patient->age) {{ $patient->age }} {{ __('سنوات') }} @endif
                            @if($patient->birth_date) ({{ $patient->birth_date->format('Y-m-d') }}) @endif
                        </dd>
                    </div>
                    @endif
                    @if($patient->national_id)
                    <div>
                        <dt style="font-size: 0.85rem; color: var(--muted); font-weight: 500;">{{ __('clinic.national_id') }}</dt>
                        <dd style="margin:0; font-weight: 600;">{{ $patient->national_id }}</dd>
                    </div>
                    @endif
                    @if($patient->address)
                    <div>
                        <dt style="font-size: 0.85rem; color: var(--muted); font-weight: 500;">{{ __('clinic.address') }}</dt>
                        <dd style="margin:0; font-weight: 600; line-height: 1.4;">{{ $patient->address }}</dd>
                    </div>
                    @endif
                </dl>
            </div>

            <!-- Emergency Info -->
            @if($patient->emergency_contact_name || $patient->emergency_contact_phone)
            <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-rose)">🚨 {{ __('clinic.emergency_contact_name') }}</h3>
                <dl class="detail-grid" style="display: grid; grid-template-columns: 1fr; gap: 0.85rem; margin:0;">
                    @if($patient->emergency_contact_name)
                    <div>
                        <dt style="font-size: 0.85rem; color: var(--muted);">{{ __('clinic.emergency_contact_name') }}</dt>
                        <dd style="margin:0; font-weight:600;">{{ $patient->emergency_contact_name }}</dd>
                    </div>
                    @endif
                    @if($patient->emergency_contact_phone)
                    <div>
                        <dt style="font-size: 0.85rem; color: var(--muted);">{{ __('clinic.emergency_contact_phone') }}</dt>
                        <dd style="margin:0; font-weight:600;"><a href="tel:{{ $patient->emergency_contact_phone }}">{{ $patient->emergency_contact_phone }}</a></dd>
                    </div>
                    @endif
                </dl>
            </div>
            @endif
        </div>

        <!-- Right Side: Medical Background, Visit timeline, and Invoices -->
        <div style="display: flex; flex-direction: column; gap: 1.5rem; grid-column: span 2;">
            <!-- Medical Background Header -->
            <div class="card">
                <h3 class="card-title" style="margin-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 1.25rem; font-size: 1.1rem; color: var(--accent-emerald);">
                    📋 {{ __('clinic.medical_history') }}
                </h3>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div style="border-left: 2px solid var(--border); padding-left: 0.75rem; border-right: 2px solid var(--border); padding-right: 0.75rem;">
                        <h4 style="margin: 0 0 0.5rem 0; font-size: 0.9rem; color: var(--muted);">{{ __('clinic.chronic_diseases') }}</h4>
                        <p style="margin: 0; font-weight: 600; font-size:0.95rem;">{!! nl2br(e($patient->chronic_diseases ?? '—')) !!}</p>
                    </div>
                    <div>
                        <h4 style="margin: 0 0 0.5rem 0; font-size: 0.9rem; color: var(--muted);">{{ __('clinic.allergies') }}</h4>
                        <p style="margin: 0; font-weight: 600; font-size:0.95rem;">{!! nl2br(e($patient->allergies ?? '—')) !!}</p>
                    </div>
                </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; border-top: 1px dashed var(--border); padding-top: 1rem;">
                    <div style="border-left: 2px solid var(--border); padding-left: 0.75rem; border-right: 2px solid var(--border); padding-right: 0.75rem;">
                        <h4 style="margin: 0 0 0.5rem 0; font-size: 0.9rem; color: var(--muted);">{{ __('clinic.current_medications') }}</h4>
                        <p style="margin: 0; font-weight: 600; font-size:0.95rem;">{!! nl2br(e($patient->current_medications ?? '—')) !!}</p>
                    </div>
                    <div>
                        <h4 style="margin: 0 0 0.5rem 0; font-size: 0.9rem; color: var(--muted);">{{ __('clinic.medical_history') }}</h4>
                        <p style="margin: 0; font-weight: 600; font-size:0.95rem;">{!! nl2br(e($patient->medical_history ?? '—')) !!}</p>
                    </div>
                </div>
                @if($patient->notes)
                <div style="margin-top: 1rem; border-top: 1px dashed var(--border); padding-top: 1rem;">
                    <h4 style="margin: 0 0 0.5rem 0; font-size: 0.9rem; color: var(--muted);">{{ __('clinic.notes') }}</h4>
                    <p style="margin: 0; font-size: 0.9rem;">{{ $patient->notes }}</p>
                </div>
                @endif
            </div>

            <!-- Visits Timeline -->
            <div class="card">
                <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: 1.25rem;">
                    <h3 class="card-title" style="margin:0; font-size: 1.1rem; color: var(--primary);">
                        🩺 {{ __('clinic.visits') }}
                    </h3>
                    <span class="pill pill-muted">{{ count($patient->visits) }}</span>
                </div>

                <div style="display: flex; flex-direction: column; gap: 1.25rem;">
                    @forelse ($patient->visits as $v)
                        <div class="visit-item" style="border-right: 3px solid var(--primary); padding-right: 1.25rem; position: relative;">
                            <div style="display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap;">
                                <div>
                                    <h4 style="margin:0; font-size:1rem;"><a href="{{ route('visits.show', $v) }}">{{ $v->chief_complaint }}</a></h4>
                                    <span style="font-size:0.8rem; color:var(--muted)">
                                        📅 {{ $v->visit_date->format('Y-m-d H:i') }} · 👨‍⚕️ {{ $v->doctor->name ?? '—' }}
                                    </span>
                                </div>
                                <span class="pill @if($v->status === 'completed') pill-success @elseif($v->status === 'waiting') pill-muted @else pill-danger @endif">
                                    {{ __('clinic.' . $v->status) }}
                                </span>
                            </div>
                            
                            @if($v->diagnosis)
                            <div style="margin-top: 0.5rem; font-size: 0.9rem;">
                                <strong>{{ __('clinic.diagnosis') }}:</strong> {{ $v->diagnosis }}
                            </div>
                            @endif

                            @if($v->prescription_notes)
                            <div style="margin-top: 0.25rem; font-size: 0.9rem; color: var(--text-secondary); background: var(--bg); padding: 0.5rem; border-radius: var(--radius-sm); margin-top: 0.5rem;">
                                <strong>💊 {{ __('clinic.prescription_notes') }}:</strong> {{ $v->prescription_notes }}
                            </div>
                            @endif
                            <div style="margin-top: 0.5rem;">
                                <a href="{{ route('visits.show', $v) }}" class="btn btn-ghost btn-sm" style="padding: 2px 8px; font-size:0.8rem;">{{ __('clinic.view_all') }} →</a>
                            </div>
                        </div>
                    @empty
                        <p style="margin:0; color:var(--muted); text-align:center; padding: 1rem 0;">{{ __('clinic.no_records') }}</p>
                    @endforelse
                </div>
            </div>

            <!-- Invoices -->
            <div class="card">
                <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: 1.25rem;">
                    <h3 class="card-title" style="margin:0; font-size: 1.1rem; color: var(--accent-cyan);">
                        💵 {{ __('clinic.invoices') }}
                    </h3>
                </div>

                <div class="table-wrap" style="margin:0;">
                    <table class="data-table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>{{ __('clinic.invoice_number') }}</th>
                                <th>{{ __('clinic.total_amount') }}</th>
                                <th>{{ __('clinic.paid_amount') }}</th>
                                <th>{{ __('clinic.remaining_amount') }}</th>
                                <th>{{ __('clinic.payment_status') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($patient->invoices as $inv)
                                <tr>
                                    <td><strong><a href="{{ route('invoices.show', $inv) }}">{{ $inv->invoice_number }}</a></strong></td>
                                    <td>{{ number_format($inv->total_amount, 2) }}</td>
                                    <td>{{ number_format($inv->paid_amount, 2) }}</td>
                                    <td style="color: {{ $inv->remaining_amount > 0 ? 'var(--danger)' : 'inherit' }}">{{ number_format($inv->remaining_amount, 2) }}</td>
                                    <td>
                                        <span class="pill @if($inv->payment_status === 'paid') pill-success @elseif($inv->payment_status === 'partial') pill-warning @else pill-danger @endif">
                                            {{ __('clinic.' . $inv->payment_status) }}
                                        </span>
                                    </td>
                                    <td>
                                        <a href="{{ route('invoices.show', $inv) }}" class="btn btn-ghost btn-sm">Open</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" style="text-align:center; color:var(--muted)">{{ __('clinic.no_records') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
