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

@section('style')
    <style>
        .video_src {
            width: 100% !important;
            height: inherit;
            margin: auto;
        }

        @media (max-width: 575.98px) {

            .animated-img {
                width: 100% !important;
                height: inherit !important;
            }

            .video_src {
                height: inherit;
            }
        }
    </style>
@endsection

@section('content')

    <main>
        {{-- Section : Banner Slide --}}
        @if (!empty($data['banner']))
            <input type="hidden" name="banner" id="banner"
                value="{{ !empty($data['banner']) ? count($data['banner']) : 0 }}">
            <div class="splide splide-banner-slide">
                <div class="splide__track">
                    <div class="splide__list">
                        @foreach ($data['banner'] as $item)
                            <div class="splide__slide">
                                <div class="asp-12b5 default-bg-cover"
                                    style="background-image:url({{ !empty($item['image']) && CheckFileInServer($item['image']) ? $item['image'] : Module::asset('frontend:img/banner.jpg') }})">
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        {{-- Section : ราคาทองคำ --}}
        @if (!empty($data['gold']))
            <div class="bg-2nd pt-3">
                <div class="container">
                    <div
                        class="flex items-center pb-[.75rem] sm:py-6 flex-col sm:flex-row space-y-3 sm:space-y-0 sm:items-start justify-between">
                        <div>
                            <h1 class="text-base-5xl leading-8">@lang('frontend::lang.gold_price')</h1>
                            <p class="font-light">@lang('frontend::lang.gold_trade_association')</p>
                        </div>
                        <div class="dayt">
                            <p> <span class="text-base-xl">@lang('frontend::lang.daily') </span>
                                <span class="font-medium text-base-xl ml-2">
                                    {{ !empty($data['gold']['date']) ? date_Formate($data['gold']['date']) : '' }}</span>
                            </p>
                            <p> <span class="text-base-xl">@lang('frontend::lang.time') </span>
                                <span class="font-medium text-base-xl ml-2">
                                    {{ !empty($data['gold']['date']) ? date('H:i:s', strtotime($data['gold']['date'])) : '' }}
                                    @lang('frontend::lang.time_last')
                                </span>
                                <span class="text-base-xl ml-4">@lang('frontend::lang.the_time')</span>
                                <span class="font-medium text-base-xl ml-2">
                                    {{ !empty($data['gold']['total']) ? $data['gold']['total'] : 0 }}</span>
                            </p>
                        </div>
                    </div>
                    @if (!empty($data['gold']['list']))
                        <div class="price-table pb-[.15rem] sm:pb-6 lg:pb-8">
                            <div class="price--head">
                                <div>@lang('frontend::lang.gold_type') </div>
                                <div>@lang('frontend::lang.buy') </div>
                                <div>@lang('frontend::lang.sale') </div>
                                <div>@lang('frontend::lang.change') </div>
                            </div>

                            @foreach ($data['gold']['list'] as $item)
                                <div class="price--row">
                                    <div class="mobile-head">{{ !empty($item['name']) ? $item['name'] : '' }} </div>
                                    <div class="price--detail">
                                        <div class="prc-gld">
                                            <p>@lang('frontend::lang.buy') </p>
                                            <p>{{ !empty($item['buy']) ? number_format($item['buy'], 2) : '' }} </p>
                                        </div>
                                        <div class="prc-gld">
                                            <p>@lang('frontend::lang.sale')</p>
                                            <p>{{ !empty($item['sale']) ? number_format($item['sale'], 2) : '' }} </p>
                                        </div>
                                        <div class="prc-gld">
                                            <p>@lang('frontend::lang.change')</p>
                                            <div class="flex items-center space-x-2 justify-center">
                                                @if (!empty($item['status']) && $item['status'] == 1)
                                                    <img src="{{ Module::asset('frontend:img/icon/up.svg') }}" />
                                                    <p class="text-green text-base-4xl font-semibold">
                                                        {{ !empty($item['rate']) ? number_format($item['rate'], 2) : 0 }}
                                                    </p>
                                                @elseif (!empty($item['status']) && $item['status'] == 2)
                                                    <img style="height: 30px"
                                                        src="{{ Module::asset('frontend:img/updown.png') }}" />
                                                @else
                                                    <img src="{{ Module::asset('frontend:img/icon/down.svg') }}" />
                                                    <p class="text-red text-base-4xl font-semibold">
                                                        {{ !empty($item['rate']) ? number_format($item['rate'], 2) : 0 }}
                                                    </p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        @endif

        {{-- Section : About SSNP --}}
        <div class="bg-linear-gold h-1"></div>
        @if ((!empty($data['about']['image']) && CheckFileInServer($data['about']['image'])) ||
            !empty($data['about']['name']))
            <div class="bg-linear-green xl:py-12">
                <div class="about-align">
                    <div class="animated-img flex items-center">
                        <div class="overflow-hidden sm:asp-15b11 flex-1">
                            @if (!empty($data['about']['type']))
                                @switch($data['about']['type'])
                                    @case(1)
                                        @if (!empty($data['about']['image']) && CheckFileInServer($data['about']['image']))
                                            <img
                                                src="{{ !empty($data['about']['image']) && CheckFileInServer($data['about']['image']) ? $data['about']['image'] : Module::asset('frontend:images/1x1.png') }}" />
                                        @endif
                                    @break

                                    @case(2)
                                        @if (!empty($data['about']['image']) && CheckFileInServer($data['about']['image']))
                                            <div style="background-color: black">

                                                <video controls autoplay muted playsinline class="video_src">
                                                    <source
                                                        src="{{ !empty($data['about']['image']) ? $data['about']['image'] : '' }}"
                                                        type="video/mp4">
                                                    Sorry, your browser doesn't support embedded videos.
                                                </video>
                                            </div>
                                        @endif
                                    @break

                                    @case(3)
                                        @if (!empty($data['about']['image']))
                                            <div style="background-color: black">
                                                <iframe class="video_src"
                                                    src="{{ !empty($data['about']['image']) ? $data['about']['image'] : '' }}?rel=0&autoplay=1&mute=1&controls=0&showinfo=0&loop=1"
                                                    frameborder="0" allowfullscreen></iframe>
                                            </div>
                                        @endif
                                    @break
                                @endswitch
                            @endif

                        </div>
                    </div>
                    <div class="lg-max-h">
                        <div class="text-editor">
                            {!! !empty($data['about']['name']) ? $data['about']['name'] : '' !!}
                        </div>
                        <div class="butn butn-2nd text-whiten text-base-xl mt-4 full-url">@lang('frontend::lang.know_us')
                            <a href="{{ !empty($data['about']['url']) ? $data['about']['url'] : '#' }}"></a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="bg-linear-gold h-1"></div>

        {{-- Section : Category --}}
        <input type="hidden" name="category" id="category"
            value="{{ !empty($data['category']) ? count($data['category']) : 0 }}">
        @if (!empty($data['category']))
            <div class="container mb-[1.5rem] lg:mb-16">
                <div class="flex items-center justify-center sm:justify-between">
                    <div>
                        <p class="text-base-4xl text-center py-6 md:py-10"><span
                                class="font-semibold">@lang('frontend::lang.product_category')</span>
                        </p>
                    </div>
                </div>
                <div class="splide splide-category">
                    <div class="splide__track">
                        <div class="splide__list">
                            @foreach ($data['category'] as $item)
                                <div class="splide__slide">
                                    <div class="animated-img full-url">
                                        <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>
                                        <p class="text-base-xl font-medium">
                                            {{ !empty($item['name']) ? $item['name'] : '' }}</p>
                                        <a href="{{ !empty($item['url']) ? $item['url'] : '#' }}"></a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Section : Recommended --}}
        <div class="container">
            <div class="flex items-center justify-center sm:justify-between -mx-4">
                <div class="p-3">
                    <p class="font-medium text-base-4xl">@lang('frontend::lang.recommended_product') </p>
                </div>
                <div class="p-3 hidden sm:block">
                    <div class="butn butn-2nd-bordered butn-w150 full-url">@lang('frontend::lang.view_all')
                        <a
                            href="{{ !empty($data['route']['category']['url']) ? $data['route']['category']['url'] : '#' }}"></a>
                    </div>
                </div>
            </div>
            @if (!empty($data['product']['info']))
                <input type="hidden" name="info" id="info"
                    value="{{ !empty($data['product']['info']) ? count($data['product']['info']) : 0 }}">
                <div class="mb-[2rem] lg:mb-16">
                    <div class="splide splide-info-slide">
                        <div class="splide__track">
                            <div class="splide__list">
                                @foreach ($data['product']['info'] as $item)
                                    <div class="splide__slide">
                                        <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>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <div class="rec-highlight -mx-2 mb-2 mb-lg-5">
                    @foreach ($data['product']['info'] as $item)
                        <div class="px-[0.5rem]">
                            <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>
                                <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>
                    @endforeach
                </div> --}}
            @endif
            <input type="hidden" name="product" id="product"
                value="{{ !empty($data['product']['list']) ? count($data['product']['list']) : 0 }}">
            @if (!empty($data['product']['list']))
                <div class="mb-[2rem] lg:mb-16">
                    <div class="splide splide-recommended">
                        <div class="splide__track">
                            <div class="splide__list">
                                @foreach ($data['product']['list'] as $item)
                                    <div class="splide__slide">
                                        <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>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="pt-[1.75rem] sm:hidden text-center">
                        <div class="butn butn-2nd-bordered mx-auto butn-w150 full-url">@lang('frontend::lang.view_all')
                            <a
                                href="{{ !empty($data['route']['category']['url']) ? $data['route']['category']['url'] : '#' }}">
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- Section : News and Activity --}}
        @if (!empty($data['news']))
            <div class="bg-f7">
                <div class="container pb-[1rem] lg:pb-12 pt-[2rem] lg:pt-12">
                    <div class="flex items-center justify-center sm:justify-between pb-[1rem] lg:pb-6 -mx-3">
                        <div class="px-3">
                            <p class="font-medium text-base-4xl">@lang('frontend::lang.news_activity')</p>
                        </div>
                        <div class="px-3 hidden sm:block">
                            <div class="butn butn-2nd-bordered butn-w150 full-url">@lang('frontend::lang.view_all')
                                <a
                                    href="{{ !empty($data['route']['news']['url']) ? $data['route']['news']['url'] : '#' }}">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="news-area">
                        @if (!empty($data['news'][0]))
                            <div class="news-card-col-1 hidden lg:flex">
                                <div class="news-card-item">
                                    <div class="article-card animated-img full-url">

                                        <div class="filter-relative">
                                            <div class="img-wrapper">
                                                <div class="asp-1b1">
                                                    <img class="object-cover"
                                                        src="{{ !empty($data['news'][0]['image']) && CheckFileInServer($data['news'][0]['image']) ? $data['news'][0]['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>
                                        <div class="detail-wrapper">
                                            <div class="flex items-center space-x-2 my-2">
                                                <img class="the-icon"
                                                    src="{{ Module::asset('frontend:img/icon/calendar.svg') }}" />
                                                <p class="text-lighten-text">
                                                    {{ !empty($data['news'][0]['date']) ? date('d.m.Y', strtotime($data['news'][0]['date'])) : '' }}
                                                </p>
                                            </div>
                                            <p class="text-base-xl font-medium">
                                                {{ !empty($data['news'][0]['name']) ? $data['news'][0]['name'] : '' }}</p>
                                        </div>
                                        <a
                                            href="{{ !empty($data['news'][0]['url']) ? $data['news'][0]['url'] : '#' }}"></a>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="news-card-col-2">
                            @foreach ($data['news'] as $k => $item)
                                <div class="news-card-item  {{ $k == 0 ? 'lg:hidden' : '' }}">
                                    <div class="article-card animated-img full-url article-horizontal">
                                        <div class="filter-relative">
                                            <div class="img-wrapper">
                                                <div class="asp-1b1">
                                                    <img class="object-cover"
                                                        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>
                                        <div class="detail-wrapper">
                                            <div class="flex items-center space-x-2 my-2">
                                                <img class="the-icon"
                                                    src="{{ Module::asset('frontend:img/icon/calendar.svg') }}" />
                                                <p class="text-lighten-text">
                                                    {{ !empty($item['date']) ? date('d.m.Y', strtotime($item['date'])) : '' }}
                                                </p>
                                            </div>
                                            <p class="text-base-xl font-medium">
                                                {{ !empty($item['name']) ? $item['name'] : '' }}</p>
                                            <p class="font-light"> {{ !empty($item['name']) ? $item['name'] : '' }}</p>
                                        </div>
                                        <a href="{{ !empty($item['url']) ? $item['url'] : '#' }}"></a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="pb-[1rem] sm:hidden text-center">
                        <div class="butn butn-2nd-bordered mx-auto butn-w150 full-url">@lang('frontend::lang.view_all')
                            <a
                                href="{{ !empty($data['route']['news']['url']) ? $data['route']['news']['url'] : '#' }}"></a>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Section : Gold Blog --}}
        <input type="hidden" name="blog" id="blog"
            value="{{ !empty($data['blog']) ? count($data['blog']) : 0 }}">
        @if (!empty($data['blog']))
            <div class="bg-linear-light-gold relative py-[1.25rem] lg:py-12 overflow-hidden">
                <div class="dec-lighten">
                    <img src="{{ Module::asset('frontend:img/lighten.svg') }}" />
                </div>
                <div class="container relative z-10">
                    <div class="flex flex-wrap -mx-4">
                        <div
                            class="p-3 w-full md:w-4/12 xl:w-3/12 flex items-center md:items-start justify-center sm:justify-between md:justify-center md:flex-col">
                            <div class="px-3">
                                <p class="text-base-4xl font-semibold text-center">{!! !empty($data['route']['blog']['desc']) ? $data['route']['blog']['desc'] : '' !!}</p>
                            </div>
                            <div class="px-3 pt-3 hidden sm:block">
                                <div class="butn butn-3rd-bordered butn-w150 bg-transparent full-url">@lang('frontend::lang.view_all')
                                    <a
                                        href="{{ !empty($data['route']['blog']['url']) ? $data['route']['blog']['url'] : '#' }}"></a>
                                </div>
                            </div>
                        </div>
                        <div class="p-3 w-full md:w-8/12 xl:w-9/12">
                            <div class="splide splide-blog-slide">
                                <div class="splide__track">
                                    <div class="splide__list">
                                        @foreach ($data['blog'] as $k => $item)
                                            <div class="splide__slide">
                                                <div class="article-card animated-img full-url blog-article">
                                                    <div class="filter-relative">
                                                        <div class="img-wrapper">
                                                            <div class="asp-1b1">
                                                                <img class="object-cover"
                                                                    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>
                                                    <div class="detail-wrapper">
                                                        <div class="flex items-center justify-center space-x-2 my-2">
                                                            <img class="the-icon"
                                                                src="{{ Module::asset('frontend:img/icon/calendar.svg') }}" />
                                                            <p class="text-lighten-text">
                                                                {{ !empty($item['date']) ? date('d.m.Y', strtotime($item['date'])) : '' }}
                                                            </p>
                                                        </div>
                                                        <p class="text-base-xl font-medium text-overflow-2">
                                                            {{ !empty($item['name']) ? $item['name'] : '' }}</p>
                                                    </div>
                                                    <a href="{{ !empty($item['url']) ? $item['url'] : '#' }}"></a>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pt-[1.5rem] pb-[.75rem] sm:hidden text-center">
                        <div class="butn butn-3rd-bordered butn-w150 mx-auto bg-transparent full-url">@lang('frontend::lang.view_all')
                            <a
                                href="{{ !empty($data['route']['blog']['url']) ? $data['route']['blog']['url'] : '#' }}"></a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </main>
