@extends('layout.style')
<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="#hero" class="active">Home<br></a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#portfolio">Devices</a></li>
          <li><a href="#portfolio2">Cosmetics</a></li>
          <li><a href="#recent-posts">Post</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
      </nav>
      <a class="btn-getstarted flex-md-shrink-0" href="index.html#about">Get Started</a>
    </div>
  </header>
@section('content')
<main class="main">
<!-- Hero Section -->
<section id="hero" class="hero section">
  <!-- Video Background -->
  <div class="video-background">
    <video autoplay muted loop>
      <source src="{{ asset('public/assets/img/logo_mot.mp4')}}" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>

  <div class="container">
    <div class="row gy-4">
      
    <div class="d-flex flex-column flex-md-row" data-aos="fade-up" data-aos-delay="200">
    <a href="#about" class="btn-get-started">Get Started <i class="bi bi-arrow-right"></i></a>
    <a href="{{ asset('public/assets/img/worldgateid.mp4')}}" class="glightbox btn-watch-video d-flex align-items-center justify-content-center ms-0 ms-md-4 mt-4 mt-md-0" 
       data-gallery="video-gallery" data-type="video">
        <i class="bi bi-play-circle"></i><span>Watch Video</span>
    </a>
   </div>  
      <!-- Include Glightbox JavaScript -->


    </div>
  </div>
  <style>  
    /* Video Background Styling */
     #hero {
     position: relative;
     overflow: hidden;
     }

     .video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      }

     .video-background video {
       width: 100%;
      height: 100%;
       object-fit: cover;
        }

       /* Ensure content is readable */
       #hero .container {
        position: relative;
        z-index: 1;
        }

       #hero::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
      height: 100%;
      z-index: 0;
      }
  </style>
</section>
<!-- About Section -->
<section id="about" class="about section">

  <div class="container" data-aos="fade-up">
    <div class="row gx-0">

      <div class="col-lg-6 d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200">
        <div class="content">
          <h3>Who We Are</h3>
          <h2>We are a dedicated team committed to delivering state-of-the-art laser devices and premium consumables, supporting dermatologists in achieving excellence in skincare.</h2>
      

        </div>
      </div>

      <div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200">
        <img src="assets/img/hero-bg1.jpg" class="img-fluid" alt="">
      </div>

    </div>
  </div>

</section>
<!-- /About Section -->
<!-- Stats Section -->
<section id="stats" class="stats section">

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

    <div class="row gy-4">

      <div class="col-lg-3 col-md-6">
        <div class="stats-item d-flex align-items-center w-100 h-100">
          <i class="bi bi-emoji-smile color-blue flex-shrink-0"></i>
          <div>
            <span data-purecounter-start="0" data-purecounter-end="{{$information->customer}}" data-purecounter-duration="1" class="purecounter"></span>
            <p>Happy Clients</p>
          </div>
        </div>
      </div><!-- End Stats Item -->

      <div class="col-lg-3 col-md-6">
        <div class="stats-item d-flex align-items-center w-100 h-100">
          <i class="bi bi-journal-richtext color-orange flex-shrink-0" style="color: #ee6c20;"></i>
          <div>
            <span data-purecounter-start="0" data-purecounter-end="{{$information->device}}" data-purecounter-duration="1" class="purecounter"></span>
            <p>Devices</p>
          </div>
        </div>
      </div><!-- End Stats Item -->

      <div class="col-lg-3 col-md-6">
        <div class="stats-item d-flex align-items-center w-100 h-100">
          <i class="bi bi-headset color-green flex-shrink-0" style="color: #15be56;"></i>
          <div>
            <span data-purecounter-start="0" data-purecounter-end="{{$information->hour}}" data-purecounter-duration="1" class="purecounter"></span>
            <p>Hours Of Support</p>
          </div>
        </div>
      </div><!-- End Stats Item -->

      <div class="col-lg-3 col-md-6">
        <div class="stats-item d-flex align-items-center w-100 h-100">
          <i class="bi bi-people color-pink flex-shrink-0" style="color: #bb0852;"></i>
          <div>
            <span data-purecounter-start="0" data-purecounter-end="{{$information->team}}" data-purecounter-duration="1" class="purecounter"></span>
            <p>Hard Workers</p>
          </div>
        </div>
      </div><!-- End Stats Item -->

    </div>

  </div>

