@extends('layouts.pdf')

<div class="container-fluid my-3 ms-3 me-5">
    <div class="me-4 pe-2">

        {{--        First row of header--}}
        <div class="row d-flex align-items-center">

            <div class="col-4 align-self-center">
                <div class="fs-3 fw-bold">TOP NOTCH</div>
            </div>

            <div class="col-4 text-center">
                <div class="bg-info text-white">
                    <div class="fs-3 fw-bold">EMB</div>
                </div>
            </div>

            <div class="col-4 text-end d-flex flex-row-reverse gap-2">
                <div class="text-decoration-underline">
                    Aug 20, 2024
                </div>
                <div>
                    Order Date:
                </div>
            </div>

        </div>

        {{--            2nd row of header --}}
        <div class="row mt-1 d-flex align-items-center">
            <div class="col-4 fst-italic">
                <div class="fs-3">Order Form</div>
            </div>

            <div class="col-4 text-center">
                <div class="row gap-1">
                    <div class="col bg-danger text-white">
                        <div class="fs-3"> RUSH</div>
                    </div>
                    <div class="col bg-warning text-white">
                        <div class="fs-3"> Event</div>
                    </div>
                </div>
            </div>

            <div class="col-4 text-end d-flex flex-row-reverse gap-2">
                <div class="text-decoration-underline">
                    Sep 21, 2024
                </div>
                <div>
                    Date Required:
                </div>
            </div>
        </div>

        <hr class="border-black border-1 opacity-100 mt-2">

        <!-- Company Name and New Art/Repeat Row -->
        <div class="row">
            <div class="col d-inline-flex gap-1 border-bottom">
                <div class="fs-4">
                    {{$order->customer->company_name}}
                </div>
            </div>

            <div class="col d-inline-flex align-items-end gap-3 justify-content-end">

                <div class="d-inline-flex gap-2">
                    <div class="h-auto">
                        <div class="border border-1 border-opacity-50 mt-1">
                            <x-bi-check/>
                        </div>
                    </div>
                    <div>New Art</div>
                </div>

                <div class="d-inline-flex gap-2">
                    <div class="h-auto">
                        <div class="border border-1 border-opacity-50 mt-1">
                            <x-bi-check/>
                        </div>
                    </div>
                    <div>Repeat</div>
                </div>

                <div class="d-inline-flex gap-2">
                    <div class="h-auto">
                        <div class="border border-1 border-opacity-50 mt-1">
                            <x-bi-check/>
                        </div>
                    </div>
                    <div>Digitizing</div>
                </div>

            </div>
        </div>

        <!-- PO and purchased gaerments row -->
        <div class="row mt-3">
            <div class="col d-inline-flex gap-1 border-bottom">
                <div class="fs-6">
                    PO#
                </div>
                <div class="fs-6 text-info">
                    {{$order->customer_po}}
                </div>
            </div>

            <div class="col d-inline-flex align-items-start gap-3 justify-content-end">

                <div class="d-inline-flex gap-2">
                    <div class="h-auto">
                        <div class="border border-1 border-opacity-50 mt-1">
                            <x-bi-check/>
                        </div>
                    </div>
                    <div>Purchased Garments</div>
                </div>

            </div>
        </div>

        <div class="row mt-4">
            <table class="table table-sm table-striped" style="font-size: 10px;">
                <thead class="opacity-50 fw-normal">
                <th>SKU</th>
                <th>Product Name</th>
                <th>Color</th>
                <th>XS</th>
                <th>S</th>
                <th>M</th>
                <th>L</th>
                <th>XL</th>
                <th>2XL</th>
                <th>3XL</th>
                <th>OSFA</th>
                <th>Total</th>
                </thead>

                <tbody>
                @foreach($order->orderProducts as $product)
                    <tr>
                        <td><code>{{$product->sku}}</code></td>
                        <td class="text-uppercase">{{$product->product_name}}</td>
                        <td class="text-uppercase">{{$product->color}}</td>
                        <td style="width: 40px;">{{$product->productSizes()->get()->where('size', 'xs')->first()->amount ?? ''}}</td>
                        <td style="width: 40px;">{{$product->productSizes()->get()->where('size', 's')->first()->amount ?? ''}}</td>
                        <td style="width: 40px;">{{$product->productSizes()->get()->where('size', 'm')->first()->amount ?? ''}}</td>
                        <td style="width: 40px;">{{$product->productSizes()->get()->where('size', 'l')->first()->amount ?? ''}}</td>
                        <td style="width: 40px;">{{$product->productSizes()->get()->where('size', 'xl')->first()->amount ?? ''}}</td>
                        <td style="width: 40px;">{{$product->productSizes()->get()->where('size', '2xl')->first()->amount ?? ''}}</td>
                        <td style="width: 40px;">{{$product->productSizes()->get()->where('size', '3xl')->first()->amount ?? ''}}</td>
                        <td style="width: 40px;">{{$product->productSizes()->get()->where('size', 'osfa')->first()->amount ?? ''}}</td>
                        <td style="width: 40px;">{{$product->totalQuantity()}}</td>

                    </tr>
                @endforeach

                </tbody>
            </table>
        </div>

        <!-- Products Table -->


    </div>
</div>