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

@section('style')

@endsection

@section('content')

    <main>
        <div class="bg-black">
            <div class="bg-gray-darkest py-8 xl:py-12 relative">
                <div class="the-container relative z-10">
                    <h2 class="text-2nd text-3xl uppercase font-bold">
                        {{ !empty($product['category']['name']) ? $product['category']['name'] : '' }}
                    </h2>
                    <!-- คลาส mobile-dc จะมีเฉพาะใน loop รองสุดท้าย-->
                    <div class="brcrmb">
                        <div class="brcrmb-wrrp">
                            <a class="mobile-dc chv" href="{{ mwz_route('frontend.index') }}"><svg
                                    xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 chv" viewBox="0 0 20 20"
                                    fill="currentColor">
                                    <path fill-rule="evenodd"
                                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                        clip-rule="evenodd" />
                                </svg></a>
                            <a class="mobile-dc"
                                href="{{ mwz_route('frontend.index') }}">{{ __('frontend.home') }}</a>
                        </div>
                        <div class="brcrmb-wrrp active">
                            <div class="tmx-2"><span class="slh">/ </span>
                            </div>
                            <a>{{ !empty($product['category']['name']) ? $product['category']['name'] : '' }}</a>
                        </div>
                    </div>
                </div>
                <img class="brand-lf" src="{{ Module::asset('frontend:img/brand.svg') }}" alt="Alternate Text" />
            </div>
            <div class="py-6">
                <div class="the-container">
                    @if (!empty($product['category']['parent']))
                        <div class="flex relative">
                            <form class="nvnvnv space-y-6">
                                <div class="border-b border-white">
                                    @foreach ($product['category']['parent'] as $item)
                                        <div class="cate-wrapper">
                                            <div class="cate-title open">
                                                <div class="text-lg font-bold">
                                                    {{-- {{ $item['name'] }} --}}
                                                    {{ !empty($item['name']) ? $item['name'] : '' }}
                                                </div>
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 unactive" fill="none"
                                                    viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M9 5l7 7-7 7" />
                                                </svg>
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 active" fill="none"
                                                    viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M19 9l-7 7-7-7" />
                                                </svg>
                                            </div>
                                            @if (!empty($item['list']))
                                                <ul class="space-y-2 cate-list">
                                                    @foreach ($item['list'] as $val)
                                                        @if ($val['id'] == $parent)
                                                            <li class="active" style="padding: 0 15px;"><a
                                                                    href="{{ mwz_route('frontend.product', [$val['id'], '']) }}">
                                                                    {{ !empty($val['name']) ? $val['name'] : '' }}
                                                                </a>
                                                            </li>
                                                        @else
                                                            <li style="padding: 0 15px;"><a
                                                                    href="{{ mwz_route('frontend.product', [$val['id'], '']) }}">
                                                                    {{ !empty($val['name']) ? $val['name'] : '' }}
                                                                </a>
                                                            </li>
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </form>
                    @endif
                    <div class="mx-auto">
                        <div class="choose-product-trigger">
                            {{ __('frontend.continnue_shopping') }}</div>
                        @if (!empty($product['data']['products']))
                            <div class="grid tn:grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-6">
                                @foreach ($product['data']['products'] as $item)
                                    <div class="product-name-card">
                                        <div class="product-card-img">
                                            <img src="{{ convert_image($item['image'], 2) }}" alt="Alternate Text" />
                                            <a href="{{ mwz_route('frontend.product_detail', [$item['id']]) }}"></a>
                                        </div>
                                        <div class="product-card-detail">
                                            <p>{{ !empty($item['name']) ? $item['name'] : '' }}</p>

                                            <a href="{{ mwz_route('frontend.product_detail', [$item['id']]) }}"></a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div style="height: 60vh;display: flex!important;">
                                <h1 class="h1-white-title mx-auto" style="align-self: center!important;">
                                    {{ __('frontend.not_product') }}</h1>
                            </div>
                        @endif
                        @if ($product['data']['page_total'] > 1)
                            <div class="text-center py-6">
                                <ul class="pgntn rounded" role="menubar" aria-label="Pagination">
                                    @if ($product['data']['page'] > 1)
                                        <li>
                                            <a
                                                href="{{ mwz_route('frontend.product', [$parent, (int) ($product['data']['page'] - 1)]) }}">
                                                <span>
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
                                                        viewBox="0 0 20 20" fill="currentColor">
                                                        <path fill-rule="evenodd"
                                                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                                            clip-rule="evenodd" />
                                                    </svg>
                                                </span>
                                            </a>
                                        @else
                                        <li class="skipper">
                                            <a>
                                                <span>
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
                                                        viewBox="0 0 20 20" fill="currentColor">
                                                        <path fill-rule="evenodd"
                                                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                                            clip-rule="evenodd" />
                                                    </svg>
                                                </span>
                                            </a>
                                        </li>
                                    @endif
                                    @foreach ($product['data']['resp_page'] as $item)
                                        @if ($product['data']['page'] == $item)
                                            <li class="current"><a>{{ $item }}</a></li>
                                        @else
                                            @if ($item == '...')
                                                <li class="skipper"><a>{{ $item }}</a></li>
                                            @else
                                                <li>
                                                    <a
                                                        href="{{ mwz_route('frontend.product', [$parent, $item]) }}">{{ $item }}</a>
                                                </li>
                                            @endif
                                        @endif
                                    @endforeach
                                    @if ($product['data']['page'] < $product['data']['page_total'])
                                        <li>
                                            <a
                                                href="{{ mwz_route('frontend.product', [$parent, (int) ($product['data']['page'] + 1)]) }}">
                                                <span>
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
                                                        viewBox="0 0 20 20" fill="currentColor">
                                                        <path fill-rule="evenodd"
                                                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                            clip-rule="evenodd" />
                                                    </svg>
                                                </span>
                                            </a>
                                        </li>
                                    @else
                                        <li class="skipper">
                                            <a>
                                                <span>
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
                                                        viewBox="0 0 20 20" fill="currentColor">
                                                        <path fill-rule="evenodd"
                                                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                            clip-rule="evenodd" />
                                                    </svg>
                                                </span>
                                            </a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        </div>
    </main>
@endsection

@section('script')
    <script src="{{ mix('js/frontend.js') }}"></script>
@endsection