@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-6 p-2">
                    <div class="imageBx fl">
                    <img src="uploads/watermark/{{$image->image_link}}" alt="" width="100%">
                        </div>

                    <ul class="list-inline mt-2 image-main-options  product_pageimg_options">

                        <li class="list-inline-item"><a href="searchfilter?series={{$image->Series}}" class="text-decoration-none text-dark" target="_blank"><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()}}" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="http://twitter.com/share?text=look at this Image&url={{url()->full()}} " target="_blank"><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()}}" target="_blank"><i class="fa fa-envelope"></i></a></li>
                                </ul>
                        </li>
                        @if (session('is_login'))

                        @if($wishlist_check)
                        <li class="list-inline-item pl-3"><i class="text-warning fa fa-heart"></i> Added to Lightbox</li>
                        @else
                        <li class="list-inline-item pl-3"><a href="user/wishlist/addimage/{{$image->image_secret}}" class="text-decoration-none text-dark"><i class="fa fa-heart"></i> Lightbox </a></li>
                        @endif
                        @else
                        <li class="list-inline-item pl-3"><i class="fa fa-heart"></i><a href="" data-toggle="modal" data-target="#exampleModal"  class="image-popup-fit-width text-decoration-none" >  Lightbox</a></li>
                        @endif
                        <li class="list-inline-item pl-3">
                            <a href="uploads/watermark/{{$image->image_link}}" target="_blank" class="text-decoration-none text-dark image-popup-fit-width"><i class="text-warning fa fa-eye"></i> Preview </a>
                        </li>
                    </ul>

                </div>
                <div class="col-12 col-md-6 px-2 ">
                <span > Title : </span><span class="">{{$image->image_title}}</span>
                    <br>
                    <span > Image ID : </span><span>{{$image->image_name_id}}</span>
                    <br>
                    <span > <i class="fa fa-copyright "></i> Copyright : </span><span>{{$image->copyright}}</span>
                    <br>
                    <span > License type : </span><span>{{config('variables.License')[$image->license_type]}}</span>
                    <br>
                    <span > Keywords : </span><span class="keywords">{{Str::substr($image->keyword, 0 , 70)}}
                    <span id="dots">...</span>
                    <span id="more">{{Str::substr($image->keyword, 70 )}}
                    </span> <a href="#" onclick="myFunction()" id="myBtn" >see all</a>

                </span>

                    {{-- Bootstrap Pills --}}

                    @if ($image->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 rounded" id="pills-price-tab" data-toggle="pill" href="#pills-price" role="tab" aria-controls="pills-price" aria-selected="true"> </i> This Image Is Rights Managed</a>
                        </li>

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

                        <div class="tab-pane fade show active " id="pills-price" role="tabpanel" aria-labelledby="pills-price-tab">
                            <div class="row ml-1 image-prices">
                                <table width="550px" class="image-prices">
                                @foreach($pricing as $key=>$price)
                                
                                    <input type="hidden" name="image_secret" value="{{$image->image_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 size-select" name="size"  id="radio-{{$price->id}}"  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($image->license_type == 0)
                                        <td width="100px">
                                                <p>$ {{$price->royality_price}} </p>
                                        </td>
                                        @elseif($image->license_type == 2)
                                        <td width="100px">
                                                <p> $ {{$price->premium_price}} </p>
                                        </td>
                                        @endif
                                    </tr>
                                
                                @endforeach
                                </table>
                                </div>
                                    <div class="row getaquote">
                                        <div class="col-4 col-md-3">
                                            <input type="submit" class="btn bg-warning border-0 btn-warning" role="button" data-toggle="modal" data-target="#get-quote" value="Get Quote">
                                        </div>
                                    </div>
                    </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>
                        @if($image['license_type'] == 0)
                        <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 <i class="fas fa-download"></i></a>
                        </li>
                        @endif
                    </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">

                            @if (session('is_login'))
                            <form action="{{route('user.cart.addimage')}}" method="post">
                            @endif

                                @csrf
                                <div class="row ml-1 image-prices">
                                    <table width="550px" class="image-prices">
                                    @foreach($pricing as $key=>$price)

                                        <input type="hidden" name="image_secret" value="{{$image->image_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($image->license_type == 0)
                                                <td width="100px">
                                                    <p>  {{Priceformat($price->royality_price)}}</p>
                                                </td>
                                                @elseif($image->license_type == 2)
                                                <td width="100px">
                                                    <p>{{Priceformat($price->premium_price)}} </p>
                                                </td>
                                                @endif
                                            </tr>

                                            {{-- <div class="col-1 col-md-1">
                                                    <input type="radio" class="form-check-input" name="size" id="radio"  value="{{$price->name}}"/>
                                            </div>
                                            <div class="col-2 col-md-2">
                                                    <p class="">{{$price->name}}</p>
                                            </div>

                                            <div class="col-3 col-md-3">
                                                    <p>{{$price->width}} <span class="font-weight-bold">X</span> {{$price->height}}</p>
                                            </div>
                                            <div class="col-4 col-md-4">
                                                <p>08 <span class="font-weight-bold">X</span> 06 inch ({{$price->dpi}} dpi)</p>
                                            </div>
                                            @if($image->license_type == 0)
                                            <div class="col-2 col-md-2">
                                                    <p class=""> ${{$price->royality_price}}.00</p>
                                            </div>
                                            @elseif($image->license_type == 2)
                                            <div class="col-2 col-md-2">
                                                    <p class="">${{$price->premium_price}}.00 </p>
                                            </div>
                                            @endif --}}

                                    @endforeach
                                </table>
                                </div>
                                    <div class="row">
                                        <div class="col-md-4 col-sm-12">
                                            @if (session('is_login'))
                                           <!-- <input type="submit" class="btn bg-warning border-0 btn-warning" value="Download">-->
											<button type="submit" class="btn bg-warning border-0 btn-warning">
												 Download  &nbsp;<i class="fas fa-download"></i>
											</button>

                                            @else
                                            <a data-toggle="modal" data-target="#exampleModal"  class="btn btn-warning">Download &nbsp;<i class="fas fa-download"></i></a>
                                            @endif


                                        </div>
                                    </div>
                                    @if (session('is_login'))
                                </form>
                                    @endif
                        </div>

                        {{-- Subscription --}}
                        @if($image['license_type'] == 0)

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

                                @if (session('is_login'))

                                <form method="POST" action="{{route('user.subcription.download',$image->image_id)}}" >
                                    @csrf
                                @endif
                                <div class="row ml-1 image-prices">
                                <table width="550px" class="image-prices">
                                @foreach($pricing as $price)
                                <tr>
                                        <td width="5px"></td>
                                        <td width="6px">
                                                <input value="{{$price->name}}"
                                                @if(isset($plan_detail->plan_type))
                                                    @if($plan_detail->plan_type == $price->id)
                                                    checked
                                                    @endif
                                                @endif
                                                 type="radio" 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">
                                            @if (session('is_login'))

                                            <!-- <input type="submit" class="form-control bg-warning border-0" value="Download"> -->
                                            @if(isset($plan_detail->plan_type))
                                            <a href="" class="download_item" item_id="{{$image->image_id}}" token="{{Session::get('user_id')}}" item_type="1" item_secret="{{$image->image_secret}}"><span class="btn btn-warning px-2 text-decoration-none">Download &nbsp;<i class="fas fa-download"></i> </span></a>
                                            @endif
                                        </div>
                                    </div>
                                </form>
                                            @else
                                            <a href="" data-toggle="modal" data-target="#exampleModal"  class="btn btn-warning text-decoration-none">Download &nbsp;<i class="fas fa-download"></i></a>
                                        </div>
                                    </div>


                                            @endif
                        </div>
                        @endif
                    </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-8"><h3>Same Series</h3></div>
                            <div class="col-4 text-right"><a href="searchfilter?series={{$image->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($seriesimages)==0)
                            <h3>No Records</h3>
                        @else
                        <div class="owl-carousel owl-theme">
                            @foreach($seriesimages as $seriesimage)
                            <div class="item">

                            <a href="imagedetails?image={{$seriesimage->image_secret}}">
                                <li class="list-inline-item py-2 item-container">
                                    <img src="uploads/thumbnail/{{$seriesimage->image_link}}" height="auto" alt="">
                                </li>
                            </a>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </ul>
                    <hr class="py-1">
            </div></div>

            {{-- Similar Images --}}

            <div class="row pb-5 carousels">
                <div class="col-12">
                    <div class="row">
                        <div class="col-8"><h3>Similar Images</h3></div>
                        <div class="col-4 text-right"><a href="searchfilter?category={{$image->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($similarimages)==0)
                            <h3>No Records</h3>
                        @else
                        <div class="owl-carousel owl-theme">

                            @foreach($similarimages as $similarimage)
                            <div class="item">

                            <a href="imagedetails?image={{$similarimage->image_secret}}">
                                <li class="list-inline-item py-2 item-container">
                                    <img src="uploads/thumbnail/{{$similarimage->image_link}}" height="auto" alt="">
                                </li>
                            </a>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </ul>
                    <hr class="py-1">
                </div>
            </div>
        </div>


    {{-- Get quote modal --}}

    <div class="modal fade" id="get-quote" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        <div class="modal-body  text-center">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h3 class="modal-title" id="exampleModalLabel">Get a quote</h3>
            <form method="POST" action="{{route('quote.submit',$image->image_id)}}"  >
                <hr>
            <div class="row mt-3 get-quote">

                        @csrf
                        <div class="col-3">
                                <label for="">Name:* </label>
                        </div>
                        <div class="col-8">
                                <input type="text"  required name="name" placeholder="Jone Smith"  class="form-control">
                        </div>
                        <div class="col-3">
                                <label for="exampleInputEmail1">Email:* </label>
                        </div>
                        <div class="col-8">
                                <input type="email" required name="email" class="form-control"   placeholder="Enter email">
                        </div>
                        <div class="col-3">
                                <label for="exampleInputEmail1">Country:* </label>
                        </div>
                        <div class="col-8">
                                <input type="text" required name ="country" class="form-control"   placeholder="UAE ..">
                        </div>
                        <div class="col-3">
                                <label for="exampleInputEmail1">Validity:* </label>
                        </div>
                        <div class="col-8">
                                <input type="text" required class="form-control" name="valid_for"   placeholder="1 Month">
                        </div>
                        <div class="col-3">
                                <label for="exampleInputEmail1">Size:*</label>
                        </div>
                        <div class="col-8">
                                <input type="text" required class="form-control" value="" name="size" id="quote-size"  placeholder="A4,A5,A3">
                        </div>
                        <div class="col-3">
                                <label for="exampleInputPassword1">Usage:*</label>
                        </div>
                        <div class="col-8">
                                <input type="text"required class="form-control" name="usage"  placeholder="Newspaper,Art,Educational">
                        </div>
                        <div class="col-12 text-center">
                                <button type="submit" class="btn btn-warning" >Submit</button>
                        </div>
            </div>
            </form>
        </div>
        </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