@extends('layout.base')
@section('page-title', __('basic.PageIndex'))
@section('page-js-script')
    <script>
        $(function() {
            let page_just_for_you = 2;
            $('#modalBanner .img_popup').attr('src', "{{ $banner['IDX_POP']['media'][0] ?? asset('image/banner/37 Marketing Mar-Apr/01 POP UP BANNER/02 POP UP BANNER 1-2/' . app()->getLocale() . '.png') }}");
            // $('#modalBanner').modal('show');
            setTimeout(() => {
                $('#modalBanner').modal('hide');
            }, 2000);
            $('#modalBanner').on('hidden.bs.modal', function(event) {
                $('#modalBanner .img_popup').attr('src', "{{ asset('image/banner/37 Marketing Mar-Apr/01 POP UP BANNER/02 POP UP BANNER 1-2/' . app()->getLocale() . '.png') }}");
                if ($('#modalBanner .img_popup').attr('data-count') == 1) {
                    // $('#modalBanner').modal('show');
                }
                $('#modalBanner .img_popup').attr('data-count', 2);

            })
            $('.btn_dashboard').click(function(e) {
                let meta_key = $(this).data('meta-key');
                let member_id = '{{ session('user_id') }}';
                if (member_id != '') {
                    $.ajax({
                        url: '{{ url('ajax/member_update_meta') }}',
                        data: {
                            member_id: '{{ session('user_id') }}',
                            meta_key: meta_key,
                            meta_value: 0
                        },
                        dataType: 'json',
                        success: function(resp, textStatus, jqXHR) {
                            // console.log(resp);
                            if (resp.status) {
                                $('#div_icon_' + meta_key).removeClass('rounded-circle');
                                $('#div_icon_' + meta_key).css('box-shadow', '');
                                $('#dot_' + meta_key).remove();
                            }

                        },
                        error: ajaxError
                    });
                }

            });
            // just for you 增加商品列表 
            $('#btn_more_just_for_you').click(function(e) {
                e.preventDefault();
                console.log(page_just_for_you);
                let length = 20;
                $('.loading').show();

                $.ajax({
                    url: '{{ url('ajax/stock_list') }}',
                    data: {
                        "valid": 1,
                        "start": (page_just_for_you - 1) * length,
                        "length": length,
                        'just_for_you': 1,
                        'country_id': '{{ session('country_id') }}',
                    },
                    dataType: 'json',
                    success: function(resp, textStatus, jqXHR) {
                        // console.log(resp);
                        if (resp.status) {
                            $.each(resp.data.list, function(idx, v) {
                                console.log(v);
                                let type = 'default';
                                let url = '{{ route('product_detail', ['id' => 'jsURL']) }}';

                                type = (v.preferential_price != '') ? 'sale' : 'default';
                                $('#div_just_for_you').append($('.div_product_' + type).last().clone());

                                let $clone = $('#div_just_for_you .div_product_' + type).last();

                                $clone.find('.product_img').attr('src', v['thumbnail']);
                                $clone.find('.product_name').text(v['name']);
                                $clone.find('.product_retail_price').text('$' + appendFormat(v['retail_price']));
                                $clone.find('.product_coin').text(v['coin']);
                                $clone.find('.product_rating').text(v['rating']);
                                if (v['sold'] < 100) {
                                    $clone.find('.product_sold').text("{{ __('robot.HotSale') }}");

                                } else {

                                    $clone.find('.product_sold').text("{{ __('robot.Sold') }}:" + v['sold']);
                                }
                                if (v.has_inv) {
                                    $clone.find('.div_sold_out').addClass('d-none');
                                } else {
                                    $clone.find('.div_sold_out').removeClass('d-none');
                                }

                                url = url.replace('jsURL', v['id']);
                                $clone.attr('href', url);
                                if (type == 'sale') {
                                    $clone.find('.product_preferential_price').text('$' + appendFormat(v['preferential_price']));
                                    $clone.find('.product_discount').text('-' + v['discount'] + '%');
                                }

                            });
                            page_just_for_you++;
                            $('.loading').hide();

                        }

                    },
                    error: ajaxError
                });
            });
            let lang_id = '{{ app()->getLocale() }}';
            // console.log(lang_id);
            if (lang_id != 'zh_TW') {
                $('#div_vip_date').css('font-size', '14px');
                $('#div_vip_date img').css('width', '32px');
            }
            // countdown to next sunday 23:59:59
            let countDownDate = getNextSunday().getTime();
            let x = setInterval(function() {
                let now = new Date().getTime();
                let distance = countDownDate - now;
                // let days = Math.floor(distance / (1000 * 60 * 60 * 24));
                let hours = Math.floor(distance / (1000 * 60 * 60));
                let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                let seconds = Math.floor((distance % (1000 * 60)) / 1000);
                let res = hours + "h " +
                    minutes + "m " + seconds + "s ";
                if (distance < 0) {
                    clearInterval(x);
                    res = "EXPIRED";
                }
                // console.log(res);
                Number.prototype.autoSupplement = function(n) {
                    return (Array(n).join(0) + this).slice(-n);
                }
                let weektime = 1000 * 60 * 60 * 24 * 7;
                // $('.flash_progress').css('width', roundDecimal(100 - (distance / weektime * 100), 2) + '%');
                $('.flash_progress').css('width', '100%');

                $('#countdown_h').text(hours.autoSupplement(3));
                $('#countdown_m').text(minutes.autoSupplement(2));
                $('#countdown_s').text(seconds.autoSupplement(2));

            }, 1000);

        });
    </script>
