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

@section('style')

@endsection

@section('content')
    <main>
        {{-- Section : Beauty Tip --}}
        <div class="pt-2 pt-lg-4">
            <div class="text-center">
                <h2 class="title-text --spacing">@lang('frontend::lang.lang_title_118')</h2>
            </div>
            <div class="container lg:pt-2">
                <div class="flex flex-wrap -mx-2 justify-center mx-auto lg:w-8/12 wheretobuy-item">
                    @if (!empty($Wheretobuy) && count($Wheretobuy) > 0)
                        @if (count($Wheretobuy) == 1)
                            @foreach ($Wheretobuy as $wheretobuy)
                                <div class="p-4 w-full xs:w-1/2">
                                    <div class="tips-card one-shop">
                                        <div class="tips-img">
                                            <img src="{{ convert_image($wheretobuy->image ?? '', 'wheretobuy') }}"
                                                alt="" />
                                        </div>
                                        <div class="tips-detail text-center branch-detail">
                                            <div class="tips-detail-title">{{ $wheretobuy["name_$lang"] ?? '' }}</div>
                                            <div class="tips-detail-subtitle">
                                                {!! mwz_getTextString($wheretobuy["description_$lang"] ?? '') !!}
                                            </div>
                                        </div>
                                        @if (!empty($wheretobuy->url_redirect))
                                            <a target="_blank" href="{{ $wheretobuy->url_redirect }}"></a>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @else
                            @foreach ($Wheretobuy as $wheretobuy)
                                <div class="p-4 w-full xs:w-1/2">
                                    <div class="tips-card">
                                        <div class="tips-img">
                                            <img src="{{ convert_image($wheretobuy->image ?? '', 'wheretobuy') }}"
                                                alt="" />
                                        </div>
                                        <div class="tips-detail text-center branch-detail">
                                            <div class="tips-detail-title">{{ $wheretobuy["name_$lang"] ?? '' }}</div>
                                            <div class="tips-detail-subtitle">
                                                {!! mwz_getTextString($wheretobuy["description_$lang"] ?? '') !!}
                                            </div>
                                        </div>
                                        @if (!empty($wheretobuy->url_redirect))
                                            <a target="_blank" href="{{ $wheretobuy->url_redirect }}"></a>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    @endif

                    {{-- ถ้าเหลืออันเดียวให้ใช้ xs:w-8/12 และเติมคลาส one-shop ที่ tips-card --}}
                    {{-- <div class="p-2 w-full xs:w-8/12">
                        <div class="tips-card one-shop">
                            <div class="tips-img">
                                <img src="{{ Module::asset('frontend:img/fake-shop.jpg') }}" alt="" />
                            </div>
                            <div class="tips-detail text-center branch-detail">
                                <div class="tips-detail-title">Branch Name</div>
                                <div class="tips-detail-subtitle">
                                    <p>It is a long established </p>
                                    <p>fact that a reader will </p>
                                    <p>be distracted by the readable</p>
                                    <p>content of a page when looking</p>
                                </div>
                            </div>
                            <a href="{{ url('#') }}"></a>
                        </div>
                    </div> --}}

                </div>
                <div class="pt-10 text-center">
                    <div class="tag-loading" style="display: none">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            style="margin: auto; background: none; display: block; shape-rendering: auto;" width="171px"
                            height="171px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
                            <g transform="rotate(0 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(30 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(60 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.75s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(90 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(120 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(150 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.5s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(180 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(210 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(240 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.25s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(270 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(300 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                            <g transform="rotate(330 50 50)">
                                <rect x="48.5" y="24" rx="0" ry="0" width="3"
                                    height="12" fill="#fe718d">
                                    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s"
                                        begin="0s" repeatCount="indefinite"></animate>
                                </rect>
                            </g>
                        </svg>
                    </div>
                    <h4 style="display: {{ $Wheretobuy->lastPage() >= 2 ? 'block' : 'none' }};" class="btn-viewmore"><a
                            href="javascript:get_wheretobuy()"> @lang('frontend::lang.lang_title_116')</a></h4>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <script>
        $('.the-heart').click(function() {
            $(this).toggleClass('active')
        })

        var page = 2;
        var totalPage = {{ $Wheretobuy->lastPage() ?? 0 }};
        get_wheretobuy = function() {
            $('.tag-loading').css('display', 'block')
            var url_webpage = $('#url_webpage').val();
            $.ajax({
                url: url_webpage + "/get-wheretobuy",
                type: "GET",
                data: {
                    page: page
                },
                success: function(resp) {
                    $('.tag-loading').css('display', 'none')
                    $('.wheretobuy-item').append(resp)
                    page += 1;
                    if (page > totalPage) {
                        $('.btn-viewmore').css('display', 'none')
                    }
                },
            });
        }
    </script>
@endsection