@component('shop::emails.layout')
    <div style="margin-bottom: 34px;">
        <span style="font-size: 22px; font-weight: 600; color: #121A26;">
            @lang('marketplace::app.emails.rma.new-request.summary')
        </span>

        <p style="font-size: 16px; color: #5E5E5E; line-height: 24px; margin-top: 8px;">
            @lang('marketplace::app.emails.dear', ['customer_name' => $data['name']]), 👋
        </p>

        <p style="font-size: 16px; color: #5E5E5E; line-height: 24px;">
            @lang('marketplace::app.emails.rma.new-request.greeting', [
                'rma_id' => $data['rma_id']
            ])
        </p>

        <!-- summary -->
        <div style="margin-bottom: 16px; font-size: 20px; font-weight: 600; color: #121A26;">
            @lang('marketplace::app.emails.rma.new-request.summary')
        </div>

        <!-- RMA id -->
        <div style="margin-top:20px; margin-bottom:20px; display:flex; flex-direction:row; justify-content:space-between;">
            <div style="line-height:25px;">
                <!-- RMA ID -->
                <div style="font-size: 16px; font-weight: 700; color: #121A26; margin-bottom:6px;">
                    @lang('marketplace::app.emails.rma.new-request.rma-id') {{ $data['rma_id'] }}
                </div>

                <!-- order status -->
                <div style="font-size: 14px; font-weight: 600; color: #384860;">
                    @lang('marketplace::app.emails.rma.new-request.order-status'):
                    @if ($data['order_status'] == '1')
                        &nbsp;@lang('marketplace::app.emails.rma.new-request.delivered')
                    @else
                        &nbsp;@lang('marketplace::app.emails.rma.new-request.undelivered')
                    @endif
                </div>
            </div>

            <div style="line-height:25px; text-align:right;">
                <!-- order Id -->
                <div style="font-size: 16px; font-weight: 700; color: #121A26; margin-bottom:6px;">
                    @lang('marketplace::app.emails.rma.new-request.order-id') {{ $data['order_id'] }}
                </div>

                <!-- Resolution Type -->
                <div style="font-size: 14px; font-weight: 600; color: #384860;">
                    @lang('marketplace::app.emails.rma.new-request.resolution-type')

                    @foreach ($data['resolution_type'] as $resolution)
                        {{ $resolution }}@if(! $loop->last),@endif&nbsp;
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Additional Information -->
        <div style="margin-bottom:10px; font-size:14px; color:#121A26;">
            <strong>@lang('marketplace::app.emails.rma.new-request.additional-information'):</strong>
            <div style="margin-top:6px; color:#384860; font-weight:500;">
                {!! $data['information'] ?: '-' !!}
            </div>
        </div>

        <div style="margin-top:12px; font-size:16px; font-weight:700; color:#121A26;">
            @lang('marketplace::app.emails.rma.new-request.rma-items')
        </div>
        <br />

        <div style="padding-bottom: 40px; border-bottom: 1px solid #CBD5E1;">
            <table style="overflow-x: auto; border-collapse: collapse; border-spacing: 0; width: 100%;">
                <thead>
                    <tr style="color: #121A26; border-top: 1px solid #CBD5E1; border-bottom: 1px solid #CBD5E1;">
                        <th style="text-align: left; padding: 15px; font-weight: 600;">
                            @lang('marketplace::app.emails.rma.new-request.product-name')
                        </th>

                        <th style="text-align: left; padding: 15px; font-weight: 600;">
                            @lang('marketplace::app.emails.rma.new-request.qty')
                        </th>

                        <th style="text-align: left; padding: 15px; font-weight: 600;">
                            @lang('marketplace::app.emails.rma.new-request.sku')
                        </th>

                        <th style="text-align: left; padding: 15px; font-weight: 600;">
                            @lang('marketplace::app.emails.rma.new-request.reason')
                        </th>
                    </tr>
                </thead>

                <tbody style="font-size: 16px; font-weight: 400; color: #384860;">
                    @foreach ($data['order_items'] as $key => $ordered_item)
                        <tr style="vertical-align: text-top;">
                            <td style="text-align: left; padding: 15px;">
                                {!! $ordered_item->name !!}
                            </td>

                            <td style="text-align: left; padding: 15px;">
                                @if (isset($data['rma_qty'][$key]))
                                    {!! $data['rma_qty'][$key] !!}
                                @else
                                    @foreach ($data['rma_qty'] as $rmaQty)
                                        {!! $rmaQty !!}
                                    @endforeach
                                @endif
                            </td>

                            <td style="text-align: left; padding: 15px;">
                                {{ $ordered_item->getTypeInstance()->getOrderedItem($ordered_item)->sku }}
                            </td>

                            <td style="text-align: left; padding: 15px;">
                                @if (! empty($data['reason']))
                                    @if (isset($data['reason'][$key]))
                                        {!! $data['reason'][$key] !!}
                                    @else
                                        {!! $data['reason'][0] !!}
                                    @endif
                                @else
                                    -
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endcomponent