Introduction

class TS_Settings_Config {
    public static function get_fields() {
        $repeater_templates = TS_Repeater_Handler::get_templates(); // Add this code
        
        return [
        ------------------------ Call repeater templates in here
        

'social_links' => [
    'type'         => 'repeater',
    'label'        => __('Social Links', 'nametheme'),
    'desc'         => __('Add your social media (icon and url).', 'nametheme'),
    'button_label' => __('Add Social Link', 'nametheme'),
    'item_title'   => __('Social Link', 'nametheme'),
    'fields'       => $repeater_templates['social_links']['fields'],
    'default'      => [
        [
            'icon' => 'bi-facebook',
            'url'  => 'https://facebook.com/yourpage',
        ],
        [
            'icon' => 'bi-twitter-x',
            'url'  => 'https://twitter.com/yourhandle',
        ],
    ],
],

$social_links = ts_get_option('social_links', []);
        
if (!empty($social_links) && is_array($social_links)) {
    echo '<div class="social-links-grid">';
    foreach ($social_links as $index => $social) {
        $icon = isset($social['icon']) ? $social['icon'] : '';
        $url = isset($social['url']) ? esc_url($social['url']) : '#';
        
        echo '<a href="' . $url . '" class="social-link" target="_blank" rel="noopener">';
        echo '<i class="bi ' . esc_attr($icon) . '"></i>';
        echo '</a>';
    }
    echo '</div>';
}

'text_links' => [
    'type'         => 'repeater',
    'label'        => __('Custom Links', 'nametheme'),
    'desc'         => __('Add text link (text and url).', 'nametheme'),
    'button_label' => __('Add Link', 'nametheme'),
    'max'          => 5,
    'fields'       => $repeater_templates['text_links']['fields'],
    'default'      => [
        [
            'text' => 'About Us',
            'url'  => 'https://yoursite.com/about',
        ],
        [
            'text' => 'Contact',
            'url'  => 'https://yoursite.com/contact',
        ],
    ],
],

$text_links = ts_get_option('text_links', []);

if (!empty($text_links)) {
    echo '<nav class="text-nav">';
    echo '<ul>';
    foreach ($text_links as $link) {
        $text = isset($link['text']) ? esc_html($link['text']) : '';
        $url = isset($link['url']) ? esc_url($link['url']) : '#';
        
        echo '<li><a href="' . $url . '">' . $text . '</a></li>';
    }
    echo '</ul>';
    echo '</nav>';
}

'icon_links' => [
    'type'         => 'repeater',
    'label'        => __('Useful Links', 'nametheme'),
    'desc'         => __('Add useful link (icon, text and url).', 'nametheme'),
    'button_label' => __('Add Link', 'nametheme'),
    'fields'       => $repeater_templates['icon_links']['fields'],
    'default'      => [
        [
            'icon' => 'bi-house-door',
            'text' => 'Home',
            'url'  => 'https://yoursite.com',
        ],
        [
            'icon' => 'bi-info-circle',
            'text' => 'About',
            'url'  => 'https://yoursite.com/about',
        ],
    ],
],

$icon_links = ts_get_option('icon_links', []);
        
if (!empty($icon_links)) {
    echo '<div class="icon-links-container">';
    foreach ($icon_links as $item) {
        $icon = isset($item['icon']) ? $item['icon'] : '';
        $text = isset($item['text']) ? esc_html($item['text']) : '';
        $url = isset($item['url']) ? esc_url($item['url']) : '#';
        ?>
        <div class="icon-link-item">
            <a href="<?php echo $url; ?>">
                <i class="bi <?php echo esc_attr($icon); ?>"></i>
                <span><?php echo $text; ?></span>
            </a>
        </div>
        <?php
    }
    echo '</div>';
}

'features' => [
    'type'         => 'repeater',
    'label'        => __('Features', 'nametheme'),
    'desc'         => __('Highlight your key features (icon, title and textarea).', 'nametheme'),
    'button_label' => __('Add Feature', 'nametheme'),
    'item_title'   => __('Feature', 'nametheme'),
    'fields'       => $repeater_templates['features']['fields'],
    'default'      => [
        [
            'icon'        => 'bi-speedometer2',
            'title'       => 'Custom Dashboards',
            'description' => 'Create personalized dashboards tailored to your needs. Visualize the metrics that matter most to your business with drag-and-drop widgets.',
        ],
        [
            'icon'        => 'bi-people',
            'title'       => 'Visitor Insights',
            'description' => 'Understand your audience better with detailed visitor demographics, behavior patterns, and engagement metrics to optimize your content strategy.',
        ],
    ],
],

$features = ts_get_option('features', []);
        
if (!empty($features)) {
    echo '<div class="features-list">';
    foreach ($features as $feature) {
        $icon = isset($feature['icon']) ? $feature['icon'] : '';
        $title = isset($feature['title']) ? esc_html($feature['title']) : '';
        $description = isset($feature['description']) ? esc_html($feature['description']) : '';
        ?>
        <div class="feature-item">
            <div class="feature-icon">
                <i class="bi <?php echo esc_attr($icon); ?>"></i>
            </div>
            <div class="feature-text">
                <h4><?php echo $title; ?></h4>
                <p><?php echo $description; ?></p>
            </div>
        </div>
        <?php
    }
    echo '</div>';
}

'services' => [
    'type'         => 'repeater',
    'label'        => __('Services', 'nametheme'),
    'desc'         => __('List your services (image, title, textarea and url).', 'nametheme'),
    'button_label' => __('Add Service', 'nametheme'),
    'item_title'   => __('Service', 'nametheme'),
    'fields'       => $repeater_templates['services']['fields'],
    'default'      => [
        [
            'title'       => 'Web Design',
            'description' => 'Create stunning, modern websites that capture your brand\'s essence and engage your audience with beautiful, responsive designs tailored to your needs.',
            'image'       => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/gallery1.jpg',
            ],
            'link'        => 'https://yoursite.com/web-design',
        ],
        [
            'title'       => 'Web Development',
            'description' => 'Build powerful, scalable web applications using the latest technologies. From simple websites to complex web platforms, we deliver solutions that work.',
            'image'       => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/gallery2.jpg',
            ],
            'link'        => 'https://yoursite.com/web-development',
        ],
    ]
],

$services = ts_get_option('services', []);
        
<?php if (is_array($services) && !empty($services)) : ?>
    <div class="grid-services">
        <?php foreach ($services as $service) :
            $title = trim($service['title'] ?? '');
            $desc  = trim($service['description'] ?? '');
            $link  = trim($service['link'] ?? '');
            $image = $service['image'] ?? '';
            $img   = is_array($image) ? ($image['url'] ?? '') : $image;
            if (!$title) continue;
        ?>
            <div class="service-card">
                <?php if ($img) : ?>
                    <div class="service-image">
                        <img
                            src="<?php echo esc_url($img); ?>"
                            alt="<?php echo esc_attr($title); ?>"
                            loading="lazy">
                    </div>
                <?php endif; ?>

