@extends('layouts.pdf')

<div class="container-fluid ">
    <div class="">

        {{--        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">{{$order->order_type}}</div>
                </div>
            </div>

            <div class="col-4 text-end d-flex flex-row-reverse gap-2">
                <div class="text-decoration-underline">
                    {{$order->orderDatePdf()}}
                </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 @if(!$order->rush) opacity-0 @endif">
                        <div class="fs-3"> RUSH</div>
                    </div>
                    <div class="col bg-warning text-white @if(!$order->event) opacity-0 @endif">
                        <div class="fs-3"> Event</div>
                    </div>
                </div>
            </div>

            <div class="col-4 text-end d-flex flex-row-reverse gap-2 text-nowrap">
                <div class="text-decoration-underline">
                    {{$order->dueDatePdf()}}
                </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">
                            <div class="@if(!$order->new_art) opacity-0 @endif">
                                <x-bi-check/>
                            </div>
                        </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">
                            <div class="@if(!$order->repeat) opacity-0 @endif">
                                <x-bi-check/>
                            </div>
                        </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">
                            <div class="@if(!$order->digitizing) opacity-0 @endif">
                                <x-bi-check/>
                            </div>
                        </div>
                    </div>
                    <div>Digitizing</div>
                </div>

            </div>
        </div>

        <!-- PO and purchased gaerments row -->
        <div class="row mt-3">
            <div class="col-8 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-4 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">
                            <div class="@if(!$order->purchased_garments) opacity-0 @endif">
                                <x-bi-check/>
                            </div>
                        </div>
                    </div>
                    <div>Purchased Garments</div>
                </div>

            </div>
        </div>

        <!-- Products Table -->

        <div class="row mt-4">
            <table class="table table-striped" style="font-size: 11px;">
                <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>
        <div class="row mt-3 text-end" style="font-size: 11px">
            <div class="col">
                TOTAL QUANTITY: {{$order->totalProductQuantity}}
            </div>
        </div>

        <!-- Services Table -->
        <div class="row mt-3">
            <table class="table table-striped" style="font-size: 11px;">
                <thead class="opacity-50 fw-normal">
                <th>Placement & Service</th>
                <th class="w-50">Logo Name & Instructions</th>
                <th>Width</th>
                <th>Height</th>
                <th>QTY</th>
                </thead>

                <tbody>
                @foreach($order->productServices as $service)
                    <tr>
                        <td>
                            <div class="text-uppercase fw-bold">
                                {{$service->placement}}
                            </div>
                            <br>
                            <div class="text-uppercase">
                                <code style="font-size: 11px">
                                    {{$service->serviceFile->code}}
                                </code>
                            </div>
                        </td>
                        <td>
                            <div class="text-uppercase">
                                {{$service->serviceFile->name}}
                            </div>
                            <br>
                            <div class="text-uppercase">
                                {{$service->notes}}
                            </div>
                        </td>
                        <td>
                            {{$service->serviceFile->width}}
                        </td>
                        <td>
                            {{$service->serviceFile->height}}
                        </td>
                        <td>
                            {{$service->amount}}
                        </td>
                    </tr>

                @endforeach

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

        <div class="row mt-3">
            {{$order->notes}}
        </div>

    </div>
</div>