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

@section('style')
    <style>
        @media (min-width: 1024px) {
            .piwc-b {
                margin-top: -6rem !important;
            }
        }
    </style>
@endsection

@section('content')

    <main>
        <div class="-my-4">
            <!-- แบนเนอร์ใช้ภาพสองขนาด Desktop : 1920 x 670 , Mobile : 1920 x 864-->
            @empty(!$data['banner'])
                @if (count($data['banner']) > 1)
                    <div class="onebnne owl-carousel owl-theme owl-arrow-nav rect-nav">
                        @foreach ($data['banner'] as $item)
                            <div class="item">
                                <!-- Images Desktop-->
                                <div class="hidden md:block aspect-w-20 aspect-h-7">
                                    <img src="{{ convert_image($item['image'], 5) }}" alt="Alternate Text" />
                                </div>
                                <!-- Images Mobile-->
                                <div class="md:hidden aspect-w-20 aspect-h-9">
                                    <img src="{{ convert_image($item['image'], 5) }}" alt="Alternate Text" />
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    @foreach ($data['banner'] as $item)
                        <div class="item">
                            <!-- Images Desktop-->
                            <div class="hidden md:block aspect-w-20 aspect-h-7">
                                <img src="{{ convert_image($item['image'], 5) }}" alt="Alternate Text" />
                            </div>
                            <!-- Images Mobile-->
                            <div class="md:hidden aspect-w-20 aspect-h-9">
                                <img src="{{ convert_image($item['image'], 5) }}" alt="Alternate Text" />
                            </div>
                        </div>
                    @endforeach
                @endif
            @endempty
        </div>
        @empty(!$data['product'])
            <div class="bg-black py-8 sm:py-16 relative">
                <div class="the-container">
                    <div class="product-container">
                        <h1 class="h1-white-title sep-l-red">{{ __('frontend.product_title') }}</h1>
                        @foreach ($data['product'] as $item)
                            @if ($item['id'] == 1)
                                <div class="product-item-wrapper piwc-o">
                                    <div class="title-group">
                                        <h2 class="h2-white-title" style="text-transform: uppercase;">
                                            {{ !empty($item['name']) ? $item['name'] : '' }}
                                        </h2>
                                        <a class="red-undel"
                                            href="{{ mwz_route('frontend.product', [$item['id'], '']) }}">{{ __('frontend.see_more') }}</a>
                                    </div>
                                    <img class="product-item" src="{{ convert_image($item['image_category'], 2) }}"
                                        alt="Alternate Text" />
                                </div>
                            @endif
                            @if ($item['id'] == 2)
                                <div class="product-item-wrapper piwc-c">
                                    <div class="title-group">
                                        <h2 class="h2-white-title" style="text-transform: uppercase;">
                                            {{ !empty($item['name']) ? $item['name'] : '' }}
                                        </h2>
                                        <a class="red-undel"
                                            href="{{ mwz_route('frontend.product', [$item['id'], '']) }}">{{ __('frontend.see_more') }}</a>
                                    </div>
                                    <img class="product-item" src="{{ convert_image($item['image_category'], 2) }}"
                                        alt="Alternate Text" />
                                </div>
                            @endif
                            @if ($item['id'] == 3)
                                <div class="product-item-wrapper piwc-b">
                                    <div class="title-group">
                                        <h2 class="h2-white-title" style="text-transform: uppercase;">
                                            {{ !empty($item['name']) ? $item['name'] : '' }}
                                        </h2>
                                        <a class="red-undel"
                                            href="{{ mwz_route('frontend.product', [$item['id'], '']) }}">{{ __('frontend.see_more') }}</a>
                                    </div>
                                    <img class="product-item" src="{{ convert_image($item['image_category'], 2) }}"
                                        alt="Alternate Text" />
                                </div>
                            @endif
                        @endforeach
                        <img class="img-brand" src="{{ Module::asset('frontend:img/brand.svg') }}"
                            alt="Alternate Text" />
                    </div>
                </div>
            </div>
        @endempty
        @empty(!$data['about'])
            <div class="red-ovbg py-8 sm:py-16" style="background-image:url({{ Module::asset('frontend:img/rev.jpg') }})">
                <div class="the-container relative z-10">
                    <h1 class="h1-white-title sep-l-white">{{ __('frontend.about_veloil') }}</h1>
                    <div class="grid-2-m1 gap-4 mt-8">
                        <h1 class="h1-white-title">
                            {{ !empty($data['about']['title_name']) ? $data['about']['title_name'] : '' }}
                        </h1>

                        <div>
                            <div class="content-container text-all-white">
                                <p>
                                    {!! !empty($data['about']['description']) ? $data['about']['description'] : '' !!}
                                </p>
                            </div>
                            <a class="butn-3rd butn-darker butn-icol font-bold text-xl mt-6"
                                href="{{ mwz_route('frontend.about') }}">
                                <div class="txt">{{ __('frontend.load_about_more') }}</div><svg
                                    xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="red-ov"></div>
            </div>
        @endempty
        @empty(!$data['news'])

            <div class="py-8 sm:py-16 relative">
                <div class="the-container">
                    <h1 class="h1-title sep-l-red">{{ __('frontend.new_activity') }}</h1>
                    @if (count($data['news']) > 3)
                        <div class="owl-carousel owl-theme owl-arrow-nav rect-nav newsOwl">
                            @foreach ($data['news'] as $item)
                                <div class="item">
                                    <div class="content-block">
                                        <div class="product-card-img">
                                            <img src="{{ convert_image($item['image'], 4) }}" alt="Alternate Text" />
                                            <a href="{{ mwz_route('frontend.news_detail', [$item['id']]) }}"></a>
                                        </div>
                                        <div class="product-card-detail">
                                            <div class="date">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
                                                    viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                </svg>
                                                <p>
                                                    {{ !empty($item['publish_at']) ? $item['publish_at'] : '' }}
                                                </p>
                                            </div>
                                            <div class="detail" style="min-height: 49px !important;">
                                                {{ !empty($item['name']) ? $item['name'] : '' }}
                                            </div>
                                            <a href="{{ mwz_route('frontend.news_detail', [$item['id']]) }}">
                                                {{ __('frontend.see_more') }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="grid gap-4 mt-6 sm:grid-cols-2 sm:gap-8 lg:grid-cols-3 2xl:grid-cols-4 text-center">
                            @foreach ($data['news'] as $item)
                                <div class="item">
                                    <div class="content-block">
                                        <div class="product-card-img">
                                            <img src="{{ convert_image($item['image'], 4) }}" alt="Alternate Text" />
                                            <a href="{{ mwz_route('frontend.news_detail', [$item['id']]) }}"></a>
                                        </div>
                                        <div class="product-card-detail">
                                            <div class="date">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
                                                    viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                </svg>
                                                <p>
                                                    {{-- {{ $item['publish_at'] }} --}}
                                                    {{ !empty($item['publish_at']) ? $item['publish_at'] : '' }}

                                                </p>
                                            </div>
                                            <div class="detail" style="min-height: 50px !important;">
                                                {{ !empty($item['name']) ? $item['name'] : '' }}
                                            </div>
                                            <a
                                                href="{{ mwz_route('frontend.news_detail', [$item['id']]) }}">{{ __('frontend.see_more') }}</a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                
                 
                </div>
            </div>
        @endempty

        </div>
    </main>
@endsection

@section('script')
    <link rel="stylesheet" href="{{ mix('css/frontend.css') }}">
@endsection