                <div class="service-content">
                    <h3><?php echo esc_html($title); ?></h3>

                    <?php if ($desc) : ?>
                        <p><?php echo esc_html($desc); ?></p>
                    <?php endif; ?>

                    <?php if ($link) : ?>
                        <a href="<?php echo esc_url($link); ?>" class="link">
                            <?php esc_html_e('Learn More', 'nametheme'); ?>
                            <i class="bi bi-arrow-right"></i>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

'faqs' => [
    'type'         => 'repeater',
    'label'        => __('FAQs', 'nametheme'),
    'desc'         => __('Frequently asked questions (question and answer).', 'nametheme'),
    'button_label' => __('Add FAQ', 'nametheme'),
    'item_title'   => __('FAQ', 'nametheme'),
    'fields'       => $repeater_templates['faqs']['fields'],
    'default'      => [                         
        [
            'question' => 'How much does a website cost?',
            'answer'   => 'Website costs vary based on your requirements, features, and complexity. Basic websites start from $1,500, while custom e-commerce or complex applications can range from $5,000 to $20,000+. Contact us for a detailed quote tailored to your needs.',
        ],
        [
            'question' => 'Do you provide website maintenance?',
            'answer'   => 'Yes! We offer comprehensive maintenance packages including regular updates, security monitoring, backups, performance optimization, and content updates. Our plans start at $99/month and can be customized to your needs.',
        ],
    ],
],

$faqs = ts_get_option('faqs', []);
        
if (!empty($faqs)) {
    echo '<div class="faq-accordion">';
    foreach ($faqs as $index => $faq) {
        $question = isset($faq['question']) ? esc_html($faq['question']) : '';
        $answer = isset($faq['answer']) ? wpautop($faq['answer']) : '';
        ?>
        <div class="faq-item" data-index="<?php echo $index; ?>">
            <div class="faq-question" onclick="toggleFAQ(<?php echo $index; ?>)">
                <h3><?php echo $question; ?></h3>
                <span class="faq-toggle">+</span>
            </div>
            <div class="faq-answer" id="faq-answer-<?php echo $index; ?>" style="display: none;">
                <?php echo $answer; ?>
            </div>
        </div>
        <?php
    }
    echo '</div>';
}

'list_items' => [
    'type'         => 'repeater',
    'label'        => __('List Items', 'nametheme'),
    'desc'         => __('List items (only text).', 'nametheme'),
    'button_label' => __('Add Item', 'nametheme'),
    'fields'       => $repeater_templates['list_text']['fields'],
    'default'      => [
        [
            'title' => 'Track unlimited websites and domains',
        ],
        [
            'title' => 'Real-time visitor monitoring and alerts',
        ],
    ],
],

$text_list = ts_get_option('list_items', []);
        
if (!empty($text_list)) {
    echo '<ul class="styled-list">';
    foreach ($text_list as $item) {
        $title = isset($item['title']) ? esc_html($item['title']) : '';
        echo '<li>' . $title . '</li>';
    }
    echo '</ul>';
}

'simple_slider' => [
    'type'         => 'repeater',
    'label'        => __('Image Slider', 'nametheme'),
    'desc'         => __('Create a slider (image, title, link).', 'nametheme'),
    'button_label' => __('Add Slide', 'nametheme'),
    'fields'       => $repeater_templates['slider']['fields'],
    'default'      => [
        [
            'image' => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/slider11.jpg',
            ],
            'title' => 'Powerful Analytics Dashboard',
            'link'  => 'https://yoursite.com/features/dashboard',
        ],
        [
            'image' => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/slider22.jpg',
            ],
            'title' => 'Real-Time Visitor Tracking',
            'link'  => 'https://yoursite.com/features/realtime',
        ],
    ],
],

$slides = ts_get_option('simple_slider', []);
        
if (!empty($slides)) {
    echo '<div class="image-slider" id="mainSlider">';
    foreach ($slides as $index => $slide) {
        $image = isset($slide['image']) ? wp_get_attachment_image_url($slide['image'], 'full') : '';
        $title = isset($slide['title']) ? esc_html($slide['title']) : '';
        $link = isset($slide['link']) ? esc_url($slide['link']) : '';
        
        $active_class = ($index === 0) ? 'active' : '';
        ?>
        <div class="slide <?php echo $active_class; ?>">
            <?php if ($image): ?>
                <img src="<?php echo $image; ?>" alt="<?php echo $title; ?>">
            <?php endif; ?>
            <?php if ($title): ?>
                <div class="slide-caption">
                    <h3><?php echo $title; ?></h3>
                    <?php if ($link): ?>
                        <a href="<?php echo $link; ?>" class="slide-btn">View Details</a>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
        <?php
    }
    echo '</div>';
    
    // Slider navigation
    echo '<div class="slider-nav">';
    echo '<button onclick="prevSlide()" class="slider-prev">‹</button>';
    echo '<button onclick="nextSlide()" class="slider-next">›</button>';
    echo '</div>';
}

