@extends('layouts.app')

@section('title', 'فاتورة - طلب رقم #' . $order->id)

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-receipt me-2"></i>
                        فاتورة - طلب رقم #{{ $order->id }}
                    </h4>
                    <div>
                        <button onclick="window.print()" class="btn btn-primary btn-sm">
                            <i class="fas fa-print me-1"></i>
                            طباعة
                        </button>
                        <a href="{{ route('orders.show', $order) }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left me-1"></i>
                            العودة للطلب
                        </a>
                    </div>
                </div>
                
                <div class="card-body" id="receipt-content" dir="rtl">
                    <!-- Receipt Header -->
                    <div class="text-center mb-2">
                        @php
                            $cafeLogo = \App\Models\Setting::get('cafe_logo');
                            $cafeName = \App\Models\Setting::get('cafe_name');
                            $cafeAddress = \App\Models\Setting::get('cafe_address');
                            $cafePhone = \App\Models\Setting::get('cafe_phone');
                            $receiptHeader = \App\Models\Setting::get('receipt_header');
                            $receiptFooter = \App\Models\Setting::get('receipt_footer');
                            $currencySymbol = \App\Models\Setting::get('currency_symbol') ?: '$';
                        @endphp
                        @if($cafeLogo)
                            <div class="mb-2">
                                <img src="{{ asset($cafeLogo) }}" alt="Logo" style="max-height: 60px; max-width: 160px; object-fit: contain;">
                            </div>
                        @endif
                        <h2 class="mb-1">{{ $cafeName ?: config('app.name', 'Coffee Shop') }}</h2>
                        @if($cafeAddress || $cafePhone)
                            <div class="small text-muted">
                                @if($cafeAddress)
                                    <div>{{ $cafeAddress }}</div>
                                @endif
                                @if($cafePhone)
                                    <div>{{ $cafePhone }}</div>
                                @endif
                            </div>
                        @endif
                        @if($receiptHeader)
                            <div class="mt-2">{{ $receiptHeader }}</div>
                        @else
                            <p class="text-muted mb-0">فاتورة</p>
                        @endif
                    </div>
                    
                    <!-- Order Information -->
                    <div class="row mb-2" dir="rtl">
                        <div class="col-md-6">
                            <strong>تفاصيل الطلب:</strong><br>
                            <span class="text-muted">رقم الطلب:</span> #{{ $order->id }}<br>
                            <span class="text-muted">التاريخ:</span> {{ $order->created_at->format('d-m-Y H:i') }}<br>
                            @if($order->table)
                                <span class="text-muted">الطاولة:</span> {{ $order->table->name }}<br>
                            @endif
                            @if($order->is_external_order)
                                <span class="text-muted">نوع الطلب:</span> توصيل خارجي<br>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <strong>معلومات العميل:</strong><br>
                            @if($order->customer_name)
                                <span class="text-muted">العميل:</span> {{ $order->customer_name }}<br>
                            @endif
                            <span class="text-muted">خدمه:</span> {{ $order->user->name }}<br>
                            <span class="text-muted">الحالة:</span> 
                            <span class="badge badge-{{ $order->status === 'completed' ? 'success' : ($order->status === 'cancelled' ? 'danger' : 'warning') }}">
                                @if($order->status === 'completed') مكتمل @elseif($order->status === 'cancelled') ملغي @else قيد التحضير @endif
                            </span>
                        </div>
                    </div>
                    
                    <!-- Order Items -->
                    <div class="mb-2" dir="rtl">
                        <h6 class="mb-1">أصناف الطلب</h6>
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <thead class="table-light">
                                    <tr>
                                        <th>الصنف</th>
                                        <th class="text-center">الكمية</th>
                                        <th class="text-end">السعر الواحد</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($order->items as $item)
                                    <tr>
                                        <td style="font-size: 9px; line-height: 1.2; word-wrap: break-word; max-width: 120px;">
                                            <strong>{{ $item->product->name }}</strong>
                                            @if($item->notes)
                                                <br><small class="text-muted">ملاحظة: {{ $item->notes }}</small>
                                            @endif
                                        </td>
                                        <td class="text-center">{{ $item->quantity }}</td>
                                        <td class="text-end"><span class="amount">{{ $currencySymbol }} {{ number_format($item->price ?: 0, 2) }}</span></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- Order Totals -->
                    <div class="row" dir="rtl">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table table-borderless totals-table" style="margin-right: auto; width: 100%; max-width: 200px;">
                                    <tr>
                                        <td style="text-align: right; padding-left: 10px;"><strong>المجموع الفرعي:</strong></td>
                                        <td style="text-align: left;"><span class="amount">{{ $currencySymbol }} {{ number_format($order->total_amount, 3) }}</span></td>
                                    </tr>
                                    @if($order->discount > 0)
                                    <tr>
                                        <td style="text-align: right; padding-left: 10px;"><strong>الخصم:</strong></td>
                                        <td style="text-align: left;" class="text-success"><span class="amount">-{{ $currencySymbol }} {{ number_format($order->discount, 3) }}</span></td>
                                    </tr>
                                    @endif
                                    @if($order->tax > 0)
                                    <tr>
                                        <td style="text-align: right; padding-left: 10px;"><strong>الضريبة:</strong></td>
                                        <td style="text-align: left;"><span class="amount">{{ $currencySymbol }} {{ number_format($order->tax, 3) }}</span></td>
                                    </tr>
                                    @endif
                                    <tr class="border-top">
                                        <td style="text-align: right; padding-left: 10px;"><strong>المبلغ الإجمالي:</strong></td>
                                        <td style="text-align: left;"><strong class="amount">{{ $currencySymbol }} {{ number_format($order->final_amount, 3) }}</strong></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Payment Information -->
                    @if($order->payments && $order->payments->count() > 0)
                    <div class="mb-2" dir="rtl">
                        <h6 class="mb-1">معلومات الدفع</h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>طريقة الدفع</th>
                                        <th class="text-center">التاريخ</th>
                                        <th class="text-end">المبلغ</th>
                                        <th class="text-center">الحالة</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($order->payments as $payment)
                                    <tr>
                                        <td>{{ ucfirst($payment->payment_method) }}</td>
                                        <td class="text-center">{{ $payment->created_at->format('d-m-Y H:i') }}</td>
                                        <td class="text-end"><span class="amount">{{ $currencySymbol }} {{ number_format($payment->amount, 3) }}</span></td>
                                        <td class="text-center">
                                            <span class="badge badge-{{ $payment->status === 'completed' ? 'success' : 'warning' }}">
                                                @if($payment->status === 'completed') مكتمل @else قيد المعالجة @endif
                                            </span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif
                    
                    <!-- Notes -->
                    @if($order->notes)
                    <div class="mb-2" dir="rtl">
                        <h6 class="mb-1">ملاحظات الطلب</h6>
                        <p class="text-muted">{{ $order->notes }}</p>
                    </div>
                    @endif
                    
                    <!-- Receipt Footer -->
                    <div class="text-center border-top" style="margin-top: 5px; padding-top: 5px;">
                        @if(!empty($receiptFooter))
                            <p class="text-muted mb-0">{{ $receiptFooter }}</p>
                        @else
                            <p class="text-muted mb-1">شكراً لزيارتكم!</p>
                            <p class="text-muted mb-0">نتطلع لرؤيتكم مرة أخرى قريباً.</p>
                        @endif
                    </div>
                    
                    <!-- Print-only feed at end to avoid cutter clipping -->
                    <div class="print-feed"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* RTL Support for Arabic */
