@extends('layouts.main-app')

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

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

    <style>

select {
    background:none;
padding:0;
}
        .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%;
        }
        /* Hides scrollbar for all browsers */
        .scrollbar-hide {
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE 10+ */
        }

        .scrollbar-hide::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
    </style>


    <div class="">

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

        <!-- Brand Section -->
        <section class="container max-w-screen-lg mx-auto">
            <div class="px-4 py-6 flex">
                <div class=" w-full">
                      <!-- Top Section -->
                    <div class="flex justify-between items-center mb-4 border-gray-400 border-[1.6px] p-2 rounded-md px-2">
                        <div class="flex space-x-3">
                            <span>{{ $shipSupplies->firstItem() }} - {{ $shipSupplies->lastItem() }}</span> 
                            <span class="hidden sm:block md:block lg:block">of {{ $shipSupplies->total() }} results</span> 
                        </div>

                        <div class="border-[#c0c0c0] border-[1.6px] rounded-2xl p-2 px-4 shadow-lg flex">
                            <label for="sort" class="pr-4 hidden sm:block md:block lg:block">Sort by:</label>
                            <form method="GET" action="{{ route('ship-supplies') }}">
                                <select id="sort" name="sort" class="border-none" onchange="this.form.submit()">
                                    <option value="default" {{ request('sort') == 'default' ? 'selected' : '' }}>Default</option>
                                    <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest</option>
                                    <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Oldest</option>
                                   
                                </select>
                            </form>
                        </div>
                        <div class="border-[1.6px] border-[#c0c0c0] rounded-xl flex">
                            <button id="gridViewBtn" class="px-4 py-2 border rounded-l-xl bg-[#2563EB] text-white  " onclick="toggleView('grid')">
                                <svg width="20" height="20" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect y="120" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect y="240" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect x="120" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect x="120" y="120" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect x="120" y="240" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect x="240" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect x="240" y="120" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect x="240" y="240" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    </svg>
                            </button>
                            <button id="listViewBtn" class="px-4 py-2 border rounded-r-xl text-black " onclick="toggleView('list')">
                                <svg width="20" height="20" viewBox="0 0 438 340" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect y="120" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect y="240" width="100" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect x="120" width="318" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect x="120" y="120" width="318" height="100" rx="8" fill="#0F0F0F"/>
                                    <rect x="120" y="240" width="318" height="100" rx="8" fill="#0F0F0F"/>
                                    </svg>   
                            </button>
                        </div>
                    </div> 
                    
                {{-- CATEGORY ON MOBILE SCREEN --}}
                    <span class="roboto-font block sm:hidden md:hidden lg:hidden xl:hidden">Categories:</span>
                    <div class="w-full overflow-x-auto roboto-font scrollbar-hide block sm:hidden md:hidden lg:hidden xl:hidden">
                        <div class="flex space-x-3">
                            @foreach($categories as $category)
                                <a href="{{ url('ship-supplies/categories', $category->id) }}" class="min-w-max bg-[#719ACE] text-white px-4 py-1 rounded-md shadow">
                                    {{ $category->name }}
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <!-- Toggle for Grid/List View -->
                  
                    <!-- Product Display -->
                    <div id="productContainer" class="mt-10 sm:mt-13 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($shipSupplies as $supply)
                        <div class="product-card border-[1.6px] border-gray-300 rounded-xl bg-white overflow-hidden">
                            <!-- Grid View -->
                            <div class="grid-view relative">
                                <img src="{{ asset(json_decode($supply->thumbnails)[0] ?? 'assets/smn/glove.webp') }}" alt="{{ $supply->title }}" class="w-full h-[340px] object-cover bg-gray-100">
                                <div class="p-4">
                                    <h3 class="text-lg font-bold text-gray-800">
                                        {{ $supply->title }}
                                    </h3>
                                    <p class="text-sm text-gray-500">
                                        {{ $supply->category->name }}
                                    </p>
                                    <p class="text-sm {{ $supply->availability_status ? 'text-green-500' : 'text-red-500' }}">
                                        {{ $supply->availability_status ? 'In Stock' : 'Out of Stock' }}
                                    </p>
                                    <a href="{{ route('ship-supplies.items', $supply->id) }}">
                                        <button class="mt-2 w-full py-2 text-sm font-semibold text-white bg-[#719ACE] rounded hover:bg-[#5a79a1]">Read Information
                                        </button>
                                    </a>
                                </div>
                            </div>
                            <!-- List View -->
                            <div class="list-view hidden flex items-start gap-4 p-4">
                                <img src="{{ asset(json_decode($supply->thumbnails)[0] ?? 'assets/smn/glove.webp') }}" alt="{{ $supply->title }}" class="w-24 h-24 object-cover rounded">
                                <div class="flex-1">
                                    <h3 class="text-lg font-bold text-gray-800">
                                        {{ $supply->title }}
                                    </h3>
                                    <p class="text-sm text-gray-500">
                                        {{ $supply->category->name }}
                                    </p>
                                    <p class="text-sm {{ $supply->availability_status ? 'text-green-500' : 'text-red-500' }}">
                                        {{ $supply->availability_status ? 'In Stock' : 'Out of Stock' }}
                                    </p>
                                        <a href="{{ route('ship-supplies.items', $supply->id) }}">
                                            <button class="mt-2 w-full py-2 text-sm font-semibold text-white bg-[#719ACE] rounded hover:bg-[#5a79a1]">Read Information
                                            </button>
                                        </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Sidebar -->
                <aside class="w-1/4 pl-4 space-y-20 hidden sm:block md:block">
                    <div class="mb-6 roboto-font">
                        <h4 class="font-bold text-lg mb-2">Availability</h4>
                        <ul>
                            <li><label for="in-stock">In Stock ({{ $shipSupplies->where('availability_status', 1)->count() }})</label></li>
                            <li><label for="out-stock">Out of Stock ({{ $shipSupplies->where('availability_status', 0)->count() }})</label></li>
                        </ul>
                    </div>
                    <div class="mb-6 roboto-font">
                        <h4 class="font-bold text-lg mb-2 ">Categories</h4>
                        <ul class="text-md roboto-font text-thin">
                            @foreach($categories as $category)
                                <li>
                                    <a href="{{ route('ship-supplies', ['category' => $category->id]) }}" 
                                       class="hover:underline whitespace-normal sm:whitespace-normal md:whitespace-normal {{ request('category') == $category->id ? 'text-[#719ACE]' : '' }}">
                                        {{ $category->name }}
                                    </a>
                                </li>
                            @endforeach
                            <li>
                                <a href="{{ route('ship-supplies') }}" 
                                   class="hover:underline whitespace-normal sm:whitespace-normal md:whitespace-normal text-[#393a3c] text-sm">
                                    Show All
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="mb-6 roboto-font">
                        <h4 class="font-bold text-lg mb-2">Brands</h4>
                        <ul>
                            <li><a href="#" class=" hover:underline">SMN</a></li>
                        </ul>
                    </div>
                    <div class="ubuntu-font">
                        <h4 class="font-bold text-lg mb-2">Best Seller</h4>
                        <div class="border rounded shadow-md p-4 bg-blue-100">
                            <h5 class="font-semibold">SMN 7137 (Low Cut)</h5>
                            <p class="text-sm">Personal Protective Equipment</p>
                            <button class="mt-2 px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded hover:bg-blue-600">
                                Read Information
                            </button>
                        </div>
                    </div>
                </aside>
                <!-- Sidebar -->
                <!-- Pagination Links -->
                
             </div>

             <script>
                function toggleView(view) {
                    const productContainer = document.getElementById('productContainer');
                    const gridViewBtn = document.getElementById('gridViewBtn');
                    const listViewBtn = document.getElementById('listViewBtn');
                    const productCards = document.querySelectorAll('.product-card');

                    if (view === 'grid') {
                        productContainer.classList.remove('flex', 'flex-col');
                        productContainer.classList.add('grid', 'grid-cols-2', 'sm:grid-cols-3');
                        gridViewBtn.classList.add('bg-[#2563EB]', 'text-white');
                        // gridViewBtn.classList.remove('bg-gray-200', 'text-black');
                        // listViewBtn.classList.add('bg-gray-200', 'text-black');
                        listViewBtn.classList.remove('bg-[#2563EB]', 'text-white');
                        productCards.forEach(card => {
                            card.querySelector('.grid-view').classList.remove('hidden');
                            card.querySelector('.list-view').classList.add('hidden');
                        });
                    } else if (view === 'list') {
                        productContainer.classList.remove('grid', 'grid-cols-2', 'sm:grid-cols-3');
                        productContainer.classList.add('flex', 'flex-col');
                        listViewBtn.classList.add('bg-[#2563EB]', 'text-white');
                        // listViewBtn.classList.remove('bg-gray-200', 'text-black');
                        // gridViewBtn.classList.add('bg-gray-200', 'text-black');
                        gridViewBtn.classList.remove('bg-[#2563EB]', 'text-white');
                        productCards.forEach(card => {
                            card.querySelector('.grid-view').classList.add('hidden');
                            card.querySelector('.list-view').classList.remove('hidden');
                        });
                    }
                }

                // Set default view to grid
                toggleView('grid');
            </script>
                <div class="mt-6 flex justify-center items-center py-2 ">
                    <div class="mt-6 flex justify-center items-center py-2">
                        {{ $shipSupplies->links('pagination::simple-tailwind') }}
                    </div>
                </div>
        </section>
      

    </div>

    
@endsection