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


@php
    $title =
        $product && $product->title
            ? $product->title . ' | ' . $product->category->name . ' | El DiDi Group'
            : 'Product Details | El DiDi Group';

    $description =
        $product && $product->short_description
            ? \Illuminate\Support\Str::limit(strip_tags($product->short_description), 150)
            : 'Explore product details and specifications from El DiDi Group.';
@endphp

@section('title', $title)
@section('meta_description', $description)

@push('schema')
    @php $schemas = [\App\Services\SchemaService::product($product), \App\Services\SchemaService::breadcrumb([['name' => 'Home', 'url' => '/'], ['name' => 'Products', 'url' => '/products'], ['name' => $product->category->name ?? 'Category', 'url' => '/category/' . ($product->category->slug ?? '') . '/' . ($product->category->id ?? '')], ['name' => $product->title, 'url' => '/product/' . ($product->category->slug ?? '') . '/' . $product->slug . '/' . $product->id]])]; @endphp
    @include('schema')
@endpush


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

    <h1 class="page-title" style="text-align: center"> Product Detials</h1>
    <br><br>

    @if (!empty($slider_photos))
        <div class="slider2-wrapper">
            <div class="slider2">
                <button class="slider2-btn prev-btn" onclick="plusSlides(-1)">&#10094;</button>

                <div class="slides2">
                    @foreach ($slider_photos as $index => $photo)
                        <div class="slide2 {{ $index === 0 ? 'active' : '' }}">
                            <img src="{{ asset($photo) }}" class="slide2-img" loading="lazy"
                                alt="Slider Image {{ $index + 1 }}" width="510" height="600"
                                style="aspect-ratio: 510/600;" />
                        </div>
                    @endforeach
                </div>

                <button class="slider2-btn next-btn" onclick="plusSlides(1)">&#10095;</button>
            </div>

            <div class="dots-container">
                @foreach ($slider_photos as $index => $photo)
                    <span class="dot {{ $index === 0 ? 'active' : '' }}" onclick="currentSlide({{ $index }})"></span>
                @endforeach
            </div>
        </div>
    @endif
    <!-- Sidebar Page Container -->
    <div class="sidebar-page-container">
        <div class="auto-container">
            <div class="row clearfix">

                <!--Content Side-->
                <div class="sidebar-side col-lg-4 col-md-12 col-sm-12 order-2 order-lg-1">
                    <aside class="sidebar">
                        <div class="sidebar-widget search-box">
                            <form method="get" action="{{ route('web.categories') }}">
                                <div class="form-group">
                                    <input type="search" name="search_group" value="{{ request('search_group') }}"
                                        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>Our Groups</h4>
                                </div>
                                <ul class="blog-cat-two">
                                    @forelse($companies as $company)
                                        <li>
                                            <a href="{{ route('web.categories', ['company_id' => $company->id]) }}">
                                                {{ $company->name }}
                                            </a>
                                        </li>
                                    @empty
                                        <li>No companies available</li>
                                    @endforelse
                                </ul>
                            </div>
                        </div>
                    </aside>
                </div>
                <div class="content-side col-lg-8 col-md-12 col-sm-12 order-1 order-lg-2">
                    <div class="shop-single">
                        <div class="product-details">

                            <!--Basic Details-->
                            <div class="basic-details">
                                <div class="row clearfix">
                                    <div class="image-column col-lg-6 col-md-6 col-sm-12">
                                        {{-- <figure class="image-box">
                                                @php
                                                    $imagePath =  $product->main_photo 
                                                        ? 'system/storage/app/public/product/' . $product->main_photo 
                                                        : null;
                                                    $defaultImage = asset('system/storage/app/public/default/didi.jpeg');

                                                    $imageUrl = $imagePath && file_exists('system/storage/app/public/product/' . $product->main_photo)
                                                        ? asset('system/storage/app/public/product/' . $product->main_photo)
                                                        : $defaultImage;
                                                @endphp
                                            <a
                                                href="{{ file_exists($imagePath) ? asset($imagePath) : $defaultImage }}"
                                                class="lightbox-image" title="Image Caption Here"><img
                                                    src="{{ file_exists($imagePath) ? asset($imagePath) : $defaultImage }}"
                                                    alt="Photo" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" /></a>
                                            </a>
                                        </figure> --}}
                                        <figure class="image-box">
                                            @php
                                                $isExternal =
                                                    $product->main_photo &&
                                                    Str::startsWith($product->main_photo, ['http://', 'https://']);

                                                if ($isExternal) {
                                                    // Already an external URL
                                                    $imageUrl = $product->main_photo;
                                                } elseif (
                                                    !empty($product->main_photo) &&
                                                    file_exists(
                                                        public_path(
                                                            'system/storage/app/public/product/' . $product->main_photo,
                                                        ),
                                                    )
                                                ) {
                                                    // Local mirrored file — check it actually exists
                                                    $imageUrl = asset(
                                                        'system/storage/app/public/product/' . $product->main_photo,
                                                    );
                                                } else {
                                                    // Fallback
                                                    $imageUrl = asset('system/storage/app/public/default/didi.jpeg');
                                                }

                                                $defaultImage = asset('system/storage/app/public/default/didi.jpeg');
                                            @endphp

                                            <a href="{{ $imageUrl }}" class="lightbox-image"
                                                title="Image Caption Here">
                                                <img src="{{ $imageUrl }}" alt="{{ $product->title }}" width="510"
                                                    height="600" loading="lazy" style="aspect-ratio: 510/600;"
                                                    onerror="this.onerror=null;this.src='{{ $defaultImage }}';" />
                                            </a>
                                        </figure>
                                    </div>
                                    <div class="info-column col-lg-6 col-md-6 col-sm-12">
                                        <div class="details-header">
                                            <h4>{{ $product->title }}</h4>
                                        </div>

                                        <p>{{ $product->short_description }}</p>

                                        <div class="location">Category:
                                            <a
                                                {{-- href="{{ route('web.categories.show', [$product->category->slug, $product->category->id]) }}">{{ $product->category->name }}</a> --}}
                                                href="{{ route('web.categories', ['company_id' => $product->category->company_id]) }}">
                                                {{ $product->category->name }}
                                            </a>
                                        </div>
                                        <div class="other-options-container" style="display: flex; gap: 10px;">
                                            <a class="theme-btn btn-style-three add-to-cart"
                                                href="{{ route('web.quote', ['product_id' => $product->id]) }}"><span
                                                    class="txt">Get a quote</span></a>
                                            @if (!empty($product->pdf_url))
                                                <a class="theme-btn btn-style-three add-to-cart"
                                                    href="{{ $product->pdf_url }}" target="_blank">
                                                    <span class="txt">Download PDF</span>
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Basic Details-->

                            <!--Product Info Tabs-->
                            <div class="product-info-tabs">
                                <!--Product Tabs-->
                                <div class="prod-tabs tabs-box">

                                    <!--Tab Btns-->
                                    <ul class="tab-btns tab-buttons clearfix">
                                        @if (!empty($product->description))
                                            <li data-tab="#prod-details" class="tab-btn active-btn">Description</li>
                                        @endif
                                        @if (!empty($product->specification))
                                            <li data-tab="#specs" class="tab-btn">Specs</li>
                                        @endif
                                        @if (!empty($product->technical_data))
                                            <li data-tab="#technical-data" class="tab-btn">Technical Data</li>
                                        @endif
                                        @if (!empty($product->video_url))
                                            <li data-tab="#video" class="tab-btn">Video</li>
                                        @endif
                                        @if (!empty($product->pdf_url))
                                            <li data-tab="#brochures" class="tab-btn">Brochures</li>
                                        @endif
                                    </ul>

                                    <!--Tabs Container-->
                                    <div class="tabs-content">

                                        <!--Tab / Active Tab-->
                                        @if (!empty($product->description))
                                            <div class="tab active-tab" id="prod-details">
                                                <div class="content">
                                                    {!! $product->description !!}
                                                </div>
                                            </div>
                                        @endif

                                        @if (!empty($product->specification))
                                            <div class="tab" id="specs">
                                                <div class="content">
                                                    {!! $product->specification !!}
                                                </div>
                                            </div>
                                        @endif

                                        <!--Tab-->
                                        <div class="tab" id="technical-data">
                                            <div class="content">
                                                {!! $product->technical_data !!}
                                            </div>
                                        </div>

                                        @if (!empty($product->video_url))
                                            <div class="tab" id="video">
                                                <div class="content">

                                                    <video controls loop autoplay style="width: 100%;">
                                                        <source src="{{ $product->video_url }}" type="video/mp4">
                                                    </video>

                                                </div>
                                            </div>
                                        @endif

                                        @if (!empty($product->pdf_url))
                                            <div class="tab" id="brochures">
                                                <div class="content">

                                                    <iframe src="{{ $product->pdf_url }}" width="100%" height="600"
                                                        style="border: none;">
                                                    </iframe>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <!--End Product Info Tabs-->
                        </div>
                    </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 $category)
                                        <li><a href="{{ route('web.categories.show', [$category->slug, $category->id]) }}">
                                                {{ $category->name }}<span>{{ $category->products->count() }}</span></a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </aside>
                </div> --}}
                {{-- @if (!empty($related_products))
                    <div class="related-products">
                        <!-- Sec Title -->
                        <div class="title-box">
                            <h4>Related Products</h4>
                        </div>
                        <!-- End Sec Title -->
                        @foreach ($related_products as $product)
                        <div class="row clearfix">

                            
                                <!-- Shop Block -->
                                <div class="shop-block col-xl-3 col-lg-3 col-md-6 col-sm-6">
                                    <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                                        <div class="image">
                                            @php
                                                $is_recent = $product->created_at->diffInDays(now()) < 7;
                                                // $is_recent = $related_products->where('created_at', '>=', use Carbon\Carbon::now()->subDays(7))->exists();
                                            @endphp
                                            @if (!empty($is_recent))
                                                <div class="new-tag">new</div>
                                            @endif
                                            <a
                                                href="{{ route('web.products.show', [$category->slug, $product->slug, $product->id]) }}"><img
                                                    src="{{ asset('system/storage/app/public/product/' . $product->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>
                                    </div>
                                </div>
                            

                        </div>
                        @endforeach
                    </div>
                @endif --}}
            </div>
            <i class="fa fa-bar-chart" aria-hidden="true"> Visitors Counter : <span
                    class="post-views-count">{{ $product->views }}</span></i>
        </div>
    </div>
    <!-- End Sidebar Page Container -->
