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

@section('content')


    <!-- end: SECTION IMAGE FULLSCREEN -->
    <!-- SECTION IMAGE FULLSCREEN -->
    @if (!empty($banner))
        @php
            $hasMultipleBanners = count($banner) > 1;
        @endphp
        <!-- SECTION IMAGE FULLSCREEN -->
        <section class="fullscreen" id="hero-section">
            <div id="slider" class="carousel" data-items="1" data-autoplay="{{ $hasMultipleBanners ? '5000' : 'false' }}"
                data-loop="{{ $hasMultipleBanners ? '1' : '0' }}" data-drag="{{ $hasMultipleBanners ? '1' : '0' }}"
                data-arrows="{{ $hasMultipleBanners ? '1' : '0' }}" data-dots="{{ $hasMultipleBanners ? '1' : '0' }}">
                @foreach ($banner as $bn)
                    @if ($bn['type'] == 'video')
                        <div class="slide">
                            <div class="slider-text-ctrl">
                                <div class="text-middle text-center text-light">
                                    <h1 class="font_3" style="font-size:50px;">{!! $bn['detail'] ?? '' !!}</h1>
                                    <p class="font_8" style="font-size:15px;">{!! $bn['desc'] ?? '' !!}</p>
                                    <a class="btn btn-light" href="{{ $bn['url'] ?? '' }}">@lang('frontend::lang.learn_more')</a>
                                </div>
                            </div>

                            <div class="slider-media-ctrl">

                                <video autoplay muted loop playsinline webkit-playsinline>
                                    <source src="{{ $bn['src'] }}" type="video/mp4">
                                </video>

                            </div>
                            <div class="video-overlay">
                            </div>
                        </div>
                    @endif
                    @if ($bn['type'] == 'image')
                        <div class="slide">
                            <div class="slider-text-ctrl">
                                <div class="text-middle text-center text-light">
                                    <h1 class="font_3" style="font-size:50px;">{!! $bn['detail'] ?? '' !!}</h1>
                                    <p class="font_8" style="font-size:15px;">{!! $bn['desc'] ?? '' !!}</p>
                                    <a class="btn btn-light" href="{{ $bn['url'] ?? '' }}">@lang('frontend::lang.learn_more')</a>
                                </div>
                            </div>

                            <div class="slider-media-ctrl">
                                <a href="{{ $bn['link'] ?? '' }}" target="_blank"><img src="{{ asset($bn['src'] ?? '') }}"
                                        alt="Hero slide image"></a>
                            </div>
                            <div class="video-overlay">
                            </div>
                        </div>
                    @endif
                    @if ($bn['type'] == 'youtube')
                        <div class="slide">
                            <div class="slider-media-ctrl">
                                <iframe src="https://www.youtube.com/embed/{{ $bn['src'] }}"
                                    title="YouTube video player" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                <a class="btn btn-light" href="{{ $bn['url'] ?? '' }}">@lang('frontend::lang.learn_more')</a>
                            </div>
                            <div class="video-overlay">
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>

            @if (!empty($ads))
                <div id="popupBanner"
                    style="display:none; position:absolute; top:-5%; left:0; width:100%; height:100%; z-index:9999; justify-content:flex-start; align-items:center;">
                    <div class="popup-banner-inner"
                        style="position:relative; top:0%; max-width:900px; width:16%; border-radius:10px; overflow:hidden; padding:0px 50px 0px 20px;">
                        <div class="popup-carousel-viewport">
                            <div class="popup-carousel" data-original-count="5">
                                @foreach ($ads as $key => $item)
                                    <div class="popup-slide {{ $key == 0 ? 'is-active' : '' }}">
                                        <a href="{{ $item['url'] ?? '' }}">
                                            <img src="{{ asset($item['src'] ?? '') }}" alt="{{ $item['name'] ?? '' }}">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="popup-close-wrap" style="text-align:center; padding:10px;">
                            <button id="popupCloseBottom"
                                style="position: relative;
                left: -23%;
                padding: 3px 10px;
                background: #0d6d40;
                color: #fff;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 10px;">@lang('frontend::lang.close')</button>
                        </div>
                    </div>
                </div>
            @endif
        </section>
    @endif

    <!-- end: SECTION IMAGE FULLSCREEN -->
    <section class="about-section">
        <div class="about-container">
            <!-- Card Left -->
            <div class="about-card" style="--about-card-bg: url('{{ asset($brand['detail']['image'] ?? '') }}');">
                <div class="about-card-inner">
                    <a href="{{ $url['products_url'] ?? '' }}" class="btn">@lang('frontend::lang.brands_site')</a>
                    <h2>{!! $brand['detail']['name'] ?? '' !!}</h2>
                    <div class="mainbrands">
                        <div class="mainbrands-item">
                            <img src="{{ asset($brand['main']['image'] ?? '') }}">
                        </div>
                    </div>
                    <div class="subbrands">
                        <div class="subbrands-title">
                            <p><strong>{!! $brand['detail']['desc'] ?? '' !!}</strong></p>
                        </div>
                        <div class="subbrands-item">
                            @foreach (collect($brand['sub'] ?? [])->take(4) as $sub)
                                <img src="{{ asset($sub['image'] ?? '') }}">
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <!-- Card Right -->
            @if (!empty($about))
                <div class="about-card-right">
                    {{-- <h2>ABOUT ME <span class="color_42">RICH 24</span></h2> --}}
                    {!! $about['detail'] ?? '' !!}
                    <a href="{{ $url['about_url'] ?? '' }}" class="btn">@lang('frontend::lang.learn_more')</a>
                </div>
            @endif
        </div>
    </section>

    @if (!empty($products['detail']) || !empty($products['list']))
        <section class="brand-hero">
            <div class="brand-bg">
                <img src="{{ $products['detail']['image'] ?? '' }}" alt="Father and Son Playing">
            </div>
            <div class="col-md-12 headbar m-b-20 text-left sect-products-category-title">
                <h3 class="htitle m-b-20">{!! $products['detail']['name'] ?? '' !!}</h3>

            </div>
            <div class="brand-content">
                <div class="brand-media">
                    <div class="brand-btn">
                        <a href="{{ $url['products_url'] ?? '' }}" class="btn-right">@lang('frontend::lang.select_products') <i
                                class="fa fa-arrow-circle-right m-l-10"></i>
                        </a>
                    </div>

                    @foreach ($products['list'] as $k => $item)
                        @if ($k % 2 == 0)
                            <div class="brand-media-content-left-inner">
                                <div class="brand-media-content-left">
                                    <img class="brand-logo"
                                        src="{{ Module::asset('frontend:images/mo' . ($k + 1) . '.png') }}" alt="logo">
                                </div>
                                <div class="brandsname-left">
                                    <h2>{{ $item['name'] ?? '' }}</h2>
                                </div>
                                <video class="brand-video small" autoplay muted loop playsinline>
                                    <source src="{{ $item['video'] ?? '' }}" type="video/mp4">
                                </video>
                            </div>
                        @else
                            <div class="brand-media-content-right-inner">
                                <div class="brandsname-right">
                                    <h2>{!! $item['name'] ?? '' !!}</h2>
                                </div>
                                <video class="brand-video big" autoplay muted loop playsinline>
                                    <source src="{{ $item['video'] ?? '' }}" type="video/mp4">
                                </video>
                                <div class="brand-media-content-right">
                                    <img class="brand-logo" src="{{ Module::asset('frontend:images/mo2.png') }}" alt="logo">
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if (!empty($categories['dt']) || !empty($categories['list']))
        <section class="allproducts-section">
            <div class="allproducts-container">
                <!-- Card Left -->
                <div class="allcontact-card">
                    <div class="allcontact-image">
                                                @if ($type_file == 'mp4')
                            <video id="comp-m8wtdfit2_video" class="K8MSra" crossorigin="anonymous" playsinline=""
                                preload="auto" muted="" loop="" autoplay=""
                                src="{{ $categories['dt']['image'] ?? '' }}"
                                style="height: 100%; width: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>
                        @else
                            <img src="{{ $categories['dt']['image'] ?? '' }}"
                                alt="{{ $categories['dt']['name'] ?? '' }}">
                        @endif

                    </div>
                </div>

                <!-- Card Right -->
                <div class="products-highlight-section">
                    {!! $categories['dt']['detail'] ?? '' !!}

                    @if (!empty($categories['list']))
                        <div class="allproduct-category-grid">