@extends('frontend::layouts.master')
@section('content')
    <link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" rel="stylesheet" />


    <section class="page-title-dark" id="page-title" style="background-image: url('{{ Module::asset('frontend:images/bg-breadcrumb.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 text-white">รวมสถานที่ท่องเที่ยว</h2>
                </div>
            </div>

            <!-- Breadcrumb -->
            <nav class="breadcrumb-container">
                <div class="container">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item text-white">
                            <a href="{{ route('frontend.index') }}">หน้าหลัก</a>
                        </li>
                        <li class="breadcrumb-item text-white">
                            <a href="{{ route('frontend.product-tour') }}">รวมสถานที่ท่องเที่ยว</a>
                        </li>
                        <li class="breadcrumb-item active text-white">
                            <a href="#">ชื่อสถานที่ท่องเที่ยว</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </section>

    <section class="sec-product-detail">
        <div class="container">
            <div class="row">
                <div class="col-4">
                    <div class="product-image-brand">
                        <img src="{{ Module::asset('frontend:images/logo.png') }}" alt="ร้านสินค้า">
                    </div>
                </div>
                <div class="col-8">
                    <div class="product-brand-info">
                        <h2 class="product-title">ชื่อสถานที่ท่องเที่ยว</h2>
                        <p class="product-desc">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit
                            amet consectetur adipisicing elit. Quisquam, quos.
                        </p>
                    </div>
                </div>
                <div class="col-12 mt-5">
                    <div class="youtube-video">
                        <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" width="100%" height="100%" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                        </iframe>
                    </div>
                </div>
            </div>

            <div class="row">
                <section class="sec-product-brand">
                    <div class="box-area-content">
                        <div class="container">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-12">
                                    <div class="carousel tour-slide" data-items="4" data-margin="20">
                                        <!-- Product Card ตัวอย่าง -->
                                        @for ($i = 0; $i < 4; $i++)
                                            <div class="product-card">
                                                <div class="product-image">
                                                    <img src="{{ Module::asset('frontend:images/tour-travel.jpg') }}" alt="Product Image" />
                                                </div>
                                                <div class="product-content">
                                                    <div class="title">สถานที่ท่องเที่ยว</div>
                                                    <div class="description">Lorem ipsum dolor sit amet consectetur
                                                        adipisicing elit. Dicta, sunt libero debitis possimus corporis
                                                        consequatur.</div>
                                                </div>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>

    <section class="reg-1">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <div class="toggle-section">
                        <div class="title-reg-1" onclick="toggleRegInfo(this)">
                            <h2>ใบทะเบียนวิสาหกิจชุมชน</h2>
                            <span class="toggle-icon">▶</span>
                        </div>
                        <div class="toggle-content">
                            <p>รหัสทะเบียน 1-18-02-06/1-0017</p>
                            <p>ให้ไว้เมื่อวันที่ 15 กันยายน 2560</p>
                        </div>
                    </div>
                    <div class="detail-reg-1">
                        <img src="{{ Module::asset('frontend:images/registration-certificate.jpg') }}" alt="Product Image" />
                    </div>
                </div>

                <div class="col-6">
                    <div class="toggle-section">
                        <div class="title-reg-1" onclick="toggleRegInfo(this)">
                            <h2>ใบทะเบียนพาณิชย์</h2>
                            <span class="toggle-icon">▶</span>
                        </div>
                        <div class="toggle-content">
                            <p>ทะเบียนเลขที่ 1630400002143 </p>
                            <p>คำขอจัดตั้งเลขที่ 1804760000002</p>
                            <p>จดทะเบียนพาณิชย์เมื่อวันที่ 15 มีนาคม 2560</p>
                        </div>
                    </div>
                    <div class="detail-reg-1">
                        <img src="{{ Module::asset('frontend:images/registration-certificate-1.jpg') }}" alt="Product Image" />
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="product-standards">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="toggle-section">
                        <div class="title-reg-1">
                            <h2>ใบรับรองอื่นๆ</h2>
                        </div>
                    </div>
                </div>

                <div class="col-4">
                    <div class="detail-reg-1">
                        <img src="{{ Module::asset('frontend:images/other-certificate.jpg') }}" alt="Product Image" />
                    </div>
                </div>
                <div class="col-4">
                    <div class="detail-reg-1">
                        <img src="{{ Module::asset('frontend:images/other-certificate.jpg') }}" alt="Product Image" />
                    </div>
                </div>
                <div class="col-4">
                    <div class="detail-reg-1">
                        <img src="{{ Module::asset('frontend:images/other-certificate.jpg') }}" alt="Product Image" />
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="contact-product">
        <div class="container">
            <div class="row">
                <div class="contact-product-title">
                    <h2>ช่องทางการติดต่อ</h2>
                    <div class="card-body col-md-7">
                        <div class="p-3  h-100">
                            <p><strong>ชื่อ:</strong> Farm Shop</p>
                            <p><strong>นามสกุล:</strong> Agrotravel</p>
                            <p><strong>โทรศัพท์:</strong> 0818765432</p>
                            <p><strong>Email:</strong> shop@agrotravel.com</p>
                            <p><strong>Address:</strong> 123 Moo 5, Sukhumvit Rd, Bangkok, 10110, THAILAND</p>
                            <div class="social-icons social-icons-colored social-icons-rounded m-t-20">
                                <ul>
                                    <li class="social-line">
                                        <a href="">
                                            <i class="fab fa-line"></i>
                                        </a>
                                    </li>
                                    <li class="social-facebook">
                                        <a href="">
                                            <i class="fab fa-facebook-f"></i>
                                        </a>
                                    </li>
                                    <li class="social-youtube">
                                        <a href=""><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="social-instagram"><a href="#"><i class="fab fa-instagram"></i></a></li>
                                    <li class="social-x"><a href="#"><i class="fab fa-x-twitter"></i></a></li>

                                    <li class="social-tiktok">
                                        <a href="">
                                            <i class="fab fa-tiktok"></i>
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 contact-detail-right">
                        <div class="ratio ratio-1x1" id="mapPreview">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18..." style="border:0;" width="100%" height="250" allowfullscreen loading="lazy"></iframe>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    {{-- ===== Toggle Script ===== --}}
    <script>
        function toggleRegInfo(element) {
            const content = element.nextElementSibling;
            const icon = element.querySelector('.toggle-icon');
            content.classList.toggle('active');
        }
    </script>
@endsection