@extends('layouts.main')

@section('page-id', '6037d3477f923a851e844852')

@section('body-class', 'pale-green')

@section('content')
  <div class="section transparent basket">
    <div class="wide-container">
      <div class="sheet sign-in account">
        <div class="account-desktop">
          <div class="mb-40">
            <div class="columns-align-center w-row">
              <div class="w-col w-col-4">
                <a href="{{ route('index') }}" class="orange-link">&lt; Back to shopping</a>
              </div>
              <div class="w-col w-col-8">
                <h1 class="h1-2 mt-0 mb-0">Online Orders</h1>
              </div>
            </div>
          </div>
          <div class="account-columns w-row">
            <div class="account-menu-wrapper w-col w-col-4">
              <ul role="list" class="account-links w-list-unstyled">
                <li class="account-link-item">
                  <a href="{{ route('account.overview') }}" class="account-link">Account Overview</a>
                </li>
                <li class="account-link-item">
                  <a href="{{ route('account.orders') }}" class="account-link w--current">Online Orders</a>
                </li>
                <li class="account-link-item">
                  <a href="{{ route('account.details') }}" class="account-link">My Details</a>
                </li>
                <li class="account-link-item">
                  <a href="{{ route('logout') }}" class="account-link" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Log Out</a>
                  <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf

                  </form>
                </li>
              </ul>
            </div>
            <div class="account-overview-wrapper w-col w-col-8">
              <div class="account-overview-inner-wrapper no-bottom-border">
                <div class="mt-20 mb-20">
                  <a href="{{ route('account.orders') }}">Back to all Orders</a>
                </div>
                <table class="order-table">
                  <thead>
                    <tr class="primary">
                      <th>Order Details -</th>
                      <th colspan="2">
                        <div>Order Number: {{ $order->identifier }}</div>
                        <div>Placed: {{ date('d/m/Y', strtotime($order->created_at)) }}</div>
                        <div>Status: {{ ucfirst($order->status) }}</div>
                      </th>
                    </tr>
                    <tr class="secondary">
                      <th>Product</th>
                      <th>Qty</th>
                      <th>Price</th>
                    </tr>
                  </thead>
                  <tbody>
@foreach ($order->line_items as $line_item)
                    <tr>
                      <td>
                        <div>{{ $line_item->product->name }}</div>
@if ($line_item->addons || $line_item->field_id || $line_item->remove_clover)
                        <ul class="mb-20">
@foreach ($line_item->addons as $addon)
                          <li>
                            Addon: {{ $addon->addon->name }}<br>
                            {{ $addon->quantity_text }}
                          </li>
@endforeach
@if ($line_item->remove_clover)
                          <li>Remove Clover</li>
@endif
@if ($line_item->field_id)
                          <li>Field: {{ $line_item->field->name }}</li>
@endif
                        </ul>
                        <div class="product-bag-size-hint">You require {{ ($costResults[$line_item->id]['quantity'] * 1) }} kg and we will supply you {{ ($costResults[$line_item->id]['rounded_quantity'] * 1) }} kg.<br>This is due to our product being supplied in multiples of {{ ($line_item->product->multiple_size * 1) }} {{ $line_item->product->multiple_unit }}{{ $line_item->product->multiple_unit !== "kg" ? " packs" : "" }}.</div>
@endif
                      </td>
                      <td>
                        {{ ($line_item->quantity * 1) }} {{ ucfirst($line_item->unit) }}<br>
                        ({{ ($costResults[$line_item->id]['rounded_quantity'] * 1) }} Kg)
                      </td>
                      <td>£{{ number_format($line_item->total, 2) }}</td>
                    </tr>
