@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.tips_01')</h2>
            </div>
            <div class="container lg:pt-6">
                <div class="flex flex-wrap -mx-2 tips-item">
                    @if (!empty($tips) && count($tips) > 0)
                        @foreach ($tips as $tip)
                            <div class="p-2 w-full xs:w-1/2 lg:w-3/12">
                                <div class="tips-card">
                                    <div class="tips-img">
                                        <img src="{{ convert_image($tip->image ?? '', 'tipsandtrend') }}" alt="" />
                                    </div>
                                    <div class="tips-detail">
                                        <div class="tips-detail-title">{{ $tip["name_$lang"] ?? '' }}</div>
                                        <div class="tips-detail-subtitle">{!! nl2br($tip["detail_$lang"] ?? '') !!}</div>
                                        <div class="tips-detail-extra">
                                            <a href="{{ mwz_route('frontend.tip.detail', [create_slug($tip)]) }}">@lang('frontend::lang.tips_02')</a>
                                        </div>
                                    </div>
                                    <a href="{{ mwz_route('frontend.tip.detail', [create_slug($tip)]) }}"></a>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </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: {{ $tips->lastPage() >= 2 ? 'block' : 'none' }};" class="btn-viewmore"><a href="javascript:get_tips()"> @lang('frontend::lang.lang_title_116')</a></h4>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <script type="text/javascript">
        $('.the-heart').click(function() {
            $(this).toggleClass('active')
        })
        var page = 2;
        var totalPage = {{ $tips->lastPage() ?? 0 }};
        get_tips = function() {
            $('.tag-loading').css('display', 'block')
            var url_webpage = $('#url_webpage').val();
            $.ajax({
                url: url_webpage + "/get-tips",
                type: "GET",
                data: {
                    page: page
                },
                success: function(resp) {
                    $('.tag-loading').css('display', 'none')
                    $('.tips-item').append(resp)
                    page += 1;
                    if (page > totalPage) {
                        $('.btn-viewmore').css('display', 'none')
                    }
                },
            });
        }
    </script>
@endsection