@extends('layout.mainlayout')

@section('content')
  <style>
   html[dir="rtl"] .blog-footer a{
      position: relative;
      left: 12px;
    }
   .card-selected{
     background: #e35a80;
     color: white;
     border-radius: 25px;
   }
   .owl-nav {
     display: flex;
     justify-content: space-between;
   }

   .owl-prev {
     order: 2;
   }

   .owl-next {
     order: 1;
   }

   .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }

   html[dir="rtl"] .owl-carousel .owl-nav button.owl-prev {
     right: -30px;
     rotate: 180deg;
     left: auto;
     top: 0;
   }

   html[dir="rtl"] .owl-carousel .owl-nav button.owl-next {
     left: -30px;
     rotate: 180deg;
     right: auto;
     top: 0;
   }

   .owl-carousel .owl-nav button.owl-next,
   .owl-carousel .owl-nav button.owl-prev {
     position: absolute;
     top: 25px;
     transform: translateY(-50%);
   }

   .owl-carousel .owl-nav button.owl-prev {
     left: -30px;
   }

   .owl-carousel .owl-nav button.owl-next {
     right: -30px;
   }
   .owl-carousel .owl-item{
     min-width: 120px;
   }

   .owl-item .card{
     border: none;
     box-shadow: 0px 4px 20px 0px #0000000D;
     padding: 5px 20px 5px 20px;
     border-radius: 25px;
     white-space: nowrap;
   }
   .box-content .box-tag{
     color: #1C2129;
     font-size: 14px;
     text-transform: uppercase;
     margin-bottom: 0.7rem;
   }
   .box-tag{
     display: flex;
     justify-content: space-between;
   }
  </style>
  <main class="page-main">
    <section class="new-sec breadcrumbs-sec">
      <div class="container">
        <h3 class="page-title">{{trans('web.blog')}}</h3>
        <h6>{{trans('web.blog_new')}}</h6>
        <i class="ri-arrow-down-s-line icon"></i>
      </div>
    </section>

    <section class="new-sec blogs-sec">
      <div class="container">

        @if(!empty($categories) && count($categories) > 0)
          <div class="row mb-5">
            <div class="col">
              <div class="date-side">
                <div class="category-slider owl-carousel" style="margin-top:20px;">
                  <a style="color: #1F3E61" href="?{{!empty(app('translator')->getLocale()) ? 'lang='.app('translator')->getLocale() : '' }}" >
                    <div class="card item @if(empty($category_id)) card-selected @endif">
                      <div class="content" style="">
                        <p style="text-align: center;margin: 10px 0;">{{trans("web.all")}}</p>
                      </div>
                    </div>
                  </a>
                  @foreach($categories as $category)
                    <a style="color: #1F3E61" href="?q={{$q}}&category_id={{$category->ID}}{{!empty(app('translator')->getLocale()) ? '&lang='.app('translator')->getLocale() : '' }}">
                      <div id="{{$category->ID}}" class="card item @if(!empty($category_id) && $category_id == $category->ID) card-selected @endif">
                        <div class="content" style="">
                          <p style="text-align: center;margin: 10px 0;">@if(app('translator')->getLocale() == "ar"){{$category->NAME_AR}}@else{{$category->NAME_EN}}@endif</p>

                        </div>
                      </div>
                    </a>
                  @endforeach
                </div>
              </div>
            </div>
          </div>
          <hr>
        @endif
          <div class="tests-header mb-5 d-flex">
            <div class="sec-form mb-5">
              <form class="form home-visit-search-form" action="" style="width: 385px;">
                <div class="form-group">
                  <input type="text" id="search-input" class="form-control" placeholder="{{trans("web.search_in")}}" name="q" value="{{$q}}">
                  <button id="search" class="btn search-btn" type="submit">
                    <i class="ri-search-line"></i>
                  </button>
                </div>
              </form>
            </div>

          </div>

        <div class="row" id="blogs-row">
            @php
                $totalBlogs = $blogs->count();
                $blogsPerColumn = ceil($totalBlogs / 3);
                $blogsInSecondColumn = $blogsPerColumn;
                if ($totalBlogs < 3 || $totalBlogs == 8) $blogsInSecondColumn = ($totalBlogs == 8 || $totalBlogs < 8) ? $blogsPerColumn - 1 : $blogsPerColumn;
            @endphp
          <div class="col-sm-6 col-lg-4 clm">
            <div class="single-column">
              @foreach ($blogs->slice(0, $blogsPerColumn) as $blog)
                <div class="single-blog">
                  <div class="blog-image">
                    <a href="/blogs/{{$blog->ID}}">
                      <img src="{{ $blog->IMAGE }}" alt="{{ app('translator')->getLocale() == 'ar' ? $blog->TITLE_AR : $blog->TITLE_EN }}">
                    </a>
                  </div>
                  <div class="blog-content">
                    <div class="preefs">
                      <span class="preef">{{ $blog->CREATED_DATE }}</span>
                      <span class="preef">{{trans('web.by')}} {{ app('translator')->getLocale() == 'ar' ? $blog->AUTHOR_AR : $blog->AUTHOR_EN }}</span>
                    </div>
                    <h2 class="title">
                      <a href="/blogs/{{$blog->ID}}">{{ app('translator')->getLocale() == 'ar' ? $blog->TITLE_AR : $blog->TITLE_EN }}</a>
                    </h2>
                    <p class="desc">{{ app('translator')->getLocale() == 'ar' ? $blog->SHORT_DESCRIPTION_AR : $blog->SHORT_DESCRIPTION_EN }}</p>
                    <div class="blog-footer">
                      <a href="/blogs/{{$blog->ID}}" class="btn more-btn">
                        <span>{{trans('web.know_more')}}</span>
                        <span class="icon">&#10230;</span>
                      </a>
                    </div>
                    @php
                      $tags = explode(',', app('translator')->getLocale() == 'ar' ? $blog->TAGS_AR : $blog->TAGS_EN);
                    @endphp
                    <div class="blog-tags">
                      @foreach ($tags as $tag)
                        <span class="tag">{{ $tag }}</span>
                      @endforeach
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>

          <div class="col-sm-6 col-lg-4 clm">
            <div class="single-column">
              @php $appearTopPost = true; @endphp
                @if($appearTopPost && $topPosts->count() > 0)
                    @php $counter = 1; @endphp
                    <div class="single-blog just-content top-blogs">
                        <div class="blog-content">
                            <h2 class="title">{{trans('web.top_posts')}}</h2>
                            <div class="list">
                                @foreach($topPosts as $post)
                                    <div class="single-list">
                                        <span class="num">{{$counter}}</span>
                                        <a href="/blogs/{{$post->ID}}" class="list-info">
                                            <h3 class="list-title">{{ app('translator')->getLocale() == 'ar' ? $post->TITLE_AR : $post->TITLE_EN }}</h3>
                                            <p class="author">{{trans('web.by')}} {{ app('translator')->getLocale() == 'ar' ? $post->AUTHOR_AR : $post->AUTHOR_EN }}</p>
                                        </a>
                                    </div>
                                    @php ++$counter; @endphp
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @php $appearTopPost = false; @endphp
                @endif
              @foreach ($blogs->slice($blogsPerColumn, $blogsInSecondColumn) as $blog)
                <div class="single-blog">
                  <div class="blog-image">
                    <a href="/blogs/{{$blog->ID}}">
                      <img src="{{ $blog->IMAGE }}" alt="{{ app('translator')->getLocale() == 'ar' ? $blog->TITLE_AR : $blog->TITLE_EN }}">
                    </a>
                  </div>
                  <div class="blog-content">
                    <div class="preefs">
                      <span class="preef">{{ $blog->CREATED_DATE }}</span>
                      <span class="preef">{{trans('web.by')}} {{ app('translator')->getLocale() == 'ar' ? $blog->AUTHOR_AR : $blog->AUTHOR_EN }}</span>
                    </div>
                    <h2 class="title">
                      <a href="/blogs/{{$blog->ID}}">{{ app('translator')->getLocale() == 'ar' ? $blog->TITLE_AR : $blog->TITLE_EN }}</a>
                    </h2>
                    <p class="desc">{{ app('translator')->getLocale() == 'ar' ? $blog->SHORT_DESCRIPTION_AR : $blog->SHORT_DESCRIPTION_EN }}</p>
                    <div class="blog-footer">
                      <a href="/blogs/{{$blog->ID}}" class="btn more-btn">
                        <span>{{trans('web.know_more')}}</span>
                        <span class="icon">&#10230;</span>
                      </a>
                    </div>
                    @php
                      $tags = explode(',', app('translator')->getLocale() == 'ar' ? $blog->TAGS_AR : $blog->TAGS_EN);
                    @endphp
                    <div class="blog-tags">
                      @foreach ($tags as $tag)
                        <span class="tag">{{ $tag }}</span>
                      @endforeach
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>

          <div class="col-lg-4 clm">
            <div class="single-column">
              @foreach ($blogs->slice($blogsPerColumn + $blogsInSecondColumn) as $blog)
                <div class="single-blog">
                  <div class="blog-image">
                    <a href="/blogs/{{$blog->ID}}">
                      <img src="{{ $blog->IMAGE }}" alt="{{ app('translator')->getLocale() == 'ar' ? $blog->TITLE_AR : $blog->TITLE_EN }}">
                    </a>
                  </div>
                  <div class="blog-content">
                    <div class="preefs">
                      <span class="preef">{{ $blog->CREATED_DATE }}</span>
                      <span class="preef">{{trans('web.by')}} {{ app('translator')->getLocale() == 'ar' ? $blog->AUTHOR_AR : $blog->AUTHOR_EN }}</span>
                    </div>
                    <h2 class="title">
                      <a href="/blogs/{{$blog->ID}}">{{ app('translator')->getLocale() == 'ar' ? $blog->TITLE_AR : $blog->TITLE_EN }}</a>
                    </h2>
                    <p class="desc">{{ app('translator')->getLocale() == 'ar' ? $blog->SHORT_DESCRIPTION_AR : $blog->SHORT_DESCRIPTION_EN }}</p>
                    <div class="blog-footer">
                      <a href="/blogs/{{$blog->ID}}" class="btn more-btn">
                        <span>{{trans('web.know_more')}}</span>
                        <span class="icon">&#10230;</span>
                      </a>
                    </div>
                    @php
                      $tags = explode(',', app('translator')->getLocale() == 'ar' ? $blog->TAGS_AR : $blog->TAGS_EN);
                    @endphp
                    <div class="blog-tags">
                      @foreach ($tags as $tag)
                        <span class="tag">{{ $tag }}</span>
                      @endforeach
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        </div>

        <div class="btns">
          @if ($blogs->nextPageUrl())
            <a href="javascript:void(0);"
               class="btn more-btn"
               id="loadMore"
               data-next-url="{{ $blogs->nextPageUrl() }}">
              {{trans('web.load_more')}}
              <span class="spinner-border spinner-border-sm mr-2" id="loader" style="display: none;"></span>
              <i class="ri-restart-line icon"></i>
            </a>
          @endif
        </div>

      </div>
    </section>

    {{--<section class="new-sec blogs-sec">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-lg-4 clm">
            <div class="single-column">
              <div class="single-blog">
                <div class="blog-image">
                  <a href="#">
                    <img src="img/blog1.jfif" alt="Blog Name">
                  </a>
                </div>
                <div class="blog-content">
                  <div class="preefs">
                    <span class="preef">22.05.2022</span>
                    <span class="preef">by Esther</span>
                    <span class="preef">176 comments</span>
                  </div>
                  <h2 class="title"><a href="#">Sample post with image</a></h2>
                  <p class="desc">Nam varius facilisis tempus. Fusce laoreet metus odio, a rutrum dolor tincidunt sit amet... </p>
                  <div class="blog-footer">
                    <a href="#" class="btn more-btn">
                      <span>{{trans('web.know_more')}}</span>
                      <span class="icon">&#10230;</span>
                    </a>
                    <span class="comments">
                        <i class="ri-chat-1-line icon"></i>
                        <span>12</span>
                      </span>
                  </div>
                </div>
              </div>
              <div class="single-blog">
                <div class="blog-image">
                  <a href="#">
                    <img src="img/blog2.jfif" alt="Blog Name">
                  </a>
                </div>
                <div class="blog-content">
                  <div class="preefs">
                    <span class="preef">22.06.2022</span>
                    <span class="preef">by Esther</span>
                    <span class="preef">10 comments</span>
                  </div>
                  <h2 class="title"><a href="#">Enhancing patient care in research through digital transformation</a></h2>
                  <p class="desc">Nam varius facilisis tempus. Fusce laoreet metus odio, a rutrum dolor tincidunt sit amet...</p>
                  <div class="blog-footer">
                    <a href="#" class="btn more-btn">
                      <span>{{trans('web.know_more')}}</span>
                      <span class="icon">&#10230;</span>
                    </a>
                    <span class="comments">
                        <i class="ri-chat-1-line icon"></i>
                        <span>12</span>
                      </span>
                  </div>
                  <div class="blog-tags">
                    <span class="tag">Medical</span>
                    <span class="tag">Therapy</span>
                    <span class="tag">Pharma</span>
                    <span class="tag">Medical technology</span>
                  </div>
                </div>
              </div>
              <div class="single-blog">
                <div class="blog-image">
                  <a href="#">
                    <img src="img/blog12.jfif" alt="Blog Name">
                  </a>
                </div>
                <div class="blog-content">
                  <div class="preefs">
                    <span class="preef">23.05.2022</span>
                    <span class="preef">by Esther</span>
                    <span class="preef">16 comments</span>
                  </div>
                  <h2 class="title"><a href="#">2022 – Bringing innovation to you</a></h2>
                  <p class="desc">Nam varius facilisis tempus. Fusce laoreet metus odio, a rutrum dolor tincidunt sit amet... </p>
                  <div class="blog-footer">
                    <a href="#" class="btn more-btn">
                      <span>{{trans('web.know_more')}}</span>
                      <span class="icon">&#10230;</span>
                    </a>
                    <span class="comments">
                        <i class="ri-chat-1-line icon"></i>
                        <span>16</span>
                      </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 clm">
            <div class="single-column">
              <div class="single-blog just-content top-blogs">
                <div class="blog-content">
                  <h2 class="title">Top posts</h2>
                  <div class="list">
                    <div class="single-list">
                      <span class="num">1</span>
                      <div class="list-info">
                        <h3 class="list-title">Enhancing patient care in research through digital transformation</h3>
                        <p class="author">by Oswin Whitehead</p>
                      </div>
                    </div>
                    <div class="single-list">
                      <span class="num">2</span>
                      <div class="list-info">
                        <h3 class="list-title">2022 – Bringing innovation to you</h3>
                        <p class="author">by Margaret Austin</p>
                      </div>
                    </div>
                    <div class="single-list">
                      <span class="num">3</span>
                      <div class="list-info">
                        <h3 class="list-title">Capability & Performance Standards</h3>
                        <p class="author">by Jack Wade</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="single-blog">
                <div class="blog-image">
                  <a href="#">
                    <img src="img/blog6.jfif" alt="Blog Name">
                  </a>
                </div>
                <div class="blog-content">
                  <div class="preefs">
                    <span class="preef">23.05.2022</span>
                    <span class="preef">by Esther</span>
                    <span class="preef">16 comments</span>
                  </div>
                  <h2 class="title"><a href="#">Health System secures property and funding</a></h2>
                  <p class="desc">Nam varius facilisis tempus. Fusce laoreet metus odio, a rutrum dolor tincidunt sit amet... </p>
                  <div class="blog-footer">
                    <a href="#" class="btn more-btn">
                      <span>{{trans('web.know_more')}}</span>
                      <span class="icon">&#10230;</span>
                    </a>
                    <span class="comments">
                        <i class="ri-chat-1-line icon"></i>
                        <span>16</span>
                      </span>
                  </div>
                </div>
              </div>
              <div class="single-blog">
                <div class="blog-image">
                  <a href="#">
                    <img src="img/blog10.jfif" alt="Blog Name">
                  </a>
                </div>
                <div class="blog-content">
                  <div class="preefs">
                    <span class="preef">23.05.2022</span>
                    <span class="preef">by Esther</span>
                    <span class="preef">16 comments</span>
                  </div>
                  <h2 class="title"><a href="#">Why CMS is prioritizing value-based care and how healthcare companies can support </a></h2>
                  <p class="desc">Nam varius facilisis tempus. Fusce laoreet metus odio, a rutrum dolor tincidunt sit amet... </p>
                  <div class="blog-footer">
                    <a href="#" class="btn more-btn">
                      <span>{{trans('web.know_more')}}</span>
                      <span class="icon">&#10230;</span>
                    </a>
                    <span class="comments">
                        <i class="ri-chat-1-line icon"></i>
                        <span>16</span>
                      </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 clm">
            <div class="single-column">
              <div class="single-blog">
                <div class="blog-image">
                  <a href="#">
                    <img src="img/blog11.jfif" alt="Blog Name">
                  </a>
                </div>
                <div class="blog-content">
                  <div class="preefs">
                    <span class="preef">17.05.2022</span>
                    <span class="preef">by Esther</span>
                    <span class="preef">16 comments</span>
                  </div>
                  <h2 class="title"><a href="#">The future of care</a></h2>
                  <p class="desc">Nam varius facilisis tempus. Fusce laoreet metus odio, a rutrum dolor tincidunt sit amet... </p>
                  <div class="blog-footer">
                    <a href="#" class="btn more-btn">
                      <span>{{trans('web.know_more')}}</span>
                      <span class="icon">&#10230;</span>
                    </a>
                    <span class="comments">
                        <i class="ri-chat-1-line icon"></i>
                        <span>16</span>
                      </span>
                  </div>
                </div>
              </div>
              <div class="single-blog just-image">
                <div class="blog-image">
                  <a href="#">
                    <img src="img/blog16.jfif" alt="Blog Name">
                  </a>
                </div>
                <div class="blog-content">
                  <div class="preefs">
                    <span class="preef">22.06.2022</span>
                  </div>
                  <h2 class="title"><a href="#">Digitally enabled care in mental health</a></h2>
                </div>
              </div>
              <div class="single-blog">
                <div class="blog-image">
                  <a href="#">
                    <img src="img/blog9.jfif" alt="Blog Name">
                  </a>
                </div>
                <div class="blog-content">
                  <div class="preefs">
                    <span class="preef">01.05.2022</span>
                    <span class="preef">by Esther</span>
                    <span class="preef">16 comments</span>
                  </div>
                  <h2 class="title"><a href="#">Digitally enabled care in mental health</a></h2>
                  <p class="desc">Nam varius facilisis tempus. Fusce laoreet metus odio, a rutrum dolor tincidunt sit amet... </p>
                  <div class="blog-footer">
                    <a href="#" class="btn more-btn">
                      <span>{{trans('web.know_more')}}</span>
                      <span class="icon">&#10230;</span>
                    </a>
                    <span class="comments">
                        <i class="ri-chat-1-line icon"></i>
                        <span>16</span>
                      </span>
                  </div>
                </div>
              </div>
              <div class="single-blog just-content">
                <div class="blog-content">
                  <div class="preefs">
                    <span class="preef">01.05.2022</span>
                    <span class="preef">By Martin</span>
                    <span class="preef">16 comments</span>
                  </div>
                  <h2 class="title"><a href="#">Care in health</a></h2>
                  <p class="desc">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                  <div class="blog-footer">
                    <a href="#" class="btn more-btn">
                      <span>{{trans('web.know_more')}}</span>
                      <span class="icon">&#10230;</span>
                    </a>
                    <span class="comments">
                        <i class="ri-chat-1-line icon"></i>
                        <span>16</span>
                      </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="btns">
          <a href="#"
             class="btn more-btn">
            Load more
            <i class="ri-restart-line icon"></i>
          </a>
        </div>
      </div>
    </section>--}}
    <!-- End Tests Section -->
    @include('still-have-question')
  </main>
@endsection

@section('frontend_scripts')
  <script>
    $(document).ready(function() {
      $('#loadMore').click(function() {
        var url = $(this).data('next-url');
        if(url) {
          $('#loader').show();
          $('.ri-restart-line').hide();
          $.ajax({
            url: url,
            type: 'GET',
            success: function(response) {
              var blogs = $(response.blogsHtml);
              var columns = $('#blogs-row').children('.clm');

              blogs.each(function(index, blog) {
                var columnIndex = index % columns.length;
                $(columns[columnIndex]).find('.single-column').append(blog);
              });

              if(response.next_page_url) {
                $('#loadMore').data('next-url', response.next_page_url);
              } else {
                $('#loadMore').hide();
              }
            },
            complete: function() {
              $('#loader').hide();
              $('.ri-restart-line').show();
            }
          });
        }
      });
    });
  </script>
@endsection