@extends('web.layouts.app')
@section('title',$product->name[App::getLocale()])
@section('content')



    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="pr_det_img">
                    <img
                        src="{{$product->images()->first() ? $product->images()->first()->image : asset('benaeilogo.png')}}"
                        alt="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="pr_head">
                    <div class="row">
                        <div class="col-sm-8">
                            <h4>{{$product->name[App::getLocale()]}}</h4>
                            <img src="{{$product->company->logo}}" style="height: 24px;" alt="">
                            <span class="pr_company_name">{{$product->company->company_name}}</span>
                            <p class="card-text">

                            <form style="display: inline-block;">
                                <div class="stars">
                                    <input hidden value="{{$product->company->id}}" id="company_id">
                                    <input hidden value="{{$product->id}}" id="product_id">
                                    <input onclick="rate(1)" type="radio" name="star" class="star-1" id="star-1"/>
                                    <label class="star-1" for="star-1">1</label>
                                    <input onclick="rate(2)" type="radio" name="star" class="star-2" id="star-2"/>
                                    <label class="star-2" for="star-2">2</label>
                                    <input onclick="rate(3)" type="radio" name="star" class="star-3" id="star-3"/>
                                    <label class="star-3" for="star-3">3</label>
                                    <input onclick="rate(4)" type="radio" name="star" class="star-4" id="star-4"/>
                                    <label class="star-4" for="star-4">4</label>
                                    <input onclick="rate(5)" type="radio" name="star" class="star-5" id="star-5"/>
                                    <label class="star-5" for="star-5">5</label>
                                    <span></span>
                                </div>
                            </form>
                            <p class="sp_reat">( {{\App\Models\Rate::where('product_id',$product->id)->count()}} )</p>
                            <p class="card-text">
                                <span class="price1">{{$product->price - (($product->price * $product->discount_percent) / 100)}} ريال</span>
                                <span class="price2">{{$product->price}} ريال</span>
                            </p>
                            <p class="card-text">
                                <span class="price1">الكمية المتاحة</span>

                                <span
                                    class="price1"> {{\App\Models\ShopProduct::where('product_id',$product->id)->sum('count')}} </span>
                            <hr>
                            <span class="price1">برجاء إدخال الكمية المطلوبة</span>

                            <input type="number" class="form-control edit-items" value="0"
                                   max="{{\App\Models\ShopProduct::where('product_id',$product->id)->sum('count')}}"
                                   name="count">
                            </p>
                            <p>{!! $product->description[App::getLocale()] !!}</p>
                            <a class="wh_place" data-toggle="modal" data-target=".bd-example-modal-lg" href="#"> <i
                                    class="fas fa-map-marker-alt"></i> أين اجد المنتج؟</a>

                            <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
                                 aria-labelledby="myLargeModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="col-12">
                                            <div class="map">
                                                <div id='map_canvas'></div>
                                            </div>

                                            <div class="comp_map">

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


                        </div>
                        <div class="col-sm-4">
                            <div class="pr_share">
                                {{--                            <a href="#">--}}
                                {{--                                <i class="fas fa-share-alt"></i>--}}
                                {{--                            </a>--}}
                                <a class="heart_icon" onclick="favourite_item({{$product->id}})">

                                    @if(\Auth::check() && \App\Models\Favourite::where(['user_id'=>\Auth::user()->id,'product_id'=>$product->id])->first())
                                        <i class="ch_icon fas fa-heart favourite{{$product->id}}"></i>
                                    @else
                                        <i class="ch_icon far fa-heart favourite{{$product->id}}"></i>
                                    @endif


                                </a>
                            </div>
                        </div>
                        <div class="col-12">
{{--                            @if(\Auth::check())--}}

{{--                                <a class="Order_now" href="#" data-toggle="modal">--}}
{{--                                    <button class="order_now">اطلب الان</button>--}}
{{--                                </a>--}}
{{--                            @else--}}
{{--                                <p>برجاء تسجيل الدخول لكي تتمكن من الطلب</p>--}}

