@extends('layouts.main')

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

@section('content')
  <section class="section light-green">
    <div class="container text-center mixture">
      <h1 class="alt-h1">Mixture Selector Tool</h1>
      <div>Use our seed finder tool to find the right seed or mix for you.</div>
      <div class="mixture-select-icon-wrapper"><img src="{{ url('images/mixture-select-icon.svg') }}" loading="lazy" alt="" class="mixture-select-icon"></div>
    </div>
  </section>
  <section class="section">
    <div class="wide-container">
      <div class="text-center">
@if ($question)
        <h2 class="h1-2">Select the options that most apply to you:</h2>
        <div id="follow-up-questions">
          <div id="question-{{ $question->id }}">
            <div class="header-wrapper search">
              <div class="header-line"></div>
              <div class="header-text-wrapper wide">
                <h3 class="header-text question">{{ $question->title }}</h3>
              </div>
              <div class="header-line"></div>
            </div>
            <div class="search-buttons-row">
@foreach ($question->answers as $answer)
              <a href="#" class="button quick-link search w-button answer" data-answer="{{ $answer->id }}" data-question="{{ $question->id }}" data-next-question="{{ $answer->next_question_id }}">{{ $answer->title }}</a>
@endforeach
            </div>
          </div>
        </div>
@else
        <h2 class="h1-2">Please select a region to continue</h2>
@endif
      </div>
      <div class="castle-mixtures" id="product-list"></div>
    </div>
  </section>
@endsection

