<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="utf-8">
    <title>Voucher - {{ $voucher->voucher_number }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        body { 
            font-family: 'Tajawal', sans-serif; 
            direction: rtl; 
            text-align: right; 
            margin: 0;
            padding: 0;
            background: #f8f9fa;
        }

        .main-wrapper {
            width: 210mm;
            min-height: 148mm; /* A5 Landscape or Half A4 */
            margin: 20mm auto;
            background: white;
            position: relative;
            box-sizing: border-box;
            padding: 10mm;
            border: 2px solid #d4af37;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #f1f3f5;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        .company-info {
            flex: 1;
        }

        .company-name {
            font-size: 28px;
            font-weight: 900;
            color: #d4af37;
            margin: 0;
        }

        .voucher-title {
            text-align: center;
            background: #1a1a1a;
            color: #d4af37;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: 900;
            font-size: 20px;
            margin: 15px auto;
            width: fit-content;
        }

        .voucher-meta {
            display: grid;
            grid-template-cols: 1fr 1fr;
            gap: 10px;
            margin-bottom: 20px;
        }

        .meta-item {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #e9ecef;
        }

        .label { font-size: 11px; color: #777; margin-bottom: 2px; }
        .value { font-size: 14px; font-weight: bold; color: #1a1a1a; }

        .amount-section {
            background: #d4af37;
            color: black;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
            margin: 20px 0;
        }

        .amount-value { font-size: 32px; font-weight: 900; }
        .amount-words { font-size: 14px; font-weight: bold; margin-top: 5px; }

        .details-grid {
            display: grid;
            grid-template-cols: 1fr;
            gap: 15px;
        }

        .detail-row {
            border-bottom: 1px dashed #ddd;
            padding-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }

        .signatures {
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
        }

        .signature-box {
            width: 150px;
            text-align: center;
            border-top: 1px solid #333;
            padding-top: 10px;
            font-size: 12px;
            font-weight: bold;
        }

        .print-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            background: #d4af37;
            color: black;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            z-index: 1000;
        }

        @media print {
            .print-btn { display: none; }
            body { background: white; margin: 0; padding: 0; }
            .main-wrapper { 
                margin: 0; 
                width: 100%; 
                border: none; 
                box-shadow: none;
                padding: 10mm;
            }
            @page { size: A5 landscape; margin: 0; }
        }
    </style>
</head>
<body onload="window.print()">
    <button class="print-btn" onclick="window.print()">طباعة السند</button>

    <div class="main-wrapper">
        <div class="header">
            <div class="company-info">
                <h1 class="company-name">TQ CARS</h1>
                <div style="font-size: 11px; color: #666;">سجل تجاري: 1010XXXXXX</div>
            </div>
            <div style="text-align: left;">
                @php
                    $qrText = "Voucher: " . $voucher->voucher_number . " | Amount: " . $voucher->amount . " SAR";
                    $qrUrl = "https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=" . urlencode($qrText);
                @endphp
                <img src="{{ $qrUrl }}" width="70" height="70">
            </div>
        </div>

        <div class="voucher-title">سند صرف نقدية | PAYMENT VOUCHER</div>

        <div class="voucher-meta">
            <div class="meta-item">
                <div class="label">رقم السند | VOUCHER NO.</div>
                <div class="value" style="color: #d4af37;">{{ $voucher->voucher_number }}</div>
            </div>
            <div class="meta-item">
                <div class="label">التاريخ | DATE</div>
                <div class="value">{{ $voucher->voucher_date->format('Y-m-d') }}</div>
            </div>
        </div>

        <div class="amount-section">
            <div class="amount-value">{{ number_format($voucher->amount, 2) }} SAR</div>
            <div class="amount-words">فقط وقدره: {{ $voucher->amount }} ريال لا غير</div>
        </div>

        <div class="details-grid">
            <div class="detail-row">
                <span class="label">يُصرف للسيد | PAID TO</span>
                <span class="value">{{ $voucher->customer->name ?? '---' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">وذلك مقابل | REASON</span>
                <span class="value">{{ $voucher->reason }}</span>
            </div>
            @if($voucher->rental)
            <div class="detail-row">
                <span class="label">رقم العقد | CONTRACT NO.</span>
                <span class="value">#{{ $voucher->rental->contract_number }}</span>
            </div>
            @endif
            <div class="detail-row">
                <span class="label">طريقة الدفع | METHOD</span>
                <span class="value uppercase">{{ $voucher->payment_method }}</span>
            </div>
        </div>

        <div class="signatures">
            <div class="signature-box">توقيع المستلم</div>
            <div class="signature-box">توقيع المحاسب</div>
            <div class="signature-box">ختم الشركة</div>
        </div>
    </div>
</body>
</html>