<?php
/**
 * MenuX Free — Announcement Bar Panel
 * @package MenuX
 */

if ( ! defined( 'ABSPATH' ) ) exit;

function menux_render_announcement_panel( $style ) {
    $s  = wp_parse_args( (array) $style, menux_style_defaults() );
    $td = 'padding:8px 10px;font-size:13px;color:#374151;width:180px;vertical-align:middle;';
    $tv = 'padding:8px 10px;font-size:13px;';

    $ann = array(
        'enabled'             => $s['announcement_enabled']             ?? '0',
        'text'                => $s['announcement_text']                ?? '',
        'link'                => $s['announcement_link']                ?? '',
        'link_target'         => $s['announcement_link_target']         ?? '_self',
        'bg'                  => $s['announcement_bg']                  ?? '#667eea',
        'text_color'          => $s['announcement_text_color']          ?? '#ffffff',
        'position'            => $s['announcement_position']            ?? 'above',
        'dismissible'         => $s['announcement_dismissible']         ?? '1',
        'dismiss_days'        => $s['announcement_dismiss_days']        ?? '7',
        'font_size'           => $s['announcement_font_size']           ?? '14',
        'padding_y'           => $s['announcement_padding_y']           ?? '10',
        'countdown_enabled'   => $s['announcement_countdown_enabled']   ?? '0',
        'countdown_date'      => $s['announcement_countdown_date']      ?? '',
        'countdown_label'     => $s['announcement_countdown_label']     ?? esc_html__( 'Ends in:', 'giuliomax-menu-builder' ),
        'countdown_expired'   => $s['announcement_countdown_expired']   ?? '',
    );
    ?>
    <div class="bm-card">
        <div class="bm-card-header">
            <span class="bm-card-icon">📢</span>
            <div class="bm-card-titles">
                <h2 class="bm-card-title"><?php esc_html_e( 'Announcement Bar', 'giuliomax-menu-builder' ); ?></h2>
                <p class="bm-card-subtitle"><?php esc_html_e( 'Show a configurable promo banner above or below your menu — optionally dismissible by the user', 'giuliomax-menu-builder' ); ?></p>
            </div>
        </div>
        <div class="bm-card-body">

            <?php
            /* Live preview swatch */
            $preview_display = $ann['enabled'] === '1' && $ann['text'] !== '' ? 'flex' : 'none';
            ?>
            <div id="menux-ann-preview" style="display:<?php echo esc_attr($preview_display); ?>;align-items:center;justify-content:center;position:relative;
                background:<?php echo esc_attr($ann['bg']); ?>;color:<?php echo esc_attr($ann['text_color']); ?>;
                font-size:<?php echo intval($ann['font_size']); ?>px;padding:<?php echo intval($ann['padding_y']); ?>px 40px;
                border-radius:6px;margin-bottom:16px;text-align:center;">
                <span id="menux-ann-preview-text"><?php echo $ann['text'] !== '' ? esc_html( $ann['text'] ) : '🎉 ' . esc_html__( 'Your announcement here', 'giuliomax-menu-builder' ); ?></span>
                <?php if ($ann['dismissible'] === '1'): ?>
                <span style="position:absolute;right:12px;opacity:.75;font-size:18px;cursor:default;">×</span>
                <?php endif; ?>
            </div>

            <table style="border-collapse:collapse;width:100%;"><tbody>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Enable bar', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                        <input type="checkbox" name="menux_style[announcement_enabled]" value="1"
                            <?php checked( $ann['enabled'], '1' ); ?>
                            onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
                        <span style="font-size:13px;color:#374151;"><?php esc_html_e( 'Show announcement bar', 'giuliomax-menu-builder' ); ?></span>
                    </label>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Message', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="text" name="menux_style[announcement_text]"
                        id="menux-ann-text-input"
                        value="<?php echo esc_attr( $ann['text'] ); ?>"
                        placeholder="🎉 <?php echo esc_attr__( 'Free shipping on orders over €50!', 'giuliomax-menu-builder' ); ?>"
                        style="width:100%;max-width:420px;"
                        oninput="menuxAnnPreview();menux_liveStylePreview()">
                    <p style="font-size:11px;color:#9ca3af;margin:4px 0 0;"><?php esc_html_e( 'Plain text. Emojis supported.', 'giuliomax-menu-builder' ); ?></p>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Link URL', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="url" name="menux_style[announcement_link]"
                        value="<?php echo esc_attr( $ann['link'] ); ?>"
                        placeholder="https://..."
                        style="width:100%;max-width:420px;"
                        oninput="if(typeof menux_updatePreview==='function')menux_updatePreview()">
                    <label style="display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:#6b7280;cursor:pointer;">
                        <input type="checkbox" name="menux_style[announcement_link_target]" value="_blank"
                            <?php checked( $ann['link_target'], '_blank' ); ?>>
                        <?php esc_html_e( 'Open in new tab', 'giuliomax-menu-builder' ); ?>
                    </label>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Background', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="color" name="menux_style[announcement_bg]"
                        id="menux-ann-bg-input"
                        value="<?php echo esc_attr( $ann['bg'] ); ?>"
                        style="width:42px;height:30px;padding:2px;border:1px solid #c3c4c7;border-radius:3px;cursor:pointer;"
                        oninput="menuxAnnPreview();menux_liveStylePreview()">
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Text color', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="color" name="menux_style[announcement_text_color]"
                        id="menux-ann-tc-input"
                        value="<?php echo esc_attr( $ann['text_color'] ); ?>"
                        style="width:42px;height:30px;padding:2px;border:1px solid #c3c4c7;border-radius:3px;cursor:pointer;"
                        oninput="menuxAnnPreview();menux_liveStylePreview()">
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Position', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <select name="menux_style[announcement_position]" onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
                        <option value="above" <?php selected( $ann['position'], 'above' ); ?>><?php esc_html_e( 'Above menu', 'giuliomax-menu-builder' ); ?></option>
                        <option value="below" <?php selected( $ann['position'], 'below' ); ?>><?php esc_html_e( 'Below menu', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Font size (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="number" name="menux_style[announcement_font_size]"
                        id="menux-ann-fs-input"
                        value="<?php echo esc_attr( $ann['font_size'] ); ?>" min="10" max="24" style="width:70px;"
                        oninput="menuxAnnPreview();menux_liveStylePreview()">
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Vertical padding (px)', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="number" name="menux_style[announcement_padding_y]"
                        id="menux-ann-py-input"
                        value="<?php echo esc_attr( $ann['padding_y'] ); ?>" min="4" max="32" style="width:70px;"
                        oninput="menuxAnnPreview();menux_liveStylePreview()">
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Dismissible', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                        <input type="checkbox" name="menux_style[announcement_dismissible]" value="1"
                            <?php checked( $ann['dismissible'], '1' ); ?>
                            onchange="document.getElementById('menux-ann-days-row').style.display=this.checked?'':'none';menux_liveStylePreview()">
                        <span style="font-size:13px;color:#374151;"><?php esc_html_e( 'Show close (×) button', 'giuliomax-menu-builder' ); ?></span>
                    </label>
                </td>
            </tr>
            <tr id="menux-ann-days-row" style="<?php echo $ann['dismissible'] === '1' ? '' : 'display:none;'; ?>">
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Remember dismissal', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="number" name="menux_style[announcement_dismiss_days]"
                        value="<?php echo esc_attr( $ann['dismiss_days'] ); ?>" min="1" max="365" style="width:70px;">
                    <span style="font-size:12px;color:#9ca3af;margin-left:6px;"><?php esc_html_e( 'days — bar stays hidden after user closes it', 'giuliomax-menu-builder' ); ?></span>
                </td>
            </tr>

            <tr><td colspan="2" style="padding:12px 10px 4px;font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;border-top:1px solid #f3f4f6;">⏱ <?php esc_html_e( 'Countdown Timer', 'giuliomax-menu-builder' ); ?></td></tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Enable countdown', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                        <input type="checkbox" name="menux_style[announcement_countdown_enabled]" value="1"
                            <?php checked( $ann['countdown_enabled'], '1' ); ?>
                            onchange="document.getElementById('menux-ann-cd-rows').style.display=this.checked?'':'none';if(typeof menux_updatePreview==='function')menux_updatePreview();else menux_liveStylePreview();">
                        <span style="font-size:13px;color:#374151;"><?php esc_html_e( 'Show countdown timer in bar', 'giuliomax-menu-builder' ); ?></span>
                    </label>
                </td>
            </tr>
            </tbody></table>
            <table id="menux-ann-cd-rows" style="border-collapse:collapse;width:100%;<?php echo $ann['countdown_enabled'] === '1' ? '' : 'display:none;'; ?>"><tbody>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Target date & time', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="datetime-local" name="menux_style[announcement_countdown_date]"
                        value="<?php echo esc_attr( $ann['countdown_date'] ); ?>"
                        style="font-size:13px;">
                    <p style="font-size:11px;color:#9ca3af;margin:4px 0 0;"><?php esc_html_e( 'The countdown ends when this moment is reached.', 'giuliomax-menu-builder' ); ?></p>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Label', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="text" name="menux_style[announcement_countdown_label]"
                        value="<?php echo esc_attr( $ann['countdown_label'] ); ?>"
                        placeholder="<?php echo esc_attr__( 'Ends in:', 'giuliomax-menu-builder' ); ?>"
                        style="width:180px;"
                        oninput="if(typeof menux_updatePreview==='function')menux_updatePreview()">
                    <span style="font-size:12px;color:#9ca3af;margin-left:6px;"><?php esc_html_e( 'text shown before the timer', 'giuliomax-menu-builder' ); ?></span>
                </td>
            </tr>
            <tr>
                <td style="<?php echo esc_attr($td); ?>"><?php esc_html_e( 'Expired text', 'giuliomax-menu-builder' ); ?></td>
                <td style="<?php echo esc_attr($tv); ?>">
                    <input type="text" name="menux_style[announcement_countdown_expired]"
                        value="<?php echo esc_attr( $ann['countdown_expired'] ); ?>"
                        placeholder="<?php echo esc_attr__( 'Offer ended', 'giuliomax-menu-builder' ); ?>"
                        style="width:220px;">
                    <span style="font-size:12px;color:#9ca3af;margin-left:6px;"><?php esc_html_e( 'shown when timer hits 0 (leave empty to hide)', 'giuliomax-menu-builder' ); ?></span>
                </td>
            </tr>
            </tbody></table>
        </div>
    </div>

    <script>
    function menuxAnnPreview() {
        var preview = document.getElementById('menux-ann-preview');
        if (!preview) return;
        var enabled  = document.querySelector('input[name="menux_style[announcement_enabled]"]');
        var textInp  = document.getElementById('menux-ann-text-input');
        var bgInp    = document.getElementById('menux-ann-bg-input');
        var tcInp    = document.getElementById('menux-ann-tc-input');
        var fsInp    = document.getElementById('menux-ann-fs-input');
        var pyInp    = document.getElementById('menux-ann-py-input');
        var text     = textInp ? textInp.value.trim() : '';
        var show     = enabled && enabled.checked && text !== '';
        preview.style.display      = show ? 'flex' : 'none';
        if (bgInp) preview.style.background = bgInp.value;
        if (tcInp) preview.style.color      = tcInp.value;
        if (fsInp) preview.style.fontSize   = fsInp.value + 'px';
        if (pyInp) preview.style.padding    = pyInp.value + 'px 40px';
        var span = document.getElementById('menux-ann-preview-text');
        if (span) span.textContent = text || '🎉 Your announcement here';
    }
    </script>
    <?php
}
