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

class Skillbarfooter2W extends \Elementor\Widget_Base {

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

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

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

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

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

    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'     => 'کافه کافیتو جایی‌ست که عطر دانه‌های تازه‌برشته‌شده، با حال و هوای گرم و صمیمی در هم می‌آمیزد. اینجا می‌توانید طعم واقعی قهوه را تجربه کنید، در آرامش بنشینید و لحظه‌های خاص خود را بسازید.',
            ]
        );

        $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:// باشد تا به درستی کار کند. مثال: 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->end_controls_section();

        $this->start_controls_section(
            'map_section',
            [
                'label' => 'نقشه (سمت چپ)',
                'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'map_token',
            [
                'label'       => 'Jawg Access Token',
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => '',
                'placeholder' => 'کلید دسترسی Jawg را وارد کنید',
                'label_block' => true,
                'description' => 'از jawg.io توکن تهیه کنید.',
            ]
        );

        $this->add_control(
            'map_lat',
            [
                'label'   => 'عرض جغرافیایی (Lat)',
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 36.3274,
                'step'    => 0.000001,
            ]
        );

        $this->add_control(
            'map_lng',
            [
                'label'   => 'طول جغرافیایی (Lng)',
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 59.5058,
                'step'    => 0.000001,
            ]
        );

        $this->add_control(
            'map_zoom',
            [
                'label'       => 'بزرگنمایی',
                'type'        => \Elementor\Controls_Manager::NUMBER,
                'min'         => 5,
                'max'         => 22,
                'step'        => 1,
                'default'     => 15,
                'description' => 'محدوده پیشنهادی 12 تا 17',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $s = $this->get_settings_for_display();
        $uid = $this->get_id();
        $map_id = 'map-' . esc_attr( $uid );

        $lat   = isset($s['map_lat']) ? (float)$s['map_lat'] : 0;
        $lng   = isset($s['map_lng']) ? (float)$s['map_lng'] : 0;
        $zoom  = isset($s['map_zoom']) ? (int)$s['map_zoom'] : 15;
        $token = isset($s['map_token']) ? $s['map_token'] : '';

        ?>
        <section class="footer-section-container">
            <div class="footer-section footer-section-2">
                <div class="footer-section-right">
                    <div class="footer-section-right-top">
                        <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-right-bottom">
                        <div class="footer-social-media-container">
                            <?php
                            $title = isset($s['social_section_title']) ? trim($s['social_section_title']) : '';
                            $show  = !isset($s['show_social_title']) || $s['show_social_title'] === 'yes'; // اگر سوییچر داشتی
                            if ( $title !== '' && $show ) : ?>
                                <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' );
                                        ?>
                                        <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>
                                    <?php endforeach;
                                endif; ?>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="footer-section-left">
                    <div id="<?php echo esc_attr( $map_id ); ?>" class="map-section-container" style="min-height:100%;border-radius:var(--border--radius) 0px 0px var(--border--radius);overflow:hidden"></div>
                </div>
            </div>
        </section>

        <script>
            (function($){
                function ensureLeafletLoaded(cb){
                    if (typeof L !== 'undefined') { cb(); return; }
                    var leafletCssId = 'leaflet-css';
                    var leafletJsId  = 'leaflet-js';

                    if (!document.getElementById(leafletCssId)) {
                        var lcss = document.createElement('link');
                        lcss.id = leafletCssId;
                        lcss.rel = 'stylesheet';
                        lcss.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
                        document.head.appendChild(lcss);
                    }
                    function loadJs(){
                        if (document.getElementById(leafletJsId)) return;
                        var ls = document.createElement('script');
                        ls.id = leafletJsId;
                        ls.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
                        ls.onload = cb;
                        document.body.appendChild(ls);
                    }
                    if (document.readyState === 'complete' || document.readyState === 'interactive') {
                        loadJs();
                    } else {
                        document.addEventListener('DOMContentLoaded', loadJs);
                    }
                }

                function initMap($scope){
                    var $mapEl = $scope ? $scope.find('#<?php echo esc_js($map_id); ?>') : $('#<?php echo esc_js($map_id); ?>');
                    if(!$mapEl.length){ return; }

                    var lat   = <?php echo json_encode($lat); ?>;
                    var lng   = <?php echo json_encode($lng); ?>;
                    var zoom  = <?php echo json_encode($zoom); ?>;
                    var token = <?php echo json_encode($token); ?>;

                    if (typeof L === 'undefined') { console.error('Leaflet not loaded'); return; }

                    if ($mapEl.data('leaflet-map-instance')) {
                        try { $mapEl.data('leaflet-map-instance').remove(); } catch(e){}
                        $mapEl.removeData('leaflet-map-instance');
                    }

                    var map = L.map($mapEl[0], { gestureHandling: true }).setView([lat, lng], zoom);

                    var tileUrl = "https://{s}.tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token=" + token;

                    L.tileLayer(tileUrl, {
                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                        maxZoom: 22
                    }).addTo(map);

                    var customIcon = L.divIcon({
                        className: "leaflet-div-icon",
                        html: '<i class="ph-fill ph-map-pin" style="font-size:32px;color:red;"></i>',
                        iconSize: [32, 32],
                        iconAnchor: [16, 32],
                        popupAnchor: [0, -32]
                    });

                    var marker = L.marker([lat, lng], { icon: customIcon }).addTo(map);
                    marker.bindPopup("کافیتو اینجاست");

                    if (window.innerWidth <= 660) {
                        map.dragging.disable();
                        map.scrollWheelZoom.disable();
                        map.on("touchstart", function (e) {
                            if (e.touches && e.touches.length === 2) {
                                map.dragging.enable();
                                map.scrollWheelZoom.enable();
                            }
                        });
                        map.on("touchend", function (e) {
                            if (!e.touches || e.touches.length < 2) {
                                map.dragging.disable();
                                map.scrollWheelZoom.disable();
                            }
                        });
                    }

                    $mapEl.data('leaflet-map-instance', map);

                    var $icons = $scope ? $scope.find('.footer-social-item .social-icon-img') : $('.footer-social-item .social-icon-img');
                    $icons.each(function(){
                        var img = this;
                        var src = img.getAttribute('src');
                        if(src && src.endsWith('.svg')){
                            src = src.replace('http://','https://');
                            fetch(src).then(r=>r.text()).then(function(txt){
                                var svg = new DOMParser().parseFromString(txt,'image/svg+xml').documentElement;
                                svg.classList.add('footer-social-inline-svg');
                                img.parentNode.replaceChild(svg, img);
                            }).catch(function(){});
                        }
                    });
                }

                function boot($scope){
                    ensureLeafletLoaded(function(){
                        initMap($scope);
                    });
                }

                $(window).on('elementor/frontend/element_ready/skillbarfooter2w.default', function(e, $scope){
                    boot($scope);
                });

                $(document).ready(function(){ boot(); });

            })(jQuery);

            (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/skillbarfooter2w.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
    }
}