@extends('pdfs.layout')

@section('content')
    <style>
        :root {
            --pry-color: <?=$stringMappingConfig['primaryColor'] ?>;
        }

        .text-pry {
            color: var(--pry-color);
        }

        .w-100 {
            width: 100%;
        }

        .text-right {
            text-align: right;
        }

        .text-center {
            text-align: center;
        }

        .page-break {
            page-break-after: always;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        table td {
            vertical-align: top;
            color: rgb(51, 51, 51);
        }
    </style>

    @foreach ($orders as $storeOrder)
        <table>
            <tbody>
                <tr>
                    <td>
                        <div>
                            <img src="./{{ config('app.internalName') }}/img/logo.png" alt="" height="41"
                                style="border: none;max-width:200px;object-fit:contain;">
                        </div>
                        <div class="">
                            <div style="color: #000; font-size: 14px;">
                                <div style="margin-bottom:15px;margin-top:25px;"><b>The {{ $stringMappingConfig['name'] }}
                                        Team</b></div>
                                <div style="display:block;" class="mt-2">Basic Nutrition, Inc.</div>

                                <div style="font-size:13px;">
                                    11140 Rockville Pike<br>
                                    Rockville, MD 20852
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="w-100 text-right">
                            <h4
                                style="font-size:30px;color:<?= $stringMappingConfig['primaryColor'] ?>;margin:25px 0 15px 0;">
                                INVOICE</h4>
                            <div class="text-right">
                                <p style="color: #000; font-size: 14px;margin-bottom:15px;"><b>Contact Us</b></p>
                                <p style="font-size:13px">{{ $stringMappingConfig['supportEmail'] }}</p>
                                <p style="font-size:13px">{{ $stringMappingConfig['supportPhone'] }}</p>
                                <p style="font-size:13px">{{ $stringMappingConfig['productUrl'] }}</p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr height="24" style="background-color:rgb(250,250,250)">
                    <td colspan="5" valign="top"
                        style="text-align:center;text-transform:uppercase;padding:10px;border-top-left-radius:3px;border-bottom-left-radius:3px">
                        <span
                            style="font-size:18px;font-weight:600;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif">Order
                            Information</span>
                    </td>
                </tr>
                <tr height="15">
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td style="width:200px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif">Date:
                        <?= date('F d, Y', strtotime($storeOrder->created_at)) ?>
                    </td>
                    <td colspan="2" align="right" valign="top"
                        style="padding:0 6px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif">Order:
                        #{{ $storeOrder->orderNumber() }}</td>
                </tr>
                <tr height="15">
                    <td>&nbsp;</td>
                </tr>
                <tr height="24" style="background-color:rgb(250,250,250)">
                    <td colspan="5" valign="top"
                        style="text-align:center;text-transform:uppercase;padding:10px;border-top-left-radius:3px;border-bottom-left-radius:3px">
                        <span
                            style="font-size:18px;font-weight:600;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif">Items
                            for Delivery</span>
                    </td>
                </tr>
                <tr height="15">
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="w-100">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div
                                                style="padding:5px;margin:0;display:grid;place-items:center;border-radius:14px;border:1px solid rgba(128,128,128,0.2);width:70px;height:auto;padding:10px;">
                                                <img src="./{{ $stringMappingConfig['productImages'][0] }}" border="0"
                                                    alt="" style="width:100%;height:auto;">
                                            </div>
                                        </td>
                                        <td colspan="4"
                                            style="padding:0 0 0 15px;width:400px;vertical-align:top;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif">
                                            <span
                                                style="font-weight:600;">{{ $stringMappingConfig['productName'] }}</span><br>
                                            <span style="color:#333;display:block;margin-top:8px">Qty:
                                                {{ $storeOrder->number_of_units }}</span>
                                        </td>
                                        <td align="right" valign="top"
                                            style="padding:0 5px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif">
                                            @if ($storeOrder->promoCode)
                                                <span
                                                    style="font-weight:600;white-space:nowrap;display:block;">${{ $storeOrder->promoCode->discounted_price_per_unit }}</span>
                                                <del
                                                    style="font-weight:400;white-space:nowrap;color:#aaa">${{ $stringMappingConfig['standardUnitPrice'] }}</del>
                                            @else
                                                <span
                                                    style="font-weight:600;white-space:nowrap;display:block;">${{ $stringMappingConfig['standardUnitPrice'] }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr height="15">
                    <td colspan="2">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="2"
                        style="border-top:1px solid rgb(238,238,238); border-bottom:1px solid rgb(238,238,238);padding:15px 0;">
                        <table>
                            <tbody>
                                @if ($storeOrder->promoCode)
                                    <tr>
                                        <td colspan="4" class="text-right"
                                            style="color: #00685f;font-size:16px;font-weight:bold;border-right:1px solid rgb(238,238,238);padding: 5px 30px 0 0;">
                                            Promo Code</td>
                                        <td class="text-right"
                                            style="color: #00685f;padding: 5px 0;font-size:18px;font-weight:bold;white-space:nowrap">
                                            {{ $storeOrder->promoCode->code }}</td>
                                    </tr>
                                @endif
                                <tr>
                                    <td colspan="4" class="text-right"
                                        style="color: rgb(51,51,51);font-size:16px;font-weight:normal;border-right:1px solid rgb(238,238,238);padding: 5px 30px 0 0;">
                                        Items</td>
                                    <td class="text-right"
                                        style="padding: 5px 0;font-size:18px;font-weight:normal;white-space:nowrap">
                                        ${{ $storeOrder->content_total }}</td>
                                </tr>
                                <tr>
                                    <td colspan="4" class="text-right"
                                        style="color: rgb(51,51,51);font-size:16px;font-weight:normal;border-right:1px solid rgb(238,238,238);padding: 5px 30px 0 0;">
                                        Shipping Total</td>
                                    <td class="text-right"
                                        style="padding: 5px 0;font-size:18px;font-weight:normal;white-space:nowrap">
                                        ${{ $storeOrder->shipping_total }}</td>
                                </tr>
                                <tr>
                                    <td colspan="4" class="text-right"
                                        style="color: rgb(51,51,51);font-size:20px;font-weight:bold;border-right:1px solid rgb(238,238,238);padding: 5px 30px 0 0;">
                                        Total</td>
                                    <td class="text-right"
                                        style="padding: 5px 0;font-size:20px;font-weight:bold;white-space:nowrap">
                                        ${{ $storeOrder->final_total }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr height="15">
                    <td colspan="2">&nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <div
                            style="color: rgb(51,51,51);font-size:18px;font-weight:bold;padding:5px 0;text-transform:uppercase;font-weight:600;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;margin-bottom:15px">
                            Shipping Information</div>
                        <span style="font-weight:bold;">Ship To:</span> <br>
                        <div>{{ $storeOrder->client->displayName() }}</div>
                        {{ $storeOrder->mailing_address_line1 }} {{ $storeOrder->mailing_address_line2 }} <br>
                        {{ $storeOrder->mailing_address_city }},
                        {{ $storeOrder->mailing_address_state }},
                        {{ $storeOrder->mailing_address_zip }}<br>
                        <br>
                        <span style="font-weight:bold;">Shipping Method:</span> <br> {{ $storeOrder->shipping_method }}
                    </td>
                    <td>
                        <div class="text-left">
                            <div
                                style="color: rgb(51,51,51);font-size:18px;font-weight:bold;padding:5px 0;text-transform:uppercase;font-weight:600;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;margin-bottom:15px;">
                                Billing Information</div>
                            <span style="font-weight:bold;">Bill To:</span> <br>
                            {{ $storeOrder->client->displayName() }}<br>
                            <br>
                            @if ($storeOrder->paymentMethod)
                                <span style="font-weight:bold;">Payment Method: </span> <br>
                                <span
                                    style="margin-right:5px;text-transform:uppercase;">{{ $storeOrder->paymentMethod->brand() }}</span>
                                {{ $storeOrder->paymentMethod->displayNameShort() }}
                            @endif
                    </td>
                    </div>
                    </td>
                </tr>
            </tbody>
        </table>
        @if (!$loop->last)
            <div class="page-break"></div>
        @endif
    @endforeach
@endsection