@extends('web_theme::layout.main')

@section('title', 'Products | El DiDi Group')
@section('meta_description', 'Explore our product offerings by category. Find the right solution for your needs with El DiDi Group.')

@section('content')
    <!-- Page Title -->
    <section class="page-title">
        <div class="content" style="background-image: url('{{ asset($productHeaderImg) }}')">
        </div>
    </section>
    <!-- End Page Title -->

    <!-- Sidebar Page Container -->
    <div class="sidebar-page-container">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="content-side col-lg-12 col-md-12 col-sm-12">
                    <h1 class="text-center">Our Group</h1>
                    <div class="row clearfix">
                        <div class="service-block col-lg-12 col-md-12 col-sm-12">
                            <div class="inner-box">

                                <div class="row justify-content-center text-center" style="margin-top: 20px;">
                                    @foreach ($companies as $company)
                                        <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;">
                                            <div class="company-card" data-company-id="{{ $company->id }}"
                                                {{-- style="background:#f8f8f8; padding:20px; border-radius:8px; height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.08);" --}}
                                                >
                                                <h5 style="font-weight:700; margin-bottom:10px;"><a
                                                        href="javascript:void(0)">{{ $company->name }}</a></h5>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row clearfix">

                <!--Sidebar Side-->
                <div class="sidebar-side col-lg-4 col-md-12 col-sm-12">
                    <aside class="sidebar">
                        {{-- <div class="sidebar-widget search-box">
                            <form method="get" action="#">
                                <div class="form-group">
                                    <input type="search" name="search-field" value="" placeholder="Search here..."
                                        required>
                                    <button type="submit"><span class="icon fa fa-search"></span></button>
                                </div>
                            </form>
                        </div> --}}
                        <div class="sidebar-widget categories-widget">
                            <div class="widget-content">
                                <!-- Sidebar Title -->
                                <div class="title-box">
                                    <h4>Categories</h4>
                                </div>
                                <ul class="blog-cat-two" id="category-list">
                                    <!-- Categories will be loaded here -->
                                </ul>
                            </div>
                        </div>
                    </aside>
                </div>
                <!--Content Side-->
                <div class="content-side col-lg-8 col-md-12 col-sm-12">
                    <div class="row clearfix" id="content-container">
                        <!-- Products will be loaded here -->
                        {{-- @foreach ($products as $product)
                            <div class="shop-block col-xl-4 col-lg-4 col-md-4 col-sm-6">
                                <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                                    <div class="image">
                                        <a
                                            href="{{ route('web.products.show', [$category->slug, $product->slug, $product->id]) }}"><img
                                                src="{{ asset('system/storage/app/public/product/' . $product->main_photo) }}"
                                                alt="" /></a>
                                    </div>
                                    <div class="lower-content">

                                        <h5><a
                                                href="{{ route('web.products.show', [$category->slug, $product->slug, $product->id]) }}">{{ $product->title }}</a>
                                        </h5>

                                        <div class="sub-title">{{ \Str::limit($product->short_description, 50, '...') }}</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach --}}
                    </div>

                    {{-- <!-- Button Box -->
                        <div class="button-box text-center">
                            <a class="btn-style-two theme-btn"
                                href="{{ route('web.categories.show', [$category->slug, $category->id]) }}"><span
                                    class="txt">More Products</span></a>
                        </div> --}}
                    <!-- Button Box: Hidden by default, shown via JS when more items are available -->
                    {{-- <div class="button-box text-center" id="load-more-button" style="display: none;">
                        <button class="btn-style-two theme-btn" id="load-more"><span class="txt">More
                                Products</span></button>
                    </div> --}}
                </div>
                <!--Sidebar Side-->
                {{-- <div class="sidebar-side col-lg-4 col-md-12 col-sm-12">
                    <aside class="sidebar">

                        <!-- Search -->
                        <div class="sidebar-widget search-box">
                            <form method="get" action="{{ route('web.categories') }}">
                                <div class="form-group">
                                    <input type="search" name="search" value="{{ request('search') }}"
                                        placeholder="Search here..." required>
                                    <button type="submit"><span class="icon fa fa-search"></span></button>
                                </div>
                            </form>
                        </div>

                        <!-- Categories Widget -->
                        <div class="sidebar-widget categories-widget">
                            <div class="widget-content">
                                <!-- Sidebar Title -->
                                <div class="title-box">
                                    <h4>Product Categories</h4>
                                </div>
                                <ul class="blog-cat-two">
                                    @foreach ($categories as $cat)
                                        <li><a href="{{ route('web.categories.show', [$cat->slug, $cat->id]) }}">
                                                {{ $cat->name }}<span>{{ $cat->products->count() }}</span></a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </aside>
                </div> --}}
            </div>
            <i class="fa fa-bar-chart" aria-hidden="true"> Visitors Counter : <span
                    class="post-views-count">{{ $views->count ?? $category->views }}</span></i>
        </div>
    </div>
    <!-- End Sidebar Page Container -->
