@include('layout/frontend/_header')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        .slider-container {
               max-width: 680px;
    margin: auto;
        }
        .carousel-inner img {
            width: 100%;
            height: 340px;
            object-fit: cover;
            border-radius: 8px;
        }
      div#imageSlider {
    max-height: 350px;
}
        .carousel-control-prev, .carousel-control-next {
            width: 8%;
        }
        .carousel-control-prev-icon, .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 10px;
        }
       
        .carousel-caption {
            position: relative;
           top: -35px;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            max-height: 70px;
            border-radius: 0 0 8px 8px;
        }
       
        .thumbnail-container {
            display: contents;
            justify-content: center;
            margin-top: 10px;
        }
        .thumbnail {
            width: 100px;
            height: 60px;
            margin: 5px;
            cursor: pointer;
            border-radius: 5px;
            opacity: 0.6;
            transition: 0.3s;
        }
        .thumbnail:hover, .thumbnail.active {
            opacity: 1;
            border: 2px solid #007bff;
        }
    </style>


	
      	
<div id="colorlib-doctor">
	<div class="container">
		<div class="row">
            <div class="col-sm-12 breadcrumbs">
                <ol class="breadcrumb breadcrumb-2new" style="margin-bottom: 30px;">
                    <li class="breadcrumb-item"><a title="Go to IKI" href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ url('activity') }}">Activity</a></li>
					<li class="breadcrumb-item"><a href="javascript://">{{$getacivitydetails['a_title']}}</a></li>
                </ol>
            </div>
        </div>
        
        
	

        
        
		<div class="row animate-box"></div>
		<div class="col-sm-12">
		<div class="row">
		<div class="col-sm-6">
	
	
		@foreach($getacivitydetails as $gss)
		
		

		@endforeach
		<h3><b>{{$getacivitydetails['a_project_name']}}</b></h3>
			
		  
            	
		<span class="dur"><i class="fa fa-calendar"></i> {{ $getacivitydetails['a_month']  }} | {{ $getacivitydetails['a_year']  }}</span><br>
		
	
	
	@if( $getacivitydetails['project_category']=='Bilateral' )
							
						
						
            	<span style="padding: 5px 10px; color: #f2f2f2; background-color: #1F5787; border-radius: 30px;" class="label label-info badge">{{'Bilateral'}}</span>
														@elseif( $getacivitydetails['project_category']=='Global' )
															<span style="padding: 5px 10px; color: #f2f2f2; background-color:#84B545; border-radius: 30px;" class="label label-success badge">{{'Global'}}</span>
														@elseif( $getacivitydetails['project_category']=='Regional' )
															<span style="padding: 5px 10px; color: #f2f2f2; background-color: #E8C425; border-radius: 30px;" class="label label-warning badge">{{'Regional'}}</span>
														@endif<br>
	
	<p  class="badge badge-info" style="color: #000;
    background: #76c3b9;
    border-radius: 15px;" >{{ $getacivitydetails['themename']  }}</p><br>
	<span style="" class="label label-info info"><strong>Link To Project: </strong> &nbsp; <a 
		href="http://172.16.0.116/iki_new_live/public/index.php/single-project/{{ encrypt_decrypt('encrypt', $getacivitydetails['pids'])}}" class="badge badge-info" style="color: #000;
    background: #1987546b;
    border-radius: 15px;" target="_blank">Click Here</a></span><br><br>
	<p>{{ $getacivitydetails['a_short_desc']  }}</p>
	
		</div>
	       @if($getacivitydetails['activity_imgs'] !='')
			   <br />
<b>Notice</b>:  Undefined variable: getacivitydetails in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>128</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>128</b><br />
<br />
<b>Notice</b>:  Undefined variable: getacivitydetails in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>129</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>129</b><br />
			
				<div class="col-sm-6">
		<div class="slider-container">
    <div id="imageSlider" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
		
		
		 <br />
<b>Notice</b>:  Undefined variable: getacivitydetails in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>140</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>140</b><br />
	
		
				
		 <div class="carousel-item active">
                <img src="https://www.iki-india.com/public/uploads/activity_images/{{ $exp}}" class="d-block w-100">
						</div>		
           
         
          
        </div>

     <button class="carousel-control-prev" type="button" data-bs-target="#imageSlider" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#imageSlider" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>

    <!-- Thumbnails -->
		@foreach($expimage as $exp)
		
   <div class="thumbnail-container">
        <img src="https://www.iki-india.com/public/uploads/activity_images/{{ $exp}}" class="thumbnail active" onclick="changeSlide(0)">
   
    </div>
		 @endforeach 
