@extends('layouts/fullLayoutMaster')

@section('title', 'Эпизод #'.$episode->id)

@section('vendor-style')

    <link rel="stylesheet" href="{{ asset('vndrs/css/flexslider/flexslider.css') }}">
	  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.3/plyr.css" />
@endsection
@section('page-style')
<link href="{{ asset('vndrs/emojiarea/css/emoji.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="epsode-content">
<div class="episode-post">
	<div class="flexslider">
  <ul class="slides">
  @foreach(json_decode($episode->media,true) as $media)
    <li>
	@if($media['type'] == 'image')
      <img src="{{ $media['url'] }}" />
  @else
	  <video id="player" class="idplayer" data-url="{{ $media['url'] }}" playsinline controls>
    <source src="{{ $media['url'] }}" type="video/mp4" />
</video>
	  @endif
    </li>
	@endforeach
  </ul>
</div>
</div>
<div class="episode-right">
		@php $euser = Helper::getUserInfo($episode->uid);  @endphp
 <div class="post_header">
		<div class="post_header-img"><img src="{{ $euser->photo }}"></div>
		<div class="post_header-rinfo">
			<div class="post_header-name">{{ $euser->name }}</div>
			<div class="post_header-date">{{ Helper::rdate('d M H:i',$episode->created_at, 1) }}</div>
		</div>
		</div>
		
		<div class="episode-comments-list" id="chat-message">
		@if(!empty($episode->text))
			<div class="episode-comments-list_item episode-phdesc">
				<img src="{{ $euser->photo }}">
					<div class="episode-comments-list_item-text"><a href="/uid/{{ $euser->id }}" target="_blank"><b>{{ $euser->name }}</b></a> {!! $episode->text !!}</div>
				</div>
		@endif
		@foreach($comments as $comment)
		@php $user = Helper::getUserInfo($comment->uid);  @endphp
				<div class="episode-comments-list_item">
				<img src="{{ $user->photo }}">
					<div class="episode-comments-list_item-text"><a href="/uid/{{ $comment->uid }}" target="_blank"><b>{{ $user->name }}</b></a> {!! $comment->text !!}</div>
				</div>
		@endforeach	
		</div>
		
		<div class="episode-right_fixed">
			<div class="post-stats_icon {{ $active['like'] ?? '' }} {{ (Auth::check()) ? 'clickLike' : '' }}" data-lenta="{{ $episode->id }}" data-type="episode">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.62 20.8101C12.28 20.9301 11.72 20.9301 11.38 20.8101C8.48 19.8201 2 15.6901 2 8.6901C2 5.6001 4.49 3.1001 7.56 3.1001C9.38 3.1001 10.99 3.9801 12 5.3401C13.01 3.9801 14.63 3.1001 16.44 3.1001C19.51 3.1001 22 5.6001 22 8.6901C22 15.6901 15.52 19.8201 12.62 20.8101Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg> <span>{{ $likes ?? 0 }}</span>
			</div>
			@if(Auth::check())
				@if(auth()->user()->id == $episode->uid)
					@include('includes/episode/edit')
					<div class="episode-edit-btn">
						<a class="openModal" data-modal="modalEpisodeEdit"><i data-feather="edit"></i></a>
						<button onclick="btnSend({{ $episode->id }}, 'episode.remove');" class="episode-edit-btn_delete"><i data-feather="trash"></i><button>
					</div>
				@endif
			<form class="submit-btnForm episode-comment-send" method="POST" data-form="episode.comment.send">
					@csrf
					<input type="hidden" class="chat-head" data-hid="{{ $episode->id }}">
						<p class="lead emoji-picker-container">
							<textarea name="text" data-emojiable="true" id="sendMes" placeholder="Напишите комментарий..."></textarea>
						</p>
						<div class="chat-smile" onclick="openSmile();">
							<i data-feather="smile"></i>
						</div>
						<div class="disc-line">
							
						</div>
						<div class="chat-send" onclick="sendMass();">
							<i data-feather="send"></i>
						</div>
					</form>
					@endif
		</div>
</div>
</div>
@endsection

@section('vendor-script')
	<script src="{{ asset('vndrs/emojiarea/js/jquery.emojiarea.min.js') }}"></script>
<script src="{{ asset('vndrs/js/flexslider/jquery.flexslider-min.js') }}"></script>
<script src="https://cdn.plyr.io/3.6.3/plyr.js"></script>
@endsection
@section('page-script')
<script src="{{ asset('vndrs/emojiarea/js/config.min.js') }}"></script>
<script src="{{ asset('vndrs/emojiarea/js/util.min.js') }}"></script>
<script src="{{ asset('vndrs/emojiarea/js/emoji-picker.min.js') }}"></script>
<script>
  $('.flexslider').flexslider({
    animation: "slide",
	slideshow: false,
	prevText: "",
	nextText: "",
  });
</script>
	 <script>
	 $( ".idplayer" ).each(function() {
  const player = new Plyr(this, {
});
});
const players = Plyr.setup('.video_itemyt'); 
</script>
<script>
$(function() {
        window.emojiPicker = new EmojiPicker({
          emojiable_selector: '[data-emojiable=true]',
          assetsPath: '/vndrs/emojiarea/img/',
          popupButtonClasses: 'fa fa-smile-o'
        });
        window.emojiPicker.discover();
      });
</script>
@endsection