'hero_slides' => [
    'type'         => 'repeater',
    'label'        => __('Hero Slides', 'nametheme'),
    'desc'         => __('Create a hero slider (image, title, description,button text, button link).', 'nametheme'),
    'button_label' => __('Add Slide', 'nametheme'),
    'item_title'   => __('Slide', 'nametheme'),
    'fields'       => $repeater_templates['slider_advanced']['fields'],
    'default'      => [
        [
            'image'       => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/slider1.jpg',
            ],
            'title'       => 'Build Your Dream Website Today',
            'description' => 'Transform your vision into reality with stunning, responsive websites that captivate your audience and drive results. Let\'s create something extraordinary together.',
            'button_text' => 'Get Started',
            'button_link' => 'https://yoursite.com/contact',
        ],
        [
            'image'       => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/slider2.jpg',
            ],
            'title'       => 'Professional Web Design That Converts',
            'description' => 'Stand out from the competition with custom web designs that blend creativity, functionality, and user experience. Your success is our priority.',
            'button_text' => 'View Portfolio',
            'button_link' => 'https://yoursite.com/portfolio',
        ],
    ],
],

$hero_slides = ts_get_option('hero_slides', []);
        
if (!empty($hero_slides)) {
    echo '<div class="hero-slider">';
    foreach ($hero_slides as $index => $hero) {
        $image = isset($hero['image']) ? wp_get_attachment_image_url($hero['image'], 'full') : '';
        $title = isset($hero['title']) ? esc_html($hero['title']) : '';
        $description = isset($hero['description']) ? esc_html($hero['description']) : '';
        $button_text = isset($hero['button_text']) ? esc_html($hero['button_text']) : 'Learn More';
        $button_link = isset($hero['button_link']) ? esc_url($hero['button_link']) : '#';
        
        $active = ($index === 0) ? 'active' : '';
        ?>
        <div class="hero-slide <?php echo $active; ?>" style="background-image: url('<?php echo $image; ?>');">
            <div class="hero-content">
                <h2><?php echo $title; ?></h2>
                <p><?php echo $description; ?></p>
                <a href="<?php echo $button_link; ?>" class="hero-btn"><?php echo $button_text; ?></a>
            </div>
        </div>
        <?php
    }
    echo '</div>';
}

'gallery' => [
    'type'         => 'repeater',
    'label'        => __('Gallery', 'nametheme'),
    'desc'         => __('Create an image gallery (image, title, description).', 'nametheme'),
    'button_label' => __('Add Image', 'nametheme'),
    'item_title'   => __('Gallery Item', 'nametheme'),
    'fields'       => $repeater_templates['gallery']['fields'],
    'default'      => [
        [
            'image' => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/gallery-analytics-1.jpg',
            ],
            'title'       => 'Interactive Dashboard',
            'description' => 'Visualize your data with customizable widgets and real-time charts that update instantly.',
        ],
        [
            'image' => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/gallery-analytics-2.jpg',
            ],
            'title'       => 'Traffic Sources',
            'description' => 'Discover where your visitors come from with detailed referral and campaign tracking.',
        ],
    ],
],

$gallery = ts_get_option('gallery', []);
        
if (!empty($gallery)) {
    echo '<div class="image-gallery">';
    foreach ($gallery as $item) {
        $image = isset($item['image']) ? wp_get_attachment_image_url($item['image'], 'large') : '';
        $title = isset($item['title']) ? esc_html($item['title']) : '';
        $description = isset($item['description']) ? esc_html($item['description']) : '';
        ?>
        <div class="gallery-item">
            <?php if ($image): ?>
                <img src="<?php echo $image; ?>" alt="<?php echo $title; ?>" loading="lazy">
            <?php endif; ?>
            <?php if ($title || $description): ?>
                <div class="gallery-caption">
                    <?php if ($title): ?>
                        <h4><?php echo $title; ?></h4>
                    <?php endif; ?>
                    <?php if ($description): ?>
                        <p><?php echo $description; ?></p>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
        <?php
    }
    echo '</div>';
}

'team_members' => [
    'type'         => 'repeater',
    'label'        => __('Team Members', 'nametheme'),
    'desc'         => __('Add your team members (image, name, job, description).', 'nametheme'),
    'button_label' => __('Add Member', 'nametheme'),
    'item_title'   => __('Team Member', 'nametheme'),
    'fields'       => $repeater_templates['team']['fields'],
    'default'      => [
        [
            'image' => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/team-member-1.jpg',
            ],
            'name'        => 'Sarah Mitchell',
            'job'         => 'Creative Director',
            'description' => 'With over 10 years of experience in web design, Sarah leads our creative team in crafting stunning digital experiences. Her expertise in brand identity and user-centered design has helped numerous clients achieve their online goals.',
        ],
        [
            'image' => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/team-member-2.jpg',
            ],
            'name'        => 'Michael Chen',
            'job'         => 'Senior Web Developer',
            'description' => 'Michael is our technical wizard who brings designs to life with clean, efficient code. Specializing in modern web technologies and custom WordPress development, he ensures every website performs flawlessly.',
        ],
    ],
],

$team_members = ts_get_option('team_members', []);
        
if (!empty($team_members)) {
    echo '<div class="team-grid">';
    foreach ($team_members as $member) {
        $image = isset($member['image']) ? wp_get_attachment_image_url($member['image'], 'medium') : '';
        $name = isset($member['name']) ? esc_html($member['name']) : '';
        $job = isset($member['job']) ? esc_html($member['job']) : '';
        $description = isset($member['description']) ? wpautop($member['description']) : '';
        ?>
        <div class="team-member">
            <?php if ($image): ?>
                <div class="team-member-image">
                    <img src="<?php echo $image; ?>" alt="<?php echo $name; ?>">
                </div>
            <?php endif; ?>
            <div class="team-member-info">
                <h3><?php echo $name; ?></h3>
                <?php if ($job): ?>
                    <p class="team-member-position"><?php echo $job; ?></p>
                <?php endif; ?>
                <?php if ($description): ?>
                    <div class="team-member-bio">
                        <?php echo $description; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <?php
    }
    echo '</div>';
}

