@extends('app')

@section('head_title', $vendor->company_name.' | '.getcong('site_name') )

@section('head_url', Request::url())

@section('content')
    <!-- page-header -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @if($gallery_images)
        <div class="list-single-carousel">
            <div class="owl-carousel owl-theme owl-second">
                @foreach($gallery_images as $i => $gallery_img)
                    @if(!is_null($gallery_img->image))
                    <div class="item gallery-block">
                        <div class="gallery-img">
                            <img src="{{ URL::asset('public/upload/alliedServices/vendors_thumnails/'.$gallery_img->image) }}" class="img-responsive">
                        </div>
                        <a href="{{ URL::asset('public/upload/alliedServices/vendors/'.$gallery_img->image)  }}"><div class="overlay-bg"></div></a>
                    </div>
                    @else
                        <div class="item gallery-block">
                            <div class="gallery-img">
                                {!! '<iframe  height="280px;"  src="'.$gallery_img->video.'" frameborder="0" allow="accelerometer;
                                   autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'!!}
                            </div>
                        </div>
                    @endif

                @endforeach

            </div>
        </div>
    @endif


    <div class="single-listing-item-block">
        <div class="container">
            <div class="row">
                <div class="col-md-9 col-sm-8">
                    <h1 class="single-listing-heading item_title">{{$vendor->company_name}}</h1>
                    <p class="vendor-address"><i class="fa fa-map-marker"></i> {{$vendor->address . ', ' . $vendor->city_details->city_name . ',' . $vendor->state_details->name . ',' . $vendor->country_details->country_name}}&nbsp;  </p>
                    <div class="rating-box vendor-meta-box">

                    </div>

                </div>

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

    <div class="new-listing-description-block">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <ul class="new-listing-nav-tabs nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item active">
                            <a class="nav-link" id="pills-general-info-tab" data-toggle="pill" href="#pills-general-info" role="tab" aria-controls="pills-general-info" aria-selected="true">General Information</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade active in" id="pills-general-info" role="tabpanel" aria-labelledby="pills-general-info-tab">

                            <div class="bg-white1 shadow-light radius">
                                <div class="title-bar">
                                    About {{$vendor->company_name}}
                                </div>
                                <div class="about-body border-t">
                                    <div class="info padding-h-20 padding-v-20">
                                                                            </div>
                                </div>

                            </div>
                        </div>

                   </div>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade active in" id="pills-general-info" role="tabpanel" aria-labelledby="pills-general-info-tab">

                            <div class="bg-white1 shadow-light radius">
                                <div class="title-bar">
                                   Contact Us
                                </div>
                                <div class="about-body border-t">
                                    <div class="info padding-h-20 padding-v-20">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="well-box">
                                                    {!! Form::open(array('url' => 'allied_services/contact_us','class'=>'','id'=>'contact_form','role'=>'form')) !!}

                                                    <div class="message">

                                                        @if (count($errors) > 0)
                                                            <div class="alert alert-danger">

                                                                <ul style="list-style: none;">
                                                                    @foreach ($errors->all() as $error)
                                                                        <li>{{ $error }}</li>
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        @endif

                                                    </div>
                                                    @if(Session::has('flash_message'))

                                                        <div class="alert alert-success fade in">

                                                            {{ Session::get('flash_message') }}
                                                        </div>


                                                    @endif
                                                    @if(Session::has('error_message'))

                                                        <div class="alert alert-danger fade in">

                                                            {{ Session::get('error_message') }}
                                                        </div>


                                                    @endif

                                                    <div class="form-group">
                                                        <label class="control-label" for="first">Name <span class="required">*</span></label>
                                                        <input id="name" name="name" type="text" placeholder="Name" required class="form-control input-md" >
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="control-label" for="email">Phone No. <span class="required">*</span></label>
                                                        <input id="phone_no" name="phone_no" type="number" placeholder="Phone Number" pattern=".{9,15}"   required title="10 minimum numbers required"  class="form-control input-md" >
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="control-label" for="email">Email <span class="required">*</span></label>
                                                        <input id="email" name="email" type="text" required placeholder="Email" class="form-control input-md" >
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="  control-label" for="message">Message(if any)</label>
                                                        <textarea class="form-control" rows="6" id="message" name="message" placeholder="Message"></textarea>
                                                        <div class="textarea-resize"></div>
                                                    </div>
                                                    <input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">
                                                    <div class="g-recaptcha" data-sitekey="6LfNTKYUAAAAAMclqV9M7gXjl7QAwLp5ww8KLvgA"></div>
                                                    <span id='errorContainer'></span>
                                                    <div class="form-group">
                                                        <button id="submit" name="submit" class="btn tp-btn-default tp-btn-lg">Send</button>
                                                    </div>
                                                    {!! Form::close() !!}
                                                </div>
                                            </div>

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

                            </div>
                        </div>

                    </div>




                </div>
                <div class="col-md-4">



                    <div class="bg-white1 shadow-light radius">
                        <div class="title-bar">
                            Contact Info
                        </div>
                        <div class="about-body border-t">
                            <div class="info padding-h-10 padding-v-20">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item"><span class="mr-2 text-default"><i class="fa fa-fw fa-map-marker"></i></span>{{$vendor->address . ', ' . $vendor->city_details->city_name . ',' . $vendor->state_details->name . ',' . $vendor->country_details->country_name.'- '.$vendor->pincode }}</li>
                                    <li class="list-group-item"><span class="mr-2  text-default"><i class="fa fa-fw fa-phone"></i></span>+{{ \App\Countries::getCountryInfo($vendor->country)->phonecode }} {{$vendor->number}}</li>
                                    <li class="list-group-item"><span class="mr-2 text-default"><i class="fa fa-fw fa-envelope"></i></span>{{!empty($vendor->email_id)?$vendor->email_id:'Not provided'}}</li>
                                    <li class="list-group-item"><span class="mr-2 text-default"><i class="fa fa-fw fa-globe"></i></span>{{!empty($vendor->website)?$vendor->website:'Not provided'}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="mb30">
                        <h4 class="widget-title">Share this </h4>
                        <div class="sidebarsocial-icons">
                            <a href="#" class="icon-square-outline facebook-outline"><i class="fa fa-facebook"></i></a>
                            <a href="#" class="icon-square-outline twitter-outline"><i class="fa fa-twitter"></i> </a>
                            <a href="#" class="icon-square-outline googleplus-outline"><i class="fa fa-google-plus"></i></a>
                            <a href="#" class="icon-square-outline instagram-outline"><i class="fa fa-instagram"></i></a>
                            <a href="#" class="icon-square-outline linkedin-outline"><i class="fa fa-linkedin"></i></a>
                            <a href="#" class="icon-square-outline pinterest-outline"><i class="fa fa-pinterest"></i></a>
                        </div>
                    </div>


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


    <script>
        grecaptcha.ready(function() {
            // do request for recaptcha token
            // response is promise with passed token
            grecaptcha.execute('6LdrQ6YUAAAAABf_WTvnJcBsvqcfwXbkdlHZD-9P', {action:'validate_captcha'})
                .then(function(token) {
                    // add token value to form
                    document.getElementById('g-recaptcha-response').value = token;
                });
        });
        function recaptchaCallback() {
            document.getElementById('myField').value = 'nonEmpty';
        }
    </script>

@endsection