<?php

namespace MovieEngine\Admin\Design\Tabs;

if (! defined("ABSPATH")) {
    exit; // Exit if accessed directly
}

class EpisodeTab {

    public static function render($options = [], $standalone = true) {
        if (empty($options)) {
            $options = get_option('movie_engine_design_settings', []);
        }
?>
        <?php if ($standalone) : ?>
            <input type="hidden" name="movie_engine_design_settings[active_sub_tab]" value="episode">
            <div class="movie-engine-settings-section">
                <div class="movie-engine-section-header">
                    <h2><?php esc_html_e('Single Episode Page', 'cine-movie-engine'); ?></h2>
                    <p class="description"><?php esc_html_e('Customize the layout and elements of episode pages.', 'cine-movie-engine'); ?></p>
                </div>
            <?php endif; ?>

            <div class="movie-engine-card">
                <div class="movie-engine-card-header">
                    <h3><span class="dashicons dashicons-layout"></span> <?php esc_html_e('Layout Style', 'cine-movie-engine'); ?></h3>
                </div>
                <div class="movie-engine-card-body">
                    <div class="movie-engine-layout-selector">
                        <label class="movie-engine-layout-option">
                            <input type="radio" name="movie_engine_design_settings[episode_single_layout]" value="sidebar" <?php checked($options['episode_single_layout'] ?? 'sidebar', 'sidebar'); ?>>
                            <div class="movie-engine-layout-card">
                                <div class="movie-engine-layout-preview">
                                    <img src="<?php echo esc_url(MOVIE_ENGINE_URL . 'assets/images/sidebar-layout.png'); ?>" alt="Sidebar Layout">
                                    <div class="movie-engine-check-icon">
                                        <span class="dashicons dashicons-yes"></span>
                                    </div>
                                </div>
                                <div class="movie-engine-layout-name"><?php esc_html_e('Sidebar Layout', 'cine-movie-engine'); ?></div>
                            </div>
                        </label>
                        <label class="movie-engine-layout-option">
                            <input type="radio" name="movie_engine_design_settings[episode_single_layout]" value="fullwidth" <?php checked($options['episode_single_layout'] ?? 'sidebar', 'fullwidth'); ?>>
                            <div class="movie-engine-layout-card">
                                <div class="movie-engine-layout-preview">
                                    <img src="<?php echo esc_url(MOVIE_ENGINE_URL . 'assets/images/fullwidth-layout.png'); ?>" alt="Fullwidth Layout">
                                    <div class="movie-engine-check-icon">
                                        <span class="dashicons dashicons-yes"></span>
                                    </div>
                                </div>
                                <div class="movie-engine-layout-name"><?php esc_html_e('Full Width Layout', 'cine-movie-engine'); ?></div>
                            </div>
                        </label>
                    </div>

                    <div class="movie-engine-form-group" style="margin-top: 20px;">
                        <label for="episode_container_type"><?php esc_html_e('Container Width', 'cine-movie-engine'); ?></label>
                        <select id="episode_container_type" name="movie_engine_design_settings[episode_container_type]" class="movie-engine-input">
                            <option value="container" <?php selected($options['episode_container_type'] ?? 'container', 'container'); ?>><?php esc_html_e('Boxed Container', 'cine-movie-engine'); ?></option>
                            <option value="container-fluid" <?php selected($options['episode_container_type'] ?? 'container', 'container-fluid'); ?>><?php esc_html_e('Full Width Fluid(Default)', 'cine-movie-engine'); ?></option>
                        </select>
                        <p class="movie-engine-help-text"><?php esc_html_e('Choose between a boxed container or full-width fluid layout for content sections.', 'cine-movie-engine'); ?></p>
                    </div>
                </div>
            </div>

            <div class="movie-engine-card">
                <div class="movie-engine-card-header">
                    <h3><span class="dashicons dashicons-visibility"></span> <?php esc_html_e('Content Visibility', 'cine-movie-engine'); ?></h3>
                </div>
                <div class="movie-engine-card-body">
                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="hidden" name="movie_engine_design_settings[episode_show_title]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[episode_show_title]"
                                value="1"
                                <?php echo esc_attr(checked(isset($options['episode_show_title']) ? $options['episode_show_title'] : 1, 1, false)); ?>>
                            <span><?php esc_html_e('Show Episode Title & Metadata', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="hidden" name="movie_engine_design_settings[episode_show_sidebar]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[episode_show_sidebar]"
                                value="1"
                                <?php echo esc_attr(checked(isset($options['episode_show_sidebar']) ? $options['episode_show_sidebar'] : 1, 1, false)); ?>>
                            <span><?php esc_html_e('Show Season/Episode Sidebar', 'cine-movie-engine'); ?></span>
                        </label>
                        <p class="movie-engine-help-text"><?php esc_html_e('If disabled, the episode list will not be shown next to the player in Sidebar style.', 'cine-movie-engine'); ?></p>
                    </div>

                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="hidden" name="movie_engine_design_settings[episode_show_comments]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[episode_show_comments]"
                                value="1"
                                <?php echo esc_attr(checked(isset($options['episode_show_comments']) ? $options['episode_show_comments'] : 1, 1, false)); ?>>
                            <span><?php esc_html_e('Show Comments', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="hidden" name="movie_engine_design_settings[episode_show_views]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[episode_show_views]"
                                value="1"
                                <?php echo esc_attr(checked(isset($options['episode_show_views']) ? $options['episode_show_views'] : 1, 1, false)); ?>>
                            <span><?php esc_html_e('Show Views Count', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="movie-engine-card">
                <div class="movie-engine-card-header">
                    <h3><span class="dashicons dashicons-playlist-video"></span> <?php esc_html_e('Seasons & Episodes Section', 'cine-movie-engine'); ?></h3>
                </div>
                <div class="movie-engine-card-body">
                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="hidden" name="movie_engine_design_settings[episode_show_seasons]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[episode_show_seasons]"
                                value="1"
                                <?php checked(isset($options['episode_show_seasons']) ? $options['episode_show_seasons'] : 1); ?>>
                            <span><?php esc_html_e('Enable Seasons & Episodes List', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_seasons_title"><?php esc_html_e('Section Title', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="episode_seasons_title"
                            name="movie_engine_design_settings[episode_seasons_title]"
                            value="<?php echo esc_attr($options['episode_seasons_title'] ?? esc_html__('Episodes', 'cine-movie-engine')); ?>"
                            class="movie-engine-input">
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_seasons_layout"><?php esc_html_e('List Layout Style', 'cine-movie-engine'); ?></label>
                        <select id="episode_seasons_layout" name="movie_engine_design_settings[episode_seasons_layout]" class="movie-engine-input">
                            <option value="list" <?php selected($options['episode_seasons_layout'] ?? 'list', 'list'); ?>><?php esc_html_e('Vertical List (Detailed)', 'cine-movie-engine'); ?></option>
                            <option value="grid" <?php selected($options['episode_seasons_layout'] ?? 'list', 'grid'); ?>><?php esc_html_e('Grid (Thumbnail Only)', 'cine-movie-engine'); ?></option>
                        </select>
                        <p class="movie-engine-help-text"><?php esc_html_e('"Vertical List" is recommended for displaying plot summaries and metadata.', 'cine-movie-engine'); ?></p>
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_episodes_order"><?php esc_html_e('Episode Sort Order', 'cine-movie-engine'); ?></label>
                        <select id="episode_episodes_order" name="movie_engine_design_settings[episode_episodes_order]" class="movie-engine-input">
                            <option value="asc" <?php selected($options['episode_episodes_order'] ?? 'asc', 'asc'); ?>><?php esc_html_e('Ascending (1, 2, 3...)', 'cine-movie-engine'); ?></option>
                            <option value="desc" <?php selected($options['episode_episodes_order'] ?? 'asc', 'desc'); ?>><?php esc_html_e('Descending (10, 9, 8...)', 'cine-movie-engine'); ?></option>
                        </select>
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_episodes_count"><?php esc_html_e('Episodes Per Page / Load', 'cine-movie-engine'); ?></label>
                        <input type="number"
                            id="episode_episodes_count"
                            name="movie_engine_design_settings[episode_episodes_count]"
                            value="<?php echo esc_attr(!empty($options['episode_episodes_count']) ? $options['episode_episodes_count'] : 20); ?>"
                            class="movie-engine-input"
                            min="1"
                            max="100">
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_episodes_columns"><?php esc_html_e('Grid Columns (Desktop)', 'cine-movie-engine'); ?></label>
                        <?php $episodes_columns_eps = $options['episode_episodes_columns'] ?? 4; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="episode_episodes_columns"
                                name="movie_engine_design_settings[episode_episodes_columns]"
                                min="2" max="10"
                                value="<?php echo esc_attr($episodes_columns_eps); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('episode_episodes_columns_output').value = this.value">
                            <output id="episode_episodes_columns_output"><?php echo esc_html($episodes_columns_eps); ?></output>
                        </div>
                        <p class="movie-engine-help-text"><?php esc_html_e('Only applies if "Grid" layout is selected.', 'cine-movie-engine'); ?></p>
                    </div>

                    <div class="movie-engine-form-row">
                        <div class="movie-engine-form-group me-col-4">
                            <label for="episode_episodes_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $episodes_columns_laptop_eps = $options['episode_episodes_columns_laptop'] ?? 4; ?>
                            <input type="number"
                                id="episode_episodes_columns_laptop"
                                name="movie_engine_design_settings[episode_episodes_columns_laptop]"
                                min="1" max="8"
                                value="<?php echo esc_attr($episodes_columns_laptop_eps); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="episode_episodes_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $episodes_columns_tablet_eps = $options['episode_episodes_columns_tablet'] ?? 3; ?>
                            <input type="number"
                                id="episode_episodes_columns_tablet"
                                name="movie_engine_design_settings[episode_episodes_columns_tablet]"
                                min="1" max="6"
                                value="<?php echo esc_attr($episodes_columns_tablet_eps); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="episode_episodes_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $episodes_columns_mobile_eps = $options['episode_episodes_columns_mobile'] ?? 1; ?>
                            <input type="number"
                                id="episode_episodes_columns_mobile"
                                name="movie_engine_design_settings[episode_episodes_columns_mobile]"
                                min="1" max="4"
                                value="<?php echo esc_attr($episodes_columns_mobile_eps); ?>"
                                class="movie-engine-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="movie-engine-card">
                <div class="movie-engine-card-header">
                    <h3><span class="dashicons dashicons-chart-line"></span> <?php esc_html_e('Trending Section', 'cine-movie-engine'); ?></h3>
                </div>
                <div class="movie-engine-card-body">
                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="hidden" name="movie_engine_design_settings[episode_show_trending]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[episode_show_trending]"
                                value="1"
                                <?php checked(isset($options['episode_show_trending']) ? $options['episode_show_trending'] : 1); ?>>
                            <span><?php esc_html_e('Enable Trending Section (By Views)', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_trending_title"><?php esc_html_e('Section Title', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="episode_trending_title"
                            name="movie_engine_design_settings[episode_trending_title]"
                            value="<?php echo esc_attr($options['episode_trending_title'] ?? esc_html__('Trending Episodes', 'cine-movie-engine')); ?>"
                            class="movie-engine-input">
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_trending_count"><?php esc_html_e('Number of Items', 'cine-movie-engine'); ?></label>
                        <input type="number"
                            id="episode_trending_count"
                            name="movie_engine_design_settings[episode_trending_count]"
                            value="<?php echo esc_attr(!empty($options['episode_trending_count']) ? $options['episode_trending_count'] : 6); ?>"
                            class="movie-engine-input"
                            min="2"
                            max="20">
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_trending_columns"><?php esc_html_e('Desktop Columns', 'cine-movie-engine'); ?></label>
                        <?php $trending_columns = $options['episode_trending_columns'] ?? 6; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="episode_trending_columns"
                                name="movie_engine_design_settings[episode_trending_columns]"
                                min="2" max="15"
                                value="<?php echo esc_attr($trending_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('episode_trending_columns_output').value = this.value">
                            <output id="episode_trending_columns_output"><?php echo esc_html($trending_columns); ?></output>
                        </div>
                    </div>

                    <div class="movie-engine-form-row">
                        <div class="movie-engine-form-group me-col-4">
                            <label for="episode_trending_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $trending_columns_laptop = $options['episode_trending_columns_laptop'] ?? 5; ?>
                            <input type="number"
                                id="episode_trending_columns_laptop"
                                name="movie_engine_design_settings[episode_trending_columns_laptop]"
                                min="1" max="10"
                                value="<?php echo esc_attr($trending_columns_laptop); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="episode_trending_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $trending_columns_tablet = $options['episode_trending_columns_tablet'] ?? 4; ?>
                            <input type="number"
                                id="episode_trending_columns_tablet"
                                name="movie_engine_design_settings[episode_trending_columns_tablet]"
                                min="1" max="8"
                                value="<?php echo esc_attr($trending_columns_tablet); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="episode_trending_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $trending_columns_mobile = $options['episode_trending_columns_mobile'] ?? 3; ?>
                            <input type="number"
                                id="episode_trending_columns_mobile"
                                name="movie_engine_design_settings[episode_trending_columns_mobile]"
                                min="1" max="6"
                                value="<?php echo esc_attr($trending_columns_mobile); ?>"
                                class="movie-engine-input">
                        </div>
                    </div>

                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="hidden" name="movie_engine_design_settings[episode_trending_slider]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[episode_trending_slider]"
                                value="1"
                                <?php checked(isset($options['episode_trending_slider']) ? $options['episode_trending_slider'] : 1); ?>>
                            <span><?php esc_html_e('Enable Slider/Carousel', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="movie-engine-card">
                <div class="movie-engine-card-header">
                    <h3><span class="dashicons dashicons-admin-links"></span> <?php esc_html_e('Related Episodes Section', 'cine-movie-engine'); ?></h3>
                </div>
                <div class="movie-engine-card-body">
                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="hidden" name="movie_engine_design_settings[episode_show_related]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[episode_show_related]"
                                value="1"
                                <?php checked(isset($options['episode_show_related']) ? $options['episode_show_related'] : 1); ?>>
                            <span><?php esc_html_e('Enable Related Episodes Section', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_related_title"><?php esc_html_e('Section Title', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="episode_related_title"
                            name="movie_engine_design_settings[episode_related_title]"
                            value="<?php echo esc_attr($options['episode_related_title'] ?? esc_html__('More Episodes', 'cine-movie-engine')); ?>"
                            class="movie-engine-input">
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_related_count"><?php esc_html_e('Number of Items', 'cine-movie-engine'); ?></label>
                        <input type="number"
                            id="episode_related_count"
                            name="movie_engine_design_settings[episode_related_count]"
                            value="<?php echo esc_attr(!empty($options['episode_related_count']) ? $options['episode_related_count'] : 6); ?>"
                            class="movie-engine-input"
                            min="2"
                            max="20">
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_related_columns"><?php esc_html_e('Desktop Columns', 'cine-movie-engine'); ?></label>
                        <?php $related_columns = $options['episode_related_columns'] ?? 6; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="episode_related_columns"
                                name="movie_engine_design_settings[episode_related_columns]"
                                min="2" max="15"
                                value="<?php echo esc_attr($related_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('episode_related_columns_output').value = this.value">
                            <output id="episode_related_columns_output"><?php echo esc_html($related_columns); ?></output>
                        </div>
                    </div>

                    <div class="movie-engine-form-row">
                        <div class="movie-engine-form-group me-col-4">
                            <label for="episode_related_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $related_columns_laptop = $options['episode_related_columns_laptop'] ?? 5; ?>
                            <input type="number"
                                id="episode_related_columns_laptop"
                                name="movie_engine_design_settings[episode_related_columns_laptop]"
                                min="1" max="10"
                                value="<?php echo esc_attr($related_columns_laptop); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="episode_related_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $related_columns_tablet = $options['episode_related_columns_tablet'] ?? 4; ?>
                            <input type="number"
                                id="episode_related_columns_tablet"
                                name="movie_engine_design_settings[episode_related_columns_tablet]"
                                min="1" max="8"
                                value="<?php echo esc_attr($related_columns_tablet); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="episode_related_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $related_columns_mobile = $options['episode_related_columns_mobile'] ?? 3; ?>
                            <input type="number"
                                id="episode_related_columns_mobile"
                                name="movie_engine_design_settings[episode_related_columns_mobile]"
                                min="1" max="6"
                                value="<?php echo esc_attr($related_columns_mobile); ?>"
                                class="movie-engine-input">
                        </div>
                    </div>

                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="hidden" name="movie_engine_design_settings[episode_related_slider]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[episode_related_slider]"
                                value="1"
                                <?php checked(isset($options['episode_related_slider']) ? $options['episode_related_slider'] : 1); ?>>
                            <span><?php esc_html_e('Enable Slider/Carousel', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="movie-engine-card me-card-advanced">
                <div class="movie-engine-card-header">
                    <h3><span class="dashicons dashicons-admin-generic"></span> <?php esc_html_e('Advanced Layout & UI', 'cine-movie-engine'); ?></h3>
                </div>
                <div class="movie-engine-card-body">
                    <div class="movie-engine-form-group">
                        <label for="episode_sections_order"><?php esc_html_e('Section Display Order', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="episode_sections_order"
                            name="movie_engine_design_settings[episode_sections_order]"
                            value="<?php echo esc_attr($options['episode_sections_order'] ?? 'episodes,trending,related'); ?>"
                            class="movie-engine-input"
                            placeholder="e.g. episodes,trending,related">
                        <p class="movie-engine-help-text"><?php esc_html_e('Comma-separated list: episodes, trending, related', 'cine-movie-engine'); ?></p>
                    </div>

                    <div class="movie-engine-form-group">
                        <label><?php esc_html_e('Hero Action Buttons', 'cine-movie-engine'); ?></label>
                        <div class="movie-engine-checkbox-grid">
                            <label class="movie-engine-checkbox-label">
                                <input type="hidden" name="movie_engine_design_settings[episode_show_hero_like]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[episode_show_hero_like]" value="1" <?php checked($options['episode_show_hero_like'] ?? 1, 1); ?>>
                                <span><?php esc_html_e('Like Button', 'cine-movie-engine'); ?></span>
                            </label>
                            <label class="movie-engine-checkbox-label">
                                <input type="hidden" name="movie_engine_design_settings[episode_show_hero_share]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[episode_show_hero_share]" value="1" <?php checked($options['episode_show_hero_share'] ?? 1, 1); ?>>
                                <span><?php esc_html_e('Share Button', 'cine-movie-engine'); ?></span>
                            </label>
                            <label class="movie-engine-checkbox-label">
                                <input type="hidden" name="movie_engine_design_settings[episode_show_hero_playlist]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[episode_show_hero_playlist]" value="1" <?php checked($options['episode_show_hero_playlist'] ?? 1, 1); ?>>
                                <span><?php esc_html_e('Playlist Button', 'cine-movie-engine'); ?></span>
                            </label>
                            <label class="movie-engine-checkbox-label">
                                <input type="hidden" name="movie_engine_design_settings[episode_show_hero_watchlist]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[episode_show_hero_watchlist]" value="1" <?php checked($options['episode_show_hero_watchlist'] ?? 1, 1); ?>>
                                <span><?php esc_html_e('Watch Later', 'cine-movie-engine'); ?></span>
                            </label>
                        </div>
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="episode_hero_overlay_opacity"><?php esc_html_e('Hero Backdrop Darkness (%)', 'cine-movie-engine'); ?></label>
                        <?php $hero_opacity = $options['episode_hero_overlay_opacity'] ?? 70; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="episode_hero_overlay_opacity"
                                name="movie_engine_design_settings[episode_hero_overlay_opacity]"
                                min="0" max="100"
                                value="<?php echo esc_attr($hero_opacity); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('episode_hero_opacity_output').value = this.value + '%'">
                            <output id="episode_hero_opacity_output"><?php echo esc_html($hero_opacity); ?>%</output>
                        </div>
                    </div>
                </div>
            </div>

            <?php if ($standalone) : ?>
                <div class="movie-engine-form-actions">
                    <?php submit_button(esc_html__('Save Changes', 'cine-movie-engine'), 'primary me-btn-primary', 'submit', false); ?>
                    <button type="button" class="button button-link me-reset-section-btn" data-tab="design_episode"><?php esc_html_e('Reset Section to Defaults', 'cine-movie-engine'); ?></button>
                </div>
            </div>
        <?php endif; ?>
<?php
    }
}
