@extends('layouts.main')

@section('page-id', '606db40c40297e88b441f090')

@php
$multipleSize = $product->multiple_size * 1;
@endphp

@section('content')
<section class="section peach transparent-mobile">
  <div class="wide-container">
    <div class="breadcrumbs">
      <a href="{{ route('products') }}" class="search-breadcrumb-link product">All Products</a> <span
        class="search-breadcrumb-divider">/</span>
      <a href="{{ route('products.category', ['parentCategory' => $parentCategory->slug]) }}"
        class="search-breadcrumb-link product">{{ $parentCategory->name }}</a> <span
        class="search-breadcrumb-divider">/</span>
      <a href="{{ route('products.category.child', ['parentCategory' => $parentCategory->slug, 'childCategory' => $childCategory->slug]) }}"
        class="search-breadcrumb-link product">{{ $childCategory->name }}</a> <span
        class="search-breadcrumb-divider">/</span> {{ $product->name }}
    </div>
    <div class="product-content-wrapper">
      <div class="product-main-content-columns w-row">
        <div class="product-content-left-column w-col w-col-4 w-col-stack">
          <div class="product-title-thumbnail-wrapper">
            <div class="product-title-wrapper">
              <h1 class="product-name">{{ $product->display_name ?? $product->name }}</h1>
              <div>{{ $product->sub_title }}</div>
              @if ($product->alternative)
              <div class="product-switch-wrapper">
                <div class="product-switch-inner-wrapper">
                  <div>Organic</div>
                  <div class="product-toggle">
                    <input type="checkbox" id="alternate-product" data-href="{{ $product->alternative->link }}"
                      @if($product->is_organic) checked="checked" @endif @if($product->alternative === null) disabled
                    @endif />
                    <label for="alternate-product">Toggle</label>
                  </div>
                </div>
              </div>
              @endif
            </div><img src="{{ $product->asset_urls->thumbnail }}" loading="lazy" alt=""
              class="product-thumbnail straight">
          </div>
          @if (count($product->species))
          <div class="product-learn-more-wrapper">
            <div class="header-wrapper">
              <div class="header-text-wrapper smaller">
                <div>Learn more</div>
              </div>
              <div class="header-line"></div>
            </div>
            <div class="product-learn-more">
              @foreach ($product->species as $species)
              <div class="product-learn-more-item"><img src="{{ url('images/learn-icon.svg') }}" loading="lazy" alt=""
                  class="product-learn-more-icon">
                <a href="{{ route('learn.species-guide.species', ['category' => $species->category->slug, 'species' => $species->slug]) }}"
                  class="product-learn-more-link">{{ $species->name }} - Species Guide</a>
              </div>
              @endforeach
            </div>
          </div>
          @endif
          <div class="product-need-more-info"><img src="{{ url('images/help-icon.svg') }}" loading="lazy" alt=""
              class="product-need-more-info-icon">
            <div>
              <div>Need Help?</div>
              <a href="tel:01368840655" class="product-need-more-info-link">01368 840 655</a>
            </div>
          </div>
        </div>
        <div class="product-content-right-column w-col w-col-8 w-col-stack">
          <div class="header-wrapper">
            <div class="header-text-wrapper smaller">
              <div>About</div>
            </div>
            <div class="header-line"></div>
          </div>
          <div class="product-description-wrapper">
            <p>{!! $product->formatted_description !!}</p>
          </div>
          @if($details->details)
          @if (array_key_exists('type', $details->details))
          <x-tables.details.hybrid-table :product="$product" :details="$details" />
          @else
          <x-tables.details.straight-table :product="$product" :details="$details" :totalTables="$totalTables" />
          @endif
          @endif
          <div class="product-options-wrapper">
            <h2 class="mt-0 mb-40">Product Options</h2>
            <p class="product-bag-size-hint after-title">This product is supplied in multiples of {{ $multipleSize }} {{
              $product->multiple_unit }}{{ $product->multiple_unit !== "kg" ? " packs" : "" }}</p>
            <div class="mb-0 w-form">
              <form action="{{ route('add-to-basket') }}" method="POST" class="track-form" data-track-type="event"
                data-type="add_to_cart" data-source="product_page" data-name="{{ $product->name }}"
                data-label="Add To Basket">
                @csrf

                <input type="hidden" name="productId" value="{{ $product->id }}">
                <div class="product-options-field-wrapper">
                  <div class="product-options-label">Select Unit:</div>
                  <div class="product-options-radio-button-row">
                    @if ($product->price_ac !== null)
                    <label class="product-options-radio-button-field w-radio">
                      <div
                        class="w-form-formradioinput w-form-formradioinput--inputType-custom product-options-radio-button w-radio-input w--redirected-checked">
                      </div><input type="radio" id="unitAc" name="unit" value="ac"
                        style="opacity:0;position:absolute;z-index:-1" checked="checked"><span
                        class="product-options-radio-button-label w-form-label">Ac</span>
                    </label>
                    @endif
                    @if ($product->price_ha !== null)
                    <label class="product-options-radio-button-field w-radio">
                      <div
                        class="w-form-formradioinput w-form-formradioinput--inputType-custom product-options-radio-button w-radio-input{{ ($product->price_ac === null && $product->price_kg === null) ? ' w--redirected-checked' : '' }}">
                      </div><input type="radio" id="unitHa" name="unit" value="ha"
                        style="opacity:0;position:absolute;z-index:-1" {!! ($product->price_ac === null &&
                      $product->price_kg === null) ? ' checked="checked"' : '' !!}><span
                        class="product-options-radio-button-label w-form-label">Ha</span>
                    </label>
                    @endif
                    @if ($product->price_kg !== null)
                    <label class="product-options-radio-button-field w-radio">
                      <div
                        class="w-form-formradioinput w-form-formradioinput--inputType-custom product-options-radio-button w-radio-input{{ $product->price_ac === null ? ' w--redirected-checked' : '' }}">
                      </div><input type="radio" id="unitKg" name="unit" value="kg"
                        style="opacity:0;position:absolute;z-index:-1" {!! $product->price_ac === null ? '
                      checked="checked"' : '' !!}><span
                        class="product-options-radio-button-label w-form-label">Kg</span>
                    </label>
                    @endif
                  </div>
                </div>
                <div class="product-options-field-wrapper">
                  <div class="product-options-label">Quantity:</div>
                  <div class="product-options-radio-button-row">
                    <input type="number" class="product-options-text-field w-input" maxlength="256" name="quantity"
                      id="quantity" value="{{ $product->price_ac === null ? $multipleSize : 1 }}"
                      min="{{ $product->price_ac === null ? $multipleSize : 1 }}"
                      step="{{ $product->price_ac === null ? $multipleSize : 1 }}" data-original="1"
                      data-original-kg="{{ $multipleSize }}">
                  </div>
                </div>
                <p class="product-bag-size-hint" id="product-bag-size-hint">You require <span
                    id="product-quantity-required">{{ $costs['quantity'] }}</span> {{ $product->multiple_unit }} and we
                  will supply you <span id="product-quantity-rounded">{{ $costs['rounded_quantity'] }}</span> {{
                  $product->multiple_unit }}</p>
                @if ($product->addons->isEmpty() === false)
                <div class="product-options-field-wrapper vertical">
                  <div class="product-options-label alt">Optional add-ons:</div>
                  <div>
                    @foreach ($product->addons as $addon)
                    @php
                    $addonKey = array_search($addon->id, array_column($costs['addon_details'], 'id'));
                    $addonDetails = $costs['addon_details'][$addonKey];
                    @endphp
                    <label class="w-checkbox product-options-checkbox-field">
                      <div class="w-checkbox-input w-checkbox-input--inputType-custom product-options-checkbox"></div>
                      <input type="checkbox" id="addon-{{ $addon->id }}" name="addons[]" value="{{ $addon->id }}"
                        style="opacity:0;position:absolute;z-index:-1">
                      <span class="w-form-label">{{ $addon->name }} (<select name="addon-size-{{ $addon->id }}"
                          id="addon-size-{{ $addon->id }}" disabled>
                          @if ($product->price_ac !== null)
                          <option value="1">{{ ($addon->kg_per_ac + 0) }}kg/Acre</option>
                          <option value="2">{{ ($addon->kg_per_ac + 0) * 2 }}kg/Acre</option>
                          <option value="3">{{ ($addon->kg_per_ac + 0) * 3 }}kg/Acre</option>
                        </select>) £<span id="addon-price-{{ $addon->id }}">{{
                          number_format($addonDetails['unit_price_kg'], 2) }}/Kg</span></span>
                      @else
                      <option value="1">{{ (number_format(($addonDetails['unit_size']), 2) + 0) }}kg</option>
                      <option value="2">{{ (number_format(($addonDetails['unit_size']), 2) + 0) * 2 }}kg</option>
                      <option value="3">{{ (number_format(($addonDetails['unit_size']), 2) + 0) * 3 }}kg</option>
                      </select>) £<span id="addon-price-{{ $addon->id }}">{{
                        number_format($addonDetails['unit_price_kg'], 2) }}/Kg</span></span>
                      @endif
                    </label>
                    @endforeach
                  </div>
                </div>
                @endif
                @if ($product->contains_clover)
                <div class="product-options-field-wrapper vertical">
                  <div class="product-options-label alt">Clover Options:</div>
                  <div>
                    <label class="w-checkbox product-options-checkbox-field">
                      <div class="w-checkbox-input w-checkbox-input--inputType-custom product-options-checkbox"></div>
                      <input type="checkbox" id="remove-clover" name="remove-clover"
                        style="opacity:0;position:absolute;z-index:-1">
                      <span class="w-form-label">Remove Clover -£<span id="clover-price">{{
                          $costs['clover_discount_per_unit'] }}/{{ $product->price_ac !== null ? 'Acre' : 'Kg'
                          }}</span></span>
                    </label>
                  </div>
                </div>
                @endif
                <div class="product-options-price-row top">
                  <div class="product-options-price-subtotal">
                    <div class="product-bag-size-hint mt-0">Please note these products are supplied in multiples of {{
                      $multipleSize }} {{ $product->multiple_unit }}{{ $product->multiple_unit !== "kg" ? " packs" : "s"
                      }} & your order has been rounded accordingly.</div>
                  </div>
                </div>
                <div class="product-options-price-row top">
                  <div class="product-options-price-subtotal">
                    <div>Subtotal</div>
                    <div class="product-options-price subtotal">£<span id="price-subtotal">{{ $costs['sub_total']
                        }}</span></div>
                  </div>
                  <div class="product-options-price-subtotal">
                    <div>VAT</div>
                    <div class="product-options-price subtotal">£<span id="price-vat">{{ $costs['vat_total'] }}</span>
                    </div>
                  </div>
                </div>
                <div class="product-options-price-row">
                  <div>Total</div>
                  <div class="product-options-price">£<span id="price-total">{{ $costs['total'] }}</span></div>
                </div>
                @if ($product->is_out_of_stock)
                <div>
                  <h3 class="mt-0 mb-0">Out of Stock</h3>
                  @if ($product->out_of_stock_message)
                  <p class="mt-10 mb-0">{{ $product->out_of_stock_message }}</p>
                  @endif
                </div>
                @else
                <div class="product-options-footer">
                  <div class="product-options-footer-small-print">*Subject to availability</div><input type="submit"
                    value="Add To Basket" class="button basket w-button">
                </div>
                @endif
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    @if ($product->testimonial)
    <div class="product-header">
      <div class="product-header-columns w-row">
        <div class="product-header-content-column w-col w-col-4 w-col-medium-6">
          <div>
            <h2 class="h1-2 mt-0 mb-30">{{ $product->testimonial->title }}</h2>
            <p class="mb-40">{{ $product->testimonial->body }}</p>
          </div>
          <p class="mb-0">- {{ $product->testimonial->by }}</p>
        </div>
        @if ($product->testimonial->image)
        <div class="product-header-image-wrapper w-col w-col-8 w-col-medium-6"
          style="background-image: url({{ $product->testimonial->asset_urls->image }})"></div>
        @else
        <div class="product-header-image-wrapper w-col w-col-8 w-col-medium-6"></div>
        @endif
      </div>
    </div>
    @endif
    <div class="product-mobile-content">
      @if (count($product->species))
      <div class="product-learn-more-wrapper mobile">
        <div class="header-wrapper">
          <div class="header-text-wrapper smaller">
            <div>Learn more</div>
          </div>
          <div class="header-line"></div>
        </div>
        <div class="product-learn-more">
          @foreach ($product->species as $species)
          <div class="product-learn-more-item"><img src="{{ url('images/learn-icon.svg') }}" loading="lazy" alt=""
              class="product-learn-more-icon">
            <a href="{{ route('learn.species-guide.species', ['category' => $species->category->slug, 'species' => $species->slug]) }}"
              class="product-learn-more-link">{{ $species->name }} - Species Guide</a>
          </div>
          @endforeach
        </div>
      </div>
      @endif
      <div class="product-need-more-info mobile"><img src="{{ url('images/help-icon.svg') }}"
          class="product-need-more-info-icon">
        <div>
          <div>NNeed Help?</div>
          <a href="tel:01368840655" class="product-need-more-info-link">01368 840 655</a>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@section('custom_scripts')