@endsection

{{-- @section('pageScripts')
    <!-- JavaScript for AJAX loading -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let page = 1;
            const perPage = 9;
            const contentType = 'products';
            const categoryId = {{ $category->id }};

            // Check if more items can be loaded
            function checkLoadMoreButton(hasMore) {
                const loadMoreButton = document.getElementById('load-more-button');
                // Show button only if there are 9 items initially and more data is available
                const currentItems = document.querySelectorAll('#content-container .shop-block').length;
                loadMoreButton.style.display = (currentItems >= perPage && hasMore) ? 'block' : 'none';
            }

            // Initial check (assume more data is available if 9 items are loaded)
            checkLoadMoreButton(true);

            // Handle load more button click
            document.getElementById('load-more').addEventListener('click', function() {
                page++;
                fetch("{{ route('web.loadMore') }}?content_type=" + contentType + "&category_id=" +
                        categoryId + "&page=" + page + "&per_page=" + perPage)
                    .then(response => response.json())
                    .then(data => {
                        const contentContainer = document.getElementById('content-container');
                        data.items.forEach(item => {
                            const itemHtml = `
                                <div class="shop-block col-xl-4 col-lg-4 col-md-4 col-sm-6">
                                    <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                                        <div class="image">
                                            ${item.is_recent ? '<div class="new-tag">new</div>' : ''}
                                            <a href="/product/${item.category_slug}/${item.slug}/${item.id}">
                                                <img src="${item.main_photo}" alt="" />
                                            </a>
                                        </div>
                                        <div class="lower-content">
                                            <h5>
                                                <a href="/product/${item.category_slug}/${item.slug}/${item.id}">${item.title}</a>
                                            </h5>
                                        </div>
                                    </div>
                                </div>`;
                            contentContainer.insertAdjacentHTML('beforeend', itemHtml);
                        });
                        // Update button visibility based on whether more data is available
                        checkLoadMoreButton(data.has_more);
                    })
                    .catch(error => console.error('Error loading more products:', error));
            });
        });
    </script>