{{--                            @endif--}}

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

        </div>
    </div>


    <div class="container">
        <div class="nav_pr_det">
            <ul>
                <li id="toog_discraption" data-toggle="collapse" data-target="#pr_descraption"
                    class="pr_nav act-ve_pr ">الوصف
                </li>
                <li id="toog_details" data-toggle="collapse" data-target="#pr_detaiels" class="pr_nav">تفاصيل المنتج
                </li>
                <li id="toog_instructions" data-toggle="collapse" data-target="#pr_instructions" class="pr_nav">
                    تعليمات
                </li>
                <li id="toog_Replacement" data-toggle="collapse" data-target="#pr_Replacement" class="pr_nav">الاستبدال
                    والاسترجاع
                </li>
            </ul>
        </div>
    </div>


    <!-- start collaps discraption -->

    <div style="display: block;" id="pr_descraption" class="collapse">
        <div class="container">
            <p>{!! $product->description[App::getLocale()] !!}</p>
            <hr>
            <p>{!! $product->property->other !!}</p>

        </div>
    </div>


    <!-- start collaps detaiels -->
    <div id="pr_detaiels" class="collapse">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h4 class="h_head">
                        بيانات عامة
                    </h4>
                </div>
                <div class="col-12">
                    <div class="pr_color">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="det_ul">
                                    <ul>
                                        @if($product->property && $product->property->capacity)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">السعة</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->capacity}} - {{$product->property->capacity_measure}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->weight)
                                            <li class="det_ul_bac2">
                                                <span class="det_ul_sp1">الوزن</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->weight}} - {{$product->property->weight_measure}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->brightness)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">اللمعان</span>
                                                <span
                                                    class="det_ul_sp2">
                                                    @if($product->property->brightness == 'half')

                                                        نصف

                                                    @elseif($product->property->brightness == 'full')
                                                        كامل
                                                    @else

                                                        ربع
                                                    @endif


                                                    </span>
                                            </li>
                                        @endif

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

                            <div class="col-md-6">
                                <div class="det_ul">
                                    <ul>
                                        @if($product->property && $product->property->meter_per_box)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">متر لكل مربع</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->meter_per_box}}</span>
                                            </li>
                                        @endif

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

            <div class="row">
                <div class="col-12">
                    <h4 class="h_head">
                        ابعاد
                    </h4>
                </div>
                <div class="col-12">
                    <div class="pr_color">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="det_ul">
                                    <ul>
                                        @if($product->property && $product->property->tall)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">الطول</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->tall}} - {{$product->property->tall_measure}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->width)
                                            <li class="det_ul_bac2">
                                                <span class="det_ul_sp1">العرض</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->width}} - {{$product->property->width_measure}}</span>
                                            </li>
                                        @endif

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

                            <div class="col-md-6">
                                <div class="det_ul">
                                    <ul>
                                        @if($product->property && $product->property->thick)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">السمك</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->thick}} - {{$product->property->thick_measure}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->height)
                                            <li class="det_ul_bac2">
                                                <span class="det_ul_sp1">الإرتفاع</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->height}} - {{$product->property->height_measure}}</span>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <h4 class="h_head">
                        المعلومات الكهربائية
                    </h4>
                </div>
                <div class="col-12">
                    <div class="pr_color">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="det_ul">
                                    <ul>


                                        @if($product->property && $product->property->volte)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">الجهد الكهربي</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->volte}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->hertz)
                                            <li class="det_ul_bac2">
                                                <span class="det_ul_sp1">التردد</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->hertz}}</span>
                                            </li>
                                        @endif

                                        @if($product->property && $product->property->farad)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">السعة الكهربائية</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->farad}}</span>
                                            </li>
                                        @endif

                                        @if($product->property && $product->property->heat)
                                            <li class="det_ul_bac2">
                                                <span class="det_ul_sp1">مصدر الحرارة</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->heat}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->watt)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">الشغل</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->watt}}</span>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="det_ul">
                                    <ul>

                                        @if($product->property && $product->property->ampere)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">التيار الكهربي</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->ampere}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->ohm)
                                            <li class="det_ul_bac2">
                                                <span class="det_ul_sp1">المقاومة</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->ohm}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->fesh_type)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">نوع الفيش </span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->fesh_type}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->burnes_numbers)
                                            <li class="det_ul_bac2">
                                                <span class="det_ul_sp1">عدد الشعلات</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->burnes_numbers}}</span>
                                            </li>
                                        @endif
                                        @if($product->property && $product->property->joule)
                                            <li class="det_ul_bac1">
                                                <span class="det_ul_sp1">الشغل</span>
                                                <span
                                                    class="det_ul_sp2">{{$product->property->joule}}</span>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <h4 class="h_head">
                        الإستخدامات
                    </h4>
                </div>
                <div class="col-12">
                    <div class="pr_color">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="det_ul">
                                    <ul>
                                        @foreach($product_usages as $usage)
                                            <li class="det_ul_bac1">
                                            <span class="det_ul_sp1">

                                            @if($usage->usage == 'out')

                                                    خارجي
                                                @elseif($usage->usage == 'bathroom')
                                                    حمامات
                                                @elseif($usage->usage == 'in')
                                                    داخلي
                                                @elseif($usage->usage == 'wall')
                                                    حوائط
                                                @elseif($usage->usage == 'kitchen')
                                                    مطابخ
                                                @elseif($usage->usage == 'pools')
                                                    حمامات سباحة
                                                @endif
                                            </span>
                                            </li>

                                        @endforeach

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


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

    <!-- start collaps instructions -->

    <div id="pr_instructions" class="collapse">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h4 class="h_head">
                        شرح كيفية الحساب والقياس
                    </h4>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <div class="instru_img">

                        <a href="#">
                            <img src="{{asset('web/img/57--Nobel.png')}}" alt="">

                        </a>
                    </div>
                </div>
                @foreach($measures as $measure)
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="instru_img">

                            <a href="#">
                                <img src="{{$measure->image}}" alt="">

                            </a>
                        </div>
                    </div>
                @endforeach

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


    <!-- start collaps Replacement -->
    <div id="pr_Replacement" class="collapse">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="replac">
                        <p>
                            {!! $product->shipping_terms[App::getLocale()] !!}

                        </p>


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



    <!-- start Similar products -->
    <div class="Similar">
        <div class="similar_head">
            <h4 class="h_head text-center">
                منتجات مشابهه
            </h4>
        </div>
        <div class="container">
            <div class="row">


                @foreach($related_products as $row)

                    @include('web.products.item')

                @endforeach

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


    <!-- start model for Order now -->
    <div class="modal fade" id="Order_now" data-backdrop="static" tabindex="-1" role="dialog"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width: 672px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="padding: 20px 50px;">
                    <h4 class="">تم الاضافة </h4>
                    <p> تم اضافه منتج <span>" {{$product->name[App::getLocale()]}} "</span> الي عربة التسوق</p>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-7">
                                <a href="{{route('shopping_cart')}}" class="buttons">
                                    <button class="buuts1">
                                        عرض سلة التسوق وإتمان الشراء
                                    </button>
                                </a>
                            </div>
                            <div class="col-md-5">
                                <a href="#" class="buttons">
                                    <button data-dismiss="modal" class="buuts2">
                                        متابعة التسوق
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
 @stop
