@extends('frontend.template')



@section('styles')
	
<style type="text/css">
body .sticky-shares a {
    display: block;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: #fbfbfd;
    color: #2a2a2a;
    border: 1px solid #2a2a2a;
    -webkit-transition: .2s all;
    transition: .2s all;
}

body input#inquiry_form_email {
    margin-left: 0px;
    width: 100%;
}
body section.blogs-view-wrapper p {
    color: #000000d1;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 0px;
}
section.blogs-view-wrapper p {
    font-size: 18px !important;
    color: #85838b !important;
    text-transform: capitalize;
}
body section.blogs-view-wrapper h2 {
    color: #2a2a2a !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 22px;
    /* padding-bottom: 80px; */
    padding-left: 14px;
}
body p.descritopn-blogs-main {
    font-size: 12px !important;
    padding-left: 10px;
    margin-top: 0;
    line-height: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 32px;
}
body .sticky-shares img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    filter: brightness(0);
}
/* blogs comments css start */

.approved-msg h4 {
    font-size: 20px;
    display: inline-block;
    border-bottom: solid 2px;
}

.approved-msg h5 {
    color: #878282;
}

.approved-msg h6 {
    font-size: 16px;
    line-height: 21px;
    color: #000000c7;
}

section.leavereply {
    margin-bottom: 20px;
}

section.leavereply h2.reply {
    color: #090605;
    font-weight: 700;
    font-size: 22px;
}

/* blogs comments css end */

section.blogs-view-wrapper {
    padding-top: 70px !important;
    padding-bottom: 40px;
    text-align: left !important;
}

.main-blogs:before {
    display: none;
}
    ul.cus-social p {
    float: right;
    display: inline-block;
    color: #fff;
    font-weight: 500;
    margin-top: 8px;
    font-size: 15px;
    padding-left: 3px;
}
.main-blogs-1:before {
   display:none !important;
    position: absolute;
    content: "";
    background: url(/images/before.png);
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    left: 50px;
    top: -19px;
}
body ul.cus-social li a {
    display: block;
    width: 36px;
    text-align: center;
    height: 36px;
    line-height: 34px;
    float: left;
   
}

@media only screen and (max-width: 992px){
body ul.cus-social li a {
    display: block;
    width: 27px;
    text-align: center;
    height: 36px;
    /* line-height: 171px !IMPORTANT; */
    float: left;
    padding-right: 3px;
   
}
    
    body .main-blogs {
    margin-top: 10px;  
    height: 100px;}
}


span.mast {
    display: inline-block;
    padding: 10px 10px 10px 0px;
    font-size: 18px;
    font-weight: 600;
        color: #858383;
}

p.time {
    display: inline-block;
    font-size: 18px !important;
    font-weight: 600;
    color: #000 !important;
}
.main-blogs-1 img {
    max-height: 100%;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}

.main-blogs-2 {
    text-align: left;
}
div#st-1 {
    text-align: left;
}

.main-blogs {
    height: 100px;
    margin-top: 0;
    overflow: visible;
    
    margin-bottom: 40px;
}

.main-blogs-1 {
    width: 50%;
    float: left;
    position: relative;
    height: 100px;
    border: 1px solid #cccccc57;
    border-radius: unset !important;
}

body .main-blogs-2 {
    padding: 0;
    width: 50%;
    height: unset;
    margin-bottom: 0px;
    background-color: unset;
    float: left;
    position:relative;
}

body .main-blogs-2 h4 {
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 0 0px 10px;
}

h2.popularblog 
    font-size: 22px !important;
}

/* blogs view general css start */


body .innercaption h2 {
    max-width: 80%;
    font-size: 32px !important;
    line-height: 34px !important;
}


section.blogs-view-wrapper h1 {
    font-size: 38px;
    color: #000 !important;
    text-transform: capitalize;
    padding-top: 0;

}


section.blogs-view-wrapper h2 {
   font-size: 22px;
    color: #c90916  !important;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 0px;

}

section.blogs-view-wrapper h3 {
    font-size: 26px;
    color: #000 !important;
    text-transform: capitalize;

}

section.blogs-view-wrapper h4 {
    font-size: 30px;
    color: #c90916 !important;
    font-weight: 700;

}

section.blogs-view-wrapper h5 {
    font-size: 18px;
    color: #000 !important;
    text-transform: capitalize;

}

