@extends('frontend.layouts.layout')
@section('blog-active', 'active')
@section('container')

@section('seo')
    <title>{{$blog->meta_title}}</title>
    <meta name="keywords" content="{{$blog->meta_keywords}}">
    <meta name="description" content="{{$blog->meta_descr}}">
@endsection

        <section class="py-5 breadcrumb-section" style="background-image: url({{asset('frontend/img/Abstract\ Fluid\ Shapes\ 1.png')}});background-size: 100% 100%;">
            <div class="container py-md-5">
                <h1 class="text-white text-center fw-bold my-md-5 mb-0">BLOG DETAILS</h1>
            </div>
        </section>

        <section class="py-5" style="background: url({{asset('frontend/img/about_us_bg\ 5.png')}});">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-md-8">
                        {{-- <p><span>Category:&nbsp;&nbsp;<a class="text-primary blog-cat-link" href="/blogs/category/{{$blog->name}}">{{$blog->name}}</a></span></p> --}}
                        <h1 class="h4 text-center px-md-5 lh-base">{{$blog->title}}</h1>
                        <div class="d-flex align-items-center my-4 justify-content-center flex-wrap column-gap-5 row-gap-2">
                            <div>
                                <svg class="me-1" width="21" height="19" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0.90625 8.31847H23.3987V22.9999H0.90625V8.31847ZM22.3763 9.34085H1.92862V21.9775H22.3763V9.34085ZM0.90625 2.47044H23.3987V9.35109H0.90625V2.47044ZM22.3763 3.49282H1.92862V8.32869H22.3763V3.49282ZM6.8054 5.90563H5.78303V0.0473633H6.8054V5.90563ZM12.6637 5.90563H11.6413V0.0473633H12.6637L12.6637 5.90563ZM18.5219 5.90563H17.4995V0.0473633H18.5219L18.5219 5.90563ZM12.6637 18.5934H11.6413V10.7824H12.6637L12.6637 18.5934ZM10.4277 20.0248L9.97171 19.1046L11.9245 18.1334L12.3794 19.0535L10.4277 20.0248ZM13.8772 20.0248L11.9244 19.0515L12.3794 18.1313L14.3332 19.1046L13.8772 20.0248ZM8.47598 16.1264L8.01895 15.2124L11.9275 13.2596L12.3846 14.1736L8.47598 16.1264ZM15.833 16.1264L11.9235 14.1736L12.3815 13.2596L16.287 15.2124L15.833 16.1264Z" fill="black"/>
                                </svg>
                                <span class="text-black">{{ \Carbon\Carbon::parse($blog->created_at)->format('M d, Y')}}</span>
                            </div>
                            <div>
                                <svg class="me-1" width="28" height="16" viewBox="0 0 28 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.816 0.555664H14.4889C19.9444 0.584173 24.7261 3.44204 27.4447 7.73567L27.4821 7.79882L27.791 8.27782L27.4821 8.75677C24.7261 13.1136 19.9444 15.9714 14.4931 15.9999L14.4889 15.9999H14.1178C11.3428 15.9999 8.73252 15.2944 6.45666 14.053L6.54058 14.0948C4.18895 12.7979 2.26292 10.9941 0.86018 8.82081L0.82293 8.75922L0.513933 8.28019L0.822877 7.80119C3.57827 3.44346 8.36013 0.584711 13.8117 0.555664H13.816ZM14.1525 2.35177H13.816C9.19711 2.37643 5.12622 4.70062 2.68705 8.23694L2.65731 8.28256C5.21153 11.8864 9.36609 14.21 14.0634 14.21C14.0947 14.21 14.126 14.2099 14.1573 14.2097L14.1524 14.2098H14.4889C19.1073 14.1862 23.1781 11.8633 25.6179 8.32809L25.6476 8.28258C23.1791 4.70078 19.1087 2.37667 14.494 2.35177H14.1741H14.1525ZM14.1524 14.2098C17.426 14.2098 20.0797 11.5561 20.0797 8.28256C20.0797 5.00905 17.426 2.35535 14.1525 2.35535C10.879 2.35535 8.22528 5.00908 8.22528 8.28256C8.22528 11.5561 10.879 14.2098 14.1524 14.2098ZM14.1525 5.10943C15.9049 5.10943 17.3256 6.5301 17.3256 8.28258C17.3256 10.0351 15.905 11.4558 14.1525 11.4558C12.4 11.4558 10.9793 10.035 10.9793 8.28256C10.9793 6.53007 12.4 5.10943 14.1525 5.10943ZM14.1525 9.65958C14.913 9.65958 15.5295 9.04307 15.5295 8.28256C15.5295 7.52204 14.913 6.90553 14.1525 6.90553C13.392 6.90553 12.7754 7.52204 12.7754 8.28256C12.7754 9.04307 13.392 9.65958 14.1525 9.65958Z" fill="black"/>
                                </svg>
                                <span class="text-black">{{$blog->views}} Views</span>
                            </div>
                            {{-- <div>
                                <svg class="me-1" width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.84347 0.687012C14.9004 0.687012 18.9999 4.78649 18.9999 9.84347C18.9999 14.9004 14.9004 18.9999 9.84347 18.9999C4.78649 18.9999 0.687012 14.9004 0.687012 9.84347C0.687012 4.78649 4.78649 0.687012 9.84347 0.687012ZM9.84347 17.4075C14.021 17.4075 17.4075 14.021 17.4075 9.84347C17.4075 5.66596 14.021 2.27943 9.84347 2.27943C5.66598 2.27943 2.27943 5.66596 2.27943 9.84347C2.2844 14.019 5.66796 17.4025 9.84298 17.4075H9.84345L9.84347 17.4075ZM9.84347 8.29086C10.701 8.29086 11.3961 8.986 11.3961 9.84347C11.3961 10.7009 10.7009 11.3961 9.84347 11.3961C8.98598 11.3961 8.29086 10.7009 8.29086 9.84347C8.29175 8.98634 8.98635 8.29175 9.8434 8.29086H9.84347ZM13.0785 14.2044L9.04725 10.1731V3.7604H10.6397V9.51382L14.2043 13.0785L13.0785 14.2044Z" fill="black"/>
                                </svg>
                                <span class="text-black">7 Min Read</span>
                            </div> --}}
                        </div>
                        <div class="d-flex align-items-center my-4 justify-content-center flex-wrap column-gap-3 row-gap-2">
                            <a class="btn text-white" href="https://www.facebook.com/sharer/sharer.php?u={{url()->current()}}" target="_blank" style="background-color: #3d5b95;" title="Share on Facebook">
                                <i class="fa-brands fa-facebook-f me-2"></i>
                                Facebook
                            </a>
                            <a class="btn text-white" href="https://twitter.com/share?url={{url()->current()}}" target="_blank" style="background-color: #24aadd;" title="Share on Twitter">
                                <i class="fa-brands fa-twitter me-2"></i>
                                Twitter
                            </a>
                            <a class="btn text-white" href="https://www.linkedin.com/shareArticle?mini=true&url={{url()->current()}}&title={{$blog->title}}&source=cheapsmsbazaar.com" style="background-color: #0077b5;" target="_blank" title="Share on Linkedin">
                                <i class="fa-brands fa-linkedin me-2"></i>
                                Linkedin
                            </a>
                        </div>
                        <img class="w-100 rounded-3 mb-5" src="{{asset('uploads/blogs/'.$blog->image)}}" alt="">
                        <div class="accordion mb-5" id="accordionExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Table of Contents
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <div class="ms-0 position-static border-0" id="toc"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="blog-details-descr text-black lh-lg">
                            {!! $blog->descr !!}
                        </div>
                        <div class="d-flex justify-content-center mt-5">
                            @if (isset($prev_blog))
                            <a href="/blogs/{{$prev_blog->slug}}" class="btn btn-primary px-4 py-2 me-5"><span><i class="fa-solid fa-chevron-left me-2"></i></span>Previous Blog</a>
                            @endif
                            @if (isset($next_blog))
                            <a href="/blogs/{{$next_blog->slug}}" class="btn btn-primary px-4 py-2">Next Blog<span><i class="fa-solid fa-chevron-right ms-2"></i></span></a>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 rounded-0 mb-4 bg-body-secondary blog-search-card">
                            <div class="card-body px-4">
                                <h5 class="text-black mb-4 fw-semibold">Search</h5>
                                <form action="/blogs" method="get">
                                    <div class="row">
                                        <div class="col-8">
                                            <input class="form-control border-0" type="text" name="search" placeholder="Search for blogs">
                                        </div>
                                        <div class="col-4 ps-0">
                                            <button class="btn btn-primary" type="submit">Search</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="card border-0 rounded-0 mb-4">
                            <div class="card-body px-3 py-5">
                                <form action="javascript:void(0)" method="POST" id="lead_form">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6 mb-4">
                                            <input class="form-control" type="text" name="name" placeholder="Name" required>
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <input class="form-control" type="email" name="email" placeholder="Email" required>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 mb-4">
                                            <input class="form-control" type="tel" name="phone" placeholder="Contact Number" required>
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <input class="form-control" type="text" name="country" placeholder="Country" required>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 mb-4">
                                            <select class="form-select" name="service" id="" required>
                                                <option value="">Services</option>
                                                <option value="Web Development">Web Development</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <select class="form-select" name="budget" id="" required>
                                                <option value="">Budget</option>
                                                <option value="100">100</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="cool-12 mb-4">
                                            <input class="form-control" type="text" name="subject" placeholder="Subject" required>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 mb-5">
                                            <textarea class="form-control" name="msg" rows="5" placeholder="Message"></textarea>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col-auto">
                                            <button class="btn btn-primary btn-loader" type="submit" style="height: 2.5rem">
                                                <span class="spinner-border spinner-border-sm mx-3" role="status" aria-hidden="true"></span>
                                                <span class="btn-text">SEND YOUR MESSAGE</span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="card border-0 rounded-0 bg-body-secondary blog-cat-card mb-4">
                            <div class="card-body px-4">
                                <h5 class="text-black mb-4 fw-semibold">Categories</h5>
                                <ul class="list-group-flush ps-0">
                                    @foreach ($categories as $item)
                                    <li class="list-group-item mb-2"><a href="/blogs/category/{{$item->name}}">{{$item->name}}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="card border-0 rounded-0 bg-body-secondary">
                            <div class="card-body px-4">
                                <div class="row row-cols-3">
                                    <div class="col">
                                        <div class="text-center">
                                            <img class="mb-2" src="{{asset('frontend/img/customer (1).png')}}" alt="" width="40px">
                                            <span style="font-size: 14px;">Happy Clients</span>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="text-center">
                                            <img class="mb-2" src="{{asset('frontend/img/navigation.png')}}" alt="" width="40px">
                                            <span style="font-size: 14px;">Countries Served</span>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="text-center">
                                            <img class="mb-2" src="{{asset('frontend/img/trust.png')}}" alt="" width="40px">
                                            <span style="font-size: 14px;">Years of Trust</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

@endsection