html[dir="rtl"], body[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Totals table spacing (screen) */
.print-feed { display: none; }
.totals-table td {
    padding: 4px 6px;
}
.totals-table td:first-child {
    width: 60%;
}
.totals-table td:last-child {
    width: 40%;
    white-space: nowrap;
}
/* Keep currency to the left of the number regardless of page direction */
.amount {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Arabic text improvements */
[dir="rtl"] {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* RTL adjustments for buttons and layout */
[dir="rtl"] .me-1, [dir="rtl"] .me-2 {
    margin-left: 0.25rem !important;
    margin-right: 0 !important;
}

[dir="rtl"] .ms-1, [dir="rtl"] .ms-2 {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}
@media print {
    /* Force all text to solid black for thermal/BW printers */
    html, body, #receipt-content, * { color: #000 !important; }
    .text-muted, .text-secondary, .amount, h1, h2, h3, h4, h5, h6, p, small, span, td, th, strong { color: #000 !important; }

    /* Remove colored backgrounds; keep clear borders for separation */
    .table-light, thead tr, thead th { background: #fff !important; background-color: #fff !important; }
    .border, .border-top, .border-bottom, .table th, .table td { border-color: #000 !important; }

    /* Make badges print-friendly: white bg, black text, thin black border */
    .badge, [class^="badge-"], [class*=" badge-"] {
        background: #fff !important;
        background-color: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }

    .card-header,
    .btn,
    .navbar,
    .sidebar {
        display: none !important;
    }
    /* Hide any fixed/sticky/mobile bars that may appear from layout */
    .fixed-top,
    .fixed-bottom,
    .sticky-top,
    .sticky-bottom,
    #mobileTotalsBar,
    .mobile-toolbar,
    .mobile-bottom-bar,
    footer,
    .footer {
        display: none !important;
    }
    
    .card {
        border: none !important;
        box-shadow: none !important;
    }
    
    .container-fluid {
        padding: 0 !important;
    }
    
    /* Optimize for receipt width with RTL support */
    html, body {
        font-size: 11px;
        width: 76mm;
        max-width: 76mm;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        height: auto !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
        direction: rtl !important;
        text-align: right !important;
        font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important;
    }
    /* Force bootstrap containers/columns to fit receipt width */
    .container-fluid, .container, .row {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    [class^="col-"], [class*=" col-"] {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
    }
    
    /* Main content container */
    #receipt-content {
        padding: 2mm 1mm 2mm 3mm !important; /* top right bottom left - more space on left for RTL */
        margin: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: auto !important;
        padding-bottom: 2mm !important; /* minimal; rely on @page bottom margin for feed */
    }
    
    /* Ensure receipt footer fits on same page */
    #receipt-content .text-center.mt-2.pt-2.border-top {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        page-break-inside: avoid !important;
        margin-top: 5px !important;
        padding-top: 5px !important;
    }
    .col-md-8 { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
    
    .table {
        font-size: 10px;
        margin-bottom: 8px !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }
    .table.table-borderless tr td { 
        border: none !important; 
        padding: 3px 4px !important;
        vertical-align: top !important;
    }
    
    /* Product name column styling - adjusted for RTL */
    .table.table-borderless tr td:first-child {
        font-size: 9px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 30mm !important;
        width: 50% !important;
        padding-right: 2mm !important;
    }
    
    /* Quantity column */
    .table.table-borderless tr td:nth-child(2) {
        width: 15% !important;
        text-align: center !important;
        font-size: 9px !important;
    }
    
    /* Price columns */
    .table.table-borderless tr td:nth-child(3),
    .table.table-borderless tr td:nth-child(4) {
        width: 20% !important;
        text-align: right !important;
        font-size: 8px !important;
        white-space: nowrap !important;
    }
    .table th {
        padding: 4px !important;
        font-size: 9px !important;
        font-weight: bold !important;
        text-align: left !important;
    }
    .table th.text-center {
        text-align: center !important;
    }
    .table th.text-end {
        text-align: right !important;
    }
    /* Draw a top border for totals to separate clearly */
    .totals-table tr.border-top td { border-top: 1px solid #000 !important; }
    /* Totals table spacing (print) - RTL adjusted */
    .totals-table { 
        float: left !important;
        margin-right: auto !important;
        width: auto !important;
        max-width: 50mm !important;
    }
    .totals-table td { 
        padding: 2px 4px !important; 
        vertical-align: middle !important;
        font-size: 9px !important;
    }
    .totals-table td:first-child { 
        text-align: right !important;
        padding-left: 8px !important;
        white-space: nowrap !important;
    }
    .totals-table td:last-child { 
        text-align: left !important;
        white-space: nowrap !important;
        font-weight: normal !important;
    }
    @page {
        size: 80mm auto; /* receipt roll width */
        margin: 2mm 1mm 10mm 4mm; /* top right bottom left - adjusted for RTL content */
    }
    
    /* Allow natural page breaking; restrict only where needed */
    body, html { margin: 0 !important; }
    #receipt-content, .card-body { page-break-inside: auto !important; }
    tr, td, th { page-break-inside: avoid !important; break-inside: avoid !important; }
    td, th { page-break-after: auto !important; page-break-before: auto !important; }
    
    /* Prevent table rows/cells from splitting across pages - handled above */

    /* Keep footer with previous content without forcing page push */
    .text-center.mt-2.pt-2.border-top {
        orphans: 1;
        widows: 1;
    }
    
    /* Remove the ::after element that might cause issues */
    .card-body::after {
        display: none !important;
    }
    
    /* Hide spacer on print to avoid pushing content to a new page */
    .print-spacer { display: none !important; height: 0 !important; }
    /* Disable print-only feed; rely on @page bottom margin */
    .print-feed { display: none !important; height: 0 !important; }

    /* Proper spacing for headings */
    h2, h3, h4, h5, h6 {
        margin-bottom: 8px !important;
        margin-top: 8px !important;
        line-height: 1.3 !important;
    }
    
    /* Proper spacing for text */
    p {
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }
    
    /* Text alignment classes */
    .text-center {
        text-align: center !important;
    }
    .text-end {
        text-align: right !important;
    }
    .text-start {
        text-align: left !important;
    }
    
    /* Amount styling */
    .amount {
        direction: ltr;
        unicode-bidi: embed;
        display: inline-block;
    }
    
    /* Row spacing */
    .row {
        margin-bottom: 10px !important;
    }
    
    /* Section spacing */
    .mb-2 {
        margin-bottom: 10px !important;
    }
    
    /* Footer styling - force to stay with content */
    .border-top {
        border-top: 1px solid #000 !important;
        margin-top: 8px !important;
        padding-top: 5px !important;
        margin-bottom: 0 !important;
        page-break-before: avoid !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
    }
    
    /* Explicitly hide layout mobile nav bar */
    .mobile-nav { display: none !important; }
    /* Also hide any fixed elements that might overlay */
    #sidebarToggleBtn { display: none !important; }
}

/* Also hide mobile bottom bars when the receipt page is viewed on small screens to avoid overlap */
@media (max-width: 480px) {
    .fixed-bottom, .mobile-bottom-bar, #mobileTotalsBar { display: none !important; }
}
</style>
@endsection

@push('scripts')
<script>
    (function() {
        const params = new URLSearchParams(window.location.search);
        if (params.get('auto') === '1') {
            window.addEventListener('load', function() {
                // Give the page a brief moment to finish layout before printing
                setTimeout(function() {
                    window.print();
                    // Attempt to close the window after print for popup tabs
                    const closeAfter = function() {
                        try { window.close(); } catch (e) {}
                    };
                    if ('onafterprint' in window) {
                        window.onafterprint = closeAfter;
                    } else {
                        setTimeout(closeAfter, 500);
                    }
                }, 300);
            });
        }
        
        // Also apply the fix for manual print
        window.addEventListener('beforeprint', function() {
            const receiptContent = document.getElementById('receipt-content');
            if (receiptContent) {
                receiptContent.style.minHeight = 'auto';
            }
            // Do not force body minHeight; allow natural pagination
            document.body.style.minHeight = 'auto';
        });
    })();
    </script>
@endpush