</section><!-- /Stats Section -->
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio section">
    <div class="container section-title" data-aos="fade-up">
        <h2>Devices</h2>
       
    </div>

    <div class="container">
        <div class="isotope-layout" data-default-filter=".filter-Hair-Removal" data-layout="masonry" data-sort="original-order">
            <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
                <li data-filter="*" >All</li>
                @foreach($tags as $tag)
                <li data-filter=".filter-{{ $tag->name }}" 
    class="@if($tag->name === 'Hair-Removal') filter-active @endif">
    {{ $tag->name }}
  </li>
                @endforeach
            </ul>

            <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">
               @foreach($devices as $device)
                <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-{{ $device->tag }}">
                 <div class="portfolio-content h-100">
                  @if ($device->photos->isNotEmpty())
                    <img src="{{ ($device->photos->first()->photo) }}" class="img-fluid" alt="{{ $device->name }}">
                  @else
                    <img src="{{ ('path-to-default-image.jpg') }}" class="img-fluid" alt="{{ $device->name }}">
                  @endif
                  <div class="portfolio-info">
                    <h4>{{ $device->name }}</h4>
                    <p>{{ $device->shortdescription }}</p>
                    <a href="{{ $device->photos->isNotEmpty() ? ($device->photos->first()->photo) : '#' }}" 
                       title="{{ $device->name }}" 
                       data-gallery="portfolio-gallery-app" 
                       class="glightbox preview-link">
                       <i class="bi bi-zoom-in"></i>
                    </a>
                    <a href="{{ route('devices.show', $device->id) }}" title="More Details" class="details-link">
                        <i class="bi bi-link-45deg"></i>
                    </a>
                  </div>
                 </div>
                </div>
               @endforeach
            </div>

        </div>
    </div>
</section>
<!-- /Portfolio Section -->
<!-- Features Section -->
<section id="features" class="features section">

  <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <h2>Features</h2>
    <p>Our Advacedd Features<br></p>
  </div><!-- End Section Title -->

  <div class="container">

    <div class="row gy-5">

      <div class="col-xl-6" data-aos="zoom-out" data-aos-delay="100">
        <img src="assets/img/features.png" class="img-fluid" alt="">
      </div>

      <div class="col-xl-6 d-flex">
        <div class="row align-self-center gy-4">

          <div class="col-md-6" data-aos="fade-up" data-aos-delay="200">
            <div class="feature-box d-flex align-items-center">
              <i class="bi bi-check"></i>
              <h3>Advanced Technology</h3>
            </div>
          </div><!-- End Feature Item -->

          <div class="col-md-6" data-aos="fade-up" data-aos-delay="300">
            <div class="feature-box d-flex align-items-center">
              <i class="bi bi-check"></i>
              <h3>High-Quality Consumables</h3>
            </div>
          </div><!-- End Feature Item -->

          <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
            <div class="feature-box d-flex align-items-center">
              <i class="bi bi-check"></i>
              <h3>Tailored Solutions</h3>
            </div>
          </div><!-- End Feature Item -->

          <div class="col-md-6" data-aos="fade-up" data-aos-delay="500">
            <div class="feature-box d-flex align-items-center">
              <i class="bi bi-check"></i>
              <h3>Expert Support</h3>
            </div>
          </div><!-- End Feature Item -->

          <div class="col-md-6" data-aos="fade-up" data-aos-delay="600">
            <div class="feature-box d-flex align-items-center">
              <i class="bi bi-check"></i>
              <h3>Safety and Compliance</h3>
            </div>
          </div><!-- End Feature Item -->

          <div class="col-md-6" data-aos="fade-up" data-aos-delay="700">
            <div class="feature-box d-flex align-items-center">
              <i class="bi bi-check"></i>
              <h3>Cost-Effective</h3>
            </div>
          </div><!-- End Feature Item -->

          
          <div class="col-md-6" data-aos="fade-up" data-aos-delay="700">
            <div class="feature-box d-flex align-items-center">
              <i class="bi bi-check"></i>
              <h3>Training and Education</h3>
            </div>
          </div><!-- End Feature Item -->
          
        </div>
      </div>

    </div>

  </div>

</section>
<!-- /Features Section -->
<!-- Services Section -->
<section id="services" class="services section">

  <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <h2>Services</h2>
    <p>Check Our Services<br></p>
  </div><!-- End Section Title -->

  <div class="container">

    <div class="row gy-4">

      <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
        <div class="service-item item-cyan position-relative">
          <i class="bi bi-activity icon"></i>
          <h3>Training</h3>
        </div>
      </div><!-- End Service Item -->

      <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
        <div class="service-item item-orange position-relative">
          <i class="bi bi-broadcast icon"></i>
          <h3>Warranty</h3>
       </div>
      </div><!-- End Service Item -->

      <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
        <div class="service-item item-teal position-relative">
          <i class="bi bi-easel icon"></i>
          <h3>Marketing & Promoting</h3>
        </div>
      </div><!-- End Service Item -->

      <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
        <div class="service-item item-red position-relative">
          <i class="bi bi-bounding-box-circles icon"></i>
          <h3>Follow Up</h3>
        </div>
      </div><!-- End Service Item -->

      <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500">
        <div class="service-item item-indigo position-relative">
          <i class="bi bi-calendar4-week icon"></i>
          <h3>Installation</h3>
        </div>
      </div><!-- End Service Item -->

      <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="600">
        <div class="service-item item-pink position-relative">
          <i class="bi bi-chat-square-text icon"></i>
          <h3>Service & Maintenance</h3>
        </div>
      </div><!-- End Service Item -->

    </div>

  </div>

