<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                نمایش فاکتور شماره: {{ $invoice->id }}
            </h2>
            
            {{-- دکمه‌های عملیاتی --}}
            <div class="flex gap-2">
                <x-secondary-button onclick="printInvoice()">
                    🖨️ چاپ کردن
                </x-secondary-button>
                <x-primary-button onclick="downloadInvoiceImage()">
                    🖼️ ذخیره به عنوان عکس (JPG)
                </x-primary-button>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                {{-- 
                    این ID برای دکمه "ذخیره عکس" حیاتی است
                    ما محتوای فایل PDF قبلی شما را مستقیماً اینجا قرار می‌دهیم
                --}}
                <div id="invoice-to-print">
                    
                    {{-- 
                        محتوای فایل resources/views/agent/print-invoice-cart.blade.php
                        (بدون تگ‌های html, head, body) در اینجا کپی شده است
                    --}}
                    <style>
                        /* ما استایل‌ها را مستقیماً اینجا قرار می‌دهیم تا هم در صفحه
                           و هم در حالت چاپ به درستی اعمال شوند
                        */
                        body {
                            font-family: 'Vazirmatn', sans-serif;
                            background-color: #fff !important; /* اطمینان از پس‌زمینه سفید در چاپ */
                        }
                        .invoice-box {
                            width: 100%;
                            margin: 0;
                            padding: 25px;
                            border: none;
                            box-shadow: none;
                            font-size: 11px;
                            line-height: 1.6;
                            color: #333;
                        }
                        table { width: 100%; border-collapse: collapse; }
                        .header-table td { padding: 5px 0; vertical-align: top; }
                        .header-table .logo { max-width: 120px; max-height: 80px; }
                        .header-table .company-details { text-align: left; font-size: 12px; }
                        .header-table .invoice-title { font-size: 20px; font-weight: bold; text-align: center; padding: 10px 0; }
                        .info-table { margin-top: 20px; border: 1px solid #ddd; }
                        .info-table th { background-color: #f9f9f9; text-align: right; padding: 8px 10px; font-size: 13px; font-weight: bold; border-bottom: 1px solid #ddd; }
                        .info-table td { padding: 10px; vertical-align: top; line-height: 1.8; }
                        .items-table { margin-top: 25px; border: 1px solid #ddd; }
                        .items-table thead th { background-color: #f2f2f2; font-weight: bold; font-size: 11px; text-align: right; padding: 10px 8px; border-bottom: 2px solid #ccc; }
                        .items-table tbody tr:nth-child(even) { background-color: #fcfcfc; }
                        .items-table td { padding: 10px 8px; border-bottom: 1px solid #eee; }
                        .summary-table { margin-top: 20px; width: 50%; float: left; border: 1px solid #eee; }
                        .summary-table td { padding: 8px 12px; border-bottom: 1px solid #eee; }
                        .summary-table .total { font-weight: bold; font-size: 13px; background-color: #f5f5f5; }
                        .footer-notes { margin-top: 30px; padding-top: 15px; border-top: 1px solid #ccc; font-size: 10px; color: #777; clear: both; }
                        .text-left { text-align: left; }
                        .text-center { text-align: center; }
                        .text-bold { font-weight: bold; }

                        /* استایل‌های مخصوص حالت چاپ */
                        @media print {
                            /* تمام عناصر صفحه را مخفی کن */
                            body * {
                                visibility: hidden;
                            }
                            /* فقط بخش فاکتور و محتویات آن را قابل مشاهده کن */
                            #invoice-to-print, #invoice-to-print * {
                                visibility: visible;
                            }
                            /* فاکتور را در گوشه بالا سمت راست صفحه چاپ قرار بده */
                            #invoice-to-print {
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 100%;
                                margin: 0;
                                padding: 0;
                            }
                            /* اطمینان از اینکه هدر و دکمه‌ها در چاپ پنهان هستند */
                            header, .flex.gap-2 {
                                display: none !important;
                            }
                        }
                    </style>

                    <div class="invoice-box">
                        {{-- هدر: لوگو و اطلاعات شرکت --}}
                        <table class="header-table">
                            <tr>
                                <td style="width: 25%;">
                                    @if(!empty($settings['company_logo']))
                                        {{-- 
                                          استفاده از asset() به جای public_path()
                                          چون این یک صفحه HTML است نه PDF
                                        --}}
                                        <img src="{{ asset('storage/' . $settings['company_logo']) }}" class="logo">
                                    @else
                                        <h2 style="margin: 0;">{{ $settings['company_name'] ?? 'نام شرکت' }}</h2>
                                    @endif
                                </td>
                                <td style="width: 45%;" class="invoice-title">
                                    پیش فاکتور
                                </td>
                                <td style="width: 30%;" class="company-details">
                                    شماره: <span class="text-bold">#{{ $invoice->id }}</span><br>
                                    تاریخ: {{ verta($invoice->created_at)->format('Y/m/d') }}<br>
                                    نماینده: {{ $invoice->user->name ?? '-' }}
                                </td>
                            </tr>
                        </table>
                        
                        {{-- اطلاعات فروشنده و خریدار --}}
                        <table class="info-table">
                            <thead>
                                <tr>
                                    <th style="width: 50%;">اطلاعات فروشنده</th>
                                    <th style="width: 50%;">اطلاعات مشتری</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <strong class="text-bold">{{ $settings['company_name'] ?? 'نام شرکت' }}</strong><br>
                                        آدرس: {{ $settings['company_address'] ?? 'آدرس' }}<br>
                                        تلفن: {{ $settings['company_phone'] ?? 'تلفن' }}
                                    </td>
                                    <td>
                                        <strong class="text-bold">{{ $invoice->customer->name }}</strong><br>
                                        کد ملی: {{ $invoice->customer->national_id ?? '-' }}<br>
                                        موبایل: {{ $invoice->customer->mobile ?? '-' }}<br>
                                        آدرس: {{ $invoice->customer->address ?? '-' }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        {{-- جدول محصولات --}}
                        <h3 style="margin-top: 25px; margin-bottom: 10px; font-size: 16px;" class="text-bold">شرح کالا</h3>
                        <table class="items-table">
                            <thead>
                                <tr>
                                    <th style="width: 5%;">ردیف</th>
                                    <th style="width: 40%;">عنوان</th>
                                    <th class="text-center" style="width: 10%;">تعداد</th>
                                    <th class="text-left" style="width: 20%;">قیمت واحد پایه (ریال)</th>
                                    <th class="text-left" style="width: 25%;">جمع (ریال)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $totalBase = 0; @endphp
                                @foreach($invoice->products as $index => $product)
                                    @php $itemTotalBase = $product->pivot->price * $product->pivot->quantity; @endphp
                                    <tr>
                                        <td class="text-center">{{ $index + 1 }}</td>
                                        <td>
                                            <span class="text-bold">{{ $product->name }}</span>
                                        </td>
                                        <td class="text-center">{{ $product->pivot->quantity }}</td>
                                        <td class="text-left">{{ number_format($product->pivot->price) }}</td>
                                        <td class="text-left text-bold">{{ number_format($itemTotalBase) }}</td>
                                    </tr>
                                    @php $totalBase += $itemTotalBase; @endphp
                                @endforeach
                            </tbody>
                        </table>

                        {{-- بخش جمع کل --}}
                        <table class="summary-table">
                            <tr>
                                <td>جمع کل پایه (ریال)</td>
                                <td class="text-left text-bold">{{ number_format($totalBase) }}</td>
                            </tr>
                            <tr>
                                <td>
                                    کارمزد اقساط (طرح: {{ $invoice->planOption->plan->name }} / {{ $invoice->planOption->months }} ماهه)
                                </td>
                                <td class="text-left text-bold">{{ number_format($invoice->final_price - $totalBase) }}</td>
                            </tr>
                            <tr class="total">
                                <td>جمع به ریال (مبلغ نهایی)</td>
                                <td class="text-left">{{ number_format($invoice->final_price) }}</td>
                            </tr>
                        </table>

                        <div class="footer-notes">
                            <p class="text-bold">توضیحات:</p>
                            <p>این پیش فاکتور صرفا جهت ارائه به بانک بوده و فاقد هرگونه ارزش دیگر است.</p>
                        </div>

                    </div>
                    {{-- پایان محتوای فاکتور --}}
                </div>
            </div>
        </div>
    </div>

    {{-- اسکریپت‌های مورد نیاز برای چاپ و ذخیره عکس --}}
    {{-- 1. کتابخانه html2canvas برای تبدیل HTML به عکس --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    
    <script>
        // 2. تابع چاپ
        function printInvoice() {
            window.print();
        }

        // 3. تابع دانلود عکس
        function downloadInvoiceImage() {
            const invoiceElement = document.getElementById('invoice-to-print');
            
            // استفاده از html2canvas برای عکس گرفتن از div
            html2canvas(invoiceElement, {
                scale: 2 // افزایش کیفیت (رزولوشن) عکس
            }).then(canvas => {
                // تبدیل canvas به data URL (فرمت JPG)
                const image = canvas.toDataURL('image/jpeg', 0.9);
                
                // ساخت یک لینک دانلود موقت
                const link = document.createElement('a');
                link.href = image;
                link.download = 'invoice-{{ $invoice->id }}.jpg';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }
    </script>
</x-app-layout>