@extends('layouts.master')

@section('title', 'طباعة الوثيقة الثانوية')

@section('css')
    <style>
        .doc-print {
            padding: 40px 50px;
            border: 1px solid #e3e3e3;
            border-radius: 8px;
            max-width: 1000px;
            margin: auto;


            box-shadow: 0 0 8px rgba(0, 0, 0, .05);
        }

        .doc-header {
            border-bottom: 2px solid #dee2e6;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }

        .doc-header h3 {
            margin: 0;
            font-weight: 700;
        }



        .section-box {

            border: 1px solid #e5e5e5;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .section-box h5 {
            margin-bottom: 15px;
            font-weight: 700;
            color: #0d6efd;
        }

        .table th {

            font-weight: 700;
        }

        .table th,
        .table td {
            vertical-align: middle !important;
            border-color: #e1e1e1 !important;
        }

        .qr-box img {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 4px;
            background: #fff;
        }

        .doc-label {
            font-weight: 700;
            color: #555;
        }

        .print-actions {
            text-align: end;
            margin-top: 20px;
        }

        @media print {
            .no-print {
                display: none !important;
            }

            body {
                background: #fff;
            }

            .doc-print {
                border: 0;
                box-shadow: none;
                margin: 0;
                max-width: 100%;
                padding: 0;
            }
        }
    </style>
@endsection

@section('content')
    <div class="container my-4">
        <div class="doc-print">

            {{-- HEADER --}}
            <div class="d-flex justify-content-between align-items-start doc-header">
                <div>
                    <h3 class="mb-3">
                        {{ $docTypeLabel }}
                        <small> / Secondary Document</small>
                    </h3>

                    <p class="mb-1"><span class="doc-label">رقم الوثيقة:</span> {{ $secondaryDocument->qrn }}</p>
                    <p class="mb-1"><span class="doc-label">النوع:</span>
                        {{ $secondaryDocument->doc_type === 'transfer' ? 'تنازل' : 'إيقاف' }}</p>
                    <p class="mb-0"><span class="doc-label">التاريخ:</span>
                        {{ optional($secondaryDocument->created_at)->format('Y-m-d') }}</p>
                </div>



                <div class="text-end">
                    <div id="qrcode" class="qr-box"></div>
                </div>
            </div>

            {{-- BASIC INFO --}}
            <div class="section-box">
                <h5>البيانات الأساسية</h5>
                <div class="row text-center">
                    <div class="col-md-4">
                        <p><span class="doc-label">الفرع:</span> {{ $branchName }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><span class="doc-label">اسم العضو:</span> {{ optional($sourceSub?->member)->name ?? '—' }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><span class="doc-label">رقم العضو:</span> {{ optional($sourceSub?->member)->member_code ?? '—' }}
                        </p>
                    </div>
                </div>
            </div>

            {{-- SOURCE SUBSCRIPTION --}}
            <div class="section-box">
                <h5>بيانات الاشتراك الأصلي</h5>
                <div class="row text-center">
                    <div class="col-md-2">
                        <p><span class="doc-label">رقم الاشتراك:</span> {{ $sourceSub->subscription_no ?? '—' }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><span class="doc-label">الخدمة / الاشتراك:</span>

                            {{ $sourceSub->item_name ?? '—' }}
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p><span class="doc-label">بداية الفترة:</span> {{ $sourceSub->start_date->format('Y-m-d') ?? '—' }}
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p><span class="doc-label">نهاية الفترة:</span> {{ $sourceSub->end_date->format('Y-m-d') ?? '—' }}
                        </p>
                    </div>
                </div>
            </div>

            {{-- STOP --}}
            @if ($secondaryDocument->doc_type === 'stop' && $stop)
                <div class="section-box">
                    <h5>تفاصيل الإيقاف</h5>
                    <div class="row text-center">
                        <div class="col-md-4">
                            <p><span class="doc-label">بداية الإيقاف:</span> {{ $stop->start_date }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><span class="doc-label">نهاية الإيقاف:</span> {{ $stop->end_date }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><span class="doc-label">عدد الأيام:</span> {{ $stop->days }}</p>
                        </div>
                    </div>
                </div>

                <div class="section-box">
                    <h5>الاشتراك بعد الإيقاف</h5>
                    <div class="row text-center">
                        <div class="col-md-3">
                            <p><span class="doc-label">رقم الاشتراك الجديد:</span> {{ $newSub->subscription_no ?? '—' }}
                            </p>
                        </div>
                        <div class="col-md-3">
                            <p><span class="doc-label">بداية الفترة الجديدة:</span> {{ $newSub->start_date ?? '—' }}</p>
                        </div>
                        <div class="col-md-3">
                            <p><span class="doc-label">نهاية الفترة الجديدة:</span> {{ $newSub->end_date ?? '—' }}</p>
                        </div>
                        <div class="col-md-3">
                            <p><span class="doc-label">المدة الجديدة:</span> {{ $newSub->duration ?? '—' }}</p>
                        </div>
                    </div>
                </div>
            @endif

            {{-- TRANSFER --}}
            @if ($secondaryDocument->doc_type === 'transfer' && $transfer)
                <div class="section-box">
                    <h5>تفاصيل التنازل</h5>
                    <div class="row g-3 mb-3">

                        {{-- العضو الحالي --}}
                        <div class="col-12 col-md-6">
                            <div class="d-flex justify-content-between border p-2 rounded">
                                <span class="doc-label">رقم العضو الحالي:</span>
                                <span>{{ optional($transfer->fromMember)->member_code ?? '—' }}</span>
                            </div>
                        </div>

                        <div class="col-12 col-md-6">
                            <div class="d-flex justify-content-between border p-2 rounded">
                                <span class="doc-label">العضو الحالي:</span>
                                <span>{{ optional($transfer->fromMember)->name ?? '—' }}</span>
                            </div>
                        </div>

                        {{-- العضو الجديد --}}
                        <div class="col-12 col-md-6">
                            <div class="d-flex justify-content-between border p-2 rounded">
                                <span class="doc-label">رقم العضو الممنوح:</span>
                                <span>{{ optional($transfer->toMember)->member_code ?? '—' }}</span>
                            </div>
                        </div>

                        <div class="col-12 col-md-6">
                            <div class="d-flex justify-content-between border p-2 rounded">
                                <span class="doc-label">العضو الممنوح:</span>
                                <span>{{ optional($transfer->toMember)->name ?? '—' }}</span>
                            </div>
                        </div>

                    </div>
                    <div class="row mt-2 text-center">
                        <div class="col-md-4">
                            <p><span class="doc-label">تاريخ التنازل:</span> {{ $transfer->transfer_date }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><span class="doc-label">رسوم التنازل:</span> {{ number_format((float) $transfer->fee, 2) }}
                            </p>
                        </div>
                        <div class="col-md-4">
                            <p><span class="doc-label">الإجمالي بعد الضريبة:</span>
                                {{ number_format((float) $transfer->total_amount, 2) }}</p>
                        </div>
                    </div>
                </div>

                <div class="section-box">
                    <h5>طرق الدفع</h5>
                    <table class="table table-bordered text-center align-middle">
                        <thead>
                            <tr>
                                <th>طريقة الدفع</th>
                                <th>المبلغ</th>
                                <th>ملاحظات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($transfer->payments as $payment)
                                <tr>
                                    <td>{{ optional($payment->paymentMethod)->name_ar ?? (optional($payment->paymentMethod)->name ?? '—') }}
                                    </td>
                                    <td>{{ number_format((float) $payment->amount, 2) }}</td>
                                    <td>{{ $payment->notes ?: '—' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3">لا توجد بيانات دفع</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="section-box">
                    <h5>الاشتراك بعد التنازل</h5>
                    <div class="row text-center">
                        <div class="col-md-3">
                            <p><span class="doc-label">رقم الاشتراك الجديد:</span> {{ $newSub->subscription_no ?? '—' }}
                            </p>
                        </div>
                        <div class="col-md-3">
                            <p><span class="doc-label">بداية الفترة:</span>
                                {{ $newSub->start_date->format('Y-m-d') ?? '—' }}</p>
                        </div>
                        <div class="col-md-3">
                            <p><span class="doc-label">نهاية الفترة:</span> {{ $newSub->end_date->format('Y-m-d') ?? '—' }}
                            </p>
                        </div>
                        <div class="col-md-3">
                            <p><span class="doc-label">المدة:</span> {{ $newSub->duration ?? '—' }}</p>
                        </div>
                    </div>
                </div>
            @endif



            <div class="print-actions no-print">
                <button class="btn btn-outline-primary" onclick="window.print()">طباعة <i class="fas fa-print mx-2"></i></button>
            </div>
        </div>
    </div>
@endsection

@section('js')

    @php
        $totalAmount = number_format((float) ($transfer->total_amount ?? 0), 2, '.', '');
        $vatAmount = number_format((float) ($transfer->tax_amount ?? 0), 2, '.', '');
    @endphp
    <script>
        const sellerName = @json($companyName);
        const vatNumber = @json($taxNumber);
        const invoiceDate = @json(optional($secondaryDocument->created_at)->format('Y-m-d'));

        const totalAmount = @json($totalAmount);
        const vatAmount = @json($vatAmount);

        function toTLV(tag, value) {
            const encoder = new TextEncoder();
            const valueBytes = encoder.encode(String(value ?? ''));
            const tlv = new Uint8Array(2 + valueBytes.length);
            tlv[0] = tag;
            tlv[1] = valueBytes.length;
            tlv.set(valueBytes, 2);
            return tlv;
        }

        function generateSecondaryDocQRCode() {
            const tlv = [
                toTLV(1, sellerName),
                toTLV(2, vatNumber),
                toTLV(3, invoiceDate),
                toTLV(4, totalAmount),
                toTLV(5, vatAmount)
            ];

            const merged = new Uint8Array(tlv.reduce((acc, curr) => [...acc, ...curr], []));
            const base64 = btoa(String.fromCharCode(...merged));

            const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(base64)}&size=130x130`;

            document.getElementById('qrcode').innerHTML = `
            <img src="${qrUrl}" width="130" height="130">
        `;
        }

        document.addEventListener('DOMContentLoaded', generateSecondaryDocQRCode);
    </script>
@endsection