<script>
  $('input:radio[name="unit"]').change(() => {
  if (getUnit() !== "kg") {
    $("#quantity").attr("step", 1);
    $("#quantity").attr("min", 1);
    $("#quantity").val($("#quantity").attr("data-original"));
  } else {
    $("#quantity").attr("step", {{ $multipleSize }});
    $("#quantity").attr("min", {{ $multipleSize }});
    $("#quantity").val($("#quantity").attr("data-original-kg"));
  }
  updatePricing();
});
$('#quantity').change(() => {
  if (getUnit() !== "kg") {
    $("#quantity").attr("data-original", $("#quantity").val());
  } else {
    $("#quantity").attr("value", (Math.ceil($("#quantity").val() / {{ $multipleSize }}) * {{ $multipleSize }}));
    $("#quantity").attr("data-original-kg", $("#quantity").val());
  }
  updatePricing();
});
$('input:checkbox[name="addons[]"]').click(() => updatePricing());
$('input:checkbox[name="remove-clover"]').click(() => updatePricing());
@if ($product->addons->isEmpty() === false)
@foreach ($product->addons as $addon)
$('#addon-size-{{ $addon->id }}').change(() => updatePricing());
@endforeach
@endif

function getUnit() {
  return $('input:radio[name="unit"]:checked').val();
}

