<?php
/**
 * Tab Template Elementor
 *
 * Gestione dei template Elementor per i necrologi
 *
 * @package AnnunciFunebri
 * @since 4.8.0
 */

if (!defined('ABSPATH')) exit;

// Verifica se Elementor è attivo
if (!did_action('elementor/loaded')) {
    ?>
    <div class="notice notice-warning">
        <p><strong>Elementor non è installato o attivo.</strong></p>
        <p>Per utilizzare i template personalizzabili con drag & drop, installa il plugin <a href="https://wordpress.org/plugins/elementor/" target="_blank">Elementor</a>.</p>
        <p><a href="https://wordpress.org/plugins/elementor/" class="button button-primary" target="_blank">Installa Elementor</a></p>
    </div>
    <?php
    return;
}

// Ottieni tutti i template Elementor esistenti
$template_args = array(
    'post_type' => ANNFU_Gestore_Template::TIPO_POST_TEMPLATE,
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'DESC'
);
$templates = get_posts($template_args);

?>

<h2>Template Personalizzati con Elementor</h2>

<div class="annfu-template-elementor-intro" style="background: #f0f9ff; border-left: 4px solid #0073aa; padding: 15px; margin-bottom: 25px;">
    <h3 style="margin-top: 0;">📋 Come Funziona</h3>
    <p><strong>Puoi creare template personalizzati per le pagine del plugin usando Elementor!</strong></p>
    <ol style="margin-left: 20px;">
        <li><strong>Crea un Template:</strong> Clicca su "Crea Nuovo Template" qui sotto</li>
        <li><strong>Assegna Tipo Pagina:</strong> Nella sidebar destra, seleziona per quale tipo di pagina vuoi usare il template (Lista Annunci, Dettaglio Annuncio, Diretta Streaming)</li>
        <li><strong>Personalizza con Elementor:</strong> Usa i widget standard di Elementor o quelli nella categoria "Annunci Funebri" per costruire il layout</li>
        <li><strong>Seleziona dalle Impostazioni:</strong> Vai su "Impostazioni" e scegli il template dal dropdown accanto a ogni tipo di pagina</li>
        <li><strong>Pubblica:</strong> I visitatori vedranno automaticamente il nuovo layout!</li>
    </ol>
    <p><strong>Widget disponibili:</strong> Nome Defunto, Foto Defunto, Testo Principale, Cerimonie, Condoglianze e molti altri</p>
</div>

<?php if (empty($templates)): ?>
    <div class="notice notice-info">
        <p><strong>Nessun template Elementor creato.</strong></p>
        <p>Crea il tuo primo template personalizzato per i necrologi usando il pulsante qui sotto!</p>
    </div>
