@extends('layouts.main')

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

@section('content')
<div class="section transparent basket">
  <div class="wide-container">
    <div class="sheet sign-in basket">
      <div class="text-center text-left-md">
        <h1 class="h1-2 mt-0 mb-20">Shopping Basket</h1>
      </div>
      <div class="basket-desktop-wrapper">
        @if (cookieService()->hasProducts())
        <div class="basket-head w-row">
          <div class="w-col w-col-4">
            <div>Product</div>
          </div>
          <div class="w-col w-col-1">
            <div>Unit</div>
          </div>
          <div class="w-col w-col-1">
            <div>Price/Unit</div>
          </div>
          <div class="w-col w-col-2">
            <div>Quantity</div>
          </div>
          <div class="w-col w-col-1">
            <div>VAT</div>
          </div>
          <div class="w-col w-col-2">
            <div>Total</div>
          </div>
          <div class="w-col w-col-1"></div>
        </div>
        <div class="basket-rows">
          <div class="basket-loader-wrapper" id="basket-loader">
            <div class="basket-loader"></div>
          </div>
          @foreach (cookieService()->getProducts() as $key => $product)
          <form name="product-form-{{ $key }}" class="product-form">
            @csrf

            <input type="hidden" name="key" value="{{ $key }}">
            <input type="hidden" name="quantity" id="quantity-{{ $key }}" value="{{ $product['quantity'] }}">
            <div class="basket-row-wrapper">
              <div class="basket-row w-row">
                <div class="w-col w-col-4">
                  <div>{{ $product['name'] }}</div>
                  @if ($product['attributes']['mixture_contains_clover'] && $product['attributes']['remove_clover'] ===
                  true)
                  <div class="light--text">Remove Clover from Mixture</div>
                  @endif
                  @if (!empty($product['addons']))
                  <ul role="list" class="basket-list w-list">
                    @foreach ($product['addons'] as $addon)
                    <li>
                      <div>Add On: {{ $addon['name'] }}</div>
                      <div><i id="addon-quantity-text-{{ $key }}-{{ $addon['id'] }}">{{ $addon['quantity_text'] }}</i>
                      </div>
                    </li>
                    @endforeach
                  </ul>
                  @endif
                  <div class="mb-0 mt-20 w-form">
                    <div class="basket-field-form">
                      <div class="basket-plus-button">+</div><input type="text" class="text-field _3 w-input"
                        name="field_name" placeholder="Enter your field name here for future reference" id="field_name"
                        value="{{ $product['attributes']['field_name'] }}" onchange="updateProduct({{ $key }})">
                    </div>
                  </div>
                </div>
                <div class="w-col w-col-1">
                  @switch($product['unit'])
                  @case('ac')
                  <div>Acres</div>
                  @break
                  @case('ha')
                  <div>Hectares</div>
                  @break
                  @case('kg')
                  <div>Kgs</div>
                  @break
                  @endswitch
                </div>
                <div class="w-col w-col-1">
                  <div>£{{ number_format($product['unit_cost'], 2) }}</div>
                  @if (!empty($product['addons']))
                  <div class="mt-10">
                    @foreach ($product['addons'] as $addon)
                    <div style="margin-bottom: 24px;">£{{ number_format($addon['unit_cost'], 2) }}</div>
                    @endforeach
                  </div>
                  @endif
                  @php
                  $multipleSize = $product['unit'] === 'kg' ? $product['multiple_size'] : 1;
                  @endphp
                </div>
                <div class="basket-quantity-column w-col w-col-2">
                  <button type="button" class="basket-quantity-changer"
                    onclick="incrementer({{ $key }}, {{ $multipleSize }}, false)">-</button>
                  <div class="basket-quantity" id="quantity-text-{{ $key }}">{{ $product['quantity'] }}</div>
                  <button type="button" class="basket-quantity-changer"
                    onclick="incrementer({{ $key }}, {{ $multipleSize }})">+</button>
                </div>
                <div class="w-col w-col-1">
                  <div>£<span id="product-vat-{{ $key }}">{{ number_format($product['vat_total'], 2) }}</span></div>
                </div>
                <div class="w-col w-col-2">
                  <div>£<span id="product-total-{{ $key }}">{{ number_format($product['total'], 2) }}</span></div>
                </div>
                <div class="basket-remove-column w-col w-col-1">
                  <div class="basket-remove" onclick="removeProduct({{ $key }})"><img
                      src="{{ url('images/close-icon.svg') }}" loading="lazy" width="7" height="7" alt=""
                      class="basket-remove-icon"></div>
                </div>
              </div>
            </div>
          </form>
          @endforeach
        </div>
        @else
        <div class="text-center">
          <p>Your Basket is Empty</p>
          <a href="{{ route('products') }}" class="button w-button mt-10">Continue Shopping</a>
        </div>
        @endif
      </div>
      <div class="basket-mobile-wrapper">
        @if (cookieService()->hasProducts())
        <div class="basket-heading">Products</div>
        @foreach (cookieService()->getProducts() as $key => $product)
        <div class="basket-row-mobile">
          <div class="basket-mobile-title-column">
            <div class="basket-product-name">{{ $product['name'] }}</div>
            @if ($product['attributes']['mixture_contains_clover'] && $product['attributes']['remove_clover'] === true)
            <div class="light--text">Remove Clover from Mixture</div>
            @endif
            <ul role="list" class="basket-list w-list">
              @if (!empty($product['addons']))
              @foreach ($product['addons'] as $addon)
              <li>
                <div>Add On: {{ $addon['name'] }} <strong>£{{ number_format($addon['unit_cost'], 2) }}</strong></div>
                <div><i id="addon-quantity-text-mobile-{{ $key }}-{{ $addon['id'] }}">{{ $addon['quantity_text'] }}</i>
                </div>
              </li>
              @endforeach
              @endif
              @php
              $unit = $product['unit'] === 'ac' ? 'Acres' : ($product['unit'] === 'kg' ? 'Kgs' : 'Hectares');
              $multipleSize = $product['unit'] === 'kg' ? $product['multiple_size'] : 1;
              @endphp
              <li>Unit: {{ $unit }}</li>
              <li>Price/Unit: £{{ number_format($product['unit_cost'], 2) }}</li>
            </ul>
          </div>
          <div class="basket-mobile-quantity-column">
            <div class="basket-quantity-changer" onclick="incrementer({{ $key }}, {{ $multipleSize }}, false)">-</div>
            <div class="basket-quantity" id="quantity-text-mobile-{{ $key }}">{{ $product['quantity'] }}</div>
            <div class="basket-quantity-changer" onclick="incrementer({{ $key }}, {{ $multipleSize }})">+</div>
          </div>
          <div>
            <div class="basket-remove" onclick="removeProduct({{ $key }})"><img src="{{ url('images/close-icon.svg') }}"
                loading="lazy" width="7" height="7" alt="" class="basket-remove-icon"></div>
          </div>
        </div>
        @endforeach
        @else
        <div class="text-center">
          <p>Your Basket is Empty</p>
          <a href="{{ route('products') }}" class="button w-button mt-10">Continue Shopping</a>
        </div>
        @endif
      </div>
      @if (cookieService()->hasProducts())
      <div class="basket-footer">
        <div class="basket-footer-left">
          <h3 class="h3-alt mt-0 mb-30">Delivery Info</h3>
          <p class="mb-20">Same day dispatch for orders placed before 12pm (subject to stock; excludes Highlands and
            Islands). Please note that delays may occur during busy periods.</p>
          <p class="mb-20"><strong>Mainland only: free delivery on all orders over £100. Orders less than £100: £10 +
              VAT</strong></p>

          <p class="mb-20">ISLANDS ONLY - price includes delivery to mainland postcodes only. </p>
          <p><strong> Please contact us to specify your preferred carrier for delivery to your postcode. The second leg
              of delivery will be charged to you by the carrier.</strong></p>
          <p><strong>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.</strong></p>



        </div>
        <div class="basket-footer-right">
          <h2 class="mt-0 mb-30">Basket Totals</h2>
          <div class="basket-price-row w-clearfix">Goods Total <span class="basket-price">£<span id="basket-subtotal">{{
                cookieService()->getSubtotalText() }}</span></span></div>
          <div class="basket-price-row w-clearfix">Delivery Total <span class="basket-price">£<span
                id="basket-delivery">{{ cookieService()->getShippingText() }}</span></span></div>
          <div class="basket-price-row w-clearfix">VAT Total <span class="basket-price">£<span id="basket-vat">{{
                cookieService()->getVatText() }}</span></span></div>
          <div class="divider _2 mt-20 mb-20"></div>
          <div class="basket-price-row total w-clearfix">Order Total <span class="basket-price total">£<span
                id="basket-total">{{ cookieService()->getTotalText() }}</span></span></div>
          <div class="text-right">
            <a href="{{ route('checkout') }}" class="button w-button">Go To Checkout</a>
          </div>
        </div>
      </div>
      @endif
    </div>
  </div>
