<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Orden Clínica — {{ $order->title }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: DejaVu Sans, sans-serif; font-size: 11px; color: #1a1a1a; }
        .page { padding: 20mm; }
        .header { border-bottom: 2px solid #d97706; padding-bottom: 10px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-start; }
        .company-name { font-size: 16px; font-weight: bold; color: #d97706; }
        .company-info { font-size: 9px; color: #666; margin-top: 2px; line-height: 1.4; }
        .doc-title h1 { font-size: 13px; font-weight: bold; color: #d97706; text-align: right; }
        .doc-title p { font-size: 9px; color: #888; text-align: right; }

        .info-grid { display: flex; gap: 10px; margin-bottom: 16px; }
        .info-box { flex: 1; background: #fffbeb; border: 1px solid #fde68a; border-radius: 4px; padding: 8px; }
        .info-box h3 { font-size: 8px; font-weight: bold; color: #92400e; text-transform: uppercase; border-bottom: 1px solid #fde68a; padding-bottom: 3px; margin-bottom: 5px; }
        .info-row { font-size: 9px; margin-bottom: 2px; }

        .order-type { display: inline-block; background: #d97706; color: white; font-size: 9px; font-weight: bold; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; margin-bottom: 10px; }
        .order-title { font-size: 15px; font-weight: bold; color: #111; margin-bottom: 12px; }
        .content-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; padding: 12px; margin-bottom: 12px; }
        .content-box p { font-size: 11px; line-height: 1.6; white-space: pre-wrap; }

        .notes-box { background: #fffbeb; border-left: 3px solid #d97706; padding: 8px 12px; margin-bottom: 12px; }
        .notes-label { font-size: 9px; font-weight: bold; color: #92400e; margin-bottom: 3px; }

        .signed-box { margin-top: 30px; border-top: 1px solid #e5e7eb; padding-top: 14px; display: flex; justify-content: space-between; align-items: flex-end; }
        .sig-block { text-align: center; }
        .sig-line { width: 150px; border-bottom: 1px solid #333; height: 28px; margin: 0 auto 4px; }
        .sig-name { font-size: 9px; font-weight: bold; }
        .sig-label { font-size: 8px; color: #888; }

        .footer { margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 6px; text-align: center; font-size: 8px; color: #aaa; }
    </style>
</head>
<body>
<div class="page">
    <div class="header">
        <div>
            <div class="company-name">{{ $company?->name ?? 'Centro Médico' }}</div>
            <div class="company-info">
                @if($company?->address){{ $company->address }}<br>@endif
                @if($company?->phone)Tel: {{ $company->phone }}@endif
            </div>
        </div>
        <div class="doc-title">
            <h1>ORDEN / RECOMENDACIÓN</h1>
            <p>{{ $order->created_at->format('d/m/Y') }}</p>
            @if($order->isSigned())<p style="color:#16a34a;margin-top:2px;">✓ FIRMADA</p>@endif
        </div>
    </div>

    <div class="info-grid">
        <div class="info-box">
            <h3>Paciente</h3>
            <div class="info-row"><strong>{{ $patient->fullName() }}</strong></div>
            @if($patient->document_number)<div class="info-row">{{ strtoupper($patient->document_type ?? '') }} {{ $patient->document_number }}</div>@endif
            @if($patient->birthdate)<div class="info-row">Edad: {{ $patient->age() }} años</div>@endif
        </div>
        <div class="info-box">
            <h3>Profesional</h3>
            <div class="info-row"><strong>{{ $order->employee?->user?->name ?? '—' }}</strong></div>
            <div class="info-row">Fecha: {{ $order->created_at->format('d/m/Y') }}</div>
        </div>
    </div>

    <div>
        <span class="order-type">{{ $order->typeLabel() }}</span>
        <div class="order-title">{{ $order->title }}</div>
    </div>

    @if($order->description)
    <div class="content-box">
        <p>{{ $order->description }}</p>
    </div>
    @endif

    @if($order->notes)
    <div class="notes-box">
        <div class="notes-label">NOTAS ADICIONALES</div>
        <p style="font-size:10px;">{{ $order->notes }}</p>
    </div>
    @endif

    <div class="signed-box">
        <div style="font-size:9px;color:#888;">
            Este documento fue generado por {{ $company?->name ?? 'el sistema' }}.<br>
            Para cualquier consulta comuníquese con el profesional tratante.
        </div>
        <div class="sig-block">
            <div class="sig-line"></div>
            <div class="sig-name">{{ $order->employee?->user?->name ?? 'Profesional' }}</div>
            <div class="sig-label">Firma y sello</div>
        </div>
    </div>

    <div class="footer">
        Generado el {{ now()->format('d/m/Y H:i') }} — {{ $company?->name }}
        @if($order->isSigned()) | Firmada el {{ $order->signed_at->format('d/m/Y') }}@endif
    </div>
</div>
</body>
</html>