'testimonials' => [
    'type'         => 'repeater',
    'label'        => __('Testimonials', 'nametheme'),
    'desc'         => __('Customer reviews and testimonials (image, name, job, rating and review).', 'nametheme'),
    'button_label' => __('Add Testimonial', 'nametheme'),
    'item_title'   => __('Testimonial', 'nametheme'),
    'fields'       => $repeater_templates['reviews']['fields'],
    'default'      => [
        [
            'image' => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/testimonial-1.jpg',
            ],
            'name'   => 'Jennifer Williams',
            'job'    => 'CEO, GreenLeaf Organic',
            'rating' => '5',
            'review' => 'Outstanding work! The team transformed our outdated website into a modern, user-friendly platform that has significantly increased our online sales. Their attention to detail and commitment to our vision exceeded all expectations. Highly recommended!',
        ],
        [
            'image' => [
                'id'  => 0,
                'url' => get_template_directory_uri() . '/src/img/testimonial-2.jpg',
            ],
            'name'   => 'Robert Anderson',
            'job'    => 'Founder, TechStart Solutions',
            'rating' => '5',
            'review' => 'Professional, creative, and incredibly responsive. They delivered our complex e-commerce platform on time and within budget. The result is a beautiful, fast-loading website that our customers love. Best investment we\'ve made for our business!',
        ],
    ],
],

$testimonials = ts_get_option('testimonials', []);
        
if (!empty($testimonials)) {
    echo '<div class="testimonials-grid">';
    foreach ($testimonials as $testimonial) {
        $image = isset($testimonial['image']) ? wp_get_attachment_image_url($testimonial['image'], 'thumbnail') : '';
        $name = isset($testimonial['name']) ? esc_html($testimonial['name']) : '';
        $job = isset($testimonial['job']) ? esc_html($testimonial['job']) : '';
        $rating = isset($testimonial['rating']) ? intval($testimonial['rating']) : 5;
        $review = isset($testimonial['review']) ? esc_html($testimonial['review']) : '';
        ?>
        <div class="testimonial-card">
            <div class="testimonial-header">
                <?php if ($image): ?>
                    <img src="<?php echo $image; ?>" alt="<?php echo $name; ?>" class="testimonial-avatar">
                <?php endif; ?>
                <div class="testimonial-info">
                    <h4><?php echo $name; ?></h4>
                    <?php if ($job): ?>
                        <p class="testimonial-job"><?php echo $job; ?></p>
                    <?php endif; ?>
                </div>
            </div>
            <div class="testimonial-rating">
                <?php
                // Display star rating
                for ($i = 1; $i <= 5; $i++) {
                    if ($i <= $rating) {
                        echo '<span class="star filled">★</span>';
                    } else {
                        echo '<span class="star">☆</span>';
                    }
                }
                ?>
            </div>
            <div class="testimonial-content">
                <p>"<?php echo $review; ?>"</p>
            </div>
        </div>
        <?php
    }
    echo '</div>';
}

'my_repeater' => [
    'type'         => 'repeater',
    'label'        => __('My Custom Repeater', 'themename'),
    'desc'         => __('Optional description text.', 'themename'),
    'button_label' => __('Add Item', 'themename'),
    'min'          => 1,    // Minimum items (optional)
    'max'          => 10,   // Maximum items (optional)
    'collapsible'  => true, // Allow collapse/expand (default: true)
    'fields'       => [
        // Your fields here...
    ],
],

'pricing_plans' => [
    'type'         => 'repeater',
    'label'        => __('Pricing Plans', 'themename'),
    'button_label' => __('Add Plan', 'themename'),
    'max'          => 4,
    'fields'       => [
        'name' => [
            'type'  => 'text',
            'label' => __('Plan Name', 'themename'),
        ],
        'price' => [
            'type'  => 'text',
            'label' => __('Price', 'themename'),
            'placeholder' => '$29/month',
        ],
        'description' => [
            'type'  => 'textarea',
            'label' => __('Description', 'themename'),
            'rows'  => 2,
        ],
        'features' => [
            'type'  => 'textarea',
            'label' => __('Features (one per line)', 'themename'),
            'rows'  => 5,
        ],
        'btn_text' => [
            'type'    => 'text',
            'label'   => __('Button Text', 'themename'),
            'default' => 'Get Started',
        ],
        'btn_link' => [
            'type'  => 'url',
            'label' => __('Button Link', 'themename'),
        ],
        'is_featured' => [
            'type'         => 'switch',
            'label'        => __('Featured', 'themename'),
            'switch_label' => __('Highlight this plan', 'themename'),
        ],
        'badge' => [
            'type'        => 'text',
            'label'       => __('Badge Text', 'themename'),
            'placeholder' => 'Most Popular',
        ],
    ],
],

'process_steps' => [
    'type'         => 'repeater',
    'label'        => __('Process Steps', 'themename'),
    'button_label' => __('Add Step', 'themename'),
    'fields'       => [
        'number' => [
            'type'    => 'text',
            'label'   => __('Step Number', 'themename'),
            'default' => '01',
        ],
        'icon' => [
            'type'    => 'icon',
            'label'   => __('Icon', 'themename'),
            'default' => 'bi-1-circle',
        ],
        'title' => [
            'type'  => 'text',
            'label' => __('Title', 'themename'),
        ],
        'description' => [
            'type'  => 'textarea',
            'label' => __('Description', 'themename'),
            'rows'  => 3,
        ],
        'image' => [
            'type'  => 'media',
            'label' => __('Image (optional)', 'themename'),
        ],
    ],
],

