<?php

namespace MovieEngine\Admin\Design\Tabs;

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

class MovieTab {

    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="movie">
        <?php if ($standalone) : ?>
            <div class="movie-engine-settings-section">
                <div class="movie-engine-section-header">
                    <h2><?php esc_html_e('Single Movie Page', 'cine-movie-engine'); ?></h2>
                    <p class="description"><?php esc_html_e('Customize the layout and elements of single movie 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[movie_single_layout]" value="fullwidth">

                    <div class="movie-engine-form-group">
                        <label for="movie_container_type"><?php esc_html_e('Container Width', 'cine-movie-engine'); ?></label>
                        <select id="movie_container_type" name="movie_engine_design_settings[movie_container_type]" class="movie-engine-input">
                            <option value="container" <?php selected($options['movie_container_type'] ?? 'container', 'container'); ?>><?php esc_html_e('Boxed Container', 'cine-movie-engine'); ?></option>
                            <option value="container-fluid" <?php selected($options['movie_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[movie_show_title]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_show_title]"
                                value="1"
                                <?php checked(isset($options['movie_show_title']) ? $options['movie_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[movie_show_comments]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_show_comments]"
                                value="1"
                                <?php checked(isset($options['movie_show_comments']) ? $options['movie_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 (Cast, Related, Trending, 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-admin-links"></span> <?php esc_html_e('Related Movies 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[movie_show_related]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_show_related]"
                                value="1"
                                <?php checked(isset($options['movie_show_related']) ? $options['movie_show_related'] : 1); ?>>
                            <span><?php esc_html_e('Enable Related Movies Section', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

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

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

                    <div class="movie-engine-form-group">
                        <label for="movie_related_columns"><?php esc_html_e('Desktop Columns', 'cine-movie-engine'); ?></label>
                        <?php $related_columns = $options['movie_related_columns'] ?? 6; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="movie_related_columns"
                                name="movie_engine_design_settings[movie_related_columns]"
                                min="2" max="15"
                                value="<?php echo esc_attr($related_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('related_columns_output').value = this.value">
                            <output id="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="movie_related_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $related_columns_laptop = $options['movie_related_columns_laptop'] ?? 5; ?>
                            <input type="number"
                                id="movie_related_columns_laptop"
                                name="movie_engine_design_settings[movie_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="movie_related_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $related_columns_tablet = $options['movie_related_columns_tablet'] ?? 4; ?>
                            <input type="number"
                                id="movie_related_columns_tablet"
                                name="movie_engine_design_settings[movie_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="movie_related_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $related_columns_mobile = $options['movie_related_columns_mobile'] ?? 3; ?>
                            <input type="number"
                                id="movie_related_columns_mobile"
                                name="movie_engine_design_settings[movie_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[movie_related_slider]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_related_slider]"
                                value="1"
                                <?php checked(isset($options['movie_related_slider']) ? $options['movie_related_slider'] : 1); ?>>
                            <span><?php esc_html_e('Enable Slider/Carousel', 'cine-movie-engine'); ?></span>
                        </label>
                        <p class="movie-engine-help-text"><?php esc_html_e('Display items in a horizontal scrollable carousel instead of a grid.', 'cine-movie-engine'); ?></p>
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="movie_related_logic"><?php esc_html_e('Related Content Logic', 'cine-movie-engine'); ?></label>
                        <select id="movie_related_logic" name="movie_engine_design_settings[movie_related_logic]" class="movie-engine-input">
                            <option value="genre" <?php selected($options['movie_related_logic'] ?? 'genre', 'genre'); ?>><?php esc_html_e('By Same Genre', 'cine-movie-engine'); ?></option>
                            <option value="director" <?php selected($options['movie_related_logic'] ?? 'genre', 'director'); ?>><?php esc_html_e('By Same Director', 'cine-movie-engine'); ?></option>
                            <option value="cast" <?php selected($options['movie_related_logic'] ?? 'genre', 'cast'); ?>><?php esc_html_e('By Same Cast/Actor', 'cine-movie-engine'); ?></option>
                            <option value="tags" <?php selected($options['movie_related_logic'] ?? 'genre', 'tags'); ?>><?php esc_html_e('By Same Tags', 'cine-movie-engine'); ?></option>
                            <option value="year" <?php selected($options['movie_related_logic'] ?? 'genre', 'year'); ?>><?php esc_html_e('By Same Year', 'cine-movie-engine'); ?></option>
                            <option value="country" <?php selected($options['movie_related_logic'] ?? 'genre', 'country'); ?>><?php esc_html_e('By Same Country', 'cine-movie-engine'); ?></option>
                            <option value="language" <?php selected($options['movie_related_logic'] ?? 'genre', 'language'); ?>><?php esc_html_e('By Same Language', 'cine-movie-engine'); ?></option>
                            <option value="mixed" <?php selected($options['movie_related_logic'] ?? 'genre', 'mixed'); ?>><?php esc_html_e('Mixed (Genre + Director)', 'cine-movie-engine'); ?></option>
                        </select>
                    </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[movie_show_cast]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_show_cast]"
                                value="1"
                                <?php checked(isset($options['movie_show_cast']) ? $options['movie_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="movie_cast_title"><?php esc_html_e('Section Title', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="movie_cast_title"
                            name="movie_engine_design_settings[movie_cast_title]"
                            value="<?php echo esc_attr($options['movie_cast_title'] ?? esc_html__('Top Cast', 'cine-movie-engine')); ?>"
                            class="movie-engine-input">
                    </div>

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

                    <div class="movie-engine-form-group">
                        <label for="movie_cast_columns"><?php esc_html_e('Desktop Columns', 'cine-movie-engine'); ?></label>
                        <?php $cast_columns = $options['movie_cast_columns'] ?? 8; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="movie_cast_columns"
                                name="movie_engine_design_settings[movie_cast_columns]"
                                min="2" max="15"
                                value="<?php echo esc_attr($cast_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('cast_columns_output').value = this.value">
                            <output id="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="movie_cast_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $cast_columns_laptop = $options['movie_cast_columns_laptop'] ?? 6; ?>
                            <input type="number"
                                id="movie_cast_columns_laptop"
                                name="movie_engine_design_settings[movie_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="movie_cast_columns_tablet"><?php esc_html_e('Table', 'cine-movie-engine'); ?></label>
                            <?php $cast_columns_tablet = $options['movie_cast_columns_tablet'] ?? 6; ?>
                            <input type="number"
                                id="movie_cast_columns_tablet"
                                name="movie_engine_design_settings[movie_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="movie_cast_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $cast_columns_mobile = $options['movie_cast_columns_mobile'] ?? 4; ?>
                            <input type="number"
                                id="movie_cast_columns_mobile"
                                name="movie_engine_design_settings[movie_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[movie_cast_slider]"
                                value="1"
                                <?php checked(isset($options['movie_cast_slider']) ? $options['movie_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[movie_show_trending]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_show_trending]"
                                value="1"
                                <?php checked(isset($options['movie_show_trending']) ? $options['movie_show_trending'] : 0); ?>>
                            <span><?php esc_html_e('Enable Trending Section (By Views)', 'cine-movie-engine'); ?></span>
                        </label>
                    </div>

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

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

                    <div class="movie-engine-form-group">
                        <label for="movie_trending_columns"><?php esc_html_e('Desktop Columns', 'cine-movie-engine'); ?></label>
                        <?php $trending_columns = $options['movie_trending_columns'] ?? 6; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="movie_trending_columns"
                                name="movie_engine_design_settings[movie_trending_columns]"
                                min="2" max="15"
                                value="<?php echo esc_attr($trending_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('trending_columns_output').value = this.value">
                            <output id="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="movie_trending_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $trending_columns_laptop = $options['movie_trending_columns_laptop'] ?? 5; ?>
                            <input type="number"
                                id="movie_trending_columns_laptop"
                                name="movie_engine_design_settings[movie_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="movie_trending_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $trending_columns_tablet = $options['movie_trending_columns_tablet'] ?? 4; ?>
                            <input type="number"
                                id="movie_trending_columns_tablet"
                                name="movie_engine_design_settings[movie_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="movie_trending_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $trending_columns_mobile = $options['movie_trending_columns_mobile'] ?? 3; ?>
                            <input type="number"
                                id="movie_trending_columns_mobile"
                                name="movie_engine_design_settings[movie_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[movie_trending_slider]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_trending_slider]"
                                value="1"
                                <?php checked(isset($options['movie_trending_slider']) ? $options['movie_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[movie_show_new_releases]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_show_new_releases]"
                                value="1"
                                <?php checked(isset($options['movie_show_new_releases']) ? $options['movie_show_new_releases'] : 0); ?>>
                            <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="movie_new_releases_title"><?php esc_html_e('Section Title', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="movie_new_releases_title"
                            name="movie_engine_design_settings[movie_new_releases_title]"
                            value="<?php echo esc_attr($options['movie_new_releases_title'] ?? esc_html__('New Releases', 'cine-movie-engine')); ?>"
                            class="movie-engine-input">
                    </div>

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

                    <div class="movie-engine-form-group">
                        <label for="movie_new_releases_columns"><?php esc_html_e('Desktop Columns', 'cine-movie-engine'); ?></label>
                        <?php $new_releases_columns = $options['movie_new_releases_columns'] ?? 6; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="movie_new_releases_columns"
                                name="movie_engine_design_settings[movie_new_releases_columns]"
                                min="2" max="15"
                                value="<?php echo esc_attr($new_releases_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('new_releases_columns_output').value = this.value">
                            <output id="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="movie_new_releases_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $new_releases_columns_laptop = $options['movie_new_releases_columns_laptop'] ?? 5; ?>
                            <input type="number"
                                id="movie_new_releases_columns_laptop"
                                name="movie_engine_design_settings[movie_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="movie_new_releases_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $new_releases_columns_tablet = $options['movie_new_releases_columns_tablet'] ?? 4; ?>
                            <input type="number"
                                id="movie_new_releases_columns_tablet"
                                name="movie_engine_design_settings[movie_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="movie_new_releases_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $new_releases_columns_mobile = $options['movie_new_releases_columns_mobile'] ?? 3; ?>
                            <input type="number"
                                id="movie_new_releases_columns_mobile"
                                name="movie_engine_design_settings[movie_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[movie_new_releases_slider]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_new_releases_slider]"
                                value="1"
                                <?php checked(isset($options['movie_new_releases_slider']) ? $options['movie_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[movie_show_upcoming]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_show_upcoming]"
                                value="1"
                                <?php checked(isset($options['movie_show_upcoming']) ? $options['movie_show_upcoming'] : 0); ?>>
                            <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="movie_upcoming_title"><?php esc_html_e('Section Title', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="movie_upcoming_title"
                            name="movie_engine_design_settings[movie_upcoming_title]"
                            value="<?php echo esc_attr($options['movie_upcoming_title'] ?? esc_html__('Coming Soon', 'cine-movie-engine')); ?>"
                            class="movie-engine-input">
                    </div>

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

                    <div class="movie-engine-form-group">
                        <label for="movie_upcoming_columns"><?php esc_html_e('Desktop Columns', 'cine-movie-engine'); ?></label>
                        <?php $upcoming_columns = $options['movie_upcoming_columns'] ?? 6; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="movie_upcoming_columns"
                                name="movie_engine_design_settings[movie_upcoming_columns]"
                                min="2" max="15"
                                value="<?php echo esc_attr($upcoming_columns); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('upcoming_columns_output').value = this.value">
                            <output id="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="movie_upcoming_columns_laptop"><?php esc_html_e('Laptop', 'cine-movie-engine'); ?></label>
                            <?php $upcoming_columns_laptop = $options['movie_upcoming_columns_laptop'] ?? 5; ?>
                            <input type="number"
                                id="movie_upcoming_columns_laptop"
                                name="movie_engine_design_settings[movie_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="movie_upcoming_columns_tablet"><?php esc_html_e('Tablet', 'cine-movie-engine'); ?></label>
                            <?php $upcoming_columns_tablet = $options['movie_upcoming_columns_tablet'] ?? 4; ?>
                            <input type="number"
                                id="movie_upcoming_columns_tablet"
                                name="movie_engine_design_settings[movie_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="movie_upcoming_columns_mobile"><?php esc_html_e('Mobile', 'cine-movie-engine'); ?></label>
                            <?php $upcoming_columns_mobile = $options['movie_upcoming_columns_mobile'] ?? 3; ?>
                            <input type="number"
                                id="movie_upcoming_columns_mobile"
                                name="movie_engine_design_settings[movie_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[movie_upcoming_slider]" value="0">
                            <input type="checkbox"
                                name="movie_engine_design_settings[movie_upcoming_slider]"
                                value="1"
                                <?php checked(isset($options['movie_upcoming_slider']) ? $options['movie_upcoming_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="movie_sections_order"><?php esc_html_e('Section Display Order', 'cine-movie-engine'); ?></label>
                        <input type="text"
                            id="movie_sections_order"
                            name="movie_engine_design_settings[movie_sections_order]"
                            value="<?php echo esc_attr($options['movie_sections_order'] ?? 'trending,related,cast,new_releases,upcoming'); ?>"
                            class="movie-engine-input"
                            placeholder="e.g. trending,related,cast,new_releases,upcoming">
                        <p class="movie-engine-help-text"><?php esc_html_e('Comma-separated list: trending, related, cast, 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[show_hero_like]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[show_hero_like]" value="1" <?php checked($options['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[show_hero_share]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[show_hero_share]" value="1" <?php checked($options['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[show_hero_playlist]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[show_hero_playlist]" value="1" <?php checked($options['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[show_hero_watchlist]" value="0">
                                <input type="checkbox" name="movie_engine_design_settings[show_hero_watchlist]" value="1" <?php checked($options['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="movie_hero_overlay_opacity"><?php esc_html_e('Hero Backdrop Darkness (%)', 'cine-movie-engine'); ?></label>
                        <?php $hero_opacity = $options['movie_hero_overlay_opacity'] ?? 70; ?>
                        <div class="movie-engine-range-wrapper">
                            <input type="range"
                                id="movie_hero_overlay_opacity"
                                name="movie_engine_design_settings[movie_hero_overlay_opacity]"
                                min="0" max="100"
                                value="<?php echo esc_attr($hero_opacity); ?>"
                                class="movie-engine-range"
                                oninput="document.getElementById('hero_opacity_output').value = this.value + '%'">
                            <output id="hero_opacity_output"><?php echo esc_html($hero_opacity); ?>%</output>
                        </div>
                        <p class="movie-engine-help-text"><?php esc_html_e('Controls background darkness to make text readable.', 'cine-movie-engine'); ?></p>
                    </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_movie"><?php esc_html_e('Reset Section to Defaults', 'cine-movie-engine'); ?></button>
                </div>
            </div>
        <?php endif; ?>
<?php
    }
}
