@extends('front.layouts.app')
@section('content')
<div class="news-events-wraper">
  <div class="container-fluid news-events-head">
      <div class="banner">
          <div class="container">
              <nav class="pt-3 space-top" aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item color-white"><a href="#">Home</a></li>
                    <li class="breadcrumb-item color-white"><a href="#">Life at GIU</a></li>
                    <li class="breadcrumb-item color-white"><a href="#">Co-curricular Activities</a></li>
                  </ol>
              </nav>
              <div class="pt-sm-4">
                  <h1 class="pt-5">Co-curricular Activities</h1>
                  <p class="text-white">Green International University strives to give students top-notch sports and recreation facilities. The University offers many opportunities that contribute to a cheerful atmosphere and allow students to identify hidden abilities through extracurricular activities. </p>
              </div>
          </div>
      </div>
  </div>
  <div class="container-fluid news-events-body mt-5 px-md-5">
      <h1 class="pb-3 fw-bold">Co-curricular Activities</h1>
      <div class="row mb-5">
          <div class="col-xl-8 col-lg-12">
              <div class="row news-events-card">
                @foreach($CoActivitiesData as $activities)
                  <div class="col-lg-6 col-md-6 col-sm-6 col-12 p-2">
                    <a href="{{route('post-detail', $activities->slug)}}">
                        <div class="news-events-box">
                            <img src="{{URL('/')}}/front/images/new-giu/news-events/{{$activities->img}}" width="100%" alt="">
                            <div class="title-section">
                                <p class="fs-4 text-white title-section-border">{{ Str::limit($activities->name, 40, $end='.') }}</p>
                                <div class="row mt-4">
                                    <div class="col-lg-6 col-md-12 text-start">
                                        @if (!empty($activities['school']['name']))
                                            <p class="text-white fs-6"> <i class="fas fa-university fs-6"></i> {{$activities['school']['name']}}</p>
                                        @endif    
                                    </div>
                                    <div class="col-lg-6 col-md-12 text-start">
                                        <p class="text-white fs-6"><i class="fas fa-map-marker-alt fs-6"></i> Green International University</p>
                                    </div>
                                </div>
                            </div>
                        </div>   
                    </a>
                  </div>
                @endforeach 
                <div class="mt-4 d-flex justify-content-center pagination">
                    {{ $CoActivitiesData->links() }}
                </div>
              </div>
          </div>
          <div class="col-xl-4 col-lg-12 px-sm-4">
              <div class="row news-events-sec-card mt-2 pb-2">
                    <div class="col-lg-12 news-events-sub">
                      <h1 class="fs-1 fw-bold py-2 px-2 my-3">Upcoming Events</h1>
                        @foreach($CoActivitiesData as $activities)
                            <a href="{{route('post-detail', $activities->slug)}}">
                                <div class="row upcoming-events pt-2 mb-4">
                                    <div class="col-md-2 col-2 border-end py-0 text-center">
                                        <p class="fs-1 fw-bold  py-0 event-date">{{date('d', strtotime($activities->e_date)) }}</p>
                                        <p class="fs-4  event-month">{{date('M', strtotime($activities->e_date)) }}</p>
                                    </div>
                                    <div class="col-md-10 col-10">
                                        <p class="fs-5">{{$activities->name}}</p> 
                                    </div>
                                </div>
                            </a>
                        @endforeach   
                    </div>
                    <div class="col-lg-12 news-events-link">
                        <div class="row">
                            <div class="col-md-12">
                                <h1 class="fs-1 fw-bold py-2 px-3  my-3">Related links</h1>
                                <a href="{{route('news-and-events')}}">
                                  <div class="row related-link">
                                      <div class="col-md-12"> 
                                          <p class="fs-3 px-3 py-2">News & Events</p>
                                      </div>
                                  </div>
                                </a>
                                <a href="{{ route('under-development') }}">
                                  <div class="row related-link">
                                      <div class="col-md-12">
                                          <p class="fs-3 px-3 py-2">Club and Societies</p>
                                      </div>
                                  </div>
                                </a>
                                <a href="{{ route('under-development') }}">
                                  <div class="row related-link">
                                      <div class="col-md-12 ">
                                          <p class="fs-3 px-3 py-2">Newsletter</p>
                                      </div>
                                  </div>
                                </a>
                            </div>
                            <div class="col-md-12 mb-5 px-2">
                                <h1 class="fs-1 fw-bold px-3 my-4">Follow Us</h1>
                                <div class="col-md-6 mb-3 px-3 d-flex justify-content-between">
                                    <i class="fs-4 fab fa-instagram-square"></i>
                                    <i class="fs-4 text-dark fab fa-twitter"></i>
                                    <a href="https://www.facebook.com/studyatgiu/">
                                      <i class="fs-4 text-dark fab fa-facebook-f"></i>
                                    </a>
                                    <i class="fs-4 text-dark fab fa-youtube"></i>
                                    <i class="fs-4 text-dark fab fa-linkedin-in"></i>
                                </div>
                            </div>
                        </div>
                    </div>
              </div>
          </div>
      </div> 
  </div>
</div>
@endsection