@extends('client.layouts.main')

@section('title', 'Detail Edukasi')

@section('content')
<section class="inner-blog b-details-p pt-50 pb-50">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-3">
                <h2>Edukasi</h2>
                <hr>
            </div>
            <div class="col-lg-8">
                <div class="blog-details-wrap">
                    <div class="bsingle__post-thumb mb-30">
                        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner">
                                @if ($data['edukasi']->link)
                                <div class="carousel-item active" style="height: 400px">
                                    <iframe style="height: 100%;" src="{{$data['edukasi']->link}}">
                                    </iframe>
                                </div>
                                @endif
                            
                                @foreach ($data['edukasi']->gambar as $index => $item)
                                <div class="carousel-item {{!$data['edukasi']->link && $index == 0 ? 'active' : ''}}" style="height: 400px">
                                    <img class="d-block w-100" src="{{asset($item->file)}}" alt="Gambar Edukasi">
                                </div>
                                @endforeach
                                <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                                    data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                                    data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="meta__info">
                        <ul>
                            <li><i class="far fa-calendar-alt"></i> {{$data['edukasi']->created_at}}</li>
                            <li><i class="far fa-user"></i>oleh Admin</li>
                            <li class="cursor-pointer"><a data-toggle="modal" data-target="#shareModalCenter" class="active nav-link"><i class="far fa-share"></i>Bagikan</a></li>
                        </ul>
                    </div>
                    <div class="konten-editor pb-10">
                        <h2>{{$data['edukasi']->judul}}</h2>
                            {!! $data['edukasi']->konten !!}
                    </div>
                    @if ($data['edukasi']->skrining)
                    <div class="slider-btn  w-100 mx-auto">
                        <a href="{{route('client.skrining')}}" class="btn ss-btn mx-auto" data-animation="fadeInRight"
                            data-delay=".8s">Mulai Skrining
                            <i class="fas fa-chevron-right"></i></a>
                    </div>
                    @endif
                </div>

            </div>
            <div class="col-lg-4">
                <aside>
                    <div class="widget mb-40" >
                        <div class="widget-title text-center" >
                            <h4 style="color: white;">Kategori</h4>
                        </div>
                        <div class="widget-body">
                            <ul class="cat__list">
                                @foreach ($data['kategori'] as $item)
                                @if (count($item->edukasi) > 0)
                                <li><a  href="{{route('client.edukasi', [$item->uuid])}}">{{$item->nama}}</a> </li>
                                @endif
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="widget mb-40" >
                        <div class="widget-title text-center" >
                            <h4 style="color: white;">Tags</h4>
                        </div>
                        <div class="widget-body">
                            <div class="widget__tag ">
                                <ul>
                                    @foreach (explode(',', $data['edukasi']->tags); as $item)
                                    <li><a href="{{route('client.edukasi', ['all', $item])}}">{{$item}}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
</section>

<!-- Modal -->
<div class="modal fade" id="shareModalCenter" tabindex="-1" role="dialog" aria-labelledby="shareModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="shareModalCenterTitle">Bagikan Edukasi</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body d-flex mx-auto">
            <a href="whatsapp://send?text={{$data['edukasi']->judul}} | {{URL::full();}}" class="share-btn mr-3">
                <i class="fa-brands fa-whatsapp"></i>
            </a>
            <a href="https://t.me/share/url?url={{URL::full()}}&text={{$data['edukasi']->judul}}" class="share-btn mr-3" style="background-color: #3198c3;">
                <i class="fa-brands fa-telegram"></i>
            </a>
            <a href="https://twitter.com/intent/tweet?text={{$data['edukasi']->judul}}" class="share-btn mr-3" style="background-color: #2cafe8">
                <i class="fa-brands fa-twitter"></i>
            </a>
        </div>
      </div>
    </div>
  </div>
@endsection