@include('web.controllers.header')
<div class="container">
    <div class="row">
        <div class="col-md-5">
            <!-- slider -->
            <!-- to be displayed correctly both section must have same image src
            the loop will be done twice
            -->
            <div class="slider-for">
                <!-- Here -->
                @foreach($product->images as $image)
                    <section>
                        <img class="img-responsive h-50" src="{{asset('images/products/'.$image->image)}}" alt="">
                    </section>
                @endforeach

            </div>
            <div class="slider-nav">
                <!-- and Here -->
                @foreach($product->images as $image)

                    <div class="item ">
                        <img class="img-responsive" src="{{asset('images/products/'.$image->image)}}" alt="">
                    </div>

                @endforeach
            </div>

        </div>
        <div class="col-md-7">
            <section class="product-card">
                <div class="row">
                    <div class="col-sm-12 padding-adjust">
                        <h4><strong>{{$product->title}}</strong></h4>
                        <p><span class="px-10 size-10 color-gray">{{$product->category->name[\App::getLocale()]}}</span>
                            - <span
                                class="px-10 size-10 color-gray">{{$product->country->name[\App::getLocale()]}}</span>
                            <span class="rate">{{getProductRate($product->id)}} <i class="icon-star"></i></span></p>
                        <p class="mt-20">{{$product->description}}</p>
                    </div>
                    <a href="{{route('owner_profile',$product->user->username)}}">
                        <div class="col-sm-12 padding-adjust">
                            <h5 class="mt-20"><strong>@lang('site.Product Owner')</strong></h5>
                            <ul>

                                <li><strong>@lang('site.Name:') </strong><span>{{$product->user->username}}</span></li>
                            </ul>
                        </div>
                    </a>

                    <div class="col-sm-12 padding-adjust">
                        <h5 class="mt-20"><strong>@lang('site.Product Details')</strong></h5>
                        <ul>
                            <li><p><strong>@lang('site.Year'): </strong><span>{{$product->year}}</span></p></li>
                            <li><strong>@lang('site.Shape'): </strong><span>{{$product->shape}}</span></li>
                            <li><strong>@lang('site.Size'): </strong><span>{{$product->size}}</span></li>
                            <li><strong>@lang('site.Type'): </strong><span>{{$product->type}}</span></li>
                        </ul>
                    </div>
                    <!-- <div class="col-sm-3 text-center">
                        <img class="product-card__img" src="images/watch.png" width="50%" alt="">
                    </div> -->
                    <div class="btn-group mt-30" role="group" aria-label="...">
                        @if($product->contact_type == 'chat' || $product->contact_type == 'both')

                            <button type="button" class="btn btn-default text-center"><a href="messages.php"><i
                                        class="icon-message_square"></i><span class="px-10">@lang('site.Send Message')</span></a>
                            </button>
                        @endif
                    <!-- can take class "is-favorite" -->
                        @if(\Auth::check())
                            <button type="button" onclick="favourite({{$product->id}})"
                                    class="btn btn-default text-center change-color"> @if(\App\Models\Favourite::where(['product_id'=>$product->id,'user_id'=>\Auth::user()->id])->first())
                                    <i class="fa fa-heart  is-favorite farouz"></i>

                                @else
                                    <i class="fa fa-heart  farouz "></i>
                                @endif
                                <span class="px-10">@lang('site.Favorite')</span></button>
                        @endif

                        @if($product->contact_type == 'phone' || $product->contact_type == 'both')
                            <a href="https://api.whatsapp.com/send?phone={{$product->user->mobile}}"
                               target="_blank">
                                <button type="button" class="btn btn-default text-center"><i
                                        class="icon-whatsapp"></i><span
                                        class="px-10">@lang('site.Send Whatsapp')</span></button>
                            </a>

                        @endif

                        @if(\Auth::check())
                            <button type="button" onclick="report({{$product->id}})"
                                    class="btn btn-default text-center"><i class="icon-flag"></i><span
                                    class="px-10">@lang('site.Report')</span></button>
                        @endif
                        @if(\Auth::check() && $product->user_id == \Auth::user()->id)
                            <button type="button" class="btn btn-default text-center" data-toggle="modal"
                                    data-target="#delete"><i class="fa fa-trash"></i><span class="px-10">@lang('site.Delete')</span>
                            </button>
                        @endif
                        @if(\Auth::check())
                            <button type="button" class="btn btn-default text-center" data-toggle="modal"
                                    data-target="#rate_product"><i class="fa fa-star"></i><span
                                    class="px-10">@lang('site.Rate')</span>
                            </button>
                        @endif

                    </div>
                    <div id="delete" class="modal fade text-center" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content">
                                <!-- body -->
                                <div class="modal-body">
                                    <section class="global-head global-head__no-border">
                                        <article>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            <h4><strong>@lang('site.Delete Your Advertisement')</strong></h4>
                                            <p>@lang('site.Make sure of your decision')</p>
                                        </article>
                                    </section>
                                    <div class="modal-buttons">
                                        <button type="button" class="btn btn-default cancel" data-dismiss="modal">
                                            @lang('site.Cancel')
                                        </button>
                                        <a href="{{route('delete_product',$product->id)}}">
                                            <button class="btn btn-primary mt-20" width="100%" type="button"><small>@lang('site.Delete') </small>
                                            </button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="rate_product" class="modal fade text-center top" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content pt-0">
                                <!-- body -->
                                <div class="modal-body">
                                    <div class="sideprofile">
                                        <section class="global-head global-head__rate mt-0">
                                            <article class="text-center">

                                                <h4><strong>{{$product->title}}</strong></h4>
                                            </article>
                                        </section>
                                    </div>
                                    <form action="{{route('rate_product',$product->id)}}" method="post" >
                                        {{csrf_field()}}
                                        <div class="star-rating">
                                            <span class="fa fa-star-o" data-rating="1"></span>
                                            <span class="fa fa-star-o" data-rating="2"></span>
                                            <span class="fa fa-star-o" data-rating="3"></span>
                                            <span class="fa fa-star-o" data-rating="4"></span>
                                            <span class="fa fa-star-o" data-rating="5"></span>

                                            <input type="hidden" name="rate" class="rating-value" value="2.56">
                                        </div>
                                        <div class="form-group mt-20">
                                            <textarea name="comment" id="" cols="10" rows="5" placeholder="Type Your Notes"></textarea>
                                        </div>
                                        <div class="modal-buttons">
                                            <button type="button" class="btn btn-default cancel" data-dismiss="modal">@lang('site.Cancel')</button>
                                            <button class="btn btn-primary" width="100%" type="submit"><small>@lang('site.Save')</small></button>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </section>
        </div>
    </div>
</div>

<section class="comment-area">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <form action="{{route('post_comment',$product->id)}}" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <label for="">@lang('site.Comment')</label>
                    <textarea name="comment" required width="100%" id="" cols="15" rows="5"
                              placeholder="Type Comment for the owner"></textarea>
                    <button class="btn btn-link mt-20" type="submit"><small>@lang('site.Add Comment')</small></button>
                </form>
            </div>
            <div class="col-xs-12">
                @foreach($product->comments as $comment)
                <article class="mt-20 comment">
                    <a href="">{{$comment->user->username}} </a>
                    <span>{{\Carbon\Carbon::parse($comment->created_at)->diffForHumans()}}</span>
                    <p>{{$comment->comment}}</p>
                </article>
               <hr>
                @endforeach

            </div>
        </div>
    </div>
</section>

@include('web.controllers.footer')