@extends('frontend.layouts.template')
@section('stylesheet')
<link href="{{ asset('frontend/assetsnew/css/home.css') }}" rel="stylesheet">
    @php
    if( $news_category ){
        echo '<style>';
        foreach( $news_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('content')
<div class="row box-banner" style="">
    <div class="col-12 p-0">
        <div id="demo" class="carousel slide" data-ride="carousel" data-interval="5000">
            <!-- The slideshow -->
            <div class="carousel-inner">
                @if( $sliders )
                @foreach ($sliders as $idx =>  $item)
                <div class="carousel-item embed-responsive-item {{ $idx == 0 ? 'active' : ''}}">
                    <img src="{{ asset( $item->slider->path . $item->slider->filename) }}" alt="">
                    <div class="box-in-banner">
                        <div class="c-white text-shadow tex-seameo f-bold ">
                            {{ $item->name }}
                        </div>
                        <div class="mt-2 mb-4 c-white text-shadow text-sub-banner">
                            {!! $item->description !!}
                        </div>
                        <div class="pt-2">
                            <a href="{{ $item->slider->link }}" class="read-more">Read More</a>
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
            </div>

            <div>
                <div class="box-in-banner-driver">
                    <!-- Indicators -->
                    <ul class="carousel-indicators">
                        @if( $sliders )
                        @foreach ($sliders as $idx =>  $item)
                            <li data-target="#demo" data-slide-to="{{ $idx }}" {!! $idx == 0 ? 'class="active"' : ''!!}></li>
                        @endforeach
                        @endif
                    </ul>
                </div>
            </div>

            <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <i class="fa fa-angle-left" aria-hidden="true"></i>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </a>

            <div class="d-none d-sm-block position-absolute box-4" style="">
                <div class="row res-m-0" style="margin: 0">
                    <div class="col-sm-12 col-xl-1"></div>
                    <div class="col-sm-12 col-xl-10 res-p-30">
                        <div class="row box-shadow" style="background: #fff;">
                            @if ($services)
                                @foreach ($services as $item)
                                    <div class="col-6 col-sm-3 col-xl-3 p-0" style="">
                                        <div class="box-sub-4" style="">
                                            <div><img src="{{ asset($item->services->path . $item->services->filename ) }}" alt=""></div>
                                            <div class="c-black"><b>{{ $item->name }}</b></div>
                                            <div class="c-black">
                                                {!! $item->description !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                    </div>
                    <div class="col-sm-12 col-xl-1"></div>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="row d-block d-sm-none res-m-0" style="margin: 0">
    <div class="col-sm-12 col-xl-1"></div>
    <div class="col-sm-12 col-xl-10 res-p-30">
        <div class="row " style="background: #fff;">
            @if ($services)
            @foreach ($services as $item)

            <div class="col-12 col-sm-3 col-xl-3 p-0 mt-2" style="">
                <div class="box-sub-4" style="">
                    <div><img src="{{ asset($item->services->path . $item->services->filename ) }}" alt=""></div>
                    <div class="c-black"><b>{{ $item->name }}</b></div>
                    <div class="c-black">
                        {!! $item->description !!}
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>

    </div>
    <div class="col-sm-12 col-xl-1"></div>
</div>

@if ($centre)
<div class="row mt-150">
    <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 box-t">
            <b class="f-bold">{{ $centre->subject }}</b>
        </div>
        <div class="text-center c-black box-stem" style="">
            @php
                $detail = @json_decode( $centre->detail );
            @endphp
            {!! $detail->content !!}
        </div>
        <div class="text-center" style="margin-top: 35px;margin-bottom: 35px;">
            <a href="{{ $detail->link }}" class="stem-click stem-b" target="_blank" style="">
                <img src="{{ asset('frontend/assetsnew/img/Icon/All%20icon-07.svg') }}" alt="" style="width: 25px"> STEM Standards</a>
        </div>
    </div>
</div>
@endif
@if ($about)
    @php
        $about_detail = @json_decode($about->detail);
    @endphp
<div class="row" id="mt-100" style="">
    <div class="col-sm-12 col-xl-1"></div>
    <div class="col-sm-12 col-xl-10 res-p-30">
        <div class="row justify-content-center h-100">
            <div class="col-xl-6 p-0">
                <div class="box-youtube">
                    <iframe width="100%" height="100%" src="{{ $about_detail->youtube }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
            <div class="col-xl-6 p-0" style="background: #22559E">
                <div class="box-ab" style="">
                    <div id="demo2" class="carousel slide" data-ride="carousel" data-interval="5000" style="height: 100%;">


                        <ul class="carousel-indicators">
                            <li data-target="#demo2" data-slide-to="0" class="active"></li>
                            <li data-target="#demo2" data-slide-to="1" class=""></li>
                        </ul>

                        <div class="carousel-inner">
                            <div class="carousel-item embed-responsive-item active">
                                <div style="padding: 50px;" class="c-white b-res-50">
                                    <div class="f-s-27">
                                        <b>{{ $about_detail->vision->subject }}
                                            <span class="icon-link" style=""><i class="fa fa-external-link" aria-hidden="true"></i></span></b>
                                    </div>
                                    <div style="padding:5px 0">
                                        <span style="background:#EE3424;padding: 0px 10px;margin-right:10px">VISION</span>
                                        <span data-target="#demo2" data-slide-to="1" style="cursor: pointer;">MISSION</span>
                                    </div>
                                    <div class="f-s-17">
                                        {!! $about_detail->vision->detail !!}
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item embed-responsive-item">
                                <div style="padding: 50px;" class="c-white b-res-50">
                                    <div class="f-s-27">
                                        <b>{{ $about_detail->mission->subject }}
                                            <span class="icon-link" style=""><i class="fa fa-external-link" aria-hidden="true"></i></span></b>
                                    </div>
                                    <div style="padding:5px 0">
                                        <span data-target="#demo2" data-slide-to="0" style="cursor: pointer;">VISION</span>
                                        <span style="background:#EE3424;padding: 0px 10px;margin-left:10px">MISSION</span>
                                    </div>
                                    <div class="f-s-17">
                                        {!! $about_detail->mission->detail !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-xl-1"></div>
</div>
@endif

<div class="row box-bg-stem">
    <div class="col-sm-12 col-xl-1"></div>
    <div class="col-sm-12 col-xl-10 res-p-30">
        @if ($articles)
            @foreach ($articles as $idx => $item)
                @if ($idx%2)

                    <a href="" class="click-ac">
                        <div class="row box-list">
                            <div class="col-sm-12 col-xl-1 p-0"></div>


                            <div class="d-block d-sm-none col-sm-12 col-xl-4 p-0">
                                <div>
                                    <img src="{{ asset( $item->home_image->path . $item->home_image->filename ) }}" alt="">
                                </div>
                            </div>


                            <div class="col-sm-7 col-xl-7 p-0 box-shadow" style="background:rgba(255,255,255,0.4)">
                                <div class="c-black box-edu" style="">
                                    <b class="topic">{{ $item->subject }}</b>
                                    <div>
                                        {{ $item->description }}
                                    </div>
                                </div>
                            </div>

                            <div class="d-none d-sm-block col-sm-5 col-xl-4 p-0">
                                <div>
                                    <img src="{{ asset( $item->home_image->path . $item->home_image->filename ) }}" alt="">
                                </div>
                            </div>
                        </div>
                    </a>
                @else
                    <a href="" class="click-ac">
                        <div class="row box-list">
                            <div class="col-sm-5 col-xl-4 p-0">
                                <div>
                                    <img src="{{ asset( $item->home_image->path . $item->home_image->filename ) }}" alt="">
                                </div>
                            </div>
                            <div class="col-sm-7 col-xl-7 p-0 box-shadow" style="background:rgba(255,255,255,0.4)">
                                <div class="c-black box-edu" style="">
                                    <b class="topic">{{ $item->subject }}</b>
                                    <div>
                                        {{ $item->description }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-1 p-0"></div>
                        </div>
                    </a>
                @endif
            @endforeach
        @endif
    </div>
    <div class="col-sm-12 col-xl-1"></div>
</div>

<div class="row" style="margin-top: 30px">
    <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 AND EVENT</b>
        </div>
        <div class="row box-news" style="">
            @if ($news)
                @foreach ($news as $item)

                    <div class="col-sm-4 col-lg-4 col-res">
                        <div style="overflow: hidden;">
                            <a href="{{ url('news/'. $item->id .'/'. encodelink( $item->subject ) ) }}" class="click-news">
                                <img src="{{ asset($item->news_image->path . $item->news_image->filename) }}" alt="">
                            </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">
                                {!! $item->description !!}
                            </div>
                        </a>
                        <div class="text-view">
                            {{ date('d-m-Y', strtotime( $item->created_at ) ) }} &nbsp;&nbsp;|&nbsp;&nbsp; {{ $item->viewed }} views
                            <a href="{{ url('news/'. $item->id .'/'. encodelink( $item->subject ) ) }}" style="position: absolute;right: 0px;color: #666666;font-size: 20px;top: -5px">
                                <i class="fa fa-share-alt" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div class="mb-3">
                            <span class="ca-{{ $item->news_category->id }}">{{ $item->news_category->name }}</span>
                        </div>

                    </div>
                @endforeach
            @endif
        </div>
    </div>
</div>

<div class="row" style="margin-top: 30px">
    <div class="col-sm-12 col-xl-1"></div>
    <div class="col-sm-12 col-xl-10 res-p-15">
        <div class="row" id="p-120">
            @if ($events)
            <div class="col-sm-6 col-xl-6 col-res" style="">
                <div style="">
                    <a href="{{ url('events/'. $item->id .'/'. encodelink( $item->subject ) ) }}" class="click-event" style="">
                        <img src="{{ asset( $events[0]->news_image->path . $events[0]->news_image->filename ) }}" alt="">
                        <div class="middle">
                            <div class="f-bold c-white topic uppercase">{{ fullDateEn( $events[0]->event_date ) }}</div>
                            <div class="c-white" style="font-size: 18px;line-height: 22px">
                                Event Name : {{ $events[0]->subject }} <br>
                                Time : {{ getTime($events[0]->event_start) }} - {{ getTime($events[0]->event_end) }}
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-sm-6 col-xl-6 pl90 col-res" style="">
                <div class="main-event" style="">
                    @foreach ($events as $idx => $item)
                    @if( $idx > 0 )
                    <div class="" style="padding-bottom: 20px;">
                        <a href="{{ url('events/'. $item->id .'/'. encodelink( $item->subject ) ) }}" class="click-list-event">
                            <div class="f-bold topic uppercase">{{ fullDateEn( $item->event_date ) }}</div>
                            <div class="event-time">
                                Event Name : {{ $item->subject }} <br>
                                Time : {{ getTime($item->event_start) }} - {{ getTime($item->event_end) }}
                            </div>
                        </a>
                    </div>
                    @endif
                    @endforeach
                </div>
            </div>
            @endif

        </div>
    </div>
</div>
@endsection
@section('modals')
@if ($news_popup)
    @php
        $news_detail = @json_decode($news_popup->detail);
    @endphp
<div class="box-pop">
    <div class="c-white" style="font-size: 22px;">
        <b class="f-bold">{{ $news_popup->subject }}</b>
    </div>
    <div class="c-white" style="font-size: 15px;">
        {!! $news_detail->content !!}
    </div>
    <div style=";margin: 15px 0;">
        <a href="{{ $news_detail->link }}" class="go-link">
            Go To Link
        </a>
    </div>
    <div class="close-pop">
        X
    </div>
</div>
@endif
@endsection
@section('javascript')
    @if ( !Session::has('intro') )
    <script type="text/javascript">
        window.location.href="{{ url('intro') }}";
    </script>
    @endif
@endsection