@extends('frontend.layouts.template')
@section('content')
<div class="row" style="background: #fff;">
    <div class="col-12 col-sm-1 col-xl-1" style=""></div>
    <div class="col-12 col-sm-7 col-xl-7 box-evnet-detail" style="">
        <div class="">
            <img src="{{ asset($event->news_image->path . $event->news_image->filename) }}" alt="" style="">
        </div>
        <div class="c-black mt-5" style="">
            <div class="mb-2">
                @php
                    $tagco = @json_decode($event->news_category->description);
                @endphp
                <span class="c-{{ $event->news_category->id }}" style=""><a href="{{ url('news-and-events?tag='. $event->news_category->name ) }}" style="color:{{ $tagco->color }};">{{ $event->news_category->name }}</a></span>
            </div>
            <h2 style="text-decoration: underline;font-weight: 600;"><b class="f-bold">{{ strtoupper( dateEn( $event->event_date ) ) }}</b></h2>
        </div>
        <div class="c-black mt-2 mb-3" style="font-weight: 600;">
            Event Name : {{ $event->subject }} <br>Time : {{ getTime( $event->event_start ) }} - {{ getTime( $event->event_end ) }}
        </div>
        <div class="c-black mb-5" style="font-weight: 600;">
            {!! $event->detail !!}
            <div class="text-right" style="margin: 60px 0 60px;">
                <a href="javascript:" onclick="goBack()" class="back-click" style="">BACK</a>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-4 col-xl-4 box-evnet-detail-right" style="background: #22559E">
        <div style="margin-top: -15px;">
            <div class="c-white f-topic-news" style="padding: 0px 0 15px;">
                <b class="f-bold">Others Events</b>
            </div>
            @if ($events)
                @foreach ($events as $item)
                    <div class="mb-3">
                        <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

                                <a class="c-{{ $item->news_category->id }} position-absolute" style="right: 0;bottom: 0;" href="{{ url('news-and-events?tag='. $item->news_category->name ) }}">{{ $item->news_category->name }}</a>
                            </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>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</div>

@endsection
@section('javascript')
<script>
    var imgWidth = $("#imageid2").width();
    $('.box-img-w-2').css({
        'height': imgWidth/1.6
    })
    function goBack() {
		    window.history.back();
	}

</script>

@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 = '.c-'. $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