<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سند قبض - {{ $voucher->voucher_number }}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: white;
            color: #333;
            line-height: 1.6;
        }
        
        .voucher-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
            background: white;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 3px solid #10b981;
            padding-bottom: 30px;
            margin-bottom: 30px;
        }
        
        .company-info h1 {
            color: #10b981;
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .company-info p {
            color: #666;
            font-size: 14px;
            line-height: 1.8;
        }
        
        .qr-code {
            text-align: center;
        }
        
        .qr-code img {
            width: 120px;
            height: 120px;
            border: 2px solid #10b981;
            padding: 8px;
        }
        
        .voucher-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #10b981;
            margin-bottom: 20px;
            text-transform: uppercase;
        }
        
        .voucher-details {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            background: #f0fdf4;
            padding: 20px;
            border-radius: 5px;
            border: 1px solid #10b981;
        }
        
        .detail-box {
            flex: 1;
        }
        
        .detail-box label {
            display: block;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
            font-size: 12px;
            text-transform: uppercase;
            color: #666;
        }
        
        .detail-box p {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
        }
        
        .amount-section {
            margin-bottom: 30px;
            background: #f0fdf4;
            padding: 30px;
            border-radius: 5px;
            border: 2px solid #10b981;
            text-align: center;
        }
        
        .amount-section label {
            display: block;
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        
        .amount-value {
            font-size: 32px;
            font-weight: bold;
            color: #10b981;
            margin-bottom: 10px;
        }
        
        .amount-words {
            font-size: 14px;
            color: #333;
            border-top: 1px solid #d1d5db;
            padding-top: 10px;
        }
        
        .payment-details {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 5px;
        }
        
        .payment-detail {
            flex: 1;
        }
        
        .payment-detail label {
            display: block;
            font-weight: bold;
            color: #666;
            margin-bottom: 5px;
            font-size: 12px;
        }
        
        .payment-detail p {
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
        }
        
        .customer-section {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 5px;
        }
        
        .customer-section h3 {
            color: #10b981;
            font-size: 14px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        
        .customer-section p {
            font-size: 14px;
            margin-bottom: 5px;
            color: #333;
        }
        
        .signature-section {
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
            padding-top: 30px;
            border-top: 2px solid #ddd;
        }
        
        .signature-box {
            text-align: center;
            flex: 1;
        }
        
        .signature-box p {
            font-size: 12px;
            color: #666;
            margin-top: 60px;
            border-top: 2px solid #333;
            padding-top: 10px;
        }
        
        .footer {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid #ddd;
            color: #999;
            font-size: 12px;
        }
        
        .invoice-link {
            background: #e0f2fe;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border-left: 4px solid #0284c7;
        }
        
        @media print {
            body {
                margin: 0;
                padding: 0;
            }
            .voucher-container {
                max-width: 100%;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="voucher-container">
        <div class="header">
            <div class="company-info">
                <h1>{{ $voucher->branch->name ?? 'الشركة' }}</h1>
                <p>
                    @if($voucher->branch)
                        <strong>الرقم الضريبي:</strong> {{ $voucher->branch->tax_number ?? 'N/A' }}<br>
                        <strong>العنوان:</strong> {{ $voucher->branch->address ?? '-' }}<br>
                        <strong>الهاتف:</strong> {{ $voucher->branch->phone ?? '-' }}
                    @endif
                </p>
            </div>
            <div class="qr-code">
                @php
                    $qr = \App\Helpers\QRCodeHelper::generateDataUrl(
                        $voucher->voucher_number,
                        $voucher->amount_paid,
                        $voucher->voucher_date->format('Y-m-d')
                    );
                @endphp
                <img src="{{ $qr }}" alt="QR Code">
                <p style="font-size: 12px; margin-top: 10px; color: #999;">{{ $voucher->voucher_number }}</p>
            </div>
        </div>

        <div class="voucher-title">
            ✓ سند قبض
        </div>

        <div class="invoice-link">
            <strong>الفاتورة:</strong> 
            <a href="#" style="color: #0284c7; text-decoration: underline;">{{ $voucher->invoice->invoice_number }}</a>
        </div>

        <div class="voucher-details">
            <div class="detail-box">
                <label>رقم السند</label>
                <p>{{ $voucher->voucher_number }}</p>
            </div>
            <div class="detail-box">
                <label>التاريخ</label>
                <p>{{ $voucher->voucher_date->format('Y-m-d') }}</p>
            </div>
            <div class="detail-box">
                <label>الوقت</label>
                <p>{{ $voucher->voucher_date->format('H:i') }}</p>
            </div>
        </div>

        <div class="amount-section">
            <label>المبلغ المستلم</label>
            <div class="amount-value">{{ number_format($voucher->amount_paid, 2) }} ر.س</div>
            <div class="amount-words">
                {{ \App\Helpers\NumberToWords::convert($voucher->amount_paid) }}
            </div>
        </div>

        <div class="payment-details">
            <div class="payment-detail">
                <label>طريقة الدفع</label>
                <p style="font-weight: bold;">
                    @switch($voucher->payment_method)
                        @case('cash'): نقداً @break
                        @case('transfer'): تحويل بنكي @break
                        @case('check'): شيك @break
                        @case('card'): بطاقة ائتمان @break
                        @default: أخرى
                    @endswitch
                </p>
            </div>
            <div class="payment-detail">
                <label>رقم المرجع</label>
                <p>{{ $voucher->reference_number ?? '-' }}</p>
            </div>
            @if($voucher->payment_method == 'check')
            <div class="payment-detail">
                <label>رقم الشيك</label>
                <p>{{ $voucher->check_number ?? '-' }}</p>
            </div>
            <div class="payment-detail">
                <label>تاريخ الشيك</label>
                <p>{{ $voucher->check_date ? $voucher->check_date->format('Y-m-d') : '-' }}</p>
            </div>
            <div class="payment-detail">
                <label>البنك</label>
                <p>{{ $voucher->bank_name ?? '-' }}</p>
            </div>
            @endif
        </div>

        <div class="customer-section">
            <div>
                <h3>بيانات المستلم</h3>
                <p><strong>الاسم:</strong> {{ $voucher->customer->name }}</p>
                <p><strong>الهاتف:</strong> {{ $voucher->customer->phone }}</p>
                <p><strong>البريد الإلكتروني:</strong> {{ $voucher->customer->email }}</p>
            </div>
            <div>
                <h3>معلومات الاستلام</h3>
                <p><strong>المستلم:</strong> {{ $voucher->receiver->name ?? '-' }}</p>
                <p><strong>التاريخ:</strong> {{ $voucher->voucher_date->format('Y-m-d') }}</p>
                <p><strong>الوقت:</strong> {{ $voucher->voucher_date->format('H:i:s') }}</p>
            </div>
        </div>

        @if($voucher->notes)
        <div style="background: #f9f9f9; padding: 15px; border-radius: 5px; margin-bottom: 30px;">
            <strong>ملاحظات:</strong>
            <p style="margin-top: 10px; font-size: 14px;">{{ $voucher->notes }}</p>
        </div>
        @endif

        <div class="signature-section">
            <div class="signature-box">
                <div style="font-size: 12px; color: #666;">المستلم</div>
                <p></p>
            </div>
            <div class="signature-box">
                <div style="font-size: 12px; color: #666;">صاحب الشركة</div>
                <p></p>
            </div>
            <div class="signature-box">
                <div style="font-size: 12px; color: #666;">ختم الشركة</div>
                <p></p>
            </div>
        </div>

        <div class="footer">
            <p>هذا السند يثبت استلام المبلغ المحدد أعلاه</p>
            <p>تم إنشاء هذا السند في نظام إدارة الأسطول - {{ now()->format('Y-m-d H:i:s') }}</p>
        </div>
    </div>

    <script>
        window.onload = function() {
            window.print();
        }
    </script>
</body>
</html>