</div>
@endsection

@section('custom_scripts')
<script>
  function incrementer(key, incrementSize, addition = true) {
  let quantity = parseFloat($("input#quantity-" + key).val());

  if (addition) {
    quantity = (quantity + parseFloat(incrementSize));
  } else if (quantity > incrementSize) {
    quantity = (quantity - parseFloat(incrementSize));
  }

  if (Number(quantity) === quantity && quantity % 1 !== 0) {
    quantity = quantity.toFixed(1);
  }

  $("input#quantity-" + key).val(quantity);
  $("#quantity-text-" + key).text(quantity);
  $("#quantity-text-mobile-" + key).text(quantity);

  updateProduct(key);
}

function removeProduct(key) {
  $("input#quantity-" + key).val(0);
  $("#quantity-text-" + key).text("0");
  $("#quantity-text-mobile-" + key).text("0");

  updateProduct(key);
}

function updateProduct(key) {
  const formData = $('form[name="product-form-' + key + '"]').serializeArray();
  const data = {};

  formData.forEach((field) => {
    data[field.name] = field.value;
  });

  $("#basket-loader").addClass("show");

  $.ajax(
    {
      url: "{{ route('update-basket') }}",
      type: "POST",
      data,
      success: (response) => {
        $("#product-vat-" + key).text(response.product.vat_total);
        $("#product-total-" + key).text(response.product.total);
        $("#basket-subtotal").text(response.subtotal);
        $("#basket-vat").text(response.vat);
        $("#basket-delivery").text(response.delivery);
        $("#basket-total").text(response.total);
        $("#basket-count").text(response.count);

        response.product.addons.forEach((addon) => {
          $("#addon-quantity-text-" + key + "-" + addon.id).text(addon.quantity_text);
          $("#addon-quantity-text-mobile-" + key + "-" + addon.id).text(addon.quantity_text);
        });

        if ((response.product.quantity > 0) === false || response.count == 0) {
          location.reload();
        } else {
          $("#basket-loader").removeClass("show");
        }
      }
    }
  );
}
</script>
@endsection