<?php

namespace MovieEngine\Admin\Design\Tabs;

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

class SeriesTab {

    public static function render($options = [], $standalone = true) {
        if (empty($options)) {
            $options = get_option('movie_engine_design_settings', []);
        }
?>
        <input type="hidden" name="movie_engine_design_settings[active_sub_tab]" value="series">
        <?php if ($standalone) : ?>
            <div class="movie-engine-settings-section">
                <div class="movie-engine-section-header">
                    <h2><?php esc_html_e('Single TV Series Page', 'cine-movie-engine'); ?></h2>
                    <p class="description"><?php esc_html_e('Customize the layout and elements of single TV series 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">
                    <input type="hidden" name="movie_engine_design_settings[series_single_layout]" value="fullwidth">

                    <div class="movie-engine-form-group">
                        <label for="series_container_type"><?php esc_html_e('Container Width', 'cine-movie-engine'); ?></label>
                        <select id="series_container_type" name="movie_engine_design_settings[series_container_type]" class="movie-engine-input">
                            <option value="container" <?php selected($options['series_container_type'] ?? 'container', 'container'); ?>><?php esc_html_e('Boxed Container', 'cine-movie-engine'); ?></option>
                            <option value="container-fluid" <?php selected($options['series_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[series_show_title]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_show_title]"
                                value="1"
                                <?php checked(isset($options['series_show_title']) ? $options['series_show_title'] : 1); ?>>
                            <span><?php esc_html_e('Show 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[series_show_comments]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_show_comments]"
                                value="1"
                                <?php checked(isset($options['series_show_comments']) ? $options['series_show_comments'] : 1); ?>>
                            <span><?php esc_html_e('Show User Reviews / Comments', 'cine-movie-engine'); ?></span>
                        </label>
                        <p class="movie-engine-help-text"><?php esc_html_e('All other sections (Episodes list, Cast, Related, etc.) are controlled in their individual section cards below.', 'cine-movie-engine'); ?></p>
                    </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[series_show_seasons]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_show_seasons]"
                                value="1"
                                <?php checked(isset($options['series_show_seasons']) ? $options['series_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="series_seasons_title"><?php esc_html_e('Section Title', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="series_seasons_title"
                            name="movie_engine_design_settings[series_seasons_title]"
                            value="<?php echo esc_attr($options['series_seasons_title'] ?? esc_html__('Episodes', 'cine-movie-engine')); ?>"
                            class="movie-engine-input">
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="series_seasons_layout"><?php esc_html_e('List Layout Style', 'cine-movie-engine'); ?></label>
                        <select id="series_seasons_layout" name="movie_engine_design_settings[series_seasons_layout]" class="movie-engine-input">
                            <option value="list" <?php selected($options['series_seasons_layout'] ?? 'list', 'list'); ?>><?php esc_html_e('Vertical List (Detailed)', 'cine-movie-engine'); ?></option>
                            <option value="grid" <?php selected($options['series_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="series_episodes_order"><?php esc_html_e('Episode Sort Order', 'cine-movie-engine'); ?></label>
                        <select id="series_episodes_order" name="movie_engine_design_settings[series_episodes_order]" class="movie-engine-input">
                            <option value="asc" <?php selected($options['series_episodes_order'] ?? 'asc', 'asc'); ?>><?php esc_html_e('Ascending (1, 2, 3...)', 'cine-movie-engine'); ?></option>
                            <option value="desc" <?php selected($options['series_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="series_episodes_count"><?php esc_html_e('Episodes Per Page / Load', 'cine-movie-engine'); ?></label>
                        <input type="number"
                            id="series_episodes_count"
                            name="movie_engine_design_settings[series_episodes_count]"
                            value="<?php echo esc_attr(!empty($options['series_episodes_count']) ? $options['series_episodes_count'] : 20); ?>"
                            class="movie-engine-input"
                            min="1"
                            max="100">
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="series_episodes_columns"><?php esc_html_e('Grid Columns (Desktop)', 'cine-movie-engine'); ?></label>
                        <?php $episodes_columns = $options['series_episodes_columns'] ?? 4; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="series_episodes_columns"
                                name="movie_engine_design_settings[series_episodes_columns]"
                                min="2" max="10"
                                value="<?php echo esc_attr($episodes_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('series_episodes_columns_output').value = this.value">
                            <output id="series_episodes_columns_output"><?php echo esc_html($episodes_columns); ?></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="series_episodes_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $episodes_columns_laptop = $options['series_episodes_columns_laptop'] ?? 4; ?>
                            <input type="number"
                                id="series_episodes_columns_laptop"
                                name="movie_engine_design_settings[series_episodes_columns_laptop]"
                                min="1" max="8"
                                value="<?php echo esc_attr($episodes_columns_laptop); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_episodes_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $episodes_columns_tablet = $options['series_episodes_columns_tablet'] ?? 3; ?>
                            <input type="number"
                                id="series_episodes_columns_tablet"
                                name="movie_engine_design_settings[series_episodes_columns_tablet]"
                                min="1" max="6"
                                value="<?php echo esc_attr($episodes_columns_tablet); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_episodes_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $episodes_columns_mobile = $options['series_episodes_columns_mobile'] ?? 1; ?>
                            <input type="number"
                                id="series_episodes_columns_mobile"
                                name="movie_engine_design_settings[series_episodes_columns_mobile]"
                                min="1" max="4"
                                value="<?php echo esc_attr($episodes_columns_mobile); ?>"
                                class="movie-engine-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="movie-engine-card">
                <div class="movie-engine-card-header">
                    <h3><span class="dashicons dashicons-groups"></span> <?php esc_html_e('Top Cast 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[series_show_cast]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_show_cast]"
                                value="1"
                                <?php checked(isset($options['series_show_cast']) ? $options['series_show_cast'] : 1); ?>>
                            <span><?php esc_html_e('Enable Top Cast Section', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

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

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

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

                    <div class="movie-engine-form-row">
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_cast_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $cast_columns_laptop = $options['series_cast_columns_laptop'] ?? 6; ?>
                            <input type="number"
                                id="series_cast_columns_laptop"
                                name="movie_engine_design_settings[series_cast_columns_laptop]"
                                min="1" max="12"
                                value="<?php echo esc_attr($cast_columns_laptop); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_cast_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $cast_columns_tablet = $options['series_cast_columns_tablet'] ?? 6; ?>
                            <input type="number"
                                id="series_cast_columns_tablet"
                                name="movie_engine_design_settings[series_cast_columns_tablet]"
                                min="1" max="10"
                                value="<?php echo esc_attr($cast_columns_tablet); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_cast_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $cast_columns_mobile = $options['series_cast_columns_mobile'] ?? 4; ?>
                            <input type="number"
                                id="series_cast_columns_mobile"
                                name="movie_engine_design_settings[series_cast_columns_mobile]"
                                min="1" max="8"
                                value="<?php echo esc_attr($cast_columns_mobile); ?>"
                                class="movie-engine-input">
                        </div>
                    </div>

                    <div class="movie-engine-form-group">
                        <label class="movie-engine-checkbox-label">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_cast_slider]"
                                value="1"
                                <?php checked(isset($options['series_cast_slider']) ? $options['series_cast_slider'] : 1, 1); ?>>
                            <?php esc_html_e('Enable Slider/Carousel', 'cine-movie-engine'); ?>
                        </label>
                    </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[series_show_trending]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_show_trending]"
                                value="1"
                                <?php checked(isset($options['series_show_trending']) ? $options['series_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="series_trending_title"><?php esc_html_e('Section Title', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="series_trending_title"
                            name="movie_engine_design_settings[series_trending_title]"
                            value="<?php echo esc_attr($options['series_trending_title'] ?? esc_html__('Trending Now', 'cine-movie-engine')); ?>"
                            class="movie-engine-input">
                    </div>

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

                    <div class="movie-engine-form-group">
                        <label for="series_trending_columns"><?php esc_html_e('Desktop Columns', 'cine-movie-engine'); ?></label>
                        <?php $trending_columns = $options['series_trending_columns'] ?? 6; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="series_trending_columns"
                                name="movie_engine_design_settings[series_trending_columns]"
                                min="2" max="15"
                                value="<?php echo esc_attr($trending_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('series_trending_columns_output').value = this.value">
                            <output id="series_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="series_trending_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $trending_columns_laptop = $options['series_trending_columns_laptop'] ?? 5; ?>
                            <input type="number"
                                id="series_trending_columns_laptop"
                                name="movie_engine_design_settings[series_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="series_trending_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $trending_columns_tablet = $options['series_trending_columns_tablet'] ?? 4; ?>
                            <input type="number"
                                id="series_trending_columns_tablet"
                                name="movie_engine_design_settings[series_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="series_trending_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $trending_columns_mobile = $options['series_trending_columns_mobile'] ?? 3; ?>
                            <input type="number"
                                id="series_trending_columns_mobile"
                                name="movie_engine_design_settings[series_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[series_trending_slider]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_trending_slider]"
                                value="1"
                                <?php checked(isset($options['series_trending_slider']) ? $options['series_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-calendar-alt"></span> <?php esc_html_e('New Releases 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[series_show_new_releases]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_show_new_releases]"
                                value="1"
                                <?php checked(isset($options['series_show_new_releases']) ? $options['series_show_new_releases'] : 1); ?>>
                            <span><?php esc_html_e('Enable New Releases Section (By Date)', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

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

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

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

                    <div class="movie-engine-form-row">
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_new_releases_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $new_releases_columns_laptop = $options['series_new_releases_columns_laptop'] ?? 5; ?>
                            <input type="number"
                                id="series_new_releases_columns_laptop"
                                name="movie_engine_design_settings[series_new_releases_columns_laptop]"
                                min="1" max="10"
                                value="<?php echo esc_attr($new_releases_columns_laptop); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_new_releases_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $new_releases_columns_tablet = $options['series_new_releases_columns_tablet'] ?? 4; ?>
                            <input type="number"
                                id="series_new_releases_columns_tablet"
                                name="movie_engine_design_settings[series_new_releases_columns_tablet]"
                                min="1" max="8"
                                value="<?php echo esc_attr($new_releases_columns_tablet); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_new_releases_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $new_releases_columns_mobile = $options['series_new_releases_columns_mobile'] ?? 3; ?>
                            <input type="number"
                                id="series_new_releases_columns_mobile"
                                name="movie_engine_design_settings[series_new_releases_columns_mobile]"
                                min="1" max="6"
                                value="<?php echo esc_attr($new_releases_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[series_new_releases_slider]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_new_releases_slider]"
                                value="1"
                                <?php checked(isset($options['series_new_releases_slider']) ? $options['series_new_releases_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-clock"></span> <?php esc_html_e('Upcoming 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[series_show_upcoming]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_show_upcoming]"
                                value="1"
                                <?php checked(isset($options['series_show_upcoming']) ? $options['series_show_upcoming'] : 1); ?>>
                            <span><?php esc_html_e('Enable Upcoming Section (By Release Date)', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

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

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

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

                    <div class="movie-engine-form-row">
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_upcoming_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $upcoming_columns_laptop = $options['series_upcoming_columns_laptop'] ?? 5; ?>
                            <input type="number"
                                id="series_upcoming_columns_laptop"
                                name="movie_engine_design_settings[series_upcoming_columns_laptop]"
                                min="1" max="10"
                                value="<?php echo esc_attr($upcoming_columns_laptop); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_upcoming_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $upcoming_columns_tablet = $options['series_upcoming_columns_tablet'] ?? 4; ?>
                            <input type="number"
                                id="series_upcoming_columns_tablet"
                                name="movie_engine_design_settings[series_upcoming_columns_tablet]"
                                min="1" max="8"
                                value="<?php echo esc_attr($upcoming_columns_tablet); ?>"
                                class="movie-engine-input">
                        </div>
                        <div class="movie-engine-form-group me-col-4">
                            <label for="series_upcoming_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $upcoming_columns_mobile = $options['series_upcoming_columns_mobile'] ?? 3; ?>
                            <input type="number"
                                id="series_upcoming_columns_mobile"
                                name="movie_engine_design_settings[series_upcoming_columns_mobile]"
                                min="1" max="6"
                                value="<?php echo esc_attr($upcoming_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[series_upcoming_slider]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_upcoming_slider]"
                                value="1"
                                <?php checked(isset($options['series_upcoming_slider']) ? $options['series_upcoming_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 Series 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[series_show_related]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[series_show_related]"
                                value="1"
                                <?php checked(isset($options['series_show_related']) ? $options['series_show_related'] : 1); ?>>
                            <span><?php esc_html_e('Enable Related Series Section', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

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

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

                    <div class="movie-engine-form-group">
                        <label for="series_related_columns"><?php esc_html_e('Desktop Columns', 'cine-movie-engine'); ?></label>
                        <?php $related_columns = $options['series_related_columns'] ?? 6; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="series_related_columns"
                                name="movie_engine_design_settings[series_related_columns]"
                                min="2" max="15"
                                value="<?php echo esc_attr($related_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('series_related_columns_output').value = this.value">
                            <output id="series_related_columns_output"><?php echo esc_html($related_columns); ?></output>
                        </div>
                    </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="series_sections_order"><?php esc_html_e('Section Display Order', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="series_sections_order"
                            name="movie_engine_design_settings[series_sections_order]"
                            value="<?php echo esc_attr($options['series_sections_order'] ?? 'ad_before,episodes,cast,trending,related,new_releases,upcoming'); ?>"
                            class="movie-engine-input"
                            placeholder="e.g. ad_before,episodes,cast,trending,related,new_releases,upcoming">
                        <p class="movie-engine-help-text"><?php esc_html_e('Comma-separated list: ad_before, episodes, cast, trending, related, new_releases, upcoming', '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[series_show_hero_like]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[series_show_hero_like]" value="1" <?php checked($options['series_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[series_show_hero_share]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[series_show_hero_share]" value="1" <?php checked($options['series_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[series_show_hero_playlist]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[series_show_hero_playlist]" value="1" <?php checked($options['series_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[series_show_hero_watchlist]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[series_show_hero_watchlist]" value="1" <?php checked($options['series_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="series_hero_overlay_opacity"><?php esc_html_e('Hero Backdrop Darkness (%)', 'cine-movie-engine'); ?></label>
                        <?php $hero_opacity = $options['series_hero_overlay_opacity'] ?? 70; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="series_hero_overlay_opacity"
                                name="movie_engine_design_settings[series_hero_overlay_opacity]"
                                min="0" max="100"
                                value="<?php echo esc_attr($hero_opacity); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('series_hero_opacity_output').value = this.value + '%'">
                            <output id="series_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_series"><?php esc_html_e('Reset Section to Defaults', 'cine-movie-engine'); ?></button>
                </div>
            </div>
        <?php endif; ?>
<?php
    }
}
