@extends('welcome')
@section('content')

<style>
    .mb-1 {
        margin-bottom: 10px;
    }

    .me-1 {
        margin-right: 10px;
    }

    .galleryno {
        display: none;
    }
</style>
<section class="page-header page-header-classic">
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="breadcrumb">
                    <li><a href="{{URL::to('index')}}">Home</a></li>
                    <li class="active">{{$event}}</li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col p-static">
                <span class="page-header-title-border visible"></span>
                <h1 data-title-border="">{{$event}}</h1>

            </div>
        </div>
    </div>
</section>
<section class="about-us padding-section yellow-bg" style="padding:50px 0 50px 50px;">
    <div class="container-fluid">
        <h2 class="font-weight-normal text-7 text-center mb-5">Sri Ramakrishna International <strong class="font-weight-extra-bold">{{$event}}</strong></h2>

        <div class="tabs tabs-center">
            <ul class="nav nav-tabs justify-content-center" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" href="#images" data-bs-toggle="tab" aria-selected="true" role="tab">Photos</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" href="#videos" data-bs-toggle="tab" aria-selected="false" tabindex="-1" role="tab">Videos</a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="images" class="tab-pane active" role="tabpanel">
                    <div class="row  pb-3"> <div class="lightbox mb-3 px-0 " data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                        @if($photo!=null)
                        @foreach($photo as $item)
                       
                            <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon mb-1 me-1"  style="max-width:320px;" href="{{asset('storage/gallery/'.$item['name'])}}">
                                <img class="img-fluid" src="{{asset('storage/gallery/'.$item['name'])}}" alt="Project Image" style="width:100%; height:auto;">
                            </a>
                            
                       
                       
                        @endforeach
                        @else
                        <div class="text-center">
                            <p>No Records Found!</p>
                        </div>
                        @endif
                    </div> </div>
                </div>
                <div id="videos" class="tab-pane" role="tabpanel">
                    <div class="row">
                        @if($video!=null)
                            @foreach($video as $item)
                        <div style="width: 315px;">
                            
                             <div class="card">
                                <div class="card-body p-0 mb-3">

                                    <iframe style="height:200px;"src="{{$item['url']}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

                                </div>
                            </div>
                            </div>
                            @endforeach
                            @else
                            <div class="text-center">
                                <p>No Records Found!</p>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>





@stop