@extends('layouts.site')
@section('title')
{{ $blogs->title ?? 'default Title' }}
@endsection
@section('facebook_meta')
<meta name="keywords" content="{{ $blogs->keywords ?? 'default Title' }}"/>
<meta name="description" content="{{ $blogs->description ?? 'default Title' }}"/>
 <link rel="canonical" href="{{ route('site.blog-details',$blogs->url ?? 'default Title')}}" /> 
@endsection
@section('site')
<div role="main" class="main">
    <section
        class="page-header-modern custom-page-header bg-color-primary"data-bg-src="{{ asset('assets/img/demos/business-consulting-3/backgrounds/background-5.jpg.jpg') }}"
        style="background-size: cover; background-position: center;">
        <div class="container container-xl-custom py-2">
            <div class="row">
                <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                    <h1 class="font-weight-extra-bold text-12 appear-animation"
                        data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200"
                        style="color:white;">Blog Details</h1>
                </div>
                <div class="col-md-4 order-1 order-md-2 align-self-center">
                    <ul class="breadcrumb d-block text-md-end breadcrumb-light appear-animation"
                        data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
                        <li><a href="{{ route('home') }}">Home</a></li>
                        <li class="active">Blog Detail</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="section bg-color-light position-relative border-0 py-3 m-0">
        <div class="container container-xl-custom my-5">
            <div class="row">
                <div class="col-lg-9 appear-animation" data-appear-animation="fadeInUpShorter"
                    data-appear-animation-delay="700">

                    <article>
                        <div class="card border-0 border-radius-0 mb-5">
                            <div class="card-body p-0 z-index-1">
                                <div class="post-image pb-4">
                                <h1 class="font-weight-extra-bold text-10 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200" style="color:black;">{{ $blogs->blog_name ?? 'Default Title' }}</h1>
                                    <img class="card-img-top border-radius-0"
                                        src="{{ asset('storage/uploads/blog') . '/' . ($blogs->image ?? 'default-image.jpg') }}"
                                        alt="Card Image">
                                </div>
                                <div class="card-body p-0">
                                    <p>{!! $blogs->sub_blog_description ?? 'Default Title' !!}</p>
                                    <p>{!! $blogs->blog_description ?? 'Default Title' !!}</p>
                                    <div class="addthis_inline_share_toolbox"></div>
                                    <div id="comments" class="post-block post-comments">
                                        <div class="card bg-primary border-0 border-radius-0 custom-box-shadow-1 mb-5">
                                            <div class="card-body p-4 my-3">
                                                <h3 class="text-transform-none text-color-light font-weight-bold mb-5">Send Us a Message
                                                </h3>
                                                <form class="contact-form custom-form-style-1 form-errors-light"
                                                    action="{{ route('contact.store') }}" method="POST">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="form-group col mb-3">
                                                            <input type="text" value=""
                                                                data-msg-required="Please enter your name." maxlength="100"
                                                                class="form-control" name="contact_name" required placeholder="Name *">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col mb-3">
                                                            <input type="email" value=""
                                                                data-msg-required="Please enter your email address."
                                                                data-msg-email="Please enter a valid email address." maxlength="100"
                                                                class="form-control" name="contact_email" required
                                                                placeholder="E-mail *">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col mb-3">
                                                            <input type="text" value=""
                                                                data-msg-required="Please enter your Subject." maxlength="100"
                                                                class="form-control" name="contact_subject" required
                                                                placeholder="Subject *">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="form-group col mb-4">
                                                            <textarea maxlength="5000" data-msg-required="Please enter your message." rows="9" class="form-control"
                                                                name="contact_message" required placeholder="Message *"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="form-group ">
                                            <div class="g-recaptcha" data-sitekey="6LdyM1IpAAAAAHopvArp6XKKvWZ_mncErlobSins" data-size="normal" id="g-recaptcha-element">
                                    </div>
                                  </div>    
                                                    <!--<div class="row">-->
                                                        <div class="form-group col text-lg-end mb-0">
                                                            <button type="submit"
                                                                class="btn btn-primary custom-btn-style-1 font-weight-semibold btn-px-4 btn-py-2 text-3-5"
                                                                data-loading-text="Loading..." data-cursor-effect-hover="plus"
                                                                data-cursor-effect-hover-color="light" style="background-color:black;">
                                                                <span>Send Message</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        </form>
                                    </div>

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

                </div>
                <div class="col-lg-3 pt-4 pt-lg-0 appear-animation" data-appear-animation="fadeInUpShorter"
                    data-appear-animation-delay="900">
                    <aside class="sidebar">
                        <div class="card bg-primary border-0 border-radius-0 custom-box-shadow-1 mb-5">
                            <div class="card-body text-center py-5">
                                <h3 class="alternative-font-4 text-color-light font-weight-semibold text-4 mb-1">ARE YOU
                                    LOOKING FOR</h3>
                                <h2
                                    class="text-transform-none text-color-light font-weight-bold text-10 negative-ls-1 mb-2">
                                    Devweb Technology Contact?</h2>
                                <p class="text-color-light text-3-5 opacity-8 mb-5">ARE YOU
                                    LOOKING FOR RIGHT NOW</p>
                                <ul class="list list-unstyled mb-5">
                                    <li class="mb-lg-2 mb-xl-3">
                                        <i class="icons icon-phone text-color-primary text-5-5 position-relative top-2 me-2"
                                            style="background-color:white;"></i>
                                        <a href="tel:+91 7016892290"
                                            class="text-color-light font-weight-bold text-decoration-none text-5">(+91)
                                            7016892290</a>
                                    </li>
                                    <li class="mb-3">
                                        <i class="icons icon-envelope text-color-primary text-6 position-relative top-6 me-2"
                                            style="background-color:white;"></i>
                                        <a href="mailto:info@devwebtechnology.com"
                                            class="text-color-light text-decoration-none text-4 text-lg-3 text-xl-4"><span
                                                class="__cf_email__"
                                                data-cfemail="2c5c435e58436c5c435e58435844494149024f4341">info@devwebtechnology.com</span></a>
                                    </li>
                                    <li class="text-color-light text-4 text-lg-3 text-xl-4 mb-0">
                                        <i
                                            class="icons icon-calendar text-color-primary text-5 position-relative top-3 me-2"style="background-color:white;"></i>
                                        Mon - Sat 9am - 6pm
                                    </li>
                                </ul>
                                <a href="{{ route('site.contact-us') }}" data-hash data-hash-offset="0"
                                    data-hash-offset-lg="100"
                                    class="btn btn-primary font-weight-bold text-2 text-lg-1 text-xl-2 btn-px-5 btn-py-3"
                                    style="background-color:black;">GET STARTED</a>
                            </div>
                        </div>
                        <div class="py-1 clearfix">
                            <hr class="my-2">
                        </div>
                        <div class="px-3 mt-6">
                </div>
                    </aside>
                </div>
            </div>
        </div>
    </section>

</div>
@endsection