@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