<?php
/**
 * The template for the CONTENT of the "Get Shortcode" modal.
 */
if ( ! defined( 'ABSPATH' ) ) exit;
?>

<div class="em-shortcode-tabs">
    <div class="em-tab-buttons" style="display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #ddd;">
        <button type="button" class="em-tab-btn active" data-tab="single" style="padding: 10px 15px; border: none; background: #0073aa; color: white; cursor: pointer;">
            <?php _e('Single Event', 'event-monster'); ?>
        </button>
        <button type="button" class="em-tab-btn" data-tab="list" style="padding: 10px 15px; border: none; background: #f1f1f1; color: #333; cursor: pointer;">
            <?php _e('Event List', 'event-monster'); ?>
        </button>
        <button type="button" class="em-tab-btn" data-tab="calendar" style="padding: 10px 15px; border: none; background: #f1f1f1; color: #333; cursor: pointer;">
            <?php _e('Calendar', 'event-monster'); ?>
        </button>
    </div>

    <!-- Single Event Tab -->
    <div class="em-tab-content" id="em-tab-single">
        <p><?php _e('Copy this shortcode and paste it into any post or page to display this specific event.', 'event-monster'); ?></p>

        <div class="em-shortcode-wrapper" style="display: flex; gap: 10px; margin-top: 10px;">
            <input type="text" id="em-shortcode-text" readonly style="width: 100%; font-family: monospace; background-color: #f1f1f1;">
            <button type="button" class="em-copy-shortcode-button btn btn-primary" data-target="em-shortcode-text">
                <?php _e('Copy', 'event-monster'); ?>
            </button>
        </div>
    </div>

    <!-- Event List Tab -->
    <div class="em-tab-content" id="em-tab-list" style="display: none;">
        <p><?php _e('Use this shortcode to display a list of all events with filtering options.', 'event-monster'); ?></p>

        <div class="em-shortcode-wrapper" style="display: flex; gap: 10px; margin-top: 10px;">
            <input type="text" id="em-list-shortcode-text" readonly value="[EM-LIST]" style="width: 100%; font-family: monospace; background-color: #f1f1f1;">
            <button type="button" class="em-copy-shortcode-button btn btn-primary" data-target="em-list-shortcode-text">
                <?php _e('Copy', 'event-monster'); ?>
            </button>
        </div>

        <div style="margin-top: 15px;">
            <h4><?php _e('Available Attributes:', 'event-monster'); ?></h4>
            <ul style="margin-left: 20px;">
                <li><code>limit</code> - <?php _e('Number of events to show (-1 for all)', 'event-monster'); ?></li>
                <li><code>category</code> - <?php _e('Filter by specific category', 'event-monster'); ?></li>
                <li><code>show_filters</code> - <?php _e('Show/hide filter section (yes/no)', 'event-monster'); ?></li>
                <li><code>view_mode</code> - <?php _e('How to view details (page/modal)', 'event-monster'); ?></li>
                <li><code>columns</code> - <?php _e('Number of columns (1-4)', 'event-monster'); ?></li>
            </ul>

            <p><strong><?php _e('Example:', 'event-monster'); ?></strong></p>
            <div class="em-shortcode-wrapper" style="display: flex; gap: 10px; margin-top: 10px;">
                <input type="text" id="em-list-example-text" readonly value='[EM-LIST limit="6" columns="2" view_mode="modal"]' style="width: 100%; font-family: monospace; background-color: #f1f1f1;">
                <button type="button" class="em-copy-shortcode-button btn btn-primary" data-target="em-list-example-text">
                    <?php _e('Copy', 'event-monster'); ?>
                </button>
            </div>
        </div>
    </div>

    <!-- Calendar Tab -->
    <div class="em-tab-content" id="em-tab-calendar" style="display: none;">
        <p><?php _e('Use this shortcode to display events in an interactive calendar view.', 'event-monster'); ?></p>

        <div class="em-shortcode-wrapper" style="display: flex; gap: 10px; margin-top: 10px;">
            <input type="text" id="em-calendar-shortcode-text" readonly value="[EM-CALENDAR]" style="width: 100%; font-family: monospace; background-color: #f1f1f1;">
            <button type="button" class="em-copy-shortcode-button btn btn-primary" data-target="em-calendar-shortcode-text">
                <?php _e('Copy', 'event-monster'); ?>
            </button>
        </div>

        <div style="margin-top: 15px;">
            <h4><?php _e('Available Attributes:', 'event-monster'); ?></h4>
            <ul style="margin-left: 20px;">
                <li><code>view</code> - <?php _e('Initial view (dayGridMonth, timeGridWeek, timeGridDay, listMonth)', 'event-monster'); ?></li>
                <li><code>height</code> - <?php _e('Calendar height (auto, 600, 800, etc.)', 'event-monster'); ?></li>
                <li><code>category</code> - <?php _e('Filter by specific category', 'event-monster'); ?></li>
                <li><code>show_filters</code> - <?php _e('Show/hide filter controls (yes/no)', 'event-monster'); ?></li>
                <li><code>view_mode</code> - <?php _e('Event click behavior (modal, redirect)', 'event-monster'); ?></li>
            </ul>

            <p><strong><?php _e('Examples:', 'event-monster'); ?></strong></p>

            <!-- Basic Calendar -->
            <div style="margin-bottom: 10px;">
                <label style="font-weight: bold;"><?php _e('Basic Calendar:', 'event-monster'); ?></label>
                <div class="em-shortcode-wrapper" style="display: flex; gap: 10px; margin-top: 5px;">
                    <input type="text" id="em-calendar-basic-text" readonly value='[EM-CALENDAR]' style="width: 100%; font-family: monospace; background-color: #f1f1f1;">
                    <button type="button" class="em-copy-shortcode-button btn btn-primary" data-target="em-calendar-basic-text">
                        <?php _e('Copy', 'event-monster'); ?>
                    </button>
                </div>
            </div>

            <!-- Week View -->
            <div style="margin-bottom: 10px;">
                <label style="font-weight: bold;"><?php _e('Week View:', 'event-monster'); ?></label>
                <div class="em-shortcode-wrapper" style="display: flex; gap: 10px; margin-top: 5px;">
                    <input type="text" id="em-calendar-week-text" readonly value='[EM-CALENDAR view="timeGridWeek" height="700"]' style="width: 100%; font-family: monospace; background-color: #f1f1f1;">
                    <button type="button" class="em-copy-shortcode-button btn btn-primary" data-target="em-calendar-week-text">
                        <?php _e('Copy', 'event-monster'); ?>
                    </button>
                </div>
            </div>

            <!-- Category Filter -->
            <div style="margin-bottom: 10px;">
                <label style="font-weight: bold;"><?php _e('With Category Filter:', 'event-monster'); ?></label>
                <div class="em-shortcode-wrapper" style="display: flex; gap: 10px; margin-top: 5px;">
                    <input type="text" id="em-calendar-category-text" readonly value='[EM-CALENDAR category="Conference" show_filters="yes"]' style="width: 100%; font-family: monospace; background-color: #f1f1f1;">
                    <button type="button" class="em-copy-shortcode-button btn btn-primary" data-target="em-calendar-category-text">
                        <?php _e('Copy', 'event-monster'); ?>
                    </button>
                </div>
            </div>

            <!-- Modal View -->
            <div style="margin-bottom: 10px;">
                <label style="font-weight: bold;"><?php _e('With Modal View:', 'event-monster'); ?></label>
                <div class="em-shortcode-wrapper" style="display: flex; gap: 10px; margin-top: 5px;">
                    <input type="text" id="em-calendar-modal-text" readonly value='[EM-CALENDAR view_mode="modal" show_filters="yes"]' style="width: 100%; font-family: monospace; background-color: #f1f1f1;">
                    <button type="button" class="em-copy-shortcode-button btn btn-primary" data-target="em-calendar-modal-text">
                        <?php _e('Copy', 'event-monster'); ?>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<p id="em-copy-success-message" style="display: none; color: green; margin-top: 10px;"><?php _e('Copied to clipboard!', 'event-monster'); ?></p>

<script>
jQuery(document).ready(function($) {
    // Tab switching
    $('.em-tab-btn').on('click', function() {
        const tab = $(this).data('tab');

        // Update button states
        $('.em-tab-btn').removeClass('active').css({
            'background': '#f1f1f1',
            'color': '#333'
        });
        $(this).addClass('active').css({
            'background': '#0073aa',
            'color': 'white'
        });

        // Show/hide content
        $('.em-tab-content').hide();
        $('#em-tab-' + tab).show();
    });

    // Copy functionality
    $('.em-copy-shortcode-button').on('click', function() {
        const targetId = $(this).data('target');
        const input = document.getElementById(targetId);

        input.select();
        input.setSelectionRange(0, 99999); // For mobile devices

        try {
            document.execCommand('copy');
            $('#em-copy-success-message').show().delay(2000).fadeOut();
        } catch (err) {
            console.error('Failed to copy: ', err);
        }
    });
});
</script>