<?php
// admin/einstellungen.php
// Direkten Zugriff verhindern
if (!defined('ABSPATH')) {
    exit;
}

// Testphase-Hinweis anzeigen
simpbook_display_trial_notice_on_admin_pages();

// Formular-Verarbeitung erfolgt jetzt im admin_init Hook (simpbook_einstellungen_formular_verarbeiten)
// in simple-appointment-booking.php, damit Redirects funktionieren, bevor Header gesendet werden

/**
 * Gibt die übersetzten Wochentage zurück.
 */
function simpbook_get_wochentage() {
    return [
        'montag' => esc_html__('Monday', 'simple-appointment-booking'),
        'dienstag' => esc_html__('Tuesday', 'simple-appointment-booking'),
        'mittwoch' => esc_html__('Wednesday', 'simple-appointment-booking'),
        'donnerstag' => esc_html__('Thursday', 'simple-appointment-booking'),
        'freitag' => esc_html__('Friday', 'simple-appointment-booking'),
        'samstag' => esc_html__('Saturday', 'simple-appointment-booking'),
        'sonntag' => esc_html__('Sunday', 'simple-appointment-booking')
    ];
}

// Wochentage für die Anzeige (übersetzt)
$simpbook_wochentage = simpbook_get_wochentage();

// Formular-Verarbeitung erfolgt jetzt im admin_init Hook (simpbook_einstellungen_formular_verarbeiten)
// in simple-appointment-booking.php, damit Redirects funktionieren, bevor Header gesendet werden

// Aktuelle Einstellungen laden
$simpbook_benachrichtigungen = get_option('simpbook_email_benachrichtigungen', '1');
$simpbook_benachrichtigungs_email = get_option('simpbook_benachrichtigungs_email', get_option('admin_email'));
$simpbook_intervall = get_option('simpbook_intervall', 30);
$simpbook_stornierung_aktiviert = get_option('simpbook_stornierung_aktiviert', '1');
$simpbook_stornierung_mindeststunden = get_option('simpbook_stornierung_mindeststunden', 24);
$simpbook_stornierung_telefonnummer = get_option('simpbook_stornierung_telefonnummer', '');

$simpbook_spezielle_tage_konfiguration = get_option('simpbook_spezielle_tage_konfiguration', []);
$simpbook_urlaub_konfiguration = get_option('simpbook_urlaub_konfiguration', []);

$simpbook_button_color = get_option('simpbook_button_color', '#2271b1');
$simpbook_button_text_color = get_option('simpbook_button_text_color', '#ffffff');
$simpbook_button_border_radius = get_option('simpbook_button_border_radius', '8');
$simpbook_container_background = get_option('simpbook_container_background', '#8bbce4');
$simpbook_text_color = get_option('simpbook_text_color', '#000000');
$simpbook_tile_background = get_option('simpbook_tile_background', '#ffffff');
$simpbook_tile_text_color = get_option('simpbook_tile_text_color', '#333333');
$simpbook_border_radius = get_option('simpbook_border_radius', '8');
$simpbook_tile_border_radius = get_option('simpbook_tile_border_radius', '12');
// Formular-Überschriften laden (mit sprachspezifischen Standardwerten)
$simpbook_current_language = simpbook_get_current_language();
$simpbook_form_header_date = simpbook_get_form_header('date', $simpbook_current_language);
$simpbook_form_header_service = simpbook_get_form_header('service', $simpbook_current_language);
$simpbook_form_header_employee = simpbook_get_form_header('employee', $simpbook_current_language);
$simpbook_form_header_time = simpbook_get_form_header('time', $simpbook_current_language);
$simpbook_form_header_contact = simpbook_get_form_header('contact', $simpbook_current_language);
$simpbook_form_header_ungrouped_services = simpbook_get_form_header('ungrouped_services', $simpbook_current_language);
$simpbook_form_header_booking_option = simpbook_get_form_header('booking_option', $simpbook_current_language);
$simpbook_form_header_confirmation = simpbook_get_form_header('confirmation', $simpbook_current_language);
// Wochentag-Zeiten laden oder Standardwerte setzen
$simpbook_wochentag_zeiten = get_option('simpbook_wochentag_zeiten', []);
$simpbook_standard_beginn = '11:00';
$simpbook_standard_ende = '22:00';
foreach ($simpbook_wochentage as $simpbook_tag_key => $simpbook_tag_name) {
    if (!isset($simpbook_wochentag_zeiten[$simpbook_tag_key])) {
        $simpbook_wochentag_zeiten[$simpbook_tag_key] = [
            'aktiv' => '1',
            'beginn' => $simpbook_standard_beginn,
            'ende' => $simpbook_standard_ende
        ];
    }
}

// Aktive Tab aus URL oder Standard
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameter for tab selection only, validated against whitelist
$simpbook_active_tab = isset($_GET['simpbook_tab']) ? sanitize_text_field(wp_unslash($_GET['simpbook_tab'])) : 'general';
$simpbook_valid_tabs = array('general', 'opening-hours', 'cancellations', 'emails', 'design', 'formular', 'language', 'app');
if (!in_array($simpbook_active_tab, $simpbook_valid_tabs, true)) {
    $simpbook_active_tab = 'general';
}

// Sicherstellen, dass der erste Tab standardmäßig gecheckt ist
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameter check only, no data processing
if (!isset($_GET['simpbook_tab'])) {
    $simpbook_active_tab = 'general';
}

// Textdomain sicherstellen, dass sie korrekt geladen ist (besonders nach Sprachwechsel)
// Dies ist wichtig, damit nach einem Redirect die neue Sprache korrekt angezeigt wird
simpbook_DB_Reservierungen::reload_plugin_textdomain();

// Aktuelle Sprache laden - NACH dem Speichern, damit die neue Sprache verwendet wird
$simpbook_current_language = simpbook_get_current_language();
// Verwende leere Strings als Fallback, da simpbook_get_email_template() automatisch sprachspezifische Standardwerte verwendet
$simpbook_email_bestaetigungs_betreff = simpbook_get_email_template('simpbook_email_bestaetigungs_betreff', '', $simpbook_current_language);
$simpbook_email_bestaetigungs_nachricht = simpbook_get_email_template('simpbook_email_bestaetigungs_nachricht', '', $simpbook_current_language);

