<?php

function get_style($element) {
    $styles = array();

    switch ($element) {
        case 'powered_by':
            $styles['color'] = get_option('postology_header_font_color', '#000000');
            break;
        case 'header_text':
            $styles['font-size'] = get_option('postology_header_font_size', '14px');
            $styles['font-family'] = get_option('postology_header_font_family', 'inherit');
            $styles['font-weight'] = get_option('postology_header_font_weight', 'bold');
            $styles['color'] = get_option('postology_header_font_color', '#000000');
            $styles['line-height'] = get_option('postology_header_line_height', '1.5');
            break;
        case 'summary_heading_text':
            $styles['font-size'] = get_option('postology_summary_heading_font_size', '16px');
            $styles['font-family'] = get_option('postology_summary_heading_font_family', 'inherit');
            $styles['font-weight'] = get_option('postology_summary_heading_font_weight', 'bold');
            $styles['color'] = get_option('postology_summary_heading_font_color', '#000000');
            $styles['line-height'] = get_option('postology_summary_heading_line_height', '1.5');
            break;
        case 'summary_background':
            $styles['background-color'] = get_option('postology_summary_background_color', '#a3a3a3');
            break;
        case 'button_text':
            $styles['font-size'] = get_option('postology_button_font_size', '14px');
            $styles['font-family'] = get_option('postology_button_font_family', 'inherit');
            $styles['font-weight'] = get_option('postology_button_font_weight', '600');
            $styles['color'] = get_option('postology_button_font_color', '#000000');
            $styles['line-height'] = get_option('postology_button_line_height', '1.5');
            $styles['background-color'] = get_option('postology_button_background_color', '#FFFFFF');
            $styles['border'] = '1px solid ' . get_option('postology_button_border_color', '#E2E8F0');
            $styles['border-radius'] = get_option('postology_button_border_radius', '9px');
            break;
        case 'bullet_points_text':
            $styles['font-size'] = get_option('postology_bullet_points_font_size', '16px');
            $styles['font-family'] = get_option('postology_bullet_points_font_family', 'inherit');
            $styles['font-weight'] = get_option('postology_bullet_points_font_weight', 'normal');
            $styles['color'] = get_option('postology_bullet_points_font_color', '#000000');
            $styles['line-height'] = get_option('postology_bullet_points_line_height', '1.5');
            break;
        case 'main_container':
            $styles['background-color'] = get_option('postology_main_container_background_color', '#FFFFFF');
            $styles['border-radius'] = get_option('postology_main_container_border_radius', '9px');
            $styles['border'] = '0px solid ' . get_option('postology_main_container_border_color', '#000000');
            $styles['box-shadow'] = get_option('postology_main_container_border_shadow', '3px 12px 15px 3px rgba(0, 0, 0, 0.1)');
            break;
        case 'inner_container':
            $styles['background-color'] = get_option('postology_inner_container_background_color', '#FFFFFF');
            $styles['border-radius'] = get_option('postology_inner_container_border_radius', '9px');
            $styles['border'] = '0px solid ' . get_option('postology_inner_container_border_color', '#000000');
            $styles['box-shadow'] = get_option('postology_inner_container_border_shadow', '3px 12px 15px 3px rgba(0, 0, 0, 0.1)');
            break;
        case 'icon_container':
            $styles['fill'] = get_option('postology_box_icon_color', '#0088FF');
            break;
        default:
            break;
    }

    $inline_style = '';
    foreach ($styles as $property => $value) {
        if (!empty($value)) {
            $inline_style .= $property . ': ' . esc_attr($value) . ' !important; ';
        }
    }
    return $inline_style;
}
function add_box() {
    // If not excluded, add the Postology box
    $heading_text = get_option('postology_heading_text', 'Get an AI-generated summary of this article.');
    $button_text = get_option('postology_button_text', 'Generate Summary');
    $powered_by_option = get_option('postology_display_powered_by', "no");

    ob_start();
    ?>
    <div id="postology-box" style="<?php echo esc_attr(get_style('main_container')); ?>">
        <div class="postology-header" style="<?php echo esc_attr(get_style('header_text')); ?>">
            <svg width="29" height="31" viewBox="0 0 29 31" fill="none" xmlns="http://www.w3.org/2000/svg"
              class="postology-box-icon">
                <g filter="url(#filter0_dd_5_106)">
                <path class="fill-path" d="M20.5398 10.7576C20.4742 10.7576 20.4185 10.7445 20.3725 10.7183C20.3266 10.6921 20.2905 10.6462 20.2643 10.5807L19.6936 9.24382L18.2569 8.61472C18.1913 8.5885 18.1454 8.55246 18.1192 8.50659C18.0929 8.46072 18.0798 8.40502 18.0798 8.33948C18.0798 8.27395 18.0929 8.21825 18.1192 8.17238C18.1454 8.12651 18.1913 8.09046 18.2569 8.06425L19.6936 7.45481L20.2643 6.17694C20.2905 6.1114 20.3266 6.06553 20.3725 6.03932C20.4185 6.01311 20.4742 6 20.5398 6C20.6054 6 20.6612 6.01311 20.7071 6.03932C20.753 6.06553 20.7891 6.1114 20.8153 6.17694L21.386 7.45481L22.8227 8.06425C22.8883 8.09046 22.9342 8.12651 22.9604 8.17238C22.9867 8.21825 22.9998 8.27395 22.9998 8.33948C22.9998 8.40502 22.9867 8.46072 22.9604 8.50659C22.9342 8.55246 22.8883 8.5885 22.8227 8.61472L21.386 9.24382L20.8153 10.5807C20.7891 10.6462 20.753 10.6921 20.7071 10.7183C20.6612 10.7445 20.6054 10.7576 20.5398 10.7576ZM20.5398 22.4747C20.4873 22.4747 20.4349 22.4616 20.3824 22.4354C20.3299 22.4092 20.2905 22.3633 20.2643 22.2977L19.6936 21.0199L18.2766 20.4104C18.211 20.3842 18.1651 20.3482 18.1389 20.3023C18.1126 20.2564 18.0995 20.2007 18.0995 20.1352C18.0995 20.0697 18.1126 20.014 18.1389 19.9681C18.1651 19.9222 18.211 19.8862 18.2766 19.86L19.6936 19.2505L20.2643 17.894C20.2905 17.8285 20.3266 17.7826 20.3725 17.7564C20.4185 17.7302 20.4742 17.7171 20.5398 17.7171C20.6054 17.7171 20.6612 17.7302 20.7071 17.7564C20.753 17.7826 20.7891 17.8285 20.8153 17.894L21.386 19.2505L22.803 19.86C22.8686 19.8862 22.9145 19.9222 22.9408 19.9681C22.967 20.014 22.9801 20.0697 22.9801 20.1352C22.9801 20.2007 22.967 20.2564 22.9408 20.3023C22.9145 20.3482 22.8686 20.3842 22.803 20.4104L21.386 21.0199L20.8153 22.2977C20.7891 22.3633 20.7497 22.4092 20.6973 22.4354C20.6448 22.4616 20.5923 22.4747 20.5398 22.4747ZM11.9003 19.0736C11.7953 19.0736 11.6937 19.0441 11.5953 18.9851C11.4969 18.9261 11.4214 18.8442 11.369 18.7394L10.0898 16.0067L7.33456 14.7681C7.2296 14.7157 7.1476 14.6404 7.08856 14.5421C7.02952 14.4438 7 14.3422 7 14.2373C7 14.1325 7.02952 14.0309 7.08856 13.9326C7.1476 13.8343 7.2296 13.759 7.33456 13.7065L10.0898 12.468L11.369 9.75497C11.4214 9.63701 11.4969 9.54854 11.5953 9.48957C11.6937 9.43059 11.7953 9.4011 11.9003 9.4011C12.0053 9.4011 12.1069 9.43059 12.2053 9.48957C12.3037 9.54854 12.3792 9.63046 12.4317 9.73531L13.7305 12.468L16.4661 13.7065C16.5841 13.759 16.6727 13.8343 16.7317 13.9326C16.7908 14.0309 16.8203 14.1325 16.8203 14.2373C16.8203 14.3422 16.7908 14.4438 16.7317 14.5421C16.6727 14.6404 16.5841 14.7157 16.4661 14.7681L13.7305 16.0067L12.4317 18.7394C12.3792 18.8573 12.3037 18.9425 12.2053 18.9949C12.1069 19.0474 12.0053 19.0736 11.9003 19.0736Z"
                 style="<?php echo esc_attr(get_style('icon_container')); ?>" />
                </g>
                <defs>
                <filter id="filter0_dd_5_106" x="0.633232" y="0.438226" width="28.0017" height="29.5741" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                <feOffset dx="-1.31726" dy="2.48816"/>
                <feGaussianBlur stdDeviation="2.52475"/>
                <feComposite in2="hardAlpha" operator="out"/>
                <feColorMatrix type="matrix" values="0 0 0 0 0.0506089 0 0 0 0 0.0159861 0 0 0 0 0.191833 0 0 0 0.25 0"/>
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5_106"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                <feOffset dx="1.24408" dy="-1.1709"/>
                <feGaussianBlur stdDeviation="2.19544"/>
                <feComposite in2="hardAlpha" operator="out"/>
                <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0"/>
                <feBlend mode="normal" in2="effect1_dropShadow_5_106" result="effect2_dropShadow_5_106"/>
                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_5_106" result="shape"/>
                </filter>
                </defs>
            </svg>
            
            <?php echo esc_html($heading_text); ?>
        </div>
        <button id="generate-summary" aria-label="<?php echo esc_html($button_text); ?>" style="<?php echo esc_attr(get_style('button_text')); ?>">
            <?php echo esc_html($button_text); ?>
        </button>
    </div>
    <!-- Move the summary-content outside of postology-box -->
    <div id="summary-content" style="<?php echo esc_attr(get_style('inner_container')); ?>">
        <section id="summary-title" style="<?php echo esc_attr(get_style('summary_heading_text')); ?>">
            <svg width="29" height="31" viewBox="0 0 29 31" fill="none" xmlns="http://www.w3.org/2000/svg"
              class="postology-box-icon">
                <g filter="url(#filter0_dd_5_106)">
                <path class="fill-path" d="M20.5398 10.7576C20.4742 10.7576 20.4185 10.7445 20.3725 10.7183C20.3266 10.6921 20.2905 10.6462 20.2643 10.5807L19.6936 9.24382L18.2569 8.61472C18.1913 8.5885 18.1454 8.55246 18.1192 8.50659C18.0929 8.46072 18.0798 8.40502 18.0798 8.33948C18.0798 8.27395 18.0929 8.21825 18.1192 8.17238C18.1454 8.12651 18.1913 8.09046 18.2569 8.06425L19.6936 7.45481L20.2643 6.17694C20.2905 6.1114 20.3266 6.06553 20.3725 6.03932C20.4185 6.01311 20.4742 6 20.5398 6C20.6054 6 20.6612 6.01311 20.7071 6.03932C20.753 6.06553 20.7891 6.1114 20.8153 6.17694L21.386 7.45481L22.8227 8.06425C22.8883 8.09046 22.9342 8.12651 22.9604 8.17238C22.9867 8.21825 22.9998 8.27395 22.9998 8.33948C22.9998 8.40502 22.9867 8.46072 22.9604 8.50659C22.9342 8.55246 22.8883 8.5885 22.8227 8.61472L21.386 9.24382L20.8153 10.5807C20.7891 10.6462 20.753 10.6921 20.7071 10.7183C20.6612 10.7445 20.6054 10.7576 20.5398 10.7576ZM20.5398 22.4747C20.4873 22.4747 20.4349 22.4616 20.3824 22.4354C20.3299 22.4092 20.2905 22.3633 20.2643 22.2977L19.6936 21.0199L18.2766 20.4104C18.211 20.3842 18.1651 20.3482 18.1389 20.3023C18.1126 20.2564 18.0995 20.2007 18.0995 20.1352C18.0995 20.0697 18.1126 20.014 18.1389 19.9681C18.1651 19.9222 18.211 19.8862 18.2766 19.86L19.6936 19.2505L20.2643 17.894C20.2905 17.8285 20.3266 17.7826 20.3725 17.7564C20.4185 17.7302 20.4742 17.7171 20.5398 17.7171C20.6054 17.7171 20.6612 17.7302 20.7071 17.7564C20.753 17.7826 20.7891 17.8285 20.8153 17.894L21.386 19.2505L22.803 19.86C22.8686 19.8862 22.9145 19.9222 22.9408 19.9681C22.967 20.014 22.9801 20.0697 22.9801 20.1352C22.9801 20.2007 22.967 20.2564 22.9408 20.3023C22.9145 20.3482 22.8686 20.3842 22.803 20.4104L21.386 21.0199L20.8153 22.2977C20.7891 22.3633 20.7497 22.4092 20.6973 22.4354C20.6448 22.4616 20.5923 22.4747 20.5398 22.4747ZM11.9003 19.0736C11.7953 19.0736 11.6937 19.0441 11.5953 18.9851C11.4969 18.9261 11.4214 18.8442 11.369 18.7394L10.0898 16.0067L7.33456 14.7681C7.2296 14.7157 7.1476 14.6404 7.08856 14.5421C7.02952 14.4438 7 14.3422 7 14.2373C7 14.1325 7.02952 14.0309 7.08856 13.9326C7.1476 13.8343 7.2296 13.759 7.33456 13.7065L10.0898 12.468L11.369 9.75497C11.4214 9.63701 11.4969 9.54854 11.5953 9.48957C11.6937 9.43059 11.7953 9.4011 11.9003 9.4011C12.0053 9.4011 12.1069 9.43059 12.2053 9.48957C12.3037 9.54854 12.3792 9.63046 12.4317 9.73531L13.7305 12.468L16.4661 13.7065C16.5841 13.759 16.6727 13.8343 16.7317 13.9326C16.7908 14.0309 16.8203 14.1325 16.8203 14.2373C16.8203 14.3422 16.7908 14.4438 16.7317 14.5421C16.6727 14.6404 16.5841 14.7157 16.4661 14.7681L13.7305 16.0067L12.4317 18.7394C12.3792 18.8573 12.3037 18.9425 12.2053 18.9949C12.1069 19.0474 12.0053 19.0736 11.9003 19.0736Z"
                 style="<?php echo esc_attr(get_style('icon_container')); ?>" />
                </g>
                <defs>
                <filter id="filter0_dd_5_106" x="0.633232" y="0.438226" width="28.0017" height="29.5741" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                <feOffset dx="-1.31726" dy="2.48816"/>
                <feGaussianBlur stdDeviation="2.52475"/>
                <feComposite in2="hardAlpha" operator="out"/>
                <feColorMatrix type="matrix" values="0 0 0 0 0.0506089 0 0 0 0 0.0159861 0 0 0 0 0.191833 0 0 0 0.25 0"/>
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5_106"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                <feOffset dx="1.24408" dy="-1.1709"/>
                <feGaussianBlur stdDeviation="2.19544"/>
                <feComposite in2="hardAlpha" operator="out"/>
                <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0"/>
                <feBlend mode="normal" in2="effect1_dropShadow_5_106" result="effect2_dropShadow_5_106"/>
                <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_5_106" result="shape"/>
                </filter>
                </defs>
            </svg>

            <p><?php echo esc_html(get_option('postology_summary_heading_text', 'AI-generated article summary')); ?></p>
        </section>
        <div id="summary-content-placeholder" style="<?php echo esc_attr(get_style('summary_background')); ?>">
        <ul style="<?php echo esc_attr(get_style('bullet_points_text')); ?>">
            <li>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </li>
            <li>
                It has survived not only five centuries, but also the leap into electronic 
                typesetting, remaining essentially unchanged.
            </li>
            <li>
                It was popularised in the 1960s with the release of Letraset sheets containing 
                Lorem Ipsum passages, and more recently with desktop publishing software like 
                Aldus PageMaker including versions of Lorem Ipsum.
            </li>
        </ul>
        </div>                    
        <!-- "Powered by Postology" hidden initially -->
        <?php if ($powered_by_option == "yes"): ?>
            <div class="postology-powered-by" style="<?php echo esc_attr(get_style('powered_by')); ?>">Postology</div>
        <?php endif; ?>
    </div>
    <?php
    $postology_box = ob_get_clean();

    return $postology_box;
}

