<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فاتورة ضريبية - {{ $invoice->invoice_number }}</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Cairo', sans-serif;
        }
        
        body {
            background: #fff;
            color: #333;
            font-size: 12px;
            padding: 20px;
        }
        
        .invoice-card {
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid #eee;
            padding: 30px;
            position: relative;
        }

        /* Header Styling */
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 30px;
            border-bottom: 2px solid #d4af37;
            padding-bottom: 20px;
        }

        .company-brand h1 {
            color: #d4af37;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .company-details p {
            color: #666;
            font-size: 11px;
            line-height: 1.6;
        }

        .invoice-status-box {
            text-align: left;
        }

        .status-stamp {
            border: 3px solid;
            padding: 5px 15px;
            border-radius: 5px;
            font-weight: 700;
            text-transform: uppercase;
            display: inline-block;
            transform: rotate(-10deg);
            font-size: 14px;
        }
        .stamp-paid { border-color: #22c55e; color: #22c55e; }
        .stamp-unpaid { border-color: #ef4444; color: #ef4444; }

        /* Info Grid */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .info-block h3 {
            font-size: 12px;
            color: #d4af37;
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
            padding-bottom: 5px;
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .info-label { color: #888; }
        .info-value { font-weight: 600; }

        /* Tables */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th {
            background: #f8f9fa;
            color: #333;
            border-bottom: 2px solid #eee;
            padding: 10px;
            text-align: right;
            font-size: 11px;
        }

        td {
            padding: 10px;
            border-bottom: 1px solid #f1f1f1;
            font-size: 11px;
        }

        .items-table tr:last-child td { border-bottom: 2px solid #d4af37; }

        /* Totals Section */
        .summary-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 20px;
        }

        .qr-section img {
            width: 100px;
            height: 100px;
            border: 1px solid #eee;
            padding: 5px;
        }

        .totals-box {
            width: 250px;
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f9f9f9;
        }

        .total-row.grand-total {
            background: #fdfaf0;
            border: 1px solid #d4af37;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            color: #d4af37;
            font-weight: 700;
            font-size: 14px;
        }

        .footer-note {
            margin-top: 40px;
            text-align: center;
            font-size: 10px;
            color: #aaa;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }

        @media print {
            body { padding: 0; }
            .invoice-card { border: none; max-width: 100%; padding: 0; }
            .no-print { display: none; }
        }
    </style>
</head>
<body>
    <div class="invoice-card">
        <!-- Header -->
        <div class="header-top">
            <div class="company-brand">
                <h1>{{ $invoice->branch->name ?? 'TQ CARS' }}</h1>
                <div class="company-details">
                    <p>الرقم الضريبي: {{ $invoice->branch->tax_number ?? '---' }}</p>
                    <p>{{ $invoice->branch->address ?? '---' }}</p>
                    <p>هاتف: {{ $invoice->branch->phone ?? '---' }}</p>
                </div>
            </div>
            <div class="invoice-status-box">
                <div class="status-stamp {{ $invoice->status == 'paid' ? 'stamp-paid' : 'stamp-unpaid' }}">
                    {{ $invoice->status == 'paid' ? 'مدفوعة' : 'غير مدفوعة' }}
                </div>
                <div style="margin-top: 15px; text-align: left;">
                    <p style="font-weight: 700; color: #d4af37; font-size: 14px;">فاتورة ضريبية</p>
                    <p style="color: #888;">#{{ $invoice->invoice_number }}</p>
                </div>
            </div>
        </div>

        <!-- Info Grid -->
        <div class="info-grid">
            <div class="info-block">
                <h3>🗓️ معلومات الفاتورة</h3>
                <div class="info-item"><span class="info-label">التاريخ:</span> <span class="info-value">{{ $invoice->invoice_date->format('Y-m-d') }}</span></div>
                <div class="info-item"><span class="info-label">الاستحقاق:</span> <span class="info-value">{{ $invoice->due_date->format('Y-m-d') }}</span></div>
                <div class="info-item"><span class="info-label">الفرع:</span> <span class="info-value">{{ $invoice->branch->name ?? '-' }}</span></div>
            </div>
            <div class="info-block">
                <h3>👤 بيانات العميل</h3>
                <div class="info-item"><span class="info-label">الاسم:</span> <span class="info-value">{{ $invoice->customer->name }}</span></div>
                <div class="info-item"><span class="info-label">الهاتف:</span> <span class="info-value">{{ $invoice->customer->phone }}</span></div>
                <div class="info-item"><span class="info-label">الضريبي:</span> <span class="info-value">{{ $invoice->customer->tax_number ?? '-' }}</span></div>
            </div>
            @if($invoice->rental)
            <div class="info-block">
                <h3>🚗 بيانات العقد</h3>
                <div class="info-item"><span class="info-label">رقم العقد:</span> <span class="info-value">{{ $invoice->rental->contract_number }}</span></div>
                <div class="info-item"><span class="info-label">السيارة:</span> <span class="info-value">{{ $invoice->rental->car->title }}</span></div>
                <div class="info-item"><span class="info-label">اللوحة:</span> <span class="info-value">{{ $invoice->rental->car->plate_number }}</span></div>
            </div>
            @endif
        </div>

        <!-- Items Table -->
        <table class="items-table">
            <thead>
                <tr>
                    <th style="width: 50%;">الوصف</th>
                    <th style="text-align: center;">الكمية</th>
                    <th style="text-align: center;">السعر</th>
                    <th style="text-align: left;">الإجمالي</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->items as $item)
                <tr>
                    <td>{{ $item->description }}</td>
                    <td style="text-align: center;">{{ number_format($item->quantity, 2) }}</td>
                    <td style="text-align: center;">{{ number_format($item->unit_price, 2) }} ر.س</td>
                    <td style="text-align: left;">{{ number_format($item->amount, 2) }} ر.س</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Payments Section -->
        @php
            $payments = collect([]);
            foreach($invoice->receipts as $r) {
                $payments->push(['number' => $r->receipt_number, 'date' => $r->receipt_date->format('Y-m-d'), 'method' => $r->payment_method_label, 'amount' => $r->amount]);
            }
            foreach($invoice->paymentVouchers as $pv) {
                $payments->push(['number' => $pv->voucher_number, 'date' => $pv->voucher_date->format('Y-m-d'), 'method' => $pv->payment_method, 'amount' => $pv->amount_paid]);
            }
        @endphp

        @if($payments->count() > 0)
        <div style="margin-top: 10px;">
            <h4 style="color: #d4af37; font-size: 11px; margin-bottom: 10px;">🧾 سندات القبض المرتبطة</h4>
            <table>
                <thead>
                    <tr>
                        <th>رقم السند</th>
                        <th>التاريخ</th>
                        <th>طريقة الدفع</th>
                        <th style="text-align: left;">المبلغ</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($payments as $p)
                    <tr>
                        <td>{{ $p['number'] }}</td>
                        <td>{{ $p['date'] }}</td>
                        <td>{{ $p['method'] }}</td>
                        <td style="text-align: left;">{{ number_format($p['amount'], 2) }} ر.س</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        <!-- Summary & Totals -->
        <div class="summary-container">
            <div class="qr-section">
                @php
                    $qr = \App\Helpers\QRCodeHelper::generateDataUrl(
                        $invoice->invoice_number,
                        $invoice->total_amount,
                        $invoice->invoice_date->format('Y-m-d')
                    );
                @endphp
                <img src="{{ $qr }}" alt="QR Code">
                <p style="font-size: 9px; color: #888; margin-top: 5px; text-align: center;">امسح للتحقق</p>
            </div>
            
            <div class="totals-box">
                <div class="total-row">
                    <span class="info-label">الإجمالي الجزئي:</span>
                    <span class="info-value">{{ number_format($invoice->subtotal, 2) }} ر.س</span>
                </div>
                <div class="total-row">
                    <span class="info-label">الضريبة (15%):</span>
                    <span class="info-value">{{ number_format($invoice->tax_amount, 2) }} ر.س</span>
                </div>
                <div class="total-row grand-total">
                    <span>الإجمالي النهائي:</span>
                    <span>{{ number_format($invoice->total_amount, 2) }} ر.س</span>
                </div>
                <div class="total-row" style="border-bottom: none; color: #22c55e;">
                    <span class="info-label" style="color: #22c55e;">المبلغ المدفوع:</span>
                    <span class="info-value">{{ number_format($invoice->paid_amount, 2) }} ر.س</span>
                </div>
            </div>
        </div>

        @if($invoice->notes)
        <div style="margin-top: 20px; padding: 10px; background: #fdfdfd; border-right: 3px solid #d4af37; font-size: 11px;">
            <strong>ملاحظات:</strong> {{ $invoice->notes }}
        </div>
        @endif

        <div class="footer-note">
            <p>شكراً لتعاملكم معنا. تم إنشاء هذه الفاتورة آلياً وهي لا تتطلب ختماً.</p>
            <p>{{ now()->format('Y-m-d H:i:s') }}</p>
        </div>
    </div>

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