@extends('layout.style')

@section('content')
<header id="header" class="header d-flex align-items-center fixed-top">
    <div class="container-fluid container-xl position-relative d-flex align-items-center">
      <a href="index.html" class="logo d-flex align-items-center me-auto">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <img src="assets/img/worldgate_logo.png" alt="">
        <h1 class="sitename">Worldgate Medical</h1>
      </a>
      <nav id="navmenu" class="navmenu">
        <ul>
          <li><a href="\public">Home<br></a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#" >Devices</a></li>
          <li><a href="#">Cosmetics</a></li>
          <li><a href="#" class="active">Post</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
      </nav>
    </div>
  </header>
<main class="main">
    <!-- Page Title -->
    <div class="page-title">
      <div class="heading">
        <div class="container">
          <div class="row d-flex justify-content-center text-center">
            <div class="col-lg-8">
              <h1>Post Details</h1>
            </div>
          </div>
        </div>
      </div>
      <nav class="breadcrumbs">
        <div class="container">
          <ol>
            <li>Home</li>
            <li class="current active" ><a href="">Post Details</a></li>
          </ol>
        </div>
      </nav>
    </div><!-- End Page Title -->

    <!-- Portfolio Details Section -->
<section id="gallery" class="gallery section">

 <div class="container-fluid" data-aos="fade-up" data-aos-delay="100">
 <div class="row gy-4 justify-content-center">
 @foreach ($postphoto as $photos)
   <div class="col-xl-3 col-lg-4 col-md-6">
     <div class="gallery-item h-100">
       <img src="{{ asset('public/'.$photos->photo) }}" class="img-fluid" alt="">
       <div class="gallery-links d-flex align-items-center justify-content-center">
         <a href="{{ asset('public/'.$photos->photo) }}" title="WorldGate" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
       </div>
     </div>
   </div><!-- End Gallery Item -->
   @endforeach
   </div>
 </div>
</section>

  </main>
@endsection