<?php
/**
 * PDF Signature Form Template - Interactive On-PDF Filling
 */

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

$agreement_type = isset( $atts['agreement_type'] ) ? $atts['agreement_type'] : 'default';
$settings = get_option( 'swpdf_settings', array() );
$require_email_first = ! empty( $settings['require_email_first'] );
?>

<div class="psf-signature-wrapper">
    <div class="psf-signature-container">
        <h2 class="agreement-title"><?php echo esc_html( $atts['agreement_title'] ); ?></h2>
        
        <?php if ( $require_email_first ) : ?>
        <!-- Email Gate -->
        <div id="email-gate" class="email-gate-section">
            <div style="max-width: 500px; margin: 50px auto; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center;">
                <div style="font-size: 48px; margin-bottom: 20px;">📧</div>
                <h3 style="margin: 0 0 10px 0;">Enter Your Email to Continue</h3>
                <p style="color: #666; margin-bottom: 30px;">Please provide your email address to access and sign the document.</p>
                <input type="email" id="gate-email" class="gate-email-input" placeholder="your@email.com" style="width: 100%; padding: 15px; font-size: 16px; border: 2px solid #ddd; border-radius: 5px; margin-bottom: 20px; box-sizing: border-box;">
                <button type="button" id="gate-continue" class="btn btn-primary btn-large" style="width: 100%; padding: 15px; font-size: 16px;">Continue to Document →</button>
                <p style="color: #999; font-size: 12px; margin-top: 20px;">Your email will be used to send you a copy of the signed document.</p>
            </div>
        </div>
        <?php endif; ?>
        
        <!-- PDF with Interactive Fields -->
        <div class="pdf-interactive-section" <?php echo $require_email_first ? 'style="display:none;"' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string output ?>>
            <div class="pdf-toolbar">
                <button type="button" id="auto-detect-fields" class="btn btn-primary" style="display:none;">
                    🔍 Auto-Detect Fields
                </button>
                <button type="button" id="start-filling" class="btn btn-success" style="display:none;">
                    ✏️ Start Filling Form
                </button>
                <span id="page-info" style="margin: 0 20px;">
                    Page <span id="current-page">1</span> of <span id="total-pages">1</span>
                </span>
                <button type="button" id="prev-page" class="btn btn-secondary" disabled>&larr;</button>
                <button type="button" id="next-page" class="btn btn-secondary">&rarr;</button>
            </div>
            
            <div id="pdf-viewer" class="pdf-viewer-interactive">
                <div class="pdf-canvas-wrapper">
                    <canvas id="pdf-canvas"></canvas>
                    <div id="pdf-field-overlay" class="pdf-field-overlay"></div>
                </div>
            </div>
            
            <!-- Current Field Input - Adobe Style -->
            <div id="current-field-input" class="current-field-input" style="display: none;">
                <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px;">
                    <div class="field-input-card">
                        <label id="field-label" class="field-label-large">Field Name</label>
                        <input type="text" id="field-input" class="field-input-large" placeholder="Type here...">
                        <div class="field-navigation">
                            <button type="button" id="prev-field" class="btn btn-secondary">← PREVIOUS</button>
                            <span id="field-progress">Field 1 of 12</span>
                            <button type="button" id="next-field" class="btn btn-primary btn-large">NEXT →</button>
                        </div>
                    </div>
                    
                    <!-- Progress Summary -->
                    <div class="progress-summary">
                        <h4 style="margin-top: 0;">📝 Information Entered</h4>
                        <div id="filled-fields-summary" style="font-size: 13px; line-height: 1.8;">
                            <p style="color: #999;">Start filling to see your progress...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Signature Overlay -->
        <div id="signature-overlay" class="signature-overlay" style="display: none;">
            <div class="signature-modal">
                <h3>✍️ Sign the Agreement</h3>
                <p>Please sign in the box below to complete:</p>
                <div class="signature-pad-wrapper">
                    <canvas id="signature-canvas" width="600" height="200"></canvas>
                </div>
                <div class="signature-actions">
                    <button type="button" id="clear-signature" class="btn btn-secondary">Clear</button>
                    <button type="button" id="submit-signature" class="btn btn-success btn-large">✓ Submit Agreement</button>
                </div>
            </div>
        </div>
        
        <!-- Hidden form for data storage -->
        <form id="psf-signature-form" class="psf-signature-form" data-agreement-type="<?php echo esc_attr( $agreement_type ); ?>">
            <input type="hidden" id="form-data-json" name="form_data">
            <input type="hidden" id="signature-data" name="signature_data">
        </form>
        
        <div id="message-container" class="message-container"></div>
    </div>
</div>

