@extends('layouts.app')
@section('title','My Karma Foundation | Activities')
@section('style')
<link rel="stylesheet" href="{{url('/assets/css/kstyle.css')}}">
@stop
@section('content')
@include('common.navigation')

<div class="container">
    <div class="row">
        <div class="activity-detail-img py-4">

            <img src="{{$activity->Main_image}}" alt="{{$activity->title}}" class="img-cover w-100 h-100  ">
        </div>
    </div>
</div>
<div class="container">
    <div class="row my-3">
<h3 class="fs-2">{{$activity->title}}</h3>
<p class="fs-4 text-tri">Published on <span class="text-section">{{$activity->activity_date}}</span></p>
<ul class="d-flex linkhover">
    <li class="list-unstyled ps-3"><a target="_blank" href="#" class="text-decoration-none fs-18 py-1 px-2 bg-tri rounded-pill text-tri mx-1"><i class="fa-brands fa-instagram"></i></a></li>
    <li class="list-unstyled ps-3"><a target="_blank" href="#" class="text-decoration-none fs-18 py-1 px-2 bg-tri rounded-pill text-tri mx-1"><i class="fa-brands fa-facebook"></i></a></li>
    <li class="list-unstyled ps-3"><a target="_blank" href="#" class="text-decoration-none fs-18 py-1 px-2 bg-tri rounded-pill text-tri mx-1"><i class="fa-brands fa-twitter"></i></a></li>
    <li class="list-unstyled ps-3"><a target="_blank" href="#" class="text-decoration-none fs-18 py-1 px-2 bg-tri rounded-pill text-tri mx-1"><i class="fa-brands fa-linkedin-in"></i></a></li>

</ul>
<div class="my-2">
    {{$activity->description}}
</div>
    </div>
</div>
@if($gallery)
<div class="container my-5 ">
    <div class="row">
        @php
        $counter = 1; // Initialize a counter variable
    @endphp
         @foreach ($gallery as $item)
         <div class=" col-md-6 col-lg-4 mt-4 galler-swiper">
             <a data-fslightbox href="#{{$activity->title}}{{ $counter }}" class="">
                 <div class="swiper-slide ">
                     <div class="" style="height: 200px">
                        
                         <img id="{{$activity->title}}{{ $counter }}" src="{{url($item->image)}}" alt="{{$activity->title}}" class="img-cover w-100 h-100  rounded-4">
                    </div>
                  
                 </div>
             </a>
         </div>
         @php
         $counter++; 
     @endphp
     @endforeach
      
     
    </div>
</div>
@endif
@include('common.footer')

@section('script')


@stop
@stop