Catalogue Price Estimator

<div class="pr-5 w-full grid grid-cols-1 max-w-5xl md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 gap-4">
        @foreach($variables['all_items'] as $variable)
            <x-product-card class="cursor-pointer" src="{{ asset($variable->image_url) }}" id="{{ $variable->id }}" x-on:click="{productBoxOpen=true, alt='{{ $variable->name }}', img='{{ asset($variable->image_url) }}'}">
                <x-slot name="brand">{{ explode(" ", $variable->brand_name()->first()->Name)[0] }}</x-slot>
                <x-slot name="category">{{ explode(" ", $variable->category_name()->first()->Name)[0] }}</x-slot>
                <x-slot name="title">
                    <h2 class="text-xl font-medium leading-6 tracking-wide text-gray-800 hover:text-black cursor-pointer" x-on:click="{document.getElementById('{{ $variable->id }}').click()}">
                        {{ $variable->name }}
                    </h2>
                </x-slot>
                <x-slot name="search">
                    <x-svg.search class="w-5 h-5 cursor-pointer" x-on:click="{document.getElementById('{{ $variable->id }}').click()}"></x-svg.search>
                </x-slot>
                    {{ $variable->description }}
                <x-slot name="price">
                    ${{ $variable->unit_price }} + GST
                </x-slot>
                <x-slot name="basket">
                    <div class="flex items-center space-x-1 cursor-pointer" :class="'{{ $variable->name }}' in shopping_cart ? 'text-gray-800' : 'text-gray-400 hover:text-gray-800'" x-on:click="{alt='{{ $variable->name }}', alt in shopping_cart ? delete shopping_cart[alt] : shopping_cart[alt] = {'quantity': 1, 'price': {{ $variable->unit_price }}, 'id': {{ $variable->id }}, 'total_price': {{ $variable->unit_price }} }}">
                        <x-svg.basket class="h-5 w-5"></x-svg.basket>
                    </div>
                </x-slot>
            </x-product-card>
        @endforeach
    </div>

    <div @click.away="showPriceEstimator = false" class="fixed bottom-0 right-0 w-96 px-5 bg-white border-t-2 border-l-2 border-orange-500 max-h-screen overflow-y-auto">
        <div class="grid grid-cols-1 divide-y-2 divide-orange-300">
            <div>
                <x-svg.basket class="w-5 h-5 my-5 float-left"></x-svg.basket>
                <div class="float-left px-2 py-5">
                    <button class="float-left hover:text-red-500" x-on:click="showPriceEstimator = !showPriceEstimator">Price Estimator ~ <span x-text="Object.values(shopping_cart).reduce( function(cnt,o){ return cnt + o['quantity']; }, 0)"></span> Item(s)&nbsp;&nbsp;</button>
                </div>

                <div class="hidden float-right w-5 h-5 my-5" :class="{'hidden' : showPriceEstimator , 'visible float-right' : ! showPriceEstimator }">
                    <x-svg.expand class="h-5 w-5 float-left hover:text-red-500 cursor-pointer" x-on:click="{showPriceEstimator = !showPriceEstimator}"></x-svg.expand>
                </div>
                <div class="hidden float-right w-5 h-5 my-5" :class="{'hidden' : ! showPriceEstimator , 'visible float-right' : showPriceEstimator }">
                    <x-svg.shrink class="h-5 w-5 float-left hover:text-red-500 cursor-pointer" x-on:click="{showPriceEstimator = !showPriceEstimator}"></x-svg.shrink>
                </div>
                <div class="float-right w-5 h-5 my-5">
                    <x-svg.info class="h-5 w-5 float-left hover:text-red-500 cursor-pointer" x-on:click="{displayPriceInfoOpen = true}"></x-svg.info>
                </div>
            </div>
            <template x-for="[product_name, product_values] in Object.entries(shopping_cart)">
                <div class="w-full py-3 inline-block hidden" :class="{ 'w-full py-3 inline-block': showPriceEstimator, 'hidden' : ! showPriceEstimator , 'visible' : showPriceEstimator }">
                    <div class="w-3/5 float-left">
                        <p class="truncate"><button class="font-semibold text-red-900 hover:text-red-500" x-text="product_name" x-on:click="{document.getElementById(product_values['id']).click()}"></button></p>
                        <p class="text-gray-800 text-sm" x-text="'Subtotal: '+(product_values['total_price']).toLocaleString('en-NZ', {style: 'currency', currency: 'NZD'})"></p>
                    </div>
                    <div class="w-2/5 h-full float-left flex justify-center content-center">
                        <p class="m-auto">
                            <button class="font-semibold rounded-full text-yellow-800 bg-yellow-100 hover:bg-yellow-200 font-semibold px-2 text-center" x-on:click="product_values['quantity'] > 1 ? (product_values['quantity'] -= 1, product_values['total_price'] = product_values['quantity']*product_values['price']) : delete shopping_cart[product_name]">-</button>
                            <input :value="product_values['quantity']" x-on:change="$event.target.value > 0 ? (product_values['quantity'] = parseInt($event.target.value), product_values['total_price'] = product_values['quantity']*product_values['price']) : delete shopping_cart[product_name]" class="form-input ring-2 ring-gray-200 rounded-md w-12 text-center shadow-sm">
                            <button class="font-semibold rounded-full text-yellow-800 bg-yellow-100 hover:bg-yellow-200 font-semibold px-2 text-center" x-on:click="(product_values['quantity'] += 1, product_values['total_price'] = product_values['quantity']*product_values['price'])">+</button>
                        </p>
                    </div>
                </div>
            </template>
            <div class="py-3 hidden" :class="{ 'py-3': showPriceEstimator, 'hidden' : ! showPriceEstimator , 'visible' : showPriceEstimator }">
                <div class="float-right whitespace-pre-line px-5"><span class="float-right text-sm" x-text="(Object.values(shopping_cart).reduce( function(cnt,o){ return cnt + o['total_price']; }, 0)).toLocaleString('en-NZ', {style: 'currency', currency: 'NZD'})"></span>
                    <span class="float-right text-sm" x-text="(Object.values(shopping_cart).reduce( function(cnt,o){ return cnt + o['total_price']; }, 0)*0.15).toLocaleString('en-NZ', {style: 'currency', currency: 'NZD'})"></span>
                    <span class="float-right font-semibold" x-text="(Object.values(shopping_cart).reduce( function(cnt,o){ return cnt + o['total_price']; }, 0)*1.15).toLocaleString('en-NZ', {style: 'currency', currency: 'NZD'})"></span>
                </div>
                <div class="float-right text-right whitespace-pre-line"><span class="text-sm">Subtotal
                    GST</span>
                    <span class="font-semibold">TOTAL</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Product popup -->
    <x-modal xshow="productBoxOpen">
        <x-slot name="heading"><div x-text="alt"></div></x-slot>
        <div class="px-6 py-2 w-full"><img :src="img"></div>
    </x-modal>

    <x-modal xshow="displayPriceInfoOpen">
        <x-slot name="heading">About this price estimator</x-slot>
        <div class="px-6 py-2 w-full whitespace-pre-line">
            The displayed prices are reflective of but not a confirmed final price. It is likely that discounts on bulk orders and special offers are available.

            After you have confirmed your items, please click the "request a quote" button for a detailed form where you can add any additional requirements and/or queries.

            Once sent, we will get back to you shortly with a custom-solution for your needs.

        </div>
        <x-slot name="footer">
            <x-jet-secondary-button x-on:click="displayPriceInfoOpen = false">
                {{ __('Alright, got it!') }}
            </x-jet-secondary-button>
        </x-slot>
    </x-modal>