@component('yas_theme::emails.layout')
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #1e293b; line-height: 1.6; max-width: 600px; margin: 0 auto;">

    <!-- Header Greeting & Status -->
    <div style="margin-bottom: 24px;">
        <h1 style="font-size: 22px; font-weight: 600; color: #0f172a; margin: 0 0 12px 0;">
            @lang('yas_theme::app.emails.orders.invoiced.title')
        </h1>

        <p style="font-size: 15px; color: #475569; margin: 0 0 8px 0;">
            @lang('yas_theme::app.emails.dear', ['customer_name' => $invoice->order->customer_full_name]), 👋
        </p>

        <p style="font-size: 15px; color: #475569; margin: 0; line-height: 1.6;">
            {!! __('yas_theme::app.emails.orders.invoiced.greeting', [
                'invoice_id' => $invoice->company_invoice_number,
                'order_id'   => '<a href="' . route('yas_theme.customers.account.orders.view', $invoice->order_id) . '" style="color: #2969FF; text-decoration: underline;">#' . $invoice->order->increment_id . '</a>',
                'created_at' => core()->formatDate($invoice->order->created_at, 'Y-m-d H:i:s')
            ]) !!}
        </p>
    </div>

    <!-- Summary Section Heading -->
    <h2 style="font-size: 18px; font-weight: 600; color: #0f172a; margin: 0 0 16px 0;">
        @lang('yas_theme::app.emails.orders.invoiced.summary')
    </h2>

    <!-- Addresses & Payment Details Block -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 32px; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px;">
        <tr>
            @if ($invoice->order->shipping_address)
                <td valign="top" style="width: 50%; padding-right: 12px; font-size: 14px; color: #334155; line-height: 1.6;">
                    <div style="font-weight: 600; color: #0f172a; margin-bottom: 8px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em;">
                        @lang('yas_theme::app.emails.orders.shipping-address')
                    </div>
                    {{ $invoice->order->shipping_address->company_name ?? '' }}@if(!empty($invoice->order->shipping_address->company_name))<br/>@endif
                    {{ $invoice->order->shipping_address->name }}<br/>
                    {{ $invoice->order->shipping_address->address }}<br/>
                    {{ $invoice->order->shipping_address->postcode . " " . $invoice->order->shipping_address->city }}<br/>
                    {{ $invoice->order->shipping_address->state }}<br/>
                    <div style="border-top: 1px solid #e2e8f0; margin: 8px 0; padding-top: 8px;">
                        @lang('yas_theme::app.emails.orders.contact') : {{ $invoice->order->billing_address->phone }}
                    </div>

                    <div style="font-weight: 600; color: #0f172a; margin-top: 16px; margin-bottom: 4px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em;">
                        @lang('yas_theme::app.emails.orders.shipping')
                    </div>
                    {{ $invoice->order->shipping_title }}
                </td>
            @endif

            @if ($invoice->order->billing_address)
                <td valign="top" style="width: 50%; padding-left: 12px; font-size: 14px; color: #334155; line-height: 1.6;">
                    <div style="font-weight: 600; color: #0f172a; margin-bottom: 8px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em;">
                        @lang('yas_theme::app.emails.orders.billing-address')
                    </div>
                    {{ $invoice->order->billing_address->company_name ?? '' }}@if(!empty($invoice->order->billing_address->company_name))<br/>@endif
                    {{ $invoice->order->billing_address->name }}<br/>
                    {{ $invoice->order->billing_address->address }}<br/>
                    {{ $invoice->order->billing_address->postcode . " " . $invoice->order->billing_address->city }}<br/>
                    {{ $invoice->order->billing_address->state }}<br/>
                    <div style="border-top: 1px solid #e2e8f0; margin: 8px 0; padding-top: 8px;">
                        @lang('yas_theme::app.emails.orders.contact') : {{ $invoice->order->billing_address->phone }}
                    </div>

                    <div style="font-weight: 600; color: #0f172a; margin-top: 16px; margin-bottom: 4px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em;">
                        @lang('yas_theme::app.emails.orders.payment')
                    </div>
                    {{ core()->getConfigData('sales.payment_methods.' . $invoice->order->payment->method . '.title') }}

                    @php $additionalDetails = \Webkul\Payment\Payment::getAdditionalDetails($invoice->order->payment->method); @endphp
                    @if (! empty($additionalDetails))
                        <div style="font-size: 13px; color: #64748b; margin-top: 4px;">
                            <div>{{ $additionalDetails['title'] }}</div>
                            <div>{{ $additionalDetails['value'] }}</div>
                        </div>
                    @endif
                </td>
            @endif
        </tr>
    </table>

    <!-- Invoiced Items Table -->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin-bottom: 24px;">
        <thead>
            <tr style="border-bottom: 2px solid #e2e8f0;">
                @foreach (['sku', 'name', 'price', 'qty'] as $item)
                    <th align="{{ $item === 'qty' ? 'center' : 'left' }}" style="padding: 10px; font-size: 13px; font-weight: 600; color: #0f172a; text-transform: uppercase;">
                        @lang('yas_theme::app.emails.orders.' . $item)
                    </th>
                @endforeach
            </tr>
        </thead>
        <tbody>
            @foreach ($invoice->items as $item)
                <tr style="border-bottom: 1px solid #f1f5f9; vertical-align: top;">
                    <td style="padding: 12px 10px; font-size: 14px; color: #475569;">
                        {{ $item->getTypeInstance()->getOrderedItem($item)->sku }}
                    </td>

                    <td style="padding: 12px 10px; font-size: 14px; color: #1e293b;">
                        <strong>{{ $item->name }}</strong>
                        @if (isset($item->additional['attributes']))
                            <div style="font-size: 13px; color: #64748b; margin-top: 4px;">
                                @foreach ($item->additional['attributes'] as $attribute)
                                    <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}<br/>
                                @endforeach
                            </div>
                        @endif
                    </td>

                    <td style="padding: 12px 10px; font-size: 14px; color: #475569;">
                        @if (core()->getConfigData('sales.taxes.sales.display_prices') == 'including_tax')
                            {{ core()->formatPrice($item->price_incl_tax, $invoice->order_currency_code) }}
                        @elseif (core()->getConfigData('sales.taxes.sales.display_prices') == 'both')
                            {{ core()->formatPrice($item->price_incl_tax, $invoice->order_currency_code) }}
                            <span style="font-size: 12px; color: #64748b; display: block;">
                                @lang('yas_theme::app.emails.orders.excl-tax')
                                <strong>{{ core()->formatPrice($item->price, $invoice->order_currency_code) }}</strong>
                            </span>
                        @else
                            {{ core()->formatPrice($item->price, $invoice->order_currency_code) }}
                        @endif
                    </td>

                    <td align="center" style="padding: 12px 10px; font-size: 14px; color: #475569;">
                        {{ $item->qty }}
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Totals Table -->
    <table border="0" cellpadding="0" cellspacing="0" align="right" width="100%" style="max-width: 300px; margin-left: auto; border-top: 2px solid #e2e8f0; padding-top: 12px; margin-bottom: 32px;">
        @if (core()->getConfigData('sales.taxes.sales.display_subtotal') == 'including_tax')
            <tr>
                <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.subtotal')</td>
                <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->sub_total, $invoice->order_currency_code_incl_tax) }}</td>
            </tr>
        @elseif (core()->getConfigData('sales.taxes.sales.display_subtotal') == 'both')
            <tr>
                <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.subtotal-excl-tax')</td>
                <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->sub_total, $invoice->order_currency_code) }}</td>
            </tr>
            <tr>
                <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.subtotal-incl-tax')</td>
                <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->sub_total, $invoice->order_currency_code_incl_tax) }}</td>
            </tr>
        @else
            <tr>
                <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.subtotal')</td>
                <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->sub_total, $invoice->order_currency_code) }}</td>
            </tr>
        @endif

        @if ($invoice->order->shipping_address)
            @if (core()->getConfigData('sales.taxes.sales.display_shipping_amount') == 'including_tax')
                <tr>
                    <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.shipping-handling')</td>
                    <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->shipping_amount_incl_tax, $invoice->order_currency_code) }}</td>
                </tr>
            @elseif (core()->getConfigData('sales.taxes.sales.display_shipping_amount') == 'both')
                <tr>
                    <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.shipping-handling-excl-tax')</td>
                    <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->shipping_amount, $invoice->order_currency_code) }}</td>
                </tr>
                <tr>
                    <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.shipping-handling-incl-tax')</td>
                    <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->shipping_amount_incl_tax, $invoice->order_currency_code) }}</td>
                </tr>
            @else
                <tr>
                    <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.shipping-handling')</td>
                    <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->shipping_amount, $invoice->order_currency_code) }}</td>
                </tr>
            @endif
        @endif

        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.tax')</td>
            <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->tax_amount, $invoice->order_currency_code) }}</td>
        </tr>

        @if ($invoice->discount_amount > 0)
            <tr>
                <td style="padding: 6px 0; font-size: 14px; color: #475569;">@lang('yas_theme::app.emails.orders.discount')</td>
                <td align="right" style="padding: 6px 0; font-size: 14px; color: #1e293b;">{{ core()->formatPrice($invoice->discount_amount, $invoice->order_currency_code) }}</td>
            </tr>
        @endif

        <tr style="border-top: 1px solid #e2e8f0;">
            <td style="padding: 10px 0 0 0; font-size: 16px; font-weight: 700; color: #0f172a;">@lang('yas_theme::app.emails.orders.grand-total')</td>
            <td align="right" style="padding: 10px 0 0 0; font-size: 16px; font-weight: 700; color: #0f172a;">{{ core()->formatPrice($invoice->grand_total, $invoice->order_currency_code) }}</td>
        </tr>
    </table>

</div>
@endcomponent