@extends('frontend::layouts.master')

@section('content')
    <div class="container">
        <livewire:frontend::breadcrumbs.breadcrumbs name="product" active="3"/>
        <div class="flex flex-wrap -mx-4 lg:-mx-6">
            <div class="w-full lg:w-5/12 p-4 lg:p-6">
                <livewire:frontend::carousel.splide-thumbnail slideName="splide-thumbnail" />
            </div>
            <div class="w-full lg:w-7/12 p-4 lg:p-6">
                <div class="flex items-baseline gap-3">
                    <p>Real-time Stratgy</p>
                    <p>|</p>
                    <p>PC</p>
                </div>
                <h1 class='font-semibold text-26'>Product Title have a long text</h1>
                <p class="font-light text-14 my-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="flex items-baseline flex-wrap -mx-2">
                    <div class="p-2">
                        <h2 class='font-semibold text-26'>952 THB</h2>
                    </div>
                    <div class="p-2">
                        <p class="line-through text-[#aaa]">1,300 THB</p>
                    </div>
                </div>
                <div class="flex items-center flex-wrap -mx-2 mt-6">
                    <div class="w-full xs:w-1/2 p-2">
                        <button class="button-primary w-full" type="button">
                            <img src="{{ Module::asset('frontend:img/bag.svg') }}"  class="h-6" alt="ADD TO BAG">
                            <div class="font-semibold">
                                ADD TO BAG
                            </div>
                        </button>
                    </div>
                    <div class="w-full xs:w-1/2 p-2">
                        <a class="button-primary w-full h-[42px] text-black bg-white font-semibold hover:bg-gray-200" href="cart">
                            BUY NOW
                        </a>
                    </div>
                </div>
                <div class="flex flex-col xs:flex-row xs:items-center justify-start -mx-2">
                    <div class="p-2">
                        <img src="https://www.logodesign.net/images/illustration-logo.png" alt="" class="w-[120px] h-[120px] xs:w-[80px] xs:h-[80px] object-center object-contain">
                    </div>
                    <div class="px-2 pb-6 xs:py-2">
                        <div class="flex flex-col items-start">
                            <div class="flex flex-col xs:flex-row gap-2 items-baseline">
                                <p class="font-semibold leading-8">Extreme Game Shop</p>
                            </div>
                            <div class="flex gap-3">
                                {{-- สถานะ Active --}}
                                <div class="flex items-center gap-1">
                                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle opacity="1" cx="4" cy="4" r="4" fill="#05FF00"/>
                                    </svg>
                                    <p class="font-light text-12 text-[#05FF00]">Active</p>
                                </div>
                                <p class="text-12 text-gray-300">(329 Items) | <a class="" href="product-store">View Shop</a></p>
                                {{-- สถานะไม่ Active --}}
                                {{-- <div class="flex items-center gap-1">
                                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle opacity="1" cx="4" cy="4" r="4" fill="gray"/>
                                    </svg>
                                    <p class="font-light text-12 text-gray-500">Unactive</p>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                    {{-- <div class="px-2">|</div>
                    <div class="px-2"><a class="" href="product-store">View Shop</a></div> --}}
                </div>
            </div>
        </div>
    </div>
@endsection