@extends('frontEnd.layout-ex')

@section('content')

    <section class="pager-section overlay">
        <div class="container">
            <div class="main-banner-content p-relative">
                <div class="social-links">
                    <ul>
                        <li><a href="https://www.facebook.com/theblackstoryproject" title=""><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="https://www.instagram.com/theblackstoryproject/" title=""><i class="fab fa-instagram"></i></a></li>
                    </ul>
                </div><!--social-links end-->
                <div class="pager-content">
                    <ul class="breadcrumb-list">
                        <li><a href="#" title="">Home</a></li>
                        <li><span>Videos & Webinars  </span></li>
                    </ul><!--breadcrumb end-->
                    <h2 class="page-title">Videos & Webinars</h2><br>
                    <small>The exhibition is running concurrently with a series of webinars hosted by the Cosmos Foundation, <br>to deconstruct the ties between Black-South Asian Communities</small>

                </div><!--pager-content end-->
            </div><!--main-banner-content end-->
        </div>
    </section><!--pager-section end-->
    <style>
        .jumbotron.text-center.mt-2 {
            margin-top: 0px !important;
        }

        section .section-title {
            text-align: center;
            color: #000;
            margin-bottom: 50px;
            text-transform: uppercase;
        }
        #tabs {
            /* background: #007b5e; */
            color: #000;
            position: relative;
            margin-top: 20px;
        }
        #tabs h6.section-title{
            color: #000;
        }

        #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: #000;
            background-color: transparent;
            border-color: transparent transparent #f3f3f3;
            border-bottom: 4px solid !important;
            font-size: 15px;
            font-weight: bold;
        }
        #tabs .nav-tabs .nav-link {
            border: 1px solid transparent;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
            color: #000;
            font-size: 18px;
        }

        .container-video{
            position: relative;
            width: 1140px !important;

        }
        .jumbotron.text-center.mt-2 {
            padding: 12px !important;
        }
        p.ve-title1 {
            text-align: center;
            font-size: 15px;
            padding: 10px 10px;
            line-height: 30px;
        }
        p.ve-title2 {
            text-align: center;
            font-size: 15px;
        }
        footer.text-center {
            background-color: #e9ecef;
            font-size: 14px;
            font-weight: 500;
            padding: 5px;
        }
        .row.part {
            position: relative;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .figure-caption {
            font-size: 90%;
            color: #000000 !important;
            font-weight: bold !important;
            font-size: 15px !important;
        }
        h3.ve-participents {
            text-align: center !important;
            font-weight: 700 !important;
        }

        h3.participents-list {
            text-align: justify!important;
        }
        p.program {
            font-size: 20px;
            font-weight: bold;
        }
        p.time {
            font-weight: 500;
        }
        p.name {
            text-align: center;
            font-style: italic;
            line-height: 0px;
        }
        @media only screen and (max-width: 768px) and (min-width: 320px)  {

            iframe.exihibition {
                position: relative !important;
                width: 100% !important;
            }
            iframe.video {
                position: relative !important;
                width: 100% !important;
                height: auto !important;
            }
            .container-video {
                position: relative !important;
                width: 100% !important;
                height: auto!important;
            }
            p.ve-title1 {
                text-align: justify !important;

            }
            p.footer {
                font-size: 12px !important;
            }
            h1.title {
                font-size: 24px!important;
            }

            p.date {
                font-size: 12px!important;
            }
            .jumbotron.text-center.mt-2 {
                padding: 3px !important;
            }
            .figure-caption {
                font-size: 12px !important;
                text-align: center!important;
            }
            .btn-success {

                font-size: 12px!important;
            }
            .col-12 {

                margin-top: 10px!important;
            }
            h3.video-title {
                font-size: 20px!important;
            }
            p.video-desc {
                text-align: justify;
                font-size: 15px;
            }



        }

    </style>

    <section id="tabs">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <nav>
                        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Exhibition </a>
                            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Webinars </a>
                            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Video Feature</a>
                        </div>
                    </nav>
                    <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">


                            <section class="block">
                                <div class="container">
                                    <div class="about-section">
                                        <div class="row align-items-center">
                                            @foreach($exhibitions as $video)
                                                <div class="col-lg-6">
                                                    <div class="abt-img overlay">
                                                        <img src="@if($video->photo_file){{asset('uploads/topics/').'/'.$video->photo_file}}@else{{'https://via.placeholder.com/2500x1669'}} @endif" alt="" class="w-100 videos-img">
                                                        <h2 class="video-title">{{$video->title_en}}</h2>
                                                        <a href="@if($video->video_type==1){{$video->video_file}}@endif" title="{{$video->title_en}}" class="play-btn html5lightbox"><i class="fa fa-play"></i></a>
                                                    </div><!--abt-img end-->

                                                </div>
                                            @endforeach
                                        </div>
                                    </div><!--about-section end-->
{{--                                    @include('frontEnd.includes.paginator', ['paginator' => $videos, 'link_limit' => 4])--}}
                                </div>
                            </section>

                        </div>
                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <section class="block">
                                <div class="container">
                                    <div class="about-section">
                                        <div class="row align-items-center">
                                            @foreach($webinars as $video)
                                                <div class="col-lg-6">
                                                    <div class="abt-img overlay">
                                                        <img src="@if($video->photo_file){{asset('uploads/topics/').'/'.$video->photo_file}}@else{{'https://via.placeholder.com/2500x1669'}} @endif" alt="" class="w-100 videos-img">
                                                        <h2 class="video-title">{{$video->title_en}}</h2>
                                                        <a href="@if($video->video_type==1){{$video->video_file}}@endif" title="{{$video->title_en}}" class="play-btn html5lightbox"><i class="fa fa-play"></i></a>
                                                    </div><!--abt-img end-->

                                                </div>
                                            @endforeach
                                        </div>
                                    </div><!--about-section end-->
                                </div>
                            </section>
                        </div>
                        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                            <section class="block">
                                <div class="container">
                                    <div class="about-section">
                                        <div class="row align-items-center">
                                            @foreach($features as $video)
                                                <div class="col-lg-6">
                                                    <div class="abt-img overlay">
                                                        <img src="@if($video->photo_file){{asset('uploads/topics/').'/'.$video->photo_file}}@else{{'https://via.placeholder.com/2500x1669'}} @endif" alt="" class="w-100 videos-img">
                                                        <h2 class="video-title">{{$video->title_en}}</h2>
                                                        <a href="@if($video->video_type==1){{$video->video_file}}@endif" title="{{$video->title_en}}" class="play-btn html5lightbox"><i class="fa fa-play"></i></a>
                                                    </div><!--abt-img end-->

                                                </div>
                                            @endforeach
                                        </div>
                                    </div><!--about-section end-->
                                </div>
                            </section>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </section>




@endsection