@extends('layouts.master')

@section('content')
    @php
        /* ========= تجهيز قيم QR (آمن 100%) ========= */
        $qrDate = $serviceInvoice->created_at ? $serviceInvoice->created_at->format('Y-m-d\TH:i:s') : '';

        $qrTotal = number_format($serviceInvoice->total_net ?? 0, 2, '.', '');
        $qrVat = number_format($serviceInvoice->total_tax ?? 0, 2, '.', '');

        /* ========= تجهيز طريقة الدفع ========= */
        $payments = is_array($serviceInvoice->payment_methods)
            ? $serviceInvoice->payment_methods
            : json_decode($serviceInvoice->payment_methods ?? '[]', true);

        $paymentText = '';

        if (!empty($payments)) {
            foreach ($payments as $p) {
                $methodId = $p['method'] ?? null;
                $method = $paymentMethods[$methodId] ?? null;

                if ($method) {
                    $name = app()->getLocale() === 'ar' ? $method->name_ar ?? $method->name_en : $method->name_en;

                    $paymentText .= $name . ' ';
                }
            }
        }

        if ($paymentText == '') {
            $paymentText = 'Cash';
        }
    @endphp


    <style>
        * {
            box-sizing: border-box
        }

        html,
        body {
            margin: 0;
            padding: 0;
            font-family: Tahoma, Arial;
            background: #f3f3f3;
        }

        .paper {
            width: 210mm;
            min-height: 297mm;
            margin: auto;
            background: #fff;
            padding: 12mm;
            direction: rtl;
        }

        /* ================= HEADER ================= */
        /* LTR علشان: QR شمال + Barcode يمين */
        .header {
            direction: ltr;
            border-top: 6px solid #c9c2b6;
            padding-top: 12px;
            margin-bottom: 18px;
        }

        .header-grid {
            display: grid;
            grid-template-columns: 140px 1fr 260px;
            align-items: center;
        }

        /* QR */
        .qr-box canvas {
            width: 95px !important;
            height: 95px !important;
        }

        /* Logo */
        .logo-center {
            text-align: center;
        }

        .logo-center img {
            height: 55px;
        }

        /* Barcode */
        .barcode-box {
            text-align: right;
        }

        .barcode-number {
            font-size: 22px;
            font-weight: 700;
        }

        #barcode {
            width: 100%;
            margin: auto
        }

        .qr-box {
            width: 100%;
            object-fit: cover;
        }

        .small {
            font-size: 12px;
            color: #777;
        }

        /* ================= INFO ================= */
        .info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 18px;
            font-size: 13px;
            line-height: 1.9;
        }

        /* ================= PRODUCTS ================= */
        .section-title {
            font-weight: 700;
            margin: 14px 0 8px;
        }

        .product-header,
        .product-row {
            display: grid;
            grid-template-columns: 1fr 70px 120px 120px 120px;
            padding: 6px 0;
        }

        .product-header {
            color: #888;
            border-bottom: 1px solid #eee;
            font-size: 12px;
        }

        .product-row {
            border-bottom: 1px solid #eee;
        }

        .total-products {
            text-align: left;
            font-weight: 700;
            margin-top: 6px;
        }

        /* ================= PAYMENT ================= */
        .payment {
            margin-top: 8px;
            border-bottom: 1px solid #eee;
            padding: 6px 0;
            font-size: 13px;
        }

        /* ================= SUMMARY ================= */
        .summary {
            width: 55%;
            margin-right: auto;
            margin-top: 14px;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid #eee;
        }

        .summary-row.total {
            font-weight: 700;
            font-size: 16px;
        }

        /* ================= PRINT ================= */
        @page {
            size: A4;
            margin: 0;
        }

        @media print {
            body {
                background: #fff
            }

            .no-print {
                display: none
            }

            .paper {
                margin: 0
            }
        }
    </style>



    <div class="paper">

        {{-- ================= HEADER ================= --}}
        <div class="header">
            <div class="header-grid">

                {{-- LEFT : QR --}}
                <div class="qr-box" id="qrBox"></div>

                {{-- CENTER : LOGO --}}
                <div class="logo-center">
                    @if ($logo)
                        <img src="{{ $logo }}">
                    @endif
                </div>

                {{-- RIGHT : BARCODE --}}
                <div class="barcode-box">
                    <svg id="barcode"></svg>

                    <div class="barcode-number">
                        {{ $serviceInvoice->invoice_no }}
                    </div>

                    <div class="small">
                        تاريخ إصدار الفاتورة :
                        {{ $serviceInvoice->created_at->format('Y-m-d H:i') }}
                    </div>

                    <div class="small">
                        الرقم الضريبي : {{ $vatNumber }}
                    </div>
                </div>

            </div>
        </div>



        {{-- ================= INFO ================= --}}
        <div class="info">
            <div>
                <b>اسم العميل:</b> {{ $serviceInvoice->member->name ?? '-' }} <br>
                <b>رقم الهاتف:</b> {{ $serviceInvoice->member->phone ?? '-' }} <br>
                <b>البريد الالكتروني:</b> {{ $serviceInvoice->member->email ?? '-' }}
            </div>

            <div>
                <b>رقم الفاتورة</b><br>
                {{ $serviceInvoice->invoice_no }}
            </div>
        </div>



        {{-- ================= PRODUCTS ================= --}}
        <div class="section-title">المنتجات
            <b>الخدمات</b>
        </div>

        <div class="product-header">
            <div>اسم المنتج</div>
            <div>الكمية</div>
            <div>السعر</div>
            <div>الضريبة</div>
            <div>الإجمالي</div>
        </div>

        @foreach ($serviceInvoice->items as $item)
            <div class="product-row">
                <div>{{ $item->description }}</div>
                <div>{{ $item->qty ?? 1 }}</div>
                <div>SAR {{ number_format($item->price ?? 0, 2) }}</div>
                <div>SAR {{ number_format($item->tax ?? 0, 2) }}</div>
                <div>SAR {{ number_format($item->total ?? 0, 2) }}</div>
            </div>
        @endforeach

        <div class="total-products">
            إجمالي المنتجات :
            SAR {{ number_format($serviceInvoice->total_net ?? 0, 2) }}
        </div>



        {{-- ================= PAYMENT ================= --}}
        <div class="payment">
            <b>طريقة الدفع:</b>
            {{ $paymentText }}
            ويتم وضع طريقة الدفع بالمبلغ المدفوع
        </div>



        {{-- ================= SUMMARY ================= --}}
        <div class="section-title">تفاصيل الأسعار</div>

        <div class="summary">

            <div class="summary-row">
                <span>المجموع غير شامل الضريبة</span>
                <span>SAR {{ number_format($serviceInvoice->total_price ?? 0, 2) }}</span>
            </div>

            <div class="summary-row">
                <span>المبلغ الخاضع للضريبة</span>
                <span>SAR {{ number_format($serviceInvoice->total_price ?? 0, 2) }}</span>
            </div>

            <div class="summary-row">
                <span>ضريبة القيمة المضافة (%15)</span>
                <span>SAR {{ number_format($serviceInvoice->total_tax ?? 0, 2) }}</span>
            </div>

            <div class="summary-row">
                <span>مجموع المنتجات شامل ضريبة القيمة المضافة</span>
                <span>SAR {{ number_format($serviceInvoice->total_net ?? 0, 2) }}</span>
            </div>

            <div class="summary-row total">
                <span>المجموع الكلي</span>
                <span>SAR {{ number_format($serviceInvoice->total_net ?? 0, 2) }}</span>
            </div>

        </div>

    </div>



    <div class="no-print" style="text-align:center;margin-top:15px">
        <button onclick="window.print()">🖨 طباعة</button>
    </div>



    {{-- ================= JS ================= --}}
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>

    <script>
        JsBarcode("#barcode", @json($serviceInvoice->invoice_no), {
            format: "CODE128",
            width: 2,
            height: 45,
            displayValue: false
        });

        function toTLV(tag, val) {
            const enc = new TextEncoder();
            const bytes = enc.encode(val || '');
            return new Uint8Array([tag, bytes.length, ...bytes]);
        }

        const tlv = [
            toTLV(1, @json($companyName)),
            toTLV(2, @json($vatNumber)),
            toTLV(3, @json($qrDate)),
            toTLV(4, @json($qrTotal)),
            toTLV(5, @json($qrVat))
        ];

        const merged = new Uint8Array(tlv.flatMap(v => Array.from(v)));
        const base64 = btoa(String.fromCharCode(...merged));

        new QRCode(document.getElementById("qrBox"), {
            text: base64,
            width: 95,
            height: 95
        });
    </script>
@endsection