/**
 * Basic Customization Component.
 */
if ( ! function_exists( 'render_basic_customization_component' ) ) {
    function render_basic_customization_component() {
        $light_icon_url = plugin_dir_url( __FILE__ ) . '../../assets/images/lighttheme.png';
        $dark_icon_url  = plugin_dir_url( __FILE__ ) . '../../assets/images/darktheme.png';
        $find_option    = get_option( 'postology_find_elements', 'p, h2, h3, h4, h5, h6' );
        $exclude_option = get_option( 'postology_excluded_classes', '.related-posts, .ads-section, .banner, .comments' );
        $selector_option = get_option( 'postology_selectors', 'main, .post-content, .entry-content, .content, .article, .blog-post, .post, .single-post' );
        ?>
        <div class="postology-field-wrapper" style="display:grid;grid-template-columns: 1fr 30%;grid-template-rows:30% 1fr;">
            <div class="custom-card" style="grid-column-start:1;">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Style the Postology Widget</h4>
                <div style="display:flex; gap:30px; align-items:center; flex-wrap:wrap;">
                    <section style="display:flex;flex-direction:column;gap:9px;border:solid 1px lightgrey;padding: 9px 15px;border-radius: 9px;">
                        <strong><?php esc_html_e( 'Primary Color', 'postology-pro' ); ?></strong>
                        <input type="color" name="postology_main_container_background_color" id="postology_primary_color" style="inline-size:100%;" value="<?php echo esc_attr( get_option( 'postology_main_container_background_color', '#FFFFFF' ) ); ?>" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;border:solid 1px lightgrey;padding: 9px 15px;border-radius: 9px;">
                        <strong><?php esc_html_e( 'Secondary Color', 'postology-pro' ); ?></strong>
                        <input type="color" name="postology_summary_background_color" id="postology_secondary_color" style="inline-size:100%;" value="<?php echo esc_attr( get_option( 'postology_summary_background_color', '#a3a3a3' ) ); ?>" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;border:solid 1px lightgrey;padding: 9px 15px;border-radius: 9px;">
                        <strong><?php esc_html_e( 'Accent Color', 'postology-pro' ); ?></strong>
                        <input type="color" name="postology_button_background_color" id="postology_accent_color" style="inline-size:100%;" value="<?php echo esc_attr( get_option( 'postology_button_background_color', '#0062FF' ) ); ?>" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;border:solid 1px lightgrey;padding: 9px 15px;border-radius: 9px;">
                        <strong><?php esc_html_e( 'Heading Color', 'postology-pro' ); ?></strong>
                        <input type="color" name="postology_header_font_color" id="postology_basic_heading_color" style="inline-size:100%;" value="<?php echo esc_attr( get_option( 'postology_header_font_color', '#000000' ) ); ?>" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;border:solid 1px lightgrey;padding: 9px 15px;border-radius: 9px;">
                        <strong><?php esc_html_e( 'Button Text Color', 'postology-pro' ); ?></strong>
                        <input type="color" name="postology_button_font_color" id="postology_basic_button_color" style="inline-size:100%;" value="<?php echo esc_attr( get_option( 'postology_button_font_color', '#FFFFFF' ) ); ?>" />
                    </section>
                </div>
                <!-- Hidden fields -->
                <input type="hidden" name="postology_inner_container_background_color" class="primary-hidden-values" value="<?php echo esc_attr( get_option( 'postology_inner_container_background_color', '#FFFFFF' ) ); ?>" />
                <input type="hidden" name="postology_bullet_points_font_color" class="primary-hidden-values" value="<?php echo esc_attr( get_option( 'postology_bullet_points_font_color', '#FFFFFF' ) ); ?>" />
                <input type="hidden" class="accent-hidden-values" name="postology_button_border_color" value="<?php echo esc_attr( get_option( 'postology_button_border_color', '#000000' ) ); ?>" />
                <input type="hidden" class="accent-hidden-values" name="postology_box_icon_color" value="<?php echo esc_attr( get_option( 'postology_box_icon_color', '#0088FF' ) ); ?>" />
                <input type="hidden" class="basic-heading-hidden-values" name="postology_summary_heading_font_color" value="<?php echo esc_attr( get_option( 'postology_summary_heading_font_color', '#000000' ) ); ?>" />
            </div>
            
            <div class="custom-card" style="grid-column-start:2;grid-row: 1 / span 2;display:flex;flex-direction:column;align-items:center;gap:15px;">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Select from variety of premade themes</h4>
                <div style="display:flex; gap:30px;flex-direction:column;align-items:center;">
                    <button id="light" style="background:transparent;border:none; display:flex;flex-direction:column;align-items:center; cursor:pointer;">
                        <img src="<?php echo esc_url( $light_icon_url ); ?>" style="inline-size:300px;" alt="Light Theme" />
                        <span>Light Theme</span>
                    </button>
                    <button id="dark" style="background:transparent;border:none; display:flex;flex-direction:column;align-items:center; cursor:pointer;">
                        <img src="<?php echo esc_url( $dark_icon_url ); ?>" style="inline-size:300px;" alt="Dark Theme" />
                        <span>Dark Theme</span>
                    </button>
                </div>
            </div>
    
            <div class="custom-card" style="grid-column-start:1;padding-top:18px;background:transparent;">
                <?php echo add_box(); // Replace with your own function if needed ?>
            </div>
    
            <script>
                (function() {
                    document.querySelector('#light').addEventListener('click', function() {
                        document.querySelector("#postology_primary_color").value = "#FFFFFF";
                        document.querySelectorAll(".primary-hidden-values").forEach(function(el) {
                            el.value = document.querySelector("#postology_primary_color").value;
                        });
                        document.querySelector("#postology_secondary_color").value = "#999999";
                        document.querySelector("#postology_accent_color").value = "#1063EF";
                        document.querySelectorAll(".accent-hidden-values").forEach(function(el) {
                            el.value = document.querySelector('#postology_accent_color').value;
                        });
                        document.querySelector("#postology_basic_heading_color").value = "#000000";
                        document.querySelectorAll(".basic-heading-hidden-values").forEach(function(el) {
                            el.value = document.querySelector('#postology_basic_heading_color').value;
                        });
                        document.querySelector("#postology_basic_button_color").value = "#FFFFFF";
                    });
                    document.querySelector('#dark').addEventListener('click', function() {
                        document.querySelector("#postology_primary_color").value = "#000000";
                        document.querySelectorAll(".primary-hidden-values").forEach(function(el) {
                            el.value = document.querySelector("#postology_primary_color").value;
                        });
                        document.querySelector("#postology_secondary_color").value = "#B8B8B8";
                        document.querySelector("#postology_accent_color").value = "#1063EF";
                        document.querySelectorAll(".accent-hidden-values").forEach(function(el) {
                            el.value = document.querySelector('#postology_accent_color').value;
                        });
                        document.querySelector("#postology_basic_heading_color").value = "#FFFFFF";
                        document.querySelectorAll(".basic-heading-hidden-values").forEach(function(el) {
                            el.value = document.querySelector('#postology_basic_heading_color').value;
                        });
                        document.querySelector("#postology_basic_button_color").value = "#FFFFFF";
                    });
                    document.querySelector('#postology_primary_color').addEventListener('change', function() {
                        document.querySelectorAll(".primary-hidden-values").forEach(function(el) {
                            el.value = document.querySelector('#postology_primary_color').value;
                        });
                    });
                    document.querySelector('#postology_accent_color').addEventListener('change', function() {
                        document.querySelectorAll(".accent-hidden-values").forEach(function(el) {
                            el.value = document.querySelector('#postology_accent_color').value;
                        });
                    });
                    document.querySelector('#postology_basic_heading_color').addEventListener('change', function() {
                        document.querySelectorAll(".basic-heading-hidden-values").forEach(function(el) {
                            el.value = document.querySelector('#postology_basic_heading_color').value;
                        });
                    });
                })();
            </script>
        </div>
        <?php
    }
}

