<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{ __("Invoice : [:Id]",['id' => $order->ref_id ?? "ID"]) }}</title>
    <style>
        body {
            font-family: 'almarai', sans-serif;
        }

        .invoice-box {
            max-width: 800px;
            margin: auto;
            padding: 30px;
            font-size: 16px;
            line-height: 24px;
            font-family: 'almarai', sans-serif;
            color: #555;
        }

        .invoice-box table {
            width: 100%;
            line-height: inherit;
            text-align: left;
        }

        table.details{
            margin-bottom: 10px !important;
        }

        .invoice-box table td {
            padding: 5px;
            vertical-align: top;
        }

        .invoice-box table tr td:nth-child(2),
        .invoice-box table tr td:nth-child(3) {
            text-align: right;
        }

        .invoice-box table tr.top table td {
            padding-bottom: 20px;
        }

        .invoice-box table tr.top table td.title {
            font-size: 45px;
            line-height: 45px;
            color: #333;
        }

        .invoice-box table tr.information table td {
            padding-bottom: 40px;
        }

        .invoice-box table tr.heading td {
            background: #eee;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }

        .invoice-box table tr.details td {
            padding-bottom: 20px;
        }

        .invoice-box table tr.item td {
            border-bottom: 1px solid #eee;
        }

        .invoice-box table tr.item.last td {
            border-bottom: none;
        }

         table tr.total td,
         table tr.total th  {
            border-bottom: 2px solid #eee;
            font-weight: bold;
        }

        td.right,th.right{
            text-align: right !important;
        }

        td.center,th.center{
            text-align: center !important;
        }

        td.left,th.left{
            text-align: left !important;
        }

        .not-datas-found{
            color: #ae1c17 !important;
        }

        @media only screen and (max-width: 600px) {
            .invoice-box table tr.top table td {
                width: 100%;
                display: block;
                text-align: center;
            }

            .invoice-box table tr.information table td {
                width: 100%;
                display: block;
                text-align: center;
            }
        }

        /** RTL **/
        .invoice-box.rtl {
            direction: rtl;
            font-family: 'almarai', sans-serif;
        }

        .invoice-box.rtl table {
            text-align: right;
        }

        .invoice-box.rtl table tr td:nth-child(2),
        .invoice-box.rtl table tr td:nth-child(3) {
            text-align: left;
        }

        @page {
            header: page-header;
            footer: page-footer;
        }
    </style>
</head>
<body>
<div class="invoice-box">
    <table cellpadding="0" cellspacing="0">
        <tr class="top">
            <td colspan="3">
                <table>
                    <tr>
                        <td class="title">
                            <img src="{{ base_path('public/img/logo.png') }}" style="width: 100%; max-width: 150px; height: 60px" />
                        </td>
                        <td></td>
                        <td>
                            {{__("Invoice")}} :  <strong>#{{ $order['ref_id'] ?? "ID"}}</strong><br />
                            {{__("Created At")}} : {{ format_date($order['created_at'],__("d-m-Y H:i:s")) }}<br />
                            {{__('Due At')}} : {{ format_date($order['updated_at'],__("d-m-Y H:i:s")) }}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="information">
            <td colspan="3">
                <table>
                    <tr>
                        <td>
                            {{getSettingsOf("site_title")}}<br />
                            <b>{{getSettingsOf("phone_number")}}</b> <br/>
                            <b><i>- {{getSettingsOf("address")}}</i></b> <br/>
                            <b><i>- {{getSettingsOf("address2")}}</i></b>
                        </td>
                        <td></td>
                        <td>
                            {{ $order->customer->full_name }}<br />
                            {{ $order->customer->phone }}<br />
                            {{ $order->customer->email }}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>


        <table class="details">
            <thead>
                <tr class="heading">
                    <td>{{__("Product")}}</td>
                    <td class="right">{{__("Price")}}</td>
                    <td class="right">{{__("Quantity")}}</td>
                    <td class="right">{{__("Amount")}}</td>
                </tr>
            </thead>
            <tbody>
                @forelse($order->items as $item)
                    <tr class="item">
                        <td>{{ $item->product->name }}</td>
                        <td class="right">{{ format_amount($item->price) }}</td>
                        <td class="right">{{ format_amount($item->quantity) }}</td>
                        <td class="right">{{ format_amount($item->amount,$order->currency) }}</td>
                    </tr>

                    @if($loop->last)
                        <table>
                            <tbody>
                                <tr class="total">
                                    <td colspan="3" class="right">{{__("Subtotal")}} :</td>
                                    <td class="right">{{ format_amount($order->subtotal,$order->currency)}}</td>
                                </tr>
                                <tr class="total">
                                    <td colspan="3" class="right">{{__("Discount")}} :</td>
                                    <td class="right">{{ format_amount($order->discount,$order->currency)  }}</td>
                                </tr>
                                <tr class="total" >
                                    <td colspan="3" class="right">{{__("Tax")}} :</td>
                                    <td class="right">{{  format_amount($order->tax,$order->currency) }}</td>
                                </tr>
                                <tr class="total">
                                    <td colspan="3" class="right">{{__("Shipping")}} :</td>
                                    <td class="right">{{ format_amount($order->shipping,$order->currency)  }}</td>
                                </tr>
                                <tr class="total">
                                    <td colspan="3" class="right">{{__("Total")}} :</td>
                                    <td class="right">{{ format_amount($order->total,$order->currency)}}</td>
                                </tr>
                            </tbody>
                        </table>
                    @endif
                @empty
                    <tr>
                        <th colspan="4" class="center not-datas-found">{{__("No Products.")}}</th>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <table class="details">
            <tr class="heading">
                <td>{{__("Payment Method")}}</td>
                <td>{{__("Reference")}}</td>
                <td class="right">{{__("Paid")}}</td>
                <td class="right">{{__("Used")}}</td>
            </tr>
            <tbody>
            @forelse($order->paymentUsages as $usage)
                <tr class="item">
                    <td>{{ $usage->payment->method->name ?? "--" }}</td>
                    <td>{{ $usage->payment->provider_reference }}</td>
                    <td class="right">{{ format_amount($usage->payment->paid_amount,$order->currency) }}</td>
                    <td class="right">{{ format_amount($usage->amount_used,$order->currency) }}</td>
                </tr>
                @if($loop->last)
                    <tr>
                        <th colspan="3" class="right">{{__("Total")}}</th>
                        <th class="right">{{format_amount($order->paymentUsages->sum("amount_used"),$order->currency)}}</th>
                    </tr>
                @endif
            @empty
                <tr>
                    <th colspan="4" class="center not-datas-found">{{__("No Payments.")}}</th>
                </tr>
            @endforelse
            </tbody>
        </table>

    </table>
</div>
</body>
</html>