// Erfolgsmeldung anzeigen, wenn Einstellungen gespeichert wurden (auch nach Redirect)
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameter for display message only
if (isset($_GET['simpbook_settings_updated']) && $_GET['simpbook_settings_updated'] === 'true') {
    echo '<div class="notice notice-success is-dismissible"><p>' . esc_html__('Settings saved.', 'simple-appointment-booking') . '</p></div>';
}
?>
<div class="wrap simpbook-admin-wrap">
    <h1 class="wp-heading-inline"><?php esc_html_e('Booking Settings', 'simple-appointment-booking'); ?></h1>

    <hr class="wp-header-end">

    <form method="post" action="<?php echo esc_attr(simpbook_get_form_action()); ?>" autocomplete="off">
        <?php wp_nonce_field('simpbook_einstellungen'); ?>
        <!-- Dummy fields: prevent Chrome from treating this admin form as a login form -->
        <input type="text" name="prevent_autofill_user" style="display:none;" tabindex="-1" autocomplete="username">
        <input type="password" name="prevent_autofill_pass" style="display:none;" tabindex="-1" autocomplete="new-password">
        <input type="hidden" name="simpbook_active_tab" id="simpbook-active-tab" value="<?php echo esc_attr($simpbook_active_tab); ?>" />

        <div class="simpbook-tabs">
            <!-- All radio inputs first (siblings of content divs — needed for CSS ~ selectors) -->
            <input type="radio" id="tab-general" name="simpbook-tab" <?php checked($simpbook_active_tab, 'general'); ?>>
            <input type="radio" id="tab-opening-hours" name="simpbook-tab" <?php checked($simpbook_active_tab, 'opening-hours'); ?>>
            <input type="radio" id="tab-cancellations" name="simpbook-tab" <?php checked($simpbook_active_tab, 'cancellations'); ?>>
            <input type="radio" id="tab-emails" name="simpbook-tab" <?php checked($simpbook_active_tab, 'emails'); ?>>
            <input type="radio" id="tab-design" name="simpbook-tab" <?php checked($simpbook_active_tab, 'design'); ?>>
            <input type="radio" id="tab-formular" name="simpbook-tab" <?php checked($simpbook_active_tab, 'formular'); ?>>
            <input type="radio" id="tab-language" name="simpbook-tab" <?php checked($simpbook_active_tab, 'language'); ?>>
            <input type="radio" id="tab-app" name="simpbook-tab" <?php checked($simpbook_active_tab, 'app'); ?>>

            <!-- Nav pill bar — labels only -->
            <div class="simpbook-tabs-bar">
                <label for="tab-general"><span class="dashicons dashicons-admin-settings"></span><?php esc_html_e('General', 'simple-appointment-booking'); ?></label>
                <label for="tab-opening-hours"><span class="dashicons dashicons-clock"></span><?php esc_html_e('Opening Hours', 'simple-appointment-booking'); ?></label>
                <label for="tab-cancellations"><span class="dashicons dashicons-no-alt"></span><?php esc_html_e('Cancellations', 'simple-appointment-booking'); ?></label>
                <label for="tab-emails"><span class="dashicons dashicons-email-alt"></span><?php esc_html_e('Emails', 'simple-appointment-booking'); ?></label>
                <label for="tab-design"><span class="dashicons dashicons-art"></span><?php esc_html_e('Design', 'simple-appointment-booking'); ?></label>
                <label for="tab-formular"><span class="dashicons dashicons-feedback"></span><?php esc_html_e('Form', 'simple-appointment-booking'); ?></label>
                <label for="tab-language"><span class="dashicons dashicons-translation"></span><?php esc_html_e('Language', 'simple-appointment-booking'); ?></label>
                <label for="tab-app"><span class="dashicons dashicons-smartphone"></span><?php esc_html_e('App', 'simple-appointment-booking'); ?></label>
            </div>

            <div class="simpbook-tab-content" id="content-general">
                <h2><?php esc_html_e('General Settings', 'simple-appointment-booking'); ?></h2>
                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Shortcode for the form in the frontend', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <code style="font-size: 16px; padding: 10px; background: #f5f5f5; border-radius: 4px; display: inline-block;">[simpbook_bookingform]</code>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Company Name', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_firmen_name" type="text" id="simpbook_firmen_name"
                                   value="<?php echo esc_attr(get_option('simpbook_firmen_name', get_bloginfo('name'))); ?>"
                                   class="regular-text" style="width: 100%; max-width: 500px;">
                            <p class="description"><?php esc_html_e('This name is used in all emails.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Setup Assistant', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <p class="description"><?php esc_html_e('Restart the setup wizard to perform the basic configuration of your booking system.', 'simple-appointment-booking'); ?></p>
                            <a href="<?php echo esc_url(admin_url('admin.php?page=simpbook-reservierungen-einstellungen&simpbook_wizard_reset=1&simpbook_nonce=' . wp_create_nonce('simpbook_wizard_reset'))); ?>" class="button button-secondary" style="margin-top: 10px;">
                                <span class="dashicons dashicons-update"></span>
                                <?php esc_html_e('Reset setup wizard', 'simple-appointment-booking'); ?>
                            </a>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Plugin Updates', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <p><strong><?php esc_html_e('Current Version:', 'simple-appointment-booking'); ?></strong> <?php echo esc_html(defined('SIMPBOOK_VERSION') ? SIMPBOOK_VERSION : '1.1.5'); ?></p>
                            <?php if (isset($_GET['simpbook_check_updates']) && current_user_can('manage_options')): ?>
                                <p style="color: #00a32a;">&#10003; <?php esc_html_e('Update check completed.', 'simple-appointment-booking'); ?></p>
                            <?php endif; ?>
                            <?php
                            $update_info = SIMPBOOK_Plugin_Updater::get_cached_update_info();
                            
                            if ($update_info && isset($update_info->update_available)):
                                if ($update_info->update_available && isset($update_info->latest_version)):
                                    if ((isset($update_info->license_valid) && $update_info->license_valid && 
                                        isset($update_info->support_active) && $update_info->support_active) ||
                                        simpbook_is_trial_period_active()): ?>
                                        <p style="color: #d63638; font-weight: 500;">
                                            <?php 
                                            // translators: %s: Version number
                                            printf(esc_html__('Update available: Version %s', 'simple-appointment-booking'), esc_html($update_info->latest_version)); 
                                            ?>
                                        </p>
                                        <p class="description"><?php esc_html_e('Go to "Plugins" to install the update.', 'simple-appointment-booking'); ?></p>
                                    <?php elseif ((!isset($update_info->license_valid) || !$update_info->license_valid) && !simpbook_is_trial_period_active()): ?>
                                        <p style="color: #d63638;">
                                            <?php esc_html_e('Your license is invalid. Please check your license settings.', 'simple-appointment-booking'); ?>
                                        </p>
                                    <?php else: ?>
                                        <p style="color: #d63638;">
                                            <?php esc_html_e('Your support period has expired. Please renew your license for updates.', 'simple-appointment-booking'); ?>
                                        </p>
                                    <?php endif;
                                else: ?>
                                    <p style="color: #00a32a;">✓ <?php esc_html_e('You are using the latest version', 'simple-appointment-booking'); ?></p>
                                <?php endif;
                            else: ?>
                                <p class="description"><?php esc_html_e('Update status unknown. Click "Check Now" to search for updates.', 'simple-appointment-booking'); ?></p>
                            <?php endif; ?>
                            <a href="<?php echo esc_url(admin_url('admin.php?page=simpbook-reservierungen-einstellungen&simpbook_check_updates=1')); ?>" 
                               class="button button-secondary" style="margin-top: 10px;">
                                <span class="dashicons dashicons-update"></span>
                                <?php esc_html_e('Check for Updates Now', 'simple-appointment-booking'); ?>
                            </a>
                        </div>
                    </div>
                </div>

                <h2 style="margin-top: 30px;"><?php esc_html_e('Booking settings', 'simple-appointment-booking'); ?></h2>
                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Minimum lead time (Hours)', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_mindestvorlauf_stunden" type="number" id="simpbook_mindestvorlauf_stunden"
                                   value="<?php echo esc_attr(get_option('simpbook_mindestvorlauf_stunden', 2)); ?>"
                                   min="0" max="168" step="1" class="small-text">
                            <p class="description"><?php esc_html_e('How many hours in advance must a booking be made at minimum? (0 = no restriction)', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Maximum booking advance (Days)', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_maximale_vorlauf_tage" type="number" id="simpbook_maximale_vorlauf_tage"
                                   value="<?php echo esc_attr(get_option('simpbook_maximale_vorlauf_tage', 30)); ?>"
                                   min="0" max="365" step="1" class="small-text">
                            <p class="description"><?php esc_html_e('How many days in advance can appointments be booked? (0 = no restriction)', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Automatically accept bookings', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <label class="spb-toggle-wrap" for="simpbook_auto_bestaetigung">
                                <input name="simpbook_auto_bestaetigung" type="checkbox" id="simpbook_auto_bestaetigung" value="1" <?php checked(get_option('simpbook_auto_bestaetigung', '0'), '1'); ?>>
                                <span class="spb-toggle-slider"></span>
                                <span class="spb-toggle-label"><?php esc_html_e('Automatically confirm new bookings (customer receives confirmation email immediately)', 'simple-appointment-booking'); ?></span>
                            </label>
                        </div>
                    </div>
                </div>

                <h2 style="margin-top: 30px;"><?php esc_html_e('Email Notifications', 'simple-appointment-booking'); ?></h2>
                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Enable Email Notifications', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <label class="spb-toggle-wrap" for="simpbook_email_benachrichtigungen">
                                <input name="simpbook_email_benachrichtigungen" type="checkbox" id="simpbook_email_benachrichtigungen" value="1" <?php checked($simpbook_benachrichtigungen, '1'); ?>>
                                <span class="spb-toggle-slider"></span>
                                <span class="spb-toggle-label"><?php esc_html_e('Send an email for new reservations', 'simple-appointment-booking'); ?></span>
                            </label>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('E-Mail-Adresse for Benachrichtigungen', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_benachrichtigungs_email" type="email" id="simpbook_benachrichtigungs_email" value="<?php echo esc_attr($simpbook_benachrichtigungs_email); ?>" class="regular-text" style="width: 100%; max-width: 500px;">
                            <p class="description"><?php
                            // translators: %s: Admin email address
                            printf(esc_html__('Leave empty to use the admin email (%s).', 'simple-appointment-booking'), esc_html(get_option('admin_email'))); ?></p>
                        </div>
                    </div>
                </div>

                <h2 style="margin-top: 30px;"><?php esc_html_e('Appointment Reminders', 'simple-appointment-booking'); ?></h2>
                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Enable appointment reminders', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <label class="spb-toggle-wrap" for="simpbook_erinnerung_aktiv">
                                <input name="simpbook_erinnerung_aktiv" type="checkbox" id="simpbook_erinnerung_aktiv" value="1" <?php checked(get_option('simpbook_erinnerung_aktiv', 1), 1); ?>>
                                <span class="spb-toggle-slider"></span>
                                <span class="spb-toggle-label"><?php esc_html_e('Automatically remind customers about their appointments via email', 'simple-appointment-booking'); ?></span>
                            </label>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Reminder X Hours Before Appointment', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_erinnerung_vor_stunden" type="number" id="simpbook_erinnerung_vor_stunden"
                                   value="<?php echo esc_attr(get_option('simpbook_erinnerung_vor_stunden', 24)); ?>"
                                   min="1" max="168" step="1" class="small-text">
                            <p class="description"><?php esc_html_e('How many hours before the appointment should the reminder email be sent? (1-168 hours)', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="simpbook-tab-content" id="content-opening-hours">
                <h2><?php esc_html_e('Opening Hours', 'simple-appointment-booking'); ?></h2>
                <p class="description"><?php esc_html_e('Configure the general options and regular reservation times for each weekday individually here.', 'simple-appointment-booking'); ?></p>

                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Time Interval (Minutes)', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <select name="simpbook_intervall" id="simpbook_intervall" style="width: 100%; max-width: 300px;">
                                <option value="5" <?php selected($simpbook_intervall, 5); ?>>5 <?php esc_html_e('minutes', 'simple-appointment-booking'); ?></option>
                                <option value="10" <?php selected($simpbook_intervall, 10); ?>>10 <?php esc_html_e('minutes', 'simple-appointment-booking'); ?></option>
                                <option value="15" <?php selected($simpbook_intervall, 15); ?>>15 <?php esc_html_e('minutes', 'simple-appointment-booking'); ?></option>
                                <option value="30" <?php selected($simpbook_intervall, 30); ?>>30 <?php esc_html_e('minutes', 'simple-appointment-booking'); ?></option>
                                <option value="60" <?php selected($simpbook_intervall, 60); ?>>60 <?php esc_html_e('minutes', 'simple-appointment-booking'); ?></option>
                                <option value="90" <?php selected($simpbook_intervall, 90); ?>>90 <?php esc_html_e('minutes', 'simple-appointment-booking'); ?></option>
                            </select>
                            <p class="description"><?php esc_html_e('In what intervals can appointments be booked (e.g. every 30 minutes)?', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>

                <h2 style="margin-top: 30px;"><?php esc_html_e('Regular Weekly Opening Hours', 'simple-appointment-booking'); ?></h2>
                <div class="simpbook-settings-grid">
                <?php
                foreach ($simpbook_wochentage as $simpbook_tag_key => $simpbook_tag_name): ?>
                    <div class="simpbook-setting-card">
                        <h3><?php echo esc_html($simpbook_tag_name); ?></h3>
                        <div>
                            <label class="spb-toggle-wrap" for="simpbook_<?php echo esc_attr($simpbook_tag_key); ?>_aktiv">
                                <input name="simpbook_<?php echo esc_attr($simpbook_tag_key); ?>_aktiv" type="checkbox" id="simpbook_<?php echo esc_attr($simpbook_tag_key); ?>_aktiv" value="1" <?php checked($simpbook_wochentag_zeiten[$simpbook_tag_key]['aktiv'] ?? '0', '1'); ?>>
                                <span class="spb-toggle-slider"></span>
                                <span class="spb-toggle-label"><?php esc_html_e('Allow reservations on this day', 'simple-appointment-booking'); ?></span>
                            </label>
                            <div style="margin-top: 15px; <?php if(!($simpbook_wochentag_zeiten[$simpbook_tag_key]['aktiv'] ?? false)) echo 'display:none;'; ?>" class="wochentag-zeiten-inputs">
                                <div class="time-input-row">
                                    <span class="time-input-group">
                                        <span class="time-label"><?php esc_html_e('From:', 'simple-appointment-booking'); ?></span>
                                        <input name="simpbook_<?php echo esc_attr($simpbook_tag_key); ?>_beginn" type="time" value="<?php echo esc_attr($simpbook_wochentag_zeiten[$simpbook_tag_key]['beginn'] ?? '11:00'); ?>" class="time-input" autocomplete="off">
                                    </span>
                                    <span class="time-input-group">
                                        <span class="time-label"><?php esc_html_e('To:', 'simple-appointment-booking'); ?></span>
                                        <input name="simpbook_<?php echo esc_attr($simpbook_tag_key); ?>_ende" type="time" value="<?php echo esc_attr($simpbook_wochentag_zeiten[$simpbook_tag_key]['ende'] ?? '22:00'); ?>" class="time-input" autocomplete="off">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
                </div>

                <h2 style="margin-top: 30px;"><?php esc_html_e('Holidays & Special Opening Hours', 'simple-appointment-booking'); ?></h2>
                <p class="description"><?php esc_html_e('Define days here when your restaurant is completely closed or has different opening hours than the regular weekday settings.', 'simple-appointment-booking'); ?></p>
                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card simpbook-setting-full-width">
                        <h3><?php esc_html_e('Add Date', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="margin-bottom: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
                                <input type="text" id="datepicker_speziell" class="regular-text"
                                       placeholder="<?php esc_attr_e('Select date...', 'simple-appointment-booking'); ?>" autocomplete="off" style="flex: 1; min-width: 200px;">
                                <button type="button" id="add-speziellen-tag-btn" class="button"><?php esc_html_e('Configure Selected Date', 'simple-appointment-booking'); ?></button>
                            </div>
                            <div id="spezielle-tage-liste">
                            <?php
                            if (!empty($simpbook_spezielle_tage_konfiguration)) {
                                // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Loop variables
                                foreach ($simpbook_spezielle_tage_konfiguration as $datum_str => $einstellungen) {
                                    $status = $einstellungen['status'] ?? 'geschlossen';
                                    $beginn = $einstellungen['beginn'] ?? '';
                                    $ende = $einstellungen['ende'] ?? '';
                                    ?>
                                    <div class="spezieller-tag-eintrag" data-datum="<?php echo esc_attr($datum_str); ?>">
                                        <strong><?php echo esc_html(simpbook_format_date($datum_str)); ?></strong>
                                        <input type="hidden" name="simpbook_spezielle_tage_daten[<?php echo esc_attr($datum_str); ?>][datum_hidden]" value="<?php echo esc_attr($datum_str); ?>">
                                        <select name="simpbook_spezielle_tage_daten[<?php echo esc_attr($datum_str); ?>][status]" class="spezieller-tag-status">
                                            <option value="geschlossen" <?php selected($status, 'geschlossen'); ?>><?php esc_html_e('Close Entire Day', 'simple-appointment-booking'); ?></option>
                                            <option value="speziell" <?php selected($status, 'speziell'); ?>><?php esc_html_e('Special Opening Hours', 'simple-appointment-booking'); ?></option>
                                        </select>
                                        <span class="spezielle-zeiten-inputs" style="<?php if ($status !== 'speziell') echo 'display:none;'; ?>">
                                            <div class="time-input-row">
                                                <span class="time-input-group">
                                                    <span class="time-label"><?php esc_html_e('From:', 'simple-appointment-booking'); ?></span>
                                                    <input type="time" name="simpbook_spezielle_tage_daten[<?php echo esc_attr($datum_str); ?>][beginn]" value="<?php echo esc_attr($beginn); ?>" class="spezieller-tag-beginn time-input" autocomplete="off">
                                                </span>
                                                <span class="time-input-group">
                                                    <span class="time-label"><?php esc_html_e('To:', 'simple-appointment-booking'); ?></span>
                                                    <input type="time" name="simpbook_spezielle_tage_daten[<?php echo esc_attr($datum_str); ?>][ende]" value="<?php echo esc_attr($ende); ?>" class="spezieller-tag-ende time-input" autocomplete="off">
                                                </span>
                                            </div>
                                        </span>
                                        <button type="button" class="button button-link-delete remove-speziellen-tag-btn"><?php esc_html_e('Remove', 'simple-appointment-booking'); ?></button>
                                    </div>
                                    <?php
                                }
                                // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                            }
                            ?>
                            </div>
                            <p class="description"><?php esc_html_e('Added days override the regular weekly opening hours for the respective date.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>

                <h2 style="margin-top: 30px;"><?php esc_html_e('Vacation & Season Management', 'simple-appointment-booking'); ?></h2>
                <p class="description"><?php esc_html_e('Define periods here during which your business is completely closed (e.g. vacation, seasonal break). All days within the defined periods will automatically be blocked for bookings.', 'simple-appointment-booking'); ?></p>
                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card simpbook-setting-full-width">
                        <h3><?php esc_html_e('Add time period', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="margin-bottom: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
                                <span style="white-space: nowrap; font-weight: 500;"><?php esc_html_e('From:', 'simple-appointment-booking'); ?></span>
                                <input type="text" id="urlaub_datepicker_von" class="regular-text"
                                       placeholder="<?php esc_attr_e('Start date...', 'simple-appointment-booking'); ?>" readonly autocomplete="off" style="flex: 1; min-width: 130px; max-width: 200px;">
                                <span style="white-space: nowrap; font-weight: 500;"><?php esc_html_e('To:', 'simple-appointment-booking'); ?></span>
                                <input type="text" id="urlaub_datepicker_bis" class="regular-text"
                                       placeholder="<?php esc_attr_e('End date...', 'simple-appointment-booking'); ?>" readonly autocomplete="off" style="flex: 1; min-width: 130px; max-width: 200px;">
                                <button type="button" id="add-urlaub-btn" class="button"><?php esc_html_e('Add time period', 'simple-appointment-booking'); ?></button>
                            </div>
                            <div id="urlaub-zeitraeume-liste">
                            <?php
                            if (!empty($simpbook_urlaub_konfiguration)) {
                                // phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                                foreach ($simpbook_urlaub_konfiguration as $urlaub_index => $urlaub_zeitraum) {
                                    $urlaub_von = isset($urlaub_zeitraum['of']) ? $urlaub_zeitraum['of'] : '';
                                    $urlaub_bis = isset($urlaub_zeitraum['bis']) ? $urlaub_zeitraum['bis'] : '';
                                    if (!$urlaub_von || !$urlaub_bis) continue;
                                    ?>
                                    <div class="spezieller-tag-eintrag urlaub-zeitraum-eintrag" data-von="<?php echo esc_attr($urlaub_von); ?>" data-bis="<?php echo esc_attr($urlaub_bis); ?>">
                                        <strong><?php echo esc_html(simpbook_format_date($urlaub_von) . ' – ' . simpbook_format_date($urlaub_bis)); ?></strong>
                                        <input type="hidden" name="simpbook_urlaub_konfiguration[<?php echo esc_attr($urlaub_index); ?>][von]" value="<?php echo esc_attr($urlaub_von); ?>">
                                        <input type="hidden" name="simpbook_urlaub_konfiguration[<?php echo esc_attr($urlaub_index); ?>][bis]" value="<?php echo esc_attr($urlaub_bis); ?>">
                                        <button type="button" class="button button-link-delete remove-urlaub-btn"><?php esc_html_e('Remove', 'simple-appointment-booking'); ?></button>
                                    </div>
                                    <?php
                                }
                                // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                            }
                            ?>
                            </div>
                            <p class="description"><?php esc_html_e('Added periods block all included days for bookings.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="simpbook-tab-content" id="content-cancellations">
                <h2><?php esc_html_e('Cancellations', 'simple-appointment-booking'); ?></h2>
                <p class="description"><?php esc_html_e('Configure cancellation settings for guests.', 'simple-appointment-booking'); ?></p>
                <div class="simpbook-settings-grid">
                    <!-- Buchungen stornieren -->
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Cancel bookings', 'simple-appointment-booking'); ?></h3>
                        
                        <div>
                            <label class="spb-toggle-wrap" for="simpbook_stornierung_aktiviert">
                                <input name="simpbook_stornierung_aktiviert" type="checkbox" id="simpbook_stornierung_aktiviert" value="1" <?php checked($simpbook_stornierung_aktiviert, '1'); ?>>
                                <span class="spb-toggle-slider"></span>
                                <span class="spb-toggle-label"><?php esc_html_e('Enable cancellation', 'simple-appointment-booking'); ?></span>
                            </label>
                            <p class="description" style="margin-top: 8px;"><?php esc_html_e('Guest can cancel bookings before the appointment', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Minimum hours before appointment', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_stornierung_mindeststunden" type="number" id="simpbook_stornierung_mindeststunden" value="<?php echo esc_attr($simpbook_stornierung_mindeststunden); ?>" min="0" step="1" class="small-text">
                            <p class="description"><?php esc_html_e('Guests can only cancel reservations if at least this number of hours remain until the appointment.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Phone number for cancellations', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_stornierung_telefonnummer" type="text" id="simpbook_stornierung_telefonnummer" value="<?php echo esc_attr($simpbook_stornierung_telefonnummer); ?>" class="regular-text" style="width: 100%; max-width: 500px;">
                            <p class="description"><?php esc_html_e('This phone number is displayed when a cancellation is too late (below the minimum hours limit).', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="simpbook-tab-content" id="content-emails">
                <h2><?php esc_html_e('Email Templates', 'simple-appointment-booking'); ?></h2>
                <p class="description"><?php esc_html_e('Customize the email templates that are sent to guests.', 'simple-appointment-booking'); ?></p>

                <!-- Email Header Logo -->
                <div class="simpbook-email-logo-section" style="margin-bottom: 24px; padding: 16px; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px;">
                    <h3 style="margin: 0 0 12px 0;"><?php esc_html_e('Email Header Logo', 'simple-appointment-booking'); ?></h3>
                    <p class="description" style="margin-bottom: 12px;"><?php esc_html_e('Upload a logo to display in the email header. Recommended size: 200×60px.', 'simple-appointment-booking'); ?></p>
                    <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
                        <input type="hidden" id="simpbook_email_header_logo" name="simpbook_email_header_logo" value="<?php echo esc_url(get_option('simpbook_email_header_logo', '')); ?>">
                        <button type="button" id="simpbook-email-logo-upload" class="button"><?php esc_html_e('Select Logo', 'simple-appointment-booking'); ?></button>
                        <?php $simpbook_logo_url = get_option('simpbook_email_header_logo', ''); ?>
                        <button type="button" id="simpbook-email-logo-remove" class="button" style="<?php echo $simpbook_logo_url ? '' : 'display:none;'; ?>"><?php esc_html_e('Remove Logo', 'simple-appointment-booking'); ?></button>
                        <img id="simpbook-email-logo-preview" src="<?php echo esc_url($simpbook_logo_url); ?>" alt="" style="max-height: 60px; max-width: 200px;<?php echo $simpbook_logo_url ? '' : ' display:none;'; ?>">
                    </div>
                </div>

                <div class="simpbook-settings-grid-2col">
                    <!-- Buchungsbestätigung (Automatisch nach Buchung) -->
                    <div class="simpbook-setting-card simpbook-email-card" data-card-id="simpbook_bestaetigungs">
                        <h3><?php esc_html_e('Booking confirmation (Automatically after booking)', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <label for="email_bestaetigungs_betreff" style="display: block; margin-bottom: 8px; font-weight: 600;"><?php esc_html_e('Subject', 'simple-appointment-booking'); ?></label>
                            <input name="simpbook_email_bestaetigungs_betreff" type="text" id="email_bestaetigungs_betreff"
                                   value="<?php echo esc_attr($simpbook_email_bestaetigungs_betreff); ?>"
                                   class="regular-text simpbook-email-subject" style="width: 100%; max-width: 100%;">
                            <label for="email_bestaetigungs_nachricht" style="display: block; margin: 20px 0 8px 0; font-weight: 600; width: 50%;"><?php esc_html_e('Message', 'simple-appointment-booking'); ?></label>
                            <textarea name="simpbook_email_bestaetigungs_nachricht" id="email_bestaetigungs_nachricht" rows="8" class="large-text simpbook-email-body" style="width: 100%;"><?php echo esc_textarea($simpbook_email_bestaetigungs_nachricht); ?></textarea>
                            <p class="description"><?php esc_html_e('Available placeholders: {name}, {email}, {phone}, {date}, {time}, {service_name}, {employee_name}, {employee_name_label}, {booking_option}, {booking_price}, {message}, {company_name}, {cancellation_link}', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <!-- Bestätigt Status -->
                    <div class="simpbook-setting-card simpbook-email-card" data-card-id="simpbook_bestaetigt">
                        <h3><?php esc_html_e('Booking confirmed (Manually by admin)', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <?php
                            $simpbook_email_bestaetigt_betreff_val = simpbook_get_email_template('simpbook_email_bestaetigt_betreff', '', $simpbook_current_language);
                            ?>
                            <label for="email_bestaetigt_betreff" style="display: block; margin-bottom: 8px; font-weight: 600;"><?php esc_html_e('Subject', 'simple-appointment-booking'); ?></label>
                            <input name="simpbook_email_bestaetigt_betreff" type="text" id="email_bestaetigt_betreff"
                                   value="<?php echo esc_attr($simpbook_email_bestaetigt_betreff_val); ?>"
                                   class="regular-text simpbook-email-subject" style="width: 100%; max-width: 100%;">
                            <?php
                            $simpbook_email_bestaetigt_nachricht_val = simpbook_get_email_template('simpbook_email_bestaetigt_nachricht', '', $simpbook_current_language);
                            ?>
                            <label for="email_bestaetigt_nachricht" style="display: block; margin: 20px 0 8px 0; font-weight: 600; width: 50%;"><?php esc_html_e('Message', 'simple-appointment-booking'); ?></label>
                            <textarea name="simpbook_email_bestaetigt_nachricht" id="email_bestaetigt_nachricht" rows="8" class="large-text simpbook-email-body" style="width: 100%;"><?php echo esc_textarea($simpbook_email_bestaetigt_nachricht_val); ?></textarea>
                            <p class="description"><?php esc_html_e('Available placeholders: {name}, {date}, {time}, {service_name}, {employee_name}, {employee_name_label}, {booking_option}, {booking_price}, {company_name}, {cancellation_link}', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>

                    <!-- Abgelehnt Status -->
                    <div class="simpbook-setting-card simpbook-email-card" data-card-id="simpbook_abgelehnt">
                        <h3><?php esc_html_e('Booking rejected (Manually by admin)', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <?php
                            $simpbook_email_abgelehnt_betreff_val = simpbook_get_email_template('simpbook_email_abgelehnt_betreff', '', $simpbook_current_language);
                            ?>
                            <label for="email_abgelehnt_betreff" style="display: block; margin-bottom: 8px; font-weight: 600;"><?php esc_html_e('Subject', 'simple-appointment-booking'); ?></label>
                            <input name="simpbook_email_abgelehnt_betreff" type="text" id="email_abgelehnt_betreff"
                                   value="<?php echo esc_attr($simpbook_email_abgelehnt_betreff_val); ?>"
                                   class="regular-text simpbook-email-subject" style="width: 100%; max-width: 100%;">
                            <?php
                            $simpbook_email_abgelehnt_nachricht_val = simpbook_get_email_template('simpbook_email_abgelehnt_nachricht', '', $simpbook_current_language);
                            ?>
                            <label for="email_abgelehnt_nachricht" style="display: block; margin: 20px 0 8px 0; font-weight: 600; width: 50%;"><?php esc_html_e('Message', 'simple-appointment-booking'); ?></label>
                            <textarea name="simpbook_email_abgelehnt_nachricht" id="email_abgelehnt_nachricht" rows="8" class="large-text simpbook-email-body" style="width: 100%;"><?php echo esc_textarea($simpbook_email_abgelehnt_nachricht_val); ?></textarea>
                            <p class="description"><?php esc_html_e('Available placeholders: {name}, {date}, {time}, {service_name}, {employee_name}, {employee_name_label}, {booking_option}, {booking_price}, {company_name}, {cancellation_link}', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <!-- Erinnerung -->
                    <div class="simpbook-setting-card simpbook-email-card" data-card-id="simpbook_erinnerung">
                        <h3><?php esc_html_e('Appointment reminder (Automatically X hours before appointment)', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <?php
                            $simpbook_email_erinnerung_betreff_val = simpbook_get_email_template('simpbook_email_erinnerung_betreff', '', $simpbook_current_language);
                            ?>
                            <label for="email_erinnerung_betreff" style="display: block; margin-bottom: 8px; font-weight: 600;"><?php esc_html_e('Subject', 'simple-appointment-booking'); ?></label>
                            <input name="simpbook_email_erinnerung_betreff" type="text" id="email_erinnerung_betreff"
                                   value="<?php echo esc_attr($simpbook_email_erinnerung_betreff_val); ?>"
                                   class="regular-text simpbook-email-subject" style="width: 100%; max-width: 100%;">
                            <?php
                            $simpbook_email_erinnerung_nachricht_val = simpbook_get_email_template('simpbook_email_erinnerung_nachricht', '', $simpbook_current_language);
                            ?>
                            <label for="email_erinnerung_nachricht" style="display: block; margin: 20px 0 8px 0; font-weight: 600; width: 50%;"><?php esc_html_e('Message', 'simple-appointment-booking'); ?></label>
                            <textarea name="simpbook_email_erinnerung_nachricht" id="email_erinnerung_nachricht" rows="8" class="large-text simpbook-email-body" style="width: 100%;"><?php echo esc_textarea($simpbook_email_erinnerung_nachricht_val); ?></textarea>
                            <p class="description"><?php esc_html_e('Available placeholders: {name}, {date}, {time}, {service_name}, {employee_name}, {employee_name_label}, {booking_option}, {booking_price}, {company_name}, {cancellation_link}', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <!-- Storniert Status -->
                    <div class="simpbook-setting-card simpbook-email-card" data-card-id="simpbook_storniert">
                        <h3><?php esc_html_e('Booking cancelled (Automatically when cancelling)', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <?php
                            $simpbook_email_storniert_betreff_val = simpbook_get_email_template('simpbook_email_storniert_betreff', '', $simpbook_current_language);
                            ?>
                            <label for="email_storniert_betreff" style="display: block; margin-bottom: 8px; font-weight: 600;"><?php esc_html_e('Subject', 'simple-appointment-booking'); ?></label>
                            <input name="simpbook_email_storniert_betreff" type="text" id="email_storniert_betreff"
                                   value="<?php echo esc_attr($simpbook_email_storniert_betreff_val); ?>"
                                   class="regular-text simpbook-email-subject" style="width: 100%; max-width: 100%;">
                            <?php
                            $simpbook_email_storniert_nachricht_val = simpbook_get_email_template('simpbook_email_storniert_nachricht', '', $simpbook_current_language);
                            ?>
                            <label for="email_storniert_nachricht" style="display: block; margin: 20px 0 8px 0; font-weight: 600; width: 50%;"><?php esc_html_e('Message', 'simple-appointment-booking'); ?></label>
                            <textarea name="simpbook_email_storniert_nachricht" id="email_storniert_nachricht" rows="8" class="large-text simpbook-email-body" style="width: 100%;"><?php echo esc_textarea($simpbook_email_storniert_nachricht_val); ?></textarea>
                            <p class="description"><?php esc_html_e('Available placeholders: {name}, {date}, {time}, {service_name}, {employee_name}, {booking_option}, {booking_price}, {company_name}', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>

                <!-- Email Preview Box -->
                <div class="simpbook-email-preview-box" id="simpbook-email-preview-box">
                    <div class="simpbook-email-preview-header">
                        <h3><?php esc_html_e('Email Preview', 'simple-appointment-booking'); ?></h3>
                        <button type="button" class="simpbook-email-preview-close" id="simpbook-email-preview-close">&#x2715;</button>
                    </div>
                    <div class="simpbook-email-preview-body" id="simpbook-email-preview-body">
                        <p class="simpbook-email-preview-hint"><?php esc_html_e('Click on an email template card to preview it.', 'simple-appointment-booking'); ?></p>
                    </div>
                </div>
            </div>

            <div class="simpbook-tab-content" id="content-design">
                <h2><?php esc_html_e('Design Settings', 'simple-appointment-booking'); ?></h2>
                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Main Background Color', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                                <input name="simpbook_container_background" type="color" id="container_color_picker"
                                       value="<?php echo esc_attr($simpbook_container_background); ?>">
                                <input name="container_background_text" type="text" id="container_background_input"
                                       value="<?php echo esc_attr($simpbook_container_background); ?>"
                                       pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
                                       placeholder="#FFFFFF"
                                       style="width: 100px;">
                                <button type="button" id="apply_container_color_btn" class="button"><?php esc_html_e('Apply', 'simple-appointment-booking'); ?></button>
                            </div>
                            <p class="description"><?php esc_html_e('Select the background color for the reservation form and main app color (header, buttons, etc.)', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Text Color', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                                <input name="simpbook_text_color" type="color" id="text_color_picker"
                                       value="<?php echo esc_attr($simpbook_text_color); ?>">
                                <input name="text_color_text" type="text" id="text_color_input"
                                       value="<?php echo esc_attr($simpbook_text_color); ?>"
                                       pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
                                       placeholder="#000000"
                                       style="width: 100px;">
                                <button type="button" id="apply_text_color_btn" class="button"><?php esc_html_e('Apply', 'simple-appointment-booking'); ?></button>
                            </div>
                            <p class="description"><?php esc_html_e('Select the text color for the reservation form.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Tile background color', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                                <input name="simpbook_tile_background" type="color" id="tile_color_picker"
                                       value="<?php echo esc_attr($simpbook_tile_background); ?>">
                                <input name="tile_background_text" type="text" id="tile_background_input"
                                       value="<?php echo esc_attr($simpbook_tile_background); ?>"
                                       pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
                                       placeholder="#FFFFFF"
                                       style="width: 100px;">
                                <button type="button" id="apply_tile_color_btn" class="button"><?php esc_html_e('Apply', 'simple-appointment-booking'); ?></button>
                            </div>
                            <p class="description"><?php esc_html_e('Select the background color for the tiles (date, service, staff, etc.).', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Tile Text Color', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                                <input name="simpbook_tile_text_color" type="color" id="tile_text_color_picker"
                                       value="<?php echo esc_attr($simpbook_tile_text_color); ?>">
                                <input name="tile_text_color_text" type="text" id="tile_text_color_input"
                                       value="<?php echo esc_attr($simpbook_tile_text_color); ?>"
                                       pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
                                       placeholder="#333333"
                                       style="width: 100px;">
                                <button type="button" id="apply_tile_text_color_btn" class="button"><?php esc_html_e('Apply', 'simple-appointment-booking'); ?></button>
                            </div>
                            <p class="description"><?php esc_html_e('Select the text color for the tiles (date, service, staff, time, etc.).', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Corner Radius', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="display: flex; align-items: center; gap: 5px; margin-bottom: 10px;">
                                <input name="simpbook_border_radius" type="number" id="border_radius_input"
                                       value="<?php echo esc_attr($simpbook_border_radius); ?>"
                                       min="0" max="50" step="1"
                                       style="width: 100px;">
                                <span>px</span>
                            </div>
                            <p class="description"><?php esc_html_e('Enter the corner radius for the reservation form in pixels (0 = square, higher values = rounder).', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Tile Corner Radius', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="display: flex; align-items: center; gap: 5px; margin-bottom: 10px;">
                                <input name="simpbook_tile_border_radius" type="number" id="tile_border_radius_input"
                                       value="<?php echo esc_attr($simpbook_tile_border_radius); ?>"
                                       min="0" max="50" step="1"
                                       style="width: 100px;">
                                <span>px</span>
                            </div>
                            <p class="description"><?php esc_html_e('Enter the corner radius for the tiles (date, service, employee, time) in pixels (0 = square, higher values = rounder).', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>

                <h2><?php esc_html_e('Button-Design', 'simple-appointment-booking'); ?></h2>
                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Button Color', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                                <input name="simpbook_button_color" type="color" id="button_color_picker"
                                       value="<?php echo esc_attr($simpbook_button_color); ?>">
                                <input name="button_color_text" type="text" id="button_color_input"
                                       value="<?php echo esc_attr($simpbook_button_color); ?>"
                                       pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
                                       placeholder="#2271b1"
                                       style="width: 100px;">
                                <button type="button" id="apply_button_color_btn" class="button"><?php esc_html_e('Apply', 'simple-appointment-booking'); ?></button>
                            </div>
                            <p class="description"><?php esc_html_e('Select the background color for the buttons in the reservation form.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Button Text Color', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                                <input name="simpbook_button_text_color" type="color" id="button_text_color_picker"
                                       value="<?php echo esc_attr($simpbook_button_text_color); ?>">
                                <input name="button_text_color_text" type="text" id="button_text_color_input"
                                       value="<?php echo esc_attr($simpbook_button_text_color); ?>"
                                       pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
                                       placeholder="#ffffff"
                                       style="width: 100px;">
                                <button type="button" id="apply_button_text_color_btn" class="button"><?php esc_html_e('Apply', 'simple-appointment-booking'); ?></button>
                            </div>
                            <p class="description"><?php esc_html_e('Choose the text color for the buttons in the reservation form.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Button Corner Radius', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <div style="display: flex; align-items: center; gap: 5px; margin-bottom: 10px;">
                                <input name="simpbook_button_border_radius" type="number" id="button_border_radius_input"
                                       value="<?php echo esc_attr($simpbook_button_border_radius); ?>"
                                       min="0" max="50" step="1"
                                       style="width: 100px;">
                                <span>px</span>
                            </div>
                            <p class="description"><?php esc_html_e('Enter the corner radius for the buttons in pixels (0 = square, higher values = rounder).', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>

                <h2><?php esc_html_e('Form Headers', 'simple-appointment-booking'); ?></h2>
                <p class="description" style="margin-bottom: 20px;"><?php esc_html_e('Customize the text of the headers in the frontend form.', 'simple-appointment-booking'); ?></p>
                <div class="simpbook-settings-grid">
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Date Header', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_form_header_date" type="text" id="form_header_date_input"
                                   value="<?php echo esc_attr($simpbook_form_header_date); ?>"
                                   style="width: 100%;">
                            <p class="description"><?php esc_html_e('Header for the date selection in the form.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Service Header', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_form_header_service" type="text" id="form_header_service_input"
                                   value="<?php echo esc_attr($simpbook_form_header_service); ?>"
                                   style="width: 100%;">
                            <p class="description"><?php esc_html_e('Header for the service selection in the form.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Additional Services Heading', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_form_header_ungrouped_services" type="text" id="form_header_ungrouped_services_input"
                                   value="<?php echo esc_attr($simpbook_form_header_ungrouped_services); ?>"
                                   style="width: 100%;">
                            <p class="description"><?php esc_html_e('Heading for services without a group in the form (only displayed when grouped services already exist).', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Booking Option Heading', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_form_header_booking_option" type="text" id="form_header_booking_option_input"
                                   value="<?php echo esc_attr($simpbook_form_header_booking_option); ?>"
                                   style="width: 100%;">
                            <p class="description"><?php esc_html_e('Heading for the booking option selection in the form (only displayed when a service with multiple options is selected).', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Employee Header', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_form_header_employee" type="text" id="form_header_employee_input"
                                   value="<?php echo esc_attr($simpbook_form_header_employee); ?>"
                                   style="width: 100%;">
                            <p class="description"><?php esc_html_e('Header for the employee selection in the form.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Time Header', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_form_header_time" type="text" id="form_header_time_input"
                                   value="<?php echo esc_attr($simpbook_form_header_time); ?>"
                                   style="width: 100%;">
                            <p class="description"><?php esc_html_e('Header for the time selection in the form.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Contact Details Header', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_form_header_contact" type="text" id="form_header_contact_input"
                                   value="<?php echo esc_attr($simpbook_form_header_contact); ?>"
                                   style="width: 100%;">
                            <p class="description"><?php esc_html_e('Header for the contact details section in the form.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Confirmation Header', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input name="simpbook_form_header_confirmation" type="text" id="form_header_confirmation_input"
                                   value="<?php echo esc_attr($simpbook_form_header_confirmation); ?>"
                                   style="width: 100%;">
                            <p class="description"><?php esc_html_e('Header for the booking summary / confirmation step in the form.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="simpbook-tab-content" id="content-language">
                <h2><?php esc_html_e('Language Settings', 'simple-appointment-booking'); ?></h2>
                <div class="simpbook-settings-grid">
                    <?php
                    $simpbook_wp_language = simpbook_get_wordpress_language();
                    $simpbook_language_override = simpbook_get_option('simpbook_language_override', '');
                    $simpbook_active_language = simpbook_get_current_language();
                    $simpbook_language_override_nonce = wp_create_nonce('simpbook_language_override_nonce');
                    ?>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Current WordPress Language', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <strong style="font-size: 16px; color: #2271b1;"><?php echo esc_html(simpbook_get_language_name($simpbook_wp_language)); ?></strong>
                            <p class="description"><?php esc_html_e('The plugin automatically uses your WordPress language. If your WordPress language is not available, English will be used.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Override Language', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <input type="hidden" id="simpbook_language_override_nonce" value="<?php echo esc_attr($simpbook_language_override_nonce); ?>">
                            <select name="simpbook_language_override" id="simpbook_language_override" style="width: 100%; max-width: 300px;">
                                <option value="auto" <?php selected($simpbook_language_override, ''); selected($simpbook_language_override, 'auto'); ?>><?php esc_html_e('Automatic (WordPress Language)', 'simple-appointment-booking'); ?></option>
                                <option value="de_DE" <?php selected($simpbook_language_override, 'de_DE'); ?>><?php echo esc_html(simpbook_get_language_native_name('de_DE')); ?></option>
                                <option value="en_US" <?php selected($simpbook_language_override, 'en_US'); ?>><?php echo esc_html(simpbook_get_language_native_name('en_US')); ?></option>
                                <option value="en_US_AMPM" <?php selected($simpbook_language_override, 'en_US_AMPM'); ?>><?php echo esc_html(simpbook_get_language_native_name('en_US_AMPM')); ?></option>
                                <option value="en_GB" <?php selected($simpbook_language_override, 'en_GB'); ?>><?php echo esc_html(simpbook_get_language_native_name('en_GB')); ?></option>
                                <option value="it_IT" <?php selected($simpbook_language_override, 'it_IT'); ?>><?php echo esc_html(simpbook_get_language_native_name('it_IT')); ?></option>
                                <option value="es_ES" <?php selected($simpbook_language_override, 'es_ES'); ?>><?php echo esc_html(simpbook_get_language_native_name('es_ES')); ?></option>
                                <option value="fr_FR" <?php selected($simpbook_language_override, 'fr_FR'); ?>><?php echo esc_html(simpbook_get_language_native_name('fr_FR')); ?></option>
                                <option value="pl_PL" <?php selected($simpbook_language_override, 'pl_PL'); ?>><?php echo esc_html(simpbook_get_language_native_name('pl_PL')); ?></option>
                                <option value="ru_RU" <?php selected($simpbook_language_override, 'ru_RU'); ?>><?php echo esc_html(simpbook_get_language_native_name('ru_RU')); ?></option>
                                <option value="sv_SE" <?php selected($simpbook_language_override, 'sv_SE'); ?>><?php echo esc_html(simpbook_get_language_native_name('sv_SE')); ?></option>
                            </select>
                            <p class="description"><?php esc_html_e('Override the automatic language detection. Leave it on "Automatic" to automatically follow WordPress language changes.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                    <div class="simpbook-setting-card">
                        <h3><?php esc_html_e('Active Language', 'simple-appointment-booking'); ?></h3>
                        <div>
                            <strong style="font-size: 16px; color: #46b450;"><?php echo esc_html(simpbook_get_language_name($simpbook_active_language)); ?></strong>
                            <p class="description"><?php esc_html_e('This is the language that the plugin currently uses for email templates and other functions.', 'simple-appointment-booking'); ?></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Formular Tab Content -->
            <div class="simpbook-tab-content" id="content-formular">
                <h2><?php esc_html_e('Form Fields', 'simple-appointment-booking'); ?></h2>
                <p class="description"><?php esc_html_e('Toggle required fields and add custom fields.', 'simple-appointment-booking'); ?></p>

                <div class="simpbook-fb-wrap">
                    <div class="simpbook-fb-config">
                        <div class="simpbook-fb-section">
                            <div class="simpbook-fb-fields-list" id="simpbook-fb-fields-list">
                                <!-- populated via JS -->
                            </div>
                        </div>

                        <div class="simpbook-fb-actions-row">
                            <button type="button" class="button simpbook-fb-add-field">
                                + <?php esc_html_e('Add Field', 'simple-appointment-booking'); ?>
                            </button>
                            <div class="simpbook-fb-save-row">
                                <button type="button" class="button button-primary" id="simpbook-fb-save">
                                    <?php esc_html_e('Save Form Configuration', 'simple-appointment-booking'); ?>
                                </button>
                                <span id="simpbook-fb-save-status" style="color:#46b450;font-weight:600;display:none;">
                                    &#10003; <?php esc_html_e('Saved', 'simple-appointment-booking'); ?>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Field Type Modal -->
                <div id="simpbook-fb-modal" class="simpbook-fb-modal-overlay" style="display:none;">
                    <div class="simpbook-fb-modal">
                        <div class="simpbook-fb-modal-header">
                            <h3><?php esc_html_e('Add New Field', 'simple-appointment-booking'); ?></h3>
                            <button type="button" class="simpbook-fb-modal-close">&times;</button>
                        </div>
                        <div class="simpbook-fb-modal-body">
                            <p class="description"><?php esc_html_e('Choose the field type you want to add:', 'simple-appointment-booking'); ?></p>
                            <div class="simpbook-fb-type-grid">
                                <?php
                                $simpbook_field_types = array(
                                    'text'     => array('icon' => 'dashicons-editor-textcolor', 'label' => __('Text', 'simple-appointment-booking'),             'desc' => __('Single-line text input', 'simple-appointment-booking')),
                                    'textarea' => array('icon' => 'dashicons-editor-paragraph',  'label' => __('Textarea', 'simple-appointment-booking'),          'desc' => __('Multi-line text input', 'simple-appointment-booking')),
                                    'tel'      => array('icon' => 'dashicons-phone',             'label' => __('Phone Number', 'simple-appointment-booking'),       'desc' => __('Phone with country code', 'simple-appointment-booking')),
                                    'email'    => array('icon' => 'dashicons-email',             'label' => __('Email', 'simple-appointment-booking'),              'desc' => __('Email address with validation', 'simple-appointment-booking')),
                                    'date'     => array('icon' => 'dashicons-calendar',          'label' => __('Date / Birthday', 'simple-appointment-booking'),    'desc' => __('Date picker (e.g. birthday)', 'simple-appointment-booking')),
                                    'number'   => array('icon' => 'dashicons-editor-ol',         'label' => __('Number', 'simple-appointment-booking'),             'desc' => __('Numeric input field', 'simple-appointment-booking')),
                                    'select'   => array('icon' => 'dashicons-arrow-down-alt2',   'label' => __('Dropdown', 'simple-appointment-booking'),           'desc' => __('Selection from predefined options', 'simple-appointment-booking')),
                                    'checkbox' => array('icon' => 'dashicons-yes-alt',           'label' => __('Checkbox', 'simple-appointment-booking'),           'desc' => __('Consent / agreement checkbox', 'simple-appointment-booking')),
                                    'url'      => array('icon' => 'dashicons-admin-links',       'label' => __('URL / Website', 'simple-appointment-booking'),      'desc' => __('Website or link input', 'simple-appointment-booking')),
                                );
                                foreach ($simpbook_field_types as $simpbook_ft_key => $simpbook_ft) : ?>
                                <button type="button" class="simpbook-fb-type-option" data-type="<?php echo esc_attr($simpbook_ft_key); ?>">
                                    <span class="dashicons <?php echo esc_attr($simpbook_ft['icon']); ?>"></span>
                                    <strong><?php echo esc_html($simpbook_ft['label']); ?></strong>
                                    <span class="simpbook-fb-type-desc"><?php echo esc_html($simpbook_ft['desc']); ?></span>
                                </button>
                                <?php endforeach; ?>
                            </div>
                            <div id="simpbook-fb-select-options-row" style="display:none;margin-top:16px;">
                                <label style="font-weight:600;"><?php esc_html_e('Options (comma-separated):', 'simple-appointment-booking'); ?></label>
                                <input type="text" id="simpbook-fb-select-options-input" style="width:100%;margin-top:6px;" placeholder="<?php esc_attr_e('Option 1, Option 2, Option 3', 'simple-appointment-booking'); ?>">
                            </div>
                            <div style="margin-top:16px;text-align:right;">
                                <button type="button" class="button button-primary" id="simpbook-fb-modal-add" disabled>
                                    <?php esc_html_e('Add Field', 'simple-appointment-booking'); ?>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <?php wp_nonce_field('simpbook_form_builder_nonce', 'simpbook_fb_nonce'); ?>
            </div>

            <!-- Formular-Builder Live-Vorschau -->
            <div id="simpbook-fb-form-preview">
                <iframe id="simpbook-fb-preview-iframe"
                        style="width: 100%; height: calc(100vh - 180px); min-height: 600px; border: none; display: block;"
                        frameborder="0">
                </iframe>
            </div>

            <!-- App Tab Content -->
            <div class="simpbook-tab-content" id="content-app">
                <?php
                // App-Settings Tab Content wird vom PWA Controller gerendert
                if (class_exists('Simpbook_PWA_Controller')) {
                    $simpbook_pwa_controller = Simpbook_PWA_Controller::get_instance();
                    $simpbook_pwa_controller->render_app_settings_tab();
                } else {
                    echo '<p>' . esc_html__('PWA module not available.', 'simple-appointment-booking') . '</p>';
                }
                ?>
            </div>

            <!-- Live-Vorschau: Schwebt rechts neben dem Design-Tab-Content -->
            <div class="simpbook-form-preview-box">
                <iframe id="simpbook-form-preview-iframe"
                        style="width: 100%; height: calc(100vh - 180px); min-height: 600px; border: none; display: block;"
                        frameborder="0">
                </iframe>
            </div>
        </div>

        <p class="submit">
            <input type="submit" name="simpbook_einstellungen_submit" class="button button-primary" value="<?php esc_attr_e('Save Settings', 'simple-appointment-booking'); ?>">
        </p>
    </form>

    <script>
    jQuery(document).ready(function($) {
        // Sprach-Dropdown: Bei Änderung Seite neu laden, damit sprachspezifische Werte geladen werden
        $('#simpbook_language_override').on('change', function() {
            var selectedLanguage = $(this).val();
            var currentLanguage = '<?php echo esc_js($simpbook_active_language); ?>';
            var $select = $(this);
            
            // Nur neu laden, wenn sich die Sprache wirklich ändert
            if (selectedLanguage !== currentLanguage && selectedLanguage !== 'auto') {
                // Zeige benutzerdefinierten Confirm-Dialog (rotes Design)
                simpbookConfirm(
                    '<?php esc_html_e('The page will reload to load language-specific settings. Unsaved changes will be lost. Continue?', 'simple-appointment-booking'); ?>',
                    '<?php esc_html_e('Change Language', 'simple-appointment-booking'); ?>'
                ).then(function(confirmed) {
                    if (confirmed) {
                        // Speichere Sprache via AJAX und lade dann neu
                        $.post(ajaxurl, {
                            action: 'simpbook_save_language_override',
                            language: selectedLanguage,
                            nonce: $('#simpbook_language_override_nonce').val()
                        }, function() {
                            location.reload();
                        });
                    } else {
                        // Setze Dropdown zurück
                        $select.val(currentLanguage);
                    }
                });
            } else if (selectedLanguage === 'auto') {
                // Bei 'auto' auch neu laden
                simpbookConfirm(
                    '<?php esc_html_e('The page will reload to load language-specific settings. Unsaved changes will be lost. Continue?', 'simple-appointment-booking'); ?>',
                    '<?php esc_html_e('Change Language', 'simple-appointment-booking'); ?>'
                ).then(function(confirmed) {
                    if (confirmed) {
                        $.post(ajaxurl, {
                            action: 'simpbook_save_language_override',
                            language: 'auto',
                            nonce: $('#simpbook_language_override_nonce').val()
                        }, function() {
                            location.reload();
                        });
                    } else {
                        $select.val(currentLanguage);
                    }
                });
            }
        });
    });
    </script>

    <script>
    (function($) {
        'use strict';

        /* =====================================================
           FORM BUILDER
           ===================================================== */
        var fbAjaxUrl  = ajaxurl;
        var fbNonce    = $('#simpbook_fb_nonce').val();
        var fbConfig   = { fields: [] };
        var fbCounter  = 0;
        var fbPendingType = null;

        var typeLabels = {
            text:     '<?php esc_html_e('Text', 'simple-appointment-booking'); ?>',
            textarea: '<?php esc_html_e('Textarea', 'simple-appointment-booking'); ?>',
            tel:      '<?php esc_html_e('Phone Number', 'simple-appointment-booking'); ?>',
            email:    '<?php esc_html_e('Email', 'simple-appointment-booking'); ?>',
            date:     '<?php esc_html_e('Date / Birthday', 'simple-appointment-booking'); ?>',
            number:   '<?php esc_html_e('Number', 'simple-appointment-booking'); ?>',
            select:   '<?php esc_html_e('Dropdown', 'simple-appointment-booking'); ?>',
            checkbox: '<?php esc_html_e('Checkbox', 'simple-appointment-booking'); ?>',
            url:      '<?php esc_html_e('URL / Website', 'simple-appointment-booking'); ?>'
        };
        var defaultPlaceholders = {
            text:     '<?php esc_html_e('Text input', 'simple-appointment-booking'); ?>',
            textarea: '<?php esc_html_e('Message', 'simple-appointment-booking'); ?>',
            tel:      '<?php esc_html_e('Phone', 'simple-appointment-booking'); ?>',
            email:    '<?php esc_html_e('Email', 'simple-appointment-booking'); ?>',
            date:     '<?php esc_html_e('Birthday', 'simple-appointment-booking'); ?>',
            number:   '<?php esc_html_e('Number', 'simple-appointment-booking'); ?>',
            select:   '<?php esc_html_e('Please choose', 'simple-appointment-booking'); ?>',
            checkbox: '<?php esc_html_e('I agree', 'simple-appointment-booking'); ?>',
            url:      '<?php esc_html_e('https://...', 'simple-appointment-booking'); ?>'
        };

        function fbLoad() {
            $.post(fbAjaxUrl, { action: 'simpbook_get_form_config', nonce: fbNonce }, function(res) {
                if (res.success && res.data.config) {
                    fbConfig = res.data.config;
                }
                fbRender();
            });
        }

        function fbRender() {
            var $list = $('#simpbook-fb-fields-list');
            $list.empty();
            $.each(fbConfig.fields, function(i, f) {
                $list.append(fbCreateRow(f, i));
            });
        }

        function fbCreateRow(field, idx) {
            var isCustom = !!field.removable;
            var lockHtml = isCustom ? '' : '<span class="dashicons dashicons-lock simpbook-fb-lock" title="System field"></span>';
            var delBtn   = isCustom
                ? '<button type="button" class="simpbook-fb-delete-btn" data-index="' + idx + '" title="<?php esc_attr_e('Remove', 'simple-appointment-booking'); ?>"><span class="dashicons dashicons-trash"></span></button>'
                : '';
            var reqLabel = field.required
                ? '<?php esc_html_e('Required', 'simple-appointment-booking'); ?>'
                : '<?php esc_html_e('Optional', 'simple-appointment-booking'); ?>';
            var reqChecked = field.required ? 'checked' : '';
            var typeLabel  = typeLabels[field.type] || field.type;
            var optionsRow = (field.type === 'select' && isCustom)
                ? '<div class="simpbook-fb-options-row"><label><?php esc_html_e('Options (comma-separated):', 'simple-appointment-booking'); ?> <input type="text" class="simpbook-fb-options-input" data-index="' + idx + '" value="' + (field.options || '') + '" style="width:100%;margin-top:4px;"></label></div>'
                : '';

            return $('<div class="simpbook-fb-field-row" data-index="' + idx + '">'
                + '<div class="simpbook-fb-field-info">'
                + '<div class="simpbook-fb-field-label">' + lockHtml + '<strong>' + $('<span>').text(field.label || field.placeholder).html() + '</strong> <span class="simpbook-fb-type-badge">' + typeLabel + '</span></div>'
                + '<div class="simpbook-fb-field-placeholder"><input type="text" class="simpbook-fb-placeholder-input" data-index="' + idx + '" value="' + ($('<span>').text(field.placeholder).html()) + '" placeholder="<?php esc_attr_e('Placeholder / Label', 'simple-appointment-booking'); ?>"></div>'
                + optionsRow
                + '</div>'
                + '<div class="simpbook-fb-field-actions">'
                + '<span class="simpbook-fb-req-label">' + reqLabel + '</span>'
                + '<label class="simpbook-fb-toggle">'
                + '<input type="checkbox" class="simpbook-fb-required-toggle" data-index="' + idx + '" ' + reqChecked + '>'
                + '<span class="simpbook-fb-toggle-slider"></span>'
                + '</label>'
                + delBtn
                + '</div>'
                + '</div>');
        }

        // Placeholder change
        $(document).on('input', '.simpbook-fb-placeholder-input', function() {
            var idx = parseInt($(this).data('index'), 10);
            if (fbConfig.fields[idx]) {
                fbConfig.fields[idx].placeholder = $(this).val();
                fbConfig.fields[idx].label       = $(this).val();
            }
        });

        // Options change (Dropdown)
        $(document).on('input', '.simpbook-fb-options-input', function() {
            var idx = parseInt($(this).data('index'), 10);
            if (fbConfig.fields[idx]) {
                fbConfig.fields[idx].options = $(this).val();
            }
        });

        // Required toggle
        $(document).on('change', '.simpbook-fb-required-toggle', function() {
            var idx = parseInt($(this).data('index'), 10);
            if (fbConfig.fields[idx]) {
                fbConfig.fields[idx].required = $(this).is(':checked');
                var $label = $(this).closest('.simpbook-fb-field-actions').find('.simpbook-fb-req-label');
                $label.text(fbConfig.fields[idx].required ? '<?php esc_html_e('Required', 'simple-appointment-booking'); ?>' : '<?php esc_html_e('Optional', 'simple-appointment-booking'); ?>');
            }
        });

        // Delete field
        $(document).on('click', '.simpbook-fb-delete-btn', function() {
            var idx = parseInt($(this).data('index'), 10);
            if (fbConfig.fields[idx] && fbConfig.fields[idx].removable) {
                fbConfig.fields.splice(idx, 1);
                fbRender();
            }
        });

        // Open modal
        $(document).on('click', '.simpbook-fb-add-field', function() {
            fbPendingType = null;
            $('#simpbook-fb-modal').find('.simpbook-fb-type-option').removeClass('simpbook-fb-type-selected');
            $('#simpbook-fb-select-options-row').hide();
            $('#simpbook-fb-select-options-input').val('');
            $('#simpbook-fb-modal-add').prop('disabled', true);
            $('#simpbook-fb-modal').addClass('open').show();
        });

        // Select type option
        $(document).on('click', '.simpbook-fb-type-option', function() {
            $('#simpbook-fb-modal').find('.simpbook-fb-type-option').removeClass('simpbook-fb-type-selected');
            $(this).addClass('simpbook-fb-type-selected');
            fbPendingType = $(this).data('type');
            $('#simpbook-fb-select-options-row').toggle(fbPendingType === 'select');
            $('#simpbook-fb-modal-add').prop('disabled', false);
        });

        // Close modal
        $(document).on('click', '.simpbook-fb-modal-close, .simpbook-fb-modal-overlay', function(e) {
            if ($(e.target).is('.simpbook-fb-modal-overlay') || $(e.target).is('.simpbook-fb-modal-close')) {
                $('#simpbook-fb-modal').removeClass('open').hide();
            }
        });
        $(document).on('keydown', function(e) { if (e.key === 'Escape') { $('#simpbook-fb-modal').removeClass('open').hide(); } });

        // Add field
        $(document).on('click', '#simpbook-fb-modal-add', function() {
            if (!fbPendingType) { return; }
            fbCounter++;
            var newField = {
                key:         'simpbook_custom_' + Date.now() + '_' + fbCounter,
                type:        fbPendingType,
                label:       defaultPlaceholders[fbPendingType] || '',
                placeholder: defaultPlaceholders[fbPendingType] || '',
                required:    false,
                removable:   true
            };
            if (fbPendingType === 'select') {
                newField.options = $('#simpbook-fb-select-options-input').val();
            }
            fbConfig.fields.push(newField);
            fbRender();
            $('#simpbook-fb-modal').removeClass('open').hide();
        });

        // Save
        $(document).on('click', '#simpbook-fb-save', function() {
            var $btn = $(this);
            $btn.prop('disabled', true);
            $.post(fbAjaxUrl, {
                action: 'simpbook_save_form_config',
                nonce:  fbNonce,
                config: JSON.stringify(fbConfig)
            }, function(res) {
                $btn.prop('disabled', false);
                var $status = $('#simpbook-fb-save-status');
                if (res.success) {
                    $status.css('color', '#46b450').text('✓ <?php esc_html_e('Saved', 'simple-appointment-booking'); ?>').show().delay(3000).fadeOut();
                    fbLoadPreview();
                } else {
                    $status.css('color', '#dc3232').text('<?php esc_html_e('Error saving', 'simple-appointment-booking'); ?>').show().delay(3000).fadeOut();
                }
            });
        });

        // Live preview
        function fbLoadPreview() {
            var $iframe = $('#simpbook-fb-preview-iframe');
            if ($iframe.length === 0) { return; }
            var previewUrl = ajaxurl + '?action=simpbook_get_form_preview&fb_preview=1';
            $iframe.attr('src', previewUrl);
        }

        // Tab visible → load form builder + preview
        $('#tab-formular').on('change', function() {
            if ($(this).is(':checked')) {
                if (fbConfig.fields.length === 0) {
                    fbLoad();
                }
                fbLoadPreview();
            }
        });

        // If formular tab already active on load
        if ($('#tab-formular').is(':checked')) {
            fbLoad();
            setTimeout(fbLoadPreview, 300);
        }
    })(jQuery);
    </script>

</div>






