{{--{{ dd(head($paramsobj->vendorimagethumb)) }}--}}
@extends('layouts.app')
{{--@section('keywords', $keywords)--}}
@if($motovendor->title) @section('description', 'www.WebMoto.us – Online Motorcycle Trader! Dealer Profile: '.$motovendor->title .' - ' .$motovendor->description) @endif
@if($motovendor->title) @section('title', 'www.WebMoto.us – Dealer Profile: '.$motovendor->title ) @endif
@section('og:url', request()->url())
@section('og:image', head($paramsobj->vendorimagethumb))
@if($motovendor->title) @section('og:title', 'www.WebMoto.us – Online Motorcycle Trader! Dealer Profile: '.$motovendor->title) @endif
@if($motovendor->title) @section('og:description', 'www.WebMoto.us – Online Motorcycle Trader! Dealer Profile: '.$motovendor->title.' - ' .$motovendor->description ) @endif
{{--@if($category->id) @section('title', 'www.WebMoto.us – List of ads by category: '.$paramsobj->sector->name.' - '.$category->name ) @endif--}}
{{--@if($marka) @section('title', 'List of ads by category: '.$paramsobj->adds->sector->name .'-'.$marka->name ) @endif--}}

@section('content')
    <section class="page-header page-header-xs">
        <div class="container">

            <h1>{{ $motovendor->title }}</h1>

            <!-- breadcrumbs -->
            <ol class="breadcrumb">
                <li><a href="/">Home</a></li>
                <li><a href="{{ @url('/vendors') }}">Dealers</a></li>
            </ol><!-- /breadcrumbs -->

        </div>
    </section>
    <section>
        <div class="container">

            <div class="row">
                <!-- LEFT -->

                <div class="col-lg-9 col-md-9 col-sm-9">
                    <!-- IMAGE -->
                    <div class="col-lg-5 col-sm-12">

                        <div class="thumbnail relative margin-bottom-3">
                            <!--
                                IMAGE ZOOM

                                data-mode="mouseover|grab|click|toggle"
                            -->
                            <figure id="zoom-primary" class="zoom" data-mode="mouseover">
                                <!--
                                    zoom buttton

                                    positions available:
                                        .bottom-right
                                        .bottom-left
                                        .top-right
                                        .top-left
                                -->

                                <a class="lightbox bottom-right" href="{{ $paramsobj->vendorimage[0] }}"
                                   data-plugin-options='{"type":"image"}'><i class="glyphicon glyphicon-search"></i></a>

                                <!--
                                    image

                                    Extra: add .image-bw class to force black and white!
                                -->
                                <img class="img-responsive" src="{{ $paramsobj->vendorimage[0] }}" width="1200"
                                     height="800" alt="{{ $motovendor->title }}"/>
                            </figure>

                        </div>

                        <!-- Thumbnails (required height:100px) -->
                        <div data-for="zoom-primary" class="zoom-more owl-carousel owl-padding-3 featured"
                             data-plugin-options='{"singleItem": false, "autoPlay": false, "navigation": true, "pagination": false}'>
                            @php
                                $i=0;
                            @endphp
                            @foreach($paramsobj->vendorimagethumb as $imageitems)

                                <a class="thumbnail active" href="{{ $paramsobj->vendorimage[$i] }}">
                                    <img src="{{ $imageitems }}" height="100" alt="" id="img_01"/>
                                </a>

                                @php
                                    $i++;
                                @endphp
                            @endforeach

                        </div>
                        <!-- /Thumbnails -->

                    </div>
                    <!-- /IMAGE -->

                    <!-- ITEM DESC -->
                    <div class="col-lg-7 col-sm-12 clearfix">

                        <!-- buttons -->
                        <div class="pull-right">
                            @if ($paramsobj->isfavorite)
                                <button class="btn btn-default add-wishlist text-danger"
                                        id="favdistroy-" href="#" data-item-id="1"
                                        data-toggle="tooltip" title="Get out of the garage"
                                        onclick="DestroyVendorsFavorites('{{ $motovendor->id }}', '{{ Auth::id() }}')">
                                    <i class="fa fa-heartbeat nopadding"></i></button>
                            @else
                                <button class="btn btn-default add-wishlist" id="favadd-"
                                        href="#" data-item-id="1" data-toggle="tooltip" title="Park into the garage"
                                        onclick="AddVendorsFavorites('{{ $motovendor->id }}', '{{ Auth::id() }}')"><i
                                            class="fa fa-heart nopadding"></i></button>
                            @endif
                            <button class="btn btn-default add-compare"
                                    onclick="ReportAdministrator('{{ $motovendor->id }}', '{{ Auth::id() }}', '{{ Request::ip() }}', true)"
                                    href="javascript:void(0)" data-item-id="1" data-toggle="tooltip"
                                    title="Report an irregularity"><i class="fa fa-bell nopadding"
                                                                      data-toggle="tooltip"></i></button>
                                <button class="btn btn-default add-compare"
                                        onclick="SendToFriend('{{ $motovendor->id }}', '{{ Auth::id() }}', '{{ Request::ip() }}', 'vendor')"
                                        href="javascript:void(0)" data-item-id="1" data-toggle="tooltip"
                                        title="Submit to friend"><i class="fa fa-envelope nopadding"
                                                                    data-toggle="tooltip"></i></button>
                        </div>
                        <!-- /buttons -->

                        <!-- price -->
                        <div class="shop-item-price">
                            <h3 class="text-info nomargin">{{ $motovendor->title }}</h3>
                            <b class="badge badge-info size-11">{{ $paramsobj->ratingscore }}</b>
                            <div class="rating rating-{{ round($paramsobj->ratingscore) }} size-13 margin-top-10 width-100"></div>
                        </div>
                        <!-- /price -->

                        <hr/>

                        <div class="clearfix margin-bottom-20">
                            <div class="pull-right"><i class="fa fa-eye size-25 margin-right-10"></i>
                                <div class="counter nomargin pull-right">
                                <span id="car-stock-counter" class="counter-box" data-test="stock-counter"
                                      style="padding: 2px 3px 3px 4px">
                                                                        @for($i=0; $i < $countstr; $i++)
                                        <em class="number size-12">{{ $split[$i] }}</em>
                                    @endfor
                                </span>
                                </div>
                            </div>
                            <div class="pull-left">
                                <span class="weight-300 clearfix"><i
                                            class="fa fa-location-arrow margin-right-3"></i> {{$motovendor->regionname .' / '. $motovendor->locationname }}
                                    .</span>
                                @if($motovendor->address)<span class="clearfix">{{ $motovendor->address }}</span>@endif
                                @if($motovendor->vendorphone)<span class="clearfix"><i
                                            class="fa fa-phone margin-right-3"></i><a
                                            href="tel:{{ asset($motovendor->vendorphone) }}"> {{ $motovendor->vendorphone }}</a></span>@endif
                                @if($motovendor->vendoremail)<span class="clearfix"><i
                                            class="fa fa-envelope margin-right-3"></i><a
                                            href="mailto:{{ $motovendor->vendoremail }}">{{ str_replace('@',' AT ', $motovendor->vendoremail) }}</a></span>@endif
                                @if($motovendor->weburl)<span class="clearfix"><i class="fa fa-link margin-right-3"></i><a
                                            href="//{{ $motovendor->weburl }}"
                                            target="_blank">{{ $motovendor->weburl }}</a></span>@endif
                                @if($motovendor->skype)<span class="clearfix"><i
                                            class="fa fa-skype margin-right-3"></i> {{ $motovendor->skype }}</span>@endif
                                @if($motovendor->categoryname)
                                    <span class="clearfix"><i class="fa fa-industry margin-right-3"></i>
                                    @foreach ($motovendor->categoryname as $catitems)
                                            <a href="{{ @url('vendors/category/'.$catitems->id. '-' .$catitems->slug) }}">{{ $catitems->value }}</a>
                                            |
                                        @endforeach
                                    </span>
                                @endif
                            </div>
                        </div>


                        <!-- short description -->
                    {{--<p>{{ @str_limit($motovendor['description'], 300) }}</p>--}}
                    <!-- /short description -->


                        <hr/>

                        <!-- Share -->
                        <div class="pull-right">

                            <a href="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u={{ @request()->url() }}&amp;picture={{ array_first($paramsobj->vendorimage) }}', '_blank', 'width=500,height=300');void(0);"
                               class="social-icon social-icon-border social-facebook pull-left" data-toggle="tooltip"
                               data-placement="top" title="Facebook">
                                <i class="icon-facebook"></i>
                                <i class="icon-facebook"></i>
                            </a>

                            <a href="javascript:window.open('https://twitter.com/intent/tweet?url={{ @request()->url() }}', '_blank', 'width=500,height=300');void(0);"
                               class="social-icon social-icon-border social-twitter pull-left" data-toggle="tooltip"
                               data-placement="top" title="Twitter">
                                <i class="icon-twitter"></i>
                                <i class="icon-twitter"></i>
                            </a>

                            <a href="javascript:window.open('https://plus.google.com/share?url={{ @request()->url() }}', '_blank', 'width=500,height=300');void(0);"
                               class="social-icon social-icon-border social-gplus pull-left" data-toggle="tooltip"
                               data-placement="top" title="Google plus">
                                <i class="icon-gplus"></i>
                                <i class="icon-gplus"></i>
                            </a>

                            <a href="javascript:window.open('https://pinterest.com/pin/create/button/?url={{ @request()->url() }}&amp;media={{ array_first($paramsobj->vendorimage) }}&amp;description={{ $motovendor->title }}-{{ $motovendor->category }}', '_blank', 'width=500,height=300');void(0);"
                               class="social-icon social-icon-border social-linkedin pull-left" data-toggle="tooltip"
                               data-placement="top" title="Pinterest">
                                <i class="icon-pinterest"></i>
                                <i class="icon-pinterest"></i>
                            </a>

                        </div>
                        <!-- /Share -->

                    </div>
                    <!-- /ITEM DESC -->
                    <div class="col-md-12 nopadding">
                        <ul id="myTab" class="nav nav-tabs nav-top-border margin-top-1" role="tablist">
                            <li role="presentation" class="active"><a href="#description" role="tab" data-toggle="tab">Description</a>
                            </li>
                            {{--<li role="presentation"><a href="#specs" role="tab" data-toggle="tab">Спецификации</a></li>--}}
                            <li role="presentation"><a href="#reviews" role="tab" data-toggle="tab">Rating</a></li>
                        </ul>


                        <div class="tab-content padding-top-20">

                            <!-- DESCRIPTION -->
                            <div role="tabpanel" class="tab-pane fade in active" id="description">
                                <p>{{ $motovendor['description'] }}</p>
                            </div>

                            <!-- SPECIFICATIONS -->
                            <div role="tabpanel" class="tab-pane fade" id="specs">
                                <div class="table-responsive">
                                    {{--<div id="map" class="height-300"></div>--}}
                                </div>
                            </div>

                            <!-- RATING -->
                            <div role="tabpanel" class="tab-pane fade" id="reviews">
                            @if(!$rating->isEmpty())
                                <!-- RATING ITEM -->
                                    @foreach ($rating as $items)
                                        <div class="block margin-bottom-60">

                                    <span class="user-avatar"><!-- user-avatar -->
                                        <img class="pull-left media-object" src="{{ @asset('images/avatar2.jpg') }}"
                                             width="64" height="64" alt="">
                                    </span>

                                            <div class="media-body">
                                                <h4 class="media-heading size-14">
                                                    {{ $items->fromuser->name }} &ndash;
                                                    <span class="text-muted">{{ $items->created }}</span> &ndash;

                                                    <span class="size-14 text-muted"><!-- stars -->
                                                        @for($i=0; $i<$items->rating; $i++)
                                                            <i class="fa fa-star"></i>
                                                        @endfor
                                                        @for($ii=0; $ii<=4-$items->rating; $ii++)
                                                            <i class="fa fa-star-o"></i>
                                                        @endfor

                                         </span>
                                                </h4>

                                                <p>
                                                    {{ $items->message }}
                                                </p>

                                            </div>

                                        </div>
                                    @endforeach
                                <!-- /REVIEW ITEM -->
                                @endif
                                @if(auth()->id() != $motovendor->vendorusers->first()->user_id)
                                <!-- REVIEW FORM -->
                                    <h4 class="page-header margin-bottom-40">RATING ADDING</h4>
                                    <form id="formrating">

                                        <!-- Comment -->
                                        <div class="margin-bottom-30">
                                            <textarea name="message" id="textrating" class="form-control" rows="6"
                                                      placeholder="Comment" maxlength="600" required></textarea>
                                        </div>
                                        <!-- Stars -->
                                        <div class="product-star-vote clearfix">

                                            <label class="radio pull-left">
                                                <input type="radio" name="rating" value="1"/>
                                                <i></i> 1
                                            </label>

                                            <label class="radio pull-left">
                                                <input type="radio" name="rating" value="2"/>
                                                <i></i> 2
                                            </label>

                                            <label class="radio pull-left">
                                                <input type="radio" name="rating" value="3"/>
                                                <i></i> 3
                                            </label>

                                            <label class="radio pull-left">
                                                <input type="radio" name="rating" value="4"/>
                                                <i></i> 4
                                            </label>

                                            <label class="radio pull-left">
                                                <input type="radio" name="rating" value="5"/>
                                                <i></i> 5
                                            </label>

                                        </div>
                                        <label id="errorwarn" class="error text-red margin-bottom-10"></label>
                                        <!-- Send Button -->
                                        <input type="hidden" value="" name="touserid">
                                        <input type="hidden" value="{{ $motovendor->id }}" name="tovendorid">
                                        <button type="button" name="submit" id="submit" class="btn btn-primary"
                                                onclick="StoreUsersRating($(this).closest('form').attr('id'),'{{ Auth::id() }}')">
                                            <i class="fa fa-check"></i> Submit
                                        </button>

                                    </form>
                                    <div class="text-info weight-600" id="ifuserauth"><i class="fa fa-warning"></i>
                                    </div>
                                    <!-- /REVIEW FORM -->
                                @endif
                                @if(!$rating->isEmpty())
                                    <div class="col-sm-12"><a href="{{ url('ratings/vendor/'.$motovendor->id) }}"
                                                              class="btn btn-info pull-right">User ratings</a></div>
                                @else
                                    <div class="text-info weight-600" id="ifuserauth"><i class="fa fa-warning"></i> No
                                        rating added yet!
                                    </div>
                                @endif
                            </div>

                        </div>
                    </div>
                    <div class="col-md-12 margin-top-20">
                        <div id="map" class="height-300"></div>
                        <hr class="margin-bottom-20">
                        @if(!$vendoradds)
                            <a href="{{ url('listing/adsbyvendor/'.$motovendor->id) }}"
                               class="btn btn-xs btn-info pull-right">All dealer listings</a>
                        @else
                            <span class="btn btn-xs btn-info pull-right">There are no listings of this dealer yet!</span>
                        @endif
                    </div>
                    <div class="col-sm-12 divider divider-dotted"><!-- divider --></div>
                </div>


                <!-- RIGHT -->
                <div class="col-lg-3 col-md-3 col-sm-3">

                    <!-- CATEGORIES -->
                    @include('layouts.sidebar', ['hotlinks' => true, 'sidemenucats' => false])
                    @include('layouts.banners', ['banner' => '300x600x1'])
                    {{--        @include('layouts.sidebar', ['hotlinks' => false, 'sidemenucats' => true])--}}

                </div>
            </div>
        </div>
    </section>
    <!-- CATEGORIES -->
    @include('layouts.catsbox')
    <!-- /CATEGORIES -->
