document.addEventListener('DOMContentLoaded', function () {
    const target = document.querySelector("#new-place > article");

    if (target) {
        const html = `
            <details class="accordion-group">
                <summary class="accordion-title">📏 جدول المقاسات</summary>
                <div class="accordion-content">
                    <div style="overflow-x:auto">
                        <table style="width:100%; border-collapse: collapse; text-align: center; font-size: 14px;">
                            <thead>
                                <tr style="background-color: #000; color: #fff;">
                                    <th style="padding: 10px;">المقاس</th>
                                    <th style="padding: 10px;">طول العباية (إنش)</th>
                                    <th style="padding: 10px;">العرض (إنش)</th>
                                    <th style="padding: 10px;">الكم (إنش)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>50</td><td>50</td><td>21</td><td>25</td></tr>
                                <tr><td>52</td><td>52</td><td>22</td><td>26</td></tr>
                                <tr><td>54</td><td>54</td><td>23</td><td>27</td></tr>
                                <tr><td>56</td><td>56</td><td>24</td><td>28</td></tr>
                                <tr><td>58</td><td>58</td><td>25</td><td>29</td></tr>
                                <tr><td>60</td><td>60</td><td>26</td><td>30</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </details>

            <details class="accordion-group">
                <summary class="accordion-title">التوصيل والإرجاع</summary>
                <div class="accordion-content">
                    <p>الرياض، أبها، خميس مشيط: 1 - 2 أيام عمل</p>
                    <p>باقي مدن المملكة: 2-4 أيام عمل</p>
                    <p>الرجاء ملاحظة أنه في ظل ظروف استثنائية، قد يتأثر وقت التوصيل. سيخبركم فريق خدمة العملاء لدينا بأي تأخير قد يحدث.</p>
                </div>
            </details>

            <details class="accordion-group">
                <summary class="accordion-title">خيارات الدفع</summary>
                <div class="accordion-content payment-content"></div>
            </details>
        `;

        target.insertAdjacentHTML('beforeend', html);

        const moveSallaPayments = setInterval(() => {
            const paymentSection = document.querySelector("salla-payments");
            const paymentContentContainer = document.querySelector('.payment-content');

            if (paymentSection && paymentContentContainer) {
                paymentContentContainer.appendChild(paymentSection);
                paymentSection.classList.remove('hidden');
                paymentSection.style.display = 'block';
                clearInterval(moveSallaPayments);
            }
        }, 300);
    }
});

document.addEventListener('click', function (e) {
    if (e.target.tagName === 'SUMMARY' && e.target.closest('.accordion-group')) {
        const current = e.target.closest('.accordion-group');
        document.querySelectorAll('.accordion-group').forEach(item => {
            if (item !== current && item.hasAttribute('open')) {
                item.removeAttribute('open');
            }
        });
    }
});