'client_logos' => [
    'type'         => 'repeater',
    'label'        => __('Client Logos', 'themename'),
    'button_label' => __('Add Client', 'themename'),
    'fields'       => [
        'logo' => [
            'type'  => 'media',
            'label' => __('Logo', 'themename'),
        ],
        'name' => [
            'type'  => 'text',
            'label' => __('Company Name', 'themename'),
        ],
        'url' => [
            'type'        => 'url',
            'label'       => __('Website (optional)', 'themename'),
            'placeholder' => 'https://',
        ],
    ],
],

'locations' => [
    'type'         => 'repeater',
    'label'        => __('Office Locations', 'themename'),
    'button_label' => __('Add Location', 'themename'),
    'fields'       => [
        'city' => [
            'type'  => 'text',
            'label' => __('City', 'themename'),
        ],
        'address' => [
            'type'  => 'textarea',
            'label' => __('Full Address', 'themename'),
            'rows'  => 2,
        ],
        'phone' => [
            'type'  => 'tel',
            'label' => __('Phone', 'themename'),
        ],
        'email' => [
            'type'  => 'email',
            'label' => __('Email', 'themename'),
        ],
        'map_embed' => [
            'type'        => 'textarea',
            'label'       => __('Google Maps Embed', 'themename'),
            'desc'        => __('Paste iframe code from Google Maps', 'themename'),
            'rows'        => 3,
        ],
        'hours' => [
            'type'  => 'textarea',
            'label' => __('Business Hours', 'themename'),
            'rows'  => 3,
        ],
    ],
],

'videos' => [
    'type'         => 'repeater',
    'label'        => __('Video Gallery', 'themename'),
    'button_label' => __('Add Video', 'themename'),
    'fields'       => [
        'thumbnail' => ['type' => 'media', 'label' => 'Thumbnail'],
        'title'     => ['type' => 'text', 'label' => 'Title'],
        'video_url' => ['type' => 'url', 'label' => 'Video URL', 'placeholder' => 'YouTube or Vimeo URL'],
        'duration'  => ['type' => 'text', 'label' => 'Duration', 'placeholder' => '5:30'],
    ],
],

// Get repeater data (returns array)
$items = ts_get_option('my_repeater', []);

// Always provide empty array as default
// This prevents errors when no items exist

// Check if repeater has items
if (ts_has_repeater('testimonials')) {
    // Render testimonials section
}

// Useful for conditional section display
<?php if (ts_has_repeater('faqs')) : ?>
    <section class="faq-section">
        <h2>Frequently Asked Questions</h2>
        <!-- FAQ content -->
    </section>
<?php endif; ?>

// Loop through repeater items
foreach (ts_loop_repeater('services') as $index => $service) {
    echo '<div class="service-' . $index . '">';
    echo esc_html($service['title']);
    echo '</div>';
}

// With key access
foreach (ts_loop_repeater('team_members') as $member) {
    $name  = $member['name'] ?? '';
    $photo = $member['photo']['url'] ?? '';
    $bio   = $member['bio'] ?? '';
}

// Get count
$total = ts_count_repeater('gallery');

// Use for grid columns
$columns = min(ts_count_repeater('features'), 4);
echo '<div class="grid grid-cols-' . $columns . '">';

// Conditional based on count
if (ts_count_repeater('testimonials') >= 3) {
    // Use slider for 3+ items
} else {
    // Use grid for fewer items
}

foreach (ts_loop_repeater('team_members') as $member) {
    // Get thumbnail size
    $thumb = ts_get_repeater_image($member, 'photo', 'thumbnail');
    
    // Get medium size
    $medium = ts_get_repeater_image($member, 'photo', 'medium');
    
    // Get full size (default)
    $full = ts_get_repeater_image($member, 'photo', 'full');
    
    // Get custom size
    $custom = ts_get_repeater_image($member, 'photo', 'custom-size');
    
    if ($thumb) {
        echo '<img src="' . esc_url($thumb) . '" alt="">';
    }
}

foreach (ts_loop_repeater('features') as $feature) {
    // Render icon with default class
    echo ts_render_repeater_icon($feature, 'icon');
    // Output: <i class="bi bi-check-circle"></i>
    
    // With custom class
    echo ts_render_repeater_icon($feature, 'icon', 'feature-icon text-2xl');
    // Output: <i class="bi bi-check-circle feature-icon text-2xl"></i>
}

foreach (ts_loop_repeater('pricing_plans') as $plan) {
    // Get with default fallback
    $name     = ts_get_repeater_field($plan, 'name', 'Untitled');
    $price    = ts_get_repeater_field($plan, 'price', '$0');
    $featured = ts_get_repeater_field($plan, 'is_featured', false);
    $btn_text = ts_get_repeater_field($plan, 'btn_text', 'Select Plan');
}

<?php if (ts_has_repeater('pricing_plans')) : ?>
<section class="pricing-section">
    <div class="pricing-grid">
        <?php foreach (ts_loop_repeater('pricing_plans') as $plan) : 
            $name        = ts_get_repeater_field($plan, 'name', 'Plan');
            $price       = ts_get_repeater_field($plan, 'price', '$0');
            $description = ts_get_repeater_field($plan, 'description', '');
            $features    = ts_get_repeater_field($plan, 'features', '');
            $btn_text    = ts_get_repeater_field($plan, 'btn_text', 'Get Started');
            $btn_link    = ts_get_repeater_field($plan, 'btn_link', '#');
            $is_featured = ts_get_repeater_field($plan, 'is_featured', false);
            $badge       = ts_get_repeater_field($plan, 'badge', '');
            
            // Convert features text to array
            $feature_list = array_filter(explode("\n", $features));
        ?>
            <div class="pricing-card <?php echo $is_featured ? 'is-featured' : ''; ?>">
                <?php if ($badge) : ?>
                    <span class="badge"><?php echo esc_html($badge); ?></span>
                <?php endif; ?>
                
                <h3 class="plan-name"><?php echo esc_html($name); ?></h3>
                <div class="plan-price"><?php echo esc_html($price); ?></div>
                
                <?php if ($description) : ?>
                    <p class="plan-desc"><?php echo esc_html($description); ?></p>
                <?php endif; ?>
                
                <?php if (!empty($feature_list)) : ?>
                    <ul class="plan-features">
                        <?php foreach ($feature_list as $feature) : ?>
                            <li><i class="bi bi-check"></i> <?php echo esc_html(trim($feature)); ?></li>
                        <?php endforeach; ?>
                    </ul>
                <?php endif; ?>
                
                <a href="<?php echo esc_url($btn_link); ?>" class="plan-btn">
                    <?php echo esc_html($btn_text); ?>
                </a>
            </div>
        <?php endforeach; ?>
    </div>
