<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="shortcut icon" href="{{url('')}}/assets/web/images/logo.png" title="Favicon" sizes="16x16" />
    <title> {{ __('web.project') .' | '.($title??'') }} </title>
    <style>
        @font-face {
            font-family: somar_regular;
            src: url({{url('')}}/assets/web/fonts/somar/regular.otf);
        }
        @font-face {
            font-family: somar_bold;
            src: url({{url('')}}/assets/web/fonts/somar/bold.otf);
        }

        *{
            box-sizing: border-box;
            font-family: somar_regular;
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        .text-en{
            text-align: left;
            direction: ltr;
        }
        .text-start {
            text-align: start;
        }
        .text-end{
            text-align: end;
        }
        .text-center{
            text-align: center;
        }
        .font-en  {
            font-family: 'Roboto', sans-serif !important;
        }
        .container {
            /* padding: 0 8vw; */
            position: relative;
            z-index: 5;
        }
        main{
            position: relative;
            z-index: 5;
            padding: 5vw;
            /* width: 700px;
            margin: auto; */

        }
        .row{
            width: 100%;
            position: relative;
            display: inline-flex;
            flex-wrap: wrap;
        }
        .in-flex {
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
        }
        .justify-content-center{
            justify-content: center;
        }
        .bold ,
        b,
        th{
            font-weight: 700;
        }
        .position-relative {
            position: relative;
        }
        .in-flex{
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
        }
        .mt-5{
            margin-top: 3rem !important;
        }

        .table-responsive {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-top: 30px;
        }
        .table-responsive .table{
            width: 100%;
            border: 1px solid #ddd;
            border-top: 1px solid transparent;
            border-left: 1px solid transparent;
        }

        .table-responsive .table th{
            color: #555;
            font-size: 12px;
        }
        .table-responsive .table td {
            font-size: 15px;
        }
        .table-responsive .table td,
        .table-responsive .table th{
            padding: .7rem 1rem;
            border-top: 1px solid #ddd;
            vertical-align: middle;
            border-left: 1px solid #ddd;
        }
        .table-responsive .table th{
            text-align: start;
        }
        .table-responsive .table thead th,
        .table-responsive .table tbody td,
        .table-responsive .table tfoot td{
            text-align: center;
        }
        .table-responsive .table thead th,
        .table-responsive .table tfoot th{
            background-color: #f8f8f8;
        }
        .table .title {
            width: calc(100% / 3);
        }

        .mail-box{
            /* padding: 70px 0; */
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
            border-radius: 5px;
            /* background-color: #fff; */
            margin-bottom: 2vw;
        }
        .mail-box .head_box {
            background-color: #f5f5f5 !important;
            padding: 2vw;
            display: flex;
            flex-wrap: wrap;
        }
        .mail-box .head_box .left_box {
            width: 40%;
            /* direction: ltr; */
            padding: 1vw;
            text-align: left;
        }
        .mail-box .head_box .left_box .logo{
            width: 250px;
            object-fit: contain;
            display: block;
            margin: 0 auto 25px 0;
        }
        .mail-box .head_box .left_box .p {
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 7px;
        }
        .mail-box .head_box .right_box {
            width: 60%;
            padding: 1vw;
        }
        .mail-box .head_box .right_box .title_bill {
            background-color: #BC8171;
            padding: 10px;
            color: #FFF1E7;
            font-size: 18px;
            width: 80%;
        }
        .mail-box .head_box .right_box .table-responsive .table td,
        .mail-box .head_box .right_box .table-responsive .table th {
            border-top: 1px solid transparent;
            border-left: 1px solid transparent;
            font-weight: 400;
            padding: .5rem .8rem;
        }
        .mail-box .head_box .right_box .table-responsive .table,
        .mail-box .head_box .right_box .table-responsive .table  {
            border: 1px solid #ccc;
            padding: .5rem 0;
        }
        .mail-box .head_box .right_box .table-responsive .table .title  {
            font-weight: 500;
        }
        .mail-box .head_box .right_box .title_order {
            background-color: #172055;
            padding: 10px;
            color: #fff;
            font-size: 18px;
            width: 80%;
        }

        .mail-box .box_body {
            padding: 2vw 2vw 2vw 2vw;
            background-color: #fff !important;

        }
        .mail-box .box_body .table-responsive .table tr td:nth-child(odd) {
            background-color: #f5f5f5;
        }
        .mail-box .box_body .table-responsive .table th {
            background-color: #f5f5f5 ;
            border: 1px solid #f5f5f5;
        }

        .mail_foot {
            display: flex;
            /* justify-content: space-between; */
            margin: 0 5vw 4vw 5vw;
            flex-wrap: wrap;
        }
        .mail_foot .qr_img {
            width: 150px;
            height: 150px;
            object-fit: contain;
            margin: 25px 1vw;
        }
        .mail_foot .tables_foot {
            margin: 0 1vw;
            width: 45%;
        }
        .mail_foot .tables_foot .table-responsive:nth-child(1 ) {
            margin-top: 0;
        }
        .mail_foot .tables_foot .table-responsive:nth-child(2) {
            margin-top: 4px;
        }
        .mail_foot .tables_foot .table-responsive .table {
            border: none  !important;
        }
        .mail_foot .tables_foot .table-responsive .table thead th {
            background-color: transparent;
            border: none;
            border-bottom: 1px solid #555;
            font-size: 13px;
        }
        .mail_foot .tables_foot .table-responsive .table tbody td  {
            background-color: transparent;
            border: none !important;
            font-size: 12px;
            font-weight: 500;
        }
        .mail_foot .summary_box {
            width: 30%;
            margin-inline-start: auto;
            padding: 0.5vw;
        }
        .mail_foot .summary_box .item {
            margin-bottom: 20px;
            width: 100%;
        }
        .mail_foot .summary_box .item h5 {
            width: calc(100% / 3);
            font-size: 14px;
        }
        .mail_foot .summary_box .item h5:nth-child(2)  {
            text-align: center;
        }
        .mail_foot .summary_box .item h5:last-child {
            text-align: end;
        }
        .mail_foot .summary_box .item:last-child {
            padding: 15px 5px;
            background-color: #BC8171;
            color: #FFF1E7;
            margin-top: 10px;
        }
        .mail_foot .summary_box .item:last-child h5:nth-child(2) {
            font-size: 13px;

        }
        .print_butn{
            width: 150px;
            height: 50px;
            background-color: #BC8171;
            color: #fff;
            border-radius: 25px;
            display: block;
            margin: auto;
            border: 1px solid #BC8171;
            font-weight: bold;
            font-size: 16px;
        }
        @media(max-width:768px) {
            .mail-box .head_box .right_box ,
            .mail-box .head_box .left_box ,
            .mail-box .head_box .right_box .title_bill ,
            .mail-box .head_box .right_box .title_order ,
            .mail_foot .tables_foot ,
            .mail_foot .summary_box {
                width: 100%;
            }
            .mail-box .head_box .left_box {
                order: -1;
            }
            .mail-box .head_box .date_row {
                margin: 0 0 15px 0;
            }
            .mail-box .head_box .right_box .table-responsive {
                margin: 15px 0 !important;
            }
            .mail_foot {
                flex-direction: column;
            }
            .mail_foot .qr_img {
                margin: 25px auto;
            }
            .mail_foot .tables_foot {
                margin: 25px 1vw;
            }
            .table-responsive .table th ,
            .table-responsive .table td {
                text-wrap: nowrap;
            }
            /* .table .title {
                text-align: center !important;
                width: 100%;
            } */
        }

        @media print {
            @page {
                size: A4;
                margin: auto;
            }
            * , body {
                padding: 0;
                margin: 0;
            }
            body {
                background: white;
                width: 21cm;
                display: block;
                margin:  250px auto  0 auto;

                background: url({{url('')}}/assets/web/images/pattern-1.png) center repeat !important;
                background-size: contain !important;
                position: relative;
            }
            main {
                /* width: 100%; */
                width: 21cm;
                padding: 0;
            }
            .mail-box{
                margin-bottom: 0vw;
            }
            .mail-box .head_box {
                background-color: #f5f5f5 !important;
                padding: 0vw;
                display: flex;
                justify-content: unset;
            }
            .mail-box .head_box .left_box {
                order: -1;
                width: 30%;
                direction: ltr;
                padding: 1vw;
            }
            .mail-box .head_box .left_box .logo{
                width: 100px;
                object-fit: contain;
                display: block;
                margin: 0 0 25px 0;
            }
            .mail-box .head_box .left_box .p {
                font-weight: bold;
                font-size: 16px;
                margin-bottom: 7px;
            }
            .mail-box .head_box .right_box {
                width: 70%;
                /* order: -1; */
                padding: 1vw;
            }
            .order_print_1 {
                order: -1;
            }
            .leftDate_box {
                text-align: start;
            }
            .table-responsive {
                overflow-x: hidden;
            }
            .table-responsive .table th ,
            .table-responsive .table td {
                font-size: 10px;
                padding: .5rem .1rem;
                text-wrap: wrap;
            }
            .mail-box .box_body ,
            .mail-box .box_body .table-responsive{
                /* width: 21cm !important; */
                padding: 0;
                margin-bottom: 15px;
            }
            /* .mail-box .box_body .table th ,
            .mail-box .box_body .table td {
                width: 50px !important;
            } */

            .mail_foot {
                display: flex !important;
                width: 100%;
                flex-direction: row;
                padding: 0;
            }
            .mail_foot .qr_img {
                width: 2cm !important;
                height: 40px;
                object-fit: contain;
                margin: 35px 0 0 0;
            }
            .mail_foot .tables_foot {
                width: 8cm;
                margin: 0 .5cm;
            }
            .mail_foot .tables_foot .table th ,
            .mail_foot .tables_foot .table td {
                font-size: 8px !important;
            }
            .mail_foot .tables_foot .table-responsive {
                margin: 0 !important ;
            }
            .mail_foot .summary_box {
                width: 6cm;
                margin-inline-start: unset;
            }
            .mail_foot .summary_box .item {
                margin-bottom: 10px;
                width: 100%;
            }
            .mail_foot .summary_box .item h5 {
                width: calc(100% / 3);
                font-size: 10px;
                color: #555;
            }
            .mail_foot .summary_box .item h5:nth-child(2)  {
                text-align: center;
            }
            .mail_foot .summary_box .item h5:last-child {
                text-align: end;
            }
            .mail_foot .summary_box .item:last-child {
                padding: 5px;
                margin-top: 0px;
            }
            .mail_foot .summary_box .item:last-child h5 {
                color: #fff;
            }
            .mail_foot .summary_box .item:last-child h5:nth-child(2) {
                font-size: 12px;
            }
            .mail-box .head_box .right_box .title_bill {
                background-color: #50C8B1;
                padding: 10px;
                color: #fff;
                font-size: 18px;
                width: 80%;
            }
            .mail-box .head_box .right_box .title_order {
                background-color: #172055;
                padding: 10px;
                color: #fff;
                font-size: 15px;
                width: 80%;
            }
            .print_butn {
                display: none;
            }

        }
    </style>
</head>

<body>
<main>
    <!--Start mail-box -->
    <div class="mail-box">
        <div class="container">
            <div class="head_box ">
                <div class="right_box order_print_1">
                    <div class="title_bill in-flex">
                        <h4>فاتورة ضريبة مبسطة :</h4>
                        <h4> Tax Invoice :</h4>
                    </div>
                    <div class="table-responsive mt-5">
                        <table class="table">
                            <tbody>
                            <tr>
                                <td>
                                    <div class="in-flex">
                                        <h4 class="title secondary-color text-start"> رقم الطلب   :</h4>
                                        <h4 class="title">   {{$order->id}}     </h4>
                                        <h4 class="title secondary-color text-end"> :   Order Number  </h4>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="in-flex">
                                        <h4 class="title secondary-color text-start"> اسم العميل :</h4>
                                        <h4 class="title">  {{$order->user->name}}   </h4>
                                        <h4 class="title secondary-color text-end"> :   Name  </h4>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="in-flex">
                                        <h4 class="title secondary-color text-start">  رقم الجوال   :</h4>
                                        <h4 class="title">  {{$order->user->phone}}  </h4>
                                        <h4 class="title secondary-color text-end"> :   Phone number  </h4>
                                    </div>
                                </td>
                            </tr>
                            @if($order->user->email)
                                <tr>
                                    <td>
                                        <div class="in-flex">
                                            <h4 class="title secondary-color text-start"> البريد الالكتروني   :</h4>
                                            <h4 class="title">  {{$order->user->email}}    </h4>
                                            <h4 class="title secondary-color text-end"> :   Email  </h4>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                            <tr>
                                <td>
                                    <div class="in-flex">
                                        <h4 class="title secondary-color text-start"> العنوان     :</h4>
                                        <h4 class="title">  {{$order->address->name}}    </h4>
                                        <h4 class="title secondary-color text-end"> :   Address  </h4>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="left_box ">
                    <img src="{{url('')}}/assets/web/images/logo.svg" alt="" class="logo"/>
                    <div class="txt_content">
                        <p class="p">C.R: {{$settings['tax_number']}}</p>
                        <p class="p">{{$settings['site_address_'.getCurrentLocale()]}}</p>
                        <p class="p">Email: {{$settings['site_email']}}</p>
                        <p class="p">VAT: {{$settings['vat_number']}}</p>
                    </div>
                </div>

            </div>
            <div class="box_body">
                <div class="table-responsive ">
                    <table class="table">
                        <thead>
                        <tr>
                            <th> # </th>
                            <th>  الصنف   <br>  Item  Description  </th>
                            <th>الوحدة </br> Unit </th>
                            <th> العدد     </br> Qty </th>
                            <th>  الاجمالي </br> Total </th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($order->products as $row)
                            <tr>
                                <td> #{{$row->id}}  </td>
                                <td> {{$row->product->currentDescription->title}} @if($row->sub_attribute_id) - {{$row->mainAttr->currentDescription->title }} - {{$row->subAttr->currentDescription->title }} @endif</td>
                                <td>{{$row->product_cost}} SAR</td>
                                <td> {{$row->count}} </td>

                                <td>{{$row->total}} SAR</td>
                            </tr>
                        @endforeach
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="mail_foot">
        <img src="{{asset($order->qr_image)}}" class="qr_img" alt="">
        <div class="tables_foot">
            <div class="table-responsive ">
                <table class="table">
                    <thead>
                    <tr>
                        <th> الاجمالي قبل الخصم <br> Total before discount </th>
                        <th>  كود الخصم   <br>  Discount  code  </th>
                        <th>خصم الطلب </br> Order discount </th>
                        <th> الضريبة     </br> Delivery discount </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{{$order->total_products}} SAR</td>
                        <td>{{$order->coupon_id ? $order->coupon->code : '-'}}</td>
                        <td>{{$order->coupon_id ? $order->discount .' SAR' : '-'}} </td>
                        <td>{{$order->total_tax }} SAR</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-responsive ">
                <table class="table">
                    <thead>
                    <tr>
                        <th>    قيمة الشحن   <br> Shipping Cost</th>
                        <th>  طريقة الدفع <br> Payment by </th>
                        <th> حالة الدفع   </br>    Payment status  </th>
                        <th>     المبلغ المتبقي  </br>    Balance due </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{{$order->shipping_cost}} SAR</td>
                        <td>{{$order->way->currentDescription->title}}</td>
                        <td>{{__('orders.payment_statuses.'.$order->payment_status)}}</td>
                        <td>{{$order->total_products - $order->discount + $order->total_tax}} SAR</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="summary_box">
            <div class="item in-flex">
                <h5>اجمالي الطلب</h5>
                <h5> {{$order->total_products - $order->discount }} SAR  </h5>
                <h5> Total orders  </h5>
            </div>
            <div class="item in-flex">
                <h5> رسوم الشحن </h5>
                <h5> {{$order->shipping_cost}} SAR  </h5>
                <h5> Shipping  </h5>
            </div>
            @if($order->on_hand_cost > 0)
            <div class="item in-flex">
                <h5> رسوم التوصيل </h5>
                <h5> {{$order->on_hand_cost}} SAR  </h5>
                <h5> Delivery  </h5>
            </div>
            @endif
            <div class="item in-flex">
                <h5> الضريبة  </h5>
                <h5> {{$order->total_tax}} SAR  </h5>
                <h5>    VAT  </h5>
            </div>
            <div class="item in-flex">
                <h5> الاجمالي  </h5>
                <h5> {{$order->total}} SAR  </h5>
                <h5>    Total  </h5>
            </div>
        </div>

    </div>

    <button class="print_butn" onclick="window.print()"> طباعة الفاتورة </button>

</main>
</body>
</html>
