<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        {{ $return->return_type === 'debit_note' ? 'إشعار مدين' : 'مرتجع مشتريات' }} -
        {{ $return->return_number }}
    </title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', 'Segoe UI', sans-serif;
            background-color: #ffffff;
            padding: 20px;
            direction: rtl;
        }

        .invoice-container {
            background-color: white;
            padding: 20px;
            margin: 0 auto;
            max-width: 900px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 2px solid #000;
            padding-bottom: 12px;
            margin-bottom: 12px;
            gap: 15px;
        }

        .header-left {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            flex: 1;
        }

        .company-logo {
            width: 65px;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            border: 1px solid #000;
            border-radius: 5px;
            flex-shrink: 0;
        }

        .company-logo img {
            max-width: 95%;
            max-height: 95%;
            object-fit: contain;
        }

        .company-info {
            flex: 1;
        }

        .company-info h1 {
            font-size: 16px;
            font-weight: 900;
            color: #000;
            margin-bottom: 4px;
        }

        .company-info p {
            font-size: 10px;
            color: #000;
            margin: 3px 0 0 0;
        }

        .invoice-type {
            text-align: left;
        }

        .invoice-type h2 {
            font-size: 16px;
            font-weight: 900;
            color: #000;
            margin: 0;
        }

        .invoice-type p {
            font-size: 10px;
            color: #000;
            margin: 3px 0 0 0;
        }

        .invoice-details {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;
            padding: 10px;
            background-color: #ffffff;
            border: 1px solid #000;
            border-radius: 3px;
        }

        .detail-item {
            display: flex;
            flex-direction: column;
        }

        .detail-label {
            font-weight: 900;
            font-size: 8px;
            color: #000;
            margin-bottom: 2px;
            text-transform: uppercase;
        }

        .detail-value {
            font-size: 9px;
            font-weight: 600;
            color: #000;
            line-height: 1.2;
        }

        .invoice-items-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin-bottom: 12px;
        }

        .invoice-items {
            flex: 1;
            overflow-y: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }

        thead {
            background-color: #000;
            color: white;
        }

        thead th {
            padding: 8px;
            text-align: right;
            font-size: 9px;
            font-weight: 900;
            border: 1px solid #000;
            color: white;
            background-color: #000 !important;
        }

        tbody td {
            padding: 7px 8px;
            font-size: 9px;
            font-weight: 600;
            border: 1px solid #000;
            text-align: right;
            color: #000;
        }

        .totals-section {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 12px;
        }

        .totals-box {
            width: 280px;
            background-color: #ffffff;
            padding: 10px;
            border: 2px solid #000;
            border-radius: 3px;
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            font-size: 9px;
            font-weight: 600;
            border-bottom: 1px solid #000;
            color: #000;
        }

        .total-row:last-child {
            border-bottom: none;
        }

        .total-row.grand-total {
            font-weight: 900;
            font-size: 11px;
            color: #000;
            padding: 8px 0;
            border-top: 2px solid #000;
            margin-top: 5px;
        }

        .supplier-info-section {
            margin-bottom: 12px;
            padding: 10px;
            background-color: #eff8ff;
            border: 1px solid #000;
            border-radius: 3px;
        }

        .supplier-info-section h3 {
            font-size: 10px;
            font-weight: 900;
            margin-bottom: 6px;
            color: #000;
        }

        .supplier-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .supplier-info-item {
            font-size: 9px;
            font-weight: 600;
            color: #000;
            line-height: 1.3;
        }

        .supplier-info-item strong {
            display: block;
            font-weight: 900;
            margin-bottom: 2px;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 900;
        }

        .status-draft {
            background-color: #f0ad4e;
            color: white;
        }

        .status-sent {
            background-color: #5bc0de;
            color: white;
        }

        .status-approved {
            background-color: #5cb85c;
            color: white;
        }

        .status-cancelled {
            background-color: #d9534f;
            color: white;
        }

        .notes-section {
            margin-bottom: 12px;
        }

        .notes-section h3 {
            font-size: 10px;
            font-weight: 900;
            margin-bottom: 5px;
            color: #000;
        }

        .notes-content {
            padding: 8px;
            background-color: #ffffff;
            border: 1px solid #000;
            border-radius: 3px;
            font-size: 9px;
            font-weight: 600;
            color: #000;
            max-height: 50px;
            overflow: hidden;
        }

        .footer {
            text-align: center;
            padding-top: 8px;
            border-top: 1px solid #000;
            font-size: 8px;
            font-weight: 600;
            color: #000;
        }

        .print-button-area {
            text-align: center;
            margin-top: 20px;
        }

        .print-button {
            padding: 10px 20px;
            background-color: #000;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
        }

        .print-button:hover {
            background-color: #222;
        }

        .back-button {
            padding: 10px 20px;
            background-color: #6c757d;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            margin-right: 10px;
            text-decoration: none;
            display: inline-block;
        }

        .back-button:hover {
            background-color: #5a6268;
            color: white;
            text-decoration: none;
        }

        @page {
            margin: 0;
            padding: 0;
        }

        @media print {
            body {
                background-color: white;
                padding: 0;
                margin: 0;
            }

            .invoice-container {
                box-shadow: none;
                padding: 20px;
            }

            .print-button-area {
                display: none !important;
            }

            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }

            thead th {
                background-color: #000 !important;
                color: white !important;
                font-weight: 900 !important;
            }

            tbody td {
                color: #000 !important;
                font-weight: 600 !important;
            }

            .detail-value {
                color: #000 !important;
                font-weight: 600 !important;
            }

            .detail-label {
                color: #000 !important;
                font-weight: 900 !important;
            }

            .total-row {
                color: #000 !important;
                font-weight: 600 !important;
            }

            .notes-content {
                border: 1px solid #000;
            }

            .company-logo {
                background-color: white;
                border: 1px solid #000;
            }

            .company-logo img {
                max-width: 95%;
                max-height: 95%;
            }
        }

        @media (max-width: 768px) {
            .invoice-details {
                grid-template-columns: 1fr 1fr;
            }

            .totals-box {
                width: 100%;
            }

            .supplier-info-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="invoice-container">
        <div class="invoice-header">
            <div class="header-left">
                @if ($return->company && $return->company->logo)
                    <div class="company-logo">
                        <img src="{{ asset('storage/' . $return->company->logo) }}"
                            alt="{{ $return->company->name }}"
                            onerror="this.style.display='none'">
                    </div>
                @endif

                <div class="company-info">
                    <h1>{{ optional($return->company)->name }}</h1>
                    @if(optional($return->company)->tax_number)
                        <p><strong>الرقم الضريبي:</strong> {{ $return->company->tax_number }}</p>
                    @endif
                    @if(optional($return->company)->commercial_record)
                        <p><strong>السجل التجاري:</strong> {{ $return->company->commercial_record }}</p>
                    @endif
                    @if(optional($return->company)->address)
                        <p><strong>العنوان:</strong> {{ $return->company->address }}</p>
                    @endif
                    @if(optional($return->company)->phone)
                        <p><strong>الهاتف:</strong> {{ $return->company->phone }}</p>
                    @endif
                </div>
            </div>
            <div class="invoice-type">
                <h2>{{ $return->return_type === 'debit_note' ? 'إشعار مدين' : 'مرتجع مشتريات' }}</h2>
                <p>{{ $return->return_type === 'debit_note' ? 'Debit Note' : 'Purchase Return' }}</p>
            </div>
        </div>

        <div class="invoice-details">
            <div class="detail-item">
                <span class="detail-label">رقم المرتجع</span>
                <span class="detail-value">{{ $return->return_number }}</span>
            </div>
            @if($return->reference_number)
            <div class="detail-item">
                <span class="detail-label">الرقم المرجعي</span>
                <span class="detail-value">{{ $return->reference_number }}</span>
            </div>
            @endif
            <div class="detail-item">
                <span class="detail-label">تاريخ المرتجع</span>
                <span class="detail-value">{{ $return->return_date->format('Y-m-d') }}</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">الحالة</span>
                <span class="detail-value">
                    <span class="status-badge status-{{ $return->status }}">
                        @switch($return->status)
                            @case('draft')
                                مسودة
                            @break
                            @case('sent')
                                مرسلة
                            @break
                            @case('approved')
                                معتمدة
                            @break
                            @case('cancelled')
                                ملغاة
                            @break
                        @endswitch
                    </span>
                </span>
            </div>
        </div>

        <div class="supplier-info-section">
            <h3>بيانات المورد</h3>
            <div class="supplier-info-grid">
                <div class="supplier-info-item">
                    <strong>اسم المورد</strong>
                    {{ optional($return->supplier)->name ?? '-' }}
                </div>
                @if(optional($return->supplier)->contact_person)
                <div class="supplier-info-item">
                    <strong>جهة الاتصال</strong>
                    {{ $return->supplier->contact_person }}
                </div>
                @endif
                @if(optional($return->supplier)->phone)
                <div class="supplier-info-item">
                    <strong>الهاتف</strong>
                    {{ $return->supplier->phone }}
                </div>
                @endif
                @if(optional($return->supplier)->email)
                <div class="supplier-info-item">
                    <strong>البريد الإلكتروني</strong>
                    {{ $return->supplier->email }}
                </div>
                @endif
                @if(optional($return->supplier)->address)
                <div class="supplier-info-item">
                    <strong>العنوان</strong>
                    {{ $return->supplier->address }}
                </div>
                @endif
                <div class="supplier-info-item">
                    <strong>الفاتورة الأصلية</strong>
                    {{ optional($return->invoice)->invoice_number ?? '-' }}
                </div>
            </div>
        </div>

        <div class="invoice-items-section">
            <div class="invoice-items">
                <table>
                    <thead>
                        <tr>
                            <th style="width: 3%;">#</th>
                            <th style="width: 20%;">اسم الصنف</th>
                            <th style="width: 10%;">الوحدة</th>
                            <th style="width: 14%;">الوصف</th>
                            <th style="width: 8%;">الكمية</th>
                            <th style="width: 10%;">سعر الوحدة</th>
                            <th style="width: 8%;">خصم %</th>
                            <th style="width: 8%;">ضريبة %</th>
                            <th style="width: 13%;">الإجمالي</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($return->items as $index => $item)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ optional(optional($item->invoiceItem)->item)->name ?? '-' }}</td>
                                <td style="text-align: center;">
                                    {{ optional(optional(optional($item->invoiceItem)->itemUnit)->unit)->name ?? '-' }}
                                </td>
                                <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: center;">{{ number_format($item->discount_amount, 2) }}%</td>
                                <td style="text-align: center;">
                                    {{ number_format($item->tax_rate + ($item->tax_rate_2 ?? 0), 2) }}%
                                </td>
                                <td style="text-align: center; font-weight: bold;">
                                    {{ number_format($item->total, 2) }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" style="text-align: center; color: #000; font-weight: bold;">
                                    لا توجد بنود في هذا المرتجع
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="totals-section">
                <div class="totals-box">
                    <div class="total-row">
                        <span>المبلغ الفرعي:</span>
                        <span>{{ number_format($return->subtotal ?? 0, 2) }}</span>
                    </div>
                    <div class="total-row">
                        <span>إجمالي الخصم:</span>
                        <span>{{ number_format($return->discount_amount ?? 0, 2) }}</span>
                    </div>
                    <div class="total-row">
                        <span>إجمالي الضريبة:</span>
                        <span>{{ number_format($return->tax_amount ?? 0, 2) }}</span>
                    </div>
                    <div class="total-row grand-total">
                        <span>الإجمالي النهائي:</span>
                        <span>{{ number_format($return->total_amount, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>

        @if ($return->notes)
            <div class="notes-section">
                <h3>ملاحظات</h3>
                <div class="notes-content">
                    {{ $return->notes }}
                </div>
            </div>
        @endif

        <div class="footer">
            <p>شكراً لتعاملكم معنا</p>
            <p>هذه وثيقة مُنشأة بواسطة الحاسوب</p>
        </div>
    </div>

    <div class="print-button-area">
        <a href="{{ route('supplier-invoice-returns.show', $return->id) }}" class="back-button">
            <i class="fas fa-arrow-right"></i> العودة
        </a>
        <button class="print-button" onclick="window.print()">
            طباعة
        </button>
    </div>
</body>

</html>
