<?php

namespace MovieEngine\Admin\Player\Tabs;

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


class TrailerTab {

    public static function render($options) {
?>
        <input type="hidden" name="movie_engine_player_settings[active_sub_tab]" value="player_trailer">

        <div class="movie-engine-card">
            <div class="movie-engine-card-header">
                <h3><span class="fa-solid fa-film"></span> <?php esc_html_e('Background Trailer Player', '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_player_settings[movie_engine_trailer_enable]" value="0">
                        <input type="checkbox" name="movie_engine_player_settings[movie_engine_trailer_enable]" value="1" <?php checked($options['movie_engine_trailer_enable'] ?? 1, 1); ?>>
                        <span><?php esc_html_e('Enable Background Trailer', 'cine-movie-engine'); ?></span>
                    </label>
                    <p class="movie-engine-help-text"><?php esc_html_e('Show a cinematic background video on movie/series hero sections.', 'cine-movie-engine'); ?></p>
                </div>

                <div class="movie-engine-form-group">
                    <label class="movie-engine-checkbox-label">
                        <input type="hidden" name="movie_engine_player_settings[movie_engine_trailer_mobile]" value="0">
                        <input type="checkbox" name="movie_engine_player_settings[movie_engine_trailer_mobile]" value="1" <?php checked($options['movie_engine_trailer_mobile'] ?? 0, 1); ?>>
                        <span><?php esc_html_e('Enable on Mobile Devices', 'cine-movie-engine'); ?></span>
                    </label>
                    <p class="movie-engine-help-text"><?php esc_html_e('Mobile autoplay is often restricted by browsers to save data.', 'cine-movie-engine'); ?></p>
                </div>

                <div class="movie-engine-form-group">
                    <label class="movie-engine-checkbox-label">
                        <input type="hidden" name="movie_engine_player_settings[movie_engine_trailer_loop]" value="0">
                        <input type="checkbox" name="movie_engine_player_settings[movie_engine_trailer_loop]" value="1" <?php checked($options['movie_engine_trailer_loop'] ?? 1, 1); ?>>
                        <span><?php esc_html_e('Loop Video Automatically', 'cine-movie-engine'); ?></span>
                    </label>
                </div>

                <div class="movie-engine-form-group">
                    <label class="movie-engine-checkbox-label">
                        <input type="hidden" name="movie_engine_player_settings[movie_engine_trailer_pause_on_scroll]" value="0">
                        <input type="checkbox" name="movie_engine_player_settings[movie_engine_trailer_pause_on_scroll]" value="1" <?php checked($options['movie_engine_trailer_pause_on_scroll'] ?? 1, 1); ?>>
                        <span><?php esc_html_e('Pause Video on Scroll', 'cine-movie-engine'); ?></span>
                    </label>
                    <p class="movie-engine-help-text"><?php esc_html_e('Pauses the trailer when the user scrolls away to save CPU/GPU.', 'cine-movie-engine'); ?></p>
                </div>
            </div>
        </div>

        <div class="movie-engine-card">
            <div class="movie-engine-card-header">
                <h3><span class="fa-solid fa-palette"></span> <?php esc_html_e('Appearance & Effects', 'cine-movie-engine'); ?></h3>
            </div>
            <div class="movie-engine-card-body">
                <div class="movie-engine-form-group">
                    <label for="movie_engine_trailer_overlay_opacity"><?php esc_html_e('Overlay Opacity (%)', 'cine-movie-engine'); ?></label>
                    <?php $opacity = $options['movie_engine_trailer_overlay_opacity'] ?? 60; ?>
                    <div class="movie-engine-range-wrapper">
                        <input type="range" id="movie_engine_trailer_overlay_opacity" name="movie_engine_player_settings[movie_engine_trailer_overlay_opacity]" min="0" max="100" value="<?php echo esc_attr($opacity); ?>" class="movie-engine-range" oninput="document.getElementById('trailer_opacity_output').value = this.value + '%'">
                        <output id="trailer_opacity_output"><?php echo esc_html($opacity); ?>%</output>
                    </div>
                </div>

                <div class="movie-engine-form-group">
                    <label class="movie-engine-checkbox-label">
                        <input type="hidden" name="movie_engine_player_settings[movie_engine_trailer_blur]" value="0">
                        <input type="checkbox" name="movie_engine_player_settings[movie_engine_trailer_blur]" value="1" <?php checked($options['movie_engine_trailer_blur'] ?? 0, 1); ?>>
                        <span><?php esc_html_e('Apply Soft Blur Effect', 'cine-movie-engine'); ?></span>
                    </label>
                </div>

                <div class="movie-engine-form-group">
                    <label for="movie_engine_trailer_fade_in"><?php esc_html_e('Fade-in Duration (ms)', 'cine-movie-engine'); ?></label>
                    <input type="number" id="movie_engine_trailer_fade_in" name="movie_engine_player_settings[movie_engine_trailer_fade_in]" value="<?php echo esc_attr($options['movie_engine_trailer_fade_in'] ?? 800); ?>" class="movie-engine-input" step="100" min="0">
                </div>
            </div>
        </div>
<?php
    }
}
