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

@section('style')
    <style>
        .item-card .filter-green {
            display: none
        }
    </style>
@endsection

@section('content')

    <main>

        {{-- Section : Recommended --}}
        <div class="container pt-10 ">
            <div class="text-center -mx-1 pb-6 lg:pb-2">
                <div class="text-base-5xl text-darken-text font-medium">
                    {{ !empty($data['category']['name']) ? $data['category']['name'] : '' }}</div>
                <div class="text-base-xl text-lighten-text">{!! !empty($data['category']['desc']) ? $data['category']['desc'] : '' !!}</div>
            </div>
            <div class="flex items-center flex-col justify-between flex-wrap -mx-2 sm:flex-row">
                <div class="p-[.5rem] order-2 order-sm-1">
                    <div class="text-base-lg font-light">
                        @lang('frontend::lang.product_1')
                        {{ !empty($data['list']['item']) ? $data['list']['item'] : '' }}
                        @lang('frontend::lang.product_2')
                        {{ !empty($data['list']['all']) ? $data['list']['all'] : '' }}
                        @lang('frontend::lang.product_3')</div>
                </div>
                <div class="p-[.5rem] order-1 order-sm-2">
                    <div class="form-wrapper line-form flex-row flex items-center">
                        <div class="items-center font-medium text-base-xl">@lang('frontend::lang.sort') :</div>
                        <div>
                            <select class="form-style font-light" onchange="location = this.value;">
                                <option value="{{ $data['route']['url'] . '?page=' . $data['page'] . '&sort=' . 0 }}">
                                    @lang('frontend::lang.sort_all')</option>
                                <option value="{{ $data['route']['url'] . '?page=' . $data['page'] . '&sort=' . 1 }}">
                                    @lang('frontend::lang.sort_01')</option>
                                <option value="{{ $data['route']['url'] . '?page=' . $data['page'] . '&sort=' . 2 }}">
                                    @lang('frontend::lang.sort_02')</option>

                            </select>
                        </div>
                    </div>
                </div>
            </div>
            @if ($data['list']['data'])
                <div class="rec-highlight -mx-2 sm:-mx-4 mb-2 mb-lg-3">
                    @foreach ($data['list']['data'] as $k => $item)
                        @if ($k <= 3)
                            <div class="p-[.5rem] sm:p-4 {{ $k == 3 ? 'lg:hidden' : '' }}">
                                <div class="item-card animated-img text-center full-url">
                                    <div class="filter-relative">
                                        <div class="img-wrapper">
                                            <div class="asp-1b1">
                                                <img
                                                    src="{{ !empty($item['image']) && CheckFileInServer($item['image']) ? $item['image'] : Module::asset('frontend:images/1x1.png') }}" />
                                            </div>
                                        </div>
                                        <div class="filter-green">
                                            <button class="butn-whiten-bordered butn"
                                                type="button">@lang('frontend::lang.see_detail')</button>
                                        </div>
                                    </div>
                                    <p class="text-base-xl font-medium text-overflow-2">

                                        {{ !empty($item['name']) ? $item['name'] : '' }}</p>
                                    <p class="font-light text-overflow-2">{{ !empty($item['desc']) ? $item['desc'] : '' }}
                                    </p>
                                    <a href="{{ !empty($item['url']) ? $item['url'] : '#' }}"></a>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
                <div class="flex flex-wrap -mx-2 sm:-mx-4">
                    @foreach ($data['list']['data'] as $k => $item)
                        @if ($k >= 3)
                            {{-- {{ $k < 3 ? 'hidden lg:block' : '' }} --}}
                            <div class="w-1/2 md:w-4/12 p-[.5rem] sm:p-4 xl:w-3/12 {{ $k <= 3 ? 'hidden lg:block' : '' }}">
                                <div class="item-card animated-img text-center full-url">
                                    <div class="filter-relative">
                                        <div class="img-wrapper">
                                            <div class="asp-1b1">
                                                <img
                                                    src="{{ !empty($item['image']) && CheckFileInServer($item['image']) ? $item['image'] : Module::asset('frontend:images/1x1.png') }}">
                                            </div>
                                        </div>
                                        <div class="filter-green">
                                            <button class="butn-whiten-bordered butn"
                                                type="button">@lang('frontend::lang.see_detail')</button>
                                        </div>
                                    </div>
                                    <p class="text-base-xl font-medium text-overflow-2">

                                        {{ !empty($item['name']) ? $item['name'] : '' }}</p>
                                    <p class="font-light text-overflow-2">
                                        {{ !empty($item['desc']) ? $item['desc'] : '' }}</p>
                                    <a href="{{ !empty($item['url']) ? $item['url'] : '#' }}"></a>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            @endif
            <div class="py-8">
                @if (!empty($data['list']['pages_total']) && $data['list']['pages_total'] > 1)
                    <ul class="pgntn rounded" role="menubar" aria-label="Pagination">
                        <li>
                            @if ($data['list']['cur_page'] > 1)
                                <a
                                    href="{{ $data['route']['url'] . '?page=' . ((int) $data['list']['cur_page'] - 1) . '&sort=' . $data['sort'] }}">
                                    <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
                                <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>
                            @endif
                        </li>
                        @foreach ($data['list']['pagination'] as $item)
                            @if ($data['list']['cur_page'] == $item)
                                <li class="current"><a>{{ $item }}</a></li>
                            @elseif($item == '...')
                                <li><a>{{ $item }}</a></li>
                            @else
                                <li>
                                    <a
                                        href="{{ $data['route']['url'] . '?page=' . (int) $item . '&sort=' . $data['sort'] }}">{{ $item }}</a>
                                </li>
                            @endif
                        @endforeach
                        <li>
                            @if ($data['list']['cur_page'] < $data['list']['pages_total'])
                                <a
                                    href="{{ $data['route']['url'] . '?page=' . ((int) $data['list']['cur_page'] + 1) . '&sort=' . $data['sort'] }}">
                                    <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>
                            @else
                                <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>
                            @endif
                        </li>
                    </ul>
                @endif
            </div>
        </div>
    </main>
@endsection

@section('script')


@endsection