@endsection

@section('script')

    <script>
        splideFullBG('.splide-banner-slide', $('#banner').val(), {
            arrows: false,
        });


        if ($('#category').val() > 3) {
            category = true;
        } else {
            category = false;
        }
        multipleSplide('.splide-category', {
            arrows: category,
            pagination: false,
            padding: 0,
            breakpoints: {
                1199: {
                    perPage: 3,
                    arrows: true
                },
                767: {
                    perPage: 2,
                    arrows: true
                },
            },
        });
        if ($('#info').val() > 3) {
            info = true;
        } else {
            info = false;
        }
        multipleSplide('.splide-info-slide', {
            arrows: info,
            pagination: false,
            padding: 0,
            perPage: 3,
            breakpoints: {
                1199: {
                    perPage: 2,
                    arrows: true
                },
                767: {
                    perPage: 1,
                    arrows: true
                },
            },
        });
        if ($('#product').val() > 3) {
            product = true;
        } else {
            product = false;
        }
        multipleSplide('.splide-recommended', {
            arrows: product,
            pagination: false,
            padding: 0,
            breakpoints: {
                1199: {
                    perPage: 3,
                    arrows: true
                },
                767: {
                    perPage: 2,
                    arrows: true
                },
            },
        });
        if ($('#blog').val() > 3) {
            blog = true;
        } else {
            blog = false;
        }
        multipleSplide('.splide-blog-slide', {
            arrows: blog,
            pagination: false,
            padding: 0,
            perPage: 3,
            breakpoints: {
                1199: {
                    perPage: 2,
                    arrows: true
                },
                320: {
                    perPage: 1,
                    arrows: true
                },
            },
        });
    </script>
@endsection