section.blogs-view-wrapper h6 {
    font-size: 14px;
    color: #000 !important;
    text-transform: capitalize;

}


section.blogs-view-wrapper p {
    font-size: 18px;
    color: #85838b !important;
    text-transform: capitalize;

}


@media only screen and (min-width: 320px) and (max-width: 999px) {
    
    
body .innercaption h2 {
    max-width: unset;
    font-size: 12px !important;
    line-height: 14px !important;
    color: #fff !important;
    display:none;
}

    body .post-shares.sticky-shares {
    position: absolute;
    /* left: 0; */
    top: -50px !important;
    margin-left: 0px !important;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}
body .sticky-shares a {
    display: inline-block;
 
}

body .innercaption {
    top: 15% !important;
}
section.blogs-view-wrapper h1 {
    font-size: 25px;
    color: #000 !important;
    text-transform: capitalize;

}

section.blogs-view-wrapper h2 {
    font-size: 23px;
    color: #000 !important;
    text-transform: capitalize;

}

section.blogs-view-wrapper h3 {
    font-size: 21px;
    color: #000 !important;
    text-transform: capitalize;

}

section.blogs-view-wrapper h4 {
    font-size: 18px;
    color: #000 !important;
    text-transform: capitalize;

}

section.blogs-view-wrapper h5 {
    font-size: 16px;
    color: #000 !important;
    text-transform: capitalize;

}

section.blogs-view-wrapper h6 {
    font-size: 14px;
    color: #000 !important;
    text-transform: capitalize;

}

    
}



section.blogs-view-wrapper img {
    float: unset !important;
   
    width: unset !important;
}


section.blogs-view-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
    
    text-align: center;
}

.blog-box-shad{
    background-color: #fff;
    /* border:solid 1px #ccc; */
     padding:20px 15px 30px 15px; 
    margin-top:30px;
    box-shadow: 0 0 10px #ccc;
    transform: unset !important;
    border: unset;
}


.blog-box-shad:hover {
    transform: unset !important;
    box-shadow: 0 0 10px #ccc !important;
    border: unset;
}

/* blogs view general css end */




    .blog-list .blog-list-heading {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .blog-list {
        margin-bottom: 20px;
    }
    .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
        background: #cf2126;
        border: 1px solid #cf2126;
    }    
    
    
    
    

h4.b-1 {
    font-size: 16px !important;
    font-weight: 600;
    margin-top: 0;
}

p.descritopn-blogs-main {
    font-size: 12px !important;
    padding-left: 10px;
    margin-top: 0;
    line-height: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}




</style>



<script type="application/ld+json">

{

"@context": "https://schema.org/",

"@type": "Article",

"mainEntityOfPage": {

"@type": "WebPage",

"@id": "{{config('app.url')}}blogs/{{$blog->slug}}"

},

"headline": "{{$blog->title}}",

"description": "{!! $blog->schema_description !!}",

"image": {

"@type": "ImageObject",

"url": "{{asset('uploads/images/blogs/'.$blog->featured_image)}}"

},

"author": {

"@type": "Person",

"name": "admin",

"url": "{{asset('uploads/images/blogs/'.$blog->featured_image)}}"

 
},

"publisher": {

"@type": "Organization",

"name": "{{$basic_details->company_name}}",

"logo": {

"@type": "ImageObject",

"url": "{{config('app.url')}}uploads/images/logo/{{$basic_details->logo}}"

}

},

"datePublished": "{{$blog->created_at}}",

"dateModified": "{{$blog->updated_at}}"

}

</script>


@endsection



@section('content')	

<style>
  
</style>

<div class="bannermain innerbanner">
		<div class="banner_overlay"></div>
		<img src="/images/blog.jpg" alt="{{$basic_details->name}}">
		<div class="innercaption">
			<div class="container">
				<h2>Blog</h2>
			</div>
		</div>
	</div>
	
	
