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

@section('content')
    <div class="member-profile bg-light min-vh-100 py-0">
        <div class="container-fluid">
            <div class="row">

                <!-- Sidebar ด้านซ้าย -->
                <div class="col-md-3 col-lg-2 bg-secondary text-white min-vh-100 p-4">
                    <h5 class="fw-bold mb-4">เมนู</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item mb-2">
                            <a class="nav-link text-white px-0" href="{{ route('frontend.member-profile') }}">ข้อมูลสมาชิก</a>
                        </li>
                        <li class="nav-item mb-2">
                            <a class="nav-link text-white px-0" href="{{ route('frontend.member-product-store') }}">ร้านสินค้า</a>
                        </li>
                        <li class="nav-item mb-2">
                            <a class="nav-link text-white px-0" href="{{ route('frontend.member-product-accom') }}">ที่พัก</a>
                        </li>
                        <li class="nav-item mb-2">
                            <a class="nav-link text-white px-0" href="{{ route('frontend.member-product-tour') }}">สถานที่ท่องเที่ยว</a>
                        </li>
                    </ul>
                </div>

                <!-- Content ด้านขวา -->
                <div class="col-md-9 col-lg-10">
                    <div class="container py-5">
                        <div class="member-edit bg-gray-100 min-h-screen p-6">
                            <div class="container mx-auto max-w-5xl bg-white rounded-4 shadow p-6">

                                <!-- หัวข้อ -->
                                <div class="d-flex align-items-center mb-6">
                                    <h3 class="text-2xl fw-semibold text-gray-700 me-auto mt-3">จัดการข้อมูลร้านค้า :
                                        แก้ไขข้อมูลร้านค้า</h3>
                                    <a class="btn btn-primary" href="{{ route('frontend.member-product-store') }}">
                                        <i class="fas fa-arrow-left me-2"></i> กลับ
                                    </a>
                                </div>

                                <!-- ฟอร์มแก้ไขสมาชิก -->
                                <div class="card-body">
                                    <section class="main-product py-0">
                                        <div class="">
                                            <h3 class="mb-0">รายละเอียดหน้าปก</h3>

                                            <div class="row align-items-center">
                                                <!-- รูปภาพ -->
                                                <div class="col-md-4 text-center mb-3">
                                                    <div class="product-image position-relative">
                                                        <img class="img-fluid rounded shadow-sm mb-3" id="coverImagePreview" src="{{ Module::asset('frontend:images/mockup.jpg') }}" alt="ภาพหน้าปกร้าน" />

                                                        <!-- ปุ่มเปลี่ยน / ลบรูป -->
                                                        <div class="d-flex justify-content-center gap-2">
                                                            <label class="btn btn-outline-primary btn-sm">
                                                                📸 เปลี่ยนรูป
                                                                <input id="coverImageUpload" type="file" accept="image/*" onchange="previewCoverImage()" hidden>
                                                            </label>
                                                            <button class="btn btn-outline-danger btn-sm" type="button" onclick="deleteCoverImage()">🗑️
                                                                ลบรูป</button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- ข้อมูล -->
                                                <div class="col-md-8">
                                                    <div class="product-content">
                                                        <div class="form-group mb-3">
                                                            <label class="fw-bold">สำหรับหน้าปก ร้านสินค้า</label>
                                                            <input class="form-control" id="coverStoreName" type="text" value="ชื่อที่พัก">
                                                        </div>

                                                        <div class="form-group mb-3">
                                                            <label class="fw-bold">คำอธิบายสินค้า / ร้านค้า</label>
                                                            <textarea class="form-control" id="coverStoreDesc" rows="3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</textarea>
                                                        </div>


                                                        <div class="text-end">

                                                            <button class="btn btn-primary px-4" type="button" onclick="saveCoverData()">💾
                                                                บันทึกข้อมูล</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>

                                    <section class="member-edit-section py-0">
                                        <div class="">
                                            <h3>แก้ไขโลโก้ร้านค้า</h3>
                                            {{-- ===== ฟอร์มข้อมูลร้านค้า ===== --}}
                                            <form id="memberEditForm" onsubmit="return false;">
                                                <div class="row g-4">
                                                    <div class="col-md-4 text-center">
                                                        <div class="profile-image position-relative">
                                                            <img class="rounded shadow-sm w-100 mb-3" id="previewImage" src="{{ Module::asset('frontend:images/mockup.jpg') }}" alt="รูปภาพร้านค้า" />
                                                            <label class="btn btn-outline-primary btn-sm">
                                                                📸 เปลี่ยนรูปภาพ
                                                                <input id="uploadImage" type="file" accept="image/*" onchange="previewFile()" hidden>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-8">
                                                        <div class="form-group mb-3">
                                                            <label class="fw-bold">ชื่อร้านสินค้า</label>
                                                            <input class="form-control" id="storeName" type="text" value="ฟาร์มนกใหญ่เมล่อน">
                                                        </div>
                                                        <div class="form-group mb-3">
                                                            <label class="fw-bold">คำอธิบายร้าน</label>
                                                            <textarea class="form-control" id="storeDesc" rows="4">จำหน่ายเมล่อนปลอดสาร สดใหม่จากสวนทุกวัน</textarea>
                                                        </div>
                                                        <div class="form-group mb-3">
                                                            <label class="fw-bold">YouTube Video ID</label>
                                                            <input class="form-control" id="youtubeVideoId" name="youtubeVideoId" type="text" value="{{ old('youtubeVideoId', $data->youtubeVideoId ?? '') }}" placeholder="เช่น dQw4w9WgXcQ (จาก URL: https://www.youtube.com/watch?v=dQw4w9WgXcQ)">
                                                            <small class="text-muted">วาง Video ID หรือ URL เต็ม YouTube</small>
                                                        </div>

                                                        <div class="form-group mb-3">
                                                            <button class="btn btn-outline-primary btn-sm" type="button" onclick="updateYouTubePreview()">
                                                                <i class="fab fa-youtube me-1"></i> แสดงตัวอย่างวิดีโอ
                                                            </button>
                                                        </div>

                                                        <div class="col-12 mt-3">
                                                            <div class="youtube-video" id="youtubePreviewWrapper" style="display: none;">
                                                                <label class="fw-bold mb-2">ตัวอย่างวิดีโอ YouTube</label>
                                                                <div class="embed-responsive">
                                                                    <iframe id="youtubeIframe" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" width="100%" height="400" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                                                                    </iframe>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                            {{-- ===== Product Manager / เพิ่ม ลบ แก้ไข สินค้า ===== --}}
                                            <section class="sec-product-brand py-0">
                                                <div class="container">
                                                    <h3 class="mb-4">สินค้าของร้าน ( สูงสุด 10 รายการ )</h3>
                                                    <div class="row g-4" id="productList"></div>
                                                    <div class="text-center mt-3">
                                                        <button class="btn btn-outline-success" id="addProductBtn">➕
                                                            เพิ่มสินค้า</button>
                                                    </div>
                                                </div>
                                            </section>
                                            {{-- ===== ใบอนุญาต / เอกสารรับรอง ===== --}}
                                            <h3 class="mb-4">ใบอนุญาต / เอกสารรับรอง</h3>
                                            <div class="row">
                                                <!-- ใบทะเบียนวิสาหกิจชุมชน -->
                                                <div class="col-md-6 mb-4">
                                                    <div class="toggle-section border rounded shadow-sm p-3">
                                                        <div class="title-reg-1 d-flex justify-content-between align-items-center" onclick="toggleRegInfo(this)">
                                                            <h5 class="m-0">ใบทะเบียนวิสาหกิจชุมชน</h5>
                                                            <span class="toggle-icon">▶</span>
                                                        </div>

                                                        <div class="toggle-content mt-3">
                                                            <div class="mb-2">
                                                                <label class="form-label">รหัสทะเบียน</label>
                                                                <input class="form-control" type="text" value="1-18-02-06/1-0017">
                                                            </div>
                                                            <div class="mb-2">
                                                                <label class="form-label">ให้ไว้เมื่อวันที่</label>
                                                                <input class="form-control" type="text" value="15 กันยายน 2560">
                                                            </div>

                                                            <!-- แนบไฟล์รูป -->
                                                            <div class="mb-3">
                                                                <label class="form-label fw-bold">แนบไฟล์ใหม่ (รูปภาพ /
                                                                    เอกสาร)</label>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <label class="btn btn-outline-primary btn-sm mb-0">
                                                                        📸 เปลี่ยนรูป
                                                                        <input id="communityImageUpload" type="file" accept="image/*" onchange="previewCommunityImage()" hidden>
                                                                    </label>
                                                                    <button class="btn btn-outline-danger btn-sm" type="button" onclick="deleteCommunityImage()">🗑️ ลบรูป</button>
                                                                </div>
                                                            </div>

                                                            <div class="text-end">
                                                                <button class="btn btn-sm btn-primary">💾 บันทึก</button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- แสดงรูปเอกสาร -->
                                                    <div class="detail-reg-1 mt-3 text-center">
                                                        <img class="img-fluid rounded shadow-sm" id="communityImagePreview" src="{{ Module::asset('frontend:images/600x800.jpg') }}" alt="เอกสารแนบ" style="max-height: 500px;">
                                                    </div>
                                                </div>
                                                {{-- ใบทะเบียนพาณิชย์ --}}
                                                <div class="col-md-6 mb-4">
                                                    <div class="toggle-section border rounded shadow-sm p-3">
                                                        <div class="title-reg-1 d-flex justify-content-between align-items-center" onclick="toggleRegInfo(this)">
                                                            <h5 class="m-0">ใบทะเบียนพาณิชย์</h5>
                                                            <span class="toggle-icon">▶</span>
                                                        </div>
                                                        <div class="toggle-content mt-3">
                                                            <div class="mb-2">
                                                                <label class="form-label">เลขที่ทะเบียน</label>
                                                                <input class="form-control" type="text" value="1630400002143">
                                                            </div>
                                                            <div class="mb-2">
                                                                <label class="form-label">เลขที่คำขอจัดตั้ง</label>
                                                                <input class="form-control" type="text" value="1804760000002">
                                                            </div>
                                                            <div class="mb-2">
                                                                <label class="form-label">วันที่จดทะเบียน</label>
                                                                <input class="form-control" type="text" value="15 มีนาคม 2560">
                                                            </div>

                                                            <!-- แนบไฟล์รูป -->
                                                            <div class="mb-3">
                                                                <label class="form-label fw-bold">แนบไฟล์ใหม่ (รูปภาพ /
                                                                    เอกสาร)</label>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <label class="btn btn-outline-primary btn-sm mb-0">
                                                                        📸 เปลี่ยนรูป
                                                                        <input id="regImageUpload" type="file" accept="image/*" onchange="previewRegImage()" hidden>
                                                                    </label>
                                                                    <button class="btn btn-outline-danger btn-sm" type="button" onclick="deleteRegImage()">🗑️
                                                                        ลบรูป</button>
                                                                </div>
                                                            </div>

                                                            <div class="text-end">
                                                                <button class="btn btn-sm btn-primary">💾 บันทึก</button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- แสดงรูปเอกสาร -->
                                                    <div class="detail-reg-1 mt-3 text-center">
                                                        <img class="img-fluid rounded shadow-sm" id="regImagePreview" src="{{ Module::asset('frontend:images/600x800.jpg') }}" alt="เอกสารแนบ" style="max-height: 500px;">
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- ===== OTOP Section ===== --}}

                                            <section class="otop">
                                                <div class="container">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h3>มาตรฐาน OTOP</h3>
                                                        <button class="btn btn-outline-success btn-sm" onclick="addOtopImage()">➕ เพิ่มรูป OTOP</button>
                                                    </div>
                                                    <div class="row" id="otopList"></div>
                                                </div>
                                            </section>

                                            {{-- ===== มาตรฐานสินค้าการเกษตร ===== --}}

                                            <section class="product-standards">
                                                <div class="container">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h3>มาตรฐานสินค้าการเกษตร</h3>
                                                        <button class="btn btn-outline-success btn-sm" onclick="addStandardImage('agri')">➕
                                                            เพิ่มรูป</button>
                                                    </div>
                                                    <div class="row" id="agriList"></div>
                                                </div>
                                            </section>

                                            {{-- ===== ใบรับรองอื่นๆ ===== --}}

                                            <section class="product-standards">
                                                <div class="container">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h3>ใบรับรองอื่นๆ</h3>
                                                        <button class="btn btn-outline-success btn-sm" onclick="addStandardImage('other')">➕
                                                            เพิ่มรูป</button>
                                                    </div>
                                                    <div class="row" id="otherList"></div>
                                                </div>
                                            </section>
                                        </div>
                                    </section>

                                    <div class="text-center mt-5">
                                        <button class="btn btn-success px-5 m-t-30 mt-3" type="submit" onclick="showSaveModal()">
                                            ✅ บันทึกข้อมูล
                                        </button>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div> <!-- end content -->
            </div>
        </div>
    </div>

    <!-- Modal บันทึกข้อมูลเรียบร้อย -->
    <div class="modal fade" id="saveSuccessModal" aria-labelledby="saveSuccessModalLabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold text-success" id="saveSuccessModalLabel">
                        <i class="fas fa-check-circle me-2"></i>สำเร็จ
                    </h5>
                    <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <div class="mb-3">
                        <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                    </div>
                    <h5 class="fw-bold mb-2">บันทึกข้อมูลเรียบร้อย</h5>
                    <p class="text-muted">ข้อมูลของคุณถูกบันทึกเรียบร้อยแล้ว</p>
                </div>
                <div class="modal-footer border-0 justify-content-center">
                    <button class="btn btn-success px-4" data-dismiss="modal" data-bs-dismiss="modal" type="button" onclick="closeModal(); return false;">ตกลง</button>
                    <button class="btn btn-secondary px-4" data-dismiss="modal" data-bs-dismiss="modal" type="button" onclick="closeModal(); return false;">ยกเลิก</button>
                </div>
            </div>
        </div>
    </div>


    {{-- ===== Script ===== --}}
    <script>
        // ===== ฟังก์ชันแสดง Modal บันทึกข้อมูล =====
        function showSaveModal() {
            // ใช้ jQuery (Bootstrap 4)
            if (typeof jQuery !== 'undefined') {
                jQuery('#saveSuccessModal').modal('show');
            }
            // ใช้ Bootstrap 5
            else if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const modal = new bootstrap.Modal(document.getElementById('saveSuccessModal'));
                modal.show();
            }
        }

        // ===== ฟังก์ชันปิด Modal =====
        function closeModal() {
            // ลองใช้หลายวิธีเพื่อให้แน่ใจว่าปิดได้
            const modalElement = document.getElementById('saveSuccessModal');

            // วิธีที่ 1: ใช้ jQuery (Bootstrap 4)
            if (typeof jQuery !== 'undefined') {
                jQuery('#saveSuccessModal').modal('hide');
            }

            // วิธีที่ 2: ใช้ Bootstrap 5
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const modal = bootstrap.Modal.getInstance(modalElement);
                if (modal) {
                    modal.hide();
                }
            }

            // วิธีที่ 3: ปิดด้วย vanilla JS
            if (modalElement) {
                modalElement.classList.remove('show');
                modalElement.style.display = 'none';
                modalElement.setAttribute('aria-hidden', 'true');
                modalElement.removeAttribute('aria-modal');

                // ลบ backdrop
                const backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) {
                    backdrop.remove();
                }

                // ลบ class จาก body
                document.body.classList.remove('modal-open');
                document.body.style.overflow = '';
                document.body.style.paddingRight = '';
            }
        }

        // ===== ฟังก์ชันแสดงภาพ preview หลังเลือกรูปใหม่ =====
        function previewCoverImage() {
            const input = document.getElementById('coverImageUpload');
            const file = input.files[0];
            const preview = document.getElementById('coverImagePreview');

            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

        // ===== ฟังก์ชันลบรูปภาพ (รีเซ็ตกลับเป็น placeholder) =====
        function deleteCoverImage() {
            if (confirm('คุณต้องการลบรูปภาพนี้หรือไม่?')) {
                const preview = document.getElementById('coverImagePreview');
                const input = document.getElementById('coverImageUpload');
                preview.src = "{{ Module::asset('frontend:images/placeholder.jpg') }}";
                input.value = '';
            }
        }

        // ===== ฟังก์ชันบันทึกข้อมูล (จำลอง) =====
        function saveCoverData() {
            const name = document.getElementById('coverStoreName').value.trim();
            const desc = document.getElementById('coverStoreDesc').value.trim();

            if (!name) {
                alert('⚠️ กรุณากรอกชื่อที่พัก');
                return;
            }

            // แสดง modal แทน alert
            showSaveModal();
        }

        // ===== ฟังก์ชันอัปเดต YouTube Video Preview =====
        function updateYouTubePreview() {
            const input = document.getElementById('youtubeVideoId').value.trim();
            const iframe = document.getElementById('youtubeIframe');
            const wrapper = document.getElementById('youtubePreviewWrapper');

            if (!input) {
                alert('⚠️ กรุณาใส่ YouTube Video ID หรือ URL');
                return;
            }

            // ดึง Video ID จาก URL หรือใช้ค่าที่กรอกโดยตรง
            let videoId = extractYouTubeVideoId(input);

            if (!videoId) {
                alert('⚠️ ไม่สามารถดึง Video ID ได้ กรุณาตรวจสอบ URL หรือ Video ID');
                return;
            }

            // อัปเดต iframe src และแสดง preview
            iframe.src = `https://www.youtube.com/embed/${videoId}`;
            wrapper.style.display = 'block';

            // Scroll ไปที่ preview
            wrapper.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
        }

        // ===== ฟังก์ชันดึง Video ID จาก YouTube URL =====
        function extractYouTubeVideoId(url) {
            // ถ้าเป็น Video ID โดยตรง (ยาว 11 ตัวอักษร)
            if (url.length === 11 && !/[^a-zA-Z0-9_-]/.test(url)) {
                return url;
            }

            // รูปแบบ URL ต่างๆ
            const patterns = [
                /(?:youtube\.com\/watch\?v=)([a-zA-Z0-9_-]{11})/, // https://www.youtube.com/watch?v=VIDEO_ID
                /(?:youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/, // https://www.youtube.com/embed/VIDEO_ID
                /(?:youtu\.be\/)([a-zA-Z0-9_-]{11})/, // https://youtu.be/VIDEO_ID
                /(?:youtube\.com\/v\/)([a-zA-Z0-9_-]{11})/, // https://www.youtube.com/v/VIDEO_ID
                /(?:youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/ // https://www.youtube.com/shorts/VIDEO_ID
            ];

            for (let pattern of patterns) {
                const match = url.match(pattern);
                if (match && match[1]) {
                    return match[1];
                }
            }

            return null;
        }

        // ===== Product Section =====
        let productCount = 0;
        const maxProducts = 10;
        const productList = document.getElementById('productList');
        const addProductBtn = document.getElementById('addProductBtn');

        function createProductCard(index) {
            const col = document.createElement('div');
            col.className = 'col-md-3';
            col.id = 'productCol' + index;
            col.innerHTML = `
        <div class="product-card border rounded shadow-sm p-3">
            <div class="product-image text-center mb-3 position-relative">
                <img id="productImage${index}" src="{{ Module::asset('frontend:images/mockup.jpg') }}" 
                     alt="Product Image" class="img-fluid rounded mb-2" />
                <label class="btn btn-outline-secondary btn-sm position-absolute top-50 start-50 translate-middle-x">
                    📸 เปลี่ยนรูป
                    <input type="file" class="form-control d-none" onchange="previewProductFile(event, ${index})">
                </label>
            </div>
            <div class="product-content">
                <div class="mb-2">
                    <label class="form-label">ชื่อสินค้า</label>
                    <input type="text" class="form-control" id="productTitle${index}" value="Product Title ${index+1}">
                </div>
                <div class="mb-2">
                    <label class="form-label">คำอธิบาย</label>
                    <textarea class="form-control" rows="2" id="productDesc${index}">คำอธิบายสินค้า ${index+1}</textarea>
                </div>
                <div class="mb-2 d-flex gap-2">
                    <div>
                        <label class="form-label">ราคาปกติ</label>
                        <input type="text" class="form-control" id="productOriginal${index}" value="550 THB">
                    </div>
                    <div>
                        <label class="form-label">ราคาขาย</label>
                        <input type="text" class="form-control" id="productPrice${index}" value="532 THB">
                    </div>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <button class="btn btn-sm btn-primary" onclick="saveProductData(${index})">💾 บันทึก</button>
                    <button class="btn btn-sm btn-danger" onclick="deleteProduct(${index})">🗑️ ลบ</button>
                </div>
            </div>
        </div>
    `;
            productList.appendChild(col);
        }

        function addProduct() {
            if (productCount >= maxProducts) {
                alert('❌ เพิ่มสินค้าได้สูงสุด 10 รายการเท่านั้น');
                return;
            }
            createProductCard(productCount);
            productCount++;
        }

        function deleteProduct(index) {
            const col = document.getElementById('productCol' + index);
            if (col) {
                col.remove();
                productCount--;
                const remaining = Array.from(productList.children);
                remaining.forEach((c, i) => {
                    c.id = 'productCol' + i;
                    c.querySelector('img').id = 'productImage' + i;
                    c.querySelector('input[id^="productTitle"]').id = 'productTitle' + i;
                    c.querySelector('textarea[id^="productDesc"]').id = 'productDesc' + i;
                    c.querySelector('input[id^="productOriginal"]').id = 'productOriginal' + i;
                    c.querySelector('input[id^="productPrice"]').id = 'productPrice' + i;
                    c.querySelector('button.btn-primary').setAttribute('onclick', 'saveProductData(' + i + ')');
                    c.querySelector('button.btn-danger').setAttribute('onclick', 'deleteProduct(' + i + ')');
                });
            }
        }

        function previewProductFile(event, index) {
            const reader = new FileReader();
            reader.onload = function() {
                document.getElementById('productImage' + index).src = reader.result;
            };
            if (event.target.files[0]) reader.readAsDataURL(event.target.files[0]);
        }

        function saveProductData(index) {
            const title = document.getElementById('productTitle' + index).value;
            const desc = document.getElementById('productDesc' + index).value;
            const original = document.getElementById('productOriginal' + index).value;
            const price = document.getElementById('productPrice' + index).value;

            alert(
                `✅ ข้อมูลสินค้า ${index+1} ถูกบันทึก (จำลอง)\nชื่อ: ${title}\nคำอธิบาย: ${desc}\nราคาปกติ: ${original}\nราคาขาย: ${price}`
            );
        }

        addProductBtn.addEventListener('click', addProduct);
        for (let i = 0; i < 4; i++) {
            addProduct();
        }

        // ===== OTOP Section =====
        let otopCount = 0;
        const maxOtop = 3;
        const otopList = document.getElementById('otopList');

        function createOtopCard(index) {
            const col = document.createElement('div');
            col.className = 'col-4 mb-3';
            col.id = 'otopCol' + index;
            col.innerHTML = `
        <div class="detail-reg-1 text-center position-relative">
            <img id="otopImage${index}" src="{{ Module::asset('frontend:images/600x800.jpg') }}" 
                 alt="OTOP Image ${index+1}" class="img-fluid rounded shadow-sm mb-2">
            <input type="file" class="form-control mb-2" onchange="previewOtopFile(event, ${index})">
            <button class="btn btn-sm btn-danger" onclick="deleteOtopImage(${index})">🗑️ ลบ</button>
        </div>
    `;
            otopList.appendChild(col);
        }

        function addOtopImage() {
            if (otopCount >= maxOtop) {
                alert('❌ เพิ่มรูป OTOP ได้สูงสุด 3 รูปเท่านั้น');
                return;
            }
            createOtopCard(otopCount);
            otopCount++;
        }

        function deleteOtopImage(index) {
            const col = document.getElementById('otopCol' + index);
            if (col) {
                col.remove();
                otopCount--;
                const remaining = Array.from(otopList.children);
                remaining.forEach((c, i) => {
                    c.id = 'otopCol' + i;
                    const img = c.querySelector('img');
                    img.id = 'otopImage' + i;
                    img.alt = `OTOP Image ${i+1}`;
                    c.querySelector('input[type="file"]').setAttribute('onchange', `previewOtopFile(event, ${i})`);
                    c.querySelector('button.btn-danger').setAttribute('onclick', `deleteOtopImage(${i})`);
                });
            }
        }

        function previewOtopFile(event, index) {
            const reader = new FileReader();
            reader.onload = function() {
                const img = document.getElementById('otopImage' + index);
                if (img) img.src = reader.result;
            };
            if (event.target.files[0]) reader.readAsDataURL(event.target.files[0]);
        }

        for (let i = 0; i < 3; i++) {
            addOtopImage();
        }

        // ===== Standard / Certificates Sections =====
        const maxStandard = 3;
        let agriCount = 0;
        let otherCount = 0;

        const agriList = document.getElementById('agriList');
        const otherList = document.getElementById('otherList');

        function createStandardCard(type, index) {
            const col = document.createElement('div');
            col.className = 'col-4 mb-3';
            col.id = type + 'Col' + index;
            col.innerHTML = `
        <div class="detail-reg-1 text-center position-relative">
            <img id="${type}Image${index}" src="{{ Module::asset('frontend:images/600x800.jpg') }}" 
                 alt="${type} Image ${index+1}" class="img-fluid rounded shadow-sm mb-2">
            <input type="file" class="form-control mb-2" onchange="previewStandardFile(event, '${type}', ${index})">
            <button class="btn btn-sm btn-danger" onclick="deleteStandardImage('${type}', ${index})">🗑️ ลบ</button>
        </div>
    `;
            if (type === 'agri') agriList.appendChild(col);
            if (type === 'other') otherList.appendChild(col);
        }

        function addStandardImage(type) {
            if (type === 'agri') {
                if (agriCount >= maxStandard) {
                    alert('❌ เพิ่มรูปได้สูงสุด 3 รูป');
                    return;
                }
                createStandardCard(type, agriCount);
                agriCount++;
            }
            if (type === 'other') {
                if (otherCount >= maxStandard) {
                    alert('❌ เพิ่มรูปได้สูงสุด 3 รูป');
                    return;
                }
                createStandardCard(type, otherCount);
                otherCount++;
            }
        }

        function deleteStandardImage(type, index) {
            const col = document.getElementById(type + 'Col' + index);
            if (col) {
                col.remove();
                if (type === 'agri') agriCount--;
                if (type === 'other') otherCount--;
                const list = type === 'agri' ? Array.from(agriList.children) : Array.from(otherList.children);
                list.forEach((c, i) => {
                    c.id = type + 'Col' + i;
                    const img = c.querySelector('img');
                    img.id = type + 'Image' + i;
                    img.alt = `${type} Image ${i+1}`;
                    c.querySelector('input[type="file"]').setAttribute('onchange',
                        `previewStandardFile(event,'${type}',${i})`);
                    c.querySelector('button.btn-danger').setAttribute('onclick',
                        `deleteStandardImage('${type}',${i})`);
                });
            }
        }

        function previewStandardFile(event, type, index) {
            const reader = new FileReader();
            reader.onload = function() {
                const img = document.getElementById(type + 'Image' + index);
                if (img) img.src = reader.result;
            };
            if (event.target.files[0]) reader.readAsDataURL(event.target.files[0]);
        }

        // สร้างเริ่มต้น 3 รูปต่อ Section
        for (let i = 0; i < 3; i++) {
            addStandardImage('agri');
        }
        for (let i = 0; i < 3; i++) {
            addStandardImage('other');
        }

        // ===== แสดงรูป Preview หลังอัปโหลด =====
        function previewRegImage() {
            const input = document.getElementById('regImageUpload');
            const file = input.files[0];
            const preview = document.getElementById('regImagePreview');

            if (!file) return;
            const reader = new FileReader();
            reader.onload = (e) => {
                preview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

        // ===== ลบรูปกลับเป็น placeholder =====
        function deleteRegImage() {
            if (confirm('คุณต้องการลบรูปใบทะเบียนพาณิชย์นี้หรือไม่?')) {
                const preview = document.getElementById('regImagePreview');
                const input = document.getElementById('regImageUpload');
                preview.src = "{{ Module::asset('frontend:images/placeholder-portrait.jpg') }}";
                input.value = '';
            }
        }

        // ===== toggle เปิด/ปิด accordion ของใบทะเบียน =====
        function toggleRegInfo(el) {
            const content = el.parentElement.querySelector('.toggle-content');
            const icon = el.querySelector('.toggle-icon');
            content.classList.toggle('d-none');
            icon.textContent = content.classList.contains('d-none') ? '▶' : '▼';
        }

        function toggleRegInfo(element) {
            const content = element.parentElement.querySelector('.toggle-content');
            const icon = element.querySelector('.toggle-icon');
            content.classList.toggle('d-none');
            icon.textContent = content.classList.contains('d-none') ? '▶' : '▼';
        }

        // ✅ เปลี่ยนรูปใบทะเบียนวิสาหกิจ
        function previewCommunityImage() {
            const input = document.getElementById('communityImageUpload');
            const preview = document.getElementById('communityImagePreview');
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = e => preview.src = e.target.result;
                reader.readAsDataURL(file);
            }
        }

        // ✅ ลบรูปใบทะเบียนวิสาหกิจ
        function deleteCommunityImage() {
            const preview = document.getElementById('communityImagePreview');
            preview.src = "{{ Module::asset('frontend:images/placeholder.png') }}"; // ใช้ภาพ placeholder
            document.getElementById('communityImageUpload').value = '';
        }
        // ===== ฟังก์ชันร้านค้าและใบอนุญาต =====
        function toggleRegInfo(element) {
            const content = element.nextElementSibling;
            content.classList.toggle('active');
        }

        function previewFile() {
            const file = document.getElementById('uploadImage').files[0];
            const preview = document.getElementById('previewImage');
            const reader = new FileReader();
            reader.onloadend = () => preview.src = reader.result;
            if (file) reader.readAsDataURL(file);
        }

        function saveMemberData() {
            const name = document.getElementById('storeName').value;
            const desc = document.getElementById('storeDesc').value;
            const contact = document.getElementById('contactInfo').value;
            alert(`ข้อมูลร้านตัวอย่าง\nชื่อร้าน: ${name}\nคำอธิบาย: ${desc}\nติดต่อ: ${contact}`);
        }
        // ====== ฟังก์ชันสลับโหมด ======
        document.querySelectorAll('input[name="contactDisplayType"]').forEach(input => {
            input.addEventListener('change', function() {
                const imageWrapper = document.getElementById('contactImageWrapper');
                const mapWrapper = document.getElementById('contactMapWrapper');

                if (this.value === 'image') {
                    imageWrapper.classList.remove('d-none');
                    mapWrapper.classList.add('d-none');
                } else {
                    mapWrapper.classList.remove('d-none');
                    imageWrapper.classList.add('d-none');
                }
            });
        });

        // ====== ฟังก์ชัน Preview รูป ======
        function previewContactImage() {
            const file = document.getElementById('contactImageUpload').files[0];
            const preview = document.getElementById('contactImagePreview');
            const reader = new FileReader();
            reader.onloadend = () => preview.src = reader.result;
            if (file) reader.readAsDataURL(file);
        }

        // ====== ฟังก์ชันลบรูป ======
        function deleteContactImage() {
            if (confirm('ต้องการลบรูปนี้หรือไม่?')) {
                document.getElementById('contactImagePreview').src = "{{ Module::asset('frontend:images/600x600.jpg') }}";
                document.getElementById('contactImageUpload').value = "";
            }
        }

        // ====== ฟังก์ชันอัปเดต Google Map ======
        function updateMapEmbed() {
            const embedCode = document.getElementById('mapEmbedCode').value.trim();
            const mapPreview = document.getElementById('mapPreview');

            if (embedCode.includes('<iframe')) {
                // ดึงเฉพาะ iframe
                const temp = document.createElement('div');
                temp.innerHTML = embedCode;
                const iframe = temp.querySelector('iframe');
                if (iframe) {
                    iframe.width = "100%";
                    iframe.height = "300";
                    iframe.style.border = "0";
                    mapPreview.innerHTML = "";
                    mapPreview.appendChild(iframe);
                    alert("✅ แสดงแผนที่แล้ว");
                }
            } else {
                alert("⚠️ กรุณาวางโค้ด Embed ของ Google Maps ที่ถูกต้อง (ต้องมี <iframe>)");
            }
        }
    </script>
@endsection