@endsection
@section('container')
    <style>
        .card {
            margin-top: 0px;
        }

        .div_title {
            padding: 12px;
            /* padding-bottom: 0.05rem; */
        }

        /* mobile */
        @media (max-width: 767px) {
            .img_flash_slider {
                max-width: 108px;
            }

            .div_flash_slider {
                max-width: 124px;
            }
        }
    </style>
    @php
        //所有圖片
        $allImage = [
            'main_banner' => [
                1 => asset('image/banner/37 Marketing Mar-Apr/02 MAIN BANNER/MAIN BANNER 1-1/' . app()->getLocale() . '.png'),
                // 2 => asset('image/banner/37 Marketing Mar-Apr/02 MAIN BANNER/MAIN BANNER 1-2/' . app()->getLocale() . '.png'),
                3 => asset('image/banner/37 Marketing Mar-Apr/03 MAIN BANNER 2/699/699 ' . app()->getLocale() . '.png'),
            ],
            'main_banner_right' => [
                1 => asset('image/banner/33 Marketing Banner Feb/05 MAIN BANNER-RIGHT 1/MAIN BANNER-RIGHT 1 - ' . app()->getLocale() . '.png'),
                2 => asset('image/banner/33 Marketing Banner Feb/06 MAIN BANNER-RIGHT 2/MAIN BANNER-RIGHT 2 - ' . app()->getLocale() . '.png'),
            ],
            'dashboard' => [
                'logo' => asset('image/banner/33 Marketing Banner Feb/07 DASHBOARD/DASHBOARD 3.png'),
                'bg' => asset('image/banner/33 Marketing Banner Feb/07 DASHBOARD/DASHBOARD 1.png'),
            ],
            'font' => [
                'flash_sale' => asset('image/banner/37 Marketing Mar-Apr/08 Flash Sale FRONT/FRONT ' . app()->getLocale() . '.png'),
                'first_buy' => asset('image/banner/37 Marketing Mar-Apr/11 NEW MEMBER FRONT/699/699 ' . app()->getLocale() . '.png'),
                'selected_brand' => asset('image/banner/37 Marketing Mar-Apr/14 SINGLE BRAND FRONT/' . app()->getLocale() . '.png'),
            ],
            'background' => [
                'flash_sale' => asset('image/banner/37 Marketing Mar-Apr/09 Flash Sale BACKGROUND/09 FLASH SALE BACKGROUND.png'),
                'first_buy' => asset('image/banner/37 Marketing Mar-Apr/12 NEW MEMBER BACKGROUND/12 NEW MEMBER BACKGROUND.png'),
                'selected_brand' => asset('image/banner/37 Marketing Mar-Apr/15 SINGLE BRAND BACKGROUND/15 SINGLE BRAND BACKGROUND.png'),
            ],
            'AD' => [
                1 => asset('image/banner/33 Marketing Banner Feb/ADS/ADS1 - ' . app()->getLocale() . '.png'),
                2 => asset('image/banner/33 Marketing Banner Feb/ADS/ADS2 - ' . app()->getLocale() . '.png'),
                3 => asset('image/banner/33 Marketing Banner Feb/ADS/ADS3 - ' . app()->getLocale() . '.png'),
                4 => asset('image/banner/33 Marketing Banner Feb/ADS/ADS4 - ' . app()->getLocale() . '.png'),
            ],
        ];
    @endphp
    {{-- @php
        $data = [
            [
                // 我的推薦
                'code' => 'dashboard_1',
                'color' => '#0073BB;',
                'id' => 'recommend',
                'title' => __('robot.Share'),
                'img' => 'image/icon/1.png',
                'num' => $numList['totalChildrenCount'] ?? 0,
                'detail' => [
                    [
                        // 種子會員
                        'code' => 'dashboard_1_1',
                        'title' => __('robot.ShareMember'),
                        'img' => 'image/icon/7.png',
                        'num' => $numList['totalChildrenCount'] - $numList['fund_count'],
                    ],
                    [
                        // 回饋會員
                        'code' => 'dashboard_1_2',
                        'title' => __('robot.BonusMember'),
                        'img' => 'image/icon/8.png',
                        'num' => $numList['fund_count'],
                    ],
                ],
            ],
            [
                // 我的金庫
                // 'color' => '#FFC700;',
                'code' => 'dashboard_2',
                'color' => '#ff8966;',
                'id' => 'money',
                'title' => __('robot.MyCoin'),
                'img' => 'image/icon/2.png',
                'num' => $numList['coin'] + $numList['bonus'],
                'detail' => [
                    [
                        // 購物金
                        'code' => 'dashboard_2_1',
                        'title' => __('robot.ClcCoin'),
                        'img' => 'image/icon/5.png',
                        'num' => $numList['coin'],
                    ],
                    [
                        // 回饋金
                        'code' => 'dashboard_2_2',
                        'title' => __('robot.Cashback'),
                        'img' => 'image/icon/6.png',
                        'num' => $numList['bonus'],
                    ],
                ],
            ],
            [
                // 我的商品
                'code' => 'dashboard_3',
                'color' => '#259C8C;',
                'id' => 'product',
                'title' => __('robot.PurchaseHistory'),
                'img' => 'image/icon/3.png',
                'num' => '0',
                'url' => route('orderlist'),
                'detail' => [
                    // [
                    //     'title' => '種子會員',
                    //     'num' => '50',
                    // ],
                    // [
                    //     'title' => '種子會員',
                    //     'num' => '50',
                    // ],
                ],
            ],
            [
                // 我的通知
                'code' => 'dashboard_4',
                'color' => '#E73B56;',
                'id' => 'notice',
                'title' => __('robot.MyNotification'),
                'img' => 'image/icon/4.png',
                'num' => '0',
                'url' => route('notice'),
                'detail' => [
                    // [
                    //     'title' => '種子會員',
                    //     'num' => '50',
                    // ],
                    // [
                    //     'title' => '種子會員',
                    //     'num' => '50',
                    // ],
                ],
            ],
        ];
    @endphp --}}
    @php
        $data = [
            [
                // 種子會員
                'code' => 'dashboard_1',
                'color' => '#000000;',
                'id' => 'recommend',
                'title' => __('robot.ShareMember'),
                'img' => 'image/dashboard/1.png',
                'num' => $numList['totalChildrenCount'] - $numList['fund_count'],
            ],
            [
                // 回饋會員
                'code' => 'dashboard_2',
                'color' => '#000000;',
                'id' => 'money',
                'title' => __('robot.BonusMember'),
                'img' => 'image/dashboard/2.png',
                'num' => $numList['fund_count'],
            ],
            [
                // CLC幣
                'code' => 'dashboard_3',
                'color' => '#000000;',
                'id' => 'product',
                'title' => __('robot.ClcCoin'),
                'img' => 'image/dashboard/3.png',
                'num' => $numList['coin'],
                'url' => route('coin'),
            ],
            [
                // 回饋金
                'code' => 'dashboard_4',
                'color' => '#000000;',
                'id' => 'notice',
                'title' => __('robot.Cashback'),
                'img' => 'image/dashboard/4.png',
                'num' => $numList['bonus'],
                'url' => '#',
            ],
        ];
    @endphp

    {{-- Float Gif --}}
    {{-- <div class="position-fixed end-0 z-index-3 me-2 me-md-10 bottom-10">
        <img src="{{ asset('image/floating-88x88.png') }}" alt="">
    </div> --}}

    {{-- Slider --}}
    <div class="row mt-md-10 m-0">
        <div class="col-12 col-md-8 m-0 p-0">
            <div class="swiper slideBanner">
                <div class="swiper-wrapper">
                    {{-- @for ($i = 0; $i < 6; $i++) --}}
                    @php
                        $mbl = $banner['MB_L']['media'] ?? $allImage['main_banner'];
                    @endphp
                    @foreach ($mbl as $k => $item)
                        {{-- @if ($k == 0)
                            <div class="swiper-slide"><a href="https://clconline.store/about/"><img src="{{ $item }}" alt=""></a></div>
                        @elseif ($k == 2)
                            <div class="swiper-slide"><a href="https://clc.amaryllo.tw/"><img src="{{ $item }}" alt=""></a></div>
                        @else
                            <div class="swiper-slide"><img src="{{ $item }}" alt=""></div>
                        @endif --}}
                        @if (!empty($banner['MB_L']['url'][$k]))
                            <div class="swiper-slide"><a href="{{ $banner['MB_L']['url'][$k] }}"><img src="{{ $item }}" alt=""></a></div>
                        @else
                            <div class="swiper-slide"><img src="{{ $item }}" alt=""></div>
                        @endif
                    @endforeach
                    {{-- @endfor --}}
                </div>
                <div class="index__banner swiper-button-next"></div>
                <div class="index__banner swiper-button-prev"></div>
                <div class="index__banner swiper-pagination"></div>
            </div>
        </div>
        <div class="col d-none d-md-flex pe-0 flex-column justify-content-center">

            {{-- @include('partial._dashboard', ['data' => $data, 'mobileOnly' => false]) --}}

            <div class="mb-2">
                @if (!empty($banner['MB_R_U']['url'][0]))
                    <a href="{{ $banner['MB_R_U']['url'][0] }}">
                        <img src="{{ $banner['MB_R_U']['media'][0] ?? $allImage['main_banner_right'][1] }}" alt="">
                    </a>
                @else
                    <img src="{{ $banner['MB_R_U']['media'][0] ?? $allImage['main_banner_right'][1] }}" alt="">
                @endif
            </div>
            <div class="">
                @if (!empty($banner['MB_R_D']['url'][0]))
                    <a href="{{ $banner['MB_R_D']['url'][0] }}">
                        <img src="{{ $banner['MB_R_D']['media'][0] ?? $allImage['main_banner_right'][2] }}" alt="">
                    </a>
                @else
                    <img src="{{ $banner['MB_R_D']['media'][0] ?? $allImage['main_banner_right'][2] }}" alt="">
                @endif
            </div>
        </div>
    </div>

    {{-- Navlink --}}
    {{-- <div class="nav justify-content-between flex-nowrap gap-8 overflow-scroll py-4">
        @for ($i = 0; $i < count($activitylist); $i++)
            <a class="d-flex flex-column flex-shrink-0" href="">
                <img src="{{ asset('image/navlink-40x40.png') }}" alt="" style="max-width: 40px; margin:0 auto;">
                <small class="text-center">{{ $activitylist[$i]['name'] }}</small>
            </a>
        @endfor
    </div> --}}
    <div style="padding:8px"></div>

    {{-- Mobile SP Area --}}
    {{-- <div class="d-md-none rounded-3 overflow-hidden bg-white">
        <div class="bg-warning position-relative py-4">
            <img class="position-absolute top-50 end-0 start-0 mx-auto" src="{{ asset('image/logo/clc_logo.svg') }}" style="max-height: 30px" alt="">
        </div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs g-2 py-6 pt-8" id="myTab" role="tablist">
            @foreach ($data as $dl)
                <li class="col-3 text-center" style="color: {{ $dl['color'] }}" role="presentation">
                    <div class="" id="{{ $dl['id'] }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $dl['id'] }}" type="button" role="tab" aria-controls="home" aria-selected="true">
                        <div class="position-relative d-inline-block">
                            <div class="dot"></div>
                            <img class="d-block mx-auto text-center" style="width: 29px; height: 28px" src="{{ asset($dl['img']) }}" alt="">
                        </div>
                        <p>{{ $dl['title'] }}</p>
                        <p class="fw-bold">{{ $dl['num'] }}</p>
                    </div>
                </li>
            @endforeach
        </ul>

        <!-- Tab panes -->
        <div class="tab-content mx-3 py-4 px-4">
            @foreach ($data as $dl)
                <div class="tab-pane fade" id="{{ $dl['id'] }}" role="tabpanel" aria-labelledby="{{ $dl['id'] }}-tab">
                    <div class="row" style="color:{{ $dl['color'] }}">
                        @foreach ($dl['detail'] as $tab)
                            <div class="col d-flex align-items-center">
                                <div class="position-relative d-inline-block me-3">
                                    <img class="d-block mx-auto text-center" style="width: 29px; height: 28px" src="{{ asset($tab['img']) }}" alt="">
                                    <p>{{ $tab['title'] }}</p>
                                </div>
                                <p class="fs-4 fw-bold">{{ $tab['num'] }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div> --}}

    {{-- <div class="d-md-none position-relative overflow-hidden px-4 py-3" id='dashboard'>
        <img class='position-absolute' src="{{ $allImage['dashboard']['logo'] }}" srcset="" alt="" style="top: 0%;left:50%;z-index:1;transform: translate(-50%, 0%);">
        <img class='position-absolute' src="{{ $allImage['dashboard']['bg'] }}" srcset="" alt="" style="top: 0px;left:0px;width:100%;z-index:-1;">
        <div class='w-100 h-100 mt-8' id='frame'>

            <div class='position-relative'>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs position-relative g-2 border-0 py-6" id="dashboard_tabs" role="tablist">
                    @foreach ($data as $dl)
                        <li class="col-3 rounded p-2 text-center" role="presentation" style="color: {{ $dl['color'] }}">
                            <div class="border-radias rounded py-1" id="{{ $dl['id'] }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $dl['id'] }}" type="button" role="tab" aria-controls="home" aria-selected="true">
                                <div class="position-relative d-inline-block">
                                    <div class="dot"></div>
                                    <img class="d-block mx-auto text-center" src="{{ asset($dl['img']) }}" alt="" style="width: 29px; height: 28px">
                                </div>
                                <p class='text-center text-black'>{{ $dl['title'] }}</p>
                                <p class="fw-bold">{{ $dl['num'] }}</p>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>

            <!-- Tab panes -->
            <div class="tab-content mx-3 py-4 px-4">
                @foreach ($data as $dl)
                    <div class="tab-pane fade" id="{{ $dl['id'] }}" role="tabpanel" aria-labelledby="{{ $dl['id'] }}-tab">
                        <div class="row" style="color:{{ $dl['color'] }};">
                            @foreach ($dl['detail'] as $tab)
                                <div class="col d-flex justify-content-center align-items-center tab_detail rounded-3 me-2 p-3">
                                    <div class="position-relative d-inline-block me-3">
                                        <img class="d-block mx-auto text-center" src="{{ asset($tab['img']) }}" alt="" style="width: 29px; height: 28px">
                                        <p class='text-center text-black'>{{ $tab['title'] }}</p>
                                    </div>
                                    <p class="fs-4 fw-bold">{{ $tab['num'] }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div> --}}
    @include('partial._dashboard', ['data' => $data, 'mobileOnly' => true])


    {{-- Store Start --}}
    <div class="d-flex flex-column gap-md-8 mt-2 gap-1">
        {{-- FLASH SALE --}}
        <div>
            <!-- Flash Title -->
            <div class="div_title d-flex align-items-center flex-row">
                <h4 class="fs-lg-4 fs-5 text-bi m-0">{{ __('sale.FlashSale') }}</h4>
                <div class="d-flex align-items-center ms-4 gap-lg-2 flex-row gap-1">
                    <h6 class="l-index__time-counter" id="countdown_h"></h6>
                    <span>:</span>
                    <h6 class="l-index__time-counter" id="countdown_m"></h6>
                    <span>:</span>
                    <h6 class="l-index__time-counter" id="countdown_s"></h6>
                </div>
                <a class="ms-6 btn btn-link p-0" href="{{ route('category') }}">{{ __('robot.More') }}</a>
            </div>
            <!-- Flash Content -->
            <div class="row position-relative d-flex align-items-center index-slider-bg m-0 flex-row" style="background-image:url('{{ $banner['FS_BG']['media'][0] ?? $allImage['background']['flash_sale'] }}');">
                <div class="ms-auto py-md-6 my-4 p-0">
                    <div class="swiper index__sort slideSort">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                @if (!empty($banner['FS_L']['url'][0]))
                                    <a href="{{ $banner['FS_L']['url'][0] }}">
                                        <img class="banner-cate" src="{{ $banner['FS_L']['media'][0] ?? $allImage['font']['flash_sale'] }}" alt="">
                                    </a>
                                @else
                                    <img class="banner-cate" src="{{ $banner['FS_L']['media'][0] ?? $allImage['font']['flash_sale'] }}" alt="">
                                @endif

                            </div>
                            @foreach ($stock_list['flash'] as $k => $v)
                                <div class="swiper-slide">
                                    @if (!empty($v['preferential_price']))
                                        <x-product-flash-sale id="{{ $v['id'] }}" name="{{ $v['name'] }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $v['preferential_price'] }}"
                                            discount="{{ $v['discount'] }}" oPrice="{{ $v['retail_price'] }}" coin="{{ $v['coin'] }}" :rating="$v['rating']" :sold="$v['sold']" :hasInv="$v['has_inv']">
                                        </x-product-flash-sale>
                                    @else
                                        <x-product-flash-sale id="{{ $v['id'] }}" name="{{ $v['name'] }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $v['retail_price'] }}" discount="{{ $v['discount'] }}"
                                            oPrice="{{ $v['retail_price'] }}" coin="{{ $v['coin'] }}" :rating="$v['rating']" :sold="$v['sold']" :hasInv="$v['has_inv']">
                                        </x-product-flash-sale>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </div>
        @include('partial._index_country', [
            'title' => __('robot.HotTaiwanProducts'),
            'img' => $banner['CNT_TW']['media'][0] ?? asset('image/banner/0311test/CLC CHOICE.png'),
            'list' => $stock_list['cnt_tw'],
            'url' => $banner['CNT_TW']['url'][0] ?? null,
        ])
        @include('partial._index_country', [
            'title' => __('robot.HotIndonesiaProducts'),
            'img' => $banner['CNT_ID']['media'][0] ?? asset('image/banner/0311test/CLC CHOICE.png'),
            'list' => $stock_list['cnt_id'],
            'url' => $banner['CNT_ID']['url'][0] ?? null,
        ])
        @include('partial._index_country', [
            'title' => __('robot.HotFilipinoProducts'),
            'img' => $banner['CNT_PH']['media'][0] ?? asset('image/banner/0311test/CLC CHOICE.png'),
            'list' => $stock_list['cnt_ph'],
            'url' => $banner['CNT_PH']['url'][0] ?? null,
        ])
        @include('partial._index_country', [
            'title' => __('robot.HotVietnamProducts'),
            'img' => $banner['CNT_VN']['media'][0] ?? asset('image/banner/0311test/CLC CHOICE.png'),
            'list' => $stock_list['cnt_vn'],
            'url' => $banner['CNT_VN']['url'][0] ?? null,
        ])
        {{-- category A --}}
        {{-- 大分類 --}}
        <div class="div_title d-flex align-items-center flex-row">
            <h4 class="fs-lg-4 fs-5 m-0">{{ __('robot.Category') }}</h4>
        </div>
        <div class="swiper slideCate">
            <div class="swiper-wrapper position-relative d-flex flex-row">
                @for ($i = 0; $i < count($catelist); $i++)
                    @php
                        $slug = str_replace('/', '__', $catelist[$i]['name']);
                    @endphp
                    <div class="swiper-slide">
                        <a class="l-index__category" href="{{ route('category', ['cat_name' => $slug]) }}">
                            <img class="w-70 w-md-50" src="{{ $catelist[$i]['thumbnail'] ?? asset('image/categories-b.png') }}" alt="">
                            <p>{{ $catelist[$i]['name'] }}</p>
                        </a>
                    </div>
                @endfor
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        {{-- category C --}}
        {{-- 熱門分類0 --}}
        {{-- <div>
            {{-- <x-title text="Category C" href="/"></x-title>
            <div class="row position-relative d-flex align-items-center m-0 flex-row">
                <div class="position-absolute w-50 w-md-20 py-6" style="background-color: #204A19;">
                    <img src="{{ asset('image/banner-cate-165x330.png') }}" alt="">
                </div>
                <div class="w-md-90 ms-auto ps-md-10 py-md-6 my-6 w-70 py-0">
                    <div class="swiper index__sort slideSort">
                        <div class="swiper-wrapper">
                            @for ($i = 0; $i < 10; $i++)
                                <div class="swiper-slide">
                                    <x-product-sale id="" img="{{ asset('image/product_07.png') }}" name="Product Name" price="1,222" discount="-25" oPrice="1,333" coin="{{$v['coin']}}">
                                    </x-product-sale>
                                </div>
                            @endfor
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div> 
            @php
                $hl = $hotcatelist[0];
            @endphp
            <x-title href="{{ route('product', ['cat_name' => $hl['name']]) }}" text="{{ $hl['name'] }}"></x-title>
            <div class="row position-relative d-flex align-items-center index-slider-bg m-0 flex-row" style="">
                <div class="ms-auto py-md-6 mt-2 p-0">
                    <div class="swiper index__sort slideSort">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img class="banner-cate" src="{{ asset('image/banner/sale - ' . app()->getLocale() . '.png') }}" alt="">
                            </div>
                            @foreach ($hl['detail'] as $d)
                                <div class="swiper-slide">
                                    @if (!empty($d['preferential_price']))
                                        <x-product-sale id="{{ $d['id'] }}" name="{{ $d['name'] }}" img="{{ $d['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $d['preferential_price'] }}"
                                            discount="{{ $d['discount'] }}" oPrice="{{ $d['retail_price'] }}" coin="{{$v['coin']}}">
                                        </x-product-sale>
                                    @else
                                        <x-product-default id="{{ $d['id'] }}" name="{{ $d['name'] }}" img="{{ $d['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $d['retail_price'] }}" coin="{{$v['coin']}}">
                                        </x-product-default>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </div> --}}
        @include('partial._index_swiper', [
            'title' => __('sale.NewMemberFirstBuy'),
            'array' => $stock_list['first_buy'],
            'imgFont' => $banner['FB_L']['media'][0] ?? $allImage['font']['first_buy'],
            'imgBg' => $banner['FB_BG']['media'][0] ?? $allImage['background']['first_buy'],
            'url' => $banner['FS_L']['url'][0] ?? null,
        ])


        {{-- Popular --}}
        <div>
            <div class="div_title d-flex align-items-center flex-row">
                <h4 class="lh-1 m-0">{{ __('sale.Top10Products') }}</h4>
                <a class="ms-3 text-link fw-bold lh-1 align-middle" href="{{ route('category') }}">{{ __('robot.ViewMore') }}</a>
            </div>

            <div class="card py-0 shadow-sm">
                <div class="row row-cols-3 row-cols-xl-6">
                    <div class="swiper slidePopular">
                        <div class="swiper-wrapper">
                            {{-- @for ($i = 0; $i < 10; $i++)
                                <div class="swiper-slide">
                                    <x-product-ranking id="" ranking="1" img="{{ asset('image/product_07.png') }}" name="123" price="111" discount="-90" oPrice="1,110" coin="{{$v['coin']}}">
                                    </x-product-ranking>
                                </div>
                            @endfor --}}
                            @foreach ($stock_list['popular'] as $k => $v)
                                <div class="swiper-slide me-2">
                                    @if (!empty($v['preferential_price']))
                                        <x-product-ranking id="{{ $v['id'] }}" name="{{ $v['name'] }}" ranking="{{ $k + 1 }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}"
                                            price="{{ $v['preferential_price'] }}" discount="{{ $v['discount'] }}" oPrice="{{ $v['retail_price'] }}" coin="{{ $v['coin'] }}" :rating="$v['rating']" :sold="$v['sold']" :hasInv="$v['has_inv']">
                                        </x-product-ranking>
                                    @else
                                        <x-product-ranking id="{{ $v['id'] }}" name="{{ $v['name'] }}" ranking="{{ $k + 1 }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $v['retail_price'] }}"
                                            discount="{{ $v['discount'] }}" oPrice="{{ $v['retail_price'] }}" coin="{{ $v['coin'] }}" :rating="$v['rating']" :sold="$v['sold']" :hasInv="$v['has_inv']">
                                        </x-product-ranking>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- 熱門分類1 --}}
        {{-- <div>
            @if (count($hotcatelist) > 1)
                @foreach ($hotcatelist as $k => $hl)
                    @php
                        if ($k == 0) {
                            continue;
                        }
                    @endphp
                    <x-title href="{{ route('product', ['cat_name' => $hl['name']]) }}" text="{{ $hl['name'] }}"></x-title>
                    <div class="row position-relative d-flex align-items-center index-slider-bg m-0 flex-row" style="">
                        <div class="ms-auto py-md-6 mt-2 p-0">
                            <div class="swiper index__sort slideSort">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img class="banner-cate" src="{{ asset('image/banner/sale - ' . app()->getLocale() . '.png') }}" alt="">
                                    </div>
                                    @foreach ($hl['detail'] as $d)
                                        <div class="swiper-slide">
                                            @if (!empty($d['preferential_price']))
                                                <x-product-sale id="{{ $d['id'] }}" name="{{ $d['name'] }}" img="{{ $d['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $d['preferential_price'] }}"
                                                    discount="{{ $d['discount'] }}" oPrice="{{ $d['retail_price'] }}" coin="{{$v['coin']}}">
                                                </x-product-sale>
                                            @else
                                                <x-product-default id="{{ $d['id'] }}" name="{{ $d['name'] }}" img="{{ $d['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $d['retail_price'] }}" coin="{{$v['coin']}}">
                                                </x-product-default>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div> --}}

        @include('partial._index_swiper', [
            'title' => __('sale.SingleBrandPromo'),
            'array' => $stock_list['selected_brand'],
            'imgFont' => $banner['SB_L']['media'][0] ?? $allImage['font']['selected_brand'],
            'imgBg' => $banner['SB_BG']['media'][0] ?? $allImage['background']['selected_brand'],
            'url' => $banner['SB_BG']['url'][0] ?? null,
        ])
        {{-- CLC Choice --}}
        @include('partial._index_country', [
            'title' => __('sale.ClcChoice'),
            'img' => $banner['CLC_CHOICE']['media'][0] ?? asset('image/banner/0311test/CLC CHOICE.png'),
            'list' => $stock_list['clc_selected'],
            'url' => $banner['CLC_CHOICE']['url'][0] ?? null,
        ])


        {{-- AD --}}
        <div class="card px-lg-2">
            <div class="row row-cols-2 row-cols-lg-4 g-4">
                @php
                    $ads = $banner['IDX_D']['media'] ?? $allImage['AD'];
                    
                @endphp
                @foreach ($ads as $k => $item)
                    @if (!empty($banner['IDX_D']['url'][$k]))
                        <div class="col"><a href="{{ $banner['IDX_D']['url'][$k] }}"><img src="{{ $item }}" alt=""></a></div>
                    @else
                        <div class="col"><a href="javascript:void()"><img src="{{ $item }}" alt=""></a></div>
                    @endif
                @endforeach

            </div>
        </div>
        {{-- Just For You --}}
        <div class="d-flex flex-column mb-30">
            <div class="div_title d-flex align-items-center flex-row">
                <h4 class="lh-1 m-0">{{ __('sale.JustForYou') }}</h4>
                <a class="ms-3 text-link fw-bold lh-1 align-middle" href="{{ route('category') }}">{{ __('robot.ViewMore') }}</a>
            </div>
            <div class="row row-cols-2 row-cols-md-3 row-cols-xl-5 g-2 g-lg-6 mx-0 mb-4" id="div_just_for_you">
                @foreach ($stock_list['just_for_you'] as $k => $v)
                    @if (!empty($v['preferential_price']))
                        <x-product-sale id="{{ $v['id'] }}" name="{{ $v['name'] }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $v['preferential_price'] }}" discount="{{ $v['discount'] }}"
                            oPrice="{{ $v['retail_price'] }}" coin="{{ $v['coin'] }}" frame="1" :rating="$v['rating']" :sold="$v['sold']" :hasInv="$v['has_inv']">
                        </x-product-sale>
                    @else
                        <x-product-default id="{{ $v['id'] }}" name="{{ $v['name'] }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $v['retail_price'] }}" coin="{{ $v['coin'] }}" frame="1"
                            :rating="$v['rating']" :sold="$v['sold']" :hasInv="$v['has_inv']">
                        </x-product-default>
                    @endif
                @endforeach
            </div>
            <button class="btn btn-primary w-md-50 w-100 mx-auto" id="btn_more_just_for_you">{{ __('robot.MoreProducts') }}</button>
        </div>
    </div>
    <script>
        // 橫幅Banner
        var swiper = new Swiper(".slideBanner", {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            speed: 800,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
            },
        });
        // 大分類
        var swiper = new Swiper(".slideCate", {
            breakpoints: {
                '320': {
                    slidesPerView: 4,
                    grid: {
                        rows: 2,
                    },
                    spaceBetween: 0,
                },
                '576': {
                    slidesPerView: 5,
                    grid: {
                        rows: 2,
                    },
                    spaceBetween: 0,
                },
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
        // 分類
        var swiper = new Swiper(".slideSort", {
            breakpoints: {
                '320': {
                    slidesPerView: 3,
                },
                '576': {
                    slidesPerView: 3,
                },
                '1200': {
                    slidesPerView: 5,
                },
            },
            spaceBetween: 8,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
        // 分類-熱門
        var swiper = new Swiper(".slidePopular", {
            breakpoints: {
                '320': {
                    slidesPerView: 2,
                },
                '576': {
                    slidesPerView: 3,
                },
                '1200': {
                    slidesPerView: 6,
                },
            },
            spaceBetween: 8,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
        var swiper = new Swiper(".slideStock", {
            breakpoints: {
                '320': {
                    slidesPerView: 2,
                },
                '576': {
                    slidesPerView: 3,
                },
                '1200': {
                    slidesPerView: 6,
                },
            },
            spaceBetween: 8,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
@endsection