@extends('layouts.master')

@section('css')
<style>
  /* تنسيقات الطباعة الاحترافية وإلغاء الصفحات الفارغة */
  @media print {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    
    @page {
      size: A4;
      margin: 5mm 8mm;
    }

    html, body {
      height: auto !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body * {
      visibility: visible;
    }
    
    #print, #print * {
      visibility: visible;
    }

    #print_Button, #reciptprinter {
      display: none !important;
    }

    .card, .card-invoice {
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    .report-container {
      width: 100% !important;
      border-collapse: collapse;
      page-break-inside: auto !important;
    }

    tr {
      page-break-inside: avoid !important;
      page-break-after: auto !important;
    }

    thead.report-header {
      display: table-header-group !important;
    }

    tfoot.report-footer {
      display: table-footer-group !important;
    }

    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      font-size: 11px;
      color: #555;
      border-top: 1px solid #ddd;
      padding-top: 5px;
    }
  }

  /* التصميم العام على الشاشة */
  .card-invoice {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }

  .invoice-header-box {
    border-bottom: 2px solid #2b2b2b;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }

  .badge-quote {
    border: 2px solid #2b2b2b;
    border-radius: 8px;
    width: 320px;
    font-size: 15px !important;
    padding: 10px;
    margin: 15px auto;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-weight: bold;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  .table-custom {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
  }

  .table-custom th, .table-custom td {
    padding: 10px 12px;
    vertical-align: middle;
    border: 1px solid #dee2e6;
  }

  .table-custom thead th {
    background-color: #343a40 !important;
    color: #fff !important;
    font-size: 13px;
    text-align: center;
    border-color: #343a40;
  }

  .table-light-custom th {
    background-color: #f1f3f5 !important;
    color: #333 !important;
    font-size: 13px;
    border: 1px solid #ced4da;
  }

  .text-truncate-custom {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bank-box {
    border: 2px dashed #6c757d;
    border-radius: 8px;
    background: #fafbfc;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    color: #495057;
  }
</style>
@endsection

@section('title')
    معاينة طباعة عرض التسعيرة
@stop

@section('page-header')
    <div class="main-parent"></div>
@endsection

@section('content')
<div class="row row-sm">
  <div class="col-md-12 col-xl-12">
    <div class="main-content-body-invoice" id="print">
      <div class="card card-invoice">
        
        <!-- زر الطباعة -->
        <div class="row mb-4" style="display: flex; justify-content: flex-end; width: 100%;">
            <button class="btn btn-dark px-4 py-2 shadow-sm" id="print_Button" onclick="printDiv()">
              <i class="mdi mdi-printer ml-1"></i> {{ __('home.print') }} طباعة الفاتورة
            </button>
        </div>

        <div class="card-body p-0">
          <table class="report-container">

            <!-- رأس التقرير (يتكرر آلياً عند الطباعة في كل صفحة) -->
            <thead class="report-header">
              <tr>
                <th style="border: none; background: transparent !important;">
                  <div class="invoice-header-box" style="display: flex; justify-content: space-between; width: 100%; align-items: center;" dir="ltr">
                    
                    <!-- بيانات الشركة بالإنجليزية -->
                    <div style="width: 33%; text-align: left; font-size: 12px; line-height: 1.4;">
                      <span style="font-size: 15px; font-weight: bold; color: #111;">{{ Nameen ?? '' }}</span>
                      <p style="margin: 2px 0;">{{ describtionen ?? '' }}</p>
                      <p style="margin: 2px 0;">{{ STen ?? '' }}</p>
                      <p style="margin: 2px 0; font-weight: bold;">Tax No: {{ Taxen ?? '' }}</p>
                    </div>

                    <!-- الشعار -->
                    <div style="width: 33%; text-align: center;">
                      <br />
<b>Fatal error</b>:  Uncaught Error: Undefined constant &quot;camplogo&quot; in /home/ebdea/public_html/mostawdaa.ebdea.online/resources/views/products/print_order_perice_to_customer.blade.php:187
Stack trace:
#0 {main}
  thrown in <b>/home/ebdea/public_html/mostawdaa.ebdea.online/resources/views/products/print_order_perice_to_customer.blade.php</b> on line <b>187</b><br />