@extends('frontend.layouts.partials.default')
@section('title','Frequently Asked Questions')
@section('main')
    <div class="section">
        <div class="container">
            <div class="row py-5">
                <div class="col-12 col-md-5 p-2">
                    <video class="video"  width="100%" max-height="320px" controls autoplay loop muted>
                            <source src="uploads/videos/{{$video->video_secret}}/watermarked.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                    </video> 
                    <ul class="list-inline mt-2 text-center image-main-options">

                        <li class="list-inline-item"><a href="searchfilter?series={{$video->Series}}" class="text-decoration-none text-dark" title="Same Series"><i class="text-warning fa fa-th-large"></i> Similar Images </a></li>

                        <li class="list-inline-item pl-3 share"><a href="" class="text-decoration-none text-dark"><i class="text-warning fa fa-share-alt"></i> Share </a>
                                <ul class="share-dropdown px-3">
                                    <li><a href="https://www.facebook.com/sharer.php?u={{url()->full()}}"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="http://twitter.com/share?text=look at this Image&url={{url()->full()}} "><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="mailto:email@example.com?subject=look at this Image&body=Hi,I found this Image and thought you might like it {{url()->full()}}"><i class="fa fa-envelope"></i></a></li>
                                </ul>
                        </li>
                        @if($wishlist_check)
                        <li class="list-inline-item pl-3"><i class="text-warning far fa-heart"></i> Added to Lightbox</li>
                        @else
                        <li class="list-inline-item pl-3"><a href="user/wishlist/addvideo/{{$video->video_secret}}" class="text-decoration-none text-dark"><i class="text-warning far fa-heart"></i> Add to Lightbox </a></li>
                        @endif

                        <!-- <li class="list-inline-item pl-3"><a href="uploads/watermark/{{$video->image_link}}" target="_blank" class="text-decoration-none text-dark"><i class="text-warning fa fa-eye"></i> Preview </a></li> -->
                    </ul>

                </div>
                <div class="col-12 col-md-7 px-4 ">
                    <span >{{$video->videos_title}}</span><br>
                    <span > Video ID : </span><span>{{$video->video_secret}}</span>
                    <!-- <br>
                    <span > <i class="fa fa-copyright text-warning"></i> Copyright : </span><span>{{$video->copyright}}</span> -->
                    <br>
                    <span > License type : </span><span>{{config('variables.License')[$video->license_type]}}</span>
                    <br>
                    <span > Keywords : </span><p class="keywords">{{Str::substr(implode(", ",explode(" ", $video->keyword)), 0 , 70)}}
                    <span id="dots">...</span>
                    <span id="more">{{Str::substr(implode(", ",explode(" ", $video->keyword)), 70 )}} ...
                    </span> <a href="#" onclick="myFunction()" id="myBtn" >see all</a>
                    {{-- Bootstrap Pills --}}

                    @if ($video->license_type == 1)
                        
                    <ul class="nav nav-pills my-3 " id="pills-tab" role="tablist">

                        <li class="nav-item bg-dark " role="presentation">
                            <a class="nav-link text-white active" id="pills-subscription-tab" data-toggle="pill" href="#pills-subscription" role="tab" aria-controls="pills-subscription" aria-selected="false">This Image is Oooluoolu</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        
                        <div class="tab-pane fade active" id="pills-subscription" role="tabpanel" aria-labelledby="pills-subscription-tab">
                            <div class="row ml-1 image-prices">
                            <table width="550px" class="image-prices">
                            @foreach($pricing as $key=>$price)
                                <tr>
                                    <td width="5px"></td>
                                    <td width="10px">
                                        <input type="radio"
                                        @if($key == 0)
                                                checked
                                                @endif
                                         class="form-check-input" name="radio" id="radio" />
                                    </td>
                                    <td width="30px">
                                        <p>{{$price->name}}</p>
                                    </td>
                                    <td width="60px">
                                        <p>{{$price->width}} <span class="font-weight-bold">X</span> {{$price->height}}</p>
                                    </td>
                                    <td width="100px">
                                        <p>08 <span class="font-weight-bold">X</span> 06 inch ({{$price->dpi}} dpi)</p>
                                    </td>
                                </tr>

                                @endforeach
                                <div class="row">
                                    <div class="col-4 col-md-3">
                                        <input type="submit" class="btn  bg-warning border-0 btn-warning" value="Get Quote">
                                    </div>
                                </div>
                            </form>
                    </div>
                    </div>

                    @else
                        
                    <ul class="nav nav-pills mt-3 mb-2" id="pills-tab" role="tablist">
                        <li class="nav-item bg-dark mr-2" role="presentation">
                            <a class="nav-link active text-white" id="pills-price-tab" data-toggle="pill" href="#pills-price" role="tab" aria-controls="pills-price" aria-selected="true"> <i class="fa fa-dollar-sign"></i> Download by price</a>
                        </li>
                        <li class="nav-item bg-dark " role="presentation">
                            <a class="nav-link text-white" id="pills-subscription-tab" data-toggle="pill" href="#pills-subscription" role="tab" aria-controls="pills-subscription" aria-selected="false">Subscription</a>
                        </li>
                    </ul>

                    <div class="tab-content" id="pills-tabContent">

                        {{-- Download by price --}}

                        <div class="tab-pane fade show active" id="pills-price" role="tabpanel" aria-labelledby="pills-price-tab">

                                <form action="{{route('user.cart.addvideo')}}" method="post">
                                @csrf
                                <div class="row ml-1 image-prices">
                                    <table width="550px" class="image-prices">
                                    @foreach($pricing as $key=>$price)
                                    <input type="hidden" name="video_secret" value="{{$video->video_secret}}">
                                    <!-- <input type="hidden" name="size" value="{{$price->name}}"> -->

                                    <tr>
                                        <td width="5px"></td>
                                        <td width="10px">
                                            <input type="radio"
                                            @if($key == 0)
                                                checked
                                                @endif
                                             class="form-check-input" name="size" id="radio"  value="{{$price->name}}"/>
                                        </td>
                                        <td width="30px">
                                            <p>{{$price->name}}</p>
                                        </td>
                                        <td width="60px">
                                            <p>{{$price->width}} <span class="font-weight-bold">X</span> {{$price->height}}</p>
                                        </td>
                                        <td width="100px">
                                                <p>08 <span class="font-weight-bold">X</span> 06 inch ({{$price->dpi}} dpi)</p>
                                            </td>
                                            @if($video->license_type == 0)
                                            <td width="100px">
                                                <p >{{Priceformat($price->royality_price)}}</p>
                                            </td>
                                            @elseif($video->license_type == 2)
                                            <td width="100px">
                                                    <p >{{Priceformat($price->premium_price)}} $</p>
                                            </td>
                                            @endif
                                        </tr>
                                    
                                    @endforeach
                                    </table>
                                </div>
                                    <div class="row">
                                        <div class="col-4 col-md-3">
                                            <input type="submit" class="btn  bg-warning border-0 btn-warning" value="Download">
                                        </div>
                                    </div>
                                </form>
                        </div>

                        {{-- Subscription --}}

                        <div class="tab-pane fade" id="pills-subscription" role="tabpanel" aria-labelledby="pills-subscription-tab">
                                <form action="#" >
                                <div class="row ml-1 image-prices">
                                <table width="550px" class="image-prices">
                                @foreach($pricing as $key=>$price)

                                <tr>
                                    <td width="5px"></td>
                                    <td width="6px">
                                                    <input type="radio"
                                                    @if(isset($plan_detail->plan_type))
                                                    @if($plan_detail->plan_type == $price->id)
                                                    checked
                                                    @endif
                                                    @endif
                                                     class="form-check-input" name="radio" id="radio" />
                                     </td>
                                        <td width="30px">
                                                    <p >{{$price->name}}</p>
                                        </td>
                                        <td width="60px">
                                                    <p>{{$price->width}} <span class="font-weight-bold">X</span> {{$price->height}}</p>
                                        </td>
                                        <td width="100px">
                                                <p>08 <span class="font-weight-bold">X</span> 06 inch ({{$price->dpi}} dpi)</p>
                                            </td>
                                    </tr>
                                    @endforeach
                                </table>
                            </div>
                                    <div class="row">
                                        <div class="col-4 col-md-3">
                                            <input type="submit" class="btn bg-warning border-0 btn-warning" value="Get Quote">
                                        </div>
                                    </div>
                                </form>
                        </div>

                    </div>

                    @endif
                </div>
            </div>
        </div>
        <div class="container">

            {{-- Same Series --}}

            <div class="row pb-5 carousels">
                <div class="col-12">
                    <div class="row">
                        <div class="col-6"><h3>Same Series</h3></div>
                        <div class="col-6 text-right"><a href="searchfilter?series={{$video->Series}}" class="text-warning">view all <i class="fa fa-caret-right"></i></a></div>
                    </div>

                    <hr class="py-1">
                    <ul class="list-inline">
                        @if(count($seriesvideos)==0)
                            <h3>No Records</h3>
                        @else
                            @foreach($seriesvideos as $seriesvideo)
                            <a href="videodetails?video={{$seriesvideo->video_secret}}">
                                <li class="list-inline-item py-2">
                                    <video class="video"  height="200px">
                                        <source src="uploads/videos/{{$seriesvideo->video_secret}}/watermarked.mp4" type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video> 
                                </li>
                            </a>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>

            {{-- Similar Images --}}

            <div class="row pb-5 carousels">
                <div class="col-12">
                    <div class="row">
                        <div class="col-6"><h3>Similar Videos</h3></div>
                        <div class="col-6 text-right"><a href="searchfilter?category={{$video->category}}" class="text-warning">view all <i class="fa fa-caret-right"></i></a></div>
                    </div>

                    <hr class="py-1">
                    <ul class="list-inline">
                        @if(count($similarvideos)==0)
                            <h3>No Records</h3>
                        @else
                            @foreach($similarvideos as $similarvideo)
                            <a href="videodetails?video={{$similarvideo->video_secret}}">
                                <li class="list-inline-item py-2">
                                    <video class="video"  height="200px">
                                        <source src="uploads/videos/{{$similarvideo->video_secret}}/watermarked.mp4" type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video> 
                                </li>
                            </a>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
    function myFunction() {
    var dots = document.getElementById("dots");
    var moreText = document.getElementById("more");
    var btnText = document.getElementById("myBtn");

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "see all";
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.innerHTML = "hide";
        moreText.style.display = "inline";
    }
    }
    </script>
@endsection