@extends('includes.app')

@section('meta_title')
    {{ $meta['meta_title'] ?? 'Default Title' }}
@endsection

@section('meta_description')
    {{ $meta['meta_description'] ?? 'Default Description' }}
@endsection

@section('meta_keywords')
    {{ $meta['meta_keywords'] ?? 'Default Keywords' }}
@endsection
@section('content')
    <style>
        li,
        ul {
            list-style: circle;
        }
    </style>

    <section class="blog-content_hero-wrapper spac">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="blog_inqury">
                        <div class="container">
                            <div class="row justify-content-center">

                                <div class="col-lg-8 col-md-12  col-sm-12">
                                    <div class="single_blog">
                                        <img class="img-fluid tips single_blog_injury single-bloged-opens"
                                            src="{{ asset('public/' . $blog->banner) }}" alt="{{ $blog->banner_alt }}">
                                        <h1 class="mt-4">{{ $blog->title }}</h1>
                                        <div class="mt-3">{!! $blog->description !!}</div>
                                    </div>

                                </div>

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

                                    <div class="sticky_bar">
                                        <div class="recent-blog-box">
                                            <div class="blog-header">
                                                <span class="menu-icon">☰</span>
                                                <h2>Recent Blogs</h2>
                                            </div>
                                            <ul class="blog-list">
                                                @foreach ($recentBlogs as $recent)
                                                    <li style="display:flex;font-size:15px;align-items:center;">
                                                        <img class="mr-2" src="{{ asset('public/' . $recent->banner) }}"
                                                            alt="{{ $recent->banner_alt }}"
                                                            style="height:76px;width:96px;border-radius:10px;margin-right:8px;">
                                                        <a href="{{ route('blog_details', $recent->slug) }}">
                                                            <h3 class="cu_h3_s">
                                                                {{ \Illuminate\Support\Str::limit($recent->title, 30) }}
                                                            </h3>
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>

                                        </div>
                                    </div>



                                    <div class="sticky_bar">
                                        <div class="recent-blog-box">
                                            <img src="https://allprintersetup.com/public/blog_image/How to connect Brother Printer with WIFI (1)_1728455153.png"
                                                alt="img">
                                        </div>
                                    </div>


                                    <div class="sticky_bar">
                                        <div class="recent-blog-box" style="padding:20px;">

                                            <div class="appoinment-box text-center ">
                                                <div class="heading">
                                                    <h4>Contact Form</h4>
                                                    <p>Get in touch with us by filling out the form below—we’d love to hear
                                                        from you!</p>
                                                </div>
                                                @include('frontend.common_form.form')
                                            </div>
                                        </div>

                                        <!-- //thankyou modal -->
                                        <!-- Modal -->
                                        <div class="modal fade" id="thankYouModal" role="dialog">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content text-center p-4">
                                                    <h5 class="modal-title" id="thankYouModalLabel">Thanks For Contacting Us
                                                    </h5>
                                                    <p>We will connect you soon...</p>
                                                    <button type="button" class="btn btn-primary mt-2"
                                                        data-bs-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="iframeModal"
                                            style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                            background-color: rgba(0, 0, 0, 0.7); z-index: 9999; justify-content: center; align-items: center;">
                                            <div
                                                style="position: relative; width: 90%; max-width: 400px; height: 80%; background: #fff; border-radius: 10px; overflow: hidden;">
                                                <button onclick="closeIframeModal()"
                                                    style="position: absolute; top: 10px; right: 10px; z-index: 10000; background: #ff5a5a; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer;">X</button>
                                                <iframe id="driversIframe" src=""
                                                    style="width: 95%; height: 98%; border: none;margin-top:5%;justify-content:center;"
                                                    data-gtm-yt-inspected-8="true"></iframe>
                                            </div>
                                        </div>



                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
    </section>
@endsection