<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Prescription - {{ $prescription->prescription_number }}</title>
    <style>
        @font-face {
            font-family: 'Dancing Script';
            src: url('https://fonts.gstatic.com/s/dancingscript/v25/If2cXTr6YS-zF4S-kcSWSVi_sxjLhDmedE0E.ttf') format('truetype');
            font-weight: 400;
            font-style: normal;
        }
        @font-face {
            font-family: 'Dancing Script';
            src: url('https://fonts.gstatic.com/s/dancingscript/v25/If2cXTr6YS-zF4S-kcSWSVi_sxjLhDmedE0E.ttf') format('truetype');
            font-weight: 600;
            font-style: normal;
        }
        @font-face {
            font-family: 'Kalam';
            src: url('https://fonts.gstatic.com/s/kalam/v16/YA9dr0Wd4kDdOuuhLMbDPlk.ttf') format('truetype');
            font-weight: 400;
            font-style: normal;
        }
        @page {
            margin: 15mm;
            size: A4;
            background: white;
        }
        body {
            font-family: Arial, sans-serif;
            font-size: 11px;
            margin: 0;
            padding: 0;
            line-height: 1.4;
            background: white;
        }
        .container {
            width: 100%;
        }
        .header-section {
            margin-bottom: 10px;
            padding-bottom: 8px;
        }
        .letterhead {
            width: 100%;
            height: auto;
            max-height: 150px;
            object-fit: contain;
            margin-bottom: 5px;
        }
        .doctor-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }
        .doctor-info-left {
            flex: 1;
        }
        .doctor-info-right {
            text-align: right;
            flex: 1;
        }
        .patient-vitals-section {
            display: flex;
            gap: 15px;
            margin: 10px 0;
            font-size: 10px;
        }
        .patient-info {
            flex: 1;
            padding: 8px;
            background-color: #ffffff;
            border: 1px solid #ddd;
        }
        .patient-info-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 5px;
        }
        .patient-info-table td {
            padding: 3px 0;
            border: none;
            vertical-align: top;
        }
        .patient-info-col1 {
            width: 50%;
        }
        .patient-info-col2 {
            width: 50%;
        }
        .vitals-info {
            flex: 1;
            padding: 8px;
            background-color: #ffffff;
            border: 1px solid #ddd;
        }
        .vitals-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 5px;
        }
        .vitals-table td {
            padding: 3px 0;
            border: none;
        }
        .vitals-col1 {
            width: 50%;
            vertical-align: top;
        }
        .vitals-col2 {
            width: 50%;
            vertical-align: top;
        }
        .patient-info p,
        .vitals-info p {
            margin: 3px 0;
        }
        .diagnosis-section {
            margin: 8px 0;
            padding: 5px;
        }
        .prescription-table {
            width: 100%;
            border-collapse: collapse;
            margin: 8px 0;
            font-size: 10px;
            border: none;
            table-layout: fixed;
        }
        .prescription-table th {
            border: none;
            padding: 4px 2px;
            text-align: center;
            vertical-align: middle;
        }
        .prescription-table td {
            border: none;
            padding: 2px 2px;
            text-align: left;
            vertical-align: middle;
            word-wrap: break-word;
            overflow: hidden;
        }
        .prescription-item-text {
            font-family: 'Dancing Script', 'DejaVu Sans', cursive, serif;
            font-size: 10px;
            font-weight: 400;
            font-style: italic;
            letter-spacing: 0.2px;
            line-height: 1.2;
        }
        .rx-header {
            text-align: center;
            margin: 8px 0 5px 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .rx-icon {
            color: #000000;
            font-size: 20px;
            display: inline-block;
        }
        .prescription-table tbody tr {
            border-bottom: 1px solid #eee;
        }
        .prescription-table tbody tr:last-child {
            border-bottom: none;
        }
        .additional-details {
            margin: 8px 0;
            padding: 5px;
            font-size: 10px;
        }
        .footer-section {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-top: 1px solid #ddd;
            padding-top: 10px;
        }
        .signature-area {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .doctor-details-text {
            margin-bottom: 4px;
        }
        .signature-image {
            max-width: 150px;
            max-height: 60px;
            margin-top: 8px;
        }
        .stamp-image {
            max-width: 120px;
            max-height: 80px;
            position: absolute;
            right: 15mm;
            bottom: 15mm;
        }
        .date-info {
            text-align: right;
            flex: 1;
        }
        h3 {
            margin: 5px 0;
            font-size: 12px;
            font-weight: bold;
        }
        .compact {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header Section with Letterhead (JPG Header) -->
        <div class="header-section">
            @if($letterhead)
                <img src="{{ $letterhead }}" alt="Doctor Header" class="letterhead">
            @else
                <div class="doctor-header">
                    <div class="doctor-info-left">
                        <strong>{{ $doctor->full_name }}</strong><br>
                        {{ $doctor->qualification }}<br>
                        Practice Number: {{ $doctor->practice_number }}
                    </div>
                    <div class="doctor-info-right">
                        {{ $doctor->phone ?? '' }}<br>
                        {{ $doctor->email ?? '' }}
                    </div>
                </div>
            @endif
        </div>

        <!-- Patient Info and Vitals Side by Side -->
        <div class="patient-vitals-section">
            <div class="patient-info">
                <h3 class="compact">Patient Information</h3>
                <table class="patient-info-table">
                    <tr>
                        <td class="patient-info-col1"><strong>Patient ID:</strong> {{ $patient->patient_id }}</td>
                        <td class="patient-info-col2"><strong>DOB:</strong> {{ $patient->date_of_birth ? \Carbon\Carbon::parse($patient->date_of_birth)->format('m/d/Y') : 'N/A' }}</td>
                    </tr>
                    <tr>
                        <td class="patient-info-col1"><strong>Name:</strong> {{ $patient->full_name }}</td>
                        <td class="patient-info-col2"><strong>Gender:</strong> {{ $patient->gender ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <td class="patient-info-col1"><strong>Age:</strong> {{ $patient->date_of_birth ? \Carbon\Carbon::parse($patient->date_of_birth)->age : 'N/A' }} years</td>
                        <td class="patient-info-col2"><strong>Payment:</strong> {{ $patient->payment_mode }}</td>
                    </tr>
                    @if($patient->payment_mode === 'Medical Aid Payment')
                    <tr>
                        <td class="patient-info-col1" colspan="2"><strong>Medical Aid:</strong> {{ $patient->medical_aid_number ?? 'N/A' }} | <strong>Member:</strong> {{ $patient->main_member ?? 'N/A' }}</td>
                    </tr>
                    @endif
                </table>
            </div>
            
            @if($vitals)
            <div class="vitals-info">
                <h3 class="compact">Patient Vitals</h3>
                <table class="vitals-table">
                    <tr>
                        <td class="vitals-col1"><strong>BP:</strong> {{ $vitals->blood_pressure ?? 'N/A' }} mmHg</td>
                        <td class="vitals-col2"><strong>Resp Pattern:</strong> {{ $vitals->resp_pattern ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <td class="vitals-col1"><strong>Pulse:</strong> {{ $vitals->pulse_rate ?? 'N/A' }} bpm</td>
                        <td class="vitals-col2"><strong>SpO2:</strong> {{ $vitals->spo2 ?? 'N/A' }} %</td>
                    </tr>
                    <tr>
                        <td class="vitals-col1"><strong>RBS:</strong> {{ $vitals->rbs ?? 'N/A' }} %</td>
                        <td class="vitals-col2"><strong>Temp:</strong> {{ $vitals->temperature ?? 'N/A' }} °C</td>
                    </tr>
                    <tr>
                        <td class="vitals-col1"><strong>Blood Glucose:</strong> {{ $vitals->blood_glucose ?? 'N/A' }} mmol/L</td>
                        <td class="vitals-col2"><strong>BMI:</strong> {{ $vitals->bmi ?? 'N/A' }} kg/m²</td>
                    </tr>
                </table>
            </div>
            @endif
        </div>

        <!-- Diagnosis -->
        <div class="diagnosis-section">
            <h3>Diagnosis:</h3>
            <p>{{ $prescription->diagnosis ?? 'N/A' }}</p>
        </div>

        <!-- Prescription Table (Borderless, Rx Symbol as Header) -->
        <div>
            <table class="prescription-table">
                <thead>
                    <tr>
                        <th colspan="7" style="text-align: left; padding: 6px 0 6px 0; border: none; font-size: 18px; font-weight: bold; letter-spacing: 2px;">
                            Rx
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($items as $item)
                    <tr>
                        <td style="width: 3%; text-align: left; vertical-align: middle; padding: 2px 2px 2px 0; font-size: 10px;">{{ $item->item_number }}</td>
                        <td style="width: 21%; padding: 2px 2px;" class="prescription-item-text">{{ $item->medicine_name }}</td>
                        <td style="width: 9%; padding: 2px 2px;" class="prescription-item-text">{{ $item->quantity ?? 'N/A' }}</td>
                        <td style="width: 9%; padding: 2px 2px;" class="prescription-item-text">{{ $item->dosage ?? 'N/A' }}</td>
                        <td style="width: 15%; padding: 2px 2px; white-space: nowrap;" class="prescription-item-text">{{ $item->frequency }}</td>
                        <td style="width: 25%; padding: 2px 2px; white-space: nowrap;" class="prescription-item-text">{{ $item->instructions ?? 'N/A' }}</td>
                        <td style="width: 18%; padding: 2px 2px;" class="prescription-item-text">{{ $item->duration }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Additional Prescription Details -->
        @if($prescription->additional_prescription_details)
        <div class="additional-details">
            <h3>Additional Prescription Details:</h3>
            <p>{{ $prescription->additional_prescription_details }}</p>
        </div>
        @endif

        <!-- Footer with Signature and Date -->
        <div class="footer-section">
            <div class="signature-area">
                <p class="doctor-details-text"><strong>{{ $doctor->full_name }}</strong></p>
                <p class="doctor-details-text">{{ $doctor->email ?? $doctor->qualification }}</p>
                <p class="doctor-details-text">Practice Number: {{ $doctor->practice_number }}</p>
                @if($signature)
                    <img src="{{ $signature }}" alt="Signature" class="signature-image">
                @endif
            </div>
            <div class="date-info">
                <p><strong>Date:</strong> {{ $prescription->created_at->format('F d, Y') }}</p>
                <p><strong>Prescription #:</strong> {{ $prescription->prescription_number }}</p>
            </div>
        </div>

        <!-- Stamp (if available) -->
        @if($stamp)
            <img src="{{ $stamp }}" alt="Stamp" class="stamp-image">
        @endif
    </div>
</body>
</html>
