
<template x-if="order_displayed">
    <div class="invoice-box p-2">

        <div class="row m-b-10">
            <div class="col">
                <div class="float-left">
                    <img src="{{ url("img/logo-bw.png") }}"
                         alt="Owner Logo"
                         style="width: 100%; max-width: 150px; height: 60px" />
                </div>
            </div>

            <div class="col">
                <template x-if="is_online">
                    <div class="fs-12 float-right">
                        <div class="fs-13" >{{__("Invoice")}} :  <strong x-text="'#'+order_displayed.ref_id"></strong></div>
                        <div class="m-b-0">{{__("Created At")}} : <span x-text="order_displayed.created_at"></span></div>
                        <div class="m-b-0">{{__('Due At')}} : <span x-text="order_displayed.updated_at"></span></div>
                    </div>
                </template>
            </div>
        </div>

        <div class="row m-b-10">
            <div class="col">
                <div class="float-left">
                    <div class="fs-12 order-head-info"><strong>{{getSettingsOf("owner_name")}}</strong></div>
                    <div class="fs-12 order-head-info"><strong>{{getSettingsOf("phone_number")}}</strong></div>
                    <div class="fs-12 order-head-info"> <strong>{{getSettingsOf("address2")}}</strong></div>
                    <div class="fs-12 order-head-info"><strong>{{getSettingsOf("site_email")}}</strong></div>
                </div>
            </div>

            <div class="col">
                <template x-if="order_displayed.customer">
                   <div class="float-right">
                        <h6 class="m-b-1 fs-13"><strong>{{__("Customer Infos")}}</strong></h6>
                        <div class="fs-12 order-head-infop">{{__("Full Name")}} : <strong x-text="order_displayed.customer.full_name ?? '---'"></strong></div>
                        <div class="fs-12 order-head-infop">{{__("Email")}} : <strong x-text="order_displayed.customer.email ?? '---'"></strong></div>
                        <div class="fs-12 order-head-infop">{{__("Phone")}} : <strong x-text="order_displayed.customer.phone ?? '---'"></strong></div>
                   </div>
                </template>
            </div>
        </div>

        <div class="row m-b-10">
            <table class="details">
                <thead>
                    <tr class="heading">
                        <td class="left fs-12">{{__("Product")}}</td>
                        <td class="right fs-12">{{__("Price")}}</td>
                        <td class="right fs-12">{{__("Qty")}}</td>
                        <td class="right fs-12">{{__("Amount")}}</td>
                    </tr>
                </thead>
                <tbody>

                <template x-if="!order_displayed.items">
                    <tr class="item">
                        <td colspan="4">
                            <div  x-data="not_found({title : '{{__("No products in this order.")}}',  })">
                                @include("backend.orders.create.blocs.not-found")
                            </div>
                        </td>
                    </tr>
                </template>

                <template x-if="order_displayed.items">
                <span>
                    <template x-for="(item,index) in items" :key="index">
                        <tr class="item">
                            <td class="fs-12 text-uppercase" x-text="item.name"></td>
                            <td class="fs-12 right" x-text="formatNumber(item.price)"></td>
                            <td class="fs-12 right" x-text="formatNumber(item.qty)"></td>
                            <td class="fs-12 right" x-text="formatNumber(item.amount)"></td>
                        </tr>
                    </template>
                </span>
                </template>
                </tbody>
            </table>
            <template x-if="order_displayed.items">
                <table>
                    <tbody>
                        <tr class="total">
                            <td class="fs-12 right">{{__("Subtotal")}} :</td>
                            <td class="right" x-text="formatNumber(order_displayed.subtotal,order_displayed.currency)"></td>
                        </tr>
                        <tr class="total">
                            <td class="fs-12 right">{{__("Discount")}} :</td>
                            <td class="right" x-text="formatNumber(order_displayed.discount,order_displayed.currency)"></td>
                        </tr>
                        <tr class="total" >
                            <td class="fs-12 right">{{__("Tax")}} :</td>
                            <td class="right" x-text="formatNumber(order_displayed.tax,order_displayed.currency)"></td>
                        </tr>
                        <tr class="total">
                            <td class="fs-12 right">{{__("Shipping")}} :</td>
                            <td class="right" x-text="formatNumber(order_displayed.shipping,order_displayed.currency)"></td>
                        </tr>
                        <tr class="total">
                            <td class="fs-12 right">{{__("Total")}} :</td>
                            <td class="right" x-text="formatNumber(order_displayed.total,order_displayed.currency)"></td>
                        </tr>
                    </tbody>
{{--                    <thead>--}}
{{--                        <tr class="total">--}}
{{--                            <th class="fs-12 right">{{__("Subtotal")}} :</th>--}}
{{--                            <th class="fs-12 right">{{__("Discount")}} :</th>--}}
{{--                            <th class="fs-12 right">{{__("Tax")}} :</th>--}}
{{--                            <th class="fs-12 right">{{__("Shipping")}} :</th>--}}
{{--                            <th class="fs-12 right">{{__("Total")}} :</th>--}}
{{--                        </tr>--}}
{{--                        <tr class="total">--}}
{{--                            <th class="right fs-12" x-text="formatNumber(order_displayed.subtotal,order_displayed.currency)">--}}
{{--                            <th class="right fs-12" x-text="formatNumber(order_displayed.discount,order_displayed.currency)"></th>--}}
{{--                            <th class="right fs-12" x-text="formatNumber(order_displayed.tax,order_displayed.currency)"></th>--}}
{{--                            <th class="right fs-12" x-text="formatNumber(order_displayed.shipping,order_displayed.currency)">--}}
{{--                            <th class="right fs-12" x-text="formatNumber(order_displayed.total,order_displayed.currency)"></th>--}}
{{--                        </tr>--}}
{{--                    </thead>--}}
                </table>
            </template>
        </div>

        <div class="row m-b-10">
            <table class="details">
                <thead>
                    <tr class="heading">
                        <th class="fs-12">{{__("Payment Method")}}</th>
                        <th class="fs-12">{{__("Reference")}}</th>
                        <th class="right fs-12">{{__("Paid")}}</th>
                        <th class="right fs-12">{{__("Used")}}</th>
                    </tr>
                </thead>
                <tbody>
                <template x-if="('paymentUsages' in order_displayed)">
                    <template x-for="(i,usage) in order_displayed.paymentUsages" :key="i">
                        <tr class="item">
                            <td class="fs-12" x-text="usage?.payment?.method?.name ?? '---'"></td>
                            <td class="fs-12" x-text="usage?.payment?.provider_reference ?? '---'"></td>
                            <td class="right fs-12" x-text="formatNumber(usage?.payment?.paid_amount,order_displayed.currency)"></td>
                            <td class="right fs-12" x-text="formatNumber(usage?.amount_used,order_displayed.currency)"></td>
                        </tr>
                    </template>
                    <tr>
                        <th colspan="3" class="right fs-12">{{__("Total")}}</th>
                        <th class="right fs-12" x-text="formatNumber(getSum(order_displayed.paymentUsages, 'amount_used'), order_displayed.currency)"></th>
                    </tr>
                </template>

                <template x-if="!('paymentUsages' in order_displayed)">
                    <tr>
                        <th colspan="4" class="center not-datas-found fs-12">{{__("No Payments.")}}</th>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
    </div>
</template>

<template x-if="!order_displayed">
    <div  x-data="not_found({title : '{{__("No order Found")}}',  })">
        @include("backend.orders.create.blocs.not-found")
    </div>
</template>
