@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 id="banner" name="banner" type="hidden" 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" style="display:none;">
                <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') }}" loading="lazy" />
                                                    <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 src="{{ Module::asset('frontend:img/updown.png') }}" style="height: 30px" loading="lazy" />
                                                @else
                                                    <img src="{{ Module::asset('frontend:img/icon/down.svg') }}" loading="lazy" />
                                                    <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 class="sect-price-display" style="">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6 cleft">
                        <div>
                            <div class="header-title mb-2">
                                <div class="lft-text">
                                    <h2>@lang('frontend::lang.gold_price')</h2>
                                    <p>@lang('frontend::lang.price_display_ref_gta')</p>
                                </div>

                                <div class="rgh-text">
                                    <p class="m-b-0">@lang('frontend::lang.date') <span id="LastUpdateGTAPriceDate">{{ date_Formate(now()) }}</span> </p>
                                    <p>@lang('frontend::lang.time') <span id="LastUpdateGTAPriceTime">00:00:00</span> @lang('frontend::lang.time_last')</p>
                                </div>
                            </div>
                            <div class="gold-price-wrapper">
                                <table class="table table-striped mt-20" border="0" cellpadding="0" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th class="table1-1" width="20%">@lang('frontend::lang.gold_association_name')</th>
                                            <th class="table1-2" width="10%">@lang('frontend::lang.buy')</th>
                                            <th class="table1-2" width="10%">@lang('frontend::lang.sale')</th>
                                            <th class="table2-4" width="10%"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="table2-1">@lang('frontend::lang.gold_purity_965')</td>
                                            <td class="table2-2">
                                                <p id="PriceGTA_bid">0.00</p>
                                            </td>
                                            <td class="table2-3">
                                                <p id="PriceGTA_offer">0.00</p>
                                            </td>
                                            <td class="table2-4"><span class="up" id="dvPriceGTA_Dif"></span></td>
                                        </tr>
                                        <!-- <tr>
                                                                  <td class="snpgold-lastupdate" colspan="4">
                                                                   <p id="LastUpdateGTAPrice">Last Update : 31/03/2026 13:47:46</p>
                                                                  </td>
                                                                 </tr> -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div>
                            <div class="header-title mb-2">
                                <div class="lft-text">
                                    <h2>@lang('frontend::lang.gold_price')</h2>
                                    <p>@lang('frontend::lang.price_display_ref_snp_gold')</p>
                                </div>

                                <div class="rgh-text">
                                    <p class="m-b-0">@lang('frontend::lang.date') <span id="LastUpdateSpotDate">{{ date_Formate(now()) }}</span> </p>
                                    <p>@lang('frontend::lang.time') <span id="LastUpdateSpotTime">00:00:00</span> @lang('frontend::lang.time_last')</p>
                                </div>
                            </div>

                            <div class="gold-price-wrapper">
                                <table class="table table-striped" cellpadding="0" cellspacing="0" border="0">
                                    <thead>
                                        <tr>
                                            <th class="table1-1" width="20%">@lang('frontend::lang.snp_gold_name')</th>
                                            <th class="table1-2" width="10%">@lang('frontend::lang.buy')</th>
                                            <th class="table1-2" width="10%">@lang('frontend::lang.sale')</th>
                                            <th class="table1-2 table2-4" width="10%"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="table2-1">@lang('frontend::lang.gold_purity_965')</td>
                                            <td class="table2-2">
                                                <p id="dvpriceproduct965_bid">0.00</p>
                                                <label id="tmpdvpriceproduct965_bid" style="display:none;"></label>
                                            </td>
                                            <td class="table2-3">
                                                <p id="dvpriceproduct965_offer">0.00</p>
                                                <label id="tmpdvpriceproduct965_offer" style="display:none;"></label>
                                            </td>
                                            <td class="table2-4"><span class="up" id="dvpriceproduct965"></span></td>
                                        </tr>
                                        <tr>
                                            <td class="table2-1">@lang('frontend::lang.gold_purity_9999')</td>
                                            <td class="table2-2">
                                                <p id="dvpriceproduct9999_bid">0.00</p>
                                                <label id="tmpdvpriceproduct9999_bid" style="display:none;"></label>
                                            </td>
                                            <td class="table2-3">
                                                <p id="dvpriceproduct9999_offer">0.00</p>
                                                <label id="tmpdvpriceproduct9999_offer" style="display:none;"></label>
                                            </td>
                                            <td class="table2-4"><span class="up" id="dvpriceproduct9999"></span></td>
                                        </tr>
                                        <tr>
                                            <td class="table2-1">@lang('frontend::lang.gold_spot')</td>
                                            <td class="table2-2">
                                                <p id="lbspotPrice_bid">0.00</p>
                                                <label id="tmplbspotPrice_bid" style="display:none;"></label>
                                            </td>
                                            <td class="table2-3">
                                                <p id="lbspotPrice_offer">0.00</p>
                                                <label id="tmplbspotPrice_offer" style="display:none;"></label>
                                            </td>
                                            <td class="table2-4"><span class="up" id="dvSpot"></span></td>
                                        </tr>

                                        <!-- <tr>
                                                                  <td class="snpgold-lastupdate" colspan="4">
                                                                   <p id="LastUpdateSpot">Last Update : 31/03/2026 14:20:56</p>
                                                                  </td>
                                                                 </tr> -->

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-6 cright">
                        <div class="header-title mb-2">
                            <div class="lft-text">
                                <h2>@lang('frontend::lang.silver_price')</h2>
                                <p>@lang('frontend::lang.price_display_ref_snp_silver')</p>
                            </div>

                            <div class="rgh-text">
                                <p class="m-b-0">@lang('frontend::lang.date') <span id="LastUpdateSilverDate">{{ date_Formate(now()) }}</span> </p>
                                <p>@lang('frontend::lang.time') <span id="LastUpdateSilverTime">00:00:00</span> @lang('frontend::lang.time_last')</p>
                            </div>
                        </div>

                        <div class="price-container">
                            <!-- <div class="title-box">SNP SILVER</div> -->

                            <!-- <div class="note-box">
                                                                                                                                                                                                            <div class="note-text">ราคานี้ยังไม่รวม VAT และค่าปั้ม</div>
                                                                                                                                                                                                        </div> -->

                            <div class="price-box">
                                <div>
                                    <div class="price-header">
                                        <span class="icon"><i class="fas fa-cubes"></i></span>
                                        <span>@lang('frontend::lang.silver_bar_9999_thb_kg')</span>
                                        <span class="time" id="thb-time">00:00</span>
                                    </div>
                                    <div class="price-values">
                                        <div class="price-item">
                                            <div class="value sell" id="thb-sell-price">0</div>
                                            <div class="label">@lang('frontend::lang.customer_sells')</div>
                                        </div>
                                        <div class="divider"></div>
                                        <div class="price-item">
                                            <div class="value buy" id="thb-buy-price">0</div>
                                            <div class="label">@lang('frontend::lang.customer_buys')</div>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="price-header">
                                        <span class="icon"><i class="fas fa-coins"></i></span>
                                        <span>@lang('frontend::lang.silver_bar_1_baht')</span>
                                    </div>
                                    <div class="price-values">
                                        <div class="price-item">
                                            <div class="value sell" id="baht-sell-price">0</div>
                                            <div class="label">@lang('frontend::lang.customer_sells')</div>
                                        </div>
                                        <div class="divider"></div>
                                        <div class="price-item">
                                            <div class="value buy" id="baht-buy-price">0</div>
                                            <div class="label">@lang('frontend::lang.customer_buys')</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="price-box">
                                <div class="price-header">
                                    <span class="icon"><i class="fas fa-dollar-sign"></i></span>
                                    <span>@lang('frontend::lang.silver_bar_usd_oz')</span>
                                    <span class="time" id="usd-time">00:00</span>
                                </div>
                                <div class="price-values">
                                    <div class="price-item">
                                        <div class="value sell" id="usd-sell-price">0</div>
                                        <div class="label">@lang('frontend::lang.customer_sells')</div>
                                    </div>
                                    <div class="divider"></div>
                                    <div class="price-item">
                                        <div class="value buy" id="usd-buy-price">0</div>
                                        <div class="label">@lang('frontend::lang.customer_buys')</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 bottom-bar">
                        <hr style="margin: 20px 0 10px 0;">
                        <p style="font-size: 20px; font-weight: 400;"><strong>@lang('frontend::lang.price_display_note_title')</strong>@lang('frontend::lang.price_display_note_body')
                            <br>@lang('frontend::lang.price_display_contact_cta')<a class="text-link-phone" href="tel:024095299"><i class="fa fa-phone"></i> 02-409-5299</a>
                        </p>
                    </div>

                </div>
            </div>
        </section>



        {{-- <section class="sect-price-display">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-6 cleft">

                        <div class="header-title mb-2">
                            <div class="lft-text">
                                <h2>ราคาทองคำ</h2>
                                <p>(อ้างอิงจาก เอสเอ็นพีโกลด์ และ สมาคมทองคำ)</p>
                            </div>

                            <div class="rgh-text">
                                <p class="m-b-0">ประจำวันที่ 30 มีนาคม 2569</p>
                                <p>เวลา 09:03:00 น. ครั้งที่ 1</p>
                            </div>
                        </div>
                        <div class="gold-price-wrapper">
                            <iframe class="gold-iframe-content" src="https://www.snpgold-online.com/GoldPricePublic.php"></iframe>
                        </div>

                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-6 cright">
                        <div class="header-title mb-2">
                            <div class="lft-text">
                                <h2>ราคาเงิน</h2>
                                <p>(อ้างอิงจาก SNP Silver)</p>
                            </div>

                            <div class="rgh-text">
                                <p class="m-b-0">ประจำวันที่ 30 มีนาคม 2569</p>
                                <p>เวลา 09:03:00 น. ครั้งที่ 1</p>
                            </div>
                        </div>
                        <div class="gold-price-wrapper">
                            <iframe class="silver-separate-iframe" src="https://sangnapa.com/SilverPrice.html"></iframe>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 bottom-bar">
                        <hr style="margin: 20px 0 10px 0;">
                        <p style="font-size: 20px; font-weight: 400;"><strong>หมายเหตุ:
                            </strong>ราคาที่แสดงเป็นราคาอ้างอิงเท่านั้น ไม่ใช่ราคาซื้อขายจริง
                            ราคายังไม่รวมค่าแรงหรือค่าบล็อกทอง และภาษีมูลค่าเพิ่ม (หากมี)
                            <br>สนใจซื้อขาย โปรดติดต่อ <a class="text-link-phone" href="tel:024095299"><i class="fa fa-phone"></i> 02-409-5299</a>
                        </p>
                    </div>

                </div>
            </div>
        </section> --}}

        {{-- 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') }}" loading="lazy" />
                                        @endif
                                    @break

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

                                                <video class="video_src" controls autoplay muted playsinline>
                                                    <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 id="category" name="category" type="hidden" 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') }}" loading="lazy" />
                                            </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 id="info" name="info" type="hidden" 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') }}" loading="lazy" />
                                                    </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 id="product" name="product" type="hidden" 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') }}" loading="lazy" />
                                                    </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') }}" loading="lazy" />
                                                </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') }}" loading="lazy" />
                                                <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') }}" loading="lazy" />
                                                </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') }}" loading="lazy" />
                                                <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 id="blog" name="blog" type="hidden" 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') }}" loading="lazy" />
                </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') }}" loading="lazy" />
                                                            </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') }}" loading="lazy" />
                                                            <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>

    <script>
        $(document).ready(function() {
            var POLL_INTERVAL = 10000;

            function pollGold() {
                $.ajax({
                    url: "{{ app()->getLocale() === 'en' ? route('lang.api.gold.snp_refresh', ['locale' => 'en']) : route('api.gold.snp_refresh') }}",
                    type: 'GET',
                    dataType: 'text',
                    success: function(data) {
                        var code = String(data).replace(/<\/?script[^>]*>/gi, '').trim();
                        if (code) {
                            jQuery.globalEval(code);
                        }
                    },
                    error: function() {
                        console.warn('SNP gold price refresh failed');
                    },
                    complete: function() {
                        if (!document.hidden) {
                            setTimeout(pollGold, POLL_INTERVAL);
                        }
                    }
                });
            }

            function pollSilver() {
                $.ajax({
                    url: "{{ app()->getLocale() === 'en' ? route('lang.api.silver.snp_refresh', ['locale' => 'en']) : route('api.silver.snp_refresh') }}",
                    type: 'GET',
                    dataType: 'text',
                    success: function(data) {
                        var code = String(data).replace(/<\/?script[^>]*>/gi, '').trim();
                        if (code) {
                            jQuery.globalEval(code);
                        }
                    },
                    error: function() {
                        console.warn('Sangnapa silver price refresh failed');
                    },
                    complete: function() {
                        if (!document.hidden) {
                            setTimeout(pollSilver, POLL_INTERVAL);
                        }
                    }
                });
            }

            pollGold();
            pollSilver();

            document.addEventListener('visibilitychange', function() {
                if (!document.hidden) {
                    pollGold();
                    pollSilver();
                }
            });
        });
    </script>
@endsection