<?php
namespace OxygenApp\Views\Admin\Backgrounds;
if ( ! defined( 'ABSPATH' ) ) exit;


use OxygenApp\Views\BaseView;
use OxygenApp\Views\IView;
use OxygenApp\Models\Background;
use OxygenApp\Models\BackgroundCategory;


class BackgroundMetabox extends BaseView implements IView {

    public function render(): void {
        global $post;
        if ($post->post_type !== Background::POST_TYPE) {
            return;
        }
        

        $mainMetaKey = Background::POST_META_KEY;

        $type = get_post_meta($post->ID, 'type_' . Background::POST_META_KEY, true);
        $type = $type ? $type : 'image';

        $videoFileId = get_post_meta($post->ID, 'video_file_id_' . Background::POST_META_KEY, true);
        $video_filename = '';
        $video_attachment_url = '';
        if ($videoFileId && is_numeric($videoFileId)) {
            $video_attachment_url = wp_get_attachment_url($videoFileId);
            $video_filename = basename($video_attachment_url);
        }

        $videoIconId = get_post_meta($post->ID, 'video_icon_file_id_' . Background::POST_META_KEY, true);
        $video_icon_filename = '';
        $video_icon_url = '';
        $videoIconUrl = '';
        if ($videoIconId && is_numeric($videoIconId)) {
            $icon_file_url = wp_get_attachment_url($videoIconId);
            $video_icon_filename = basename($icon_file_url);
            $video_icon_url = wp_get_attachment_url($videoIconId);
            $videoIconUrl = wp_get_attachment_image_url($videoIconId);
        }

        $bkImageId = get_post_meta($post->ID, 'bk_image_file_id_' . Background::POST_META_KEY, true);
        $bk_image_filename = '';
        $attachment_bk_image_url = '';
        $bkIconUrl = '';
        if ($bkImageId && is_numeric($bkImageId)) {
            $icon_file_url = wp_get_attachment_url($bkImageId);
            $bk_image_filename = basename($icon_file_url);
            $attachment_bk_image_url = wp_get_attachment_url($bkImageId);
            $bkIconUrl = wp_get_attachment_image_url($bkImageId);
        }


        $background_credits_label = get_post_meta($post->ID, 'background_credits_label_' . Background::POST_META_KEY, true);
        $background_credits_url = get_post_meta($post->ID, 'background_credits_url_' . Background::POST_META_KEY, true);
        
        ?>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <label class="mb-2 mt-2"> <strong><?php esc_html_e('Choose background type', 'oxyleaf-app-working-and-relaxing-app'); ?></strong></label><br>
                    <div class="btn-group" role="group">
                        <input type="radio" class="btn-check choose-bck" name="<?php echo esc_attr("type_{$mainMetaKey}") ?>" id="option1" value="image" autocomplete="off" <?php echo $type === 'image' ? 'checked' : '' ?>>
                        <label class="btn btn-outline-primary" for="option1"><?php esc_html_e('Image background', 'oxyleaf-app-working-and-relaxing-app') ?></label>

                        <input type="radio" class="btn-check choose-bck" name="<?php echo esc_attr("type_{$mainMetaKey}") ?>" id="option2" value="video" autocomplete="off" <?php echo $type === 'video' ? 'checked' : '' ?>>
                        <label class="btn btn-outline-primary" for="option2"><?php esc_html_e('Video background', 'oxyleaf-app-working-and-relaxing-app') ?></label>
                    </div>
                </div>

                <div><hr></div>

                <div class="img-container <?php echo esc_attr($type !== 'image' ? 'hidden' : '') ?>">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-info" role="alert">
                                <?php esc_html_e("Recommended image size 1980x1080.", 'oxyleaf-app-working-and-relaxing-app') ?>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-4 mt-2">
                                <div><strong><?php esc_html_e('Upload image', 'oxyleaf-app-working-and-relaxing-app') ?></strong></div>
                                <div class="bk_image_filename_ui my-2 <?php echo esc_attr(!$bkImageId ? 'd-none' : '') ?>"><strong><?php esc_html_e('Filename: ', 'oxyleaf-app-working-and-relaxing-app') ?></strong> <a href="<?php echo esc_url($attachment_bk_image_url) ?>" target="_blank" class="bk_image_filename"><?php echo esc_html($bk_image_filename) ?></a></div>
                                <div class="bk_image_preview_ui hidden">
                                    <img class="icon_preview" style="max-width: 100px;" src="<?php echo esc_url($bkIconUrl) ?>" alt="">
                                </div>
                                <input id="bk_image_id" type="hidden" name="<?php echo esc_attr("bk_image_file_id_{$mainMetaKey}") ?>" value="<?php echo esc_attr($bkImageId) ?>">
                                <div class="my-3">
                                    <button id="upload_bk_image_btn" type="button" class="btn btn-outline-primary" style="margin-right: 10px;"><?php esc_html_e('Upload background image', 'oxyleaf-app-working-and-relaxing-app') ?></button>
                                    <button id="remove_bk_image_btn" type="button" class="btn btn-outline-danger <?php echo esc_attr(!$bkImageId ? 'd-none' : '') ?>"><?php esc_html_e('Remove background image', 'oxyleaf-app-working-and-relaxing-app') ?></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="video-container <?php echo esc_attr($type !== 'video' ? 'hidden' : '') ?>">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-info" role="alert">
                                <div><?php esc_html_e("Video file sizes can exceed your server's upload_max_filesize. If so, you can ask your hosting service to increase it.", 'oxyleaf-app-working-and-relaxing-app') ?></div>
                                <div><strong><?php esc_html_e('Note!', 'oxyleaf-app-working-and-relaxing-app') ?></strong> <?php esc_html_e("For better performance, you can offload large media files to AWS S3 using", 'oxyleaf-app-working-and-relaxing-app') ?> <a target="_blank" href="<?php echo esc_url('https://wordpress.org/plugins/amazon-s3-and-cloudfront') ?>"><?php esc_html_e('WP Offload Media Lite', 'oxyleaf-app-working-and-relaxing-app') ?></a>.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4 mt-2">
                                <div><strong><?php esc_html_e('Upload video (mp4) ', 'oxyleaf-app-working-and-relaxing-app') ?></strong></div>
                                <div class="video_file_name_ui <?php echo esc_attr(!$videoFileId ? 'd-none' : '') ?>"><strong><?php esc_html_e('Filename: ', 'oxyleaf-app-working-and-relaxing-app') ?></strong> <a href="<?php echo esc_url($video_attachment_url) ?>" target="_blank" class="video_file_name"><?php echo esc_html($video_filename) ?></a></div>
                                <input id="video_id" type="hidden" name="<?php echo esc_attr("video_file_id_{$mainMetaKey}") ?>" value="<?php echo esc_attr($videoFileId) ?>">
                                <div class="my-3">
                                    <button id="upload_video_btn" type="button" class="btn btn-outline-primary" style="margin-right: 10px;"><?php esc_html_e('Upload video', 'oxyleaf-app-working-and-relaxing-app') ?></button>
                                    <button id="remove_video_btn" type="button" class="btn btn-outline-danger <?php echo esc_attr(!$videoFileId ? 'd-none' : '') ?>"><?php esc_html_e('Remove video', 'oxyleaf-app-working-and-relaxing-app') ?></button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4 mt-2">
                                <div><strong><?php esc_html_e('Upload video preview image', 'oxyleaf-app-working-and-relaxing-app') ?></strong></div>
                                <div class="video_icon_filename_ui my-2 <?php echo esc_attr(!$videoIconId ? 'd-none' : '') ?>"><strong><?php esc_html_e('Filename: ', 'oxyleaf-app-working-and-relaxing-app') ?></strong> <a href="<?php echo esc_url($video_icon_url) ?>" target="_blank" class="video_icon_filename"><?php echo esc_html($video_icon_filename) ?></a></div>
                                <div class="video_icon_preview_ui">
                                    <img class="video_icon_preview" style="max-width: 100px;" src="<?php echo esc_url($videoIconUrl) ?>" alt="">
                                </div>
                                <input id="video_icon_id" type="hidden" name="<?php echo esc_attr("video_icon_file_id_{$mainMetaKey}") ?>" value="<?php echo esc_attr($videoIconId) ?>">
                                <div class="my-3">
                                    <button id="upload_video_icon_btn" type="button" class="btn btn-outline-primary" style="margin-right: 10px;"><?php esc_html_e('Upload image', 'oxyleaf-app-working-and-relaxing-app') ?></button>
                                    <button id="remove_video_icon_btn" type="button" class="btn btn-outline-danger <?php echo esc_attr(!$videoIconId ? 'd-none' : '') ?>"><?php esc_html_e('Remove image', 'oxyleaf-app-working-and-relaxing-app') ?></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                

                <div><hr></div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-4">
                            <?php
                            $backgroundCategories = BackgroundCategory::getAll();
                            $existingPosttermIds = wp_get_post_terms($post->ID, BackgroundCategory::TAX, [
                                'fields' => 'ids'
                            ]);
                            ?>
                            <div class="row">
                                <div class="col-md-6">

                                    <label class="form-label w-100"><strong><?php esc_html_e('Select background category', 'oxyleaf-app-working-and-relaxing-app') ?></strong></label>
                                    <select class="form-select playlist-select" name="<?php echo esc_attr("categories_{$mainMetaKey}[]") ?>">
                                        <option value=""><?php esc_html_e('-- Select a category --', 'oxyleaf-app-working-and-relaxing-app') ?></option>
                                        <?php if (is_array($backgroundCategories)): ?>
                                            <?php foreach ($backgroundCategories as $key => $categoryTerm): ?>
                                                <?php
                                                $isSelected = in_array($categoryTerm->term_id, $existingPosttermIds);
                                                ?>
                                                <option value="<?php echo esc_attr($categoryTerm->term_id) ?>" <?php echo $isSelected ? esc_attr('selected') : '' ?>><?php echo esc_html($categoryTerm->name) ?></option>
                                            <?php endforeach; ?>
                                        <?php endif; ?>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <?php if (is_array($backgroundCategories) && sizeof($backgroundCategories) === 0): ?>
                                        <div class="alert alert-warning" role="alert">
                                            <?php esc_html_e('There are no background categories added. To add a category, use the left main menu > Backgrounds > Background Categories.', 'oxyleaf-app-working-and-relaxing-app') ?>
                                        </div>
                                    <?php else: ?>
                                        <div class="alert alert-info" role="alert">
                                            <?php esc_html_e('Selecting a background category is just a way to filter the backgrounds shown in the frontend, remember you can re-order categories using this plugin:', 'oxyleaf-app-working-and-relaxing-app') ?> <a target="_blank" href="https://wordpress.org/plugins/custom-taxonomy-order-ne/"><?php esc_html_e("Custom Taxonomy Order", 'oxyleaf-app-working-and-relaxing-app') ?></a>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div><hr></div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-4">
                            <div class="alert alert-primary mt-2" role="alert">
                                <?php esc_html_e('Add background credits URL. The show backgrounds credits URLs need to be activated within the main settings.', 'oxyleaf-app-working-and-relaxing-app') ?>
                            </div>
                        </div>
                        <div class="mb-4">
                            <input style="width: 100%;" type="text" id="background_credits_label" name="<?php echo esc_attr("background_credits_label_{$mainMetaKey}") ?>" value="<?php echo esc_attr($background_credits_label) ?>"><br>
                            <label for="background_credits_label"> <?php esc_html_e('Background credits label', 'oxyleaf-app-working-and-relaxing-app'); ?></label><br>
                        </div>
                        <div>
                            <input style="width: 100%;" type="text" id="background_credits_url" name="<?php echo esc_attr("background_credits_url_{$mainMetaKey}") ?>" value="<?php echo esc_url($background_credits_url) ?>"><br>
                            <label for="background_credits_url"> <?php esc_html_e('Background credits URL', 'oxyleaf-app-working-and-relaxing-app'); ?></label><br>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <?php wp_nonce_field('save_custom_meta_nonce', 'custom_meta_nonce'); ?>
        <?php
    }
}