@extends('frontend::layouts.master')

@section('content')
    <!-- Breadcrumb -->
    <div class="pt-10">
        <div class="container max-w-7xl mx-auto">
            <nav class="flex overflow-x-auto" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3 whitespace-nowrap">
                    <li class="inline-flex items-center">
                        <a href="{{ route('index') }}"
                            class="inline-flex items-center text-gray-500 hover:text-green-600 transition-colors">
                            หน้าแรก
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-400"></span>
                            <a href="{{ route('products') }}"
                                class="ml-1 text-gray-500 hover:text-green-600 transition-colors md:ml-2">
                                สินค้า
                            </a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-400"></span>
                            <span class="ml-1 text-green-600 font-medium md:ml-2 truncate max-w-[200px] md:max-w-none">
                                วิตามินซี
                            </span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Product Detail Section -->
    <section class="pb-16 pt-10">
        <div class="container max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <!-- Product Image Carousel -->
                <div class="relative">
                    <div class="">
                        @php
                            $slideDatas = [
                                [
                                    'type' => 'image',
                                    'src' =>
                                        'https://image.makewebcdn.com/makeweb/m_1200x600/bIYWer913/VitC/Vit_C_60cap_FRONT_02.jpg',
                                    'alt' => 'วิตามินซี ด้านหน้า',
                                    'url' => '#',
                                ],
                                [
                                    'type' => 'image',
                                    'src' =>
                                        'https://image.makewebcdn.com/makeweb/m_1200x600/bIYWer913/VitC/Vit_C_60cap_FRONT_02.jpg',
                                    'alt' => 'วิตามินซี ด้านข้าง',
                                    'url' => '#',
                                ],
                                [
                                    'type' => 'image',
                                    'src' =>
                                        'https://image.makewebcdn.com/makeweb/m_1200x600/bIYWer913/VitC/Vit_C_60cap_FRONT_02.jpg',
                                    'alt' => 'วิตามินซี ด้านหลัง',
                                    'url' => '#',
                                ],
                                [
                                    'type' => 'image',
                                    'src' =>
                                        'https://image.makewebcdn.com/makeweb/m_1200x600/bIYWer913/VitC/Vit_C_60cap_FRONT_02.jpg',
                                    'alt' => 'วิตามินซี รายละเอียด',
                                    'url' => '#',
                                ],
                            ];
                        @endphp
                        <div class="com-carousel-thumbnail pb-6 md:sticky top-[70px]">
                            <section class="splide no-drag relative" id="main-carousel">
                                <div class="splide__track rounded-3xl">
                                    <ul class="splide__list">
                                        @if (!empty($slideDatas))
                                            @foreach ($slideDatas as $item)
                                                <li class="splide__slide">
                                                    <img class="starting-image rounded-3xl" src="{{ $item['src'] ?? '' }}"
                                                        alt="{{ $item['alt'] ?? '' }}">
                                                </li>
                                            @endforeach
                                        @endif
                                    </ul>
                                    <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                                </div>
                            </section>
                            <section class="splide mt-2" id="thumbnail-carousel">
                                <div class="splide__track">
                                    <ul class="splide__list">
                                        @if (!empty($slideDatas))
                                            @foreach ($slideDatas as $item)
                                                <li class="splide__slide overflow-hidden flex items-center">
                                                    <img class="rounded-xl w-full h-full object-contain object-center"
                                                        src="{{ $item['src'] ?? '' }}" alt="{{ $item['alt'] ?? '' }}">
                                                </li>
                                            @endforeach
                                        @endif
                                    </ul>
                                </div>
                                <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                            </section>
                        </div>
                    </div>
                </div>

                <!-- Product Description -->
                <div class="space-y-8">
                    <div>
                        <h2 class="text-3xl font-bold text-gray-900 mb-4">วิตามินซี</h2>
                        <p class="text-gray-600 text-lg leading-relaxed mb-6">
                            วิตามินซีเป็นสารต้านอนุมูลอิสระที่สำคัญ ช่วยเสริมภูมิคุ้มกันและบำรุงผิวพรรณ ทำให้ผิวดูสดใสและมีสุขภาพดี นอกจากนี้ยังช่วยในการดูดซึมธาตุเหล็กจากอาหาร ช่วยให้ร่างกายแข็งแรงและลดความเสี่ยงต่อการเกิดโรค Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptatibus tempora fugiat maiores soluta possimus nihil! Ex officiis esse repellat asperiores molestiae quaerat id et, vel praesentium pariatur, eos saepe ipsam, vitae nulla! Autem corporis vel, ipsa aliquam molestiae est, culpa quisquam reprehenderit sit modi nesciunt vitae fuga similique ut ea ullam accusantium alias officiis! Porro dicta nulla earum officiis? Laboriosam repellendus nulla minima aliquam libero. Cum blanditiis molestias soluta eius nulla tenetur eligendi accusamus adipisci id alias facere est non nobis nesciunt, fugit dicta minus officiis illum architecto voluptatum odit. Quidem cupiditate reprehenderit nulla consequuntur iste dolorem voluptas delectus?
                        </p>
                    </div>
                    <!-- Contact Button -->
                    <div class="flex flex-wrap">
                        <a href="/contact" class="group relative px-8 py-4 bg-green-600 text-white rounded-xl overflow-hidden">
                            <span class="relative z-10 flex items-center gap-2">
                                ติดต่อเรา
                                <span
                                    class="icon-[tabler--arrow-right] size-5 transition-transform group-hover:translate-x-1"></span>
                            </span>
                            <div
                                class="absolute inset-0 bg-green-700 translate-y-full transition-transform group-hover:translate-y-0">
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection