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

@section('content')
    <!-- Breadcrumb -->
    <div class="pt-10">
        <div class="container">
            <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">
                            <span class="icon-[tabler--home] size-4 mr-2"></span>
                            หน้าแรก
                        </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 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.makewebeasy.net/makeweb/0/gN0H48Bic/Other/minimal_medicinal_pills_composition.jpg?v=202012190947',
                                    'alt' => 'ยาพาราเซตามอล ด้านหน้า',
                                    'url' => '#',
                                ],
                                [
                                    'type' => 'image',
                                    'src' =>
                                        'https://image.makewebeasy.net/makeweb/0/gN0H48Bic/Other/minimal_medicinal_pills_composition.jpg?v=202012190947',
                                    'alt' => 'ยาพาราเซตามอล ด้านข้าง',
                                    'url' => '#',
                                ],
                                [
                                    'type' => 'image',
                                    'src' =>
                                        'https://image.makewebeasy.net/makeweb/0/gN0H48Bic/Other/minimal_medicinal_pills_composition.jpg?v=202012190947',
                                    'alt' => 'ยาพาราเซตามอล ด้านหลัง',
                                    'url' => '#',
                                ],
                                [
                                    'type' => 'image',
                                    'src' =>
                                        'https://image.makewebeasy.net/makeweb/0/gN0H48Bic/Other/minimal_medicinal_pills_composition.jpg?v=202012190947',
                                    '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-green-600 font-bold text-2xl mb-6">฿35.00</p>
                        <p class="text-gray-600 text-lg leading-relaxed mb-6">
                            ยาพาราเซตามอลเป็นยาลดไข้และบรรเทาปวดที่ใช้กันอย่างแพร่หลาย สามารถบรรเทาอาการปวดศีรษะ ปวดฟัน
                            ปวดกล้ามเนื้อ และลดไข้ได้อย่างมีประสิทธิภาพ
                        </p>
                    </div>

                    <!-- Product Features -->
                    <div class="space-y-4">
                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--circle-check] text-green-500 mt-1"></span>
                            <p class="text-gray-600">ลดไข้และบรรเทาอาการปวด</p>
                        </div>
                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--circle-check] text-green-500 mt-1"></span>
                            <p class="text-gray-600">ออกฤทธิ์เร็วภายใน 30 นาที</p>
                        </div>
                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--circle-check] text-green-500 mt-1"></span>
                            <p class="text-gray-600">รับประทานง่าย มีขนาดเม็ดที่เหมาะสม</p>
                        </div>
                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--circle-check] text-green-500 mt-1"></span>
                            <p class="text-gray-600">ผ่านการรับรองจาก อย.</p>
                        </div>
                    </div>

                    <!-- Contact Button -->
                    <div class="pt-6">
                        <a href="{{ route('contact') }}"
                            class="group relative inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-green-600 to-green-400 text-white font-medium rounded-xl overflow-hidden transition-all hover:shadow-lg">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-green-400 to-green-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                            <span class="relative flex items-center gap-2">
                                สั่งซื้อสินค้า
                                <span class="icon-[tabler--shopping-cart]"></span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection