@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <section class="page_header">
        <div class="container">
            <div class="content">
                <ul class="links">
                    <li class="li_link">
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a>
                    </li>
                    <li class="li_link">
                        <span>المنتجات</span>
                    </li>
                </ul>
            </div>
            <div class="section_head text-center">
                <h2> تفاصيل المنتج </h2>
            </div>
        </div>
        <img src="{{asset('assets/web/images/heading-pattern-l.png')}}" class="pattern-l">
        <img src="{{asset('assets/web/images/heading-pattern-r.png')}}" class="pattern-r">

    </section>
    <!-- -------------- products --------------- -->
    <section class="single-product section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="product_det">
                        <h3>{{$product->name}}</h3>
                        <h6>{{$product->category_name}}</h6>
                        <div class="prc">
                            <div class="str">
                                <div class="stars">
                                    <i class="{{abs(round($product->evaluate_average)) >= 1 ? 'fas' : 'far'}} fa-star"></i>
                                    <i class="{{abs(round($product->evaluate_average)) >= 2 ? 'fas' : 'far'}} fa-star"></i>
                                    <i class="{{abs(round($product->evaluate_average)) >= 3 ? 'fas' : 'far'}} fa-star"></i>
                                    <i class="{{abs(round($product->evaluate_average)) >= 4 ? 'fas' : 'far'}} fa-star"></i>
                                    <i class="{{abs(round($product->evaluate_average)) >= 5 ? 'fas' : 'far'}} fa-star"></i>
                                </div>
                                <small>
                                    ( {{$product->evaluate_count}} تقييم )
                                </small>
                            </div>
                        </div>
                        <p class="text">{!! $product->description !!}</p>
                        <h3 class="price dir-l"> {{$product->price}} <small> SAR </small></h3>
                        {{--                        @if($product->discount)--}}
                        {{--                            <h3 class="price dir-l"> {{$product->discount}} <small> SAR </small></h3>--}}
                        {{--                        @endif--}}

                        <div class="btns mt-4">
                            <button class="btn add_to_favorite"><i class="fas fa-heart"></i></button>
                            <button class="btn add_to_cart  {{ $product->amount <= 0 ? 'disabled' : '' }}" {{ $product->amount <= 0 ? 'disabled' : '' }}><i class="fas fa-shopping-cart"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <img src="{{$product->image ? asset($product->image) : asset('assets/web/images/single-product.png')}}" alt="" class="single-product-img">
                    <div class="review-wrapper">
                        <h3 class="mb-4">تقييمات المستخدمين</h3>
                        @if(count($comments))
                            @foreach($comments as $comment)
                                <div class="item">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <img src="{{$comment->photo ? asset($comment->photo) : asset('assets/web/images/user.png')}}" alt="" class="user-img">
                                        </div>
                                        <div class="col-md-9">
                                            <div class="review-heading mb-4">
                                                <h5 class="mb-0">{{$comment->user_name}}</h5>
                                                <div class="prc">
                                                    <div class="str">
                                                        <div class="stars">
                                                            <i class="{{abs(round($product->evaluate_average)) >= 1 ? 'fas' : 'far'}} fa-star"></i>
                                                            <i class="{{abs(round($product->evaluate_average)) >= 2 ? 'fas' : 'far'}} fa-star"></i>
                                                            <i class="{{abs(round($product->evaluate_average)) >= 3 ? 'fas' : 'far'}} fa-star"></i>
                                                            <i class="{{abs(round($product->evaluate_average)) >= 4 ? 'fas' : 'far'}} fa-star"></i>
                                                            <i class="{{abs(round($product->evaluate_average)) >= 5 ? 'fas' : 'far'}} fa-star"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                                <h6 class="mb-0">{{date('H:i A', strtotime($comment->created_at))}}</h6>
                                            </div>
                                            <div class="text-content">
                                                {{--                                                <h5>جودة رائعة للمنتج</h5>--}}
                                                <p>{{$comment->comment}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                        <button class="btn" data-toggle="modal" data-target="#reviewModal">أضف تعليق</button>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!--Review Modal -->
    <div class="modal fade" id="reviewModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content ">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body">
                    <div class="review-modal-content">
                        <form class="comment_form">
                            <h5> تقييمك عن المنتج</h5>
                            <div class="stars-content">
                                <div class="star-rating">
                                    <input type="radio" id="5-stars" name="evaluate" value="5" />
                                    <label for="5-stars" class="star">&#9733;</label>
                                    <input type="radio" id="4-stars" name="evaluate" value="4" />
                                    <label for="4-stars" class="star">&#9733;</label>
                                    <input type="radio" id="3-stars" name="evaluate" value="3" />
                                    <label for="3-stars" class="star">&#9733;</label>
                                    <input type="radio" id="2-stars" name="evaluate" value="2" />
                                    <label for="2-stars" class="star">&#9733;</label>
                                    <input type="radio" id="1-star" name="evaluate" value="1" />
                                    <label for="1-star" class="star">&#9733;</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <textarea name="comment" class="form-control" rows="11" placeholder="اكتب هنا... "></textarea>
                            </div>
                            <button class="butn color review-btn comment_button">
                                <i class="fas fa-paper-plane"></i>  إرسال  </span>
                            </button>
                        </form>
                    </div>

                </div>

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

@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script>
        let productEvaluateRoute = "{{route('eyeStore.productEvaluate')}}",
            addToFavoriteRoute = "{{route('eyeStore.addToFavorite', $product->id)}}",
            addToCartRoute = "{{route('eyeStore.addToCart', $product->id)}}",
            product_id = "{{$product->id}}";
    </script>
    <script src="{{ asset('assets/web/js/eye_stores.show.js') }}"></script>
@endsection