@extends('front.layout.Main')
@section('content')


      <div class="main">
      
            <!-- Loder Start -->
            <div class="loader-box">
                  <div class="loader">
                        <span class="circle-1"></span>
                        <span class="circle-2"></span>
                        <span class="circle-3"></span>
                        <span class="circle-4"></span>
                        <span class="circle-5"></span>
                  </div>
            </div>
            <!-- Loder End -->
      
            
      
            <!-- Banner Start -->
            <!-- Banner End -->
      
            <!-- Blog Start -->
            <br><br>
            <section class="page-blog-list">
                  <div class="container">
                        <div class="row">
                              <div class="col-lg-8">
                                          <div class="sidebar-box search-box wow left-animation" data-wow-delay="0.2s">
                                                <div class="sub-title-box left">
                                                      <p class="sub-title"> Cari </p>
                                                      <span class="line1"></span>
                                                </div>
                                                <form>
                                      <div class="form-box">
                                          <form action="/blogs">
                                                <input type="text" class="form-input" placeholder="Cari Topik..." required="" name="search"  value="{{request('search')}}">
                                                <button type="submit" class="sec-btn"><span><i class="fa fa-search" aria-hidden="true"></i></span></button>
                                          </form>
                                      </div>
                                  </form>
                                          </div>
                                    <div class="blog-page-content">
                                          <div class="row">
                                                @if ($blogs->count())
                                                @foreach($blogs as $blog)
                                                <div class="col-md-6">
                                                      <div class="blog-post wow fadeup-animation" data-wow-delay="0.2s">
                                                            <div class="blog-post-box img-box">
                                                                  <div class="img back-img" style="background-image: url('{{ asset('foto_or_video_blog/' .  ($blog->image_video_blog))}}');"></div>
                                                            </div>
                                                            <div class="blog-post-text">
                                                                  <div class="blog-date">
                                                                        <span>{{$blog->updated_at->format('M d Y')}}</span>
                                                                  </div>
                                                                  <h3 class="h3-title">{{$blog->Judul}}</h3>
                                                                  <p>{!!Str::limit(strip_tags($blog->Konten, 100))!!}</p>
                                                                  <a href="{{"blogdetail/" . $blog['id'] }}" class="read-more" title="Baca Lebih Lanjut">Baca Lebih Lanjut</a>
                                                            </div>
                                                      </div>
                                                </div> 
                                                @endforeach
                                                @else
                                                
                                                      <p> <b>Konten tidak ditemukan</b></p> 
                                                
                                                @endif
                                    
                                          </div> 
                                          <div class="row">
                                                <div class="col-12">
                                                      <div class="pagination wow fadeup-animation" data-wow-delay="0.2s">
                                                            <ul>
                                                                  {{ $blogs->links('front.common.Paginator') }}
                                                            </ul>
                                                      </div>
                                                </div>
                                          </div>
                                    </div>
                              </div>
                              <div class="col-lg-4">
                                    <div class="sidebar">
                                          <div class="sidebar-box recent-post wow left-animation" data-wow-delay="0.2s">
                                                <div class="sub-title-box left">
                                                      <p class="sub-title">Berita Terkini</p>
                                                      <span class="line1"></span>
                                                </div>
                                                @foreach ($lastest_blogs as $lastest_blog)
                                                <div class="recent-post-bx">
                                      <div class="recent-img back-img" style="background-image: url('{{ asset('foto_or_video_blog/' .  ($lastest_blog->image_video_blog))}}');"></div>
                                      <div class="recent-text">    
                                          <p><a href="{{"blogdetail/" . $lastest_blog['id']}}">{{$lastest_blog->Judul}}</a></p>
                                          <span>{{$lastest_blog->updated_at->format('M d Y')}}</span>
                                          </div>
                                    </div>  
                                    @endforeach   
                              </div>
                                          
                                          <div class="sidebar-box category wow left-animation" data-wow-delay="0.2s">
                                                <div class="sub-title-box left">
                                                      <p class="sub-title">Kategori</p>
                                                      <span class="line1"></span>
                                                </div>
                                                <ul>  
                                                      @foreach ($categories as $category)
                                                                                <li><a href="/blog?category={{($category->id)}}">{{$category->name}} <span>{{$category->categoryBlog->count()}}</span></a></li>  
                                                      @endforeach
                                                      
                                  </ul>
                                          </div>
                                    </div>
                              </div>
                        </div>
                  </div>
            </section>
            <!-- Blog End -->
      
           <!-- Get Started Start -->
           <!-- Get Started Start -->
          <!-- Get Started Start -->
           <section class="main-get-started">
                  <div class="container">
                        <div class="row">
                              <div class="col-12">
                                    <div class="get-started-box wow fadeup-animation" data-wow-delay="0.2s">
                                          <div class="get-started-text">
                                                <h2 class="h2-title"> <span style="color: white;"> Sudah Siap Untuk Mencoba ORBIT360? </span> </h2>
                                                <p>Sampaikan ekspektasi Anda kepada kami!</p>
                                          </div>
                                          <div class="get-started-btn">
                                                <a href="https://wa.link/otldil" target="_blank" class="sec-btn gradient" title="Hubungi ORBIT360"><span> Coba Gratis</span></a>
                                          </div>
                                    </div>
                              </div>
                        </div>
                  </div>
            </section>
            <!-- Get Started End -->
      
            <!-- Footer Start -->
            <footer class="site-footer">
                  <div class="banner-circle-box">
                        <span class="circle one right animate-this"></span>
                        <span class="circle two right animate-this"></span>
                        <span class="circle three right animate-this"></span>
                        <span class="circle four right animate-this"></span>
                        <span class="circle five left animate-this"></span>
                        <span class="circle six left animate-this"></span>
                        <span class="circle seven left animate-this"></span>
                        <span class="circle eight left animate-this"></span>
                        <span class="circle nine left animate-this"></span>
                        <span class="circle ten left animate-this"></span>
                  </div>
                  <span class="shape">
                        <img width="1920" height="189" src="public/assets/images/shape.svg" alt="Shape">
                  </span>
                  <div class="container">
                        <div class="row">
                              <div class="col-lg-4 wow right-animation" data-wow-delay="0.2s">
                                    <div class="footer-info">
                                          <div class="footer-logo">
                                                <a href="{{url('beranda')}}" title="ORBIT360">
                                                      <img src="public/assets/images/orbit logo.png" alt="ORBIT360">
                                                </a>
                                          </div>
                                          
                                          <p>ORBIT360 merupakan legacy (almh) Ibu Ainun Habibie dan (alm) Bapak B.J. Habibie, yang berawal dari majalah Orbit, yaitu majalah Iptek untuk anak-anak. Mengikuti perkembangan zaman dan teknologi, Orbit bertransformasi menjadi. ORBIT360 dengan visi yang sama, meningkatkan kualitas pendidikan dan sumber daya manusia Indonesia.</p>
                                          
                                           <div class="social-icon">
                                                <a href="https://www.facebook.com/profile.php?id=100070201399534" target="_blank" title="Hubungi Kami melalui Facebook"><i class="fa fa-facebook" aria-hilien="true"></i></a>
                                                <a href="https://www.instagram.com/orbit360.id/" target="_blank" title="Hubungi Kami Melalui Instagram"><i class="fa fa-instagram" aria-hilien="true"></i></a>
                                                <a href="https://www.linkedin.com/company/orbit360id/"target="_blank" title="Hubungi Kami Melalui LinkedIn"><i class="fa fa-linkedin" aria-hilien="true"></i></a>
                                          </div>
                                    </div>
                              </div>
                              <div class="col-lg-3 wow fadeup-animation" data-wow-delay="0.2s">
                                    <div class="our-link footer-service-link">
                                          <div class="our-link">
                                                <h6 class="footer-title"> Navigasi </h6>
                                                <ul>
                                        <li><a href="{{url('beranda')}}" title="Beranda"> Beranda</a></li>
            							<li><a href="{{url('tentang')}}" title="Tentang"> Tentang </a></li>
            							<li><a href="{{url('produk')}}" title="Produk"> Produk </a></li>
            							<li><a href="{{url('blog')}}" title="Blog">Blog</a></li>
            							<li><a href="{{url('hubungi')}}" title="Hubungi Kami">Hubungi Kami</a></li>
                                        <li><a href="https://wa.link/otldil" target="_blank" title="Uji Coba Sekarang">Coba Gratis</a></li>
                                                </ul>
                                          </div>
                                    </div>
                              </div>
                              <div class="col-lg-2 wow fadeup-animation" data-wow-delay="0.2s">
                                    <div class="our-link footer-service-link">
                                          <h6 class="footer-title"> Produk </h6>
                                          <ul>
                                    <li><a href="{{url('produk')}}" title="Aplikasi Guru"> Aplikasi Guru </a></li>
            						<li><a href="{{url('produk')}}" title="Aplikasi Sekolah"> Aplikasi Sekolah</a></li>
            						<li><a href="{{url('produk')}}" title="Aplikasi Siswa"> Aplikasi Siswa </a></li>
            						<li><a href="{{url('produk')}}" title="Aplikasi Wali Murid"> Aplikasi Wali Murid</a></li>
                                    </div>
                              </div>
                              <div class="col-lg-3 wow left-animation" data-wow-delay="0.2s">
                                    <div class="footer-contact-link">
                                          <h6 class="footer-title"> Hubungi Kami </h6>
                                          <div class="contact-link-box">
                                                <div class="icon"><img width="16" height="16" src="public/assets/images/call-icon.svg" alt="Call"></div>
                                                <div class="contact-link-text">
                                                      <a href="https://wa.link/otldil" target="_blank" title="Hubungi Kami Melalui 0851-6140-0360">0851-6140-0360</a>
                                                </div>
                                          </div>
                                          <div class="contact-link-box">
                                                <div class="icon"><img width="21" height="16" src="public/assets/images/mail-icon.svg" alt="Call"></div>
                                                <div class="contact-link-text">
                                                      <a href="mailto:info@orbit360.id" target="_blank" title="Hubungi Kami Melalui info@orbit360.id">info@orbit360.id</a>
                                                </div>
                                                <div class="contact-link-text">
                                                      <a href="mailto:services@email.com" title="Mail on services@email.com"></a>
                                                </div>
                                          </div>
                                          <div class="contact-link-box add">
                                                <div class="icon"><img width="11" height="16" src="public/assets/images/map-icon.svg" alt="Call"></div>
                                                <div class="contact-link-text">
                                                      <a href="https://www.google.com/maps/place/ORBIT360/@-6.2735327,106.8138914,17z/data=!3m1!4b1!4m5!3m4!1s0x2e69f156960bf8ab:0x9758fe42f248d309!8m2!3d-6.2735327!4d106.8160801;" target="_blank" title="Jl. Kemang Sel. No.98, RT.11/RW.4, Cilandak Tim.">The Habibie Center Lt.2,  Jl. Kemang Sel. No.98, Jakarta Selatan 12560</a>
                                                </div>
                                          </div>
                                    </div>
                              </div>
                        </div>
                  </div>
                  <div class="footer-bottom">
                        <div class="container">
                              <div class="row">
                                    <div class="col-12">
                                          <div class="footer-bottom-box wow fadeIn">
                                                <div class="copy-right">
                                                       <p>Copyright © {{ date('Y') }} ORBIT360. All rights reserved.</p>
                                                </div>
                                                <div class="footer-bottom-link">
                                                      <ul>
                                                            <li><a href="{{url('kebijakan')}}" title="Kebijakan Privasi"> Kebijakan Privasi </a></li>
                                                            <li><a href="{{url('syarat')}}" title="Syarat Dan Ketentuan"> Syarat dan Ketentuan </a></li>
                                                            <li><a href="{{url('atribusi')}}" title="Atribusi Data"> Atribusi Data</a></li>
                                                      </ul>
                                                </div>
                                          </div>
                                    </div>
                              </div>
                        </div>
                  </div>
            </footer>
            <!-- Footer End -->
      
            <!-- Scroll To Top Start -->
            <a href="https://wa.link/otldil" target="_blank" id="scroll-to-top" class="scroll-to-top">
                  <i class="fa fa-whatsapp" aria-hidden="disabled"></i>
            </a>
            <!-- Scroll To Top End -->
@endsection