@endsection
@section('footer_scripts')
    <script type="text/javascript"
            src="//maps.google.com/maps/api/js?key={{env('GOOGLEMAPS_API')}}"></script>
    <script type="text/javascript">

        jQuery(document).ready(function () {

            var usersuth = '{{ Auth::id() }}';
            if (!usersuth) {
                $("#formrating").hide();
                $("#ifuserauth").append('To add rating you need signg up at WebMoto.us!');
            }


            loadScript(plugin_path + "gmaps.js", function () {
                GMaps.geocode({
//                    address: $('#address').val(),
                    address: ' {{$motovendor->regionname .','. $motovendor->locationname .','. $motovendor->address }}',
                    callback: function (results, status) {
                        if (status == 'OK') {
                            var latlng = results[0].geometry.location;
                            /*                                map.setCenter(latlng.lat(), latlng.lng());
                                                            map.addMarker({
                                                                lat: latlng.lat(),
                                                                lng: latlng.lng()
                                                            });*/
                            var map = new GMaps({
                                div: '#map',
                                lat: latlng.lat(),
                                lng: latlng.lng()
                            });

                            var marker = map.addMarker({
                                lat: latlng.lat(),
                                lng: latlng.lng(),
                                title: '{{ $motovendor->title }}'
                            });
                        } else {

                            $("#map").hide();

                        }
                    }
                });
                /**
                 @BASIC GOOGLE MAP
                 **/


            });
        });

        function PhoneShow(){

            $("#phone-show").show();
            $("#phone-hidden").hide();

        }

    </script>
@endsection