<?php
// Exit if accessed directly to ensure security.
if (!defined('ABSPATH')) {
    exit;
}

$iafwzdesk_integration_name = "Integration #" . ($IAFWZDESK_Field_MappingDBInstance->getFieldMappingTotalCount() + 1);

?>
<!-- Setup Popup Overlay -->
<div id="iafwzdesk-setup-popupOverlay" class="iafwzdesk-setup-popup-overlay">
    <div class="iafwzdesk-setup-popup-content">
        <!-- Close Button -->
        <span class="iafwzdesk-setup-close" onclick="window.location.href='<?php echo esc_url(admin_url('admin.php?page=integrate-with-zoho-desk&tab=setup')); ?>'">&times;</span>

        <h3 class="iafwzdesk-setup-popup-title">
            <?php esc_html_e('Add Integration', 'integrate-with-zoho-desk'); ?>
        </h3>

        <div class="iafwzdesk-setup-menu">
            <table class="iafwzdesk-setup-table">
                <!-- Integration Name -->
                <tr class="iafwzdesk-setup-row">
                    <td class="iafwzdesk-setup-title"><?php esc_html_e('Integration Name:', 'integrate-with-zoho-desk'); ?>
                        <div class="iafwzdesk-help-icon-wrapper">
                            <span class="iafwzdesk-help-icon">?</span>
                            <div class="iafwzdesk-help-tooltip">
                                <p>A unique name to identify this integration.</p>
                            </div>
                        </div>
                    </td>
                    <td>
                        <input type="text" class="iafwzdesk-setup-input" id="iafwzdesk-setup-integrationName" placeholder="Enter integration name" value="<?php echo esc_attr($iafwzdesk_integration_name); ?>">
                    </td>
                </tr>

                <!-- Form Name -->
                <tr class="iafwzdesk-setup-row">
                    <td class="iafwzdesk-setup-title"><?php esc_html_e('Select Form:', 'integrate-with-zoho-desk'); ?>
                        <div class="iafwzdesk-help-icon-wrapper">
                            <span class="iafwzdesk-help-icon">?</span>
                            <div class="iafwzdesk-help-tooltip">
                                <span>Select a form to integrate with Zoho Desk for data syncing.</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <select name="formName" class="iafwzdesk-setup-input" id="iafwzdesk-setup-formName" onchange="iafwzdesk_handleFormChange()">
                            <option value=""><?php esc_html_e('Select', 'integrate-with-zoho-desk'); ?></option>
                            <?php foreach ($iafwzdesk_form_group_list as $iafwzdesk_group_id => $iafwzdesk_group_data): ?>
                                <optgroup label="<?php echo esc_attr($iafwzdesk_group_data['form_group_name']); ?>">
                                    <?php foreach ($iafwzdesk_group_data['forms'] as $iafwzdesk_form): ?>
                                        <option value="<?php echo esc_attr($iafwzdesk_group_id . '_' . $iafwzdesk_form['id']); ?>">
                                            <?php echo esc_html($iafwzdesk_form['name']); ?>
                                        </option>
                                    <?php endforeach; ?>
                                </optgroup>
                            <?php endforeach; ?>
                        </select>
                    </td>
                </tr>

                <!-- Account Name -->
                <tr class="iafwzdesk-setup-row">
                    <td class="iafwzdesk-setup-title"><?php esc_html_e('Select Account:', 'integrate-with-zoho-desk'); ?>
                        <div class="iafwzdesk-help-icon-wrapper">
                            <span class="iafwzdesk-help-icon">?</span>
                            <div class="iafwzdesk-help-tooltip">
                                <span>
                                    Select the Zoho account to push data.</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <select name="accountName" class="iafwzdesk-setup-input" id="iafwzdesk-setup-accountName" onchange="iafwzdesk_handleAccountChange()">
                            <option value=""><?php esc_html_e('Select', 'integrate-with-zoho-desk'); ?></option>
                            <?php
                            // Loop through the account list and display each account directly
                            foreach ($iafwzdesk_account_group_list as $iafwzdesk_account) {
                                $iafwzdesk_account_name = isset($iafwzdesk_account['account_name']) ? $iafwzdesk_account['account_name'] : '';
                                $iafwzdesk_account_id = isset($iafwzdesk_account['account_id']) ? $iafwzdesk_account['account_id'] : '';
                            ?>
                                <option value="<?php echo esc_attr($iafwzdesk_account_id); ?>">
                                    <?php echo esc_html($iafwzdesk_account_name); ?>
                                </option>
                            <?php } ?>
                        </select>

                    </td>
                </tr>

                <!-- Module Name -->
                <tr class="iafwzdesk-setup-row">
                    <td class="iafwzdesk-setup-title"><?php esc_html_e('Select Department:', 'integrate-with-zoho-desk'); ?>
                        <div class="iafwzdesk-help-icon-wrapper">
                            <span class="iafwzdesk-help-icon">?</span>
                            <div class="iafwzdesk-help-tooltip">
                                <span>Select the Zoho Desk department where the ticket should be created.</span>
                            </div>
                        </div>
                    </td>
                    <td>
                        <select name="moduleName" class="iafwzdesk-setup-input" id="iafwzdesk-setup-moduleName" onchange="iafwzdesk_handleModuleChange()">
                            <option value=""><?php esc_html_e('Select', 'integrate-with-zoho-desk'); ?></option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>

        <!-- Alert Text -->
        <div class="iafwzdesk-setup-loading-text">
            <p></p>
        </div>


        <div id="iafwzdesk-setup-fieldMapping-area" style="display:none;">
            <!-- Field Mapping -->
            <div id="iafwzdesk-setup-fieldMapping" style="margin-top:30px;" class="iafwzdesk-setup-menu">
                <table id="iafwzdesk-setup-fieldMapping-table" class="iafwzdesk-setup-table">
                    <thead>
                        <tr>
                            <th class="iafwzdesk-setup-th" width="43%"><?php esc_html_e('Select Form Fields', 'integrate-with-zoho-desk'); ?>
                                <div class="iafwzdesk-help-icon-wrapper">
                                    <span class="iafwzdesk-help-icon">?</span>
                                    <div class="iafwzdesk-help-tooltip">
                                        <span>Select the form field to map with Zoho Desk fields.</span>
                                    </div>
                                </div>
                            </th>
                            <th class="iafwzdesk-setup-th" width="43%"><?php esc_html_e('Select Desk Fields', 'integrate-with-zoho-desk'); ?>
                                <div class="iafwzdesk-help-icon-wrapper">
                                    <span class="iafwzdesk-help-icon">?</span>
                                    <div class="iafwzdesk-help-tooltip">
                                        <span>Choose the Zoho Desk field to map with the selected form field.</span>
                                    </div>
                                </div>
                            </th>
                            <th class="iafwzdesk-setup-th" style="border: none; background: none;"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <!-- Filter Container -->
            <div class="iafwzdesk-setup-filter-container">
                <!-- Filter Header -->
                <div class="iafwzdesk-setup-filter-header" onclick="iafwzdesk_toggleFilterArea()">
                    <p class="iafwzdesk-setup-note-heading">Filter Criteria</p>
                    <span id="iafwzdesk-setup-filter-arrow" class="iafwzdesk-setup-filter-header-arrow">▼</span>
                </div>

                <!-- Filter Content -->
                <div class="iafwzdesk-setup-filter-content">
                    <div class="iafwzdesk-setup-filter-clear-all" onclick="iafwzdesk_clearAll()"><?php esc_html_e('Clear All', 'integrate-with-zoho-desk'); ?></div>
                    <div id="iafwzdesk-setup-filter-group-container" class="iafwzdesk-setup-filter-group-container">
                        <div class="iafwzdesk-setup-filter-group">
                            <div class="iafwzdesk-setup-filter-row">
                                <select class="iafwzdesk-setup-filter-field">
                                    <option value="" disabled selected><?php esc_html_e('Select Field', 'integrate-with-zoho-desk'); ?></option>
                                </select>
                                <select class="iafwzdesk-setup-filter-condition">
                                    <option value="" disabled selected><?php esc_html_e('Choose Condition', 'integrate-with-zoho-desk'); ?></option>
                                    <option value="contains">Contains</option>
                                    <option value="not_contains">Does Not Contain</option>
                                    <option value="equals">Equals</option>
                                    <option value="not_equals">Does Not Equal</option>
                                    <option value="starts_with">Starts With</option>
                                    <option value="ends_with">Ends With</option>
                                    <option value="greater_than">Greater Than</option>
                                    <option value="less_than">Less Than</option>
                                    <option value="is_empty">Is Empty</option>
                                    <option value="is_not_empty">Is Not Empty</option>
                                </select>
                                <input type="text" class="iafwzdesk-setup-filter-value" placeholder="<?php esc_attr_e('Enter value', 'integrate-with-zoho-desk'); ?>" />
                                <div class="iafwzdesk-setup-filter-actions">
                                    <button class="iafwzdesk-setup-filter-add-icon" onclick="iafwzdesk_addFilter(this)">+</button>
                                    <button class="iafwzdesk-setup-filter-close-icon" onclick="iafwzdesk_removeFilter(this)">×</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Filter Container -->
            <div class="iafwzdesk-setup-note">

            </div>
            <!-- Submit Button -->
            <div class="iafwzdesk-auth-button-container" id="iafwzdesk-setup-button">
                <button type="submit" class="iafwzdesk-auth-button" onclick="iafwzdesk_handleButtonClick(this)">
                    <?php esc_html_e('Save Mapping', 'integrate-with-zoho-desk'); ?>
                </button>
            </div>
        </div>
    </div>
</div>
