@include('htmlpage.frontent.layout.app')
<section style="padding-top: 100px;">
  <div class="container">
      <div class="tabbed">
          <input type="radio" id="tab1" name="css-tabs" checked>
          <input type="radio" id="tab2" name="css-tabs">
          <input type="radio" id="tab3" name="css-tabs">
          <input type="radio" id="tab4" name="css-tabs">

          <ul class="tabs">
              <li class="tab"><label for="tab1">Gallery </label></li>
              <li class="tab"><label for="tab2">Video </label></li>

          </ul>

          <div class="tab-content">
              <div class="g-bg-color--sky-light">
                  <div class="container g-padding-y-80--xs g-padding-y-125--sm">

                      <div class="row">
                        @if ($listmediacat->isNotEmpty())
                        @foreach ($listmediacat as $listallmedia)
                        <div class=" col-md-6 mt-3">
                          <div class="blogHome">
                            <a href="{{ route('gallery', ['mediaCategory' => str_replace([' ', '_'], '-', $listallmedia->category)]) }}">
                              <div class="card" >
                                  <img src="{{ asset('storage/' . $listallmedia->image_path) }}" style="height: 350px;" alt="Card Background" />
                                      <div class="overlay">
                                          <div class="metta">
                                            <span >Meeting</span>
                                        </div>
                                  </div>
                              </div>
                            </a>
                            </div>
                        </div>
                        @endforeach
                        @else
                        <p>No galleries found for this project.</p>
                        @endif
                      </div>
                      <!--<div class="text-center">
                        <a href="gallery.html"
                        class="text-uppercase s-btn s-btn--md s-btn--black-brd g-radius--50 text-white mt-5">View more </a>
                      </div>-->
                  </div>
              </div>

          </div>

          <div class="tab-content">
              <div class="g-bg-color--sky-light">
                  <div class="container g-padding-y-80--xs g-padding-y-125--sm">

                      <div class="row">
                          <div class="col-sm-4 g-margin-b-30--xs g-margin-b-0--md">
                              <!-- News -->
                              <article>
                                  <iframe width="400" height="300" src="https://www.youtube.com/embed/_MPs3YmRwTA"
                                      title="Modern Living Room Interior Design | New Decor Ideas" frameborder="0"
                                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                      allowfullscreen></iframe>
                              </article>
                              <!-- End News -->
                          </div>
                      </div>
                     <!-- <div class="text-center">
                          <a href="video.html"
                              class="text-uppercase s-btn s-btn--md s-btn--black-brd g-radius--50 text-white">View more </a>
                      </div> -->
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>
@include('htmlpage.frontent.layout.footer')