@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="#" class="active">Devices</a></li>
          <li><a href="#">Cosmetics</a></li>
          <li><a href="#">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>Device Details</h1>
            </div>
          </div>
        </div>
      </div>
      <nav class="breadcrumbs">
        <div class="container">
          <ol>
            <li>Home</li>
            <li class="current active" ><a href="">Device Details</a></li>
          </ol>
        </div>
      </nav>
    </div><!-- End Page Title -->

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

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row gy-4">

        <div class="col-lg-8">
    <div class="portfolio-details-slider swiper init-swiper">

        <script type="application/json" class="swiper-config">
            {
              "loop": true,
              "speed": 600,
              "autoplay": {
                "delay": 5000
              },
              "slidesPerView": "auto",
              "pagination": {
                "el": ".swiper-pagination",
                "type": "bullets",
                "clickable": true
              }
            }
        </script>

        <!-- Correct Swiper Structure -->
        <div class="swiper-wrapper align-items-center">
            @foreach ($photo as $photos)
                <div class="swiper-slide">
             <img src="{{ asset('public/'. $photos->photo) }}" alt="Image">
                </div>
            @endforeach
        </div>

        <div class="swiper-pagination"></div>
    </div>
</div>

          <div class="col-lg-4">
            <div class="portfolio-info" data-aos="fade-up" data-aos-delay="200">
              <h3>Device information</h3>
              <ul>
                <li><strong>Name</strong>: {{$device->name}}</li>
                <li><strong>Type</strong>: {{$device->type}}</li>
                <li><strong>Client</strong>: {{$device->client}}</li>
                <li><strong>Describe</strong>: {{$device->client}}</li>
                <li><strong> <a href="{{ asset('public/'.$device->catalog) }}" style="background-color: #07a566; border-color: #07a566;" class="btn btn-primary" download>
                <i class="bi bi-download"></i> Download Catalog
                </a></strong></li>
              </ul>
            </div>
            <div class="portfolio-description" data-aos="fade-up" data-aos-delay="300">
              <h2>Read more about the device</h2>
              <p>{{$device->detail}}</p>
            </div>
          </div>

        </div>

      </div>

    </section><!-- /Portfolio Details Section -->

  </main>
@endsection