Pasted

<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"><button data-brand="brand-{{ $variable['brand_name']['Code'] }}" x-on:click="document.getElementById($event.currentTarget.getAttribute('data-brand')).click()">{{ explode(" ", $variable['brand_name']['Name'])[0] }}</button></x-slot>
                <x-slot name="category"><button data-category="category-{{ $variable['category_name']['Code'] }}" x-on:click="document.getElementById($event.currentTarget.getAttribute('data-category')).click()">{{ explode(" ", $variable['category_name']['Name'])[0] }}</button></x-slot>
                <x-slot name="title">
                    @if(isset(Auth::user()->role()->first()->Role) && Auth::user()->role()->first()->Role == 'Administrator')
                        <span><x-link href="{{ url('/procurement/edit/'.$variable['id']) }}"><x-svg.edit class="w-5 h-5 float-left"></x-svg.edit></x-link></span>
                    @endif
                    <h2 class="text-xl font-medium leading-6 tracking-wide text-gray-800 hover:text-black cursor-pointer" data-id="{{ $variable['id'] }}" x-on:click="{document.getElementById($event.currentTarget.getAttribute('data-id')).click()}">
                    {{ $variable['name'] }}
                    </h2>
                </x-slot>
                <x-slot name="search">
                    <x-svg.search class="w-5 h-5 cursor-pointer" data-id="{{ $variable['id'] }}" x-on:click="{document.getElementById($event.currentTarget.getAttribute('data-id')).click()}"></x-svg.search>
                </x-slot>
                    {{ $variable['description'] }}
                <x-slot name="price">
                    ${{ $variable['unit_price'] }} + GST
                </x-slot>
                <x-slot name="basket">
                    <div product-name="{{ $variable['name'] }}" product-price="{{ $variable['unit_price'] }}" product-id="{{ $variable['id'] }}" 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=$event.currentTarget.getAttribute('product-name'), unit_price=$event.currentTarget.getAttribute('product-price'), alt in shopping_cart ? delete shopping_cart[alt] 
                        : shopping_cart[alt] = {'quantity': 1, 'price': parseInt(unit_price), 'id': $event.currentTarget.getAttribute('product-id'), 'total_price': unit_price }}">
                        <x-svg.basket class="h-5 w-5"></x-svg.basket>
                    </div>
                </x-slot>
            </x-product-card>