@extends('layouts.main-app')

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

@section('content')

    <style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }
        .ubuntu-font {
            font-family: 'Ubuntu', sans-serif;
        }  
        
        .open-sans {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
        /* ########################################### */

        /* 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  open-sans   mt-4 font font-semibold  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">
                   {{ $brands->name ?? '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">
                            @foreach($brandItems as $item)
                                <div class="swiper-slide" data-name="{{ $item->name }}" data-model="{{ $item->model }}" data-specification="{{ $item->specification }}" data-standard="{{ $item->standard }}" data-size="{{ $item->size }}" data-color="{{ $item->color }}">
                                    @php
                                    $images = json_decode($item->image, true);
                                @endphp
                                    <img id="imgclicked" src="{{ asset($images[0] ?? '') }}" alt="{{ $item->name }}" id class="object-contain scale-75 w-full h-full">
                                </div>
                            @endforeach
                        </div>  
                            <button class="swiper-button-next scale-50 bg-black text rounded-full p-8 "></button>

            
                        <button class="swiper-button-prev scale-50 bg-black text rounded-full p-8  "></button>
                    </div>
                    
                        <!-- Product Information -->
                    <div class=" container max-w-screen-md mx-auto px-4 mt-10 sm:pt-0" >
                            <h1 id="name" class="text-3xl font-bold ubuntu-font mb-10 open-sans">{!! $brandItems->first()->name ?? '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" id="model">{!! $brandItems->first()->model ?? 'Default Title' !!}</p>
                                </div>
                            <hr class="border-gray-500 my-4" />
                            <div class="flex justify-between items-start">
                                <h2 class="flex-1 font-semibold ">Specifications/ Features</h2>
                                <div class="flex-1 text-wrap break-words leading-[15px] whitespace-pre-line overflow-hidden text-md line">
                                    <p id="specification">{!! $brandItems->first()->specification !!}</p>
                                </div>
                            </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" id="standard">
                                        <p id="standard">{!! $brandItems->first()->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 id="size">{!! $brandItems->first()->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 id="color">{!! $brandItems->first()->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,
                on: {
                    slideChange: function () {
                        var activeSlide = this.slides[this.activeIndex];

                        document.getElementById('name').textContent = activeSlide.getAttribute('data-name') || 'Default Title';
                        document.getElementById('model').textContent = activeSlide.getAttribute('data-model') || 'Default Title';
                        document.getElementById('specification').innerHTML = activeSlide.getAttribute('data-specification') || '';
                        document.getElementById('standard').innerHTML = activeSlide.getAttribute('data-standard') || '';
                        document.getElementById('size').innerHTML = activeSlide.getAttribute('data-size') || '';
                        document.getElementById('color').innerHTML = activeSlide.getAttribute('data-color') || '';
                    }
                }
            });
        </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,
        on: {
            slideChange: function () {
                var activeSlide = this.slides[this.activeIndex];
                
                document.getElementById('model').textContent = activeSlide.getAttribute('data-model') || 'Default Title';
                document.getElementById('specification').innerHTML = activeSlide.getAttribute('data-specification') || '';
                document.getElementById('standard').innerHTML = activeSlide.getAttribute('data-standard') || '';
                document.getElementById('size').innerHTML = activeSlide.getAttribute('data-size') || '';
                document.getElementById('color').innerHTML = activeSlide.getAttribute('data-color') || '';
            }
        }
    });
</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>