</section>
<!-- /Services Section -->
<!-- Portfolio Section2 -->
<section id="portfolio2" class="portfolio section2">
    <div class="container section-title" data-aos="fade-up">
        <h2>Cosmetics</h2>
       
    </div>

    <div class="container">
        <div class="isotope-layout" data-default-filter=".filter-Filler" data-layout="masonry" data-sort="original-order">
            <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
                <li data-filter="*" >All</li>
                @foreach($cosmteictags as $tag)
                <li data-filter=".filter-{{ $tag->name }}" 
    class="@if($tag->name === 'Filler') filter-active @endif">
    {{ $tag->name }}
  </li>
                @endforeach
            </ul>

            <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">
               @foreach($cosmetic as $cosmteics)
                <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-{{ $cosmteics->tag }}">
                 <div class="portfolio-content h-100">
                  @if ($cosmteics->cosmetictagphoto->isNotEmpty())
                    <img src="{{ ($cosmteics->cosmetictagphoto->first()->photo) }}" 
                    class="img-fluid" alt="{{ $cosmteics->name }}">
                  @else
                    <img src="{{ asset('path-to-default-image.jpg') }}" class="img-fluid" alt="{{ $cosmteics->name }}">
                  @endif
                  <div class="portfolio-info">
                    <h4>{{ $cosmteics->name }}</h4>
                    <p>{{ $cosmteics->shortdescription }}</p>
                    <a href="{{ $cosmteics->cosmetictagphoto->isNotEmpty() ? ($cosmteics->cosmetictagphoto->first()->photo) : '#' }}" 
                       title="{{ $cosmteics->name }}" 
                       data-gallery="portfolio-gallery-app" 
                       class="glightbox preview-link">
                       <i class="bi bi-zoom-in"></i>
                    </a>
                    <a href="{{ route('cosmetics.show', $cosmteics->id) }}" title="More Details" class="details-link">
                        <i class="bi bi-link-45deg"></i>
                    </a>
                  </div>
                 </div>
                </div>
               @endforeach
            </div>

        </div>
    </div>
</section>
<!-- /Portfolio Section2 -->
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials section">

  <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <h2>Testimonials</h2>
    <p>What they are saying about us<br></p>
  </div><!-- End Section Title -->

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

    <div class="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
          },
          "breakpoints": {
            "320": {
              "slidesPerView": 1,
              "spaceBetween": 40
            },
            "1200": {
              "slidesPerView": 3,
              "spaceBetween": 1
            }
          }
        }
      </script>
      <div class="swiper-wrapper">
        @foreach ($testimonials as $testimonial)
          <div class="swiper-slide">
            <div class="testimonial-item">
              <div class="stars">
                @for ($i = 1; $i <= $testimonial->rate; $i++)
                  <i class="bi bi-star-fill"></i>
                @endfor
                @for ($i = $testimonial->rate + 1; $i <= 5; $i++)
                  <i class="bi bi-star"></i>
                @endfor
              </div>
              <p>{{ $testimonial->comment }}</p>
              <div class="profile mt-auto">
                <img src="{{ ($testimonial->photo) }}" class="testimonial-img" alt="">
                <h3>{{ $testimonial->name }}</h3>
                <h4>{{ $testimonial->job }}</h4>
              </div>
            </div>
          </div><!-- End swiper-slide -->
        @endforeach
      </div><!-- End swiper-wrapper -->
      <div class="swiper-pagination"></div>
    </div>

  </div>

