<?php
/**
 * footer_extensions_ui.php - UI components for extra footer features
 */
?>

<style>
    .ext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .upload-preview { width: 40px; height: 40px; object-fit: contain; border: 1px solid #eee; border-radius: 4px; }
    .ext-row { display: grid; grid-template-columns: 50px 1fr 1fr auto; gap: 10px; align-items: center; background: #fff; padding: 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #edf2f7; }
</style>

<div class="ext-grid">
    <!-- Certification / Awards -->
    <div class="section-card">
        <h3 class="section-title"><i class="fas fa-award"></i> সার্টিফিকেশন ও অ্যাওয়ার্ডস</h3>
        <div id="cert-container">
            <?php 
            $saved_certs = json_decode($footer['certifications'] ?? '[]', true);
            if(!empty($saved_certs)): foreach($saved_certs as $idx => $cert): ?>
            <div class="ext-row">
                <img src="<?php echo $cert['icon']; ?>" class="upload-preview">
                <input type="text" name="cert_names[]" value="<?php echo $cert['name']; ?>" placeholder="নাম">
                <input type="file" name="cert_files[]" accept="image/*">
                <input type="hidden" name="existing_cert_icons[]" value="<?php echo $cert['icon']; ?>">
                <button type="button" class="btn-remove" onclick="this.parentElement.remove()">&times;</button>
            </div>
            <?php endforeach; endif; ?>
        </div>
        <button type="button" class="btn-add" onclick="addExtRow('cert-container', 'cert_names[]', 'cert_files[]')">+ নতুন আইকন</button>
    </div>

    <!-- Payment Methods -->
    <div class="section-card">
        <h3 class="section-title"><i class="fas fa-credit-card"></i> পেমেন্ট মেথড আইকন</h3>
        <div id="pay-container">
            <?php 
            $saved_payments = json_decode($footer['payment_icons'] ?? '[]', true);
            if(!empty($saved_payments)): foreach($saved_payments as $idx => $pay): ?>
            <div class="ext-row">
                <img src="<?php echo $pay['icon']; ?>" class="upload-preview">
                <input type="text" name="pay_names[]" value="<?php echo $pay['name']; ?>" placeholder="নাম">
                <input type="file" name="pay_files[]" accept="image/*">
                <input type="hidden" name="existing_pay_icons[]" value="<?php echo $pay['icon']; ?>">
                <button type="button" class="btn-remove" onclick="this.parentElement.remove()">&times;</button>
            </div>
            <?php endforeach; endif; ?>
        </div>
        <button type="button" class="btn-add" onclick="addExtRow('pay-container', 'pay_names[]', 'pay_files[]')">+ নতুন আইকন</button>
    </div>
</div>

<div class="section-card">
    <h3 class="section-title"><i class="fas fa-envelope-open-text"></i> নিউজলেটার ও সাবস্ক্রিপশন</h3>
    <div class="form-grid">
        <div class="form-group">
            <label>নিউজলেটার স্ট্যাটাস</label>
            <select name="newsletter_status">
                <option value="1" <?php echo ($footer['newsletter_show'] ?? 0) == 1 ? 'selected' : ''; ?>>সক্রিয় (Show)</option>
                <option value="0" <?php echo ($footer['newsletter_show'] ?? 0) == 0 ? 'selected' : ''; ?>>নিষ্ক্রিয় (Hide)</option>
            </select>
        </div>
        <div class="form-group">
            <label>নিউজলেটার টাইটেল</label>
            <input type="text" name="newsletter_title" value="<?php echo $footer['newsletter_title'] ?? 'আমাদের নিউজলেটার সাবস্ক্রাইব করুন'; ?>">
        </div>
    </div>
</div>

<script>
    function addExtRow(containerId, nameInput, fileInput) {
        const container = document.getElementById(containerId);
        const div = document.createElement('div');
        div.className = 'ext-row';
        div.innerHTML = `
            <div style="width:40px; height:40px; background:#f0f0f0; border-radius:4px;"></div>
            <input type="text" name="${nameInput}" placeholder="নাম">
            <input type="file" name="${fileInput}" accept="image/*">
            <button type="button" class="btn-remove" onclick="this.parentElement.remove()">&times;</button>
        `;
        container.appendChild(div);
    }
</script>