<!doctype html>
<html >
<head>
<meta charset="utf-8" />
<title>طباعة كشف حركة</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<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:1200px; 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:10px; padding:5px; border:1px solid #0a3f63}
  tbody td{font-size:10px; 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;}
  
      .dt-buttons {
    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 style="lang="ar" dir="rtl"">
  <div class="page">
    
    
    <div class="toolbar">
     <button class="btn" onclick="window.print()">🖨️ طباعة</button>
     <div class="no-print" style="position: absolute; left: 10px; top: 20px;">
         <a  href="{{url('/')}}" class="btn btn-danger"> ⬅ رجوع</a>
      </div>
    </div>

    <header>
      <!-- ضع رابط صورتك هنا -->
      
      <div class="title">
        <h1>  كشف حركات الخزنة  &nbsp;&nbsp;   "{{$safe_account->payment_method->name}} -{{$bransh_name}}"</h1>
        <small>فترة: {{$dateFrom}} حتى {{$dateTo}}</small>
      </div>
    </header>

    <section class="meta">
      <div><strong>الفرع:</strong> {{$bransh_name}} </div>
      <div><strong>المستخدم:</strong> {{$user_name}}</div>
      <div><strong>التاريخ:</strong> {{date("Y-m-d") }} </div>
      <div><strong>العملة:</strong> جنيه </div>
    </section>

    <main style="padding: 0 18px 12px 18px;">
      <table id="example1">
        <thead>
          <tr>
            <th style="width:100px">التاريخ</th>
            <th style="width:150px">البيان</th>
            <th style="width:60px">نوع الحركة</th>
            <th style="width:100px">الجهة/الطرف</th>
            <th style="width:50px" >الفاتورة</th>
            <th style="font-size:10px">رقم سند الصرف/القبض</th>
            <th style="width:120px" style="font-size:9px"> طريقة الدفع/التحصيل</th>
            <th style="width:50px"> وارد </th>
            <th style="width:50px"> منصرف </th>
            <th style="width:50px">الرصيد قبل</th>
            <th style="width:50px" >الرصيد بعد</th>
          </tr>
        </thead>
        <tbody>
          <!-- أمثلة بيانات مشابهة للصورة -->
           
          @foreach( $history as $his )   
          
                <tr>
                 
                <td style=" text-align:center;">{{$his->created_at}}</td>
                @if( $his->receipt_id )
                <td style="width:300px" >{{$his->receipt->note1 }}  {{$his->receipt->note2}}  </td>
                @elseif ($his->payment_voucher_id)
                <td  style="width:300px; text-align:center;" >{{$his->payment_voucher->note1 }}  {{$his->payment_voucher->note2}}  {{$his->payment_voucher->type}} 
                  {{ $his->payment_voucher->budget_id ?$his->payment_voucher->budget->name:' ' }} 
                 {{ $his->payment_voucher->car_id ?$his->payment_voucher->car->num:' ' }}
                 {{ $his->payment_voucher->car_expense_id ?$his->payment_voucher->car_expense->name:' ' }}
                 {{ $his->payment_voucher->trust_id ? $his->payment_voucher->trust->name:' ' }}
                 
                  
                </td>
                @else
                <td  style="width:300px" style=" text-align:center;"> 
                  {{$his->descreption}}
                </td>
                @endif

                <td  style=" text-align:center;">{{$his->movement_type}}</td>
                
                @if ( $his->receipt_id )
                <td  style=" text-align:center;"> 
                  {{$his->client_id ? $his->client->name : ''}}
                  {{$his->receipt->general_name ? $his->receipt->general_name : ' '}}

                </td>
                @elseif ( $his->payment_voucher_id )
                <td style=" text-align:center;"> {{$his->payment_voucher->employee_id ? $his->payment_voucher->employee->name : $his->payment_voucher->general_name}}</td>
                @else
                <td style=" text-align:center;" > </td>
                @endif
                <td style=" text-align:center;">{{$his->invoice_id }}</td>
                <td style=" text-align:center;">{{$his->receipt_id }} {{$his->payment_voucher_id }}</td>
                <td style=" text-align:center;">{{$his->safe_account->payment_method->name}} -- {{$his->safe_account->branch->name}}</td>
                <td style=" text-align:center;"style=" text-align:center;">{{$his->income}}</td>
                <td style=" text-align:center;">{{$his->outcome}}</td>
                <td style=" text-align:center;">{{$his->balance_before}}</td>
                <td style=" text-align:center;">{{$his->balance_after}}</td>



                </tr>
               @endforeach
                

        </tbody>
        
      </table>

      <div class="footer">
        <div></div>
        <div>صفحة <span class="page-num"></span></div>
      </div>
    </main>
  </div>


  <!-- DataTables  & Plugins -->
   <script src='{{asset("theme/plugins/jquery/jquery.min.js")}}'></script>
<!-- jQuery UI 1.11.4 -->
<script src='{{asset("theme/plugins/jquery-ui/jquery-ui.min.js")}}'></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>

 
<!-- DataTables  & Plugins -->
<script src='{{asset("theme/plugins/datatables/jquery.dataTables.min.js")}}'></script>
<script src='{{asset("theme/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js")}}'></script>
<script src='{{asset("theme/plugins/datatables-responsive/js/dataTables.responsive.min.js")}}'></script>
<script src='{{asset("theme/plugins/datatables-responsive/js/responsive.bootstrap4.min.js")}}'></script>
<script src='{{asset("theme/plugins/datatables-buttons/js/dataTables.buttons.min.js")}}'></script>
<script src='{{asset("theme/plugins/datatables-buttons/js/buttons.bootstrap4.min.js")}}'></script>
<script src='{{asset("theme/plugins/jszip/jszip.min.js")}}'></script>
<script src='{{asset("theme/plugins/datatables-buttons/js/buttons.html5.min.js")}}'></script>




 

<!-- Page specific script -->
<script>




  $(function () {
  
    //Initialize Select2 Elements
    
    $("#example1").DataTable({
      "responsive": false, "lengthChange": false, "autoWidth": false,
      "ordering": false,
      "paging": false,
      "searching": false,
      "info": false,
      "buttons": ["excel"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
 

  });


 

</script>

</body>
</html>