@endsection --}}
@section('pageScripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let selectedCompanyId = {{ $selectedCompanyId ?? ($firstCompany ? $firstCompany->id : null) }};
            let selectedCategoryId = null;

            // Initial load - select first company
            if (selectedCompanyId) {
                selectCompany(selectedCompanyId);
            }

            // Company click handler
            document.querySelectorAll('.company-card').forEach(card => {
                card.addEventListener('click', function() {
                    const companyId = this.dataset.companyId;
                    selectCompany(companyId);
                });
            });

            function selectCompany(companyId) {
                selectedCompanyId = companyId;
                selectedCategoryId = null;

                const sidebarSection = document.querySelector('.sidebar-side');
                if (sidebarSection) {
                    sidebarSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }

                // Update company card styles
                document.querySelectorAll('.company-card').forEach(card => {
                    if (card.dataset.companyId == companyId) {
                        card.style.border = '3px solid #f8f8f8';
                        card.style.padding = '20px';
                        card.querySelector('a').style.color = '#007bff';
                    } else {
                        card.querySelector('a').style.color = 'rgb(12,45,98)';
                        card.style.border = 'none';
                        card.style.padding = '20px';
                    }
                });

                // Load categories for this company
                loadCategories(companyId);
            }

            function loadCategories(companyId) {
                fetch(`/our-group/${companyId}/categories`)
                    .then(response => response.json())
                    .then(data => {
                        const categoryList = document.getElementById('category-list');
                        categoryList.innerHTML = '';

                        if (data.categories.length === 0) {
                            categoryList.innerHTML = '<li>No categories found</li>';
                            document.getElementById('content-container').innerHTML = '<p class="col-12 text-center">No products available</p>';
                            return;
                        }

                        data.categories.forEach(category => {
                            const li = document.createElement('li');
                            li.innerHTML = `<a href="javascript:void(0)" data-category-id="${category.id}" data-category-slug="${category.slug}">${category.name}</a>`;
                            categoryList.appendChild(li);

                            // Add click handler
                            li.querySelector('a').addEventListener('click', function() {
                                selectedCategoryId = this.dataset.categoryId;
                                loadProducts(selectedCompanyId, selectedCategoryId, this.dataset.categorySlug, true);
                                
                                // Update active category
                                document.querySelectorAll('#category-list a').forEach(a => a.style.fontWeight = 'normal');
                                this.style.fontWeight = 'bold';
                            });
                        });

                        // Auto-select first category
                        if (data.categories.length > 0) {
                            const firstCategory = data.categories[0];
                            selectedCategoryId = firstCategory.id;
                            categoryList.querySelector('a').style.fontWeight = 'bold';
                            loadProducts(companyId, firstCategory.id, firstCategory.slug);
                        }
                    })
                    .catch(error => {
                        console.error('Error loading categories:', error);
                        document.getElementById('category-list').innerHTML = '<li>Error loading categories</li>';
                    });
            }

            function loadProducts(companyId, categoryId, categorySlug, scrollToProducts = false) {
                fetch(`/our-group/${companyId}/categories/${categoryId}/products`)
                    .then(response => response.json())
                    .then(data => {
                        const container = document.getElementById('content-container');
                        container.innerHTML = '';

                        if (data.products.length === 0) {
                            container.innerHTML = '<p class="col-12 text-center">No products available</p>';
                            return;
                        }

                        data.products.forEach(product => {
                            const imageSrc = product.main_photo && 
                                (product.main_photo.startsWith('http://') || product.main_photo.startsWith('https://'))
                                ? product.main_photo
                                : `/system/storage/app/public/product/${product.main_photo}`;
                            const productHtml = `
                                <div class="shop-block col-xl-4 col-lg-4 col-md-4 col-sm-6">
                                    <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                                        <div class="image">
                                            <a href="/product/${categorySlug}/${product.slug}/${product.id}">
                                                <img src="${imageSrc}" alt="${product.title}" onerror="this.onerror=null;this.src='/system/storage/app/public/default/didi.jpeg';" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;"/>
                                            </a>
                                        </div>
                                        <div class="lower-content">
                                            <h5>
                                                <a href="/product/${categorySlug}/${product.slug}/${product.id}">${product.title}</a>
                                            </h5>
                                            <div class="sub-title">${product.short_description ? product.short_description.substring(0, 50) + '...' : ''}</div>
                                        </div>
                                    </div>
                                </div>
                            `;
                            container.innerHTML += productHtml;
                        });
                        // Only scroll to products on mobile when user manually picks a category
                        if (scrollToProducts && window.innerWidth < 992) {
                            container.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        }
                    })
                    .catch(error => {
                        console.error('Error loading products:', error);
                        document.getElementById('content-container').innerHTML = '<p class="col-12 text-center">Error loading products</p>';
                    });
            }
        });
    </script>
@endsection