@extends('layouts.app')
@section('header')
<div class="container-fluid bg-light pt-3">
<!-- Customer company name row -->
<div class="row justify-content-center pb-2">
<div class="col-3"></div>
<div class="col">
{{-- <h2>Overview</h2>--}}
</div>
</div>
<!-- Tabs row -->
<div class="row justify-content-center mb-3">
<div class="col-2 border-bottom"></div>
<div class="col-8 p-0">
<ul class="nav nav-fill nav-tabs" id="home-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link link-dark {{$tab == 'details' ? 'active' : ''}}" id="details-tab"
href="{{route('orders.index', ['tab' => 'details'])}}" type="button" role="tab"
aria-controls="details" aria-selected="{{$tab == 'details' ? 'true' : 'false'}}">
<x-bi-list-ul/>
Order Details
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link link-dark {{$tab == 'packing-slips' ? 'active' : ''}}" id="packing-slips-tab"
href="{{route('orders.index', ['tab' => 'packing-slips'])}}" type="button" role="tab"
aria-controls="packing-slips"
aria-selected="{{$tab == 'packing-slips' ? 'true' : 'false'}}">
<x-bi-calendar-range/>
Packing Slips
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link link-dark {{$tab == 'timeline' ? 'active' : ''}}" id="timeline-tab"
href="{{route('orders.index', ['tab' => 'timeline'])}}" type="button" role="tab"
aria-controls="timeline" aria-selected="{{$tab == 'timeline' ? 'true' : 'false'}}">
<x-bi-calendar-range/>
Timeline
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link link-dark {{$tab == 'quote' ? 'active' : ''}}" id="quote-tab"
href="{{route('orders.index', ['tab' => 'quote'])}}" type="button" role="tab"
aria-controls="quote" aria-selected="{{$tab == 'quote' ? 'true' : 'false'}}">
<x-bi-calendar-range/>
Quote
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link link-dark {{$tab == 'invoice' ? 'active' : ''}}" id="invoice-tab"
href="{{route('orders.index', ['tab' => 'invoice'])}}" type="button" role="tab"
aria-controls="invoice" aria-selected="{{$tab == 'invoice' ? 'true' : 'false'}}">
<x-bi-calendar-range/>
Invoice
</a>
</li>
</ul>
</div>
<div class="col border-bottom"></div>
</div>
</div>
@endsection
@section('content')
<div class="container-fluid" style="max-width: 1800px">
<div class="row justify-content-center my-3 pt-3 ">
<div class="col-11 col-xl-4 border-end">
<div class="row mb-3">
<div class="col">
<a href="{{route('orders.pdf', $order)}}" target="_blank" class="btn btn-primary">
<x-bi-printer-fill/>
Print Order
</a>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row ">
<label for="company_name" class="col-5 py-0 col-form-label text-md-end">Customer</label>
<div class="col-md-6">
<a class="fw-bold text-body text-decoration-none"
href="{{route('customers.show', [$order->customer, 'details'])}}">{{$order->customer->company_name}}</a>
</div>
</div>
<div class="row">
<label for="contact_name" class="col-5 py-0 col-form-label text-md-end">Contact</label>
<div class="col-md-6">
@if(isset($order->contact))
<input type="text" name="contact_name" id="" class="py-0 form-control-plaintext" readonly
value="{{$order->contact->full_name}}">
@else
<input type="text" name="contact_name" id=""
class="py-0 form-control-plaintext text-secondary"
readonly value="No contact set">
@endif
</div>
</div>
<hr class="border-secondary-subtle px-0">
<div class="row">
<label for="order_type" class="col-5 py-0 col-form-label text-md-end">Order Type</label>
<div class="col-md-6">
<input type="text" name="order_type" id="" class="py-0 form-control-plaintext" readonly
value="{{$order->order_type}}">
</div>
</div>
<div class="row">
<label for="order_status" class="col-5 py-0 col-form-label text-md-end">Order Status</label>
<div class="col-md-6">
<input type="text" name="order_status" id="" class="py-0 form-control-plaintext" readonly
value="{{$order->status}}">
</div>
</div>
<hr class="border-secondary-subtle px-0">
<div class="row ">
<label for="internal_po" class="col-5 py-0 col-form-label text-md-end">Internal PO</label>
<div class="col-md-6">
<code class="fw-bold">{{$order->internal_po}}</code>
</div>
</div>
<div class="row py-0 ">
<label for="customer_po" class="col-5 py-0 col-form-label text-md-end">Customer PO</label>
<div class="col-md-6">
<code class="text-primary">{{$order->customer_po}}</code>
</div>
</div>
<hr class="border-secondary-subtle px-0">
<div class="row mb-2">
<label class="col-5 py-0 col-form-label text-md-end">Attributes</label>
<div class="col">
@if($order->new_art)
<div class="form-check">
<x-bi-check/>
<label class="form-check-label" for="new_art">New art</label>
</div>
@endif
@if($order->rush)
<div class="form-check ">
<x-bi-check/>
<label class="form-check-label" for="new_art">Rush</label>
</div>
@endif
@if($order->digitizing)
<div class="form-check ">
<x-bi-check/>
<label class="form-check-label" for="digitizing">Digitizing</label>
</div>
@endif
@if($order->customer_supplied_file)
<div class="form-check ">
<x-bi-check/>
<label class="form-check-label" for="customer_supplied_file">
Customer Supplied File
</label>
</div>
@endif
@if($order->repeat)
<div class="form-check ">
<x-bi-check/>
<label class="form-check-label" for="repeat">Repeat</label>
</div>
@endif
@if($order->event)
<div class="form-check ">
<x-bi-check/>
<label class="form-check-label" for="event">Event</label>
</div>
@endif
@if($order->purchased_garments)
<div class="form-check ">
<x-bi-check/>
<label class="form-check-label" for="purchased_garments">Purchased Garments</label>
</div>
@endif
</div>
</div>
<hr class="border-secondary-subtle px-0">
<div class="row py-0 ">
<label for="order_date" class="col-5 py-0 col-form-label text-md-end">Order Date</label>
<div class="col-md-6">
<input type="text" name="order_date" id="" class="py-0 form-control-plaintext"
readonly value="{{$order->order_date}}">
</div>
</div>
<div class="row py-0 ">
<label for="due_date" class="col-5 py-0 col-form-label text-md-end">Due Date</label>
<div class="col-md-6">
<input type="text" name="due_date" id="" class="py-0 form-control-plaintext"
readonly value="{{$order->due_date}}">
</div>
</div>
<hr class="border-secondary-subtle px-0">
<div class="row mb-3">
<label for="notes" class="col-5 py-0 col-form-label text-md-end">Notes</label>
<div class="col-6">
{{$order->notes}}
</div>
</div>
</div>
<div class="col-xl-7">
<table class="table table-striped table-hover table-sm mb-1 ms-0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">SKU</th>
<th scope="col">Product Name</th>
<th scope="col">Color</th>
<th scope="col">XS</th>
<th scope="col">S</th>
<th scope="col">M</th>
<th scope="col">L</th>
<th scope="col">XL</th>
<th scope="col">2XL</th>
<th scope="col">3XL</th>
<th scope="col">OSFA</th>
<th scope="col">Total</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@foreach($order->orderProducts as $key => $product)
<input type="hidden" name="productInputCount[]" value="1">
<th scope="row" class="align-middle">{{$loop->index+1}}</th>
<td class="col-1">
<!-- SKU -->
{{$product->sku}}
</td>
<td class="col-3">
<!-- product_name -->
{{$product->product_name}}
</td>
<td class="col-1">
<!-- product_color -->
{{$product->color}}
</td>
<td class="" style="width: 55px">
<!-- size_xs -->
{{$product->productSizes()->get()->where('size', 'xs')->first()->amount ?? ''}}
</td>
<td class="" style="width: 55px">
<!-- size_s -->
{{$product->productSizes()->get()->where('size', 's')->first()->amount ?? ''}}
</td>
<td class="" style="width: 55px">
<!-- size_m -->
{{$product->productSizes()->get()->where('size', 'm')->first()->amount ?? ''}}
</td>
<td class="" style="width: 55px">
<!-- size_l -->
{{$product->productSizes()->get()->where('size', 'l')->first()->amount ?? ''}}
</td>
<td class="" style="width: 55px">
<!-- size_xl -->
{{$product->productSizes()->get()->where('size', 'xl')->first()->amount ?? ''}}
</td>
<td class="" style="width: 55px">
<!-- size_2xl -->
{{$product->productSizes()->get()->where('size', '2xl')->first()->amount ?? ''}}
</td>
<td class="" style="width: 55px">
<!-- size_3xl -->
{{$product->productSizes()->get()->where('size', '3xl')->first()->amount ?? ''}}
</td>
<td style="width: 55px">
<!-- size_osfa -->
{{$product->productSizes()->get()->where('size', 'osfa')->first()->amount ?? ''}}
</td>
<td class="col" style="width: 55px">
{{$product->totalQuantity()}}
</td>
<td class="col" style="width: 40px">
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="d-flex gap-2">
<label for="total-quantity" class="text-nowrap col-form-label">Total Quantity:</label>
<input type="number" name="total-quantity" id="" class="form-control-plaintext" readonly
value="{{$order->getTotalProductQuantity()}}">
</div>
<!-- Product Services -->
<div class="ms-2">
<!-- Title -->
<div class="row px-2 border-bottom mt-4">
<div class="row fw-bold">
<div class="col-1 px-0" style="width: 40px;">#</div>
<div class="col-1 px-1">Service</div>
<div class="col-2 px-1">Placement</div>
<div class="col-3 px-1">Logo Name</div>
<div class="col-5">
<div class="row">
<div class="col px-1">Setup</div>
<div class="col px-1">Width</div>
<div class="col px-1">Height</div>
<div class="col px-1">Unit</div>
<div class="col px-1">Price</div>
<div class="col px-1">Total</div>
</div>
</div>
</div>
</div>
<!-- Row -->
@foreach($order->productServices as $key => $service)
<div class="row">
<div class="@if($loop->index % 2 != 1) bg-body-tertiary @endif border-bottom py-2">
<div class="row mb-1">
<div class="row mb-2">
<div class="col-1 px-1 fw-bold" style="width: 40px;">{{$loop->index+1}}</div>
<div class="col-1 px-2 fw-bold text-uppercase">
<!-- Service type -->
{{$service->serviceType->name}}
</div>
<div class="col-2 px-1 text-uppercase">
{{$service->placement}}
</div>
<div class="col-3 px-1 text-uppercase">
{{$service->serviceFile->name }}
</div>
<div class="col-5">
<div class="row">
<div class="col px-1">
{{$service->serviceFile->setup_number}}
</div>
<div class="col px-1">
{{$service->serviceFile->width}}
</div>
<div class="col px-1">
{{$service->serviceFile->height}}
</div>
<div class="col px-1">
{{$service->amount}}
</div>
<div class="col px-1">
{{$service->amount_price != 0 ? $service->amount_price : ''}}
</div>
<div class="col px-1">
{{$service->amount_price != 0 ? '$' . number_format($service->amount_price*$service->amount, 2) : ''}}
</div>
</div>
</div>
</div>
<div class="row mx-0 px-0">
<div class="col-1" style="width: 40px;"></div>
<div class="col-1 px-1 ps-2">
<code class="fs-6">
{{$service->serviceFile->code}}
</code>
</div>
<div class="col-9 px-1">
{{$service->notes}}
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
<div class="d-flex flex-row gap-2 ">
<label for="total-price" class="col-form-label text-nowrap">Total Price:</label>
<input type="text" name="total-price" id="" class="col-1 form-control-plaintext" readonly
value="{{'$'.$order->totalServicePrice()}}">
</div>
</div>
</div>
</div>
@endsection