</section>
<?php endif; ?>

<?php if (ts_has_repeater('process_steps')) : ?>
<section class="process-section">
    <div class="process-timeline">
        <?php 
        $steps = ts_loop_repeater('process_steps');
        $total = count($steps);
        
        foreach ($steps as $index => $step) : 
            $number = ts_get_repeater_field($step, 'number', sprintf('%02d', $index + 1));
            $title  = ts_get_repeater_field($step, 'title', '');
            $desc   = ts_get_repeater_field($step, 'description', '');
            $image  = ts_get_repeater_image($step, 'image', 'medium');
            $is_last = ($index === $total - 1);
        ?>
            <div class="process-step <?php echo $is_last ? 'is-last' : ''; ?>">
                <div class="step-number">
                    <span><?php echo esc_html($number); ?></span>
                </div>
                
                <div class="step-content">
                    <h3><?php echo esc_html($title); ?></h3>
                    <p><?php echo esc_html($desc); ?></p>
                    
                    <?php if ($image) : ?>
                        <img src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($title); ?>">
                    <?php endif; ?>
                </div>
                
                <?php if (!$is_last) : ?>
                    <div class="step-connector"></div>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    </div>
</section>
<?php endif; ?>

// Basic usage
$title = ts_get_option('hero_title');

// With default value
$color = ts_get_option('primary_color', '#3b82f6');

// Check if empty
if ($logo = ts_get_option('site_logo')) {
    echo '<img src="' . esc_url($logo['url']) . '" alt="Logo">';
}

// Check if repeater has items
if (ts_has_repeater('testimonials')) {
    // Loop through items
    foreach (ts_loop_repeater('testimonials') as $item) {
        echo $item['name'];
    }
}

// Count items
$count = ts_count_repeater('faqs');

// Get image URL from repeater item
$image_url = ts_get_repeater_image($item, 'image', 'medium');

// Render icon
echo ts_render_repeater_icon($item, 'icon');

/**
 * Get a single option value
 * 
 * @param string $key     Option key
 * @param mixed  $default Default value if not set
 * @return mixed
 */
ts_get_option( $key, $default = '' );

// Examples
$title = ts_get_option('hero_title');
$color = ts_get_option('primary_color', '#3b82f6');
$posts = ts_get_option('posts_per_page', 10);

// For media fields (returns array with 'id' and 'url')
$logo = ts_get_option('site_logo');
if (!empty($logo['url'])) {
    echo '<img src="' . esc_url($logo['url']) . '" alt="Logo">';
}

// For repeaters (returns array of items)
$faqs = ts_get_option('faqs', []);

/**
 * Get multiple options at once
 * 
 * @param array $keys    Array of option keys
 * @param array $defaults Default values (optional)
 * @return array
 */
ts_get_options( $keys, $defaults = [] );

// Example
$header_settings = ts_get_options(
    ['header_style', 'sticky_header', 'show_search'],
    ['header_style' => 'style1', 'sticky_header' => true, 'show_search' => true]
);

echo $header_settings['header_style'];  // 'style1' or saved value
echo $header_settings['sticky_header']; // true or saved value

/**
 * Check if option has a value
 * 
 * @param string $key Option key
 * @return bool
 */
ts_has_option( $key );

// Examples
if (ts_has_option('site_logo')) {
    // Display logo
}

if (ts_has_option('google_analytics_id')) {
    // Load analytics script
}

// Conditional section display
<?php if (ts_has_option('hero_title') || ts_has_option('hero_background')) : ?>
    <section class="hero">
        <!-- Hero content -->
    </section>
<?php endif; ?>

/**
 * Get all saved options
 * 
 * @return array
 */
ts_get_all_options();

// Example
$all_options = ts_get_all_options();

// Debug: view all saved options
echo '<pre>' . print_r($all_options, true) . '</pre>';

/**
 * Get default value for a field
 * 
 * @param string $key Field key
 * @return mixed
 */
ts_get_default( $key );

// Example
$default_color = ts_get_default('primary_color');
$default_layout = ts_get_default('blog_layout');

/**
 * Get image URL with specific size
 */
ts_get_image_url( $key, $size = 'full' );

// Examples
$logo_thumb  = ts_get_image_url('site_logo', 'thumbnail');
$logo_medium = ts_get_image_url('site_logo', 'medium');
$hero_bg     = ts_get_image_url('hero_background', 'full');

/**
 * Get image HTML with responsive srcset
 */
ts_get_image( $key, $size = 'full', $attr = [] );

// Example
echo ts_get_image('site_logo', 'medium', [
    'class' => 'site-logo',
    'alt'   => get_bloginfo('name'),
]);
// Output: <img src="..." srcset="..." class="site-logo" alt="My Site">

/**
 * Check if media field has an image
 */
ts_has_image( $key );

if (ts_has_image('hero_background')) {
    // Has background image
}

/**
 * Convert HEX to RGB array
 */
ts_hex_to_rgb( $hex );

