@extends('frontend.layouts.app3')

@section('seo')
<title>Article | Muhlach Bakery</title>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Article | Muhlach Bakery" />
<meta property="og:description" content="" />
<meta property="og:url" content="{{ url('/article') }}" />
<meta property="og:site_name" content="Article | Muhlach Bakery" />

<meta property="og:image" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:image:alt" content="{{ asset('img/meta-thumbnail.jpg') }}">
@endsection

<link rel="stylesheet" href="{{asset('css/app3.css')}}">

@section('content')
<div class="container-fluid bg-yellow pt-5">
  <div class="container pt-3">
    <div class="text-center mb-5">
      <h1 class="red article-title">Article/Reviews</h1>
    </div>

    <div class="row g-5 pb-5">
      <div class="col-12 col-xl-9 order-1 order-lg-0">
        <div class="rounded-0 bg-white p-3">
          <div class="text-center mb-4">
            <img src="{{ asset('uploads/blogs/' . $blogs->image) }}" class="img-fluid img-article-single" alt="">
          </div>

          <div class="hstack mb-3 gap-2">
            <span>By {{ $blogs->author }}</span>
            <div class="vr"></div>
            <span class="red">{{ date('Y M d', strtotime($blogs->created_at)) }}</span>
          </div>

          <p>
            {!! $blogs->description !!}
          </p>
        </div>
      </div>

      <div class="col-12 col-xl-3 order-0 order-lg-1">
        <div class="rounded-5 bg-white mb-3 border-search px text-center">
          <h1 class="red title">Search</h1>
        </div>

        <form action="{{ url('/search-blogs') }}" method="GET">
          <div class="input-group mb-3">
            <input type="text" name="query" class="form-control form-control-lg border-end-0 rounded-input" placeholder="Search..." aria-label="Username" aria-describedby="basic-addon1">
            <button class="input-group-text bg-white border-start-0 rounded-icon" id="basic-addon1"><i class="fa-solid fa-magnifying-glass"></i></button>
          </div>
        </form>

      </div>
    </div>

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

<style>
  .img-article-single {
    height: 351.28px;
  }

  .navbar {
    background-color: #9b0000;
  }

  .title {
    font-size: 30px;
  }

  p {
    font-size: 19px !important;
  }

  .border-search {
    width: 44%;
  }

  .rounded-input {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
  }

  .rounded-input {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
  }

  .rounded-icon {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  @media only screen and (max-width: 400px) {
    .title {
      font-size: 24px
    }

    p {
      font-size: 14px !important
    }

    .border-search {
      width: 32%;
    }

    .img-article-main {
      height: auto;
    }
  }

  @media only screen and (max-width: 600px) {
    .title {
      font-size: 24px
    }

    p {
      font-size: 14px !important
    }

    .border-search {
      width: 32%;
    }

    .img-article-main {
      height: auto;
    }
  }
</style>
@endsection