@extends('layouts.master')

@section('css')
<style>
    /* 1. التنسيقات العامة للمعاينة على الشاشة */
    .invoice-card {
        background-color: #fff;
        padding: 30px;
        border: 1px solid #ddd;
        margin: 20px auto;
        width: 95%;
        max-width: 900px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 2px solid #333;
        padding-bottom: 15px;
    }

    .details-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .details-table th, .details-table td {
        border: 1px solid #000;
        padding: 12px;
        text-align: center;
        font-size: 16px;
    }

    .details-table th {
        background-color: #f8f9fa !important;
        -webkit-print-color-adjust: exact;
    }

    .thick { font-weight: bold; }
    .text-center { text-align: center; }

    /* 2. تنسيقات الطباعة فقط */
  @media print {
    /* إخفاء الهيدر، الفوتر، القائمة الجانبية، وأي أزرار */
    nav, .main-header, .main-sidebar, .main-footer, .breadcrumb-header, #print_Button, .no-print {
        display: none !important;
    }

    /* إلغاء أي هوامش أو خلفيات يضعها الـ Layout الأساسي */
    body {
        background-color: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* تأكيد أن كارد الفاتورة يأخذ عرض الصفحة بالكامل */
    .invoice-card {
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* إخفاء الرابط والوقت اللي المتصفح بيحطهم فوق وتحت تلقائياً */
    @page {
        margin: 1cm;
    }
}
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-center no-print mt-4">
        <button class="btn btn-danger btn-lg shadow" id="print_Button" onclick="window.print()">
            {{ __('home.print') }} <i class="mdi mdi-printer ml-1"></i>
        </button>
    </div>

     <div class="invoice-header mt-5" style="display: flex;justify-content:space-between;width:100%" dir=rtl>




                        <div class="billed-from" style="width:33%;text-align: center;">
                            <br>

                            <span class="thick" style="font-size:18px">{{Namear}}</span>
                            <br>
                            <p class="tx-16 thick"> {{describtionar}}</p>
                            <p class="tx-16 thick">{{STar}}</p>
                            <p class="tx-16 thick">{{Taxar}}</p>

                        </div><!-- billed-from -->
                        <div >