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

@section('content')
    <section class="page-title-dark" id="page-title" style="background-image: url('{{ Module::asset('frontend:images/bg-product.jpg') }}');">
        <div class="container text-center py-5">
            <h2 class="m-b-0">จัดการข้อมูลร้านค้า (Member)</h2>
        </div>
    </section>
    <section class="main-product py-5">
        <div class="container">
            <h2 class="mb-4">รายละเอียดหน้าปก</h2>

            <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-5">
        <div class="container">
            <h2>รายละเอียดร้านสินค้า</h2>
            {{-- ===== ฟอร์มข้อมูลร้านค้า ===== --}}
            <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">ชื่อปุ่ม (เช่น Facebook, Line, Youtube)</label>
                            <input class="form-control" id="contactLabel" name="contactLabel" type="text" value="{{ old('contactLabel', $data->contactLabel ?? '') }}" placeholder="เช่น Facebook, Line, Youtube">
                        </div>

                        <div class="form-group mb-3">
                            <label class="fw-bold">URL ลิงก์ (Facebook / Line / โทรศัพท์)</label>
                            <input class="form-control" id="contactUrl" name="contactUrl" type="text" value="{{ old('contactUrl', $data->contactUrl ?? '') }}" placeholder="เช่น https://facebook.com/yourpage หรือ tel:0800000000">
                        </div>

                        <div class="form-group mb-3">
                            <label class="fw-bold">ไอคอน (FontAwesome class)</label>
                            <input class="form-control" id="contactIcon" name="contactIcon" type="text" value="{{ old('contactIcon', $data->contactIcon ?? 'fab fa-facebook-f') }}" placeholder="เช่น fab fa-facebook-f, fab fa-line, fab fa-youtube">
                        </div>
                        <div class="text-end">
                            <button class="btn btn-primary px-4" onclick="saveMemberData()">
                                💾 บันทึกข้อมูล
                            </button>
                        </div>
                    </div>
                </div>
            </form>

            <hr class="my-5">

            {{-- ===== Product Manager / เพิ่ม ลบ แก้ไข สินค้า ===== --}}
            <section class="sec-product-brand py-5">
                <div class="container">
                    <h3 class="mb-4">สินค้าของร้าน</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>

            <hr class="my-5">

            {{-- ===== ใบอนุญาต / เอกสารรับรอง ===== --}}
            <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 ===== --}}
            <hr class="my-5">
            <section class="otop">
                <div class="container">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5>มาตรฐาน OTOP</h5>
                        <button class="btn btn-outline-success btn-sm" onclick="addOtopImage()">➕ เพิ่มรูป OTOP</button>
                    </div>
                    <div class="row" id="otopList"></div>
                </div>
            </section>

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

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


    <section class="contact-product">
        <div class="container">
            <div class="row">
                <h2>ช่องทางการติดต่อ</h2>
                <div class="col-md-7">
                    <div class="contact-product-title">
                        <textarea id="summernote" name="content">{{ old('content', $data->content ?? '') }}</textarea>
                    </div>
                </div>
                <div class="col-md-5 contact-detail-right text-center position-relative">
                    <!-- ปุ่มสลับโหมด -->
                    <div class="mb-3">
                        <div class="btn-group" role="group" aria-label="เลือกประเภทการแสดงผล">
                            <input class="btn-check" id="typeImage" name="contactDisplayType" type="radio" value="image" checked>
                            <label class="btn btn-outline-secondary btn-sm" for="typeImage">🖼 แสดงรูป</label>

                            <input class="btn-check" id="typeMap" name="contactDisplayType" type="radio" value="map">
                            <label class="btn btn-outline-secondary btn-sm" for="typeMap">🗺 แสดงแผนที่</label>
                        </div>
                    </div>

                    <!-- โหมดรูปภาพ -->
                    <div id="contactImageWrapper">
                        <img class="img-fluid rounded shadow-sm mb-3" id="contactImagePreview" src="{{ Module::asset('frontend:images/600x600.jpg') }}" alt="Line QR Code" style="max-width: 100%; height: auto;" />

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

                    <!-- โหมด Google Map -->
                    <div class="d-none" id="contactMapWrapper">
                        <textarea class="form-control mb-2" id="mapEmbedCode" rows="3" placeholder="วางโค้ด Embed ของ Google Map ที่นี่..."></textarea>
                        <button class="btn btn-outline-primary btn-sm mb-2" onclick="updateMapEmbed()">💾
                            แสดงแผนที่</button>

                        <div class="ratio ratio-1x1" id="mapPreview">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3871.4900363955253!2d100.61517997509462!3d13.988932686428067!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e281d8ea4a968b%3A0x2154f5fc55afbd1d!2z4Lif4Li04Lin4LmA4LiI4Lit4Lij4LmM4Lie4Liy4Lij4LmM4LiEIOC5geC4peC4sCDguKrguYDguJvguKXguKXguYw!5e0!3m2!1sth!2sth!4v1760353414517!5m2!1sth!2sth" style="border:0;" width="100%" height="300" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <div class="text-center mt-5">
        <button class="btn btn-success px-5" onclick="alert('✅ ข้อมูลตัวอย่างถูกบันทึกแล้ว (จำลอง)')">
            ✅ บันทึกทั้งหมด
        </button>
    </div>
    {{-- ===== Script ===== --}}
    <script>
        // ===== ฟังก์ชันแสดงภาพ 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;
            }

            alert(`✅ บันทึกข้อมูลเรียบร้อย (จำลอง)\nชื่อร้าน: ${name}\nคำอธิบาย: ${desc}`);
        }
        // ===== 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-0 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