<?php
if ( ! defined( 'ABSPATH' ) ) exit;

class Skillbarfooter1W extends \Elementor\Widget_Base {

    public function get_name(): string {
        return 'skillbarfooter1w';
    }

    public function get_title(): string {
        return 'فوتر ۱';
    }

    public function get_icon(): string {
        return 'eicon-footer';
    }

    public function get_categories(): array {
        return [ 'exclusive-widget' ];
    }

    public function get_keywords(): array {
        return [ 'footer', 'social', 'contact', 'فوتر' ];
    }

    protected function register_controls() {
        $this->start_controls_section(
            'right_section',
            [
                'label' => 'اطلاعات کافه (سمت راست)',
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'footer_logo',
            [
                'label'       => 'لوگو',
                'type'        => \Elementor\Controls_Manager::MEDIA,
                'library'     => 'image',
                'media_types' => ['image'],
                'description' => 'فقط فایل‌های تصویری (PNG, JPG, SVG, JPEG, WEBP).',
                'default'     => [
                    'url' => get_template_directory_uri() . '/assets/images/Logo/GhahveDar-logo.svg',
                ],
            ]
        );
        $this->add_control(
            'footer_name',
            [
                'label'         => 'نام کافه',
                'type'          => \Elementor\Controls_Manager::TEXT,
                'placeholder'   => 'مثلاً: کافه کافیتو',
                'default'       => 'کافه کافیتو',
            ]
        );

        $this->add_control(
            'footer_caption',
            [
                'label'         => 'کپشن/توضیحات',
                'type'          => \Elementor\Controls_Manager::TEXTAREA,
                'rows'          => 4,
                'placeholder'   => 'توضیحات بخش را وارد کنید…',
                'default'       => 'کافه کافیتو جایی‌ست که عطر دانه‌های تازه‌برشته‌شده، با حال و هوای گرم و صمیمی در هم می‌آمیزد. اینجا می‌توانید طعم واقعی قهوه را تجربه کنید، در آرامش بنشینید و لحظه‌های خاص خود را بسازید.',
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'left_section',
            [
                'label' => 'اطلاعات تماس و سوشال (سمت چپ)',
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new \Elementor\Repeater();

        $this->add_control(
            'social_section_title',
            [
                'label'       => 'عنوان بخش شبکه‌های اجتماعی',
                'type'        => \Elementor\Controls_Manager::TEXT,
                'placeholder' => 'مثلاً: ما را در شبکه‌های اجتماعی دنبال کنید',
                'default'     => 'کافیتو در شبکه‌های اجتماعی',
                'label_block' => true,
                'dynamic'     => [ 'active' => true ], // اجازه‌ی Dynamic Tags
            ]
        );

        $repeater->add_control(
            'social_icon',
            [
                'label'         => 'آیکن شبکه اجتماعی (SVG)',
                'type'          => \Elementor\Controls_Manager::MEDIA,
                'media_types'   => ['svg'],
                'default'       => [
                    'url' => get_template_directory_uri() . '/assets/images/social-media-icons/instagram-logo-fill.svg',
                ],
            ]
        );

        $repeater->add_control(
            'social_url',
            [
                'label'         => 'لینک',
                'type'          => \Elementor\Controls_Manager::URL,
                'description'   => 'لینک باید شامل https:// یا http:// باشد تا به درستی کار کند. مثال: https://instagram.com/yourpage',
                'placeholder'   => 'https://example.com/yourpage',
                'default'       => [
                    'url' => 'https://instagram.com/OfficialPage',
                ],
            ]
        );

        $repeater->add_control(
            'social_title',
            [
                'label'   => 'نام شبکه',
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'Instagram',
            ]
        );

        $this->add_control(
            'social_items',
            [
                'label'         => 'شبکه‌های اجتماعی',
                'type'          => \Elementor\Controls_Manager::REPEATER,
                'fields'        => $repeater->get_controls(),
                'default'       => [
                    [
                        'social_title' => 'Telegram',
                        'social_icon'  => [ 'url' => get_template_directory_uri() . '/assets/images/social-media-icons/telegram-logo-fill.svg' ],
                        'social_url'   => [ 'url' => 'https://t.me/OfficialChannel' ],
                    ],
                    [
                        'social_title' => 'YouTube',
                        'social_icon'  => [ 'url' => get_template_directory_uri() . '/assets/images/social-media-icons/youtube-logo-fill.svg' ],
                        'social_url'   => [ 'url' => 'https://www.youtube.com/@OfficialChannel' ],
                    ],
                    [
                        'social_title' => 'Instagram',
                        'social_icon'  => [ 'url' => get_template_directory_uri() . '/assets/images/social-media-icons/instagram-logo-fill.svg' ],
                        'social_url'   => [ 'url' => 'https://instagram.com/OfficialPage' ],
                    ],
                    [
                        'social_title' => 'WhatsApp',
                        'social_icon'  => [ 'url' => get_template_directory_uri() . '/assets/images/social-media-icons/whatsapp-logo-fill.svg' ],
                        'social_url'   => [ 'url' => 'https://wa.me/989120000000' ],
                    ],
                ],
                'title_field' => '{{{ social_title }}}',
            ]
        );

        $this->add_control(
            'contact_title',
            [
                'label'         => 'عنوان تماس',
                'type'          => \Elementor\Controls_Manager::TEXT,
                'default'       => 'با ما در ارتباط باش ',
                'placeholder'   => 'عنوان بخش تماس',
            ]
        );

        $this->add_control(
            'contact_address',
            [
                'label'         => 'آدرس',
                'type'          => \Elementor\Controls_Manager::TEXT,
                'default'       => 'رشت - خیابان علاآفرین',
                'placeholder'   => 'آدرس کافه را وارد کنید',
            ]
        );

        $this->add_control(
            'contact_phones',
            [
                'label'         => 'شماره تماس',
                'type'          => \Elementor\Controls_Manager::TEXT,
                'default'       => '۰۹۱۱۳۳۲۱۳۵ - ۰۱۳.۳۳۳۳۲۲۱۳',
                'placeholder'   => 'شماره‌های تماس را وارد کنید',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $s = $this->get_settings_for_display();
        ?>
        <section class="footer-section-container">
            <div class="footer-section">
                <div class="footer-section-right">
                    <div class="footer-name-logo">
                        <div class="footer-logo">
                            <?php if ( ! empty( $s['footer_logo']['url'] ) ) : ?>
                                <img class="footer-logo-img" src="<?php echo esc_url( $s['footer_logo']['url'] ); ?>" alt="<?php echo esc_attr( $s['footer_name'] ); ?>">
                            <?php endif; ?>
                        </div>
                        <span class="footer-name"><?php echo esc_html( $s['footer_name'] ); ?></span>
                    </div>
                    <span class="footer-caption">
                        <?php echo wp_kses_post( $s['footer_caption'] ); ?>
                    </span>
                </div>

                <div class="footer-section-left">
                    <div class="footer-social-media-container">
                        <?php
                        $title = isset($s['social_section_title']) ? trim($s['social_section_title']) : '';
                        if ( $title !== '' ) : ?>
                            <span class="footer-social-media-title"><?php echo esc_html( $title ); ?></span>
                        <?php endif; ?>                        <div class="footer-social-media-icons">
                            <?php if ( ! empty( $s['social_items'] ) ) :
                                foreach ( $s['social_items'] as $item ) :
                                    $icon = isset($item['social_icon']['url']) ? $item['social_icon']['url'] : '';
                                    $url  = isset($item['social_url']['url']) ? $item['social_url']['url'] : '#';
                                    $label = (!empty($item['social_title']))
                                        ? $item['social_title']
                                        : ( $url && parse_url($url, PHP_URL_HOST) ? preg_replace('/^www\./', '', parse_url($url, PHP_URL_HOST)) : 'social link' );
                                    ?>
                                    <div>
                                        <a class="footer-social-item"
                                           href="<?php echo esc_url( $url ); ?>"
                                           target="_blank"
                                           rel="noopener"
                                           aria-label="<?php echo esc_attr( $label ); ?>"
                                           title="<?php echo esc_attr( $label ); ?>">
                                            <?php if ( $icon ) : ?>
                                                <img class="social-icon-img" src="<?php echo esc_url( $icon ); ?>" alt="<?php echo esc_attr( $label ); ?>">
                                            <?php endif; ?>
                                        </a>
                                    </div>
                                <?php endforeach;
                            endif; ?>                        </div>
                    </div>

                    <div class="footer-contact-us">
                        <span class="footer-contact-us-title"><?php echo esc_html( $s['contact_title'] ); ?></span>
                        <div class="footer-contact-us-address">
                            <i class="ph-fill ph-map-pin"></i>
                            <span><?php echo esc_html( $s['contact_address'] ); ?></span>
                        </div>
                        <div class="footer-contact-us-phones">
                            <i class="ph-fill ph-phone"></i>
                            <span><?php echo esc_html( $s['contact_phones'] ); ?></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <script>
            (function($){
                function inlineSVGs($scope){
                    const $imgs = $scope.find('.footer-social-media-icons img[src$=".svg"]');
                    $imgs.each(function(){
                        const img = this;
                        let url = img.getAttribute('src');
                        if(!url) return;
                        url = url.replace(/^http:\/\//,'https://');
                        fetch(url)
                            .then(r => { if(!r.ok) throw new Error('SVG load'); return r.text(); })
                            .then(txt => {
                                const svg = new DOMParser().parseFromString(txt,'image/svg+xml').documentElement;
                                const oldCls = (img.getAttribute('class')||'').trim();
                                if (oldCls) svg.setAttribute('class', oldCls + ' W-svg');
                                else svg.classList.add('W-svg');
                                const alt = img.getAttribute('alt');
                                if (alt){ svg.setAttribute('role','img'); svg.setAttribute('aria-label', alt); }
                                $(img).replaceWith(svg);
                            })
                            .catch(err => console.error('خطا در بارگذاری SVG:', err));
                    });
                }

                $(document).ready(function(){
                    $(window).on('elementor/frontend/element_ready/skillbarfooter1w.default', function(e, $scope){
                        inlineSVGs($scope);
                    });

                    inlineSVGs($('body'));

                    new MutationObserver(muts => muts.forEach(m => {
                        if (m.addedNodes.length) inlineSVGs($(m.addedNodes));
                    })).observe(document.body, { childList:true, subtree:true });
                });
            })(jQuery);
        </script>
        <?php
    }
}
?>