<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resep - {{ $resep->no_resep }}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 12pt;
            line-height: 1.5;
            color: #333;
            background: #fff;
        }
        
        .container {
            max-width: 210mm;
            margin: 0 auto;
            padding: 15mm;
        }
        
        /* Header */
        .header {
            text-align: center;
            border-bottom: 3px double #4A538F;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .header h1 {
            font-size: 20pt;
            color: #4A538F;
            margin-bottom: 5px;
        }
        
        .header p {
            font-size: 10pt;
            color: #666;
        }
        
        .rx-symbol {
            font-size: 28pt;
            font-style: italic;
            font-weight: bold;
            color: #4A538F;
            margin: 15px 0;
        }
        
        /* Prescription Info */
        .prescription-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 10pt;
        }
        
        .prescription-info div {
            flex: 1;
        }
        
        .prescription-info .right {
            text-align: right;
        }
        
        /* Patient Info */
        .patient-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        
        .patient-info h3 {
            font-size: 11pt;
            color: #4A538F;
            margin-bottom: 10px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        
        .patient-info table {
            width: 100%;
            font-size: 10pt;
        }
        
        .patient-info td {
            padding: 3px 0;
        }
        
        .patient-info td:first-child {
            width: 100px;
            color: #666;
        }
        
        /* Medicines Table */
        .medicines {
            margin-bottom: 30px;
        }
        
        .medicines h3 {
            font-size: 11pt;
            color: #4A538F;
            margin-bottom: 10px;
        }
        
        .medicines table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .medicines th {
            background: #4A538F;
            color: white;
            padding: 10px;
            text-align: left;
            font-size: 10pt;
        }
        
        .medicines td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
            font-size: 10pt;
        }
        
        .medicines tr:nth-child(even) {
            background: #f8f9fa;
        }
        
        .medicine-name {
            font-weight: 600;
            color: #2F347A;
        }
        
        .medicine-dosage {
            font-style: italic;
            color: #666;
            font-size: 9pt;
        }
        
        /* Diagnosa */
        .diagnosa {
            margin-bottom: 20px;
            padding: 10px;
            background: #fff9e6;
            border-left: 3px solid #f0ad4e;
        }
        
        .diagnosa h4 {
            font-size: 10pt;
            color: #8a6d3b;
            margin-bottom: 5px;
        }
        
        .diagnosa p {
            font-size: 10pt;
        }
        
        /* Footer */
        .footer {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
        }
        
        .footer-left {
            font-size: 9pt;
            color: #666;
        }
        
        .signature {
            text-align: center;
            width: 200px;
        }
        
        .signature p {
            font-size: 10pt;
        }
        
        .signature-line {
            margin-top: 50px;
            border-top: 1px solid #333;
            padding-top: 5px;
        }
        
        .doctor-name {
            font-weight: 600;
            color: #2F347A;
        }
        
        /* Print Styles */
        @media print {
            body {
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }
            
            .container {
                padding: 10mm;
            }
            
            .no-print {
                display: none !important;
            }
        }
        
        /* Print Button */
        .print-button {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #4A538F;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .print-button:hover {
            background: #424B84;
        }
    </style>
</head>
<body>
    <button class="print-button no-print" onclick="window.print()">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
        </svg>
        Cetak Resep
    </button>

    <div class="container">
        <!-- Header -->
        <div class="header">
            <h1>UPT PUSKESMAS DOKO</h1>
            <p>Jl. Sersan Toyib No.02 Suru Doko, Blitar</p>
            <p>Telp: (0342) 692118 | Email: pkm.doko@blitarkab.go.id</p>
            <div class="rx-symbol"></div>
        </div>

        <!-- Prescription Info -->
        <div class="prescription-info">
            <div>
                <p><strong>No. Resep:</strong> {{ $resep->no_resep }}</p>
            </div>
            <div class="right">
                <p><strong>Tanggal:</strong> {{ $resep->tanggal_resep->format('d F Y') }}</p>
            </div>
        </div>

        <!-- Patient Info -->
        <div class="patient-info">
            <h3>Data Pasien</h3>
            <table>
                <tr>
                    <td>Nama</td>
                    <td>: <strong>{{ $resep->nama_pasien }}</strong></td>
                </tr>
                @if($resep->umur_pasien)
                <tr>
                    <td>Umur</td>
                    <td>: {{ $resep->umur_pasien }} tahun</td>
                </tr>
                @endif
                @if($resep->alamat_pasien)
                <tr>
                    <td>Alamat</td>
                    <td>: {{ $resep->alamat_pasien }}</td>
                </tr>
                @endif
            </table>
        </div>

        <!-- Diagnosa -->
        @if($resep->diagnosa)
        <div class="diagnosa">
            <h4>Diagnosa</h4>
            <p>{{ $resep->diagnosa }}</p>
        </div>
        @endif

        <!-- Medicines -->
        <div class="medicines">
            <h3>Obat yang Diresepkan</h3>
            <table>
                <thead>
                    <tr>
                        <th style="width: 40px;">No</th>
                        <th>Nama Obat</th>
                        <th style="width: 80px;">Jumlah</th>
                        <th>Aturan Pakai</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($resep->items as $index => $item)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>
                            <span class="medicine-name">{{ $item->nama_obat }}</span>
                        </td>
                        <td>{{ $item->jumlah }} {{ $item->obatMasuk->satuan->nama ?? '' }}</td>
                        <td>
                            <span class="medicine-dosage">{{ $item->aturan_pakai ?? '-' }}</span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Catatan -->
        @if($resep->catatan)
        <div class="diagnosa" style="background: #f0f8ff; border-left-color: #4A538F;">
            <h4 style="color: #4A538F;">Catatan</h4>
            <p>{{ $resep->catatan }}</p>
        </div>
        @endif

        <!-- Footer -->
        <div class="footer">
            <div class="footer-left">
                <p>Dicetak pada: {{ now()->format('d/m/Y H:i') }}</p>
                <p style="font-style: italic; margin-top: 10px;">* Resep ini hanya untuk satu kali pemakaian</p>
            </div>
            <div class="signature">
                <p>Dokter,</p>
                <div class="signature-line">
                    <span class="doctor-name">{{ $resep->user->name ?? 'N/A' }}</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
