@extends('edufair.layouts.master')
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <div class="findService bg-white my-3 mt-8">
            <div class="content">
                <div class="row">
                    <div class="col-lg-12">
                        <div id="ts-speakers" class="ts-speakers" style="background-image:url('{{asset('public/theme/assets/media/img/speaker_bg.png')}}')">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="py-5 pt-5 text-center" id="heading_ti_adn">
                                            <h1 class="font-w700 mb-2" id="f_ad_ne_main_title">
                                                Events Speakers
                                            </h1>
                                        </div>
                                    </div><!-- col end-->
                                </div><!-- row end-->
                                <div class="row">
                                    @foreach($speakers as $speaker)
                                        <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms">
                                            <div class="ts-speaker">
                                                <div class="speaker-img">
                                                    @php
                                                        $url = config('filesystems.asset').'/'.'speakers'.'/'.$speaker->photo;
                                                        $uploadedFile = pathinfo($url);
                                                        $old_filename = $uploadedFile['filename'];
                                                        $extension = $uploadedFile['extension'];
                                                        $imageLink = config('filesystems.asset').'/'.'speakers'.'/'.$old_filename.'.webp';
                                                    @endphp

                                                    <picture>
                                                        <source type="image/webp" srcset="{{$imageLink}}">
                                                        <source type="image/{{$extension}}" srcset="{{$url}}">
                                                        <img  class="img-fluid" src="{{$url}}" alt="{{$speaker->name}}">
                                                    </picture>
                                                    <a type="button" data-toggle="modal" data-target="#seapker_{{$speaker->id}}" class="view-speaker ts-image-popup" data-effect="mfp-zoom-in">
                                                        <i class="fa fa-plus"></i>
                                                    </a>
                                                </div>
                                                <div class="ts-speaker-info">
                                                    <h3 class="ts-title"><a href="#">{{$speaker->name}}</a></h3>
                                                    <p>
                                                        ({{$speaker->designation}},{{$speaker->sector}})
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                @endforeach
                                <!-- col end-->
                                </div><!-- row end-->
                            </div><!-- container end-->

                            <!-- shap img-->
                            <div class="speaker-shap">
                                <img class="shap1" src="images/shap/home_speaker_memphis1.png" alt="">
                                <img class="shap2" src="images/shap/home_speaker_memphis2.png" alt="">
                                <img class="shap3" src="images/shap/home_speaker_memphis3.png" alt="">
                            </div>
                            <!-- shap img end-->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @foreach($speakers as $speaker)
            <div class="modal fade" id="seapker_{{$speaker->id}}" tabindex="-1" role="dialog" aria-labelledby="modal-block-large" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="block block-themed block-transparent mb-0">
                            <div class="block-content-full">
                                <div class="row">
                                    <div class="col-xl-12">
                                        <!-- popup start-->
                                        <div id="popup_1" class="container ts-speaker-popup mfp-hide">
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="ts-speaker-popup-img">
                                                        @php
                                                            $url = config('filesystems.asset').'/'.'speakers'.'/'.$speaker->photo;
                                                            $uploadedFile = pathinfo($url);
                                                            $old_filename = $uploadedFile['filename'];
                                                            $extension = $uploadedFile['extension'];
                                                            $imageLink = config('filesystems.asset').'/'.'speakers'.'/'.$old_filename.'.webp';
                                                        @endphp

                                                        <picture>
                                                            <source type="image/webp" srcset="{{$imageLink}}">
                                                            <source type="image/{{$extension}}" srcset="{{$url}}">
                                                            <img  src="{{$url}}" alt="{{$speaker->name}}">
                                                        </picture>
                                                    </div>
                                                </div><!-- col end-->
                                                <div class="col-lg-8">
                                                    <div class="block-options float-right">
                                                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                                            <i class="fa fa-fw fa-times" style="color: red"></i>
                                                        </button>
                                                    </div>
                                                    <div class="ts-speaker-popup-content">
                                                        <h3 class="ts-title">{{$speaker->name}}</h3>
                                                        <span class="speakder-designation">{{$speaker->designation}}</span>
                                                        <div class="text-justify mb-3 border-bottom">
                                                            {!! $speaker->profile !!}
                                                        </div>
                                                        <h4 class="session-name">
                                                            Sessions by {{$speaker->name}}
                                                        </h4>
                                                        <div class="row">
                                                            @foreach($speaker->schedules as $key=>$schedule)
                                                                <div class="col-lg-6">
                                                                    <div class="speaker-session-info">
                                                                        <h4 class="bg-light p-1" title="Date: {{$schedule->date}}">Day {{++$key}}</h4>
                                                                        <span class="badge badge-info">{{date('H:i A',strtotime($schedule->start_time))}} - {{date('H:i A',strtotime($schedule->end_time))}}</span>
                                                                        <div class="text-justify mb-3 border-bottom">
                                                                            {!! $schedule->topic !!}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                        <div class="ts-speakers-social">
                                                            @if(isset($speaker->fb_link)) <a href="{{$speaker->fb_link}}" target="_blank"><i class="fab fa-facebook"></i></a> @endif
                                                            @if(isset($speaker->twitter_link)) <a href="{{$speaker->twitter_link}}" target="_blank"><i class="fab fa-twitter"></i></a> @endif
                                                            @if(isset($speaker->instagram_link)) <a href="{{$speaker->instagram_link}}" target="_blank"><i class="fab fa-instagram"></i></a> @endif
                                                            @if(isset($speaker->google_link)) <a href="{{$speaker->google_link}}" target="_blank"><i class="fab fa-google-plus"></i></a> @endif
                                                            @if(isset($speaker->linkedin_link)) <a href="{{$speaker->linkedin_link}}" target="_blank"><i class="fab fa-linkedin"></i></a> @endif
                                                        </div>
                                                    </div><!-- ts-speaker-popup-content end-->
                                                </div><!-- col end-->
                                            </div><!-- row end-->
                                        </div><!-- popup end-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    @endforeach

@endsection