/**
 * Advanced Customization Component.
 */
if ( ! function_exists( 'render_advanced_customization_component' ) ) {
    function render_advanced_customization_component() {
        $light_icon_url = plugin_dir_url( __FILE__ ) . '../assets/images/lighttheme.png';
        $dark_icon_url  = plugin_dir_url( __FILE__ ) . '../assets/images/darktheme.png';
        $find_option    = get_option( 'postology_find_elements', 'p, h2, h3, h4, h5, h6' );
        $exclude_option = get_option( 'postology_excluded_classes', '.related-posts, .ads-section, .banner, .comments' );
        $selector_option = get_option( 'postology_selectors', 'main, .post-content, .entry-content, .content, .article, .blog-post, .post, .single-post' );
        ?>
        <div class="postology-field-wrapper" style="display:grid;grid-template-columns:auto auto;gap:15px; margin-block-end: 30px;">
            <div class="custom-card">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Header Text</h4>
                <div style="display:flex; gap:30px; align-items:center; flex-wrap:wrap;">
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Size', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_header_font_size" value="<?php echo esc_attr( get_option( 'postology_header_font_size', '14px' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Family', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_header_font_family" value="<?php echo esc_attr( get_option( 'postology_header_font_family', 'inherit' ) ); ?>" size="20" />
                    </section>
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Weight', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_header_font_weight" value="<?php echo esc_attr( get_option( 'postology_header_font_weight', 'bold' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Color', 'postology-pro' ); ?></strong>
                        <input type="color" name="postology_header_font_color" value="<?php echo esc_attr( get_option( 'postology_header_font_color', '#000000' ) ); ?>" class="color-field" />
                    </section>
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Line Height', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_header_line_height" value="<?php echo esc_attr( get_option( 'postology_header_line_height', '1.5' ) ); ?>" size="10" />
                    </section>
                </div>
            </div>
            <div class="custom-card">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Summary Heading Text</h4>
                <div style="display:flex; gap:30px; align-items:center; flex-wrap:wrap;">
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Size', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_summary_heading_font_size" value="<?php echo esc_attr( get_option( 'postology_summary_heading_font_size', '16px' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Family', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_summary_heading_font_family" value="<?php echo esc_attr( get_option( 'postology_summary_heading_font_family', 'inherit' ) ); ?>" size="20" />
                    </section>
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Weight', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_summary_heading_font_weight" value="<?php echo esc_attr( get_option( 'postology_summary_heading_font_weight', 'bold' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_summary_heading_font_color" value="<?php echo esc_attr( get_option( 'postology_summary_heading_font_color', '#000000' ) ); ?>" class="color-field" />
                    </section>
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Line Height', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_summary_heading_line_height" value="<?php echo esc_attr( get_option( 'postology_summary_heading_line_height', '1.5' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Background Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_summary_background_color" value="<?php echo esc_attr( get_option( 'postology_summary_background_color', '#a3a3a3' ) ); ?>" class="color-field" />
                    </section>
                </div>
            </div>
            <div class="custom-card">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Button Text</h4>
                <div style="display:flex; gap:30px; align-items:center; flex-wrap:wrap;">
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Size', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_button_font_size" value="<?php echo esc_attr( get_option( 'postology_button_font_size', '14px' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Family', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_button_font_family" value="<?php echo esc_attr( get_option( 'postology_button_font_family', 'inherit' ) ); ?>" size="20" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Weight', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_button_font_weight" value="<?php echo esc_attr( get_option( 'postology_button_font_weight', '600' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_button_font_color" value="<?php echo esc_attr( get_option( 'postology_button_font_color', '#000000' ) ); ?>" class="color-field" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Line Height', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_button_line_height" value="<?php echo esc_attr( get_option( 'postology_button_line_height', '1.5' ) ); ?>" size="10" />
                    </section>
                </div>
            </div>
            <div class="custom-card">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Bullet Points Text</h4>
                <div style="display:flex; gap:30px; align-items:center; flex-wrap:wrap;">
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Size', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_bullet_points_font_size" value="<?php echo esc_attr( get_option( 'postology_bullet_points_font_size', '16px' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Family', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_bullet_points_font_family" value="<?php echo esc_attr( get_option( 'postology_bullet_points_font_family', 'inherit' ) ); ?>" size="20" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Weight', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_bullet_points_font_weight" value="<?php echo esc_attr( get_option( 'postology_bullet_points_font_weight', 'normal' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Font Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_bullet_points_font_color" value="<?php echo esc_attr( get_option( 'postology_bullet_points_font_color', '#000000' ) ); ?>" class="color-field" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Line Height', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_bullet_points_line_height" value="<?php echo esc_attr( get_option( 'postology_bullet_points_line_height', '1.5' ) ); ?>" size="10" />
                    </section>
                </div>
            </div>
            <div class="custom-card">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Main Container</h4>
                <div style="display:flex; gap:30px; align-items:center; flex-wrap:wrap;">
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Background Color', 'postology-pro' ); ?></strong>
                        <input type="color" name="postology_main_container_background_color" value="<?php echo esc_attr( get_option( 'postology_main_container_background_color', '#FFFFFF' ) ); ?>" class="color-field" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Border Radius', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_main_container_border_radius" value="<?php echo esc_attr( get_option( 'postology_main_container_border_radius', '9px' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Border Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_main_container_border_color" value="<?php echo esc_attr( get_option( 'postology_main_container_border_color', '#000000' ) ); ?>" class="color-field" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Border Shadow', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_main_container_border_shadow" value="<?php echo esc_attr( get_option( 'postology_main_container_border_shadow', '3px 12px 15px 3px rgba(0, 0, 0, 0.1)' ) ); ?>" size="30" />
                    </section>
                </div>
            </div>
            <div class="custom-card">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Inner Container</h4>
                <div style="display:flex; gap:30px; align-items:center; flex-wrap:wrap;">
                    <section style="display:flex;flex-direction:column;gap:9px;border:solid 1px lightgrey;padding: 9px 15px;border-radius: 9px;">
                        <strong><?php esc_html_e( 'Background Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_inner_container_background_color" value="<?php echo esc_attr( get_option( 'postology_inner_container_background_color', '#FFFFFF' ) ); ?>" class="color-field" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;border:solid 1px lightgrey;padding: 9px 15px;border-radius: 9px;">
                        <strong><?php esc_html_e( 'Border Radius', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_inner_container_border_radius" value="<?php echo esc_attr( get_option( 'postology_inner_container_border_radius', '8px' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;border:solid 1px lightgrey;padding: 9px 15px;border-radius: 9px;">
                        <strong><?php esc_html_e( 'Border Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_inner_container_border_color" value="<?php echo esc_attr( get_option( 'postology_inner_container_border_color', '#000000' ) ); ?>" class="color-field" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;border:solid 1px lightgrey;padding: 9px 15px;border-radius: 9px;">
                        <strong><?php esc_html_e( 'Border Shadow', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_inner_container_border_shadow" value="<?php echo esc_attr( get_option( 'postology_inner_container_border_shadow', '3px 12px 15px 3px rgba(0, 0, 0, 0.1)' ) ); ?>" size="20" />
                    </section>
                </div>
            </div>
            <div class="custom-card">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Button Container</h4>
                <div style="display:flex; gap:30px; align-items:center; flex-wrap:wrap;">
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Background Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_button_background_color" value="<?php echo esc_attr( get_option( 'postology_button_background_color', '#FFFFFF' ) ); ?>" class="color-field" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Border Radius', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_button_border_radius" value="<?php echo esc_attr( get_option( 'postology_button_border_radius', '9px' ) ); ?>" size="10" />
                    </section>
                    <section style="display:flex;flex-direction:column; gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Border Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_button_border_color" value="<?php echo esc_attr( get_option( 'postology_button_border_color', '#E2E8F0' ) ); ?>" class="color-field" />
                    </section>
                </div>
            </div>
            <div class="custom-card">
                <h4 style="color:grey;font-size:18px;margin-top:0;">Icon Container</h4>
                <div style="display:flex; gap:30px; align-items:center; flex-wrap:wrap;">
                    <section style="display:flex;flex-direction:column;gap:9px;padding: 9px 15px;">
                        <strong><?php esc_html_e( 'Color', 'postology-pro' ); ?></strong>
                        <input type="text" name="postology_box_icon_color" value="<?php echo esc_attr( get_option( 'postology_box_icon_color', '#0088FF' ) ); ?>" class="color-field" />
                    </section>
                </div>
            </div>
            <div class="custom-card" style="grid-column-start:1; grid-column-end: 3; padding-top:18px;background:transparent;">
                <?php echo add_box(); // Replace with your custom function ?>
            </div>
        </div>
        <?php
    }
}