<?php else: ?>
    <h3>Template Esistenti (<?php echo count($templates); ?>)</h3>
    <table class="wp-list-table widefat fixed striped" style="margin-bottom: 20px;">
        <thead>
            <tr>
                <th style="width: 40%;">Nome Template</th>
                <th style="width: 25%;">Tipo Pagina</th>
                <th style="width: 35%;">Azioni</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($templates as $template):
                $tipo_pagina = get_post_meta($template->ID, ANNFU_Gestore_Template::META_TIPO_PAGINA, true);

                // Determina il label del tipo di pagina
                switch ($tipo_pagina) {
                    case 'lista_annunci':
                        $tipo_label = '<span style="background: #2196f3; color: white; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: bold;">LISTA ANNUNCI</span>';
                        break;
                    case 'dettaglio_annuncio':
                        $tipo_label = '<span style="background: #ff9800; color: white; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: bold;">DETTAGLIO ANNUNCIO</span>';
                        break;
                    case 'diretta_streaming':
                        $tipo_label = '<span style="background: #e91e63; color: white; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: bold;">DIRETTA STREAMING</span>';
                        break;
                    default:
                        $tipo_label = '<span style="color: #999;">Non assegnato</span>';
                }

                // URL per modificare con Elementor
                $edit_url = admin_url('post.php?post=' . $template->ID . '&action=elementor');
                $edit_wp_url = admin_url('post.php?post=' . $template->ID . '&action=edit');
                $delete_url = get_delete_post_link($template->ID);
            ?>
            <tr>
                <td>
                    <strong><?php echo esc_html($template->post_title); ?></strong>
                    <div style="font-size: 12px; color: #666; margin-top: 3px;">
                        Creato il <?php echo get_the_date('d/m/Y H:i', $template->ID); ?>
                    </div>
                </td>
                <td><?php echo wp_kses_post($tipo_label); ?></td>
                <td>
                    <a href="<?php echo esc_url($edit_url); ?>" class="button button-primary" style="margin-right: 8px;">
                        <span class="dashicons dashicons-edit" style="line-height: 1.4;"></span> Modifica con Elementor
                    </a>
                    <a href="<?php echo esc_url($edit_wp_url); ?>" class="button" style="margin-right: 8px;">
                        <span class="dashicons dashicons-admin-settings" style="line-height: 1.4;"></span> Tipo Pagina
                    </a>
                    <a href="<?php echo esc_url($delete_url); ?>" class="button" style="color: #d63638;" onclick="return confirm('Sei sicuro di voler eliminare questo template?');">
                        <span class="dashicons dashicons-trash" style="line-height: 1.4;"></span> Elimina
                    </a>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
<?php endif; ?>

<div style="margin-top: 30px;">
    <a href="<?php echo esc_url(admin_url('post-new.php?post_type=' . ANNFU_Gestore_Template::TIPO_POST_TEMPLATE)); ?>" class="button button-primary button-large">
        <span class="dashicons dashicons-plus-alt" style="line-height: 1.6;"></span> Crea Nuovo Template Elementor
    </a>
</div>

<div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin-top: 25px;">
    <h3 style="margin-top: 0;">💡 Suggerimenti</h3>
    <ul style="margin-left: 20px;">
        <li><strong>Tipo Pagina:</strong> Ogni template può essere assegnato a un tipo di pagina (Lista, Dettaglio, Streaming)</li>
        <li><strong>Selezione Manuale:</strong> Vai su "Impostazioni" per scegliere quale template usare per ogni tipo di pagina</li>
        <li><strong>Template Non Assegnati:</strong> I template senza tipo di pagina non compariranno nelle select delle impostazioni</li>
        <li><strong>Compatibilità:</strong> I template PHP esistenti continuano a funzionare come fallback se non selezioni un template Elementor</li>
        <li><strong>Flessibilità:</strong> Puoi creare più template per lo stesso tipo di pagina e cambiarli facilmente dalle impostazioni</li>
    </ul>
</div>

