@extends('web.layouts.master')
@section('title', trans('data.product_detail'))
@section('contents')
    <!-- start page title -->
    <section class="page-title">
        <div class="container">
            <h3 class="main-title">{{trans('data.product_detail')}}</h3>
        </div>
    </section>
    <!-- end page title -->

    <!--start Modal message-modal-->
    <div class="modal fade message-modal" id="message-modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-body">
                    <h4 class="modal-title main-color center">@lang('data.header_send')</h4>
                    <form action="{{route('send_out_message')}}" method="POST" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="form-group">
                            <textarea required name="message" class="form-control"
                                      placeholder="@lang('data.write_message')">{{old('message')}}</textarea>
                            <input type="hidden" name="user_id" value="{{$row->user->id}}">

                        </div>
                        <div class="btn-block">
                            <button type="submit" class="btn btn-main btn-hover">@lang('data.send_sms')</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--end Modal message-modal-->



    <!-- start brands  -->
    <section class="item-details">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-8">
                    <div class="all-item-slider">
                        <div class="slider item-for">
                            @foreach($row->images as $image )
                                <div class="item">
                                    <img src="{{$image->image}}" alt="item img"/>
                                </div>
                            @endforeach
                        </div>
                        <div class="slider item-nav">
                            @foreach($row->images as $image )
                                <div class="item">
                                    <img src="{{$image->image}}" alt="item img"/>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="right-grid all-detials grey-bg">

                        <div class="row item-text">
                            <h5 class="col-12 item-name wow fadeInDown">
                                {{$row->title}}
                            </h5>
                            <div class="col-12 item-owner">
                                <p class="owner">
                                    <span class="icon"><i class="fas fa-user"></i></span>
                                    <a href="{{route('user_profile',$row->user->mobile)}}">

                                        {{$row->user->name ? $row->user->name : $row->user->email}}
                                    </a>
                                </p>
                                <p class="time">
                                    <span class="icon">
                                        <i class="fas fa-clock"></i>
                                    </span>
                                    {{\Carbon\Carbon::parse($row->created_at)->diffForHumans()}}
                                </p>
                                @if(\Auth::check() && \Auth::user()->id == $row->user_id)
                                    <p class="time" id="refresh_product" style="cursor: pointer">
                                    <span class="icon">
                                        <i class="fas fa-retweet"></i>
                                    </span>
                                        {{\Lang::get('data.refresh_product')}}
                                    </p>
                                @endif
                            </div>
                            <p class="col-12 wow fadeInUp" style="margin-bottom: 15px">
                                {{$row->detail}}
                            </p>
                            @if($row->category->car_option == 'true')

                                <div class="col-md-4" style="margin-bottom: 15px">
                                    <span style="font-weight: 600">@lang('data.buy_type')</span>
                                    <span>{{$row->ad_type == 'buy' ?  Lang::get('data.buy') : Lang::get('data.waiver') }}</span>
                                </div>
                                <div class="col-md-4" style="margin-bottom: 15px">
                                    <span style="font-weight: 600">@lang('data.year')</span>
                                    <span>{{$row->year}}</span>
                                </div>
                                <div class="col-md-4" style="margin-bottom: 15px">
                                    <span style="font-weight: 600">@lang('data.car_status')</span>
                                    <span>
                                    @if($row->car_status == 'used')
                                            @lang('data.used')
                                        @elseif($row->car_status == 'new')
                                            @lang('data.new')
                                        @else
                                            @lang('data.accident')
                                        @endif
                                </span>
                                </div>
                                <div class="col-md-4" style="margin-bottom: 15px">
                                    <span style="font-weight: 600">@lang('data.fetis')</span>
                                    <span>{{$row->fetis == 'manual' ? Lang::get('data.manual') : Lang::get('data.automatic')}}</span>
                                </div>
                                <div class="col-md-4" style="margin-bottom: 15px">
                                    <span style="font-weight: 600">@lang('data.double')</span>
                                    <span>{{$row->double == 'true' ? Lang::get('data.yes') : Lang::get('data.no')}}</span>
                                </div>
                                <div class="col-md-4" style="margin-bottom: 15px">
                                    <span style="font-weight: 600">@lang('data.fuel')</span>
                                    <span>
                                    @if($row->fuel == 'gasoline')
                                            @lang('data.gasoline')
                                        @elseif($row->fuel == 'hybrid')
                                            @lang('data.hybrid')
                                        @else
                                            @lang('data.diesel')
                                        @endif
                                </span>
                                </div>
                                <div class="col-md-4" style="margin-bottom: 15px">
                                    <span style="font-weight: 600">@lang('data.km')</span>
                                    <span>{{$row->km}}</span>
                                </div>
                            @endif
                            @if($row->determine_price == 'true')
                                <div class="col-md-4" style="margin-bottom: 15px">
                                    <span style="font-weight: 600">@lang('data.price')</span>
                                    <span>{{$row->price}} @lang('data.sar')</span>
                                </div>
                            @endif
                        </div>
                        <div class="row item-info wow fadeInUp">
                            <div class="col-md-12 col-lg-6">
                                <ul class="list-unstyled white-bg">
                                    <li>
                                        <span class="icon">
                                            <img style="cursor: pointer" id="fav_image"
                                                 @if(\Auth::check() && \App\Models\Favourite::where(['user_id'=>\Auth::user()->id,'product_id'=>$row->id])->first())  src="{{asset('web/img/dynamic/icons/red_heart.png')}}"
                                                 @else src="{{asset('web/img/dynamic/icons/heart.png')}}"
                                                 @endif alt="icon"/>
                                        </span>
                                        <input hidden value="{{$row->id}}" id="row_id">
                                        <span
                                            class="total-count new_count">{{\App\Models\Favourite::where('product_id',$row->id)->count()}}</span>
                                    </li>
                                    @if(Auth::check() && $row->user->id != Auth::user()->id)
                                        <li>
                                        <span class="icon">
                                            <img src="{{asset('web/img/dynamic/icons/mail.png')}}" alt="icon"/>
                                        </span>
                                            <span class="total-count"><a
                                                    href="#" data-toggle="modal"
                                                    data-target="#message-modal">@lang('data.message_now')</a></span>
                                        </li>
                                        <li>
                                        <span class="icon">
                                            <img src="{{asset('web/img/dynamic/icons/flag.png')}}" alt="icon"/>
                                        </span>
                                            @if(\App\Models\Spam::where(['user_id'=> Auth::user()->id, 'product_id'=>$row->id, 'type' => 'product'])->first())
                                                <span class="total-count">@lang('data.reported')</span>
                                            @else
                                                <span id="spam_in" onclick="spam('{{$row->id}}','product')"
                                                      style="cursor: pointer"
                                                      class="total-count">@lang('data.report_product')</span>
                                            @endif
                                        </li>
                                    @else
                                        <li>
                                        <span class="icon">
                                            <img src="{{asset('web/img/dynamic/icons/mail.png')}}" alt="icon"/>
                                        </span>
                                            <span class="total-count"><a
                                                    href="{{route('home')}}">@lang('data.message_now')</a></span>
                                        </li>
                                        <li>
                                        <span class="icon">
                                            <img src="{{asset('web/img/dynamic/icons/flag.png')}}" alt="icon"/>
                                        </span>
                                            <a id="spam_in" href="{{route('home')}}"
                                               style="cursor: pointer"
                                               class="total-count">@lang('data.report_product')</a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                            @if($row->hide_mobile == 'false')
                                <div class="col-md-6 col-lg-3">
                                    <a href="https://api.whatsapp.com/send?phone={{$row->mobile}}"
                                       class="contact-link whatsapp btn-hover" target="_blank">
                                        <img src="{{asset('web/img/dynamic/icons/whatsapp.png')}}" alt="img"/>
                                        @lang('data.call_whatsapp')
                                    </a>
                                </div>
                            @endif
                            <div class="col-md-6 col-lg-3">
                                <a href="https://twitter.com/share?url={{route('product.show',$row->code)}}&amp;text={{$row->title}}&amp;hashtags=sawqna"
                                   class="contact-link twitter btn-hover" target="_blank">
                                    <img src="{{asset('web/img/dynamic/icons/twitter.png')}}" alt="img"/>
                                    @lang('data.twitter_call')
                                </a>
                            </div>
                        </div>
                        <div class="row item-info contact wow fadeInUp">
                            <h4 class="col-12 contact-title">@lang('data.contact')</h4>
                            <ul class="col-12 list-unstyled contact-list">
                                @if($row->hide_mobile == 'false')
                                    <li>
                                        <a href="tel:{{$row->mobile}}">
                                            <span class="icon"><i class="fas fa-phone"></i></span>{{$row->mobile}}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="tel:{{$row->user->mobile}}">
                                            <span class="icon"><i class="fas fa-phone"></i></span>{{$row->user->mobile}}
                                        </a>
                                    </li>
                                @else
                                    <li>
                                        <a href="tel:{{$row->user->mobile}}">
                                            <span class="icon"><i class="fas fa-phone"></i></span>{{$row->user->mobile}}
                                        </a>
                                    </li>
                                @endif
                            </ul>
                        </div>
                        {{--                        <div class="row item-info contact wow fadeInUp">--}}
                        {{--                            <h4 class="col-12 contact-title">كلمات البحث</h4>--}}
                        {{--                            <ul class="col-12 list-unstyled contact-list">--}}
                        {{--                                <li class="border-link wow fadeInUp">--}}
                        {{--                                    <a href="#">كيا</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="border-link wow fadeInUp">--}}
                        {{--                                    <a href="#">بينتلي</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="border-link wow fadeInUp">--}}
                        {{--                                    <a href="#">تويوتا</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="border-link wow fadeInUp">--}}
                        {{--                                    <a href="#">هيونداى</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="border-link wow fadeInUp">--}}
                        {{--                                    <a href="#">كيا</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="border-link wow fadeInUp">--}}
                        {{--                                    <a href="#">بينتلي</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="border-link wow fadeInUp">--}}
                        {{--                                    <a href="#">تويوتا</a>--}}
                        {{--                                </li>--}}
                        {{--                                <li class="border-link wow fadeInUp">--}}
                        {{--                                    <a href="#">هيونداى</a>--}}
                        {{--                                </li>--}}
                        {{--                            </ul>--}}
                        {{--                        </div>--}}
                        <div class="row item-info comments wow fadeInUp">
                            <h4 class="col-6 contact-title">@lang('data.comments')</h4>
                            @if(\Auth::check())
                                <h4 style="cursor:pointer ;" id="follow_comments"
                                    class="col-6 contact-title main-color">
                                    <img src="{{asset('web/img/dynamic/icons/follow.png')}}" alt="follow img"/>
                                    <div id="follow_status">
                                        @if(isset($follow_status) && $follow_status == 'false')



                                            @lang('data.follow_comments')
                                        @else
                                            @lang('data.unfollow_comments')
                                        @endif
                                    </div>
                                </h4>
                                <div class="clearfix"></div>
                            @endif
                            @if(Auth::check() && $row->stop_comments == 'open')

                                <div class="form-group col-md-12">
                                        <textarea style="width: 100%" name="comment" class="form-control"
                                                  placeholder="@lang('data.write_comment')"></textarea>
                                    <button onclick="add_comment({{$row->id}})" type="submit"
                                            class="btn btn-transparent btn-send">
                                        <img src="{{asset('web/img/dynamic/icons/send.png')}}" alt="send"/>
                                    </button>
                                </div>
                            @endif
                            <div class="col-12 comments-block">
                                <ul id="comment-in" class="list-unstyled">
                                    @foreach($row->comments()->orderByDesc('id')->get() as $comment)
                                        <li class="media">
                                            <img
                                                src="{{$comment->user->image ? asset('images/users/'.$comment->user->image) : asset('web/img/dynamic/icons/user.png')}}"
                                                class="owner-avatar"
                                                alt="owner"/>
                                            <div class="media-body">
                                                <div class="head-info">
                                                    <h5 class="com-owner">{{$comment->user->name ? $comment->user->name : $comment->user->email}}</h5>
                                                    <p class="time">
                                                    <span class="icon">
                                                        <i class="fas fa-clock"></i>
                                                    </span>
                                                        {{\Carbon\Carbon::parse($comment->created_at)->diffForHumans()}}
                                                    </p>
                                                </div>
                                                <p class="w-border">
                                                    {{$comment->body}}
                                                </p>
                                                <p>
                                                <span class="reply">
                                                    <span class="icon"><img
                                                            src="{{asset('web/img/dynamic/icons/flag-blue.png')}}"
                                                            alt="report"/></span>
                                                    @if(Auth::check())
                                                        @if(\App\Models\Spam::where(['user_id'=> Auth::user()->id, 'product_id'=>$row->id, 'type' => 'comment', 'comment_id' => $comment->id])->first())
                                                            <span class="text">@lang('data.reported')</span>
                                                        @else
                                                            <span id="comment_in"
                                                                  onclick="spam('{{$row->id}}','comment', '{{$comment->id}}')"
                                                                  class="text">@lang('data.report')</span>
                                                        @endif
                                                    @else
                                                        <a href="{{route('home')}}" id="comment_in"
                                                           class="text">ابلاغ</a>
                                                    @endif
                                                </span>
                                                </p>

                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-md-4 filter-block">
                    <div class="row side-items main-content grey-bg">
                        <h4 class="col-12 title wow fadeInDown">@lang('data.similar_products')</h4>

                        @foreach($similar_products as $item)
                            <div class="col-12 grid-cols flex-column wow fadeInUp">
                                <div class="card sm">
                                    <div class="card-img-top">
                                        <img
                                            src="{{(count($item->images) > 0) ? $item->images[0]['image'] : $setting->site_logo}}"
                                            class=" img-fluid" alt="product img"/>
                                        <div class="card-caption">
                                            <div class="inner-caption">
                                                <ul class="list-unstyled list-inline">
                                                    <li class="icon eye">
                                                        <a href="{{route('product.show', $item->code)}}"
                                                           title="@lang('data.see_product')"><i
                                                                class="fa fa-eye"></i>
                                                        </a>
                                                    </li>
                                                    @if(\Auth::check())
                                                        <li onclick="favourite({{$item->id}})"
                                                            class="icon fav {{\App\Models\Favourite::where(['user_id' => Auth::user()->id, 'product_id' => $item->id])->first() ? 'liked' : ''}}">
                                                    <span title="{{trans('data.add_to_favourite')}}"><i
                                                            class="fa fa-heart"></i>
                                                    </span>
                                                        </li>
                                                    @endif
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <a href="{{route('product.show', $item->code)}}">{{$item->title}}</a>
                                        </h5>
                                        <p class="locate">
                                            <span class="icon"><i class="fas fa-map-marker-alt"></i></span>
                                            {{$item->city->name[App::getLocale()]}}
                                        </p>
                                        <div class="bottom">
                                            <p class="owner">
                                                <span class="icon"><i class="fas fa-user"></i></span>
                                                <a href="{{route('user_profile',$item->user->mobile)}}">

                                                    {{$item->user->name ? $item->user->name : $item->user->email}}
                                                    &nbsp;
                                                </a>
                                            </p>

                                            <p class="time">
                                            <span class="icon">
                                                <i class="fas fa-clock"></i>
                                            </span>
                                                {{\Carbon\Carbon::parse($item->created_at)->diffForHumans()}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end brands  -->
    <input type="hidden" value="{{$row->code}}" id="product_code">

@endsection

@section('script')

    <script>
        $("#follow_comments").on('click', function () {
            var product_code = $("#product_code").val();

            $.ajax({
                type: 'GET',
                url: '{{route('follow_product')}}',
                data: {product_code: product_code},
                success: function (data) {
                    console.log(data);
                    console.log(data.follow_status);
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.msg,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });

                        $("#follow_status").html(" ");
                        $("#follow_status").html(data.follow_status);

                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });
                    }

                }
            });


        });
        $("#refresh_product").on('click', function () {
            var product_code = $("#product_code").val();
            $.ajax({
                type: 'GET',
                url: '{{route('refresh_product')}}',
                data: {product_code: product_code},
                success: function (data) {
                    console.log(data);
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.msg,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });


                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });
                    }

                }
            });
        });

        function add_comment(id) {

            var comment = $("textarea[name=comment]").val();
            console.log(id, comment);
            $.ajax({
                type: 'POST',
                url: '{{route('add_comment_web')}}',
                data: {product_id: id, comment: comment},
                success: function (data) {
                    console.log(data);
                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.msg,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });
                        $("textarea[name=comment]").val('');

                        if (data.data.user_image) {
                            var image = "{{asset('images/users/')}}/" + data.data.user_image + "";
                        } else {
                            var image = "{{asset('web/img/dynamic/icons/user.png')}}";
                        }

                        $("#comment-in").prepend("    <li class=\"media\">\n" +
                            "        <img src=\" " + image + "\" class=\"owner-avatar\" alt=\"owner\" />\n" +
                            "        <div class=\"media-body\">\n" +
                            "            <div class=\"head-info\">\n" +
                            "                <h5 class=\"com-owner\">" + data.data.user_name + "</h5>\n" +
                            "                <p class=\"time\">\n" +
                            "                                                    <span class=\"icon\">\n" +
                            "                                                        <i class=\"fas fa-clock\"></i>\n" +
                            "                                                    </span>\n" +
                            "" + data.data.ago + "" +
                            "                </p>\n" +
                            "            </div>\n" +
                            "            <p class=\"w-border\">\n" +
                            "" + data.data.body + "" +
                            "            </p>\n" +
                            "            <p>\n" +
                            "                                                <span class=\"reply add-reply\">\n" +
                            "                                                    <span class=\"icon\"><img src=\"{{asset('web/img/dynamic/icons/flag-blue.png')}}\"\n" +
                            "                                                                            alt=\"reload\" /></span>\n" +
                            "\n" +
                            "                                                    <span class=\"text\">{{trans('data.report')}}</span>\n" +
                            "                                                </span>\n" +
                            "            </p>\n"
                        );
                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });
                    }

                }
            });
        }


        function spam(product_id, type, comment_id = null) {

            console.log(product_id, type, comment_id);

            $.ajax({
                type: 'POST',
                url: '{{route('spam_web')}}',
                data: {product_id: product_id, type: type, comment_id: comment_id},
                success: function (data) {
                    console.log(data);
                    Swal.fire({
                        title: '{{trans('data.success')}}',
                        text: data.msg,
                        icon: 'success',
                        confirmButtonText: '{{trans('data.done')}}'
                    });

                    if (comment_id == null) {
                        $("#spam_in").html('{{trans('data.reported')}}')
                    } else {

                    }
                    $("#comment_in").html('{{trans('data.reported')}}')
                }
            });
        }

        $("#fav_image").on('click', function () {
            var row_id = $("#row_id").val();
            console.log(row_id);
            $.ajax({
                type: 'GET',
                url: '{{route('fav_product')}}',
                data: {row_id: row_id},
                success: function (data) {
                    console.log(data);

                    if (data.value == true) {
                        Swal.fire({
                            title: '{{trans('data.success')}}',
                            text: data.msg,
                            icon: 'success',
                            confirmButtonText: '{{trans('data.done')}}'
                        });

                        $(".new_count").html("");
                        $(".new_count").html(data.new_count);
                        $("#fav_image").attr('src', data.url);


                    } else {
                        Swal.fire({
                            title: '{{trans('data.error')}}',
                            text: data.msg,
                            icon: 'error',
                            confirmButtonText: '{{trans('data.close')}}'
                        });
                    }

                }
            });
        });
    </script>

@endsection