</div>

		</div>
		
				@else
			<div class="col-sm-6">
			@if ( ($getacivitydetails['a_image']) !='' )
							<br />
<b>Warning</b>:  Use of undefined constant PUBLIC_PATH - assumed 'PUBLIC_PATH' (this will throw an Error in a future version of PHP) in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>201</b><br />
							<a href="{{ $singleImage }}" title="{{$getacivitydetails['a_title']}}" target="_blank"><img  src="{{ $singleImage }}" title="{{$getacivitydetails['a_title']}}" class="card-img-top" /></a>
							@else 
                      		<img  class="text-center" src="{{ URL::asset('images/no-image.png') }}" title="{{$getacivitydetails['a_title']}}" >
                      	@endif
						</div>
			@endif	
		<div class="col-sm-12">
		@if($getacivitydetails['a_desc'] !='')
		<h4>Project Updates </h4>
	    <p>{!! ($getacivitydetails['a_desc']) !!}</p>
          @endif  
		  
		  
		</div>
		@if($getacivitydetails['newstitle'] !='')

		<div class="col-sm-12">
		<strong>News Relevant to this activity: </strong>
		
		<br />
<b>Notice</b>:  Undefined variable: getacivitydetails in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>223</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>223</b><br />
<br />
<b>Notice</b>:  Undefined variable: getacivitydetails in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>224</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>224</b><br />
<br />
<b>Notice</b>:  Undefined variable: getacivitydetails in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>225</b><br />
<br />
<b>Notice</b>:  Trying to access array offset on value of type null in <b>/var/www/html/resources/views/frontend/single-activity.blade.php</b> on line <b>225</b><br />
		
		<ul>
				<li><a href="http://172.16.0.116/iki_new_live/public/index.php/single-news/{{ encrypt_decrypt('encrypt',$expnewsid[$ns])}}"
		target="_blank">{{ $news }}</a></li>
				
		</ul>
		
		</div>
		@endif
		
		</div>
		
	
	
        
      

<script>
var carousel = new bootstrap.Carousel(document.querySelector('#imageSlider'), { 
    interval: false, 
    ride: false     
});

function changeSlide(index) {
    carousel.to(index);
}

document.querySelector('#imageSlider').addEventListener('slide.bs.carousel', function (event) {
    let thumbnails = document.querySelectorAll('.thumbnail');
    thumbnails.forEach((thumb, index) => {
        thumb.classList.toggle('active', index === event.to);
    });
});
</script>



		
		
		         
          
            
            
		 
		
	
	
		
	
		
		
		
		
		</div>
		

		
</div>
</div>		

@include('layout/frontend/_footer')
<style>
    i.fa.fa-calendar {
    color: #fff;
}
    
span.dur {
    background-color: #0b2154;
    font-size: 15px;
    color: #fff;
    padding: 4px 12px;
    /* margin-top: 34px; */
    line-height: 54px;
    border-radius: 13px;
}
p {
    padding-top: 0rem;
    /* padding-bottom: 0.5rem; */
    line-height: 25px;
}

   .slideshow-container {
            text-align: center;
            max-width: 600px;
            margin: auto;
        }

        /* Main Large Image */
        .main-image {
            width: 100%;
            height: 350px;
            object-fit: cover;
            border-radius: 8px;
            transition: opacity 0.4s ease-in-out;
            cursor: pointer;
        }

        /* Thumbnail Container */
        .thumbnail-container {
            display: contents !important;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }

        /* Thumbnail Images */
        .thumbnail {
            width: 80px;
            height: 60px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 5px;
            opacity: 0.7;
            transition: transform 0.3s, opacity 0.3s;
        }

        /* Highlight Active Thumbnail */
        .thumbnail.active {
            opacity: 1;
            border: 2px solid #007bff;
            transform: scale(1.1);
        }

        /* Lightbox (Popup) Styles */
        .lightbox-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }

        .lightbox-content {
            position: relative;
            width: 80%;
            max-width: 700px;
            background: #fff;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
        }

        .lightbox-content img {
            width: 100%;
            max-height: 500px;
            object-fit: contain;
            border-radius: 5px;
        }

        .close-btn {
            position: absolute;
            top: 10px; right: 10px;
            cursor: pointer;
            font-size: 24px;
            color: white;
        }

        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 30px;
            color: white;
            cursor: pointer;
        }

        .prev-btn { left: 20px; }
        .next-btn { right: 20px; }
		
		.btnnews {
    padding: 5px 10px;
    color: #111;
    background-color: #43dde64d;
    border-radius: 30px;
}
</style>