<section class="blogs-view-wrapper">	
	<div class="container">
	    <div class="row">
	        <div class="col-xs-12 col-md-9">
	            
	            <style>
	                
	                .sticky-shares a {
    display: block;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: #fbfbfd;
    color: #fc5e5a;
    border: 1px solid #fc5e5a;
    -webkit-transition: .2s all;
    transition: .2s all;
}
                    
                    .sticky-shares a:hover {
                        -webkit-transform: scale(1.3);
                        -ms-transform: scale(1.3);
                        transform: scale(1.3);
                    }    
                    
                    .sticky-container {
                        padding-left: 50px;
                    }
                    
                    .post-shares.sticky-shares {
                            position: absolute;
                            /* left: 0; */
                            /*top: 60px !important;*/
                            margin-left: -50px !important;
                    }
                    .sticky-shares > a {
                        position: relative;
                    }
                    
                    .sticky-shares img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        filter: hue-rotate(165deg);
}


                    }
                    
                    .post-shares.sticky-shares.affix {
                            position: fixed;
                            /* left: unset; */
                            top: 20px !important;
                    }
	                
	            </style>
	            
	            
	            
	            <div class="blog-section blog-veiw-section">
	                <div class="most-img">
	                <img src="{{asset('uploads/images/blogs/'.$blog->featured_image)}}" title="{{$blog->created_at}}" class="img-responsive">
	                </div>
	                <span class="mast">By The Most:</span><p class="time">{{$blog->updated_at->format('M j,Y')}}</p>
	                <h1>{{$blog->title}}</h1>
	                
	                {!! $blog->content !!}
	                
	                
	            </div>
	            
	            
	            
	        </div>
	        

	        
	        
	        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 p-b">
	            <h2 class="popularblog">Popular Blogs</h2>
	            
	            @foreach($popular_blog as $key=>$value)
                         
                         <div class="main-blogs  ">
                             <a href="{{route('blogs.view',$value->slug)}}">
                             <div class="main-blogs-1">
                                 <a href="{{route('blogs.view',$value->slug)}}" >
                                  <img class="img-responsive" src="{{asset('uploads/images/blogs/'.$value->featured_image)}}" title="{{$value->title}}">
                                 </a>
                             </div>
                             
                            
                             
                             <div class="main-blogs-2">
                                 <a href="{{route('blogs.view',$value->slug)}}" >
                                 <h4 class="b-1">{{$value->title}}</h4>
                                   <p class="descritopn-blogs-main">{{strip_tags($value->content)}}</p>
                                   </a>
                              </div>
                               </a>
                         
                         </div>
                         
                       @endforeach
            
            
            
                <div class="product-contact">
			          
				    
				     <h2 class="title">Get In Touch</h2>
				
					<form class="form_submit" id='form21' method="post" action="/save_contact/2" autocomplete="off" >
			       
			       <div class="col-md-12">
				                    
				                    <div id="form_success" class="form_success"></div>
				                    
				                    <div id="err_msg_1" class="err_msg_1"></div>
				                    
				    </div>
			       
	                 <div class="col-md-12">
					        <div role="form" class="wpcf7" id="wpcf7-f264-o2" lang="en-US" dir="ltr">
						
						
						
		      				{{csrf_field()}}
							
			                <div class="form-group">
			                    
			                    <input type="text" class="form-control" maxlength="150" id='inquiry_form_name' name="inquiry_form_name" placeholder="Your Name" required>
			                </div>

			                <div class="form-group">
			                    <input type="email" class="form-control" maxlength="100" id='inquiry_form_email' name="inquiry_form_email" placeholder="Email Address" required>
			                </div>

			                <input type="hidden" name="inquiry_form_subject" value="Inquiry">
                            <!-- Test --> 
			                <div class="form-group">
			                    <input type="text" class="form-control" maxlength="50" id='inquiry_form_phone' name="inquiry_form_phone" placeholder="Contact Number" required>
			                </div>
		             </div>        
			 </div>
			  <div class="col-md-12">
			                <div class="form-group full">
			                    <textarea id='inquiry_form_message' name="inquiry_form_message" class="form-control" maxlength="1500" rows="5" placeholder="Message" required></textarea>
			                </div>
              </div>
				            <div class="form-row">
				                <div class="col-md-6 col-sm-12 col-xs-6">
				                    <input class="form-control" type="text" id="captcha" name="captcha" placeholder="Captcha" required="">
				                </div>
				                <div class="col-md-6 col-sm-12 col-xs-6 cap_img" >
				                    {!! $captcha_img !!}
				                </div>
				                <div class="col-md-12 col-sm-12 col-xs-6 cap_codee">
				                     <button id='inquiry_form_btn' class="btn btn-primary inquiry_form_btn" type="submit" title="Submit">Send Message</button>
				                     
				                </div>
				                
				                
				            </div>

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

	    
	    <div class="sharethis-inline-share-buttons"></div>
	</div>
</section>

