@extends('pages.frontend.layout.index')
<style>
    .blog_details_video iframe {
        width: 100vw;
        height: 60vw; 
        max-width: 100%;
        max-height: 95vh;
    }
    iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
</style>
@section('content')
    <!-- Breadcrumb Begin -->
    <div class="breadcrumb-option">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb__links">
                        <a href="{{route('home')}}"><i class="fa fa-home"></i> Home</a>
                        <a href="{{route('series')}}">Series</a>
                        <span>{{ucfirst($articleDetails->title)}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb End -->

    <!-- Anime Section Begin -->
    <section class="anime-details spad">
        <div class="container">
            <div class="anime__details__content">
                <div class="row">
                    <div class="anime__details__text col-lg-12">
                        <div class="remove-extra-text">
                            <div class="anime__details__title mb-2">
                                <h3>{{$articleDetails->title}}</h3>
                            </div>
                            <div class="anime__details__rating position-relative" style="text-align: start;">
                                <div class="Stars" style="--rating: {{ !empty($articleDetails->rating) ? $articleDetails->rating : 0 }};" aria-label="Rating of this series {{$articleDetails->rating}} out of 5.">
                                    <span>{{ !empty($articleDetails->rating) ? $articleDetails->rating : 0 }} out of 5</span>
                                </div>
                            </div>
                        </div>

                        
                        <div class="remove-extra-text">
                            <section class="blog-details pt-2 p-0">
                                <div class="row d-flex justify-content-center">
                                    <div class=" px-3 blog__details__pic blog_details_video">
                                        <img src="{{asset('upload/articles/detail_img/'.$articleDetails->detail_image)}}" alt="">
                                    </div>
                                    <p class="episode_data text-light m-0"></p>
                                </div>
                            </section>
                            <div class="hide-description-text">
                                <p>{!! html_entity_decode($articleDetails->description) !!}</p>
                                <div class="anime__details__widget">
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6">
                                            <ul>
                                                <li><span>Type:</span> {{$articleDetails->type == 2 ? 'TV Series' : 'Movie'}}</li>
                                                <li><span>Creator:</span> {{$articleDetails->creator_name}}</li>
                                                <li><span>Status:</span>  {{$articleDetails->tag == 1 ? "On Going":"Completed"}}</li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <ul>
                                                <li><span>Rating:</span> 8.5 / 161 times</li>
                                                <li><span>Release date:</span> {{date('F j, Y', strtotime($articleDetails->release_date))}}</li>
                                                <li><span>Categories:</span> {{implode(', ',$articleDetails->categories)}}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="anime__details__btn">
                                <div class="rating-custom">
                                    @for ($i = 5; $i >= 1; $i--)
                                        <span class="star {{ !empty($userRating) && $userRating->rating >= $i ? 'selected':''}}" data-value="{{$i}}">&#9733;</span>
                                    @endfor
                                </div>
                                <form data="{{ route('give_rating') }}" method="POST" class="form" id="ratingFrm">
                                    @csrf 
                                    <input type="hidden" name="ratting" id="ratting" value="">
                                    <input type="hidden" name="articleKey" value="{{encode($articleDetails->id)}}">
                                    <input type="submit" class="follow-btn" value="Give rating" id="rating_submit" style="display:none;">
                                </form>
                            {{--
                            <a href="#" class="follow-btn"><i class="fa fa-heart-o"></i> Follow</a>
                            <a href="#" class="watch-btn"><span>Watch Now</span> <i class="fa fa-angle-right"></i></a>
                            --}}
                        </div>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-lg-12 box_collaction">
                        <div class="anime__details__episodes season_box">
                            <div class="section-title">
                                <h5 id="breadcrumbData" class="d-flex"><p class="custom-breadcrumb p-0">Season</p></h5>
                            </div>
                            <div class="seasone_no">
                                @foreach($seasonInfo as $key => $value)
                                    <a href="javascript:void(0)" class="season season_no" data-id="{{encryptStr($value->season_no)}}">Season {{$value->season_no}}</a>
                                @endforeach
                            </div>
                            @foreach($seasonInfo as $keyData => $season)
                                <div class="episode_no" id="season_id_{{$season->season_no}}" style="display:none;">
                                    @foreach(explode(",",$season->video_ids) as $key => $value)
                                        <a href="javascript:void(0)" class="season view-video" data-id="{{$season->id}}" data-vid="{{encryptStr($value)}}" data-key="{{$key+1}}" data-season-no="{{$season->season_no}}">Episode {{$key+1}}</a>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-md-8">
                    <div class="row">
                        @if(count($actorInfo) > 0)
                            <div class="col-lg-6 col-md-6">
                                <div class="anime__details__review">
                                    <div class="section-title">
                                        <h5>Character</h5>
                                    </div>
                                    @foreach($actorInfo as $actor)
                                        <div class="anime__review__item">
                                            <div class="anime__review__item__text">
                                                <div class="anime__review__item__pic">
                                                    <img class="img-size" src="{{asset('upload/character/'.$actor->character_image)}}" alt="{{$actor->Character_image_alt}}">
                                                </div>
                                                <h6>{{$actor->character_name}}</h6>
                                                <p>{{date('d, F',strtotime($actor->character_birth_date))}}</p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>  
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="anime__details__review">
                                    <div class="anime__details__review">
                                        <div class="section-title">
                                            <h5>Voice Artist</h5>
                                        </div>
                                        @foreach($actorInfo as $actor)
                                        <div class="anime__review__item">
                                            <div class="anime__review__item__text">
                                                <div class="anime__review__item__pic">
                                                    <img class="img-size" src="{{asset('upload/voice-actor/'.$actor->voice_actor_image)}}" alt="{{$actor->voice_actor_image_alt}}">
                                                </div>
                                                <h6>{{$actor->voice_actor   }}</h6>
                                                <p>{{date('d, F Y',strtotime($actor->voice_actor_birth_date))}}</p>
                                                <p>{{$actor->voice_actor_country}}</p>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="anime__details__review">
                        <div class="section-title">
                            <h5>Reviews</h5>
                        </div>
                        @if( count($reviews) > 0) 
                            @foreach($reviews as $review)
                                    
                                @php 
                                    $getTimeDifference = getTimeDifference($review->created_at);
                                    $randomNumber = rand(1, 6); 
                                    $userImg = "review-".$randomNumber.'.jpg';
                                @endphp
                                <div class="anime__review__item">
                                    <div class="anime__review__item__pic">
                                        <img src="{{asset('assets/frontend/img/anime/'.$userImg)}}" alt="">
                                    </div>
                                    <div class="anime__review__item__text">
                                        <h6>{{$review->name}} - <span class="conversion-item" data-createdAT="{{$review->created_at}}"></span></h6>
                                        <p>{{$review->comment}}</p>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="anime__details__form">
                        <div class="section-title">
                            <h5>Your Comment</h5>
                        </div>
                        <form data="{{ route('review.store') }}" method="POST" class="form" id="formdata">
                            @csrf
                            <input type="hidden" name="articleKey" value="{{encode($articleDetails->id)}}">
                            <textarea placeholder="Your Comment" id="comment" name="comment"></textarea>
                            <p class="error"></p>
                            <button type="submit"><i class="fa fa-location-arrow"></i> Review</button>
                        </form>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="anime__details__sidebar">
                        <div class="section-title">
                            <h5>you might like...</h5>
                        </div>
                        <div class="product__sidebar__view__item set-bg" data-setbg="{{asset('assets/frontend/img/sidebar/tv-1.jpg')}}">
                            <div class="ep">18 / ?</div>
                            <div class="view"><i class="fa fa-eye"></i> 9141</div>
                            <h5><a href="#">Boruto: Naruto next generations</a></h5>
                        </div>
                        <div class="product__sidebar__view__item set-bg" data-setbg="{{asset('assets/frontend/img/sidebar/tv-2.jpg')}}">
                            <div class="ep">18 / ?</div>
                            <div class="view"><i class="fa fa-eye"></i> 9141</div>
                            <h5><a href="#">The Seven Deadly Sins: Wrath of the Gods</a></h5>
                        </div>
                        <div class="product__sidebar__view__item set-bg" data-setbg="{{asset('assets/frontend/img/sidebar/tv-3.jpg')}}">
                            <div class="ep">18 / ?</div>
                            <div class="view"><i class="fa fa-eye"></i> 9141</div>
                            <h5><a href="#">Sword art online alicization war of underworld</a></h5>
                        </div>
                        <div class="product__sidebar__view__item set-bg" data-setbg="{{asset('assets/frontend/img/sidebar/tv-4.jpg')}}">
                            <div class="ep">18 / ?</div>
                            <div class="view"><i class="fa fa-eye"></i> 9141</div>
                            <h5><a href="#">Fate/stay night: Heaven's Feel I. presage flower</a></h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<!-- Anime Section End -->
<script>
    $(document).ready(function() {
        $(".view-video").on("click", function() {
            $(".loader").show();
            $("#preloder").show();
            var vId = $(this).attr("data-vid");
            var key = $(this).attr("data-key");
            var seasonNumber = $(this).attr("data-season-no");
            var shoeEpisodeData = "S"+seasonNumber+"_EP_"+key+"_[_Anime4evre_].mp4";
            decrypted(vId).then(function(decryptedValue) {
                vId = decryptedValue;
                var showVideo = "<iframe src='https://drive.google.com/file/d/"+vId+"/preview' allow='autoplay' allowfullscreen='allowfullscreen'></iframe>";
                $(".blog_details_video").html(showVideo);
                $(".episode_data").show();
                $(".episode_data").html(shoeEpisodeData);
                $(".hide-description-text").addClass("d-none");
                setTimeout(function() {
                    $(".loader").hide();
                    $("#preloder").hide();
                    $('html, body').animate({ scrollTop: 320 }, 1000);
                }, 1000); 
            });
        });

        $(".season_no").on("click", function() {
            $(".loader").show();
            $("#preloder").show();
            var id = $(this).attr("data-id");
            decrypted(id).then(function(decryptedValue) {
                    id = decryptedValue;
                    var breadcrumb = "<p class='custom-breadcrumb p-0' onclick='firstStep()''>Season &nbsp;&nbsp;</p> > <p class='custom-breadcrumb p-0'>&nbsp;&nbsp; Season "+id+"</p>";
                    $("#breadcrumbData").html(breadcrumb);
                    $(".episode_no").css("display", "none");
                    $(".seasone_no").css("display", "none");
                    $("#season_id_"+id).css("display", "block");
                    $(".loader").hide();
                    $("#preloder").hide();
            });
        });
    });

    function firstStep(){
        $(".episode_no").css("display", "none");
        var breadcrumb = "<p class='custom-breadcrumb p-0'>Season</p>";
        $("#breadcrumbData").html(breadcrumb);
        $(".seasone_no").css("display", "block");
        $(".hide-description-text").removeClass("d-none");

        var img = "";
        var img_scr = "{{asset('upload/articles/detail_img')}}/"+img; 
        var detail_img = '<img src="'+img_scr+'" alt="">';
        $(".blog_details_video").html(detail_img);
        $(".episode_data").hide();
    }
</script>


<!-- START STORE REVIEW DATA  -->
<script>
    $(document).ready(function() {
        $('#formdata').on('submit', function(e) {
            e.preventDefault();
            storeReviewInfo($(this), "{{ route('custom_login') }}");
        });
    });

    $(document).ready(function() {
        $('#ratingFrm').on('submit', function(e) {
            e.preventDefault();
            storeReviewInfo($(this), "{{ route('custom_login') }}");
        });
    });
</script>
<!-- END STORE REVIEW DATA  -->
@endsection