<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ __('إيصال مبيعات') }} - {{ $transaction->receipt_number }}</title>
    @php
        $branding = app(\App\Domain\Shared\Services\SettingsService::class);
        $brandLogo = $branding->get('branding.logo');
        $brandPrimary = $branding->get('branding.primary_color', '#1e40af');
        $academyName = app()->bound('current_academy') ? app('current_academy')->name_ar : 'الكابتن';
    @endphp
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Cairo', 'Noto Sans Arabic', sans-serif;
            direction: rtl;
            font-size: 14px;
            color: #333;
            background: #f3f4f6;
            padding: 16px;
        }
        .receipt-wrapper {
            max-width: 400px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            text-align: center;
            padding: 20px 16px 12px;
            border-bottom: 2px dashed #e2e8f0;
        }
        .header img { height: 40px; object-fit: contain; margin-bottom: 8px; }
        .header h1 { font-size: 18px; color: {{ $brandPrimary }}; margin: 4px 0; }
        .header .academy { font-size: 13px; color: #64748b; }
        .header .branch { font-size: 11px; color: #94a3b8; }

        .info-section {
            padding: 12px 16px;
            border-bottom: 1px dashed #e2e8f0;
        }
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 3px 0;
            font-size: 12px;
        }
        .info-row .label { color: #64748b; }
        .info-row .value { font-weight: 600; color: #1e293b; }

        .items-section { padding: 12px 16px; }
        table { width: 100%; border-collapse: collapse; }
        th {
            font-size: 11px;
            font-weight: 600;
            color: #64748b;
            text-align: right;
            padding: 6px 4px;
            border-bottom: 1px solid #e2e8f0;
        }
        td {
            font-size: 12px;
            padding: 8px 4px;
            border-bottom: 1px solid #f1f5f9;
        }
        td.num { text-align: left; direction: ltr; }

        .totals-section {
            padding: 12px 16px;
            border-top: 2px dashed #e2e8f0;
        }
        .total-row {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            font-size: 13px;
        }
        .total-row.grand {
            font-size: 18px;
            font-weight: bold;
            padding-top: 8px;
            margin-top: 4px;
            border-top: 1px solid #e2e8f0;
        }
        .total-row .amount { direction: ltr; }

        .footer {
            padding: 12px 16px;
            text-align: center;
            font-size: 11px;
            color: #94a3b8;
            border-top: 1px dashed #e2e8f0;
        }

        .actions {
            padding: 16px;
            display: flex;
            justify-content: center;
            gap: 12px;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 28px;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s;
        }
        .btn-print { background: {{ $brandPrimary }}; color: white; }
        .btn-print:active { opacity: 0.85; }

        @media print {
            body { background: white; padding: 0; }
            .receipt-wrapper { box-shadow: none; border-radius: 0; max-width: 80mm; }
            .actions { display: none !important; }
            @page { size: 80mm auto; margin: 0; }
        }
    </style>
</head>
<body>
    <div class="receipt-wrapper">
        <div class="header">
            @if($brandLogo)
            <img src="{{ Storage::disk('public')->url($brandLogo) }}" alt="{{ $academyName }}">
            @endif
            <h1>{{ __('إيصال مبيعات') }}</h1>
            <div class="academy">{{ $academyName }}</div>
            @if($transaction->branch)
            <div class="branch">{{ $transaction->branch->name_ar }}</div>
            @endif
        </div>

        <div class="info-section">
            <div class="info-row">
                <span class="label">{{ __('رقم الإيصال') }}</span>
                <span class="value" dir="ltr">{{ $transaction->receipt_number }}</span>
            </div>
            <div class="info-row">
                <span class="label">{{ __('التاريخ') }}</span>
                <span class="value" dir="ltr">{{ $transaction->processed_at?->format('Y/m/d H:i') ?? $transaction->created_at?->format('Y/m/d H:i') }}</span>
            </div>
            @if($transaction->participant?->person)
            <div class="info-row">
                <span class="label">{{ __('العميل') }}</span>
                <span class="value">{{ $transaction->participant->person->name_ar ?? $transaction->participant->person->name ?? '-' }}</span>
            </div>
            @endif
            @if($transaction->processedBy)
            <div class="info-row">
                <span class="label">{{ __('الكاشير') }}</span>
                <span class="value">{{ $transaction->processedBy->name ?? '' }}</span>
            </div>
            @endif
        </div>

        @if($transaction->items->count())
        <div class="items-section">
            <table>
                <thead>
                    <tr>
                        <th>{{ __('الصنف') }}</th>
                        <th class="num">{{ __('كمية') }}</th>
                        <th class="num">{{ __('السعر') }}</th>
                        <th class="num">{{ __('الإجمالي') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($transaction->items as $item)
                    <tr>
                        <td>{{ $item->item_name_ar ?? $item->item_name ?? '-' }}</td>
                        <td class="num">{{ $item->quantity }}</td>
                        <td class="num">{{ format_money($item->unit_price) }}</td>
                        <td class="num">{{ format_money($item->line_total) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        <div class="totals-section">
            <div class="total-row">
                <span>{{ __('المجموع') }}</span>
                <span class="amount">{{ format_money($transaction->subtotal) }}</span>
            </div>
            @if(($transaction->discount_amount ?? 0) > 0)
            <div class="total-row" style="color: #16a34a;">
                <span>{{ __('الخصم') }}</span>
                <span class="amount">-{{ format_money($transaction->discount_amount) }}</span>
            </div>
            @endif
            @if(($transaction->tax_amount ?? 0) > 0)
            <div class="total-row">
                <span>{{ __('الضريبة') }}</span>
                <span class="amount">{{ format_money($transaction->tax_amount) }}</span>
            </div>
            @endif
            <div class="total-row grand">
                <span>{{ __('الإجمالي') }}</span>
                <span class="amount">{{ format_money($transaction->total_amount) }}</span>
            </div>
            @php
                $invoice = $transaction->invoice;
                $isPartial = $invoice && $invoice->paid_amount > 0 && $invoice->due_amount > 0;
                $methodLabels = [
                    'cash' => 'نقدي',
                    'card' => 'بطاقة',
                    'wallet' => 'محفظة',
                    'split' => 'مقسم',
                    'bank_transfer' => 'تحويل بنكي',
                    'online' => 'إلكتروني',
                    'cheque' => 'شيك',
                    'other' => 'أخرى',
                ];
                $methodValue = $transaction->payment_method?->value ?? $transaction->payment_method ?? '';
            @endphp
            @if($isPartial)
            <div class="total-row" style="color: #16a34a; margin-top: 6px;">
                <span>{{ __('المدفوع') }}</span>
                <span class="amount">{{ format_money($invoice->paid_amount) }}</span>
            </div>
            <div class="total-row" style="color: #ea580c;">
                <span>{{ __('المتبقي') }}</span>
                <span class="amount">{{ format_money($invoice->due_amount) }}</span>
            </div>
            <div class="total-row" style="margin-top: 4px;">
                <span></span>
                <span style="font-size: 11px; background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 4px;">{{ __('مدفوع جزئياً') }}</span>
            </div>
            @endif
            <div class="total-row" style="margin-top: 8px;">
                <span>{{ __('طريقة الدفع') }}</span>
                <span class="value">{{ $methodLabels[$methodValue] ?? $methodValue }}</span>
            </div>
        </div>

        <div class="footer">
            {{ __('تم إنشاء هذا المستند إلكترونياً ولا يحتاج إلى توقيع') }}
        </div>

        <div class="actions">
            <button onclick="window.print()" class="btn btn-print">
                <svg width="18" height="18" 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>
                {{ __('طباعة') }}
            </button>
        </div>
    </div>

    <script>
        window.onload = function() {
            if (window.matchMedia('print').matches || window.location.hash === '#auto') {
                window.print();
            }
        };
    </script>
</body>
</html>