$rgb = ts_hex_to_rgb('#3b82f6');
// Returns: ['r' => 59, 'g' => 130, 'b' => 246]

/**
 * Convert HEX to RGBA string
 */
ts_hex_to_rgba( $hex, $alpha = 1 );

$rgba = ts_hex_to_rgba('#3b82f6', 0.5);
// Returns: 'rgba(59, 130, 246, 0.5)'

/**
 * Adjust color brightness
 */
ts_adjust_brightness( $hex, $percent );

$lighter = ts_adjust_brightness('#3b82f6', 20);  // 20% lighter
$darker  = ts_adjust_brightness('#3b82f6', -20); // 20% darker

// functions.php - Output dynamic CSS
function mytheme_dynamic_css() {
    // Colors
    $primary   = ts_get_option('primary_color', '#3b82f6');
    $secondary = ts_get_option('secondary_color', '#64748b');
    $text      = ts_get_option('text_color', '#1f2937');
    
    // Typography
    $body_font    = ts_get_option('body_font', 'Open Sans');
    $heading_font = ts_get_option('heading_font', 'Montserrat');
    $font_size    = ts_get_option('base_font_size', 16);
    
    // Layout
    $content_width = ts_get_option('content_width', 1200);
    $section_padding = ts_get_option('section_padding', 80);
    
    // Generate lighter/darker variants
    $primary_light = ts_adjust_brightness($primary, 15);
    $primary_dark  = ts_adjust_brightness($primary, -15);
    $primary_rgb   = ts_hex_to_rgb($primary);
    ?>
    <style id="mytheme-dynamic-css">
    :root {
        /* Colors */
        --color-primary: <?php echo esc_attr($primary); ?>;
        --color-primary-light: <?php echo esc_attr($primary_light); ?>;
        --color-primary-dark: <?php echo esc_attr($primary_dark); ?>;
        --color-primary-rgb: <?php echo "{$primary_rgb['r']}, {$primary_rgb['g']}, {$primary_rgb['b']}"; ?>;
        --color-secondary: <?php echo esc_attr($secondary); ?>;
        --color-text: <?php echo esc_attr($text); ?>;
        
        /* Typography */
        --font-body: '<?php echo esc_attr($body_font); ?>', sans-serif;
        --font-heading: '<?php echo esc_attr($heading_font); ?>', sans-serif;
        --font-size-base: <?php echo intval($font_size); ?>px;
        
        /* Layout */
        --content-width: <?php echo intval($content_width); ?>px;
        --section-padding: <?php echo intval($section_padding); ?>px;
    }
    </style>
    <?php
}
add_action('wp_head', 'mytheme_dynamic_css', 100);

/**
 * Filter any option value when retrieved
 * 
 * @param mixed  $value   The option value
 * @param string $key     The option key
 * @param mixed  $default The default value
 */
add_filter('ts_get_option', function($value, $key, $default) {
    // Modify specific option
    if ($key === 'primary_color' && empty($value)) {
        return '#3b82f6'; // Ensure fallback
    }
    return $value;
}, 10, 3);

/**
 * Filter specific option by key
 */
add_filter('ts_get_option_primary_color', function($value) {
    // Always return uppercase HEX
    return strtoupper($value);
});

/**
 * Filter all options before save
 */
add_filter('ts_before_save_options', function($options) {
    // Sanitize or modify before saving
    if (isset($options['custom_css'])) {
        $options['custom_css'] = wp_strip_all_tags($options['custom_css']);
    }
    return $options;
});

/**
 * Modify settings configuration
 * Add, remove, or modify tabs, sections, and fields
 */
add_filter('ts_settings_config', function($config) {
    // Add new field to existing section
    $config['general']['sections']['site_identity']['fields']['site_tagline'] = [
        'type'  => 'text',
        'label' => __('Tagline', 'themename'),
    ];
    
    // Remove a field
    unset($config['general']['sections']['site_identity']['fields']['some_field']);
    
    // Add entire new tab
    $config['custom_tab'] = [
        'title' => __('Custom Tab', 'themename'),
        'icon'  => 'bi-puzzle',
        'sections' => [
            'custom_section' => [
                'title' => __('Custom Section', 'themename'),
                'fields' => [
                    // Your fields...
                ],
            ],
        ],
    ];
    
    return $config;
});

/**
 * Modify specific tab
 */
add_filter('ts_settings_tab_general', function($tab) {
    $tab['title'] = __('Site Settings', 'themename');
    return $tab;
});

/**
 * Add fields to specific section
 */
add_filter('ts_settings_section_site_identity', function($section) {
    $section['fields']['new_field'] = [
        'type'  => 'text',
        'label' => __('New Field', 'themename'),
    ];
    return $section;
});

/**
 * After settings are saved
 */
add_action('ts_after_save_options', function($options) {
    // Clear caches
    wp_cache_flush();
    
    // Regenerate dynamic CSS file
    mytheme_generate_css_file();
    
    // Log changes
    error_log('Theme settings updated: ' . print_r($options, true));
});

/**
 * Before settings page renders
 */
add_action('ts_before_settings_page', function() {
    // Check permissions, show notices, etc.
    if (!current_user_can('manage_options')) {
        wp_die('Unauthorized access');
    }
});

/**
 * After settings page renders
 */
add_action('ts_after_settings_page', function() {
    // Add custom scripts or content
    echo '<script>console.log("Settings page loaded");</script>';
});

/**
 * After specific tab content
 */
add_action('ts_after_tab_general', function() {
    echo '<div class="custom-notice">Custom content after General tab</div>';
});

/**
 * After settings reset
 */
add_action('ts_after_reset_options', function() {
    // Regenerate defaults, clear caches
    delete_transient('mytheme_css_cache');
});

/**
 * After import
 */
add_action('ts_after_import_options', function($options) {
    // Process imported options
    // Regenerate CSS, flush caches, etc.
});