<div style="background: #e7f3ff; border-left: 4px solid #0073aa; padding: 15px; margin-top: 15px;">
    <h3 style="margin-top: 0;">🎨 Widget Disponibili nella Categoria "Annunci Funebri"</h3>

    <h4 style="margin-top: 15px; margin-bottom: 10px;">👤 Categoria: Persona</h4>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px;">
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>📝 Nome Defunto</strong><br>
            <small>Nome completo con titolo</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>📷 Foto Defunto</strong><br>
            <small>Foto con lightbox</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>📅 Date Defunto</strong><br>
            <small>Nascita e morte</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>🔢 Età Defunto</strong><br>
            <small>Età con prefisso/suffisso</small>
        </div>
    </div>

    <h4 style="margin-top: 15px; margin-bottom: 10px;">📄 Categoria: Testi</h4>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px;">
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>📝 Testo Apertura</strong><br>
            <small>Testo di apertura</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>📄 Testo Principale</strong><br>
            <small>Corpo del necrologio</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>💬 Citazione</strong><br>
            <small>Citazione/massima</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>📋 Chiusura Onoranza</strong><br>
            <small>Testo finale onoranza</small>
        </div>
    </div>

    <h4 style="margin-top: 15px; margin-bottom: 10px;">⛪ Categoria: Cerimonie</h4>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px;">
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>⛪ Funerale</strong><br>
            <small>Data, ora, luogo, mappa</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>🙏 Rosario</strong><br>
            <small>Info santo rosario</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>⚰️ Sepoltura</strong><br>
            <small>Info sepoltura</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>🌤️ Meteo</strong><br>
            <small>Previsioni meteo cerimonia</small>
        </div>
    </div>

    <h4 style="margin-top: 15px; margin-bottom: 10px;">📺 Categoria: Media</h4>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px;">
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>🔴 Streaming Live</strong><br>
            <small>Pulsante diretta streaming</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>🖼️ Epigrafe</strong><br>
            <small>Manifesto funebre</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>📸 Galleria Foto</strong><br>
            <small>Galleria fotografica</small>
        </div>
    </div>

    <h4 style="margin-top: 15px; margin-bottom: 10px;">💬 Categoria: Interazioni</h4>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px;">
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #ff9800;">
            <strong>📑 Tabs Annuncio</strong> <span style="background: #ff9800; color: white; font-size: 9px; padding: 2px 5px; border-radius: 3px;">NESTED</span><br>
            <small>Tab intelligenti con visibilità automatica. Richiede Nested Elements attivo.</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>✍️ Form Condoglianze</strong><br>
            <small>Form inserimento cordoglio</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>💌 Lista Condoglianze</strong><br>
            <small>Messaggi di cordoglio</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>👥 Partecipazioni</strong><br>
            <small>Partecipazioni al lutto</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>📷 Form Foto Cordoglio</strong><br>
            <small>Caricamento foto ricordo</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>💐 Form Fiori</strong><br>
            <small>Ordine composizioni floreali</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>🌸 Floremoria</strong><br>
            <small>Integrazione Floremoria</small>
        </div>
    </div>

    <h4 style="margin-top: 15px; margin-bottom: 10px;">ℹ️ Categoria: Extra</h4>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px;">
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>🏢 Info Onoranza</strong><br>
            <small>Dati onoranza funebre</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>🔗 Social Sharing</strong><br>
            <small>Pulsanti condivisione</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #4caf50;">
            <strong>❤️ Donazioni</strong><br>
            <small>Opere di bene</small>
        </div>
    </div>

    <h4 style="margin-top: 15px; margin-bottom: 10px;">📋 Categoria: Lista Annunci</h4>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px;">
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #2196f3;">
            <strong>📋 Lista Annunci</strong><br>
            <small>Griglia degli annunci</small>
        </div>
        <div style="background: white; padding: 10px; border-radius: 4px; border: 2px solid #2196f3;">
            <strong>🔍 Ricerca</strong><br>
            <small>Form di ricerca annunci</small>
        </div>
    </div>

    <p style="margin-top: 20px; padding: 15px; background: #d4edda; border-left: 4px solid #28a745; border-radius: 4px;">
        <strong>✅ Disponibili ora: 27 widget completi!</strong><br>
        <small>Tutti i widget sono pronti all'uso con personalizzazione completa di stile, colori, tipografia e layout.</small>
    </p>

    <p style="margin-top: 15px; padding: 15px; background: #fff3cd; border-left: 4px solid #ff9800; border-radius: 4px;">
        <strong>⭐ Widget Consigliato: Tabs Annuncio</strong><br>
        <small>Il widget "Tabs Annuncio" gestisce automaticamente la visibilità dei tab (cordogli, foto, fiori, donazioni) in base ai dati dell'annuncio. Usa questo widget invece di creare manualmente i tab con Elementor.</small>
        <br><br>
        <strong>⚠️ Requisiti:</strong><br>
        <small>
            Per utilizzare questo widget è necessario attivare i <strong>Nested Elements</strong> in Elementor:<br>
            <code>Elementor → Impostazioni → Funzionalità → Nested Elements → Attiva</code>
        </small>
    </p>
</div>

<style>
.annfu-template-elementor-intro h3 {
    color: #0073aa;
}
.annfu-template-elementor-intro ol li {
    margin-bottom: 8px;
}
</style>
