@extends('layouts.main-app')

@section('title', 'About Us')

@section('content')

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

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

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

     
        @include('layouts.header')
        {{-- news article--}}
        
        <div class="">

            <div class="object-contain h-16 relative container mx-auto max-w-screen-lg mt-10 mb-6">
                <!-- Background Image -->
               
                <!-- Brand Items Name -->
                <h1
                    class=" tracking-tight ubuntu-font mt-4 font font-medium  uppercase w-full h-full flex flex-col justify-center items-center text-black text-xl sm:text-5xl md:text-5xl lg:text-6xl text-center container mx-auto max-w-screen-lg absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                   {{ $brandItem->title ?? 'Default Title' }}
                </h1>
            </div>
            {{-- section brand --}}
            <div class="container mx-auto  max-w-screen-lg m-20">
                <div class="">
                        <!-- Image and Arrows -->
                    <div class="swiper mySwiper h-2/6 sm:h-1/4 md:h-1/2 px-4">
                        <div class="swiper-wrapper  ">
                            @if (is_string($brandItem->thumbnails))
                                @foreach (json_decode($brandItem->thumbnails) as $thumbnail)
                                    <div class="swiper-slide flex justify-center items-center">
                                        <img src="{{ asset($thumbnail) }}" alt="Safety Helmet" class="bg-gray-200 ">
                                    </div>
                                @endforeach
                            @else
                                @foreach ($brandItem->thumbnails as $thumbnail)
                                    <div class="swiper-slide flex justify-center items-center">
                                        <img src="{{ asset($thumbnail) }}" alt="Safety Helmet" class="bg-gray-200 ">
                                    </div>
                                @endforeach
                            @endif
                            @if (empty($brandItem->thumbnails))
                                <div class="swiper-slide flex justify-center items-center">
                                    <p class="text-center text-gray-700">No thumbnail</p>
                                </div>
                            @endif
                       
                        </div>  
                        <div class="swiper-button-next scale-50 bg-black text rounded-full p-8  "></div>
                        <div class="swiper-button-prev scale-50 bg-black text rounded-full p-8  "></div>
                    </div>
                        <!-- Product Information -->
                    <div class=" container max-w-screen-sm mx-auto px-4 mt-10 sm:pt-0" >
                            <h1 class="text-3xl font-bold ubuntu-font mb-10">{{ $brandItem->title ?? 'Default Title' }}</h1>
                        <div class="space-y-8">
                                <div class=" flex justify-around items-start ">
                                    <h2 class="flex-1 font-semibold">Model</h2>
                                    <p class="flex-1">SMN Titan</p>
                                </div>
                            <hr class="border-gray-500 my-4" />
                                <div class=" flex justify-around items-start ">
                                    <h2 class="flex-1  font-semibold mt-4 ">Specifications/ Features</h2>
                                    <ul class="flex-1 list-disc list-inside text-gray-700 px-2">
                                        
                                        <p>{!! $brandItem->specification !!}</p>
                                      
                                    </ul>  
                                </div>
                            <hr class="border-gray-500 my-4" />
                                <div class="flex justify-around items-start">
                                    <h2 class="flex-1 font-semibold">Approved/ Standard</h2>
                                    <div class="flex-1 px-2">
                                        <p>{!! $brandItem->standard !!}</p>
                                    </div>
                                </div>
                            <hr class="border-gray-500 my-4" />
                                <div class="flex justify-around items-start">
                                    <h2 class="flex-1 font-semibold">Size</h2>
                                    <div class="flex-1">
                                        <p>{!! $brandItem->size !!}</p>
                                    </div>
                                </div>
                            <hr class="border-gray-500 my-4" />
                                <div class="flex justify-around items-start">
                                    <h2 class="flex-1 font-semibold">Colour</h2>
                                    <div class="flex-1">
                                        <p>{!! $brandItem->color !!}</p>
                                    </div>
                                </div>
                            <hr class="border-gray-500 my-4" />
                        </div>
                    </div>
                </div>
            </div>
        </div>


  <script>
            var swiper = new Swiper(".mySwiper", {
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                loop: true,
            });
        </script>
@endsection



<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        loop: true,
    });
</script>

<!-- 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 >= 900 && 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>