<?php

if ( !defined( 'ABSPATH' ) ) {
    exit;
}
if ( !class_exists( 'Silica_Admin_Page' ) ) {
    class Silica_Admin_Page {
        public static function init() {
            add_action( 'admin_menu', [__CLASS__, 'add_menu'] );
            add_action( 'admin_enqueue_scripts', [__CLASS__, 'enqueue_assets'] );
        }

        public static function add_menu() {
            $menu_title = 'Silica';
            require_once plugin_dir_path( __FILE__ ) . 'icons.php';
            add_menu_page(
                'Silica Demo',
                $menu_title,
                'manage_options',
                'silica-demo',
                [__CLASS__, 'render_page'],
                silica_get_menu_icon(),
                60
            );
        }

        public static function enqueue_assets( $hook ) {
            if ( $hook !== 'toplevel_page_silica-demo' ) {
                return;
            }
            wp_enqueue_style(
                'silica-css',
                plugin_dir_url( __FILE__ ) . '../assets/css/silica.css',
                [],
                '2.0.0'
            );
            wp_enqueue_style(
                'silica-admin-css',
                plugin_dir_url( __FILE__ ) . '../assets/css/silica-admin.css',
                [],
                '2.0.0'
            );
            wp_enqueue_script(
                'silica-admin-js',
                plugin_dir_url( __FILE__ ) . '../assets/js/silica-admin.js',
                ['jquery'],
                '2.0.0',
                true
            );
            wp_enqueue_script(
                'silica-js',
                plugin_dir_url( __FILE__ ) . '../assets/js/silica.js',
                ['jquery'],
                '2.0.0',
                true
            );
        }

        public static function render_page() {
            ?>

        <div class="wrap">
            <h1 class="silica-admin-title" style="display:none;">Silica</h1>
            <div class="silica-header">
                
                <img src="<?php 
            echo esc_url( plugin_dir_url( __FILE__ ) . '../assets/images/SilicaLogo.png' );
            ?>" alt="Silica Logo" class="silica-logo">
                
                <div class="silica-header-actions">
                    <span style="margin-right: 12px; font-size: 14px; color: #1d2327; font-weight: 500; align-self: center;">Brag About Silica:</span>
                    <div class="silica-tooltip-trigger">
                        <a href="https://www.facebook.com/sharer/sharer.php?u=https://silicaplugin.com" target="_blank" class="silica-header-btn<?php 
            ?>">
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/>
                            </svg>
                        </a>
                        <span class="silica-tooltip silicaGlass-yes<?php 
            ?>">Share on Facebook</span>
                    </div>
                    <div class="silica-tooltip-trigger">
                        <a href="https://twitter.com/intent/tweet?text=Check%20out%20Silica%20-%20stunning%20liquid%20glass%20effects%20for%20Elementor!&url=https://silicaplugin.com" target="_blank" class="silica-header-btn<?php 
            ?>">
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                            </svg>
                        </a>
                        <span class="silica-tooltip silicaGlass-yes<?php 
            ?>">Share on X</span>
                    </div>
                    <div class="silica-tooltip-trigger">
                        <a href="https://reddit.com/submit?url=https://silicaplugin.com&title=Silica%20-%20Liquid%20Glass%20Effects%20for%20Elementor" target="_blank" class="silica-header-btn<?php 
            ?>">
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
                            </svg>
                        </a>
                        <span class="silica-tooltip silicaGlass-yes<?php 
            ?>">Share on Reddit</span>
                    </div>
                    <div class="silica-tooltip-trigger">
                        <a href="https://wa.me/?text=Check%20out%20Silica%20-%20stunning%20liquid%20glass%20effects%20for%20Elementor!%20https://silicaplugin.com" target="_blank" class="silica-header-btn<?php 
            ?>">
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                            </svg>
                        </a>
                        <span class="silica-tooltip silicaGlass-yes<?php 
            ?>">Share on WhatsApp</span>
                    </div>
                    <div class="silica-tooltip-trigger">
                        <a href="mailto:?subject=Check%20out%20Silica&body=Check%20out%20Silica%20-%20stunning%20liquid%20glass%20effects%20for%20Elementor!%20https://silicaplugin.com" class="silica-header-btn<?php 
            ?>">
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                            </svg>
                        </a>
                        <span class="silica-tooltip silicaGlass-yes<?php 
            ?>">Share via Email</span>
                    </div>
                    <div class="silica-tooltip-trigger">
                        <a href="https://www.paypal.com/ncp/payment/3L5L2AYH3WS26" target="_blank" class="silica-header-btn silica-donate-btn<?php 
            ?>">
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                            </svg>
                        </a>
                        <span class="silica-tooltip silicaGlass-yes<?php 
            ?>">Tip</span>
                    </div>
                </div>
            </div>
            <div class="silica-demo-layout">
                <div class="silica-controls-col">
                    <div class="silica-intro-section">
                        <h2 style="font-size: 18px; margin: 0 0 8px 0; color: #1d2327;">Welcome to Silica<?php 
            ?></h2>
                        <p style="margin: 0; font-size: 13px; color: #646970; line-height: 1.5; padding-bottom: 0;">Get familiar with Silica's controls below. Adjust the settings and watch the live preview update in real-time.</p>
                    </div>

                    <div class="silica-controls">
                        <div class="silica-panel">
                            <div class="silica-panel-header">
                                <h3>Silica in Elementor</h3>
                            </div>
                            <div class="silica-panel-body">
                                <div class="silica-slider-label">
                                    <span class="silica-control-label">Enable Silica</span>
                                    <label class="silica-toggle">
                                        <input type="checkbox" id="toggle-silica" checked>
                                        <span class="silica-toggle-slider"></span>
                                    </label>
                                </div>

                                <?php 
            ?>
                            </div>
                        </div>

                        <?php 
            ?>
                        <div class="silica-panel">
                            <div class="silica-panel-header">
                                <h3>Quick Links</h3>
                            </div>
                            <div class="silica-panel-body">
                                <ul style="margin: 0; padding-left: 20px; list-style-type: disc;">
                                    <li style="margin-bottom: 8px;">
                                        <a href="https://silicaplugin.com/" target="_blank" style="color: #2271b1; text-decoration: none;">Learn About Pro</a>
                                    </li>
                                    <li style="margin-bottom: 8px;">
                                        <a href="<?php 
            echo esc_url( sil_fs()->get_trial_url() );
            ?>" style="color: #2271b1; text-decoration: none;">Start Free Trial</a>
                                    </li>
                                    <li style="margin-bottom: 8px;">
                                        <a href="https://wordpress.org/support/plugin/silica/reviews/#new-post" target="_blank" style="color: #2271b1; text-decoration: none;">Leave A Review</a>
                                    </li>
                                    <li style="margin-bottom: 0;">
                                        <a href="https://silicaplugin.com/documentation" target="_blank" style="color: #2271b1; text-decoration: none;">Documentation</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <?php 
            ?>

                    </div>
                </div>

                <div class="silica-demo-viewport">
                    <div class="silica-demo-bg">
                        <div id="silica-demo-container" class="silica-demo-container silicaGlass-yes <?php 
            ?>">
                            <?php 
            ?>
                                <div class="silica-demo-content">
                                    <img src="<?php 
            echo esc_url( plugin_dir_url( __FILE__ ) . '../assets/images/SilicaIcon.png' );
            ?>" alt="Silica Pro Icon" class="silica-icon">
                                    <h2>Silica Pro free trial!</h2>
                                    <p>Full customisation and the most realistic Liquid Glass plugin on the internet! And it's easy to use, we promise. Start your free trial, no credit card required.</p>
                                </div>
                            <?php 
            ?>
                        </div>
                        <div>
                            <div class="silica-button-container">
                                <?php 
            ?>
                                    <div class="silica-tooltip-trigger">
                                        <a href="https://silicaplugin.com/" target="_blank" class="silica-demo-btn silica-icon-btn silica-demo-element silicaGlass-yes">
                                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                                            </svg>
                                        </a>
                                        <span class="silica-tooltip silicaGlass-yes">Learn About Pro</span>
                                    </div>
                                    <div class="silica-tooltip-trigger">
                                        <a href="<?php 
            echo esc_url( sil_fs()->get_trial_url() );
            ?>" class="silica-demo-btn silica-icon-btn silica-demo-element silicaGlass-yes">
                                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
                                            </svg>
                                        </a>
                                        <span class="silica-tooltip silicaGlass-yes">Start Trial</span>
                                    </div>
                                    <div class="silica-tooltip-trigger">
                                        <a href="https://wordpress.org/support/plugin/silica/reviews/#new-post" target="_blank" class="silica-demo-btn silica-icon-btn silica-demo-element silicaGlass-yes">
                                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                                            </svg>
                                        </a>
                                        <span class="silica-tooltip silicaGlass-yes">Leave A Review</span>
                                    </div>
                                    <div class="silica-tooltip-trigger">
                                        <a href="https://silicaplugin.com/documentation" target="_blank" class="silica-demo-btn silica-icon-btn silica-demo-element silicaGlass-yes">
                                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
                                            </svg>
                                        </a>
                                        <span class="silica-tooltip silicaGlass-yes">Documentation</span>
                                    </div>
                                <?php 
            ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <style>
        
        </style>
        
        <?php 
        }

    }

}
Silica_Admin_Page::init();