@extends('layouts.main-app')

@section('title', 'SMN Ship Supplies')

@section('content')
  <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>

    <style>
        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }
        .ubuntu-font {
            font-family: 'Ubuntu';
        }

        
            /* ########################################### */

        /* Shrunk Navbar Style */
        #navbar.shrink {
            margin: 0 auto;
            width: 65%;
        }
        /* Shrunk Navbar Style */
        #navbar.unshrink {
            margin: 0 auto;
            width: 100%;
        }


    </style>


    <div class="">

             @include('layouts.header')
        {{-- news article--}}

      <section class="container mx-auto max-w-screen-lg py-10 mb-20 sm:mb-28 h-auto">
        <div class="mx-auto p-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Image Section -->
              <div>
                  <!-- Main Image -->
              <div
              class="border rounded-lg overflow-hidden mb-4 w-full h-[450px] flex justify-center items-center bg-gray-100 relative ">
              <img
                id="mainImage"
                src="{{ asset(json_decode($shipSuppliesItem->thumbnails, true)[0] ?? 'assets/smn/glove.webp') }}"
                alt="Chipping Goggles"
                class="w-full h-full object-cover"
              />
            </div>
            <!-- Thumbnail Images -->
            <div class="flex flex-wrap gap-2">
              @php
                  $thumbnails = json_decode($shipSuppliesItem->thumbnails, true) ?? [];
              @endphp
              @foreach($thumbnails as $thumbnail)
                  <img
                      onclick="changeImage(this)"
                      src="{{ asset($thumbnail) }}"
                      alt="Thumbnail"
                      class="border rounded-lg cursor-pointer object-cover size-24 sm:size-32"
                  />
              @endforeach
            </div>

              </div>
              <!-- Details Section -->
              <div class="roboto-font">
                <h1 class="text-xl font-bold mb-2">
                  {{ $shipSuppliesItem->title }} 
                </h1>
                <p class=" text-md mb-4 text-[#719ace]">{{ $shipSuppliesItem->category->name }}</p>
                <p class="text-gray-700 mb-4">
                  {!! $shipSuppliesItem->description !!}
                </p>
                <p class="{{ $shipSuppliesItem->availability_status ? 'text-green-500' : 'text-red-500' }} mb-4">
                  {{ $shipSuppliesItem->availability_status ? 'In Stock' : 'Out of Stock' }}
                </p>
             
                <!-- Share Section -->
                <div class="mt-8 flex flex-col justify-start items-start space-x-4">
                  <span class="text-gray-700">Share</span>
                  <button class="hover:bg-gray-200 transition">
                    <i class='bx bxs-share bx-flip-horizontal text-2xl' ></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <script>
        function changeImage(element) {
          const mainImage = document.getElementById("mainImage");
          mainImage.src = element.src;
          mainImage.alt = element.alt;
        }
      </script>
      

      </div>
      

 

     @endsection


<!-- Add this script to handle the shrinking navbar event -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
      const navbar = document.getElementById('navbar');
      window.addEventListener('scroll', function() {
          if (window.innerWidth >= 1200 && window.scrollY > 100) { // Check for mobile screen
              navbar.classList.add('shrink');
              navbar.classList.remove('unshrink');
          } else {
              navbar.classList.remove('shrink');
              navbar.classList.add('unshrink');
          }
      });
  });
</script>