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

@section('style')

@endsection

@section('content')
    <main>
        <div class="pt-6">
            <div class="text-center pb-6">
                <h3 class="title-text --spacing">{{ $tip_detail["name_$lang"] ?? '' }}</h3>
            </div>
            {!! mwz_getTextString($tip_detail["description_$lang"] ?? '') !!}
            <div class="pt-2">
                <hr />
                <div class="container pt-6">
                    <div class="text-center pb-8">
                        <h4>@lang('frontend::lang.lang_title_117')</h4>
                    </div>
                    <div class="flex flex-wrap justify-center -mx-2">
                        @if (!empty($tips) && count($tips) > 0)
                            @foreach ($tips as $tip)
                                <div class="p-2 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.lang_title_116')</a>
                                            </div>
                                        </div>
                                        <a href="{{ mwz_route('frontend.tip.detail', [create_slug($tip)]) }}"></a>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <script type="text/javascript">
        $('.the-heart').click(function() {
            $(this).toggleClass('active')
        })
    </script>
@endsection