Untitled

mail@pastecode.io avatar
unknown
plain_text
15 days ago
16 kB
3
Indexable
Never
<div class="px-5 lg:px-36 sm:px-10">
    <div class="flex w-full flex-col md:flex-row md:gap-5">
        <div class="w-full">
            <div class="h-full md:pl-6">
                @if(count($product->thumbnails) === 1)
                    <div class="w-full aspect-square p-5 md:p-0 pb-5">
                        <img src="{{ $product->thumbnails[0] }}" alt="Product Thumbnail"
                             class="h-full w-full object-cover rounded-lg">
                    </div>
                @else
                    <livewire:front.layouts.product-gallery :thumbnails="$product->thumbnails"/>
                @endif
            </div>
        </div>

        <div class="col-md-8 w-full px-6 md:px-0">
            <h3 class="font-black text-2xl">{{ $product->name }}</h3>
            <p class="text-sm mt-2">Artikelnr: {{ $product->article_number }}</p>
            @if(auth()->check() && auth()->user()->canOrder())
                @if(auth()->user()->client_type === 'silver')

                    <div class="flex gap-4 my-3">
                        @if($product->productPrice?->silver_discount_price < $product->productPrice?->silver_price)
                            <h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->silver_discount_price ? "$ ".$product->productPrice?->silver_discount_price : '' }}</h3>
                            <del
                                    class="text-gray-300 text-2xl font-bold">{{ $product->productPrice?->silver_price ? "$ ".$product->productPrice?->silver_price : '' }}</del>
                        @else
                            <h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->silver_discount_price ? "$ ".$product->productPrice?->silver_discount_price : '' }}</h3>
                        @endif
                    </div>

                @elseif(auth()->user()->client_type === 'gold')
                    <div class="flex gap-4 my-3">
                        @if($product->productPrice?->gold_discount_price < $product->productPrice?->gold_price)
                            <h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->gold_discount_price ? "$ ".$product->productPrice?->gold_discount_price : '' }}</h3>
                            <del
                                    class="text-gray-300 text-2xl font-bold">{{ $product->productPrice?->gold_price ? "$ ".$product->productPrice?->gold_price : '' }}</del>
                        @else
                            <h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->gold_discount_price ? "$ ".$product->productPrice?->gold_discount_price : '' }}</h3>
                        @endif
                    </div>
                @elseif(auth()->user()->client_type === 'export')
                    <div class="flex gap-4 my-3">
                        @if($product->productPrice?->export_discount_type < $product->productPrice?->export_price)
                            <h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->export_discount_price ? "$ ".$product->productPrice?->export_discount_price : '' }}</h3>
                            <del
                                    class="text-gray-300 text-2xl font-bold">{{ $product->productPrice?->export_price ? "$ ".$product->productPrice?->export_price : '' }}</del>
                        @else
                            <h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->export_discount_price ? "$ ".$product->productPrice?->export_discount_price : '' }}</h3>
                        @endif
                    </div>
                @else
                    <div class="flex gap-4 my-3">
                        @if($product->productPrice->default_discount_type < $product->productPrice?->default_price)
                            <h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->default_discount_type ? "$ ".$product->productPrice?->default_discount_type : '' }}</h3>
                            <del
                                    class="text-gray-300 text-2xl font-bold">{{ $product->productPrice?->default_price ? "$ ".$product->productPrice?->default_price : '' }}</del>
                        @else
                            <h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->default_discount_type ? "$ ".$product->productPrice?->default_discount_type : '' }}</h3>
                        @endif
                    </div>
                @endif
            @endif
            <div>
                <p class="text-xs font-normal leading-7 text-gray-400">{{ $product->description }}</p>
            </div>
            <div class="flex mt-4 gap-2 items-center">
                <div class="flex">
                    @for($i = 0; $i<number_format(data_get($reviews,'overallPercentage'), 0); $i++)
                        <x-icons.star-icon class="w-6 h-6" color="#DEC8A2" stroke="#DEC8A2"/>
                    @endfor
                    @for($i = 0; $i<5-number_format(data_get($reviews,'overallPercentage'), 0); $i++)
                        <x-icons.star-icon class="w-6 h-6" color="none" stroke="#DEC8A2"/>
                    @endfor
                </div>
                <p class="text-gray-500 ">{{ data_get($reviews,'totalReviews') }} reviews</p>
            </div>
            <div>
                <h1 class="mt-6">Product Colors</h1>
                <div class="flex">
                    @if($product->productColors->isEmpty())
                        <div x-data="colorPicker()" class="space-y-2">
                            @if($this->customColor)
                                <div @click="colorPicker.show()" x-ref="colorPicker">
                                       <span :style="'background-color: ' + hexaColor"
                                             class="inline-block w-8 h-8 mt-0.5 border border-gray-300 cursor-pointer colorPicker"></span>
                                </div>
                            @endif
                        </div>
                    @elseif($product->productColors[0]->color == null)
                        <div x-data="colorPicker()" class="space-y-2">
                            @if($this->customColor)
                                <div @click="colorPicker.show()" x-ref="colorPicker">
                                       <span :style="'background-color: ' + hexaColor"
                                             class="inline-block w-8 h-8 mt-0.5 border border-gray-300 cursor-pointer colorPicker"></span>
                                </div>
                            @endif
                        </div>

                    @elseif($product->productColors->count() == 1)
                        <div class="border-2 p-0.5 rounded-md w-10 h-10 border-black cursor-pointer">
                            <div class="rounded w-8 h-8"
                                 wire:click="selectColor('{{ $product->productColors[0]->color }}')"
                                 style="background-color: {{ $product->productColors[0]->color }};">
                            </div>
                        </div>
                    @else
                        @foreach($product->productColors as $color)
                            <div class="flex">
                                <div
                                        class="border-2 p-0.5 rounded-md w-10 h-10 @if($selectedColor === $color->color) border-black @else border-transparent @endif">
                                    <div class="rounded w-8 h-8 cursor-pointer"
                                         wire:click="selectColor('{{$color->color}}')"
                                         style="background-color: {{$color->color}};">
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
            <div class="flex mt-5 items-center gap-4 flex-wrap">
                @if(auth()->check() && auth()->user()->canOrder())
                    <div class="flex">
                        <button class="flex justify-center items-center bg-gray-100 rounded-md w-9 h-9"
                                wire:click="decrementQuantity()">
                            <x-icons.minus-icon class="w-4"/>
                        </button>
                        <input type="number" wire:model="quantity" min="1" wire:change="checkQuantity"
                               class="flex justify-center text-center border border-gray-200 rounded-md w-12 h-9 ml-1 mr-1 number-input px-1">
                        <button class="flex justify-center items-center bg-gray-100 rounded-md w-9 h-9"
                                wire:click="incrementQuantity()">
                            <x-icons.plus-icon class="w-4"/>
                        </button>
                    </div>

                    <x-custom-button class="flex justify-center bg-eco-400 rounded-md text-white items-center"
                                     wire:click="addProductToCart({{$product->id}})">Add to cart
                    </x-custom-button>
                @endif

                <div class="flex items-center">
                    @if(auth()->check())
                        @if($this->isWishlist && $product->wishlists->where('user_id', auth()->id())->isNotEmpty())
                            <button wire:click.stop="removeFromWishlist({{ $product->id }})">
                                <x-icons.heart-icon-fill
                                        class="cursor-pointer relative w-5 h-5"></x-icons.heart-icon-fill>
                            </button>
                        @else
                            <button wire:click.stop="addToWishlist({{ $product->id }})">
                                <x-icons.heart-icon class="cursor-pointer relative w-5 h-5"></x-icons.heart-icon>
                            </button>
                        @endif
                    @endif
                </div>
            </div>
            <div class="flex">
                @foreach($product->offers as $offer)
                    <div class="flex items-center justify-center gap-2 border border-gray-200 mt-5 p-2 rounded-md mr-5">
                        <h1 class="text-md font-semibold">{{ $offer['price'] }}$</h1>
                        <div class="rounded w-1 h-1 bg-black"></div>
                        <h1 class="text-md font-normal">{{ $offer['quantity'] }} piece</h1>
                    </div>
                @endforeach
            </div>
            <div class="flex gap-10 pt-4 flex-wrap">
                @foreach ($product->pdfcertificates as $certificate)
                    <div class="w-16 items-center flex flex-col">
                        <a href="{{ $certificate->getUrl() }}" target="_blank">
                            <x-icons.pdf-icon class="w-6 h-6 text-notEco-500"/>
                        </a>
                        <p class="text-xs w-full truncate">{{ $certificate->name }}</p>
                    </div>
                @endforeach
            </div>
            @livewire('front.product.partials.features', ['filterOptions' => $filterOptions])
        </div>
    </div>
    <div class="mt-7">
        @livewire('front.product.partials.characteristics', ['characteristics' => $characteristics])

        <div class="text-center my-10 px-3 sm:px-10 lg:px-56">
            <h1 class="font-semibold text-2xl m-5">Our Costumer's Opinion</h1>
            <p class="text-xs mt-3 text-slate-500">Society has put up so many boundaries, so many limitations on what’s
                right and wrong that it’s almost impossible to get a pure thought out.
                Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost
                impossible to get a pure thought out.</p>
        </div>

        @if(auth()->check() && auth()->user()->canOrder())
            @livewire('front.product.partials.submitRating', ['productId' => $product->id])
        @endif

        <div class="flex mt-10 gap-10 md:flex-row flex-col">
            <div class="md:w-2/5 w-full flex flex-col gap-4">
                <h1 class="font-bold text-2xl">Client Reviews</h1>
                <div>
                    <div class="flex items-center gap-2 flex-wrap">
                        <h1 class="text-slate-500 text-base font-extrabold">{{ number_format(data_get($reviews,'overallPercentage'), 2) }}</h1>
                        <div class="flex">
                            @for($i = 0; $i<number_format(data_get($reviews,'overallPercentage'), 0); $i++)
                                <x-icons.star-icon class="w-6 h-6" color="#DEC8A2" stroke="#DEC8A2"/>
                            @endfor
                            @for($i = 0; $i<5-number_format(data_get($reviews,'overallPercentage'), 0); $i++)
                                <x-icons.star-icon class="w-6 h-6" color="none" stroke="#DEC8A2"/>
                            @endfor
                        </div>
                        <p>Based on {{ data_get($reviews,'totalReviews') }} reviews</p>
                    </div>
                    @for($i=5; $i>0; $i--)
                        <div class="mt-5 flex items-center gap-2">
                            <h1>{{ $i }}</h1>
                            @if(data_get($reviews, 'starCountsAndPercentages.' . ($i) . '.percentage') > 0)
                                <x-icons.star-icon class="w-6 h-6" color="#DEC8A2" stroke="#DEC8A2"/>
                            @else
                                <x-icons.star-icon class="w-6 h-6" color="none" stroke="#DEC8A2"/>
                            @endif
                            <div class="w-full bg-gray-100 rounded-full h-2.5">
                                <div class="bg-notEco-500 h-2.5 rounded-full"
                                     style="width: {{ round(data_get($reviews, 'starCountsAndPercentages.' . ($i) . '.percentage') ?? 0) }}%"></div>
                            </div>
                            <h1 class="w-6 mr-8 md:mr-3">{{ round(data_get($reviews, 'starCountsAndPercentages.' . ($i) . '.percentage') ?? 0) }}%</h1>
                        </div>
                    @endfor
                </div>
                <h1 class="font-semibold text-xl mt-5">We value your opinion</h1>
                <p class="text-gray-400">The time is now for it to be okay to be great. People in this world shun people
                    for being great.</p>
            </div>

            @livewire('front.product.partials.ratings', ['id' => $product->id])
        </div>

        @if(count($products) > 0)
            <div class="my-5">
                <div class="flex justify-between">
                    <h1 class="font-semibold text-2xl">Similar Products</h1>
                    <p class="font-medium text-base flex items-center gap-1">See all
                        <x-icons.chevron-up class="h-4 w-4 rotate-90"/>
                    </p>
                </div>
                <hr class="mt-3">
                <div class="grid grid-cols-4 w-full gap-5 mt-5">
                    @foreach ($products as $product)
                        <livewire:front.components.product-card :product="$product" :key="$product->id"/>
                    @endforeach
                </div>
            </div>
        @endif

        @livewire('front.layouts.main-banners', ['id' => $product->id])
    </div>
</div>
Leave a Comment