@extends('front.index')

@section('meta_title'){{$product->MetaTitle}}  @endsection
@section('meta_des'){{$product->meta_des_ar}}   @endsection
@section('meta_key'){{$product->meta_key_en}}   @endsection

@section('content')
    <div class="main-content">
        <main class="bg_gray">

            <div class="container margin_30">
                <div class="page_header">
                    <div class="breadcrumbs">
                        <ul>
                            <li><a href="#">{{trans('front.home')}}</a></li>
                            <li><a href="#">{{@$product->Categories->name}}</a></li>
                            <li>{{$product->item_name}}</li>
                        </ul>
                    </div>
                    <h1>{{$product->item_name}}</h1>
                </div>
                <!-- /page_header-->
                <div class="row justify-content-center">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="owl-carousel owl-theme prod_pics magnific-gallery">
                                        <div class="item">
                                            <a href="{{@$product->ImageWiteBase}}" title="{{$product->item_name}}" data-effect="mfp-zoom-in"><img src="{{@$product->ImageWiteBase}}" alt="{{$product->item_name}}"  height="500px" width="450px"></a>
                                        </div>
                                                                            </div>
                                    <!-- /carousel-->
                                </div>
                                <div class="col-lg-6 ">
                                    <div class="bg_white">
                                        <div class="container margin_60_35">
                                            <div class="row justify-content-between">
                                                <div class="col-lg-12">
                                                    <div class="prod_info version_2" style="overflow: clip;">
                                                        <p>{!! $product->description !!}</p>
                                                    </div>
                                                </div>

                                                <div class="col-lg-12" style="height: 320px;">
                                                    <form class="" action="{{route('front.product.OneaddToCarts',[$product->id])}}" method="get">
                                                        <input type="hidden" name="product_id" value="{{$product->id}}">
                                                        {!! csrf_field() !!}
                                                        <div class="prod_options version_2">
                                                            @if(count($getSpecfics))
                                                            <div class="row">
                                                                <label class="col-xl-7 col-lg-5  col-md-6 col-6"><strong>{{trans('front.unit')}}</strong></label>
                                                                <div class="col-xl-5 col-lg-5 col-md-6 col-6">
                                                                    <div class="">
                                                                        <select name="specific_id" class="form-select getPriceProduct" required>
                                                                            <option value="">{{ __('front.select_Specifications') }}</option>
                                                                            @foreach($getSpecfics as $getSpecfic)
                                                                                <option value="{{$getSpecfic->id}}" @if($product->Specific_id == $getSpecfic->id) selected @endif>{{$getSpecfic->Name1}}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>



                                                            </div>

                                                                <div class="row new_data">




                                                                </div>
                                                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

                                                                <script>
                                                                    $(document).ready(function() {
                                                                        $( ".getPriceProduct"  ).on('change',function() {

                                                                            var ShowQty =  ($(".qty2").val());
                                                                            var getPriceProduct =  ($(".getPriceProduct").val());

                                                                            $.get("{{url('getPriceProduct').'?product_id='.$product->id}}"+'&unit_id='+ getPriceProduct + "&qty=" + ShowQty, function(data){
                                                                                $('.new_data').html(data.html);
                                                                            });

                                                                        });
                                                                    });
                                                                </script>

                                                            @endif

                                                            @if($product->quantity != 0)
                                                            <div class="row">
                                                                <label class="col-xl-7 col-lg-5  col-md-6 col-6"><strong>{{trans('front.qty')}}</strong></label>
                                                                <div class="col-xl-5 col-lg-5 col-md-6 col-6">
                                                                    <div class="numbers-row mo">


                                                                        <input class="qty2" type="text" value="1" id="quantity_1" name="qty">
                                                                        <div class="inc button_inc">+</div>
                                                                        <div class="dec button_inc">-</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @endif
                                                            <div class="row mt-3">
                                                                <div class="col-lg-7 col-md-6">
                                                                    <div class="price_main ">
                                                                        <span class="new_price GetsubCategory">@if(@$product->discount != 0) {{@$product->price_after_discount}} @else {{@$product->price}} @endif {{trans('front.KD')}}</span>
                                                                        @if(@$product->discount != 0)
                                                                            <span class="percentage">-{{@$product->discount}}%</span>
                                                                            <span class="old_price price_after_discount">{{@$product->price}} {{trans('front.KD')}}</span>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12 m-3" style="text-align: center">
                                                                    <div class="rating">
                                                                        @for($i=0;$i < $product_rate; $i++ )
                                                                            <i class="fa fa-star voted"></i>
                                                                        @endfor
                                                                        @for($i=0;$i < (5-$product_rate) ;$i++ )
                                                                            <i class="fa fa-star"></i>
                                                                        @endfor

                                                                    </div>
                                                                </div>
                                                                @if($product->quantity != 0)
                                                                <div class="col-lg-5 col-md-6">
                                                                    <div class="btn_add_to_cart">

                                                                        <button class="btn_1" type="submit">{{trans('front.Add-to-cart')}}</button>
                                                                    </div>
                                                                </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>

                                            </div>
                                            <!-- /row-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>


                </div>

                </div>



                <!-- /row-->
            <!-- /container-->

            <!-- /bg_white-->
            <div class="tabs_product bg_white version_2">
                <div class="container">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item"><a class="nav-link active" id="tab-A" href="#pane-A" data-bs-toggle="tab" role="tab">{{trans('front.ditalis')}}</a></li>
                        <li class="nav-item"><a class="nav-link" id="tab-B" href="#pane-B" data-bs-toggle="tab" role="tab">{{trans('front.reviwe')}}</a></li>
                    </ul>
                </div>
            </div>
            <!-- /tabs_product-->
            <div class="tab_content_wrapper">
                <div class="container">
                    <div class="tab-content" role="tablist">
                        <div class="card tab-pane fade active show" id="pane-A" role="tabpanel" aria-labelledby="tab-A">
                            <div class="card-header" id="heading-A" role="tab">
                                <h5 class="mb-0"><a class="collapsed" data-bs-toggle="collapse" href="#collapse-A" aria-expanded="false" aria-controls="collapse-A">{{trans('front.ditalis')}}</a></h5>
                            </div>
                            <div class="collapse" id="collapse-A" role="tabpanel" aria-labelledby="heading-A">
                                <div class="card-body">
                                    <div class="row justify-content-between">
                                        <div class="col-lg-12">
                                            <h3>{{trans('front.ditalis')}}</h3>
                                            <p>
                                                {!! $product->Info !!}
                                            </p>
                                        </div>
{{--                                        <div class="col-lg-5">--}}
{{--                                            <h3>Specifications</h3>--}}
{{--                                            <div class="table-responsive">--}}
{{--                                                <table class="table table-sm table-striped">--}}
{{--                                                    <tbody>--}}
{{--                                                    <tr>--}}
{{--                                                        <td><strong>Color</strong></td>--}}
{{--                                                        <td>Blue, Purple</td>--}}
{{--                                                    </tr>--}}
{{--                                                    <tr>--}}
{{--                                                        <td><strong>Size</strong></td>--}}
{{--                                                        <td>150x100x100</td>--}}
{{--                                                    </tr>--}}
{{--                                                    <tr>--}}
{{--                                                        <td><strong>Weight</strong></td>--}}
{{--                                                        <td>0.6kg</td>--}}
{{--                                                    </tr>--}}
{{--                                                    <tr>--}}
{{--                                                        <td><strong>Manifacturer</strong></td>--}}
{{--                                                        <td>Manifacturer</td>--}}
{{--                                                    </tr>--}}
{{--                                                    </tbody>--}}
{{--                                                </table>--}}
{{--                                            </div>--}}
{{--                                            <!-- /table-responsive-->--}}
{{--                                        </div>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /TAB A-->
                        <div class="card tab-pane fade" id="pane-B" role="tabpanel" aria-labelledby="tab-B">
                            <div class="card-header" id="heading-B" role="tab">
                                <h5 class="mb-0"><a class="collapsed" data-bs-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">Reviews</a></h5>
                            </div>
                            <div class="collapse" id="collapse-B" role="tabpanel" aria-labelledby="heading-B">

                                <div class="card-body">
                                    <div class="row justify-content-between">
                                        @if($ProductReviews->count()>0)
                                            @foreach($ProductReviews as $reviwe)
                                        <div class="col-lg-5">
                                            <div class="review_content">
                                                <div class="clearfix add_bottom_10">
                                                    <span class="rating">
                                                          @for($i=0;$i < $reviwe->rate ;$i++ )
                                                        <i class="fa fa-star"></i>
                                                        @endfor


                                                    </span>
                                                </div>
                                                <h4>{{$reviwe->name}}</h4>
                                                <p>
                                                    {{$reviwe->review}}
                                                </p>
                                            </div>
                                        </div>
                                            @endforeach
                                        @else

                                        @endif

                                    </div>


                                </div>
                                <main class="bg_gray">
                                    <form class="merform" method="POST" action="{{route('front.product.reviews')}}">
                                        <input type="hidden" name="product_id" value="{{$product->id}}">
                                        {!! csrf_field() !!}
                                    <link rel="preconnect" href="https://fonts.gstatic.com">
                                    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&amp;display=swap" rel="stylesheet">
                                    <link href="https://fonts.googleapis.com/css2?family=Tajawal&amp;display=swap" rel="stylesheet">
                                    <div class="container ">
                                        <div class="row justify-content-center">
                                            <div class="col-lg-8">
                                                <div class="write_review">

                                                    <div class="rating_submit">
                                                        <div class="form-group">

                                                            <span class="rating mb-0">
                        <input class="rating-input" type="radio" id="5_star" name="selected_rating" value="5">
                        <label class="rating-star" for="5_star"></label>
                        <input class="rating-input" type="radio" id="4_star" name="selected_rating" value="4">
                        <label class="rating-star" for="4_star"></label>
                        <input class="rating-input" type="radio" id="3_star" name="selected_rating" value="3">
                        <label class="rating-star" for="3_star"></label>
                        <input class="rating-input" type="radio" id="2_star" name="selected_rating" value="2">
                        <label class="rating-star" for="2_star"></label>
                        <input class="rating-input" type="radio" id="1_star" name="selected_rating" value="1">
                        <label class="rating-star" for="1_star"></label></span>
                                                        </div>
                                                    </div>
                                                    <!-- /rating_submit-->
                                                    <div class="form-group">
                                                        <label>@lang('front.name')</label>
                                                        <input class="form-control" type="text" name="name" required  placeholder="@lang('front.name')">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>@lang('front.email')</label>
                                                        <input class="form-control" type="email" name="email" required placeholder="@lang('front.email')">
                                                    </div>
                                                    <div class="form-group">

                                                        <textarea class="form-control" style="height: 180px;" name="review" required placeholder="@lang('front.message')"></textarea>
                                                    </div>
                                                    @guest

                                                        <button class="btn_1" type="button">{{trans('front.NotUserreviews')}}</button>
                                                    @else
                                                        <button class="btn_1" type="submit">{{trans('front.reviweSend')}}</button>

                                                    @endguest
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </form>
                                </main>
                                <!-- /card-body-->
                            </div>
                        </div>
                        <!-- /tab B-->
                    </div>
                    <!-- /tab-content-->
                </div>
                <!-- /container-->
            </div>
            <!-- /tab_content_wrapper-->
            <div class="bg_white">
                <div class="container margin_60_35">
                    <div class="main_title">
                        <h2>@lang('front.productCate')</h2>

                    </div>
                    <div class="owl-carousel owl-theme products_carousel">
                        @if($products->count()>0)
                            @foreach($products as $productttt)
                        <div class="item">
                            <div class="grid_item">
                                @if($productttt->special)
                                    <span class="ribbon new">{{trans('front.Special')}}</span>
                                @endif

                                <figure><a href="{{$productttt->ForLink}}"><img class="owl-lazy" style="object-fit: fill !important;" src="{{$productttt->ImageWiteBase}}" data-src="{{$productttt->ImageWiteBase}}" alt="{{$productttt->item_name}}"></a></figure>
{{--                                <div class="rating">--}}
{{--                                    @for($i=0;$i < $productttt->stars ;$i++ )--}}
{{--                                        <i class="fa fa-star voted"></i>--}}
{{--                                    @endfor--}}
{{--                                        @for($i=0;$i < (5-$productttt->stars) ;$i++ )--}}
{{--                                            <i class="fa fa-star"></i>--}}
{{--                                        @endfor--}}

{{--                                </div>--}}
                                    <a href="{{$productttt->ForLink}}">
                                    <h3>{{$productttt->item_name}}</h3>
                                    </a>
                                    <div class="price_box"><span class="new_price">@if($productttt->discount != 0) {{$productttt->price_after_discount}} @else {{$productttt->price}} @endif {{trans('front.KD')}}</span>
                                        @if($productttt->discount != 0)
                                            <span class="old_price">{{$productttt->price}} {{trans('front.KD')}}</span>
                                        @else
                                            <span class="old_price"></span>
                                        @endif

                                    </div>

                                    <ul>
                                    <li><a class="tooltip-1" href="{{route('front.favorites.store',[$productttt->id])}}" data-bs-toggle="tooltip" data-bs-placement="left" title="{{trans('front.Add-to-fave')}}"><i class="ti-heart"></i><span>{{trans('front.Add-to-fave')}}</span></a></li>
                                    <li><a class="tooltip-1" href="{{$productttt->ForLink}}" data-bs-toggle="tooltip" data-bs-placement="left" title="{{trans('front.Add-to-cart')}}"><i class="ti-shopping-cart"></i><span>{{trans('front.Add-to-cart')}}</span></a></li>
                                </ul>
                            </div>
                            <!-- /grid_item-->
                        </div>
                            @endforeach
                        @else
                        @endif
                    </div>
                    <!-- /products_carousel-->
                </div>
                <!-- /container-->
            </div>
            <!-- /bg_white-->
        </main>
        <!-- /main-->
    </div>

@endsection