@extends('layouts.front.master')
@section('contant')
<style>
.input-wrp{
    display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      width: 22rem;
  max-width: 350px;
  transition: box-shadow 0.3s ease;
}
.cus_int{
    flex: 1;
      border: none;
      outline: none;
      font-size: 16px;
      padding: 6px 4px;
      background: transparent;
      color: #333;
}
.serch-bt{
    background: none;
      border: none;
      cursor: pointer;
      color: #333;
      font-size: 18px;
      transition: color 0.3s ease;
}

.blog__item, .blog-nine__item, .blog-three__grid-item, .blog-two__item {
   height: 100%;
}
</style>
<main>
    <!-- Banner area -->
    <section class="banner-inner-area sub-bg bg-image" data-background="assets/images/bg/banner-inner-bg.png" style="background-image: url('assets/images/bg/banner-inner-bg.png');">
        <div class="container">
            <div class="banner-inner__content">
                <h1>Blog</h1>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><i class="fa-regular fa-angle-right"></i></li>
                    <li>Blog </li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Blog area -->
    <section class="blog-area pt-120 pb-120">
        <div class="container">
            <div class="row g-4 justify-content-center">
                <div class="item search mb-4 w-100 d-flex flex-column align-items-center ">
                    <h3>Search</h3>
                    <div class="input-wrp" style="

">
  <input 
    type="text" 
    class="searchInput cus_int" 
    placeholder="Search blogs..." 
    autocomplete="off" 
    style="
      
    "
  >
  <button class="serch-bt"
    style="
      
    "
    onmouseover="this.style.color='#007BFF';"
    onmouseout="this.style.color='#333';"
  >
    <i class="fa-regular fa-magnifying-glass"></i>
  </button>
</div>

                </div>

                <div id="blogList" class="w-100">
                    @include('front.blog-list', ['blogs' => $blogs])
                </div>
            </div>
        </div>
    </section>
</main>

<script>
    let blogsearchroute = "{{ route('blog') }}";
</script>
@endsection