@endsection
@section('pageScripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const slides = document.querySelectorAll('.slide');
            const prevBtn = document.querySelector('.prev-btn');
            const nextBtn = document.querySelector('.next-btn');
            const dotsContainer = document.querySelector('.dots-container');
            const slider = document.querySelector('.slider-wrapper');

            // Guard: only run if slider1 elements exist
            if (slides.length && prevBtn && nextBtn && dotsContainer && slider) {
                const totalSlides = slides.length;
                let currentIndex = 0;
                let autoPlayInterval;

                function createDots() {
                    slides.forEach((_, index) => {
                        const dot = document.createElement('span');
                        dot.classList.add('dot');
                        dot.setAttribute('data-index', index);
                        dotsContainer.appendChild(dot);

                        dot.addEventListener('click', () => {
                            showSlide(index);
                            stopAutoplay();
                            startAutoplay();
                        });
                    });
                }

                function showSlide(index) {
                    slides.forEach(slide => slide.classList.remove('active'));
                    const dots = document.querySelectorAll('.dot');
                    dots.forEach(dot => dot.classList.remove('active'));
                    slides[index].classList.add('active');
                    dots[index].classList.add('active');
                    currentIndex = index;
                }

                function nextSlide() {
                    showSlide((currentIndex + 1) % totalSlides);
                }

                function prevSlide() {
                    showSlide((currentIndex - 1 + totalSlides) % totalSlides);
                }

                function startAutoplay() {
                    autoPlayInterval = setInterval(nextSlide, 2000);
                }

                function stopAutoplay() {
                    clearInterval(autoPlayInterval);
                }

                createDots();

                nextBtn.addEventListener('click', () => { nextSlide(); stopAutoplay(); startAutoplay(); });
                prevBtn.addEventListener('click', () => { prevSlide(); stopAutoplay(); startAutoplay(); });
                slider.addEventListener('mouseenter', stopAutoplay);
                slider.addEventListener('mouseleave', startAutoplay);

                showSlide(currentIndex);
                startAutoplay();
            }
        });
    </script>

    <script>
        // Guard: only run if slider2 elements exist
        const slides2 = document.querySelectorAll('.slide2');
        const dots2 = document.querySelectorAll('.dot');

        if (slides2.length) {
            let slideIndex = 0;

            function showSlide2(index) {
                slides2.forEach((slide, i) => {
                    slide.classList.toggle('active', i === index);
                    if (dots2[i]) dots2[i].classList.toggle('active', i === index);
                });
                slideIndex = index;
            }

            function plusSlides(n) {
                let nextIndex = slideIndex + n;
                if (nextIndex < 0) nextIndex = slides2.length - 1;
                if (nextIndex >= slides2.length) nextIndex = 0;
                showSlide2(nextIndex);
            }

            function currentSlide(n) {
                showSlide2(n);
            }

            setInterval(() => plusSlides(1), 5000);
        }
    </script>
@endsection