<style>
    .invoice-page {
        padding: 10px 0 18px;
        background: linear-gradient(180deg, #f7fbff 0%, #eef7f4 100%);
    }

    .print--invoice {
        max-width: 136mm !important;
        margin: 0 auto;
        background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
        border: 1.8px solid #cfe1da;
        border-radius: 24px;
        padding: 22px 20px 18px;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
        width: 100% !important;
    }

    .print--invoice,
    .print--invoice * {
        font-family: "Open Sans", "Roboto", sans-serif !important;
    }

    .invoice-logo {
        width: auto;
        max-width: 160px;
        height: 56px;
        object-fit: contain;
        display: block;
        margin: 0 auto 10px;
    }

    .top-info,
    .order-info-id,
    .order-info-details {
        text-align: center;
    }

    .store-name {
        margin: 0 0 4px;
        font-size: 24px;
        font-weight: 700;
        color: #0f172a;
    }

    .top-info {
        color: #475569;
        font-size: 12.5px;
        line-height: 1.65;
    }

    .order-info-id {
        max-width: 360px;
        margin: 14px auto 0;
        padding: 12px 16px;
        border: 1px solid #dbe7e1;
        border-radius: 18px;
        background: #f6faf8;
    }

    .order-info-id h5 {
        margin-bottom: 6px;
        font-size: 16px;
        color: #0f172a;
    }

    .order-info-details > .row > .col-12 {
        background: #f8fafc;
        border: 1px solid #e4eaef;
        border-radius: 18px;
        padding: 14px 16px;
    }

    .order-info-details h5 {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #0f172a;
    }

    .order-info-details div,
    .order-info-details span,
    .order-info-details td,
    .order-info-details dd,
    .order-info-details dt {
        font-size: 12.5px;
        line-height: 1.65;
    }

    .invoice--table {
        border: 1px solid #e4eaef;
        border-radius: 18px;
        overflow: hidden;
    }

    .invoice--table thead th {
        background: #f8fafc;
        color: #475569;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: center;
    }

    .invoice--table tbody td {
        font-size: 12.5px;
        line-height: 1.6;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .invoice--table tbody td:first-child {
        text-align: left;
    }

    .invoice--table tbody td:nth-child(2) {
        text-align: center;
    }

    .invoice--table tbody td:last-child {
        text-align: right;
        white-space: nowrap;
    }

    .checkout--info {
        max-width: 360px;
        margin: 18px 0 0 auto;
        padding: 14px 16px;
        border: 1px solid #dee6e1;
        border-radius: 18px;
        background: #f8fafc;
    }

    .checkout--info dt,
    .checkout--info dd,
    .checkout--info span {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .checkout--info dt {
        text-align: left;
        color: #475569;
    }

    .checkout--info dd {
        text-align: right;
        color: #0f172a;
        font-weight: 600;
    }

    .checkout--info .total {
        font-size: 15px;
        font-weight: 700;
    }

    .copyright {
        text-align: center;
        color: #64748b;
        font-size: 12.5px;
        line-height: 1.65;
    }

    @media print {
        .invoice-page {
            background: #fff;
            padding: 0;
        }

        .print--invoice {
            box-shadow: none;
            border: 1.5px solid #bfd3c8;
            max-width: 100% !important;
            width: 100% !important;
        }
    }
</style>

<div class="content container-fluid invoice-page">
    <div class="ff-emoji" id="printableArea">
        <div class="print--invoice">
            @if ($order->store)
                <div class="text-center pt-4 mb-3">
                    <img class="invoice-logo" src="{{ asset('/public/assets/admin/img/invoice-logo.png') }}"
                        alt="">
                    <div class="top-info">
                        <h2 class="store-name">{{ $order->store->name }}</h2>
                        <div>
                            {{ $order->store->address }}
                        </div>
                        <div class="mt-1">
                            {{ translate('messages.phone') }} : {{ $order->store->phone }}
                        </div>
                    </div>
                </div>
            @endif
            <div class="top-info">
                <img src="{{ asset('/public/assets/admin/img/invoice-star.png') }}" alt="" class="w-100">
                <div class="text-uppercase text-center">{{ translate('messages.cash_receipt') }}</div>
                <img src="{{ asset('/public/assets/admin/img/invoice-star.png') }}" alt="" class="w-100">
            </div>
            <div class="order-info-id text-center">
                <h5>{{ translate('order_id') }} : {{ $order['id'] }}</h5>
                <div>
                    {{ date('d/M/Y ' . config('timeformat'), strtotime($order['created_at'])) }}
                </div>
            </div>
            <div class="order-info-details">
                <div class="row mt-3">
                    @if ($order->order_type == 'parcel')
                        <div class="col-12">
                            @php($address = json_decode($order->delivery_address, true))
                            <h5>{{ translate('messages.sender_info') }}</h5>
                            <div>
                                {{ translate('messages.sender_name') }} :
                                {{ isset($address) ? $address['contact_person_name'] : $order->address['f_name'] . ' ' . $order->customer['l_name'] }}
                            </div>
                            <div>
                                {{ translate('messages.phone') }} :
                                {{ isset($address) ? $address['contact_person_number'] : $order->customer['phone'] }}
                            </div>
                            <div class="text-break">
                                {{ translate('messages.address') }} :
                                {{ isset($address) ? $address['address'] : '' }}
                            </div>
                            @php($address = $order->receiver_details)
                            <h5><u>{{ translate('messages.receiver_info') }}</u></h5>
                            <div>
                                {{ translate('messages.receiver_name') }} :
                                {{ isset($address) ? $address['contact_person_name'] : $order->address['f_name'] . ' ' . $order->customer['l_name'] }}
                            </div>
                            <div>
                                {{ translate('messages.phone') }} :
                                {{ isset($address) ? $address['contact_person_number'] : $order->customer['phone'] }}
                            </div>
                            <div class="text-break">
                                {{ translate('messages.address') }} :
                                {{ isset($address) ? $address['address'] : '' }}
                            </div>
                        </div>
                    @else
                        <div class="col-12">
                            @php($address = json_decode($order->delivery_address, true))
                            @if (!empty($address))
                                <h5>
                                    {{ translate('messages.contact_name') }} :
                                    {{ isset($address['contact_person_name']) ? $address['contact_person_name'] : '' }}
                                </h5>
                                <h5>
                                    {{ translate('messages.phone') }} :
                                    {{ isset($address['contact_person_number']) ? $address['contact_person_number'] : '' }}
                                </h5>
                            @endif
                            <h5 class="text-break">
                                {{ translate('messages.address') }} :
                                {{ isset($order->delivery_address) ? json_decode($order->delivery_address, true)['address'] : '' }}
                            </h5>
                        </div>
                    @endif
                </div>
                <table class="table invoice--table text-black mt-3">
                    <thead class="border-0">
                        <tr class="border-0">
                            <th>{{ translate('messages.desc') }}</th>
                            <th class="w-10p"></th>
                            <th>{{ translate('messages.price') }}</th>
                        </tr>
                    </thead>

                    <tbody>
                        @if ($order->order_type == 'parcel')
                            <tr>
                                <td>{{ translate('messages.delivery_charge') }}</td>
                                <td class="text-center">1</td>
                                <td>{{ \App\CentralLogics\Helpers::format_currency($order->delivery_charge) }}</td>
                            </tr>
                        @else
                            @php($sub_total = 0)
                            @php($total_tax = 0)
                            @php($total_dis_on_pro = 0)
                            @php($add_ons_cost = 0)
                            @foreach ($order->details as $detail)
                                @php($formattedDetail = \App\CentralLogics\Helpers::order_details_data_formatting([$detail])[0] ?? [])
                                @php($item = data_get($formattedDetail, 'item_details', json_decode($detail->item_details ?: '[]', true) ?: []))
                                @php($displayItemName = data_get($formattedDetail, 'display_item_name', data_get($item, 'name', data_get($item, 'title', translate('messages.Item deleted!')))))
                                @php($displayableVariations = data_get($formattedDetail, 'display_variations', \App\CentralLogics\Helpers::getOrderVariationDisplayData($detail['variation'] ?? null, $item)))
                                <tr>
                                    <td class="text-break">
                                        {{ $displayItemName }} <br>
                                        @if ($order->store && $order->store->module->module_type == 'food')
                                            @if (count(json_decode($detail['variation'], true)) > 0)
                                                <strong><u>{{ translate('messages.variation') }} : </u></strong>
                                                @foreach (json_decode($detail['variation'], true) as $variation)
                                                    @if (isset($variation['name']) && isset($variation['values']))
                                                        <span class="d-block text-capitalize">
                                                            <strong>{{ $variation['name'] }} - </strong>
                                                        </span>
                                                        @foreach ($variation['values'] as $value)
                                                            <span class="d-block text-capitalize">
                                                                &nbsp; &nbsp; {{ $value['label'] }} :
                                                                <strong>{{ \App\CentralLogics\Helpers::format_currency($value['optionPrice']) }}</strong>
                                                            </span>
                                                        @endforeach
                                                    @else
                                                        @if (isset(json_decode($detail['variation'], true)[0]))
                                                            @foreach (json_decode($detail['variation'], true)[0] as $key1 => $variation)
                                                                <div class="font-size-sm text-body">
                                                                    <span>{{ $key1 }} : </span>
                                                                    <span
                                                                        class="font-weight-bold">{{ $variation }}</span>
                                                                </div>
                                                            @endforeach
                                                        @endif
                                                        @break
                                                    @endif
                                                @endforeach
                                            @endif
                                        @else
                                            @if (count($displayableVariations) > 0)
                                                <strong><u>{{ translate('messages.variation') }}
                                                        :
                                                    </u></strong>
                                                @foreach ($displayableVariations as $variation)
                                                    @if (data_get($variation, 'label') != 'Stock' || ($order->store && config('module.' . $order->store->module->module_type)['stock']))
                                                        <div class="font-size-sm text-body">
                                                            <span>{{ data_get($variation, 'label') }} :
                                                            </span>
                                                            <span class="font-weight-bold">
                                                                {{ Str::limit(data_get($variation, 'value', ''), 15, '...') }}
                                                            </span>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            @endif
                                        @endif
                                        <div class="addons">
                                            @foreach (json_decode($detail['add_ons'], true) as $key2 => $addon)
                                                @if ($key2 == 0)
                                                    <strong><u>{{ translate('messages.addons') }} :
                                                        </u></strong>
                                                @endif
                                                <div>
                                                    <span class="text-break">{{ $addon['name'] }} : </span>
                                                    <span class="font-weight-bold">
                                                        {{ $addon['quantity'] }} x
                                                        {{ \App\CentralLogics\Helpers::format_currency($addon['price']) }}
                                                    </span>
                                                </div>
                                                @php($add_ons_cost += $addon['price'] * $addon['quantity'])
                                            @endforeach
                                        </div>
                                        @if (count(json_decode($detail['variation'], true)) <= 0)
                                            <div class="price">
                                                {{ \App\CentralLogics\Helpers::format_currency($detail->price) }}
                                            </div>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        {{ $detail['quantity'] }}
                                    </td>
                                    <td class="w-28p">
                                        @php($amount = $detail['price'] * $detail['quantity'])
                                        {{ \App\CentralLogics\Helpers::format_currency($amount) }}
                                    </td>
                                </tr>
                                @php($sub_total += $amount)
                                @php($total_tax += $detail['tax_amount'] * $detail['quantity'])
                            @endforeach
                        @endif

                    </tbody>
                </table>
                <div class="checkout--info">
                    <dl class="row text-right">
                        @if ($order->order_type != 'parcel')
                            <dt class="col-6">{{ translate('messages.subtotal') }}
                                @if ($order->tax_status == 'included')
                                    ({{ translate('messages.TAX_Included') }})
                                @endif
                                :
                            </dt>
                            <dd class="col-6">
                                {{ \App\CentralLogics\Helpers::format_currency($sub_total + $add_ons_cost) }}</dd>
                            <dt class="col-6">{{ translate('messages.discount') }}:</dt>
                            <dd class="col-6">
                                -
                                {{ \App\CentralLogics\Helpers::format_currency($order['store_discount_amount'] + $order['flash_admin_discount_amount'] + $order['flash_store_discount_amount']) }}
                            </dd>
                            <dt class="col-6">{{ translate('messages.coupon_discount') }}:</dt>
                            <dd class="col-6">
                                -
                                {{ \App\CentralLogics\Helpers::format_currency($order['coupon_discount_amount']) }}
                            </dd>
                            @if ($order->tax_status == 'excluded' || $order->tax_status == null)
                                <dt class="col-6">{{ translate('messages.vat/tax') }}:</dt>
                                <dd class="col-6">+
                                    {{ \App\CentralLogics\Helpers::format_currency($order['total_tax_amount']) }}</dd>
                            @endif
                            <dt class="col-6">{{ translate('messages.delivery_charge') }}:</dt>
                            <dd class="col-6">
                                @php($del_c = $order['delivery_charge'])
                                {{ \App\CentralLogics\Helpers::format_currency($del_c) }}
                            </dd>
                        @else
                        @endif
                        <dt class="col-6 total">{{ translate('messages.total') }}:</dt>
                        <dd class="col-6 total">
                            {{ \App\CentralLogics\Helpers::format_currency($order->order_amount) }}</dd>
                    </dl>
                    @if ($order->payment_method != 'cash_on_delivery')
                        <div class="d-flex flex-row justify-content-between border-top">
                            <span>{{ translate('messages.Paid by') }}:
                                {{ translate('messages.' . $order->payment_method) }}</span>
                            <span>{{ translate('messages.amount') }}:
                                {{ $order->adjusment + $order->order_amount }}</span>
                            <span>{{ translate('messages.change') }}: {{ abs($order->adjusment) }}</span>
                        </div>
                    @endif
                </div>
            </div>
            <div class="top-info mt-2">
                <img src="{{ asset('/public/assets/admin/img/invoice-star.png') }}" alt="" class="w-100">
                <div class="text-uppercase text-center">{{ translate('THANK YOU') }}</div>
                <img src="{{ asset('/public/assets/admin/img/invoice-star.png') }}" alt="" class="w-100">
                <div class="copyright">
                    &copy; {{ \App\Models\BusinessSetting::where(['key' => 'business_name'])->first()->value }}. <span
                        class="d-none d-sm-inline-block">{{ \App\Models\BusinessSetting::where(['key' => 'footer_text'])->first()->value }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