function updatePricing() {
  const unit = $('input:radio[name="unit"]:checked').val();
  const quantity = $('#quantity').val();
  const selectedAddons = document.getElementsByName('addons[]');

  let addons = [];
  for (let i = 0; i < selectedAddons.length; i++) {
    if (selectedAddons[i].checked) {
      addons.push({
        id: selectedAddons[i].value,
        multiplier: $('#addon-size-' + selectedAddons[i].value).val()
      });
      $('#addon-size-' + selectedAddons[i].value).prop('disabled', false);
    } else {
      $('#addon-size-' + selectedAddons[i].value).prop('disabled', true);
    }
  }

  let removeClover = 0;

  if ($("#remove-clover").length) {
    const removeCloverCheckbox = document.getElementById('remove-clover');
    removeClover = removeCloverCheckbox.checked ? 1 : 0;
  }

  $.ajax({
    url: "{{ route('fetch-product-cost') }}",
    type: "POST",
    data: {
      "_token": "{{ csrf_token() }}",
      "product_id": {{ $product->id }},
      "unit": unit,
      "quantity": quantity,
      "addons": addons,
      "remove_clover": removeClover
    },
    success: (response) => {
      $("#price-subtotal").text(response.sub_total);
      $("#price-vat").text(response.vat_total);
      $("#price-total").text(response.total);
      $("#clover-price").text(response.clover_discount_per_unit + "/" + unitFullName(unit));
      $("#product-quantity-required").text((response.quantity * 1));
      $("#product-quantity-rounded").text((response.rounded_quantity * 1));

      for (let i = 0; i < response.addon_details.length; i++) {
        const addonSizeValue = $("#addon-size-" + response.addon_details[i]['id']).val();
        const addonUnitPrice = response.addon_details[i]['unit_price'] * addonSizeValue;

        $("#addon-price-" + response.addon_details[i]['id']).text(parseFloat(addonUnitPrice).toFixed(2) + "/Kg");

        let sizeText = response.addon_details[i]['unit_size'] + "kg";

        const size1 = response.addon_details[i]['unit_size'] + 0;
        let size1Text = parseFloat(size1).toFixed(2) + "kg";

        const size2 = size1 * 2;
        let size2Text = parseFloat(size2).toFixed(2) + "kg";

        const size3 = size1 * 3;
        let size3Text = parseFloat(size3).toFixed(2) + "kg";

        if (unit !== "kg") {
          size1Text += "/" + unitFullName(unit);
          size2Text += "/" + unitFullName(unit);
          size3Text += "/" + unitFullName(unit);
        }

        $("#addon-size-" + response.addon_details[i]['id']).empty();
        $("<option />").val(1).text(size1Text).appendTo("#addon-size-" + response.addon_details[i]['id']);
        $("<option />").val(2).text(size2Text).appendTo("#addon-size-" + response.addon_details[i]['id']);
        $("<option />").val(3).text(size3Text).appendTo("#addon-size-" + response.addon_details[i]['id']);
        $("#addon-size-" + response.addon_details[i]['id']).val(addonSizeValue)
      }
    }
  });
}

function unitFullName(unit) {
  if (unit === "ac") {
    return "Acre";
  } else if (unit === "ha") {
    return "Hectare";
  }

  return "Kg";
}

$(document).ready(() => updatePricing());
</script>
<script>
  window.productId = {{ $product->id }};
  window.productName = "{{ $product->name }}";
</script>
@endsection