@extends('layouts.masterHome2')

@section('content') 
<style>
  :root{
    --c-primary:#0a4974;
    --c-border:#d9d9d9;
    --c-text:#222;
    --fs-12:12px; --fs-14:14px; --fs-16:16px;
  }

  /* شاشة */
  body{font-family: "Tajawal",Tahoma,Arial,sans-serif; color:var(--c-text); margin:0; background:#f6f7f9;}
  .page{max-width:1100px; margin:24px auto; background:#fff; border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.08); overflow:hidden}
  .toolbar{display:flex; gap:8px; justify-content:flex-start; padding:12px; border-bottom:1px solid var(--c-border); background:#fff; position:sticky; top:0; z-index:1000}
  .btn{padding:10px 14px; border-radius:10px; border:1px solid var(--c-primary); background:var(--c-primary); color:#fff; cursor:pointer; font-size:var(--fs-14)}
  .btn.outline{background:#fff; color:var(--c-primary)}
  header{display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:3px solid var(--c-primary);}
  header img{height:48px; width:auto; object-fit:contain}
  header .title{display:flex; flex-direction:column; gap:2px}
  header .title h1{margin:0; font-size:20px}
  header .title small{color:#555}

  .meta{display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; padding:10px 18px 0 18px}
  .meta div{font-size:var(--fs-14); background:#f2f6fa; border:1px solid var(--c-border); border-radius:10px; padding:8px 10px}

  table{width:100%; border-collapse:collapse; table-layout:fixed; margin:14px 0}
  thead th{background:var(--c-primary); color:#fff; font-size:var(--fs-12); padding:5px; border:1px solid #0a3f63}
  tbody td{font-size:var(--fs-12); padding:2px; border:1px solid var(--c-border); vertical-align:top; word-wrap:break-word}
  tfoot td{padding:10px; font-weight:bold; background:#f8fafc; border:1px solid var(--c-border)}
  .num{text-align:center}
  .nowrap{white-space:nowrap}

  


  /* طباعة */
  @media print{
    @page{ size: A4 landscape; margin: 12mm; }
    body{background:#fff}
    .toolbar{display:none !important}
    .page{box-shadow:none; border-radius:0; margin:0}
    thead{display: table-header-group;}
    tfoot{display: table-footer-group;}
    /* تحسين الألوان في الطباعة */
    *{-webkit-print-color-adjust: exact; print-color-adjust: exact;}
  }

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


  /* عداد صفحات في الفوتر */
  .footer{
    display:flex; justify-content:space-between; align-items:center;
    font-size:var(--fs-12); color:#555; padding:6px 12px;
  }
  .page-num:after{counter-increment: page; content: counter(page); }
  body{counter-reset: page;}
</style>
</head>

<body >
  <div class="page" lang="ar" dir="rtl">
    


    <header>
      <!-- ضع رابط صورتك هنا -->
      
      <div class="title" >
        <h1 style="display: flex;">  تقرير الأصناف    </h1>
        <small>فترة: {{$dateFrom}} حتى {{$dateTo}}</small>
      </div>
    </header>



  
    

    <main style="padding: 0 18px 12px 18px;">
      <table id="txTable">
        <thead>
          <tr>
            <th style="width:140px;text-align:center">التاريخ</th>
            <th style="width:150px;text-align:center">اسم الصنف</th>
            <th style="width:40px;text-align:center">الوحدة</th>

            <th style="width:40px;text-align:center">سعر الوحدة </th>
            <th style="width:40px;text-align:center">الكمية</th>
            <th style="width:150px;text-align:center"> اسم العميل</th>
            <th style="width:40px;text-align:center"> رقم الفاتورة </th>

            <th style="width:140px;text-align:center"> تاريخ المرتجع </th>
            <th style="width:50px;text-align:center"> الكمية مرتجع </th>
            <th style="width:50px;text-align:center"> السعر مرتجع </th>
            <th style="width:100px;text-align:center"> ملاحظات مرتجع  </th>
          </tr>
        </thead>
        <tbody>
          <!-- أمثلة بيانات مشابهة للصورة -->
           
          @foreach( $items as $item )   
          
                <tr>
                 
                <td style="text-align:center" >{{$item->created_at}}</td>
                <td style="text-align:center" >{{$item->sell_store->store->sell_name}}</td>
                <td  style="text-align:center">{{$item->sell_store->store->unit}}</td>
                <td  style="text-align:center">{{$item->item_price}}</td>
                <td  style="text-align:center">{{$item->item_amount}}</td>
                <td style="text-align:center">{{$item->invoice->client->name }}</td>
                <td style="text-align:center">{{$item->invoice_id  }} </td>

                <td style="text-align:center"> {{$item->ri_created_at  }} </td>
                <td style="text-align:center">{{$item->ri_quantity  }} </td>
                <td style="text-align:center">{{$item->price  }} </td>
                <td style="text-align:center">{{$item->notes}} </td>



                </tr>
               @endforeach
                

        </tbody>
        
      </table>

      <div class="footer">
        
      
      <section class="meta">
      <div style="display: flex"><strong>اجمالي الكمية المباعة : &nbsp </strong> {{$total_quantity}} </div>
      <div style="display: flex"><strong>اجمالي المبيعات : &nbsp</strong> {{$total_price}}</div>
      <div style="display: flex"><strong>اجمالي الكمية المرتجعة : &nbsp</strong> {{$review_total_quantity}}</div>
      <div style="display: flex"><strong>اجمالي المرتجعات : &nbsp</strong> {{$review_total_price}}</div>
      
      
      <div style="display: flex"><strong>صافي الكمية المباعة : &nbsp</strong> {{$total_quantity - $review_total_quantity }} </div>
      <div style="display: flex"><strong>صافي الايرادات  : &nbsp</strong> {{$total_price - $review_total_price }} </div>
     <div style="display: flex "><strong>متوسط سعر البيع للوحدة  : &nbsp</strong> {{ number_format($total_price / $total_quantity  , 3)  }} </div>
     <div style="display: flex "><strong>الفرع  : &nbsp</strong> {{ $bransh_name }} </div>

    </section>


      </div>
    </main>
  </div>

    @endsection