@section('custom_scripts')
<script>
  $('body').on('click', 'a.answer', function (e) {
    e.preventDefault();

    const questionId = $(this).data('question');
    $('#question-' + questionId).nextAll().remove();

    $(this).addClass('orange').siblings().removeClass('orange');
    $('#product-list').empty();
    $('.product-list-title').remove();

    if ($(this).data('next-question')) {
      const nextQuestionId = parseInt($(this).data('next-question'));
      showNextQuestion(nextQuestionId, questionId);
    } else {
      const answerId = $(this).data('answer');
      showResults(answerId, questionId);
    }
  });

  function showNextQuestion(nextQuestionId, questionId) {
    $('<div />')
      .addClass('header-line')
      .addClass('loader')
      .appendTo('#follow-up-questions');

    $.ajax({
      url: "{{ route('seed-search.fetch') }}",
      type: "POST",
      data: {
        "_token": "{{ csrf_token() }}",
        "next_question_id": nextQuestionId
      },
      success: (response) => {
        $('#question-' + questionId).nextAll().remove();

        const question = response.question;

        const questionWrapper = $('<div />')
          .attr('id', 'question-' + question.id)
          .appendTo('#follow-up-questions');

        const headerWrapper = $('<div />')
          .addClass('header-wrapper')
          .addClass('search')
          .appendTo(questionWrapper);
        const headerLine1 = $('<div />')
          .addClass('header-line')
          .appendTo(headerWrapper);
        const headerTextWrapper = $('<div />')
          .addClass('header-text-wrapper')
          .addClass('wide')
          .appendTo(headerWrapper);
        const headerText = $('<h3 />')
          .html(question.title)
          .addClass('header-text')
          .addClass('question')
          .appendTo(headerTextWrapper);
        const headerLine2 = $('<div />')
          .addClass('header-line')
          .appendTo(headerWrapper);

        const buttonsRow = $('<div />')
          .addClass('search-buttons-row')
          .appendTo(questionWrapper);

        $.each(question.answers, (index, answer) => {
          $('<a />').html(answer.title)
            .attr('href', '#')
            .addClass('button')
            .addClass('quick-link')
            .addClass('search')
            .addClass('w-button')
            .addClass('answer')
            .attr('data-answer', answer.id)
            .attr('data-question', nextQuestionId)
            .attr('data-next-question', answer.next_question_id)
            .appendTo(buttonsRow);
        });
      }
    });
  }

  function showResults(answerId, questionId) {
    $('<div />')
      .addClass('header-line')
      .addClass('loader')
      .appendTo('#follow-up-questions');

    $.ajax({
      url: "{{ route('seed-search.fetch') }}",
      type: "POST",
      data: {
        "_token": "{{ csrf_token() }}",
        "answer_id": answerId
      },
      success: (response) => {
        $('#question-' + questionId).nextAll().remove();

        const title = $('<h2 />')
          .html('Based on your selections, we recommend using...')
          .addClass('product-list-title')
          .addClass('alt-h1')
          .addClass('mt-80');
        $('#follow-up-questions').after(title);

        $.each(response.products, (index, product) => {
          const productWrapper = $('<div />')
            .addClass('castle-mixture-wrapper')
            .appendTo('#product-list');

          const productInnerWrapper = $('<div />')
            .addClass('castle-mixture')
            .appendTo(productWrapper);

          const productTop = $('<div />')
            .addClass('castle-mixture-top')
            .appendTo(productInnerWrapper);

          const productLink = $('<a />')
            .attr('href', product.link)
            .addClass('castle-mixture-link')
            .addClass('w-inline-block')
            .appendTo(productInnerWrapper);

          const productLinkContent = $('<div />')
            .html('View Product')
            .appendTo(productLink);

          if (product.type === "straight") {
            const productTopLeft = $('<div />')
              .addClass('castle-mixture-top-left')
              .addClass('straight')
              .appendTo(productTop);
            const productThumbnailWrapper = $('<div />')
              .addClass('castle-mixture-thumbnail-wrapper')
              .appendTo(productTopLeft);
            const productThumbnail = $('<img />')
              .addClass('straight-thumbnail')
              .addClass('small')
              .attr('src', product.asset_urls.thumbnail)
              .appendTo(productThumbnailWrapper);
            const productContentWrapper = $('<div />')
              .addClass('castle-mixture-content-wrapper')
              .appendTo(productTopLeft);
            const productName = $('<h3 />')
              .addClass('castle-mixture-name')
              .appendTo(productContentWrapper);
            const productNameLink = $('<a />')
              .attr('href', product.link)
              .html(product.name)
              .appendTo(productName);
            const productDescription = $('<div />')
              .html(product.description)
              .appendTo(productContentWrapper);

            const productTopRight = $('<div />')
              .addClass('castle-mixture-top-right')
              .appendTo(productTop);

            $.each(product.details.details, (index, detail) => {
              const column = $('<div />')
                .addClass('castle-mixture-breakdown-column')
                .appendTo(productTopRight);

              const breakdownTop = $('<div />')
                .addClass('castle-mixture-breakdown-top')
                .addClass('straight')
                .appendTo(column);
              const breakdownTitle = $('<div />')
                .html(detail.title)
                .addClass('castle-mixture-breakdown-top-text')
                .addClass('straight')
                .appendTo(breakdownTop);

              const breakdownBottom = $('<div />')
                .addClass('castle-mixture-breakdown-bottom')
                .appendTo(column);
              const breakdownContent = $('<div />')
                .html(detail.content)
                .appendTo(breakdownBottom);
            });
          } else if (product.type === "flower") {
            const productTopLeft = $('<div />')
              .addClass('castle-mixture-top-left')
              .addClass('full-width')
              .appendTo(productTop);
            const productThumbnailWrapper = $('<div />')
              .addClass('castle-mixture-thumbnail-wrapper')
              .appendTo(productTopLeft);
            const productThumbnail = $('<img />')
              .addClass('castle-mixture-thumbnail')
              .attr('src', product.asset_urls.thumbnail)
              .appendTo(productThumbnailWrapper);
            const productContentWrapper = $('<div />')
              .addClass('castle-mixture-content-wrapper')
              .appendTo(productTopLeft);
            const productName = $('<h3 />')
              .addClass('castle-mixture-name')
              .appendTo(productContentWrapper);
            const productNameLink = $('<a />')
              .attr('href', product.link)
              .html(product.name)
              .appendTo(productName);
            const productDescription = $('<div />')
              .addClass('mb-10')
              .appendTo(productContentWrapper);
            const productSubTitle = $('<strong />')
              .html(product.sub_title)
              .appendTo(productDescription);

            if (product.benefits !== null && product.benefits.length > 0) {
              const productBenefits = $('<ul />')
                .attr('role', 'list')
                .appendTo(productContentWrapper);

              $.each(product.benefits, (index, benefit) => {
                $('<li />')
                  .html(benefit)
                  .appendTo(productBenefits);
              });
            }

            const productTopRight = $('<div />')
              .addClass('castle-mixture-top-right')
              .appendTo(productTop);

            const sowingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .addClass('last')
              .appendTo(productTopRight);
            const sowingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .addClass('wide')
              .appendTo(sowingColumn);
            const sowingColumnTopText = $('<div />')
              .html('Sowing Rate (g/m&#178;)')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(sowingColumnTop);
            const sowingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(sowingColumn);
            $('<div />')
              .html(product.details.sowing_rate_text != null ? product.details.sowing_rate_text : product.details.sowing_rate)
              .appendTo(sowingColumnBottom);
          } else if (product.type === "cover_mixture") {
            const productTopLeft = $('<div />')
              .addClass('castle-mixture-top-left')
              .addClass('straight')
              .appendTo(productTop);
            const productThumbnailWrapper = $('<div />')
              .addClass('castle-mixture-thumbnail-wrapper')
              .appendTo(productTopLeft);
            const productThumbnail = $('<img />')
              .addClass('straight-thumbnail')
              .addClass('small')
              .attr('src', product.asset_urls.thumbnail)
              .appendTo(productThumbnailWrapper);
            const productContentWrapper = $('<div />')
              .addClass('castle-mixture-content-wrapper')
              .appendTo(productTopLeft);
            const productName = $('<h3 />')
              .addClass('castle-mixture-name')
              .appendTo(productContentWrapper);
            const productNameLink = $('<a />')
              .attr('href', product.link)
              .html(product.name)
              .appendTo(productName);
            const productDescription = $('<div />')
              .addClass('mb-10')
              .appendTo(productContentWrapper);
            const productSubTitle = $('<strong />')
              .html(product.sub_title)
              .appendTo(productDescription);

            if (product.benefits !== null && product.benefits.length > 0) {
              const productBenefits = $('<ul />')
                .attr('role', 'list')
                .appendTo(productContentWrapper);

              $.each(product.benefits, (index, benefit) => {
                $('<li />')
                  .html(benefit)
                  .appendTo(productBenefits);
              });
            }

            const productTopRight = $('<div />')
              .addClass('castle-mixture-top-right')
              .appendTo(productTop);

            const durationColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const durationColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(durationColumn);
            const durationColumnTopText = $('<div />')
              .html('Duration')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(durationColumnTop);
            const durationColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(durationColumn);
            const durationColumnBottomText = $('<div />')
              .html(product.details.duration != '1' ? ' years' : ' year')
              .addClass('castle-mixture-breakdown-years-text')
              .appendTo(durationColumnBottom);
            $('<span />')
              .html(product.details.duration)
              .addClass('castle-mixture-breakdown-1-2-text')
              .prependTo(durationColumnBottomText);

            const coverColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const coverColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(coverColumn);
            const coverColumnTopText = $('<div />')
              .html('Cover')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(coverColumnTop);
            const coverColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(coverColumn);
            if (product.details.cover === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(coverColumnBottom);
            }

            const winterColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const winterColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .addClass('wide')
              .appendTo(winterColumn);
            const winterColumnTopText = $('<div />')
              .html('Winter Food Source')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(winterColumnTop);
            const winterColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(winterColumn);
            if (product.details.winter_food_source === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(winterColumnBottom);
            }

            const sowingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .addClass('last')
              .appendTo(productTopRight);
            const sowingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(sowingColumn);
            const sowingColumnTopText = $('<div />')
              .html('Sowing Rate (Kg/Acre)')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(sowingColumnTop);
            const sowingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(sowingColumn);
            $('<div />')
              .html(product.details.sowing_rate_text != null ? product.details.sowing_rate_text : product.details.sowing_rate)
              .appendTo(sowingColumnBottom);
          } else if (product.type === "agri_enviro") {
            const productTopLeft = $('<div />')
              .addClass('castle-mixture-top-left')
              .addClass('straight')
              .appendTo(productTop);
            const productThumbnailWrapper = $('<div />')
              .addClass('castle-mixture-thumbnail-wrapper')
              .appendTo(productTopLeft);
            const productThumbnail = $('<img />')
              .addClass('straight-thumbnail')
              .addClass('small')
              .attr('src', product.asset_urls.thumbnail)
              .appendTo(productThumbnailWrapper);
            const productContentWrapper = $('<div />')
              .addClass('castle-mixture-content-wrapper')
              .appendTo(productTopLeft);
            const productName = $('<h3 />')
              .addClass('castle-mixture-name')
              .appendTo(productContentWrapper);
            const productNameLink = $('<a />')
              .attr('href', product.link)
              .html(product.name)
              .appendTo(productName);
            const productDescription = $('<div />')
              .addClass('mb-10')
              .appendTo(productContentWrapper);
            const productSubTitle = $('<strong />')
              .html(product.sub_title)
              .appendTo(productDescription);

            if (product.benefits !== null && product.benefits.length > 0) {
              const productBenefits = $('<ul />')
                .attr('role', 'list')
                .appendTo(productContentWrapper);

              $.each(product.benefits, (index, benefit) => {
                $('<li />')
                  .html(benefit)
                  .appendTo(productBenefits);
              });
            }

            const productTopRight = $('<div />')
              .addClass('castle-mixture-top-right')
              .appendTo(productTop);

            const durationColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const durationColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(durationColumn);
            const durationColumnTopText = $('<div />')
              .html('Duration')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(durationColumnTop);
            const durationColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(durationColumn);
            const durationColumnBottomText = $('<div />')
              .html(product.details.duration != '1' ? ' years' : ' year')
              .addClass('castle-mixture-breakdown-years-text')
              .appendTo(durationColumnBottom);
            $('<span />')
              .html(product.details.duration)
              .addClass('castle-mixture-breakdown-1-2-text')
              .prependTo(durationColumnBottomText);

            const grazingSuitabilityColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const grazingSuitabilityColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(grazingSuitabilityColumn);
            const grazingSuitabilityColumnTopText = $('<div />')
              .html('Grazing Suitability')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(grazingSuitabilityColumnTop);
            const grazingSuitabilityColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(grazingSuitabilityColumn);
            if (product.details.grazing_suitability === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(grazingSuitabilityColumnBottom);
            }

            const cuttingSuitabilityColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const cuttingSuitabilityColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(cuttingSuitabilityColumn);
            const cuttingSuitabilityColumnTopText = $('<div />')
              .html('Cutting Suitability')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(cuttingSuitabilityColumnTop);
            const cuttingSuitabilityColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(cuttingSuitabilityColumn);
            if (product.details.cutting_suitability === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(cuttingSuitabilityColumnBottom);
            }

            const sowingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .addClass('last')
              .appendTo(productTopRight);
            const sowingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(sowingColumn);
            const sowingColumnTopText = $('<div />')
              .html('Sowing Rate (Kg/Acre)')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(sowingColumnTop);
            const sowingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(sowingColumn);
            $('<div />')
              .html(product.details.sowing_rate_text != null ? product.details.sowing_rate_text : product.details.sowing_rate)
              .appendTo(sowingColumnBottom);
          } else if (product.type === "herb_legume") {
            const productTopLeft = $('<div />')
              .addClass('castle-mixture-top-left')
              .addClass('straight')
              .appendTo(productTop);
            const productThumbnailWrapper = $('<div />')
              .addClass('castle-mixture-thumbnail-wrapper')
              .appendTo(productTopLeft);
            const productThumbnail = $('<img />')
              .addClass('straight-thumbnail')
              .addClass('small')
              .attr('src', product.asset_urls.thumbnail)
              .appendTo(productThumbnailWrapper);
            const productContentWrapper = $('<div />')
              .addClass('castle-mixture-content-wrapper')
              .appendTo(productTopLeft);
            const productName = $('<h3 />')
              .addClass('castle-mixture-name')
              .appendTo(productContentWrapper);
            const productNameLink = $('<a />')
              .attr('href', product.link)
              .html(product.name)
              .appendTo(productName);
            const productDescription = $('<div />')
              .addClass('mb-10')
              .appendTo(productContentWrapper);
            const productSubTitle = $('<strong />')
              .html(product.sub_title)
              .appendTo(productDescription);

            if (product.benefits !== null && product.benefits.length > 0) {
              const productBenefits = $('<ul />')
                .attr('role', 'list')
                .appendTo(productContentWrapper);

              $.each(product.benefits, (index, benefit) => {
                $('<li />')
                  .html(benefit)
                  .appendTo(productBenefits);
              });
            }

            const productTopRight = $('<div />')
              .addClass('castle-mixture-top-right')
              .appendTo(productTop);

            const durationColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const durationColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(durationColumn);
            const durationColumnTopText = $('<div />')
              .html('Duration')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(durationColumnTop);
            const durationColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(durationColumn);
            const durationColumnBottomText = $('<div />')
              .html(product.details.duration != '1' ? ' years' : ' year')
              .addClass('castle-mixture-breakdown-years-text')
              .appendTo(durationColumnBottom);
            $('<span />')
              .html(product.details.duration)
              .addClass('castle-mixture-breakdown-1-2-text')
              .prependTo(durationColumnBottomText);

            const cuttingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const cuttingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(cuttingColumn);
            const cuttingColumnTopText = $('<div />')
              .html('Mainly Cutting')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(cuttingColumnTop);
            const cuttingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(cuttingColumn);
            if (product.details.mainly_cutting === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(cuttingColumnBottom);
            }

            const dualPurposeColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const dualPurposeColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .addClass('wide')
              .appendTo(dualPurposeColumn);
            const dualPurposeColumnTopText = $('<div />')
              .html('Dual Purpose (Mostly Cutting)')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(dualPurposeColumnTop);
            const dualPurposeColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(dualPurposeColumn);
            if (product.details.dual_purpose_mostly_cutting === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(dualPurposeColumnBottom);
            }

            const dualPurposeGrazingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const dualPurposeGrazingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .addClass('wide')
              .appendTo(dualPurposeGrazingColumn);
            const dualPurposeGrazingColumnTopText = $('<div />')
              .html('Dual Purpose (Mostly Grazing)')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(dualPurposeGrazingColumnTop);
            const dualPurposeGrazingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(dualPurposeGrazingColumn);
            if (product.details.dual_purpose_mostly_grazing === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(dualPurposeGrazingColumnBottom);
            }

            const extensiveGrazingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const extensiveGrazingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(extensiveGrazingColumn);
            const extensiveGrazingColumnTopText = $('<div />')
              .html('Mainly Grazing')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(extensiveGrazingColumnTop);
            const extensiveGrazingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(extensiveGrazingColumn);
            if (product.details.mainly_grazing === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(extensiveGrazingColumnBottom);
            }

            const sowingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .addClass('last')
              .appendTo(productTopRight);
            const sowingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(sowingColumn);
            const sowingColumnTopText = $('<div />')
              .html('Sowing Rate (Kg/Acre)')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(sowingColumnTop);
            const sowingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(sowingColumn);
            $('<div />')
              .html(product.details.sowing_rate_text != null ? product.details.sowing_rate_text : product.details.sowing_rate)
              .appendTo(sowingColumnBottom);
          } else {
            const productTopLeft = $('<div />')
              .addClass('castle-mixture-top-left')
              .appendTo(productTop);
            const productThumbnailWrapper = $('<div />')
              .addClass('castle-mixture-thumbnail-wrapper')
              .appendTo(productTopLeft);
            const productThumbnail = $('<img />')
              .addClass('castle-mixture-thumbnail')
              .attr('src', product.asset_urls.thumbnail)
              .appendTo(productThumbnailWrapper);
            const productContentWrapper = $('<div />')
              .addClass('castle-mixture-content-wrapper')
              .appendTo(productTopLeft);
            const productName = $('<h3 />')
              .addClass('castle-mixture-name')
              .appendTo(productContentWrapper);
            const productNameLink = $('<a />')
              .attr('href', product.link)
              .html(product.name)
              .appendTo(productName);
            const productDescription = $('<div />')
              .addClass('mb-10')
              .appendTo(productContentWrapper);
            const productSubTitle = $('<strong />')
              .html(product.sub_title)
              .appendTo(productDescription);

            if (product.benefits !== null && product.benefits.length > 0) {
              const productBenefits = $('<ul />')
                .attr('role', 'list')
                .appendTo(productContentWrapper);

              $.each(product.benefits, (index, benefit) => {
                $('<li />')
                  .html(benefit)
                  .appendTo(productBenefits);
              });
            }

            const productTopRight = $('<div />')
              .addClass('castle-mixture-top-right')
              .appendTo(productTop);

            const durationColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const durationColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(durationColumn);
            const durationColumnTopText = $('<div />')
              .html('Duration')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(durationColumnTop);
            const durationColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(durationColumn);
            const durationColumnBottomText = $('<div />')
              .html(' years')
              .addClass('castle-mixture-breakdown-years-text')
              .appendTo(durationColumnBottom);
            $('<span />')
              .html(product.details.duration)
              .addClass('castle-mixture-breakdown-1-2-text')
              .prependTo(durationColumnBottomText);

            const cuttingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const cuttingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(cuttingColumn);
            const cuttingColumnTopText = $('<div />')
              .html('Mainly Cutting')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(cuttingColumnTop);
            const cuttingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(cuttingColumn);
            if (product.details.mainly_cutting === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(cuttingColumnBottom);
            }

            const dualPurposeColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const dualPurposeColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .addClass('wide')
              .appendTo(dualPurposeColumn);
            const dualPurposeColumnTopText = $('<div />')
              .html('Dual Purpose (mostly cutting)')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(dualPurposeColumnTop);
            const dualPurposeColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(dualPurposeColumn);
            if (product.details.dual_purpose === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(dualPurposeColumnBottom);
            }

            const dualPurposeGrazingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const dualPurposeGrazingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .addClass('wide')
              .appendTo(dualPurposeGrazingColumn);
            const dualPurposeGrazingColumnTopText = $('<div />')
              .html('Dual Purpose (mostly grazing)')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(dualPurposeGrazingColumnTop);
            const dualPurposeGrazingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(dualPurposeGrazingColumn);
            if (product.details.intensive_grazing === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(dualPurposeGrazingColumnBottom);
            }

            const extensiveGrazingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .appendTo(productTopRight);
            const extensiveGrazingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .appendTo(extensiveGrazingColumn);
            const extensiveGrazingColumnTopText = $('<div />')
              .html('Mainly Grazing')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(extensiveGrazingColumnTop);
            const extensiveGrazingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(extensiveGrazingColumn);
            if (product.details.extensive_grazing === true){
              $('<img />')
                .attr('src', "{{ url('images/checkmark-icon.svg') }}")
                .addClass('castle-mixture-breakdown-check')
                .appendTo(extensiveGrazingColumnBottom);
            }

            const sowingColumn = $('<div />')
              .addClass('castle-mixture-breakdown-column')
              .addClass('last')
              .appendTo(productTopRight);
            const sowingColumnTop = $('<div />')
              .addClass('castle-mixture-breakdown-top')
              .addClass('medium')
              .appendTo(sowingColumn);
            const sowingColumnTopText = $('<div />')
              .html('Sowing Rate (Kg/Acre)')
              .addClass('castle-mixture-breakdown-top-text')
              .appendTo(sowingColumnTop);
            const sowingColumnBottom = $('<div />')
              .addClass('castle-mixture-breakdown-bottom')
              .appendTo(sowingColumn);
            $('<div />')
              .html(product.details.sowing_rate_text != null ? product.details.sowing_rate_text : product.details.sowing_rate)
              .appendTo(sowingColumnBottom);
          }
        });
      }
    });
  }
</script>
@endsection