@extends('Web/app')

@section('main-content')
    @include('Web/layouts/hero')

    <section  class="bg-lightgrey pb-4 shadow-sm">
        <h1 class="heading text-darkblue-theme text-center bg-brown-theme p-2" style="text-transform: capitalize">
            {{-- We excel because <span class="fa fa-arrow-circle-down"></span>  --}}
        </h1>
        <div class="container mt-3">
            <div class="row rounded animate__animated animate__slideInUp">
                @foreach ($why_we_excel as $item)                
                    <div class="row col-lg-6 col-12 mb-4 m-auto excel-row rounded">
                        <div class="col-6 expand-video">
                            @if ($item->media_type == 'video')
                                <video src="{{asset('storage/whyExcel/'.$item->media)}}" controls class="col-12" id="excel_vid_{{$loop->index}}"></video>
                            @else
                                <img src="{{asset('storage/whyExcel/'.$item->media)}}" alt="" class="col-12">
                            @endif
                        </div>
                        <div class="col-6 excel-text text-center">
                            <a  class="lead">{{$item->title}}
                            </a>
                        </div>
                        @if ($item->youtube_link)
                            <a href="{{$item->youtube_link}}" class="text-white shadow-sm" target="_blank">Watch on youtube</a>
                        @endif
                    </div>      
                @endforeach
            </div>
        </div>
    </section>

    <section>
        <div class="mt-5">
            <div class="underlining shadow"></div>
            <h1 class="heading text-darkblue-theme p-3">RECENT <span class="text-blue-theme"> UPDATES</span> </h1>
            {{-- <div class="underlining"></div> --}}

            <div class="row mt-4 m-auto  bg-brown-theme p-3 rounded d-flex">

                @foreach ($events as $item)
                    <div class="col-12 col-lg-4 col-md-6 text-darkblue-theme bg-light rounded p-2 shadow-sm m-auto">
                        <h5 class="text-blue-theme">{{$item->title}}</h5>
                        <p class="text-muted" style="font-style: italic">Category: <span class="text-darkblue-theme">{{$item->category}}</span></p>
                        @if ($item->youtube_link)               
                                    <iframe class="col-12" src="https://www.youtube.com/embed/{{$item->youtube_link}}" allowfullscreen> </iframe>
                                @else
                                    @if ($item->media_type == 'video')
                                        <video src="{{asset('storage/updates/'.$item->media)}}" controls class="col-12"></video>
                                    @else
                                    <img src="{{asset('storage/updates/'.$item->media)}}" class="col-12">
                                    @endif
                                @endif
                        <p class="container-fluid">{!!$item->description!!}</p>

                        <div class="mt-2">
                            <a href="#" class=" ">READ MORE <span class="fa fa-arrow-circle-right"></span></a>
                        </div>                    
                    </div>
                @endforeach

                @foreach ($updates as $item)
                    <div class="col-12 col-lg-4 col-md-6 text-darkblue-theme bg-light rounded p-2 shadow-sm m-auto">
                        <h5 class="text-blue-theme">{{$item->title}}</h5>
                        <p class="text-muted" style="font-style: italic">Category: <span class="text-darkblue-theme">{{$item->category}}</span></p>
                        @if ($item->youtube_link)               
                                    <iframe class="col-12" src="https://www.youtube.com/embed/{{$item->youtube_link}}" allowfullscreen> </iframe>
                                @else
                                    @if ($item->media_type == 'video')
                                        <video src="{{asset('storage/updates/'.$item->media)}}" controls class="col-12"></video>
                                    @else
                                    <img src="{{asset('storage/updates/'.$item->media)}}" class="col-12">
                                    @endif
                                @endif
                        <p class="container-fluid">{!!$item->description!!}</p>
                        <div class="mt-2">
                            <a href="#" class=" ">READ MORE <span class="fa fa-arrow-circle-right"></span></a>
                        </div>
                    </div>

                @endforeach
                
                @if (count($updates) < 1 && count($events) < 1)
                    <div class="col-md-8 col-10 bg-light  p-3 m-auto text-center"><h5 class="lead text-blue-theme"  style="font-weight: bold">Please Check later</h5></div>
                @endif
                
            </div>
        </div>
    </section>
@endsection

@section('footer-scripts')
  
@endsection