@extends('inculdes.main')
@section('content')

<div class="container-fluid mt-5  wow fadeInUp" data-wow-delay="0.1s">
    <div class="container ">
        <div class="row g-5">
            <!-- Blog list Start -->
            <div class="col-lg-8">
                <!-- Blog Detail Start -->
                <div class="mb-5">
                    <img class="img-fluid w-100 rounded mb-5" style="height: 500px" src="{{ asset($blog->image) }}" alt="{{ $blog->title }}">
                    <h1 class="mb-4">{{ $blog->title }}</h1>
                    <div class="d-flex mb-3">
                        <small class="me-3"><i class="far fa-user text-primary me-2"></i>{{ @$blog->user->name }}</small>
                   
                    </div>
                    <p>{!! $blog->description !!}</p>
                    
                    
                    
                    
                </div>
                <div class="d-flex flex-wrap m-n1">
                    @foreach ($blog->tags() as $item)
                    <a href="{{ route('blogs', ['tag'=>$item->slug]) }}" class="btn btn-light m-1">{{ $item->name }}</a>
                    @endforeach

                </div>
                {{-- {!! $blog->tags() !!} --}}
                <!-- Blog Detail End -->

                <!-- Comment List Start -->
                {{-- <div class="mb-5">
                    <div class="section-title section-title-sm position-relative pb-3 mb-4">
                        <h3 class="mb-0">3 Comments</h3>
                    </div>
                    <div class="d-flex mb-4">
                        <img src="img/user.jpg" class="img-fluid rounded" style="width: 45px; height: 45px;">
                        <div class="ps-3">
                            <h6><a href="">John Doe</a> <small><i>01 Jan 2045</i></small></h6>
                            <p>Diam amet duo labore stet elitr invidunt ea clita ipsum voluptua, tempor labore
                                accusam ipsum et no at. Kasd diam tempor rebum magna dolores sed eirmod</p>
                            <button class="btn btn-sm btn-light">Reply</button>
                        </div>
                    </div>
                    <div class="d-flex mb-4">
                        <img src="img/user.jpg" class="img-fluid rounded" style="width: 45px; height: 45px;">
                        <div class="ps-3">
                            <h6><a href="">John Doe</a> <small><i>01 Jan 2045</i></small></h6>
                            <p>Diam amet duo labore stet elitr invidunt ea clita ipsum voluptua, tempor labore
                                accusam ipsum et no at. Kasd diam tempor rebum magna dolores sed eirmod</p>
                            <button class="btn btn-sm btn-light">Reply</button>
                        </div>
                    </div>
                    <div class="d-flex ms-5 mb-4">
                        <img src="img/user.jpg" class="img-fluid rounded" style="width: 45px; height: 45px;">
                        <div class="ps-3">
                            <h6><a href="">John Doe</a> <small><i>01 Jan 2045</i></small></h6>
                            <p>Diam amet duo labore stet elitr invidunt ea clita ipsum voluptua, tempor labore
                                accusam ipsum et no at. Kasd diam tempor rebum magna dolores sed eirmod</p>
                            <button class="btn btn-sm btn-light">Reply</button>
                        </div>
                    </div>
                </div> --}}
                <!-- Comment List End -->

                <!-- Comment Form Start -->
                {{-- <div class="bg-light rounded p-5">
                    <div class="section-title section-title-sm position-relative pb-3 mb-4">
                        <h3 class="mb-0">Leave A Comment</h3>
                    </div>
                    <form>
                        <div class="row g-3">
                            <div class="col-12 col-sm-6">
                                <input type="text" class="form-control bg-white border-0" placeholder="Your Name" style="height: 55px;">
                            </div>
                            <div class="col-12 col-sm-6">
                                <input type="email" class="form-control bg-white border-0" placeholder="Your Email" style="height: 55px;">
                            </div>
                            <div class="col-12">
                                <input type="text" class="form-control bg-white border-0" placeholder="Website" style="height: 55px;">
                            </div>
                            <div class="col-12">
                                <textarea class="form-control bg-white border-0" rows="5" placeholder="Comment"></textarea>
                            </div>
                            <div class="col-12">
                                <button class="btn btn-primary w-100 py-3" type="submit">Leave Your Comment</button>
                            </div>
                        </div>
                    </form>
                </div> --}}
                <!-- Comment Form End -->
            </div>
            <!-- Blog list End -->

            <!-- Sidebar Start -->
            <div class="col-lg-4">
                <!-- Search Form Start -->
                <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
                    <div class="input-group">
                    <form action="{{ route('blogs') }}" class="d-flex">
                        <input type="text" name="search" class="form-control p-3" placeholder="Keyword">
                        <button type="submit" class="btn btn-primary px-4"><i class="fa fa-search"></i></button>
                    </form>
                    </div>
                </div>
                <!-- Search Form End -->

                <!-- Category Start -->
                <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
                    <div class="section-title section-title-sm position-relative pb-3 mb-4">
                        <h3 class="mb-0">Categories</h3>
                    </div>
                    <div class="link-animated d-flex flex-column justify-content-start">
                        @foreach ($categories as $cat)
                        <a class="h5 fw-semi-bold {{ ($cat->id == @$blog->category_id)?'bg-primary':'bg-light' }} rounded py-2 px-3 mb-2 " href="{{ route('blogs', ['category'=>$cat->slug]) }}"><i class="fa fa-arrow-right me-2"></i>{{ $cat->name }}</a>
                        @endforeach

                    </div>
                </div>
                <!-- Category End -->

                <!-- Recent Post Start -->
                <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
                    <div class="section-title section-title-sm position-relative pb-3 mb-4">
                        <h3 class="mb-0">Recent Post</h3>
                    </div>
                    @foreach ($recent_blogs as $item)
                    <div class="d-flex rounded overflow-hidden mb-3">
                        <img class="img-fluid" src="{{ asset($item->image) }}" style="width: 100px; height: 100px; object-fit: cover;" alt="{{ $item->title }}">
                        <a href="{{ route('blog', ['slug' => $item->slug]) }}" class="w-100 h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">{{ $item->title }}
                        </a>
                    </div>
                    @endforeach


                </div>
                <!-- Recent Post End -->

                <!-- Image Start -->
                {{-- <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
                    <img src="img/blog-1.jpg" alt="blog1" class="img-fluid rounded">
                </div> --}}
                <!-- Image End -->



                <!-- Plain Text Start -->
                <div class="wow slideInUp" data-wow-delay="0.1s">
                    <div class="section-title section-title-sm position-relative pb-3 mb-4">
                        <h3 class="mb-0">FREE CONSULTATION</h3>
                    </div>
                    <div class="bg-light text-center" style="padding: 30px;">
                        <p>Our dedicated team is ready to assist you with all your needs. We're here to offer you expert guidance and tailored solutions. Contact us now to discover how we can meet your requirements!</p>
                        <a href="{{ route('contact') }}" class="btn btn-primary py-2 px-4">Contact Us</a>
                    </div>
                </div>
                <!-- Plain Text End -->
            </div>
            <!-- Sidebar End -->
        </div>
    </div>
</div>


<!-- Popup Modal -->
<div id="blogPopup" class="popup-container" style="display: none;">
    <div class="popup-content">
        <button id="closePopup" class="close-btn">&times;</button>
        <p>Earn $50 in cash or service discounts for every successful referral! Refer your friends, family, or colleagues!</p>
        <a href="https://skfinancial.com/referral-program">
            <button class="join-btn">Join Now</button>
        </a>
    </div>
</div>

<style>
    .popup-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.8);
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        z-index: 1000;
        color: #fff;
        width: 300px;
    }

    .popup-content {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        color: #000;
        position: relative;
    }

    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #000;
    }

    .join-btn {
        background: #28a745;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }

    .join-btn:hover {
        background: #218838;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        setTimeout(function () {
            document.getElementById("blogPopup").style.display = "block";
        }, 10000); // Show after 10 seconds

        document.getElementById("closePopup").addEventListener("click", function () {
            document.getElementById("blogPopup").style.display = "none";
        });
    });
</script>



@include('inculdes.contact_form')
@endsection