@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')
{{--@php--}}
{{--    $useragent=$_SERVER['HTTP_USER_AGENT'];--}}
{{--           if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))--}}

{{--           {--}}
{{--                 //echo "mobile";--}}
{{--            $temp = 'https://wa.me/+2'.$product->whatsapp.'/?text='.$product->name;--}}
{{--           }--}}
{{--           else{--}}
{{--            // echo "desktop";--}}
{{--            $temp = 'https://api.whatsapp.com/send?phone=+2'.$product->whatsapp.'&text='.$product->name;--}}
{{--           }--}}
{{--@endphp--}}
<section class="map-back">
    <div class="container">
        <h1 class="title">{{$product->name}}</h1>
        <ul class="maplink">
            <li> <a href="{{route('front.home')}}">@lang('front.home')</a></li>
            <li> <a href="{{route('front.getProducts')}}">@lang('front.products')</a></li>
            <li>{{$product->name}}</li>
        </ul>
    </div>
</section><!-- End Section panner Top -->
<section class="products-inner">
    <div class="container">
        {{--            <div class="alert alert-success"><i class="fa fa-check"></i> تمت إضافة المنتج إلى سلة التسوق بنجاح</div>--}}
        <div class="row">
            <div class="col-sm-6 menus-it">
                <div class="slider-prod">
                    <div class="sample1">
                        <div class="carousel">
                            <ul>


                                <li> <a class="elem" href="{{@$product->ImageWiteBase}}" title="{{$product->name}}" data-lcl-txt="" data-lcl-author="" data-lcl-thumb="{{$product->ImageWiteBase}}"><span style="background-image: url({{$product->ImageWiteBase}});"></span></a></li>

                            @foreach($product->Productphotos as $item)
                                <li> <a class="elem" href="{{$item->BaseImage}}" title="{{$product->name}}" data-lcl-txt="" data-lcl-author="" data-lcl-thumb="{{$item->BaseImage}}"><span style="background-image: url({{$item->BaseImage}});"></span></a></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="thumbnails">
                        <ul>
                            <li><img src="{{$product->ImageWiteBase}}" alt="{{$product->name}}"></li>
                            @foreach($product->Productphotos as $item)
                            <li><img src="{{$item->BaseImage}}" alt="{{$product->name}}"></li>

                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 menus-it"><span class="cat"> {{@$product->Categories->name}}</span>
                <div class="share42init"></div><script type="text/javascript" src="{{asset('assets')}}/js/share42.js"></script>
                <h3 class="titlebold">{{$product->name}}</h3>
                <ul class="rating">
                    @for($i=0;$i < $product->stars ;$i++ )
                    <li class="fas fa-star active"></li>
                    @endfor
                    @for($i=0;$i < (5-$product->stars) ;$i++ )
                    <li class="fas fa-star "></li>
                    @endfor

                </ul>
                <div class="price"><span class="new">{{$product->price_after_discount}}</span><span class="old">@if($product->price!=0){{$product->price}}@endif </span></div>
                <form class="" action="{{route('front.product.OneaddToCarts',[$product->id])}}" method="post">
                    <ul class="product-spec">
                        <li>{{trans('front.categary')}}:         <span>{{@$product->Categories->name}}</span></li>
                        <li>{{trans('front.brand')}}:         <span>{{@$product->Brands->name}}</span></li>
                        @if($color->count()>0)
                        <li>{{@$product->SpecificTitle->name1}}:
                            <div class="chicksign">
                                <select name="items_color" required id="items_color">
                                    <option value="">{{@$product->SpecificTitle->name1}}</option>
                                    @foreach($color as $color_opption)

                                        <option value="{{@$color_opption->Items_Color->id}}">{{@$color_opption->Items_Color->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </li>
                        @endif
                        @if($color->count()>0)
                        <li>{{@$product->SpecificTitle->name2}}:
                            <div>

                                @foreach($product->ProductSpecific->groupby('color_id') as $size_check)
                                    <div class="sizbox d-none " id="{{$size_check[0]['color_id']}}">

                                    @foreach($size_check as $oop)




                                        <div class="chicksign">
                                            <label class="che-box">
                                                <input type="radio" @if($oop->qty <= $oop->CountQty) disabled @endif value="{{@$oop->Items_Size->id}}" name="check"><span class="label-text">{{@$oop->Items_Size->name}}</span>
                                            </label>
                                        </div>



                                    @endforeach
                                    </div>

                                @endforeach

                            </div>
                        </li>
                        @endif

                        <li>{{trans('front.qty')}}:  {{trans('front.qtyAvlible')}} ({{$product->qty - $product->QuantityRegister}})
                            <div class="spinner">
                                {!! csrf_field() !!}
                                <input type="hidden" name="product_id" value="{{$product->id}}">
                                <button class="fa fa-angle-right btn btn-default" type="button"></button>
                                <input class="form-control" id="quantity" name="qty" type="text" min="1" value="1">
                                <button class="fa fa-angle-left btn btn-default ault" type="button">   </button>
                            </div>
                        </li>
                    </ul>
                    <nav class="bot-prod">
{{--                        <a class="icon-whatsapp" href="{{$temp}}" data-toggle="tooltip" target="_blank" title="@lang('front.Add-to-whatsapp')"><i class="fab fa-whatsapp"></i> @lang('front.Add-to-whatsapp') </a>--}}
                        <button class="btn " type="submit" data-toggle="tooltip" title="{{trans('front.Add-to-cart')}}" style="background: #fff848;width: auto;height: auto;-webkit-border-radius: 60px;border-radius: 60px;background-clip: padding-box;padding: 0px 15px;"
                        ><img src="{{asset('assets')}}/images/shopping-cart.png" alt="ORBIT STAR" title="ORBIT STAR" > {{trans('front.Add-to-cart')}}</button>

                        <a class="far fa-heart hart" href="{{route('front.favorites.store',[$product->id])}}" data-toggle="tooltip" title="{{trans('front.Add-to-fave')}}"></a></nav>
                </form>
            </div>
        </div>
    </div>
</section>
<section class="informations">
    <div class="container">
        <ul class="nav nav-tabs tabform">
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#overview"><i class="fas fa-info-circle"></i> {{trans('front.ditalis')}}</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#reviews"><i class="fas fa-users"></i> {{trans('front.reviwe')}} </a><!-- Tab panes --></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="overview">
                <div class="nestled">
                    <p class="text">{!! $product->description !!}</p>
                </div>
            </div>
            <div class="tab-pane fade" id="reviews">
                <div class="rev-it">
                    <div class="rev-rating"><span class="selected">{{count($ProductReviews)}}</span>
                        <ul class="rating">
                            @for($i=0;$i < $product->stars ;$i++ )
                            <li class="fa fa-star active"></li>
                            @endfor
                            @for($i=0;$i < (5-$product->stars) ;$i++ )
                            <li class="fa fa-star "></li>
                            @endfor
                        </ul>

                    </div>

                </div>
                <div class="detals-tou">
                    <h3 class="titleview"></h3>
                    <form class="merform" method="POST" action="{{route('front.product.reviews')}}">
                        <input type="hidden" name="product_id" value="{{$product->id}}">
                        {!! csrf_field() !!}
                        <!-- div(class="alert alert-danger" role="alert") #[i(class="fas fa-exclamation-triangle")] Something is wrong, please try again-->
                        <!-- div(class="alert alert-success" role="alert") #[i(class="fas fa-check")]Your message was sent successfully-->
                        <div class="rev-sbans" id="rating-ability-wrapper"><span class="selected">{{trans('front.reviwe')}}</span>
                            <label class="control-label" for="rating">
                                <input type="hidden" id="selected_rating" name="selected_rating" value="" required="required">
                            </label>
                            <button class="btnrating" type="button" name="rate" value="1"  data-attr="1" id="rating-star-1"><i class="fas fa-star" aria-hidden="true"></i></button>
                            <button class="btnrating" type="button" name="rate" value="2"  data-attr="2" id="rating-star-2"><i class="fas fa-star" aria-hidden="true"></i></button>
                            <button class="btnrating" type="button" name="rate" value="3"  data-attr="3" id="rating-star-3"><i class="fas fa-star" aria-hidden="true"></i></button>
                            <button class="btnrating" type="button" name="rate" value="4"  data-attr="4" id="rating-star-4"><i class="fas fa-star" aria-hidden="true"></i></button>
                            <button class="btnrating" type="button" name="rate" value="5"  data-attr="5" id="rating-star-5"><i class="fas fa-star" aria-hidden="true"></i></button>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 fildinput">
                                <textarea class="form-control" name="review" required placeholder="@lang('front.message')"></textarea>
                            </div>
                            <div class="col-sm-6 fildinput">
                                <input class="form-control" type="text" name="name" required  placeholder="@lang('front.name')">
                            </div>
                            <div class="col-sm-6 fildinput">
                                <input class="form-control" type="email" name="email" required placeholder="@lang('front.email')">
                            </div>
                        </div>
                        @guest

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

                        @endguest

                    </form>
                    @if($ProductReviews->count()>0)
                    @foreach($ProductReviews as $reviwe)
                    <div class="commant"><i class="fas fa-user"> </i>
                        <div class="textcomant">
                            <h5 class="nameuser">{{$reviwe->name}}</h5>
                            <ul class="rating">
                                @for($i=0;$i < $reviwe->rate ;$i++ )
                                <li class="fas fa-star active"></li>
                                @endfor
                                @for($i=0;$i < (5-$reviwe->rate) ;$i++ )
                                <li class="fas fa-star "></li>
                                @endfor
                            </ul>
                            <p>{{$reviwe->review}}</p>
                        </div>
                    </div>
                    @endforeach
                    @else

                    @endif

                </div>
            </div>
        </div>
    </div>
</section><!-- End Section informations -->
<section class="products">
    <div class="container">
        <h2 class="title">@lang('front.productCate')</h2>
        {{--            <p class="text-center">بزيارة صفحة متجرنا لمعرفة جميع الميزات الرئيسية لمتجرك</p>--}}
        <div class="products-slider">
            @if($products->count()>0)
            @foreach($products as $productttt)
            <div class="pro-item">
                <a class="far fa-heart hart" href="{{route('front.favorites.store',[$productttt->id])}}" data-toggle="tooltip" title="{{trans('front.Add-to-fave')}}"></a>
                <a class="cart" href="{{route('front.product.addToCart',[$productttt->id])}}" data-product-id="{{$productttt->id}}" data-toggle="tooltip" title="{{trans('front.Add-to-cart')}}">
                    <img src="{{asset('assets')}}/images/shopping-cart.png" alt="{{$productttt->name}}" title="{{$productttt->name}}">
                </a>
                @if($productttt->special)
                <div class="textnew">
                    <p>{{trans('front.Special')}}    </p>
                </div>
                @endif
                <a class="photo" href="{{route('front.product',[$productttt->id,$productttt->name])}}">
                    <img src="{{$productttt->image}}" alt="{{$productttt->name}}" title="{{$productttt->name}}">
                </a>
                <a class="title-it" href="{{route('front.product',[$productttt->id,$productttt->name])}}">{{$productttt->name}}</a>
                <div class="price"><span class="new">{{$productttt->price_after_discount}}</span>@if($productttt->price != 0)<span class="old">{{$productttt->price}}</span>@endif</div>
                <ul class="rating">
                    @for($i=0;$i < $productttt->stars ;$i++ )
                    <li class="fas fa-star active"></li>
                    @endfor
                    @for($i=0;$i < (5-$productttt->stars) ;$i++ )
                    <li class="fas fa-star "></li>
                    @endfor


                </ul>
            </div>
            @endforeach
            @else
            <div class="col-sm-4 itpord">

                {{--                        {{trans('front.NoDataProduct')}}--}}
            </div>

            @endif

        </div>
    </div>
</section><!--End products-min-->
<div class="modal fade show" id="delete-item" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog fast-form" role="document">
        <div class="modal-content">
            <form action="#" method="">
                <div class="modal-header">
                    <h2 class="title">حجز سريع</h2><span class="close de-close" data-dismiss="modal" aria-label="Close">×</span>
                </div>
                <div class="modal-body">
                    <!--div.alert.alert-success #[i(class="fa fa-check")] تم ارسال رسالتك بنجاح-->
                    <!--div.alert.alert-danger #[i(class="fa fa-exclamation-triangle")] هناك خطأ ما يرجى إعادة المحاولة-->
                    <div class="row">
                        <div class="col-sm-12 inpudata">
                            <input class="form-control" type="text" name="" placeholder="الاسم">
                        </div>
                        <div class="col-sm-12 inpudata">
                            <input class="form-control" type="text" name="" placeholder="رقم الهاتف">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="bottom" type="submit">ارسل رسالتك الأن</button>
                </div>
            </form>
        </div>
    </div>
</div><!-- End products-inner -->


<script>
    $(document).on('change', '#items_color', function() {
        $(".sizbox").addClass("d-none");;

        var id = $(this).val();
        var selector = "div[class='sizbox "+id+"']";
        $("#"+id+"").removeClass("d-none");;

    });
</script>

@endsection