<section class="blogs-comments">
    
    <div class="container">
        
        <div class="row">
            
            <div class="col-md-8 col-xs-12">
                
                @foreach($blog_message as $key => $b_value)
                
                <div class="approved-msg">
                    
                   <h4> {{$b_value->bname}} </h4>
                   
                   <h5>{{$b_value->created_at->format('M j,Y')}}</h5>
                   
                   <h6> {{strip_tags($b_value->bmessage)}} </h6>
                    
                </div>
                
                
                @endforeach
                
                
            </div>
            
        </div>
        
    </div>
    
</section>
	    
<section class="leavereply">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                <h2 class="reply">Leave Your Comments</h2>
                <div class="leave-message">
                    <form id="save_comments" class="myform" method="post" action="{{route('save_comments')}}/" autocomplete="off" >
    				    <div class="form_message_container"></div>
    				    <div class="form_error_container"></div>
    				    
    					{{csrf_field()}}
    
    					<div class="row">
    						<div class="col-md-6 col-xs-12 form-group">
    							<input type="text" class="form-control" maxlength="150" id='inquiry_form_name' name="inquiry_form_name" placeholder="Your Name" required="">
    						</div>
    						<div class="col-md-6 col-xs-12 form-group">
    							<input type="email" class="form-control" maxlength="100" id='inquiry_form_email' name="inquiry_form_email" placeholder="Email Address">
    						</div>
    					</div>
    					
    					<input type="hidden" name="lp_page" value="yes">
    					<!--<input type="hidden" name="ref_link" value="{{request()->headers->get('referer')}}">-->
                        
    					<input type="hidden" name="inquiry_form_subject" value="{{$blog->title}} Inquiry ">
    					
    					<input type="hidden" id='inquiry_form_product_id' name="inquiry_form_product_id" value="{{$blog->id}}">
    
    					<div class="form-group full">
    						<textarea id='inquiry_form_message' name="inquiry_form_message" class="form-control" maxlength="1500" rows="10" placeholder="Message" ></textarea>
    					</div>
    						<button class="btn btn-primary inquiry_form_btn herrsav-btn herrsav-btn2 form_submit_button" type="submit" title="Submit">Submit</button>
					</form>
	            </div>
                
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            
        </div>
    </div>
   </div>
</section>
@endsection


@section('scripts')


<script>

       
    $('#save_comments').submit(function (e) {
        e.preventDefault();
        formInstance = $(this);
        var prevBtnText = formInstance.find('.form_submit_button').html();
        formInstance.find('.form_submit_button').prop('disabled',true).html('Loading...');


        var data = formInstance.serialize();

        var url = formInstance.attr('action');

        $.ajax({
            type: 'post',
            url: url,
            data: data,
            success: function(data){
                formInstance.trigger('reset');
                formInstance.find('.form_submit_button').prop('disabled',false)
                formInstance.find('.form_submit_button').html(prevBtnText);
                formInstance.find('.form_message_container').html ("<div class='alert alert-success alert-dismissable'>Your message has been sent successfully. It will be published shortly after review.</div>");
                formInstance.find('.form_error_container').html('');
                // setTimeout(function(){window.location = redirectionUrl;},2000);
            },
            error: function(msg){
                formInstance.find('.form_error_container').html('');
				var err = JSON.parse(msg.responseText);
				$.each(err.errors, function(key, val){
				    if(typeof(val[0]) !== 'undefined' && val[0] != val[0].replace('Entered_','') ){
				        var str_arr = val[0].split("Entered_");
				        formInstance.find('.form_error_container').append("<div>"+str_arr[0]+"</div>");
                        formInstance.find('.form_captcha').html(str_arr[1]);
				    }
                    else
                    {
						formInstance.find('.form_error_container').append("<div>"+val+"</div>");
				    }
				});

                formInstance.find('.form_error_container').removeClass();
				formInstance.find('.form_error_container').addClass('alert alert-danger');
                formInstance.find('.form_submit_button').prop('disabled',false).html(prevBtnText);
            }
        });
    
       return false;
    });
       
</script>


<script>
$(document).ready(function(){
    var headerHeight = $('sections').outerHeight() + 431;
    var footerHeight = $('footer').outerHeight() + 60;
    $('.sticky-shares').affix({
      offset: {
        top: headerHeight,
        bottom: footerHeight
      }
    });    
});

</script>

<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=5ff587d074e0a600127b0c0e&product=inline-share-buttons" async="async"></script>



@endsection