@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-single') }}" />
<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 gy-5 pb-5">

      <div class="col-12 col-xl-8 order-1 order-lg-0">
        @foreach ($articles as $items)
        <div class="rounded-4 bg-white p-3 mb-5">
          <div class="row gy-3 gx-5">
            <div class="col-12 col-xl-5 d-flex align-items-center justify-content-center">
              <div class="position-relative">
                <img src="{{ asset('uploads/blogs/' . $items->image) }}" class="img-fluid img-article-main rounded-4" alt="">

                <div class="position-absolute bottom-0">
                  <div class="bg-red rounded-bottom rounded-start text-white px-2">
                    <span class="fs-6">{{ date('Y M d', strtotime($items->created_at)) }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-xl-7">
              <div class="mb-2">
                <span>{!! Str::limit($items->author, 20, '...') !!}</span>
              </div>
              <h1 class="red title">{!! Str::limit($items->title, 30, '...') !!}</h1>
              <p class="mb-3">
                {!! Str::limit($items->description, 100, '...') !!}
              </p>
              <a href="{{ url('article-single/' . $items->id) }}" class="text-decoration-none">
                <span class="fw-bold red">Read More</span>
              </a>
            </div>
          </div>
        </div>
        @endforeach
      </div>

      <div class="col-12 col-xl-4 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>
      @if ($articles->hasPages())
      <ul class="pagination pagination">

        @if ($articles->currentPage() == 1)
        <a class="page-link py-1 px-3" href="#" aria-label="Previous">
          <i class="fa-solid fa-chevron-left"></i>
        </a>
        @else
        <li class="page-item"><a class="page-link py-1 px-3" href="{{ $articles->previousPageUrl() }}" rel="prev"><i class="fa-solid fa-chevron-left"></i></a></li>
        @endif



        @if($articles->currentPage() > 3)
        <li class="page-item hidden-xs"><a class="page-link py-1 px-3" href="{{ $articles->url(1) }}">1</a></li>
        @endif
        @if($articles->currentPage() > 4)
        <li><span>...</span></li>
        @endif
        @foreach(range(1, $articles->lastPage()) as $i)
        @if($i >= $articles->currentPage() - 2 && $i <= $articles->currentPage() + 2)
          @if ($i == $articles->currentPage())
          <li class="page-item"><span class="page-link py-1 px-3 active">{{ $i }}</span></li>
          @else
          <li><a class="page-link py-1 px-3" href="{{ $articles->url($i) }}">{{ $i }}</a></li>
          @endif
          @endif
          @endforeach
          @if($articles->currentPage() < $articles->lastPage() - 3)
            <li class="page-link py-1 px-3"><span>...</span></li>
            @endif
            @if($articles->currentPage() < $articles->lastPage() - 2)
              <li class="page-item hidden-xs"><a class="page-link py-1 px-3" href="{{ $articles->url($articles->lastPage()) }}">{{ $articles->lastPage() }}</a></li>
              @endif


              @if ($articles->hasMorePages())
              <li class="page-item"><a class="page-link py-1 px-3" href="{{ $articles->previousPageUrl() }}" rel="prev"><i class="fa-solid fa-chevron-right"></i></a></li>
              @else
              <a class="page-link py-1 px-3" href="#" aria-label="Next">
                <i class="fa-solid fa-chevron-right"></i>
              </a>
              @endif
      </ul>
      @endif
    </div>

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

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


  .navbar {
    background-color: #ffb12d;
  }

  .navbar-scrolled {
    background-color: transparent;
  }

  .footer-bg {
    background-color: #ffb12d;
  }

  .title {
    font-size: 30px;
  }

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

  .border-search {
    width: 37%;
  }

  .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: 270px;
    }
  }

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

    p {
      font-size: 14px !important
    }

    .border-search {
      width: 32%;
    }

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