@endforeach
                  </tbody>
                  <tfoot>
                    <tr>
                      <th>Sub Total:</th>
                      <td colspan="2" class="italic">£{{ $order->sub_total }}</td>
                    </tr>
                    <tr>
                      <th>Delivery Charge:</th>
                      <td colspan="2" class="italic">{{ $order->delivery_total === '0.00' ? 'Free' : '£' . $order->delivery_total }}</td>
                    </tr>
                    <tr>
                      <th>VAT Total:</th>
                      <td colspan="2" class="italic">£{{ $order->vat_total }}</td>
                    </tr>
                    <tr>
                      <th>Total:</th>
                      <td colspan="2">£{{ $order->total }}</td>
                    </tr>
                    <tr class="payments">
                      <td colspan="3">
                        <table>
                          <tr>
                            <th>Payment Method</th>
                          </tr>
                          <tr>
                            <td>{{ $order->payment_intent ? 'Credit Card' : 'Invoicing' }}</td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="account-mobile">
          <a href="{{ route('account.orders') }}" class="account-back-link">&lt; Back</a>
          <div class="account-heading-wrapper">
            <h1 class="h1-2 mt-0 mb-0">Online Orders</h1>
          </div>
          <div class="account-order-mobile">
            <table class="order-table">
              <thead>
                <tr class="primary">
                  <th>Order Details -</th>
                  <th colspan="2">
                    <div>Order Number: {{ str_pad($order->id, 5, 0, STR_PAD_LEFT) }}</div>
                    <div>Placed: {{ date('d/m/Y', strtotime($order->created_at)) }}</div>
                    <div>Status: {{ ucfirst($order->status) }}</div>
                  </th>
                </tr>
                <tr class="secondary">
                  <th>Product</th>
                  <th>Qty</th>
                  <th>Price</th>
                </tr>
              </thead>
              <tbody>
@foreach ($order->line_items as $line_item)
                <tr>
                  <td>
                    <div>{{ $line_item->product->name }}</div>
@if (count($line_item->addons) > 0)
                    <ul>
@foreach ($line_item->addons as $addon)
                      <li>{{ $addon->addon->name }}</li>
@endforeach
                    </ul>
@endif
                  </td>
                  <td>{{ $line_item->quantity }}</td>
                  <td>£{{ number_format(($line_item->unit_cost * $line_item->quantity), 2) }}</td>
                </tr>
@endforeach
              </tbody>
              <tfoot>
                <tr>
                  <th>Delivery Charge:</th>
                  <td colspan="2" class="italic">{{ $order->delivery_total === '0.00' ? 'Free' : $order->delivery_total }}</td>
                </tr>
                <tr>
                  <th>Total:</th>
                  <td colspan="2">£{{ $order->total }}</td>
                </tr>
                <tr class="payments">
                  <td colspan="3">
                    <table>
                      <tr>
                        <th>Payment Method</th>
                      </tr>
                      <tr>
                        <td>{{ $order->payment_intent ? 'Credit Card' : 'Invoicing' }}</td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
        <div class="account-faq-wrapper">
          <div class="account-faq-inner-wrapper">
            <h3 class="text-center mt-0 mb-60">Frequently Asked Questions</h3>
            <div class="orange-title mb-20">Orders &amp; Delivery</div>
            <div class="collapses">
              <div class="collapse">
                <div data-w-id="389e7e6a-09dd-909f-b667-6ceeab760cd2" class="collapse-header alt">
                  <div>Where do you deliver?</div><img src="{{ url('images/down-arrow.svg') }}" loading="lazy" style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="collapse-arrow">
                </div>
                <div style="display:none" class="collapse-body">
                  <p class="pb-20 mb-0">Scotland, England & Wales.</p>
                  <p class="pb-20 mb-0">Unfortunately, at this time we are unable to deliver to Northern Ireland or Republic of Ireland due to import restrictions. Please contact us for local distributors.</p>
                </div>
              </div>
              <div class="collapse">
                <div data-w-id="389e7e6a-09dd-909f-b667-6ceeab760cda" class="collapse-header alt">
                  <div>How do I track my order?</div><img src="{{ url('images/down-arrow.svg') }}" loading="lazy" style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="collapse-arrow">
                </div>
                <div style="display:none" class="collapse-body">
                  <p class="pb-20 mb-0">You will get a confirmation text from the courier to track your order. If you require any further information, call the office 01368 840655</p>
                </div>
              </div>
              <div class="collapse">
                <div data-w-id="389e7e6a-09dd-909f-b667-6ceeab760ce2" class="collapse-header alt">
                  <div>How long do I have to return an order?</div><img src="{{ url('images/down-arrow.svg') }}" loading="lazy" style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="collapse-arrow">
                </div>
                <div style="display:none" class="collapse-body">
                  <p class="pb-20 mb-0">We do not normally take returns, please see our terms & conditions for more detail.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection