@extends('frontend::layouts.master')
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<section id="page-title" class="page-title-dark" style="background-image: url('{{ asset('assets/frontend/images/bg-product.jpg') }}');">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                <h2 class="m-b-0">สินค้า</h2>
                <p class="">กลุ่มสินค้าของบริษัท Pro Part Distributor</p>
            </div>
        </div>

        <!-- Breadcrumb -->
        <nav class="breadcrumb-container">
            <div class="container">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('frontend.index') }}">หน้าหลัก</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('frontend.products') }}">สินค้า</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('frontend.product-group') }}">กลุ่มสินค้าตกแต่งภายนอก</a>
                    </li>
                    <li class="breadcrumb-item active">
                        <a href="#">ACTUATOR DOOR LOCK FRONT RIGHT</a>
                    </li>
                </ul>
            </div>
        </nav>

    </div>
</section>

<section class="sect-product-detail">
    <div class="container">
        <div class="row">
            <!-- Left Column - Image Gallery -->
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="product-gallery">
                    <!-- Main Image Display -->
                    <div class="main-image-container">
                        <a href="{{ asset('assets/frontend/images/mockup.jpg') }}" data-fancybox="gallery" class="main-image-link">
                            <img src="{{ asset('assets/frontend/images/mockup.jpg') }}" alt="สินค้า 1"
                                class="main-image img-responsive" id="mainImage">
                        </a>
                    </div>

                    <!-- Thumbnail Gallery -->
                    <div class="thumbnail-gallery">
                        <div class="row">
                            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                <div class="thumbnail-item active" data-image="{{ asset('assets/frontend/images/600x600.jpg') }}">
                                    <img src="{{ asset('assets/frontend/images/600x600.jpg') }}" alt="สินค้า 1"
                                        class="img-responsive">
                                </div>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                <div class="thumbnail-item" data-image="{{ asset('assets/frontend/images/600x800.jpg') }}">
                                    <img src="{{ asset('assets/frontend/images/600x800.jpg') }}" alt="สินค้า 2"
                                        class="img-responsive">
                                </div>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                <div class="thumbnail-item" data-image="{{ asset('assets/frontend/images/mockup.jpg') }}">
                                    <img src="{{ asset('assets/frontend/images/mockup.jpg') }}" alt="สินค้า 3"
                                        class="img-responsive">
                                </div>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                <div class="thumbnail-item" data-image="{{ asset('assets/frontend/images/mockup.jpg') }}">
                                    <img src="{{ asset('assets/frontend/images/mockup.jpg') }}" alt="สินค้า 4"
                                        class="img-responsive">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                <div class="thumbnail-item" data-image="{{ asset('assets/frontend/images/mockup.jpg') }}">
                                    <img src="{{ asset('assets/frontend/images/mockup.jpg') }}" alt="สินค้า 5"
                                        class="img-responsive">
                                </div>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                <div class="thumbnail-item" data-image="{{ asset('assets/frontend/images/mockup.jpg') }}">
                                    <img src="{{ asset('assets/frontend/images/mockup.jpg') }}" alt="สินค้า 6"
                                        class="img-responsive">
                                </div>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                <div class="thumbnail-item" data-image="{{ asset('assets/frontend/images/mockup.jpg') }}">
                                    <img src="{{ asset('assets/frontend/images/mockup.jpg') }}" alt="สินค้า 7"
                                        class="img-responsive">
                                </div>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                <div class="thumbnail-item" data-image="{{ asset('assets/frontend/images/mockup.jpg') }}">
                                    <img src="{{ asset('assets/frontend/images/mockup.jpg') }}" alt="สินค้า 8"
                                        class="img-responsive">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Product Details -->
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="product-details">
                    <!-- Product Group Name -->
                    <div class="product-category">
                        <span class="category-tag">กลุ่มสินค้าตกแต่งภายนอก</span>
                    </div>

                    <!-- Product Title -->
                    <h1 class="product-title">ACTUATOR DOOR LOCK FRONT RIGHT</h1>

                    <!-- Product Description -->
                    <div class="product-description">
                        <h4>รายละเอียดสินค้า</h4>
                        <p>ACTUATOR DOOR LOCK FRONT RIGHT
                            เป็นอุปกรณ์อิเล็กทรอนิกส์ที่ใช้ในการควบคุมการล็อคและปลดล็อคประตูรถยนต์ด้านขวาหน้า
                            โดยใช้ระบบไฟฟ้าในการทำงาน</p>

                        <h4>คุณสมบัติ</h4>
                        <ul class="product-features">
                            <li>ใช้กับรถยนต์หลายรุ่นและหลายยี่ห้อ</li>
                            <li>คุณภาพสูง ผ่านการทดสอบมาตรฐาน</li>
                            <li>ติดตั้งง่าย ใช้งานสะดวก</li>
                            <li>อายุการใช้งานยาวนาน</li>
                            <li>รับประกันคุณภาพ 1 ปี</li>
                        </ul>

                        <h4>ข้อมูลจำเพาะ</h4>
                        <div class="product-specs">
                            <div class="spec-item">
                                <span class="spec-label">แรงดันไฟฟ้า:</span>
                                <span class="spec-value">12V DC</span>
                            </div>
                            <div class="spec-item">
                                <span class="spec-label">กระแสไฟฟ้า:</span>
                                <span class="spec-value">2.5A</span>
                            </div>
                            <div class="spec-item">
                                <span class="spec-label">อุณหภูมิการทำงาน:</span>
                                <span class="spec-value">-40°C ถึง +85°C</span>
                            </div>
                            <div class="spec-item">
                                <span class="spec-label">วัสดุ:</span>
                                <span class="spec-value">พลาสติก ABS + เหล็ก</span>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Button -->
                    <div class="product-actions">
                        <a href="{{ route('frontend.contact') }}" class="btn btn-contact-us">
                            <i class="icon-phone"></i>
                            ติดต่อเรา
                        </a>
                        <p class="contact-note">ต้องการข้อมูลเพิ่มเติมหรือสั่งซื้อสินค้า กรุณาติดต่อเรา</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
    // Initialize Fancybox for gallery
    Fancybox.bind("[data-fancybox]", {
        // Your custom options
        loop: true,
        buttons: [
            "zoom",
            "slideShow",
            "fullScreen",
            "thumbs",
            "close"
        ],
        animationEffect: "fade",
        transitionEffect: "slide",
        thumbs: {
            autoStart: false
        }
    });
    // Gallery functionality
    document.addEventListener('DOMContentLoaded', function() {
        const mainImage = document.getElementById('mainImage');
        const mainImageLink = document.querySelector('.main-image-link');
        const thumbnailItems = document.querySelectorAll('.thumbnail-item');
        // Add click event to thumbnails
        thumbnailItems.forEach(item => {
            item.addEventListener('click', function() {
                const imageSrc = this.getAttribute('data-image');
                // Update main image
                mainImage.src = imageSrc;
                mainImage.alt = this.querySelector('img').alt;
                // Update main image link for Fancybox
                mainImageLink.href = imageSrc;
                // Remove active class from all thumbnails
                thumbnailItems.forEach(thumb => thumb.classList.remove('active'));
                // Add active class to clicked thumbnail
                this.classList.add('active');
            });
        });
        // Add hover effect to thumbnails
        thumbnailItems.forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.transform = 'scale(1.05)';
            });
            item.addEventListener('mouseleave', function() {
                this.style.transform = 'scale(1)';
            });
        });
    });
</script>

@endsection