</section>
<!-- /Testimonials Section -->
<!-- Clients Section -->
<section id="clients" class="clients section">
  <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <h2>Brands</h2>
    <p>We work with best brands<br></p>
  </div><!-- End Section Title -->
  <div class="container" data-aos="fade-up" data-aos-delay="100">
    <div class="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
          },
          "breakpoints": {
            "320": {
              "slidesPerView": 2,
              "spaceBetween": 40
            },
            "480": {
              "slidesPerView": 3,
              "spaceBetween": 60
            },
            "640": {
              "slidesPerView": 4,
              "spaceBetween": 80
            },
            "992": {
              "slidesPerView": 6,
              "spaceBetween": 120
            }
          }
        }
      </script>
      <div class="swiper-wrapper align-items-center">
      @foreach ($brand as $brands)
      <div class="swiper-slide"><img src="{{ ($brands->logo) }}" class="img-fluid" alt=""></div>
      @endforeach
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</section>
<!-- /Clients Section -->
<!-- Posts Section -->
<section id="recent-posts" class="recent-posts section">
  <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <h2>Recent Activity</h2>
  </div><!-- End Section Title -->
  <div class="container">
    <div class="row gy-5">
    @foreach($posts as $post)
      <div class="col-xl-4 col-md-6">
        <div class="post-item position-relative h-100" data-aos="fade-up" data-aos-delay="200">
          <div class="post-img position-relative overflow-hidden">
            @if ($device->photos->isNotEmpty())
                    <img src="{{ ($post->postphotos->first()->photo) }}" class="img-fluid" >
                  @else
                    <img src="{{ ('path-to-default-image.jpg') }}" class="img-fluid" ">
                  @endif
            
            <span class="post-date">{{ $post->created_at->format('M j') }}</span>
          </div>
          <div class="post-content d-flex flex-column">
            <h3 class="post-title">{{ $post->title }}</h3>
            <div class="meta d-flex align-items-center">
              <div class="d-flex align-items-center">
                <i class="bi bi-folder2"></i> <span class="ps-2">{{ $post->created_at->format('Y') }}</span>
              </div>
            </div>
            <hr>
            <a href="{{route('posts.show',$post->id)}}" class="readmore stretched-link"><span>Show More</span><i class="bi bi-arrow-right"></i></a>
          </div>
        </div>
      </div><!-- End post item -->
      @endforeach
    </div>
  </div>
</section>
<!-- /Recent Posts Section -->
<!-- Contact Section -->
<section id="contact" class="contact section">

  <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <h2>Contact</h2>
    <p>Contact Us</p>
  </div><!-- End Section Title -->

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

    <div class="row gy-4">

      <div class="col-lg-6">

        <div class="row gy-4">
          <div class="col-md-6">
            <div class="info-item" data-aos="fade" data-aos-delay="200">
              <i class="bi bi-geo-alt"></i>
              <h3>Address</h3>
              <p>Iraq/Erbil</p>
              <p>Mahmood Alhafeed Square</p>
              <p>Qessab Building</p>
            </div>
          </div><!-- End Info Item -->

          <div class="col-md-6">
            <div class="info-item" data-aos="fade" data-aos-delay="300">
              <i class="bi bi-telephone"></i>
              <h3>Call Us</h3>
              <p>+964 751 235 4023  Erbil</p>
              <p>+964 751 441 1855  Manger</p>
              <p>+964 751 434 3415  Service</p>
            </div>
          </div><!-- End Info Item -->

          <div class="col-md-6">
            <div class="info-item" data-aos="fade" data-aos-delay="400">
              <i class="bi bi-envelope"></i>
              <h3>Email Us</h3>
              <p>sales@worldgate-medical.com</p>
             
            </div>
          </div><!-- End Info Item -->

          <div class="col-md-6">
            <div class="info-item" data-aos="fade" data-aos-delay="500">
              <i class="bi bi-clock"></i>
              <h3>Open Hours</h3>
              <p>Saturday - Thursday</p>
              <p>12:00PM - 08:00PM</p>
            </div>
          </div><!-- End Info Item -->

        </div>

      </div>
      @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
 @endif

 @if(session('error')) 
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
  @endif
 <div class="col-lg-6">
    <form id="contactForm" action="{{ route('contacts.store') }}" method="POST" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
        @csrf  
        <div class="row gy-4">

            <div class="col-md-6">
                <input type="text" name="name" class="form-control" placeholder="Your Name" required>
            </div>

            <div class="col-md-6">
                <input type="email" class="form-control" name="email" placeholder="Your Email" required>
            </div>

            <div class="col-12">
                <input type="text" class="form-control" name="subject" placeholder="Subject" required>
            </div>

            <div class="col-12">
                <textarea class="form-control" name="message" rows="6" placeholder="Message" required></textarea>
            </div>

            <div class="col-12 text-center">
                <div class="loading" style="display: none;">Loading...</div>
                <div class="error-message" style="display: none;">Error occurred</div>
                <div class="sent-message" style="display: none;">Your message has been sent successfully!</div>

                <button type="submit">Send Message</button>
            </div>

        </div>
    </form>
 </div>

    </div>

  </div>

</section><!-- /Contact Section -->


</main>

@endsection