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

@section('content')
    @php
        $product = $data['product'][0] ?? null;
    @endphp
    <div class="container pt-4 ">
        <livewire:frontend::breadcrumbs.breadcrumbs name="products" active="3" sub="{!! mwz_getTextString($product['name'] ?? '') !!}" />
        <div class="flex flex-wrap -mx-4 lg:-mx-6 pb-6">
            <div class="w-full lg:w-5/12 p-4 lg:p-6">
                @php
                    $images = !empty($product['imgs']) ? $product['imgs'] : '';
                @endphp
                <livewire:frontend::carousel.splide-thumbnail slideName="splide-thumbnail" :images=$images />
            </div>
            <div class="w-full lg:w-7/12 p-4 lg:p-6">
                <div class="flex flex-col md:flex-row gap-2 md:justify-items-center items-start md:items-center pb-2 md:p-0">
                    <h1 class='font-bold text-26'>{!! mwz_getTextString($product['name'] ?? '') !!}</h1>
                    @if (!empty($product['status']['new']))
                        <div class="stat-badge">
                            {{ __('frontend::frontend.label.new') }}
                        </div>
                    @endif
                    @if (!empty($product['status']['promotion']))
                        <div class="stat-badge">
                            {{ __('frontend::frontend.label.promotion') }}
                        </div>
                    @endif
                </div>
                <div class="flex items-baseline text-13 -mt-1 gap-1 capitalize opacity-50">
                    <p>SKU : {{ $product['detail']['sku'] ?? '' }}</p>
                    @if (!empty($product['detail']['brand']))
                        <p>|</p>
                        <p>{{ $product['detail']['brand'] }}</p>
                    @endif
                    @if (!empty($product['detail']['category']))
                        <p>|</p>
                        <p>{{ $product['detail']['category'] }}</p>
                    @endif
                </div>

                <p class="font-normal text-14 my-6">{!! $product['desc'] ?? '' !!}</p>
                @if (!empty($product['file']))
                    <div class="py-2">
                        <a class="font-normal text-14 my-6 underline" href="{{ $product['file'] }}" target="_blank">{{ __('frontend::frontend.download_pdf') }}</a>
                    </div>
                @endif
                <div class="flex items-baseline flex-wrap -mx-2">
                    @if (!empty($product['status']['promotion']))
                        @if (!empty($product['price']['after']))
                            <div class="p-2">
                                <h2 class='font-bold text-20 md:text-26'>{{ $product['price']['after'] ?? '' }} {{ __('frontend::frontend.label.thb') }}</h2>
                            </div>
                            <div class="p-2">
                                <p class="line-through text-[#aaa]">{{ $product['price']['before'] ?? '' }} {{ __('frontend::frontend.label.thb') }}</p>
                            </div>
                        @else
                            <div class="p-2">
                                <h2 class='font-bold text-20 md:text-26'>{{ $product['price']['before'] ?? '' }} {{ __('frontend::frontend.label.thb') }}</h2>
                            </div>
                        @endif
                    @else
                        <div class="p-2">
                            <h2 class='font-bold text-20 md:text-26'>{{ $product['price']['before'] ?? '' }} {{ __('frontend::frontend.label.thb') }}</h2>
                        </div>
                    @endif
                </div>
                {{-- @if (!empty($data['product']) && $data['product']->price_sale->stock > 0) --}}
                @if (!empty($product))
                    <input id="product_id" name="product_id" type="hidden" value="{{ $product['id'] ?? 0 }}">
                    <input id="force_set_quantity" name="force_set_quantity" type="hidden" value="0">
                    <div class="flex">
                        <div class="flex justify-center items-center font-bold">
                            <p class="text-14 md:text-16">{{ __('frontend::frontend.quantity') }}:</p>
                        </div>
                        <div class="flex flex-row justify-center items-center">
                            <div class="num-pos">
                                <div class="custom-number-input h-10 w-32 lg:ml-auto">
                                    <div class="flex flex-row h-10 w-full rounded-sm relative bg-transparent mt-1">
                                        <button class="h-full w-20 rounded-l cursor-pointer outline-none" type="button" onclick="decrement('quantity');">
                                            <span class="m-auto text-2xl font-normal">−</span>
                                        </button>
                                        {{-- <input class="outline-none focus:outline-none text-center w-full bg-gray-100 font-semibold text-md hover:text-black focus:text-black  lg:text-basecursor-default flex items-center text-gray-700 input-number" id="quantity" name="quantity" data-stock="{{ $data['product']->price_sale->stock ?? 0 }}" type="text" value="{{ !empty($data['product']->price_sale->stock) ? 1 : 1 }}"> --}}
                                        <input class="outline-none focus:outline-none text-center w-full bg-gray-100 font-semibold text-md hover:text-black focus:text-black  lg:text-basecursor-default flex items-center text-gray-700 input-number" id="quantity" name="quantity" data-stock="999999" type="text" value="1">
                                        <button class=" h-full w-20 rounded-r cursor-pointer" type="button" onclick="increment('quantity');">
                                            <span class="m-auto text-2xl font-normal">+</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center flex-wrap -mx-2 mt-6">
                        @php
                            $buttons = [
                                [
                                    'class' => 'button-primary',
                                    'text' => __('frontend::frontend.btn.add_to_cart'),
                                    'onclick' => 'addToCart();',
                                ],
                                [
                                    'class' => 'button-secondary',
                                    'text' => __('frontend::frontend.btn.buy_now'),
                                    'onclick' => "addToCart('" . mwz_route('frontend.slug', ['slug' => 'cart']) . "');",
                                ],
                            ];
                        @endphp
                        @if (Auth::guard('member')->check())
                            @foreach ($buttons as $button)
                                <div class="w-full xs:w-1/2 p-2">
                                    <button class="{{ $button['class'] }} w-full pid-{{ $product['id'] }} btn-action" type="button" onclick="{{ $button['onclick'] }}">
                                        <div class="font-semibold">
                                            {{ $button['text'] }}
                                        </div>
                                    </button>
                                </div>
                            @endforeach
                        @else
                            @foreach ($buttons as $button)
                                <div class="w-full xs:w-1/2 p-2">
                                    <a class="{{ $button['class'] }} w-full pid-{{ $product['id'] }} btn-action" href="{{ mwz_route('frontend.login', ['redirect' => $data['pageInit']['url'] ?? '']) }}">
                                        <div class="font-semibold">
                                            {{ $button['text'] }}
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{ module_vite('build-frontend', 'resources/assets/js/cart.js') }}
@endsection