/**
 * Modify field HTML output
 */
add_filter('ts_field_html', function($html, $field, $value) {
    // Add wrapper or modify HTML
    return '<div class="custom-wrapper">' . $html . '</div>';
}, 10, 3);

/**
 * Modify specific field type HTML
 */
add_filter('ts_field_html_color', function($html, $field, $value) {
    // Add color preview
    $preview = '<span class="color-preview" style="background:' . esc_attr($value) . '"></span>';
    return $html . $preview;
}, 10, 3);

/**
 * Filter field options (for select, radio, checkbox)
 */
add_filter('ts_field_options', function($options, $field) {
    if ($field['key'] === 'header_style') {
        // Add dynamic option
        $options['custom'] = __('Custom Style', 'themename');
    }
    return $options;
}, 10, 2);

/**
 * Filter select options for post_select field
 */
add_filter('ts_post_select_options', function($posts, $field) {
    // Modify post query args
    return $posts;
}, 10, 2);

/**
 * Custom sanitization for specific field
 */
add_filter('ts_sanitize_field_custom_css', function($value, $field) {
    // Custom CSS sanitization
    return wp_strip_all_tags($value);
}, 10, 2);

/**
 * Custom sanitization for field type
 */
add_filter('ts_sanitize_type_textarea', function($value, $field) {
    // Allow specific HTML tags
    return wp_kses($value, [
        'a' => ['href' => [], 'target' => []],
        'strong' => [],
        'em' => [],
        'br' => [],
    ]);
}, 10, 2);

/**
 * Validate before save
 */
add_filter('ts_validate_field', function($valid, $value, $field) {
    // Custom validation
    if ($field['key'] === 'contact_email' && !is_email($value)) {
        return new WP_Error('invalid_email', 'Please enter a valid email.');
    }
    return $valid;
}, 10, 3);

// Define constants (theme-settings.php)
define('THEME_SETTINGS_SIDEBAR', 'MyBrand Settings'); // Sidebar Menu
define('THEME_SETTINGS_BRAND_URL', 'mybrand'); // URL Admin admin.php?page=mybrand-settings
define('THEME_SETTINGS_BRAND', 'MyBrand Settings'); // Title (logo image replace from assets/images/logo.png)
define('THEME_SETTINGS_AUTHOR', 'Theme Name'); // Footer Name
define('THEME_SETTINGS_LINK', 'https://themesettings.com'); // Replace with Your Link
define('THEME_SETTINGS_SKIN', 'light'); // Options: light, dark
define('THEME_SETTINGS_VERSION', '1.1.0'); // Theme Version
define('THEME_SETTINGS_PATH', get_template_directory() . '/themesettings/');
define('THEME_SETTINGS_URL', get_template_directory_uri() . '/themesettings/');
define('THEME_SETTINGS_THEME_CSS', THEME_SETTINGS_URL . 'assets/css/theme-settings.css'); // theme-settings-horizontal.css (for horizontal navbar)
define('THEME_SETTINGS_BOOTSTRAP_ICONS', true); // true = enable, false = disable (bootstrap icon cdn)
        

// settings-config.php

'header_style' => [
    'type'    => 'select',
    'label'   => __('Header Style', 'themename'),
    'options' => [
        'default' => __('Default', 'themename'),
        'centered' => __('Centered', 'themename'),
        'custom' => __('Custom', 'themename'),
    ],
],

// This field only shows when header_style = 'custom'
'custom_header_code' => [
    'type'      => 'textarea',
    'label'     => __('Custom Header Code', 'themename'),
    'rows'      => 5,
    'condition' => [
        'field'    => 'header_style',
        'operator' => '==',
        'value'    => 'custom',
    ],
],

// Multiple conditions (AND)
'header_bg_color' => [
    'type'      => 'color',
    'label'     => __('Header Background', 'themename'),
    'condition' => [
        [
            'field'    => 'header_style',
            'operator' => '!=',
            'value'    => 'transparent',
        ],
        [
            'field'    => 'use_custom_colors',
            'operator' => '==',
            'value'    => true,
        ],
    ],
],

// Multiple conditions (OR)
'show_if_either' => [
    'type'           => 'text',
    'label'          => __('Field', 'themename'),
    'condition'      => [...],
    'condition_type' => 'or', // Default is 'and'
],

Find:    'themename'
Replace: 'your-theme-slug'

Example:
Find:    'themename'
Replace: 'awesome-theme'

'site_logo' => [
    'type'  => 'media',
    'label' => __('Site Logo', 'themename'),
    'desc'  => __('Upload your site logo.', 'themename'),
],

'primary_color' => [
    'type'    => 'color',
    'label'   => __('Primary Color', 'themename'),
    'default' => '#2563eb',
],

'site_logo' => [
    'type'  => 'media',
    'label' => __('Site Logo', 'awesome-theme'),
    'desc'  => __('Upload your site logo.', 'awesome-theme'),
],

'primary_color' => [
    'type'    => 'color',
    'label'   => __('Primary Color', 'awesome-theme'),
    'default' => '#2563eb',
],

# Navigate to theme directory
cd wp-content/themes/awesome-theme

# Generate POT file
wp i18n make-pot . languages/awesome-theme.pot

// Settings config
'label' => __('Primary Color', 'awesome-theme'),
'desc'  => __('Choose your brand color.', 'awesome-theme'),

// Template output - echo directly
<h1><?php _e('Welcome to Our Site', 'awesome-theme'); ?></h1>

// Template output - with escaping
<h2><?php echo esc_html__('About Us', 'awesome-theme'); ?></h2>

// HTML attribute
<a href="#" title="<?php echo esc_attr__('Read More', 'awesome-theme'); ?>">
    <?php _e('Click Here', 'awesome-theme'); ?>
</a>

// Assign to variable
$welcome_text = __('Hello, World!', 'awesome-theme');
echo '<p>' . esc_html($welcome_text) . '</p>';