@extends('frontend::layouts.master')
@section('content')
    @livewire('frontend::hero-slider', ['banner' => $banner])

    @if (!empty($about))
        <section class="about spad"
            style="background:#f7f7f7 url('{{ Module::asset('frontend:images/bg-tech1.jpg') }}'); background-size: cover; background-position: center bottom">
            <div class="container">
                <div class="row d-flex justify-content-center align-items-center">
                    {!! $about['detail'] ?? '' !!}
                    <div class="col-xs-12 col-sm-12 col-md-4 cleft" style="margin-top: -20%;">
                        <a href="{{ $page_init['url']['about'] ?? '' }}" class="btn" data-animate="fadeInUp"
                            data-animate-delay="600">@lang('frontend::text.btn.know_more') <i class="fa fa-arrow-circle-right m-l-10 mt-0"></i>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 cleft">
                        &nbsp;
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 cleft">
                        &nbsp;
                    </div>
                </div>
            </div>
        </section>
    @endif


    @if (!empty($why_choose_us['detail']))
        <section class="feature-types-section"
            style="background-image: url('{{ Module::asset('frontend:images/index/bg-ab.png') }}'); background-size: cover; background-position: center 70%;">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        {!! $why_choose_us['detail'] ?? '' !!}
                    </div>
                </div>
            </div>
        </section>
    @endif


    @if (!empty($product_categories))
        <section class="sect-category">
            <div class="container-fluid p-0">
                <div class="row g-0">
                    <!-- Left Column - Image Slider -->
                    <div class="col-lg-6 cleft" data-animate="fadeInLeft" data-animate-delay="100">
                        <div class="category-slider-wrapper">
                            <div class="category-slider" id="categoryImageSlider">
                                @foreach ($product_categories as $i => $item)
                                    <!-- Slide {{ $i + 1 }} -->
                                    <div class="category-slide active" data-slide-index="{{ $i }}">
                                        <div class="category-slide-image">
                                            <img src="{{ asset($item['image'] ?? '') }}" alt="{!! $item['name'] ?? '' !!}" />
                                        </div>
                                        <div class="category-slide-footer">
                                            <span class="slide-label">{!! $item['name'] ?? '' !!}</span>
                                            <div class="slide-pagination">
                                                @foreach ($product_categories as $j => $item)
                                                    <span class="pagination-dot {{ $i == $j ? 'active' : '' }}"
                                                        data-index="{{ $j }}"></span>
                                                @endforeach
                                            </div>
                                            <span class="slide-number">{{ sprintf('%02d', $i + 1) }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Right Column - Category List -->
                    <div class="col-lg-6 cright" data-animate="fadeInRight" data-animate-delay="200">
                        <div class="category-list-wrapper">
                            <div class="category-list-header">
                                <h2 class="category-list-title">
                                    <span class="title-main">@lang('frontend::text.label.category')</span>
                                    <span class="title-sub">@lang('frontend::text.label.category_desc')</span>
                                </h2>
                            </div>
                            <ul class="category-list">
                                @foreach ($product_categories as $i => $item)
                                    <li class="category-item {{ $i == 0 ? 'active' : '' }}"
                                        data-category-index="{{ $i }}">
                                        <span class="category-bullet"></span>
                                        <span class="category-text">{!! $item['name'] ?? '' !!}</span>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="category-cta">
                                <a href="{{ $page_init['url']['product'] ?? '' }}"
                                    class="btn-read-more  btn-pulse gradient-btn">@lang('frontend::text.btn.request_quote')</a>
                            </div>
                            <div class="category-description">
                                <p>@lang('frontend::text.label.category_desc_detail')</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif


    @if (!empty($sample))
        <section class="sect-news-grid">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md-12 headbar text-center mb-30">
                        <div class="htitle text-color" data-animate="fadeInUp" data-animate-delay="100">@lang('frontend::text.label.sample')
                        </div>
                        <p data-animate="fadeInUp" data-animate-delay="200">@lang('frontend::text.label.sample_desc')</p>
                        <a class="btn btn-view-all" href="{{ $page_init['url']['product'] ?? '' }}" data-animate="fadeInUp"
                            data-animate-delay="300">@lang('frontend::text.btn.view_all') <i class="fa fa-arrow-circle-right m-l-10"></i></a>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12 col-left" data-animate="fadeInUp" data-animate-delay="400">
                    <div class="carousel news-slide" data-items="5" data-margin="20" data-autoplay="5000">
                        @foreach ($sample as $item)
                            <div class="news-item">
                                <a {{ !empty($item['link']) ? 'href='.URL::to($item['link']).' target="_blank"' : '' }}>
                                    <div class="news-image ratio ratio-4x3">
                                        <img class="border-bottom object-fit-cover" src="{{ asset($item['image'] ?? '') }}"
                                            alt="{!! $item['name'] ?? '' !!}">
                                    </div>
                                </a>
                                <div class="news-content">
                                    <div class="news-title">
                                        <a {{ !empty($item['link']) ? 'href='.URL::to($item['link']).' target="_blank"' : '' }}>{!! $item['name'] ?? '' !!}</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

            </div>
        </section>
    @endif


    @if (!empty($process))
        <section class="sect-cta background-sub-con text-left"
            style="background-image: url('{{ asset($process['image'] ?? '') }}'); background-size: cover; background-position: center 84%;">
            <div class="container">
                <div class="col-lg-6">
                    {!! $process['detail'] ?? '' !!}
                </div>
            </div>
        </section>
    @endif


    <script>
        (function() {
            function initCategorySlider() {
                // Check if jQuery is available
                if (typeof jQuery === 'undefined' || typeof $ === 'undefined') {
                    setTimeout(initCategorySlider, 50);
                    return;
                }
                // Use jQuery ready
                jQuery(function($) {
                    // Category Slider Functionality
                    const categorySlider = {
                        currentIndex: 0,
                        totalSlides: 6,
                        autoPlayInterval: null,
                        autoPlayDelay: 5000, // 5 seconds
                        init: function() {
                            // Ensure first slide is visible
                            $('.category-slide').removeClass('active');
                            $('.category-slide[data-slide-index="0"]').addClass('active');
                            this.showSlide(0);
                            this.bindEvents();
                            this.startAutoPlay();
                        },
                        showSlide: function(index) {
                            // Update slides
                            $('.category-slide').removeClass('active');
                            $('.category-slide[data-slide-index="' + index + '"]').addClass('active');
                            // Update pagination dots (all pagination dots across all slides)
                            $('.pagination-dot').removeClass('active');
                            $('.pagination-dot[data-index="' + index + '"]').addClass('active');
                            // Update category items
                            $('.category-item').removeClass('active');
                            $('.category-item[data-category-index="' + index + '"]').addClass('active');
                            // Update slide number (all slide numbers)
                            $('.slide-number').text(String(index + 1).padStart(2, '0'));
                            this.currentIndex = index;
                        },
                        nextSlide: function() {
                            const nextIndex = (this.currentIndex + 1) % this.totalSlides;
                            this.showSlide(nextIndex);
                        },
                        prevSlide: function() {
                            const prevIndex = (this.currentIndex - 1 + this.totalSlides) % this
                                .totalSlides;
                            this.showSlide(prevIndex);
                        },
                        goToSlide: function(index) {
                            this.showSlide(index);
                            this.resetAutoPlay();
                        },
                        bindEvents: function() {
                            const self = this;
                            // Category item click
                            $('.category-item').on('click', function() {
                                const index = $(this).data('category-index');
                                self.goToSlide(index);
                            });
                            // Pagination dot click
                            $('.pagination-dot').on('click', function() {
                                const index = $(this).data('index');
                                self.goToSlide(index);
                            });
                            // Pause on hover
                            $('.category-slider-wrapper, .category-list-wrapper').on('mouseenter',
                                function() {
                                    self.stopAutoPlay();
                                }).on('mouseleave', function() {
                                self.startAutoPlay();
                            });
                        },
                        startAutoPlay: function() {
                            const self = this;
                            this.autoPlayInterval = setInterval(function() {
                                self.nextSlide();
                            }, this.autoPlayDelay);
                        },
                        stopAutoPlay: function() {
                            if (this.autoPlayInterval) {
                                clearInterval(this.autoPlayInterval);
                                this.autoPlayInterval = null;
                            }
                        },
                        resetAutoPlay: function() {
                            this.stopAutoPlay();
                            this.startAutoPlay();
                        }
                    };
                    // Initialize slider
                    if ($('.category-slide').length > 0) {
                        categorySlider.init();
                        console.log('Category slider initialized');
                    } else {
                        console.error('Category slider elements not found');
                    }
                });
            }
            // Start initialization
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initCategorySlider);
            } else {
                initCategorySlider();
            }
        })();
    </script>
@endsection