<?php

namespace OxygenApp\Views\Frontend\Content;
if (!defined('ABSPATH')) exit;

use OxygenApp\Views\IView;
use OxygenApp\Views\BaseView;
use OxygenApp\Utils\LanguagesHelper;
use OxygenApp\Models\BackgroundCategory;

class Backgrounds extends BaseView implements IView
{
    public function render(): void
    {
        $select_background_popup_title = LanguagesHelper::getInstance()->getLangLabel('select_background_popup_title');

        $image_backgrounds = LanguagesHelper::getInstance()->getLangLabel('image_backgrounds');
        $video_backgrounds = LanguagesHelper::getInstance()->getLangLabel('video_backgrounds');
        $all_backgrounds_label = LanguagesHelper::getInstance()->getLangLabel('all_backgrounds_label');

        // Get all background categories
        $categories = BackgroundCategory::getAllPretty();

        ?>
        <div class="absolute inset-0 w-full h-full top-0 left-0 z-[10] p-4 white-popup hidden backgrounds-ui">
            <div class="absolute inset-0 w-full h-full top-0 left-0 z-10 bg-black/20 white-popup pupup-background-ui"></div>
            
            <div class="bg-black z-20 bg-opacity-20 backdrop-blur-lg p-5 pt-2 rounded-lg relative shadow-lg left-[0%] md:left-[100px] top-[10%] md:top-[20%] 
                        sm:max-w-[100%] md:max-w-[80%] max-h-[85%] md:max-h-[65%] flex flex-col opacity-0 transition-opacity duration-1000 ease-out popup-content new-playlist-ui">

                <div>
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-semibold text-white popup-title"><?php echo esc_html($select_background_popup_title) ?></h2>
                        <a href="#" class="text-white text-2xl leading-none close-btn">&times;</a>
                    </div>

                    
                    <div class="flex items-center">
                        <a href="#" class="mt-2 bg-black bg-opacity-30 text-gray-300 text-sm rounded-full px-4 py-1 transition duration-200 disabled:cursor-not-allowed active:bg-opacity-80 
                        inline-flex items-center gap-2 mr-2 choose-bg-btn choose_img_btn">
                        <?php echo esc_html($image_backgrounds) ?>
                        </a>

                        <a href="#" class="mt-2 bg-black bg-opacity-30 text-gray-300 text-sm rounded-full px-4 py-1 transition duration-200 disabled:cursor-not-allowed active:bg-opacity-80 
                        inline-flex items-center gap-2 mr-5 choose-bg-btn choose_video_btn">
                        <?php echo esc_html($video_backgrounds) ?>
                        </a>
                    </div>

                    <div class="flex items-center backgrounds-categories">
                        <a href="#" data-category-id="all" class="mt-2 bg-black bg-opacity-30 text-gray-300 text-xs rounded-full px-3 py-1 transition duration-200 disabled:cursor-not-allowed active:bg-opacity-80
                        inline-flex items-center gap-2 mr-2 category-filter-btn category-all-btn choose-background-btn-selected">
                        <?php echo esc_html($all_backgrounds_label) ?>
                        </a>
                        <?php foreach ($categories as $category): ?>
                            <a href="#" data-category-id="<?php echo esc_attr($category['term_id']) ?>" class="mt-2 bg-black bg-opacity-30 text-gray-300 text-xs rounded-full px-3 py-1 transition duration-200 disabled:cursor-not-allowed active:bg-opacity-80
                            inline-flex items-center gap-2 mr-2 category-filter-btn">
                            <?php echo esc_html($category['bkg_cat_name']) ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="flex-1 overflow-y-auto mt-2 scrollbar-custom">
                    <div class="pb-5 pt-4 content">
                        
                    </div>
                </div>
            </div>

        </div>
        <?php
    }
}