@section('script')
    <script>
        var locations = <br />
<b>Warning</b>:  Undefined variable $shops in <b>/home/alkhalaffamily/public_html/trial_benaee/resources/views/web/products/product_details.blade.php</b> on line <b>544</b><br />
null;
        jQuery(function ($) {
            <!-- Asynchronously Load the map API  -->
            var script = document.createElement('script');
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBKhmEeCCFWkzxpDjA7QKjDu4zdLLoqYVw&callback=initialize";
            document.body.appendChild(script);
        });

        function initialize() {
            var map;
            var bounds = new google.maps.LatLngBounds();
            var mapOptions = {
                mapTypeId: 'roadmap'
            };

            <!-- Display a map on the page -->
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            map.setTilt(45);


            <!-- Display multiple markers on a map -->
            var infoWindow = new google.maps.InfoWindow({
                content: ''
            });

            <!-- Loop through our array of markers & place each one on the map   -->
            for (i = 0; i < locations.length; i++) {
                var position = new google.maps.LatLng(locations[i].lat, locations[i].lng);
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: locations[i].title
                });

                <!-- Allow each marker to have an info window     -->
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infoWindow.setContent('<h1>' + locations[i].address + '</h1>');
                        infoWindow.open(map, marker);
                    }
                })(marker, i));
                <!-- Automatically center the map fitting all markers on the screen -->
                map.fitBounds(bounds);
            }
            <!-- Override our map zoom level once our fitBounds function runs (Make sure it only runs once) -->
            var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
                this.setZoom(5);
                google.maps.event.removeListener(boundsListener);
            });

        }
    </script>

    <script>
        $(".order_now").on('click', function () {
            var product_id = {{$product->id}} ;
            var count = $(".edit-items").val();
            if (count == 0) {
                Swal.fire({
                        title: 'خطأ',
                        text: 'يرجي إختيار الكمية',
                        icon: 'error',
                        confirmButtonText: 'غلق'
                    }
                );


            } else {
                $.ajax({

                    type: 'POST',

                    url: '{{route('add_to_cart')}}',

                    data: {product_id: product_id, count: count},

                    success: function (data) {
                        if (data.status == 1) {

                            console.log('success');
                            $('.edit-items').val('');
                            $("#Order_now").modal('show');
                        } else {
                            Swal.fire({
                                    title: 'خطأ',
                                    text: data.msg,
                                    icon: 'error',
                                    confirmButtonText: 'غلق'
                                }
                            );
                        }
                    }

                });
            }
        });
    </script>
@stop