@extends('front.include.app')
@section('content')
    <section class="logo-sec">
        <figure class="custom-logo">
            <img src="{{ asset('front/images/custom-top.png') }}" class="img-fluid" alt="">
        </figure>
    </section>

    <div class="inner-ban">
        <img src="{{ asset('front/images/new-imag.jpg') }}" class="img-fluid" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Blood<span class="banner-span">line.HUnt.</span></h2>
                        <h4>Custom Seed Shop</h4>
                        <h5>Food Plot Seed Blends Reimagined</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="blend-sec custm-buildnew">
        <div class="container">
            <div class="row lin-rght">
                <div class="col-md-6">
                    <div class="build-main scratch-blend">
                        {{--                        <h3>build your blend from scratch ?</h3> --}}
                        <span class="required">required*</span>
                        <input type="text" name="custom_seed_name" required class="form-control mb-4 custom-seed-name"
                            placeholder="Name Your Seed Blend">
                        <p class="custom_seed_text">when using our seed blends, seed weight are for 1/2 Acre Planting</p>
                        <div class="row no-gutters" id="selected-seeds-container">

                        </div>
                        <div class="row text-center" id="firstAndSecondCols">
                            <div class="col-md-3 p-0 first">

                            </div>
                            <div class="col-md-6  p-0">
                                <div class="build-center">
                                    <figure class="build-imag">
                                        <img src="{{ asset('front/images/build-center.png') }}" class="img-fluid"
                                            alt="">
                                    </figure>
                                    <div class="progress-main">
                                        <span>0%</span>
                                        <div class="progress">
                                            <div class="progress-done" id="seed-progress-bar" data-done="70"
                                                style="width: 70%; opacity: 1;">
                                            </div>

                                        </div>
                                        <span>100%</span>
                                    </div>
                                    <div class="progress-content">
                                        <h3>Maximum weight of 45 pounds</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 p-0 second">

                            </div>
{{--                            <div class="col-md-12">--}}
{{--                                <a href="javascript:;" class="themeBtn">let’s go</a>--}}
{{--                            </div>--}}
                        </div>
                        <div id="selected-seeds-container-mobile-wrap">
                            {{--                            <div class="row no-gutters" id="selected-seeds-container-mobile"> --}}
                            <div class="row no-gutters-mobile" id="selected-seeds-container-mobile">
                                {{--   <div class="col-4">
                                    <div class="build-wrapp">
                                        <h5 class="seed-name">Oats
                                            <a href="javascript:;" class="remove-seed">
                                                <i class="far fa-times"></i>
                                            </a>
                                        </h5>
                                        <h5><span class="seed-percentage">0%</span></h5>

                                        <figure class="build-img">
                                            <img src="http://homestead80.test/bloodline-hunt/public/storage/8/Oats.webp"
                                                 class="img-fluid" alt="">
                                        </figure>
                                        <div class="build-link">
                                            <h5>Price: <span class="seed-price">$22.00</span></h5>
                                            <ul class="build-list">
                                                <li><a href="javascript:;" class="decrease">-</a></li>
                                                <input type="text" value="0.5" class="seed-qty" style="width:30px; text-align:center; border:none;">
                                                <li><a href="javascript:;" class="increase">+</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="build-wrapp">
                                        <h5 class="seed-name">Triticale
                                            <a href="javascript:;" class="remove-seed">
                                                <i class="far fa-times"></i>
                                            </a>
                                        </h5>
                                        <h5><span class="seed-percentage">0%</span></h5>

                                        <figure class="build-img">
                                            <img src="http://homestead80.test/bloodline-hunt/public/storage/10/Triticale.jpeg"
                                                 class="img-fluid" alt="">
                                        </figure>
                                        <div class="build-link">
                                            <h5>Price: <span class="seed-price">$18.00</span></h5>
                                            <ul class="build-list">
                                                <li><a href="javascript:;" class="decrease">-</a></li>
                                                <input type="text" value="0.5" class="seed-qty" style="width:30px; text-align:center; border:none;">
                                                <li><a href="javascript:;" class="increase">+</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="build-wrapp">
                                        <h5 class="seed-name">Rapeseed
                                            <a href="javascript:;" class="remove-seed">
                                                <i class="far fa-times"></i>
                                            </a>
                                        </h5>
                                        <h5><span class="seed-percentage">0%</span></h5>

                                        <figure class="build-img">
                                            <img src="http://homestead80.test/bloodline-hunt/public/storage/11/Rapeseed.jpeg"
                                                 class="img-fluid" alt="">
                                        </figure>
                                        <div class="build-link">
                                            <h5>Price: <span class="seed-price">$9.50</span></h5>
                                            <ul class="build-list">
                                                <li><a href="javascript:;" class="decrease">-</a></li>
                                                <input type="text" value="0.5" class="seed-qty"
                                                       style="width:30px; text-align:center; border:none;">
                                                <li><a href="javascript:;" class="increase">+</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="build-wrapp">
                                        <h5 class="seed-name">Rye
                                            <a href="javascript:;" class="remove-seed">
                                                <i class="far fa-times"></i>
                                            </a>
                                        </h5>
                                        <h5><span class="seed-percentage">0%</span></h5>

                                        <figure class="build-img">
                                            <img src="http://homestead80.test/bloodline-hunt/public/storage/9/Rye.webp"
                                                 class="img-fluid" alt="">
                                        </figure>
                                        <div class="build-link">
                                            <h5>Price: <span class="seed-price">$14.00</span></h5>
                                            <ul class="build-list">
                                                <li><a href="javascript:;" class="decrease">-</a></li>
                                                <input type="text" value="0.5" class="seed-qty"
                                                       style="width:30px; text-align:center; border:none;">
                                                <li><a href="javascript:;" class="increase">+</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div> --}}

                            </div>
                            <div class="col-md-4  p-0">
                                {{--                                        <figure class="build-imag"> --}}
                                {{--                                            <img src="{{ asset('front/images/build-center.png') }}" class="img-fluid" --}}
                                {{--                                                 alt=""> --}}
                                {{--                                        </figure> --}}
                                <div class="progress-main">
                                    <span>0%</span>
                                    <div class="progress">
                                        <div class="progress-done" id="seed-progress-bar-mobile" data-done="70"
                                            style="width: 70%; opacity: 1;">
                                        </div>

                                    </div>
                                    <span>100%</span>
                                </div>
                                <div class="progress-content">
                                    <h3>Maximum weight of 45 pounds</h3>
                                </div>
                            </div>
                        </div>
                        <form id="addToCartForm" action="{{ route('seed.add.cart') }}" method="POST" style="display:none;">
                            @csrf
                            <input type="hidden" name="custom_seed_name" id="formCustomSeedName">
                            <input type="hidden" name="seeds" id="formSeeds"> <!-- JSON string -->
                            <input type="hidden" name="custom_blend_notice" id="formCustomBlendNotice">
                            <input type="hidden" name="separate_small_seeds" id="formSeparateSmallSeeds">
                            <input type="hidden" name="grand_total" id="formGrandTotal">
                            <input type="hidden" name="top_Products" id="formTopProducts">
                        </form>
                        {{-- blend content for mobile --}}
                            <div class="seed_varieties_heading">
                        <hr >
                        <h2 >Select Your Seed Varieties</h2>
                            </div>
                        <div class="blend-content-for-mobile-wrap">

                            <div class="swiper blendSlider mb-3">
                                <div class="swiper-wrapper">
                                    @foreach ($categories as $category)
                                        <div class="swiper-slide">
                                            <button data-targetit="box-{{ $loop->index + 1 }}" class="{{ $loop->first ? 'current' : '' }}">{{ $category->name }}</button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="swiper-button-next"><i class="fas fa-arrow-alt-right"></i></div>
                            <div class="swiper-button-prev"><i class="fas fa-arrow-alt-left"></i></div>

                            @foreach ($categories as $category)
                                <div class="box-{{ $loop->index + 1 }} blend-content-for-mobile {{ $loop->first ? 'current' : '' }}"  @if($loop->first) style="display:block;" @endif>
                                    <ul class="grain-tab-list">
                                        @php
                                            $seedsWithType = $category->seeds->whereNotNull('type')->groupBy('type');
                                            $seedsWithoutType = $category->seeds->whereNull('type');
                                        @endphp

                                        @if ($seedsWithType->count())
                                            @foreach ($seedsWithType as $type => $seeds)
                                                <li class="{{ $loop->first ? 'current' : '' }}" data-targetit="box-{{ $loop->parent->index + 1 }}-{{ $loop->index + 1 }}">
                                                    <button>{{ $type }}</button>
                                                </li>
                                            @endforeach
                                        @endif
                                    </ul>

                                    @if ($seedsWithType->count())
                                        @foreach ($seedsWithType as $type => $seeds)
                                            <div class="box-{{ $loop->parent->index + 1 }}-{{ $loop->index + 1 }}" style="display: {{ $loop->first ? 'block' : 'none' }}">
                                                <div class="row">
                                                    <div class="col-12 mb-3">
{{--                                                        <h4>{{ $type }}</h4>--}}
                                                        <div class="row">
                                                            @foreach ($seeds as $seed)
                                                                <div class="col-3 mb-3">
                                                                    <a href="javascript:;" class="add-seed d-block text-center"
                                                                       data-id="{{ $seed->id }}"
                                                                       data-name="{{ $seed->name }}"
                                                                       data-img="{{ $seed->getFirstMediaUrl('seed_media') }}"
                                                                       data-price="{{ $seed->price ?? 1 }}"
                                                                       title="Description: {{ $seed->description ?? 'N/A' }}<br>Recommended: {{ $seed->recommended_rate ?? 'N/A' }}"
                                                                       data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true">
                                                                        @if ($seed->getFirstMediaUrl('seed_media'))
                                                                            <figure class="blend-img">
                                                                                <img src="{{ $seed->getFirstMediaUrl('seed_media') }}"
                                                                                     class="img-fluid" alt="{{ $seed->name }}">
                                                                                <h4>{{ $seed->name }}</h4>
                                                                            </figure>
                                                                        @endif
                                                                    </a>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif

                                    @if ($seedsWithoutType->count())
                                        <div class="box-{{ $loop->index + 1 }}-no-type" style="display: {{ $seedsWithType->count() ? 'none' : 'block' }}">
                                            <div class="row">
                                                @foreach ($seedsWithoutType as $seed)
                                                    <div class="col-3 mb-3">
                                                        <a href="javascript:;" class="add-seed d-block text-center"
                                                           data-id="{{ $seed->id }}"
                                                           data-name="{{ $seed->name }}"
                                                           data-img="{{ $seed->getFirstMediaUrl('seed_media') }}"
                                                           data-price="{{ $seed->price ?? 1 }}"
                                                           title="Description: {{ $seed->description ?? 'N/A' }}<br>Recommended: {{ $seed->recommended_rate ?? 'N/A' }}"
                                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true">
                                                            @if ($seed->getFirstMediaUrl('seed_media'))
                                                                <figure class="blend-img">
                                                                    <img src="{{ $seed->getFirstMediaUrl('seed_media') }}"
                                                                         class="img-fluid" alt="{{ $seed->name }}">
                                                                    <h4>{{ $seed->name }}</h4>
                                                                </figure>
                                                            @endif
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach

                        </div>

                        <div class="blend-overlay">
                            <div class="row align-items-center justify-content-between">
                                <div class="col-lg-7 col-md-6">
                                    <div class="blend-form">
                                        <form class="blend-form">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <span>
                                                            <label>
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="customBlendNotice" required>
                                                                I acknowledge this is a custom seed blend and returns cannot
                                                                be accepted.
                                                            </label>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <span>
                                                            <label>
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="separateSmallSeeds" name="separate_small_seeds">
                                                                I acknowledge this is a custom seed blend and returns cannot
                                                                be accepted.
                                                            </label>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>

                                        <h4><input type="text" class="form-control" name="seed_varieties"
                                                placeholder="Enter the seed varieties you want separated"></h4>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <div class="blend-ctnn">
                                        <h5>SUBTOTAL:<span id="grand-total">$0.00</span></h5>
                                        <p>shipping calculated checkout</p>
                                        <ul>
                                            <li><a id="addToCartBtn" href="javascript:;">add to cart</a></li>
                                            <li><a href="javascript:;" id="save-seeds">save my seed blend</a></li>
                                            <li><a href="javascript:;"class="start-over">start over</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row hide-mobile">
                            <div class="col-md-12">
                                <h3 class="last-title">pair with our top products</h3>
                            </div>

                            @foreach ($topProducts as $topProduct)
                                <div class="col-md-3 col-6">
                                    <figure class="blend-images">
                                        <div class="imgst">
                                            <input type="checkbox" class="top-product-checkbox"
                                                data-id="{{ $topProduct->id }}"
                                                {{ $topProduct->is_top_product ? '' : '' }}>
                                            <img src="{{ $topProduct->productImage() }}" class="img-fluid"
                                                alt="">
                                        </div>
                                        <h5>
                                            {{ $topProduct->name ?? '' }}
                                            <span>${{ $topProduct->price ?? '' }}</span>
                                        </h5>

                                    </figure>
                                </div>
                            @endforeach


                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="blend-right">
                        <div class="blend-main">
                            <h3>
                                Try our Recommended Blends
                            </h3>
                            <p class="recommeded_seed_text">These are just recommended blends to get you started, you can
                                fully edit once selected</p>
                            <div class="blend-link">
                                <ul class="blend-list">
                                    @foreach ($blends as $blend)
                                        <li><a href="javascript:;">{{ $blend->name ?? '' }}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="blend-content blend-content-for-desktop">
                            <h3>Select Your Seed Varieties</h3>

                            @foreach ($categories as $category)
                                @php
                                    $seedsWithType = $category->seeds->whereNotNull('type')->groupBy('type');
                                    $seedsWithoutType = $category->seeds->whereNull('type');
                                @endphp
                                <div class="faq-main">
                                    <h3>{{ $category->name }}</h3>
                                    @if ($seedsWithType->count())
                                        <div id="accordion-{{ $category->id }}">
                                            @foreach ($seedsWithType as $type => $seeds)
                                                <div class="card">
                                                    <div id="headingOne-{{ $category->id }}-{{ $loop->index }}">
                                                        <h5 class="mb-0">
                                                            <button class="btn btn-link" data-toggle="collapse"
                                                                data-target="#collapseOne-{{ $category->id }}-{{ $loop->index }}"
                                                                aria-expanded="true"
                                                                aria-controls="collapseOne-{{ $category->id }}-{{ $loop->index }}"><span>
                                                                </span>
                                                                <h3> <a href="javascript:;"><i
                                                                            class="fas fa-caret-down"></i></a>
                                                                    {{ $type }}</h3>

                                                            </button>
                                                        </h5>
                                                    </div>
                                                    <div id="collapseOne-{{ $category->id }}-{{ $loop->index }}"
                                                        class="collapse show"
                                                        aria-labelledby="headingOne{{ $category->id }}-{{ $loop->index }}"
                                                        data-parent="#accordion-{{ $category->id }}">
                                                        <div class="card-body">
                                                            <div class="shop-list row">
                                                                @foreach ($seeds as $seed)

                                                                    <div class="col-md-3 mb-3">
                                                                        <a href="javascript:;"
                                                                            class="add-seed d-block text-center"
                                                                            data-id="{{ $seed->id }}"
                                                                            data-name="{{ $seed->name }}"
                                                                            data-img="{{ $seed->getFirstMediaUrl('seed_media') }}"
                                                                            data-price="{{ $seed->price ?? 1 }}"
                                                                            title="Description: {{ $seed->description ?? 'N/A' }}<br>Recommended: {{ $seed->recommended_rate ?? 'N/A' }}"
                                                                            data-bs-toggle="tooltip"
                                                                            data-bs-placement="top" data-bs-html="true">
                                                                            @if ($seed->getFirstMediaUrl('seed_media'))

                                                                                <figure class="blend-img">
                                                                                    <img src="{{ $seed->getFirstMediaUrl('seed_media') }}"
                                                                                        class="img-fluid"
                                                                                        alt="{{ $seed->name }}">
                                                                                    <h4></h4>
                                                                                    <h4>{{ $seed->name }}</h4>
                                                                                </figure>
                                                                            @endif
                                                                        </a>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach

                                        </div>
                                    @endif
                                    @if ($seedsWithoutType->count())
                                        <div class="list-main{{ $loop->last ? ' secoond' : '' }}">
                                            <div class="shop-list row">
                                                @foreach ($seedsWithoutType as $seed)
                                                    {{--                                                    <li> --}}
                                                    <div class="col-md-3 mb-3">
                                                        <a href="javascript:;" class="add-seed d-block text-center"
                                                            data-id="{{ $seed->id }}"
                                                            data-name="{{ $seed->name }}"
                                                            data-img="{{ $seed->getFirstMediaUrl('seed_media') }}"
                                                            data-price="{{ $seed->price ?? 1 }}"
                                                            title="Description: {{ $seed->description ?? 'N/A' }}<br>Recommended: {{ $seed->recommended_rate ?? 'N/A' }}"
                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                            data-bs-html="true">
                                                            @if ($seed->getFirstMediaUrl('seed_media'))
                                                                <figure class="blend-img">
                                                                    <img src="{{ $seed->getFirstMediaUrl('seed_media') }}"
                                                                        class="img-fluid" alt="{{ $seed->name }}">
                                                                    <h4></h4>
                                                                    <h4>{{ $seed->name }}</h4>
                                                                </figure>
                                                            @endif
                                                        </a>
                                                    </div>
                                                    {{--                                                    </li> --}}
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>



                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        var blends = @json($blends);
    </script>
    <script>
        const maxTotalQty = 45;

        $(document).ready(function() {
            loadSelectedSeeds();
            loadCheckboxStates();

            // Load saved name
            $('input[name="custom_seed_name"]').val(localStorage.getItem('customSeedName') || '');
            $('input[name="seed_varieties"]').val(localStorage.getItem('customSeedVarieties') || '');
            updateProgressBar();
        });

        // Check if the device is mobile
        function isMobile() {
            return window.innerWidth <= 768;
        }

        $(document).on('click', '.add-seed', function() {
            const seedId = $(this).data('id');
            const seedName = $(this).data('name');
            const seedImg = $(this).data('img');
            const seedPrice = parseFloat($(this).data('price')).toFixed(2);

            let currentTotalQty = getTotalQty();

            if (currentTotalQty + 0.5 > maxTotalQty) {
                alert('Total quantity cannot exceed 45 lbs.');
                return;
            }

            // Check if seed is already added
            let buildWrap = $(`.build-wrapp[data-id="${seedId}"]`);

            if (buildWrap.length > 0) {
                alert('This seed is already added!');
                return; // Exit the function to prevent re-adding
            }

            // Call addBuildWrapper and store the reference to the created buildWrap
            buildWrap = addBuildWrapper(seedId, seedName, seedImg, 0.5, seedPrice);

            // Now, update the price correctly
            updatePrice(buildWrap, seedPrice);

            updateProgressBar();
            // saveSelectedSeeds(); // Save data
            updatePercentages();
        });

        function updatePercentages() {
            let totalQty = 0;

            // Recalculate totalQty to ensure it's exactly 45
            $('.seed-qty').each(function() {
                let q = parseFloat($(this).val());
                totalQty += isNaN(q) ? 0 : q;
            });

            $('.build-wrapp').each(function() {
                let qty = parseFloat($(this).find('.seed-qty').val());
                let percentage = (qty / 45) * 100; // Calculate percentage out of 45
                $(this).find('.seed-percentage').text(percentage.toFixed(2) + '%'); // Display percentage
            });
        }

        function addBuildWrapper(seedId, seedName, seedImg, qty, seedPrice) {
            let existingSeed = $(`.build-wrapp[data-id="${seedId}"]`);

            if (existingSeed.length > 0) {
                // Seed exists, update quantity and price
                let qtyInput = existingSeed.find('.seed-qty');
                let oldQty = parseFloat(qtyInput.val());
                let newQty = oldQty + qty;

                // Check if new total exceeds max allowed
                if (getTotalQty() - oldQty + newQty > maxTotalQty) {
                    alert('Total quantity cannot exceed 45 lbs.');
                    return;
                }

                qtyInput.val(newQty.toFixed(1)); // Update quantity
                updatePrice(existingSeed); // Update price based on new quantity
                saveSelectedSeeds(); // Save updated values
                return; // Stop here since we updated an existing seed
            }

            // If seed doesn't exist, create a new one
            let buildWrapHTML = `
    <div class="build-wrapp" data-id="${seedId}" data-unit-price="${seedPrice}">
        <h5 class="seed-name">${seedName}
            <a href="javascript:;" class="remove-seed" data-id="${seedId}">
                <i class="far fa-times"></i>
            </a>
        </h5>
<h5><span class="seed-percentage">0%</span></h5>
        <figure class="build-img">
            <img src="${seedImg}" class="img-fluid" alt="">
        </figure>
        <div class="build-link">
<ul class="build-list">
                <li><a href="javascript:;" class="decrease" data-id="${seedId}">-</a></li>
                <input type="text" value="${qty}" class="seed-qty" style="width:30px; text-align:center; border:none;"><span>LBS</span>
                <li><a href="javascript:;" class="increase" data-id="${seedId}">+</a></li>
            </ul>
            <h5>Price: <span class="seed-price">$${(seedPrice)}</span></h5>

        </div>
    </div>`;

            if (isMobile()) {
                let seedsContainerMobile = $('#selected-seeds-container-mobile');
                let totalSeeds = seedsContainerMobile.children().length;

                // When the number of seeds reaches 7, create an empty div
                if (totalSeeds === 7) {
                    let emptyDiv = `<div class="col-4 empty-seed"></div>`; // Empty div with col-4 class
                    seedsContainerMobile.append(emptyDiv); // Append the empty div before the new seed
                }

                // Now add the new seed
                let wrappedBuildWrapHTML = `<div class="col-4">${buildWrapHTML}</div>`;
                seedsContainerMobile.append(wrappedBuildWrapHTML);

            } else {
                // For desktop, continue as usual
                let noGuttersRow = $(".row.no-gutters");
                let firstCol = $(".row.text-center .col-md-3.first");
                let secondCol = $(".row.text-center .col-md-3.second");

                let totalSeeds = $(".row.no-gutters .build-wrapp").length;
                if (totalSeeds < 4) {
                    let wrappedBuildWrapHTML = `<div class="col-md-3">${buildWrapHTML}</div>`;
                    noGuttersRow.append(wrappedBuildWrapHTML);
                } else {
                    let firstCount = firstCol.find(".build-wrapp").length;
                    let secondCount = secondCol.find(".build-wrapp").length;

                    if (firstCount <= secondCount) {
                        firstCol.append(buildWrapHTML);
                    } else {
                        secondCol.append(buildWrapHTML);
                    }
                }
            }

            // updateGrandTotal();
            // saveSelectedSeeds(); // Save the new seed addition
        }

        $(document).on('click', '.increase', function() {
            const buildWrap = $(this).closest('.build-wrapp'); // Get the seed container
            let qtyInput = buildWrap.find('.seed-qty'); // Get quantity input
            console.log('aty' , qtyInput);
            let qty = parseFloat(qtyInput.val()); // Get current value
            let seedPrice = parseFloat(buildWrap.attr('data-unit-price'));

            if (getTotalQty() + 0.5 > maxTotalQty) {

                alert('Total quantity cannot exceed 45 lbs.');
                return;
            }
            console.log('aty' , seedPrice);

            qty += 0.5;
            qtyInput.val(qty.toFixed(1)); // Update quantity
            updateProgressBar();
            updatePrice(buildWrap, seedPrice); // Update price based on new quantity
            updateGrandTotal();
            updatePercentages();
        });

        $(document).on('click', '.decrease', function() {
            const buildWrap = $(this).closest('.build-wrapp'); // Get the seed container
            let qtyInput = buildWrap.find('.seed-qty'); // Get quantity input

            let qty = parseFloat(qtyInput.val()); // Get current value
            let seedPrice = parseFloat(buildWrap.attr('data-unit-price'));

            if (qty > 0.5) {
                qty -= 0.5;
                qtyInput.val(qty.toFixed(1)); // Update quantity
                updatePrice(buildWrap, seedPrice); // Update price based on new quantity
            } else {
                buildWrap.remove(); // Remove seed if quantity reaches 0
            }
            updatePrice(buildWrap, seedPrice);
            updateGrandTotal(); // Update the total price after change
            updateProgressBar();
            updatePercentages();
        });

        $(document).on('click', '#save-seeds', function() {
            saveSelectedSeeds();
            alert("Seeds saved successfully!");
        });

        function saveSelectedSeeds() {
            let savedSeeds = [];

            // For desktop: Iterate over all build-wrapp elements within desktop columns
            $(".row.no-gutters .build-wrapp, .col-md-3 .build-wrapp").each(function() {
                let seedElement = $(this);
                let parentCol = seedElement.closest(".col-md-3"); // Find the nearest parent column

                let position = parentCol.hasClass("first") ? "first" :
                    parentCol.hasClass("second") ? "second" : "no-gutters";

                let seedData = {
                    id: seedElement.attr("data-id"),
                    name: seedElement.find(".seed-name").text().trim(),
                    img: seedElement.find("img").attr("src"),
                    price: seedElement.find(".seed-price").text().replace("$", "").trim(),
                    qty: seedElement.find(".seed-qty").val(),
                    position: position
                };
                savedSeeds.push(seedData);
            });

            // For mobile: Iterate over all build-wrapp elements in the mobile container
            $('#selected-seeds-container-mobile .build-wrapp').each(function() {
                let seedElement = $(this);

                let seedData = {
                    id: seedElement.attr("data-id"),
                    name: seedElement.find(".seed-name").text().trim(),
                    img: seedElement.find("img").attr("src"),
                    price: seedElement.find(".seed-price").text().replace("$", "").trim(),
                    qty: seedElement.find(".seed-qty").val(),
                    position: "mobile" // Position for mobile seeds
                };
                savedSeeds.push(seedData);
            });

            // Store the saved seeds data in localStorage
            localStorage.setItem("selectedSeeds", JSON.stringify(savedSeeds));
        }

        $('input[name="seed_varieties"]').on('input', function() {
            localStorage.setItem('customSeedVarieties', $(this).val());
        });

        $(document).on('change', '.seed-qty', function() {
            let input = $(this);
            let val = parseFloat(input.val());
            val = isNaN(val) || val < 0.5 ? 0.5 : Math.round(val * 2) / 2;

            // Temporarily set the value to calculate total
            input.val(val);

            // Calculate total quantity
            let totalQty = 0;
            $('.seed-qty').each(function() {
                let q = parseFloat($(this).val());
                totalQty += isNaN(q) ? 0 : q;
            });

            // Check if total exceeds 45
            if (totalQty > 45) {
                alert('Total quantity cannot exceed 45.');
                let previousVal = input.data('previous') ?? 0.5;
                input.val(previousVal);
                return;
            }

            // Save current value as previous for future use
            input.data('previous', val);

            // Update price
            let buildWrap = input.closest('.build-wrapp'); // Use .build-wrapp instead of li
            let seedPrice = parseFloat(buildWrap.data('unit-price')); // Get price from data attribute
            updatePrice(buildWrap, seedPrice);
            updateProgressBar();
        });


        $(document).on('click', '.row.no-gutters .col-md-3 .remove-seed', function() {

            let col = $(this).closest('.col-md-3');
            col.remove();

        });
        $(document).on('click', '.row.text-center .col-md-3 .remove-seed', function() {
            $(this).closest('div').remove();
            // refreshSummary();
        });

        $('input[name="custom_seed_name"]').on('input', function() {
            localStorage.setItem('customSeedName', $(this).val());
        });


        $(document).on('change', '#customBlendNotice, #separateSmallSeeds', function() {
            saveCheckboxStates();
        });


        function getSeedHtml(id, name, img, price, qty, description = '', recommended = '') {

            return `
                <div class="col-md-3"  data-id="${id}" data-price="${price}" data-name="${name}">
                <div class="build-wrapp">
                                                <h5 class="seed-name">${name}<a href="javascript:;"><i class="far fa-times remove-seed"></i></a></h5>
                                                <figure class="build-img">
                                                    <img src="${img}" class="img-fluid" alt="${name}">
                                                </figure>
                                                <div class="build-link">
<ul class="build-list">
                                                        <li class="decrease"><a href="javascript:;">-</a></li>
                <!--                                        <li><a href="javascript:;">0.51b</a></li>-->
                <input type="text" class="qty" value="${qty}" style="width:30px; text-align:center; border:none;">
                                                        <li class="increase"><a href="javascript:;">+</a></li>
                                                    </ul>
                                                    <h5>Price<span class="price">$ ${(price)}</span></h5>

                                                </div>
                                            </div>
                </div>
`;
        }


        // function updatePrice(buildWrap, seedPrice) {
        //
        //     if (!buildWrap || buildWrap?.length === 0) return;
        //
        //     const qty = parseFloat(buildWrap.find('.seed-qty').val());
        //
        //     // Use seedPrice directly instead of getting it from the text
        //     // let totalPrice = qty * seedPrice;
        //     let totalPrice = (qty / 0.5) * seedPrice;
        //
        //     buildWrap.find('.seed-price').text('$' + totalPrice.toFixed(2));
        //
        //     updateGrandTotal(); // Update the grand total when price changes
        // }

        function updatePrice(buildWrap, seedPrice) {
            if (!buildWrap || buildWrap.length === 0) return;

            const qty = parseFloat(buildWrap.find('.seed-qty').val());
            const unitWeight = 0.5; // price is per 0.5 lb

            let totalPrice = (qty / unitWeight) * seedPrice;

            buildWrap.find('.seed-price').text('$' + totalPrice.toFixed(2));

            updateGrandTotal();
        }

        function updateGrandTotal() {
            let grandTotal = 0;

            $(".build-wrapp").each(function() {
                let priceText = $(this).find('.seed-price').text().replace('$', '').trim();
                let price = parseFloat(priceText);
                if (!isNaN(price)) {
                    grandTotal += price;
                }
            });

            $("#grand-total").text('$' + grandTotal.toFixed(2));


        }
        // Retrieve and set grand total on page load
        $(document).ready(function() {
            let savedTotal = localStorage.getItem('grandTotal');
            if (savedTotal) {
                $("#grand-total").text(savedTotal);
            }

            updateGrandTotal();
        });


        function getTotalQty() {
            let total = 0;
            $(".seed-qty").each(function() {
                total += parseFloat($(this).val());
            });
            return total;
        }

        // function updateProgressBar() {
        //     let totalQty = getTotalQty();
        //     console.log('totalQty', totalQty)
        //     let progress = (totalQty / 45 ) * 100;
        //     $("#seed-progress-bar").css("width", progress + "%");
        //     $("#seed-progress-bar").attr("data-done", progress.toFixed(1));
        // }

        function updateProgressBar() {
            let totalQty = getTotalQty();
            console.log('totalQty', totalQty);
            let progress = (totalQty / 45) * 100;

            if (isMobile()) {
                // If it's a mobile device, update the mobile progress bar
                $("#seed-progress-bar-mobile").css("width", progress + "%");
                $("#seed-progress-bar-mobile").attr("data-done", progress.toFixed(1));
            } else {
                // For desktop, update the desktop progress bar
                $("#seed-progress-bar").css("width", progress + "%");
                $("#seed-progress-bar").attr("data-done", progress.toFixed(1));
            }
        }

        function loadSelectedSeeds() {
            let savedSeeds = JSON.parse(localStorage.getItem("selectedSeeds")) || [];
            let firstCol = $(".row.text-center .col-md-3.first");
            let secondCol = $(".row.text-center .col-md-3.second");
            let seedsContainerMobile = $('#selected-seeds-container-mobile');

            savedSeeds.forEach(seed => {
                let buildWrapHTML = `
            <div class="build-wrapp" data-id="${seed.id}" data-unit-price="${seed.price}">
                <h5 class="seed-name">${seed.name}
                    <a href="javascript:;" class="remove-seed" data-id="${seed.id}" data-unit-price="${seed.price}">
                        <i class="far fa-times"></i>
                    </a>
                </h5>
<h5><span class="seed-percentage">0%</span></h5>
                <figure class="build-img">
                    <img src="${seed.img}" class="img-fluid" alt="">
                </figure>
                <div class="build-link">
                    <h5>Price <span class="seed-price">$${seed.price}</span></h5>
                    <ul class="build-list">
                        <li><a href="javascript:;" class="decrease" data-id="${seed.id}">-</a></li>
                        <input type="text" value="${seed.qty}" class="seed-qty" style="width:30px; text-align:center; border:none;"><span>LBS</span>
                        <li><a href="javascript:;" class="increase" data-id="${seed.id}">+</a></li>
                    </ul>
                </div>
            </div>`;

                if (isMobile()) {
                    // For mobile, load into the mobile container
                    let totalSeeds = seedsContainerMobile.children().length;
                    if (totalSeeds === 7) {
                        // Create an empty div to maintain layout
                        let emptyDiv = `<div class="col-4 empty-seed"></div>`;
                        seedsContainerMobile.append(emptyDiv);
                    }
                    // Append the new seed
                    let wrappedBuildWrapHTML = `<div class="col-4">${buildWrapHTML}</div>`;
                    seedsContainerMobile.append(wrappedBuildWrapHTML);
                } else {
                    // For desktop, load into the first or second column or no-gutters row
                    if (seed.position === "first") {
                        firstCol.prepend(buildWrapHTML); // Add to the beginning of the first column
                    } else if (seed.position === "second") {
                        secondCol.prepend(buildWrapHTML); // Add to the beginning of the second column
                    } else {
                        // Desktop - Add to no-gutters row
                        let wrappedBuildWrapHTML = `<div class="col-md-3">${buildWrapHTML}</div>`;
                        $(".row.no-gutters").append(wrappedBuildWrapHTML);
                    }
                }
            });
        }


        function saveCheckboxStates() {
            localStorage.setItem('customBlendNoticeChecked', $('#customBlendNotice').is(':checked'));
            localStorage.setItem('separateSmallSeedsChecked', $('#separateSmallSeeds').is(':checked'));
        }

        function loadCheckboxStates() {
            $('#customBlendNotice').prop('checked', localStorage.getItem('customBlendNoticeChecked') === 'true');
            $('#separateSmallSeeds').prop('checked', localStorage.getItem('separateSmallSeedsChecked') === 'true');
        }

        $('#addToCartBtn').on('click', function() {
            let storedSeeds = localStorage.getItem("selectedSeeds");
            let selectedTopProducts = JSON.parse(localStorage.getItem("selectedTopProducts")) || [];
            if (!storedSeeds) {
                alert("No seeds selected!");
                return;
            }

            let seeds = JSON.parse(storedSeeds);
            let isValid = true;

            // Validate seed quantities
            seeds.forEach(seed => {
                if (!seed.qty || seed.qty <= 0) {
                    isValid = false;
                    alert(`Quantity must be greater than 0 for ${seed.name}.`);
                    return false;
                }
            });

            if (!isValid) return;

            // Validate Custom Blend Notice
            const customBlendNotice = $('#customBlendNotice').is(':checked');
            if (!customBlendNotice) {
                alert('You must acknowledge the custom blend notice.');
                return;
            }

            // Validate Custom Seed Name
            const customSeedName = $('input[name="custom_seed_name"]').val().trim();
            if (!customSeedName) {
                alert('Please enter a name for your custom blend.');
                return;
            }

            // Additional Form Inputs
            const separateSmallSeeds = $('#separateSmallSeeds').is(':checked') ? 1 : 0;
            const grandTotal = parseFloat($('#grand-total').text().replace('$', '').trim()) || 0;

            // Fill hidden form inputs
            $('#formCustomSeedName').val(customSeedName);
            $('#formSeeds').val(JSON.stringify(seeds));
            $('#formCustomBlendNotice').val(customBlendNotice ? 1 : 0);
            $('#formSeparateSmallSeeds').val(separateSmallSeeds);
            $('#formGrandTotal').val(grandTotal.toFixed(2));
            $('#formTopProducts').val(JSON.stringify(selectedTopProducts));
            // Submit the hidden form
            $('#addToCartForm').submit();
            localStorage.clear();
        });



        $(document).on('click', '#clearSeedsBtn', function() {
            if (confirm('Are you sure you want to clear all selected seeds?')) {
                // Clear localStorage keys related to the seeds
                localStorage.removeItem('selectedSeeds');
                localStorage.removeItem('customSeedName');
                localStorage.removeItem('customBlendNoticeChecked');
                localStorage.removeItem('separateSmallSeedsChecked');

                // Clear the UI
                $('#selected-seeds-container').empty();
                $('#summary-body').empty();
                $('#grand-total').text('$ 0.00');
                $('input[name="custom_seed_name"]').val('');
                $('#customBlendNotice').prop('checked', false);
                $('#separateSmallSeeds').prop('checked', false);
                $('#seeds-summary-container').hide();
                $('#checkbox-options').hide();
            }
        });
        $(function() {
            $('[data-toggle="tooltip"], [data-bs-toggle="tooltip"]').tooltip({
                html: true
            });
        });


        $(document).on('click', '.start-over', function() {
            // ✅ Remove `blend_id` from the URL
            let url = new URL(window.location.href);
            url.searchParams.delete("blend_id");

            // ✅ Update the URL without reloading the page
            window.history.pushState({}, "", url);

            // ✅ Clear localStorage
            localStorage.clear();

            // ✅ Reload the page to reset the UI
            location.reload();
        });



        $(document).on("click", ".blend-list li a", function() {
            let blendName = $(this).text().trim();
            let selectedBlend = blends.find(b => b.name === blendName);

            if (!selectedBlend) {
                alert("Blend not found!");
                return;
            }

            console.log("Selected Blend:", selectedBlend);

            // ✅ Set the blend name in the input field
            $("input[name='custom_seed_name']").val(blendName);

            // ✅ Clear previous blend seeds before appending new ones
            $("#seedContainer").empty();

            if (!Array.isArray(selectedBlend.addon) || selectedBlend.addon.length === 0) {
                console.warn("No addons found for this blend.");
                return;
            }

            // ✅ Loop through blend add-ons and add them to the UI
            selectedBlend.addon.forEach((addon, index) => {
                console.log(`Processing addon ${index + 1}:`, addon);

                if (!addon.seed || !addon.seed.id) {
                    console.error(`Addon at index ${index} is missing seed data:`, addon);
                    return;
                }

                let imagePath = addon.seed.media_url && addon.seed.media_url !== "null" ? addon.seed
                    .media_url : "/path/to/default.jpg";

                console.log(
                    `Adding Seed: ${addon.seed.name}, Price: ${addon.seed.price}, Quantity: ${addon.pound}, Image: ${imagePath}`
                );

                addBuildWrapper(
                    addon.seed.id,
                    addon.seed.name,
                    imagePath,
                    parseFloat(addon.pound),
                    parseFloat(addon.seed.price)
                );
            });

            // ✅ Update totals and refresh UI
            updateGrandTotal();
            updatePercentages();
            updateProgressBar();
        });




        // Sample blends array (You should fetch this dynamically from Laravel)
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const checkboxes = document.querySelectorAll(".top-product-checkbox");

            // Load saved selections from localStorage
            const savedSelections = JSON.parse(localStorage.getItem("selectedTopProducts")) || [];
            checkboxes.forEach(checkbox => {
                if (savedSelections.some(product => product.id === checkbox.dataset.id)) {
                    checkbox.checked = true;
                }
            });

            checkboxes.forEach(checkbox => {
                checkbox.addEventListener("change", function() {
                    let selectedProducts = JSON.parse(localStorage.getItem(
                        "selectedTopProducts")) || [];

                    if (this.checked) {
                        // Add product if not already in the list
                        if (!selectedProducts.some(product => product.id === this.dataset.id)) {
                            selectedProducts.push({
                                id: this.dataset.id,
                                name: this.dataset.name,
                                price: parseFloat(this.dataset.price)
                            });
                        }
                    } else {
                        // Remove product from the list
                        selectedProducts = selectedProducts.filter(product => product.id !== this
                            .dataset.id);
                    }

                    localStorage.setItem("selectedTopProducts", JSON.stringify(selectedProducts));
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            let selectedBlend = @json($selectedBlend); // Get blend data from Laravel

            if (selectedBlend) {
                console.log("Selected Blend:", selectedBlend);
                $("input[name='custom_seed_name']").val(selectedBlend.name);
                if (!Array.isArray(selectedBlend.addon) || selectedBlend.addon.length === 0) {
                    console.warn("No addons found for this blend.");
                    return;
                }

                // ✅ Loop through blend add-ons and add them to the UI
                selectedBlend.addon.forEach((addon, index) => {
                    console.log(`Processing addon ${index + 1}:`, addon);

                    if (!addon.seed || !addon.seed.id) {
                        console.error(`Addon at index ${index} is missing seed data:`, addon);
                        return;
                    }

                    let imagePath = addon.seed.media_url && addon.seed.media_url !== "null" ?
                        addon.seed.media_url :
                        "/path/to/default.jpg";

                    console.log(
                        `Adding Seed: ${addon.seed.name}, Price: ${addon.seed.price}, Quantity: ${addon.pound}, Image: ${imagePath}`
                    );

                    addBuildWrapper(
                        addon.seed.id,
                        addon.seed.name,
                        imagePath,
                        parseFloat(addon.pound),
                        parseFloat(addon.seed.price)
                    );
                });
                updatePercentages();
                updateProgressBar();
            }
        });

        $(document).on('click', '.row.no-gutters-mobile .col-4 .remove-seed', function() {
            let col = $(this).closest('.col-4'); // Get the seed element

            // Remove the seed
            col.remove();

            // Recalculate the number of seeds in the mobile container
            let seedsContainerMobile = $('#selected-seeds-container-mobile');
            let totalSeeds = seedsContainerMobile.children().length;

            // If total seeds are less than 8, remove the empty-seed div if it exists
            if (totalSeeds < 9) {
                let emptySeedDiv = seedsContainerMobile.find('.empty-seed');
                if (emptySeedDiv.length > 0) {
                    emptySeedDiv.remove(); // Remove the empty-seed div
                }
            }

            // Re-add the empty-seed div if total seeds become 7
            if (totalSeeds === 7) {
                let emptyDiv = `<div class="col-4 empty-seed"></div>`; // Create an empty div for the space
                seedsContainerMobile.append(emptyDiv); // Add the empty div back to maintain layout
            }

            updateGrandTotal(); // Update any totals after removal
            saveSelectedSeeds(); // Save the updated list after removal
        });
    </script>
    <script>
        $(document).ready(function() {
            // When a tab is clicked, show the corresponding seeds and hide others
            $('.grain-tab-list li').on('click', function() {
                var target = $(this).data('targetit');

                // Remove current class from all tabs and add to clicked one
                $('.grain-tab-list li').removeClass('current');
                $(this).addClass('current');

                // Hide all boxes and show the selected one
                $('.blend-content-for-mobile .box').hide();
                $('.blend-content-for-mobile .' + target).show();
            });
        });

    </script>
@endsection