@extends('frontend.layouts.template')
@section('content')
<div class="row box-banner" style="background: #F0F0F0;padding-bottom: 80px;">
    <div class="col-12">

        <div class="box-topic">
            <div class="row" style="">
                <div class="col-sm-12 col-xl-1"></div>
                <div class="col-sm-12 col-xl-10 res-p-15">

                    <div class="text-center c-black f-topic-news" style="">
                        <b class="f-bold">NEWS</b>
                        @if (!Request::exists('tag'))
                            <div style="font-size: 16px;">
                                <span class="co-a tab-news active" data-id="all">ALL</span>
                                @if ($category)
                                    @foreach ($category as $item)
                                        <span class="co-{{ $item->id }} tab-news" data-id="{{ $item->id }}">{{ $item->name }}</span>
                                    @endforeach
                                @endif
                            </div>
                        @endif
                    </div>
                    <div class="row box-news" style="">
                        @if ($news)
                            @foreach ($news as $item)
                                <div class="col-12 col-sm-4 col-lg-4 col-res-what mb-4 btab news-{{ $item->category_id }}">
                                    <div class="box-img-w" style="overflow: hidden;">
                                        <a href="{{ url('news/'. $item->id .'/' . encodelink( $item->subject ) ) }}" class="click-news-what" style="background: url({{ asset( $item->news_image->path . $item->news_image->filename ) }});">
                                            <img src="{{ asset( $item->news_image->path . $item->news_image->filename ) }}" alt="" id="imageid" style="opacity: 0">
                                        </a>
                                    </div>
                                    <a href="{{ url('news/'. $item->id .'/' . encodelink( $item->subject ) ) }}" class="click-news">
                                        <div class="c-black" style="padding: 15px 0 5px;">
                                            <b class="topic">{{ $item->subject }}</b>
                                        </div>
                                        <div class="c-black text-view">
                                            {!! $item->description !!}
                                        </div>
                                    </a>
                                    <div class="mt-2 mb-2 position-relative" style="font-size: 12px;color: #6b6b6b;">
                                        {{ date('d-m-Y', strtotime( $item->created_at) ) }} | {{ $item->viewed }} views
                                        <div class="position-absolute" style="right: 0;top: 0">
                                            <a href="">
                                                <img src="{{ asset('frontend/assetsnew/img/news/icon/icon-1.png') }}" alt="" style="width: 17px;">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        @php
                                            $color = @json_decode($item->news_category->description);
                                        @endphp
                                        <span class="ca-{{ $item->news_category->id }}">{{ $item->news_category->name }}</span>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="col-sm-12 col-xl-1"></div>
            </div>
        </div>
    </div>
</div>
<div class="row box-banner" style="background:#22559E;">
    <div class="col-md-12 col-xl-1"></div>
    <div class="col-md-12 col-xl-10">
        <div class="c-white f-topic-news" style="padding: 40px 0 0;">
            <b class="f-bold">EVENT</b>
        </div>

        <div class="mb-5">
            <div id="secondary-slider" class="splide">
                <div class="splide__track">
                    <ul class="splide__list">
                        @if ($events)
                        @foreach ($events as $item)
                        <li class="splide__slide" style="">
                            <a href="{{ url('event/'. $item->id .'/' . encodelink( $item->subject ) ) }}" class="a-clien1">
                                <div class="icon-c1 position-relative box-img-w-2" style="overflow: hidden;">
                                    <div class="icon-c1 position-relative click-news-what" style="background: url({{ asset( $item->news_image->path . $item->news_image->filename ) }});">
                                        <img src="{{ asset( $item->news_image->path . $item->news_image->filename ) }}" id="imageid2" class="" style="display: none;">

                                    </div>
                                    @php
                                    $color = @json_decode($item->news_category->description);
                                @endphp

                                    <span class="ca-{{ $item->news_category->id }} position-absolute" style="right: 0;bottom: 0;">{{ $item->news_category->name }}</span>
                                </div>
                                <div class="c-white mt-2" style="font-weight: 600;text-decoration: underline;">
                                    {{ strtoupper( dateEn( $item->event_date ) ) }}
                                </div>
                                <div class="c-white mt-2 mb-5" style="line-height: 1.2;font-size: 15px;">
                                    Event Name : {{ $item->subject }} <br>Time : {{ getTime( $item->event_start ) }} - {{ getTime( $item->event_end ) }}
                                </div>
                            </a>
                        </li>
                        @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12 col-xl-1"></div>
</div>

@endsection
@section('stylesheet')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

    @php
        if( $category ){
            echo '<style>';
            foreach( $category as $cate ){
                $co = @json_decode( $cate->description );
                $className = '.co-'. $cate->id;
                $classCate = '.ca-'. $cate->id;
                echo  $className .':hover, '. $className .'.active {'
                            .'background: '. $co->background .'; '
                            .'box-shadow: 1px 1px 3px 0px #d8d8d8; '
                            .'color: '. $co->color .'; '
                            .'}';
                echo  $classCate .'{'
                            .'background: '. $co->background .'; '
                            .'color: '. $co->color .'; '
                            .'padding: 2px 25px; '
                            .'font-size: 12px; '
                            .'}';
            }
            echo '</style>';
        }
    @endphp
@endsection
@section('javascript')
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

    <script type="text/javascript">
        $('.tab-news').click(function() {
            var id = $(this).data("id");
            $('.tab-news.active').removeClass('active');
            $(this).addClass('active');

            if (id === 'all') {
                $('.btab').show();
            } else {
                $('.btab').hide();
                $('.news-' + id).show();
            }
        });
        var imgWidth = $("#imageid").width();

        $('.box-img-w').css({
            'height': imgWidth
        })

        var imgWidth = $("#imageid2").width();

        $('.box-img-w-2').css({
            'height': imgWidth
        })

        document.addEventListener('DOMContentLoaded', function() {
            var splide = new Splide('#secondary-slider', {
                perPage: 3,
                breakpoints: {
                    '640': {
                        perPage: 2,
                        gap    : '1rem',
                    },
                    '490': {
                        perPage: 1,
                        gap    : '1rem',
                    },
                },
                rewind: true,
                gap: 15,
                pagination: true,
                arrows: false,
                autoplay: false,
                interval: 500,
                speed: 1000,
                type: 'loop'
            }).mount();

        });
    </script>
@endsection