/* =======================================================
   البداية: كود الفورم (النسخة النهائية المصححة)
   ======================================================= */

// 1. تعريف الكود المختصر
add_shortcode('pro_cod_form', 'render_cod_form_final');

function render_cod_form_final() {
    global $product;
    
    // إصلاح مشكلة عدم ظهور المنتج في ShopBuilder
    if ( ! is_product() || ! is_a($product, 'WC_Product') ) {
        $product_id = get_the_ID();
        if($product_id) {
            $product = wc_get_product($product_id);
        }
    }
    
    if( ! $product ) return '';

    ob_start();
    
    $product_id = $product->get_id();
    $single_price = floatval( $product->get_price() );
    if( $single_price <= 0 ) $single_price = floatval( $product->get_regular_price() );

    $pack1_price = number_format( $single_price, 0, '.', '' ); 
    $pack2_price = number_format( max(0, $single_price * 2 - 50), 0, '.', '' ); 

    $nonce_field = wp_create_nonce('quick_cod_order_nonce');

    // --- جلب الخيارات من السمات (Attributes) ---
    $default_options = array("العربية - الفرنسية", "العربية - الإنجليزية", "العربية - الإسبانية");
    
    // البحث عن سمة باسم 'Options' أو 'options'
    $custom_options_str = $product->get_attribute('Options'); 
    if( empty($custom_options_str) ){ $custom_options_str = $product->get_attribute('options'); }

    if( ! empty($custom_options_str) ){
        // تحويل النص إلى مصفوفة (الفاصل هو |)
        $final_options = array_map('trim', explode('|', $custom_options_str)); 
    } else {
        $final_options = $default_options;
    }

    $options_html = '';
    foreach($final_options as $opt){
        $options_html .= '<option value="'.esc_attr($opt).'">'.esc_html($opt).'</option>';
    }
    // ----------------------------------------
    ?>

    <div class="quick-order-box" dir="rtl" aria-live="polite">
        <form method="post" autocomplete="on" id="orderForm">  
            <div class="qo-packs" id="qo-packs">
                <div class="quick-order-subtitle">اختر العرض المناسب لطفلك</div>
                
                <label class="qo-pack qo-pack-active" data-pack="1">
                    <input type="radio" name="q_offer" value="1" checked>
                    <div class="qo-pack-row">
                        <div class="qo-pack-info">
                            <div class="qo-pack-price-box">
                                <span class="qo-pack-old" style="display:none;"></span>
                                <span class="qo-pack-price" data-price=""> Dh</span>
                            </div>
                        </div>
                        <div class="qo-pack-thumb" aria-hidden="true">
                            <img src="https://amanakids.ma/wp-content/uploads/2025/12/PACK-01-min-1.png" role="img" aria-label="Pack1">
                        </div>
                        <div>
                            <div class="qo-pack-sub">علبة واحدة</div>
                            <div class="qo-pack-badge" style="display:inline-block;margin-top:8px;">الأكثر طلباً</div>
                        </div>
                    </div>
                    <div class="qo-pack-langs">
                        <div class="qo-lang-row">
                            <label class="qo-lang-label">اختر:</label>
                            <select name="q_langs[]" class="qo-select" required>
                                                            </select>
                        </div>
                    </div>
                </label>

                <label class="qo-pack" data-pack="2">
                    <input type="radio" name="q_offer" value="2">
                    <div class="qo-pack-row">
                        <div class="qo-pack-info">
                            <div class="qo-pack-price-box">
                                <span class="qo-pack-old">0 Dh</span>
                                <span class="qo-pack-price" data-price=""> Dh</span>
                            </div>
                        </div>
                        <div class="qo-pack-thumb" aria-hidden="true">
                            <img src="https://amanakids.ma/wp-content/uploads/2025/12/PACK-02-min.png" role="img" aria-label="pack2">
                        </div>
                        <div>
                            <div class="qo-pack-sub">علبتين</div>
                            <div class="qo-pack-badge" style="display:inline-block;margin-top:8px;">تخفيض</div>
                        </div>
                    </div>
                    <div class="qo-pack-langs">
                        <div class="qo-lang-row">
                            <label class="qo-lang-label">الخيار 1:</label>
                            <select name="q_langs[]" class="qo-select" required>
                                                            </select>
                        </div>
                        <div class="qo-lang-row">
                            <label class="qo-lang-label">الخيار 2:</label>
                            <select name="q_langs[]" class="qo-select" required>
                                                            </select>
                        </div>
                    </div>
                </label>
            </div>
                                    
            <input type="hidden" id="quick_cod_order_nonce_field" name="quick_cod_order_nonce_field" value="4b8b829e57" /><input type="hidden" name="_wp_http_referer" value="/" />            <input type="hidden" name="quick_product_id" value="">
            <input type="hidden" name="quick_cod_nonce" value="">

            <div style="position:relative;margin-bottom:0px;">
                <svg width="20" height="20" viewBox="0 0 24 24" style="position:absolute;right:12px;top:40%;transform:translateY(-50%);opacity:0.75;pointer-events:none;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5z" fill="#8E8E8E"/><path d="M4 20c0-2.7 3.6-4 8-4s8 1.3 8 4v1H4v-1z" fill="#8E8E8E"/></svg>
                <input type="text" name="q_name" placeholder="الإسم الكامل" required style="width:100%;height:46px;border-radius:2px;border:1px solid #ddd;padding-right:46px;padding-left:12px;font-size:16px;text-align:right;direction:rtl;box-sizing:border-box;">
            </div>

            <div style="position:relative;margin-bottom:0px;">
                <svg width="20" height="20" viewBox="0 0 24 24" style="position:absolute;right:12px;top:40%;transform:translateY(-50%);opacity:0.75;pointer-events:none;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.1-.24c1.12.5 2.5.8 3.9.8a1 1 0 011 1V20a1 1 0 01-1 1C10.7 21 3 13.3 3 3a1 1 0 011-1h2.5a1 1 0 011 1c0 1.4.3 2.7.8 3.9a1 1 0 01-.2 1.1l-2.5 2.8z" fill="#8E8E8E"/></svg>
                <input type="text" name="q_phone" placeholder="رقم الهاتف" required inputmode="numeric" pattern="[0-9]{10}" maxlength="10" oninput="this.value=this.value.replace(/[^0-9]/g,'');" style="width:100%;height:46px;border-radius:2px;border:1px solid #ddd;padding-right:46px;padding-left:12px;font-size:16px;text-align:right;direction:rtl;box-sizing:border-box;">
            </div>

            <div style="position:relative;margin-bottom:0px;">
                <svg width="20" height="20" viewBox="0 0 24 24" style="position:absolute;right:12px;top:40%;transform:translateY(-50%);opacity:0.75;pointer-events:none;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 3l9 7v11a1 1 0 01-1 1h-5v-7H9v7H4a1 1 0 01-1-1V10l9-7z" fill="#8E8E8E"/></svg>
                <input type="text" name="q_city" placeholder="العنوان / المدينة" required style="width:100%;height:46px;border-radius:2px;border:1px solid #ddd;padding-right:46px;padding-left:12px;font-size:16px;text-align:right;direction:rtl;box-sizing:border-box;">
            </div>

            <button type="submit" name="quick_order" class="quick-order-btn" style="display:flex;align-items:center;justify-content:center;gap:8px;direction:rtl;">
                <span>أطلب الآن</span>
                <svg fill="#fff" width="26px" height="26px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20,9H17V7A5,5,0,0,0,7,7V9H4L3,22H21ZM15,9H9V7a3,3,0,0,1,6,0Z"/></svg>
                <span>ACHETER</span>
            </button>
        </form>

        <div id="floatingWrapper">
            <button id="floatingOrderBtn">أطلب الآن</button>
        </div>
    </div>

    <script>
        (function(){
            const packs = document.querySelectorAll('.qo-pack');
            const packRadios = document.querySelectorAll('.qo-pack input[type="radio"]');

            function activatePack(index){
                packs.forEach((p, i) => {
                    const langs = p.querySelector('.qo-pack-langs');
                    if(i === index){
                        p.classList.add('qo-pack-active');
                        if(langs) langs.style.display = 'flex';
                        p.querySelectorAll('select').forEach(s => { s.disabled = false; s.required = true; });
                    } else {
                        p.classList.remove('qo-pack-active');
                        if(langs) langs.style.display = 'none';
                        p.querySelectorAll('select').forEach(s => { s.disabled = true; s.required = false; s.selectedIndex = 0; });
                    }
                });
            }

            packRadios.forEach((r, idx) => {
                r.addEventListener('change', function(){
                    if(this.checked) activatePack(idx);
                });
            });

            let initialIndex = 0;
            packRadios.forEach((r, i) => { if(r.checked) initialIndex = i; });
            activatePack(initialIndex);
        })();
    </script>

    <script>
    const wrapper = document.getElementById("floatingWrapper");
    const form = document.getElementById("orderForm");

    function toggleButton() {
        if(!form) return;
        const rect = form.getBoundingClientRect();
        const formVisible = rect.top < window.innerHeight && rect.bottom > 0;
        if (formVisible) {
            wrapper.style.display = "none";
        } else {
            wrapper.style.display = "block";
        }
    }

    window.addEventListener("scroll", toggleButton);
    window.addEventListener("load", toggleButton);

    const floatBtn = document.getElementById("floatingOrderBtn");
    if(floatBtn){
        floatBtn.addEventListener("click", function () {
            const offset = 20;
            const formPos = form.getBoundingClientRect().top + window.pageYOffset - offset;
            window.scrollTo({ top: formPos, behavior: "smooth" });
        });
    }
    </script>

    <script>
    setInterval(() => {
        const btn = document.querySelector('.quick-order-btn');
        if(!btn) return;
        btn.classList.remove('qo-animate');
        void btn.offsetWidth;
        btn.classList.add('qo-animate');
    }, 8000);
    </script>