<?php
/**
 * Proposal Form View
 */
if (!defined('ABSPATH')) exit;

$page_title = $is_new ? __('New Proposal', 'freelance-studio') : __('Edit Proposal', 'freelance-studio');
$services = $proposal ? $proposal->services : array();
$custom_sections = $proposal ? ($proposal->custom_sections ?: array()) : array();

// Separate sections by position
$sections_before = array_filter($custom_sections, function($s) { return ($s['position'] ?? 'before_pricing') === 'before_pricing'; });
$sections_after = array_filter($custom_sections, function($s) { return ($s['position'] ?? '') === 'after_pricing'; });

// Section templates by position
$templates_before = isset($section_templates) ? array_filter($section_templates, function($t) { return $t->position === 'before_pricing'; }) : array();
$templates_after = isset($section_templates) ? array_filter($section_templates, function($t) { return $t->position === 'after_pricing'; }) : array();
?>
<div class="wrap fs-wrap">
    <div class="fs-page-header">
        <h1><?php echo esc_html($page_title); ?></h1>
        <a href="<?php echo  esc_url( admin_url('admin.php?page=fs-proposals') ); ?>" class="button"><?php esc_html_e('← Back to Proposals', 'freelance-studio'); ?></a>
    </div>
    
    <form method="post" id="fs-proposal-form">
        <?php wp_nonce_field('fs_save_proposal', 'fs_proposal_nonce'); ?>
        <input type="hidden" name="action" value="<?php echo $is_new ? 'create' : 'update'; ?>">
        <?php if (!$is_new): ?>
            <input type="hidden" name="proposal_id" value="<?php echo  intval( $proposal->id ); ?>">
        <?php endif; ?>
        
        <div class="fs-form-grid">
            <!-- Main Column -->
            <div class="fs-form-main">
                <!-- Basic Info -->
                <div class="fs-form-section">
                    <h2><?php esc_html_e('Proposal Details', 'freelance-studio'); ?></h2>
                    
                    <div class="fs-form-row">
                        <div class="fs-form-group required" style="flex: 2;">
                            <label for="title"><?php esc_html_e('Proposal Title', 'freelance-studio'); ?></label>
                            <input type="text" name="title" id="title" required
                                   value="<?php echo $proposal ? esc_attr($proposal->title) : ''; ?>"
                                   placeholder="<?php esc_attr_e('e.g., Website Redesign, Monthly Maintenance', 'freelance-studio'); ?>">
                        </div>
                        <div class="fs-form-group required">
                            <label for="client_id"><?php esc_html_e('Client', 'freelance-studio'); ?></label>
                            <select name="client_id" id="client_id" required>
                                <option value=""><?php esc_html_e('Select client...', 'freelance-studio'); ?></option>
                                <?php foreach ($clients as $c): ?>
                                    <option value="<?php echo  intval( $c->id ); ?>" <?php selected($proposal ? $proposal->client_id : ($selected_client_id ?? 0), $c->id); ?>>
                                        <?php echo esc_html($c->company_name ?: $c->name); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    
                    <div class="fs-form-row">
                        <div class="fs-form-group">
                            <label for="start_date"><?php esc_html_e('Start Date', 'freelance-studio'); ?></label>
                            <input type="date" name="start_date" id="start_date"
                                   value="<?php echo $proposal ? esc_attr($proposal->start_date) : ''; ?>">
                        </div>
                        <div class="fs-form-group">
                            <label for="valid_until"><?php esc_html_e('Valid Until', 'freelance-studio'); ?></label>
                            <input type="date" name="valid_until" id="valid_until"
                                   value="<?php echo  esc_attr( $proposal ? esc_attr($proposal->valid_until) : gmdate('Y-m-d', strtotime('+' . ($default_valid_days ?? 30) . ' days')) ); ?>">
                        </div>
                    </div>
                </div>
                
                <!-- Custom Sections: Before Pricing -->
                <div class="fs-form-section fs-custom-sections-container" data-position="before_pricing">
                    <div class="fs-section-header">
                        <h2><?php esc_html_e('Additional Sections', 'freelance-studio'); ?></h2>
                        <div class="fs-section-actions">
                            <?php if (!empty($templates_before)): ?>
                                <div class="fs-dropdown">
                                    <button type="button" class="button fs-dropdown-trigger"><?php esc_html_e('Insert Template', 'freelance-studio'); ?> ▾</button>
                                    <div class="fs-dropdown-menu" style="display:none;">
                                        <?php foreach ($templates_before as $tmpl): ?>
                                            <div class="fs-template-menu-item">
                                                <a href="#" class="fs-insert-section-template" 
                                                   data-title="<?php echo esc_attr($tmpl->title); ?>"
                                                   data-content="<?php echo esc_attr($tmpl->content); ?>"
                                                   data-position="before_pricing">
                                                    <?php echo esc_html($tmpl->title); ?>
                                                </a>
                                                <button type="button" class="fs-delete-section-template" 
                                                        data-id="<?php echo esc_attr($tmpl->id); ?>"
                                                        title="<?php esc_attr_e('Delete template', 'freelance-studio'); ?>">×</button>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            <?php endif; ?>
                            <button type="button" class="button fs-add-custom-section-btn" data-position="before_pricing">
                                <?php esc_html_e('+ Add Section', 'freelance-studio'); ?>
                            </button>
                        </div>
                    </div>
                    <p class="description" style="margin-bottom: 15px;"><?php esc_html_e('These sections appear before the pricing table (e.g., Project Overview, Our Process, Timeline).', 'freelance-studio'); ?></p>
                    
                    <div class="fs-custom-sections-list" data-position="before_pricing">
                        <?php 
                        $section_index = 0;
                        foreach ($sections_before as $section): 
                            $editor_id = 'section_content_before_' . $section_index;
                        ?>
                            <div class="fs-custom-section-item" data-index="<?php echo  esc_attr( $section_index ); ?>">
                                <div class="fs-custom-section-header">
                                    <span class="fs-section-drag">☰</span>
                                    <input type="hidden" name="custom_sections[<?php echo  esc_attr( $section_index ); ?>][id]" value="<?php echo esc_attr($section['id'] ?? ''); ?>">
                                    <input type="hidden" name="custom_sections[<?php echo  esc_attr( $section_index ); ?>][position]" value="before_pricing">
                                    <input type="text" name="custom_sections[<?php echo  esc_attr( $section_index ); ?>][title]" 
                                           class="fs-custom-section-title" 
                                           placeholder="<?php esc_attr_e('Section Title', 'freelance-studio'); ?>"
                                           value="<?php echo esc_attr($section['title'] ?? ''); ?>">
                                    <button type="button" class="button button-small fs-save-section-template" title="<?php esc_attr_e('Save as Template', 'freelance-studio'); ?>">
                                        <span class="dashicons dashicons-star-empty"></span>
                                    </button>
                                    <button type="button" class="fs-remove-custom-section" title="<?php esc_attr_e('Remove', 'freelance-studio'); ?>">×</button>
                                </div>
                                <div class="fs-custom-section-body">
                                    <?php 
                                    wp_editor(
                                        $section['content'] ?? '', 
                                        $editor_id, 
                                        array(
                                            'textarea_name' => "custom_sections[{$section_index}][content]",
                                            'textarea_rows' => 8,
                                            'media_buttons' => false,
                                            'teeny' => true,
                                            'quicktags' => array('buttons' => 'strong,em,link,ul,ol,li'),
                                        )
                                    ); 
                                    ?>
                                </div>
                            </div>
                        <?php 
                            $section_index++;
                        endforeach; 
                        ?>
                    </div>
                </div>
                
                <!-- Services -->
                <div class="fs-form-section">
                    <div class="fs-section-header">
                        <h2><?php esc_html_e('Services', 'freelance-studio'); ?></h2>
                        <button type="button" class="button fs-add-service-btn"><?php esc_html_e('+ Add Service', 'freelance-studio'); ?></button>
                    </div>
                    
                    <div id="fs-services-container">
                        <?php if (!empty($services)): ?>
                            <?php foreach ($services as $index => $service): ?>
                                <div class="fs-service-item" data-index="<?php echo  esc_attr( $index ); ?>">
                                    <div class="fs-service-header">
                                        <span class="fs-service-drag">☰</span>
                                        <input type="text" name="services[<?php echo  esc_attr( $index ); ?>][name]" 
                                               class="fs-service-name" placeholder="<?php esc_attr_e('Service name', 'freelance-studio'); ?>"
                                               value="<?php echo esc_attr($service['name']); ?>">
                                        <button type="button" class="fs-remove-service" title="<?php esc_attr_e('Remove', 'freelance-studio'); ?>">×</button>
                                    </div>
                                    <div class="fs-service-body">
                                        <textarea name="services[<?php echo  esc_attr( $index ); ?>][description]" 
                                                  class="fs-service-description" rows="2"
                                                  placeholder="<?php esc_attr_e('Description (optional)', 'freelance-studio'); ?>"><?php echo esc_textarea($service['description'] ?? ''); ?></textarea>
                                        <div class="fs-service-pricing">
                                            <select name="services[<?php echo  esc_attr( $index ); ?>][pricing_type]" class="fs-service-pricing-type">
                                                <option value="fixed" <?php selected($service['pricing_type'] ?? 'fixed', 'fixed'); ?>><?php esc_html_e('Flat fee', 'freelance-studio'); ?></option>
                                                <option value="hourly" <?php selected($service['pricing_type'] ?? '', 'hourly'); ?>><?php esc_html_e('Hourly', 'freelance-studio'); ?></option>
                                            </select>
                                            <div class="fs-pricing-fields">
                                                <input type="number" name="services[<?php echo  esc_attr( $index ); ?>][rate]" 
                                                       class="fs-service-rate" step="0.01" min="0"
                                                       placeholder="<?php esc_attr_e('Rate', 'freelance-studio'); ?>"
                                                       value="<?php echo esc_attr($service['rate'] ?? ''); ?>">
                                                <span class="fs-pricing-separator">×</span>
                                                <input type="number" name="services[<?php echo  esc_attr( $index ); ?>][quantity]" 
                                                       class="fs-service-quantity" step="0.01" min="0"
                                                       placeholder="<?php esc_attr_e('Qty', 'freelance-studio'); ?>"
                                                       value="<?php echo esc_attr($service['quantity'] ?? 1); ?>">
                                                <span class="fs-pricing-separator">=</span>
                                                <input type="number" name="services[<?php echo  esc_attr( $index ); ?>][amount]" 
                                                       class="fs-service-amount" step="0.01" min="0" readonly
                                                       value="<?php echo esc_attr($service['amount'] ?? ''); ?>">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                    
                    <div class="fs-services-actions">
                        <button type="button" class="button fs-add-service-btn">➕ <?php esc_html_e('Add Service', 'freelance-studio'); ?></button>
                        <span class="fs-services-actions-divider">|</span>
                        <select id="fs-load-preset-service" class="fs-preset-service-select">
                            <option value=""><?php esc_html_e('— Load Preset Service —', 'freelance-studio'); ?></option>
                        </select>
                    </div>
                    
                    <div class="fs-services-total">
                        <span><?php esc_html_e('Total:', 'freelance-studio'); ?></span>
                        <span id="fs-proposal-total">$<?php echo number_format($proposal ? $proposal->total_amount : 0, 2); ?></span>
                    </div>
                </div>
                
                <!-- Billing Schedule -->
                <div class="fs-form-section">
                    <h2><?php esc_html_e('Billing Schedule', 'freelance-studio'); ?></h2>
                    
                    <div class="fs-form-row">
                        <div class="fs-form-group">
                            <label for="billing_frequency"><?php esc_html_e('Billing Frequency', 'freelance-studio'); ?></label>
                            <select name="billing_frequency" id="billing_frequency">
                                <?php foreach ($frequencies as $k => $l): ?>
                                    <option value="<?php echo esc_attr($k); ?>" <?php selected($proposal ? $proposal->billing_frequency : 'once', $k); ?>>
                                        <?php echo esc_html($l); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="fs-form-group fs-first-invoice-field" style="<?php echo ($proposal && $proposal->billing_frequency !== 'once') || (!$proposal) ? '' : 'display:none;'; ?>">
                            <label for="first_invoice_date"><?php esc_html_e('First Invoice Date', 'freelance-studio'); ?></label>
                            <input type="date" name="first_invoice_date" id="first_invoice_date"
                                   value="<?php echo $proposal ? esc_attr($proposal->first_invoice_date) : ''; ?>">
                        </div>
                    </div>
                    
                    <div class="fs-form-row">
                        <div class="fs-form-group">
                            <label>
                                <input type="checkbox" name="deposit_required" id="deposit_required" value="1"
                                       <?php checked($proposal ? $proposal->deposit_required : 0, 1); ?>>
                                <?php esc_html_e('Require deposit', 'freelance-studio'); ?>
                            </label>
                        </div>
                    </div>
                    
                    <div class="fs-deposit-fields" style="<?php echo ($proposal && $proposal->deposit_required) ? '' : 'display:none;'; ?>">
                        <div class="fs-form-row">
                            <div class="fs-form-group">
                                <label for="deposit_type"><?php esc_html_e('Deposit Type', 'freelance-studio'); ?></label>
                                <select name="deposit_type" id="deposit_type">
                                    <option value="percentage" <?php selected($proposal ? $proposal->deposit_type : 'percentage', 'percentage'); ?>><?php esc_html_e('Percentage', 'freelance-studio'); ?></option>
                                    <option value="fixed" <?php selected($proposal ? $proposal->deposit_type : '', 'fixed'); ?>><?php esc_html_e('Fixed Amount', 'freelance-studio'); ?></option>
                                </select>
                            </div>
                            <div class="fs-form-group">
                                <label for="deposit_value"><?php esc_html_e('Deposit Amount', 'freelance-studio'); ?></label>
                                <input type="number" name="deposit_value" id="deposit_value" step="0.01" min="0"
                                       value="<?php echo $proposal ? esc_attr($proposal->deposit_value) : '50'; ?>">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Custom Sections: After Pricing -->
                <div class="fs-form-section fs-custom-sections-container" data-position="after_pricing">
                    <div class="fs-section-header">
                        <h2><?php esc_html_e('Additional Sections (After Pricing)', 'freelance-studio'); ?></h2>
                        <div class="fs-section-actions">
                            <?php if (!empty($templates_after)): ?>
                                <div class="fs-dropdown">
                                    <button type="button" class="button fs-dropdown-trigger"><?php esc_html_e('Insert Template', 'freelance-studio'); ?> ▾</button>
                                    <div class="fs-dropdown-menu" style="display:none;">
                                        <?php foreach ($templates_after as $tmpl): ?>
                                            <div class="fs-template-menu-item">
                                                <a href="#" class="fs-insert-section-template" 
                                                   data-title="<?php echo esc_attr($tmpl->title); ?>"
                                                   data-content="<?php echo esc_attr($tmpl->content); ?>"
                                                   data-position="after_pricing">
                                                    <?php echo esc_html($tmpl->title); ?>
                                                </a>
                                                <button type="button" class="fs-delete-section-template" 
                                                        data-id="<?php echo esc_attr($tmpl->id); ?>"
                                                        title="<?php esc_attr_e('Delete template', 'freelance-studio'); ?>">×</button>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            <?php endif; ?>
                            <button type="button" class="button fs-add-custom-section-btn" data-position="after_pricing">
                                <?php esc_html_e('+ Add Section', 'freelance-studio'); ?>
                            </button>
                        </div>
                    </div>
                    <p class="description" style="margin-bottom: 15px;"><?php esc_html_e('These sections appear after the pricing table (e.g., Terms, What\'s Included, FAQ).', 'freelance-studio'); ?></p>
                    
                    <div class="fs-custom-sections-list" data-position="after_pricing">
                        <?php 
                        // Continue section index from before_pricing sections
                        foreach ($sections_after as $section): 
                            $editor_id = 'section_content_after_' . $section_index;
                        ?>
                            <div class="fs-custom-section-item" data-index="<?php echo  esc_attr( $section_index ); ?>">
                                <div class="fs-custom-section-header">
                                    <span class="fs-section-drag">☰</span>
                                    <input type="hidden" name="custom_sections[<?php echo  esc_attr( $section_index ); ?>][id]" value="<?php echo esc_attr($section['id'] ?? ''); ?>">
                                    <input type="hidden" name="custom_sections[<?php echo  esc_attr( $section_index ); ?>][position]" value="after_pricing">
                                    <input type="text" name="custom_sections[<?php echo  esc_attr( $section_index ); ?>][title]" 
                                           class="fs-custom-section-title" 
                                           placeholder="<?php esc_attr_e('Section Title', 'freelance-studio'); ?>"
                                           value="<?php echo esc_attr($section['title'] ?? ''); ?>">
                                    <button type="button" class="button button-small fs-save-section-template" title="<?php esc_attr_e('Save as Template', 'freelance-studio'); ?>">
                                        <span class="dashicons dashicons-star-empty"></span>
                                    </button>
                                    <button type="button" class="fs-remove-custom-section" title="<?php esc_attr_e('Remove', 'freelance-studio'); ?>">×</button>
                                </div>
                                <div class="fs-custom-section-body">
                                    <?php 
                                    wp_editor(
                                        $section['content'] ?? '', 
                                        $editor_id, 
                                        array(
                                            'textarea_name' => "custom_sections[{$section_index}][content]",
                                            'textarea_rows' => 8,
                                            'media_buttons' => false,
                                            'teeny' => true,
                                            'quicktags' => array('buttons' => 'strong,em,link,ul,ol,li'),
                                        )
                                    ); 
                                    ?>
                                </div>
                            </div>
                        <?php 
                            $section_index++;
                        endforeach; 
                        ?>
                    </div>
                </div>
                
                <!-- Notes -->
                <div class="fs-form-section">
                    <h2><?php esc_html_e('Notes', 'freelance-studio'); ?></h2>
                    
                    <div class="fs-form-group">
                        <label for="notes"><?php esc_html_e('Client-Facing Notes', 'freelance-studio'); ?></label>
                        <textarea name="notes" id="notes" rows="4" placeholder="<?php esc_attr_e('Notes that will appear on the proposal...', 'freelance-studio'); ?>"><?php echo $proposal ? esc_textarea($proposal->notes) : ''; ?></textarea>
                    </div>
                    
                    <div class="fs-form-group">
                        <label for="internal_notes"><?php esc_html_e('Internal Notes', 'freelance-studio'); ?></label>
                        <textarea name="internal_notes" id="internal_notes" rows="3" placeholder="<?php esc_attr_e('Private notes (not shown to client)...', 'freelance-studio'); ?>"><?php echo $proposal ? esc_textarea($proposal->internal_notes) : ''; ?></textarea>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar -->
            <div class="fs-form-sidebar">
                <div class="fs-form-section">
                    <h3><?php esc_html_e('Actions', 'freelance-studio'); ?></h3>
                    <input type="submit" class="fs-btn fs-btn-submit fs-full-width" 
                           value="<?php echo  esc_attr( $is_new ? __('Create Proposal', 'freelance-studio') : __('Update Proposal', 'freelance-studio') ); ?>">
                    
                    <?php if (!$is_new && $proposal->status === 'draft'): ?>
                        <a href="<?php echo  esc_url( admin_url('admin.php?page=fs-proposals&action=send&id=' . $proposal->id) ); ?>" 
                           class="fs-btn fs-btn-secondary fs-full-width" style="margin-top: 10px;">
                            <?php esc_html_e('Save & Send to Client', 'freelance-studio'); ?>
                        </a>
                    <?php endif; ?>
                </div>
                
                <?php if (!$is_new): ?>
                    <div class="fs-form-section">
                        <h3><?php esc_html_e('Status', 'freelance-studio'); ?></h3>
                        <p class="fs-status-display"><?php echo  wp_kses_post( FS_View_Context::status_badge($proposal->status) ); ?></p>
                        
                        <?php if ($proposal->sent_at): ?>
                            <p class="fs-meta-item"><strong><?php esc_html_e('Sent:', 'freelance-studio'); ?></strong> <?php echo  esc_html( FS_View_Context::format_date($proposal->sent_at) ); ?></p>
                        <?php endif; ?>
                        
                        <?php if ($proposal->viewed_at): ?>
                            <p class="fs-meta-item"><strong><?php esc_html_e('Viewed:', 'freelance-studio'); ?></strong> <?php echo  esc_html( FS_View_Context::format_date($proposal->viewed_at) ); ?></p>
                        <?php endif; ?>
                        
                        <?php if ($proposal->approved_at): ?>
                            <p class="fs-meta-item"><strong><?php esc_html_e('Approved:', 'freelance-studio'); ?></strong> <?php echo  esc_html( FS_View_Context::format_date($proposal->approved_at) ); ?></p>
                        <?php endif; ?>
                    </div>
                    
                    <div class="fs-form-section">
                        <h3><?php esc_html_e('Client Link', 'freelance-studio'); ?></h3>
                        <p class="description"><?php esc_html_e('Share this link with your client to view and approve the proposal:', 'freelance-studio'); ?></p>
                        <input type="text" readonly class="fs-copy-link" 
                               value="<?php echo  esc_url( home_url('?fs_proposal=' . $proposal->view_token) ); ?>"
                               onclick="this.select();">
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </form>
</div>

<!-- Service Template -->
<script type="text/template" id="fs-service-template">
    <div class="fs-service-item" data-index="{{index}}">
        <div class="fs-service-header">
            <span class="fs-service-drag">☰</span>
            <input type="text" name="services[{{index}}][name]" 
                   class="fs-service-name" placeholder="<?php esc_attr_e('Service name', 'freelance-studio'); ?>">
            <button type="button" class="fs-remove-service" title="<?php esc_attr_e('Remove', 'freelance-studio'); ?>">×</button>
        </div>
        <div class="fs-service-body">
            <textarea name="services[{{index}}][description]" 
                      class="fs-service-description" rows="2"
                      placeholder="<?php esc_attr_e('Description (optional)', 'freelance-studio'); ?>"></textarea>
            <div class="fs-service-pricing">
                <select name="services[{{index}}][pricing_type]" class="fs-service-pricing-type">
                    <option value="fixed"><?php esc_html_e('Flat fee', 'freelance-studio'); ?></option>
                    <option value="hourly"><?php esc_html_e('Hourly', 'freelance-studio'); ?></option>
                </select>
                <div class="fs-pricing-fields">
                    <input type="number" name="services[{{index}}][rate]" 
                           class="fs-service-rate" step="0.01" min="0"
                           placeholder="<?php esc_attr_e('Rate', 'freelance-studio'); ?>"
                           value="<?php echo esc_attr($default_hourly_rate); ?>">
                    <span class="fs-pricing-separator">×</span>
                    <input type="number" name="services[{{index}}][quantity]" 
                           class="fs-service-quantity" step="0.01" min="0"
                           placeholder="<?php esc_attr_e('Qty', 'freelance-studio'); ?>" value="1">
                    <span class="fs-pricing-separator">=</span>
                    <input type="number" name="services[{{index}}][amount]" 
                           class="fs-service-amount" step="0.01" min="0" readonly>
                </div>
            </div>
        </div>
    </div>
</script>

<!-- Custom Section Template -->
<script type="text/template" id="fs-custom-section-template">
    <div class="fs-custom-section-item" data-index="{{index}}">
        <div class="fs-custom-section-header">
            <span class="fs-section-drag">☰</span>
            <input type="hidden" name="custom_sections[{{index}}][id]" value="{{id}}">
            <input type="hidden" name="custom_sections[{{index}}][position]" value="{{position}}">
            <input type="text" name="custom_sections[{{index}}][title]" 
                   class="fs-custom-section-title" 
                   placeholder="<?php esc_attr_e('Section Title', 'freelance-studio'); ?>"
                   value="{{title}}">
            <button type="button" class="button button-small fs-save-section-template" title="<?php esc_attr_e('Save as Template', 'freelance-studio'); ?>">
                <span class="dashicons dashicons-star-empty"></span>
            </button>
            <button type="button" class="fs-remove-custom-section" title="<?php esc_attr_e('Remove', 'freelance-studio'); ?>">×</button>
        </div>
        <div class="fs-custom-section-body">
            <textarea id="{{editor_id}}" name="custom_sections[{{index}}][content]" 
                      class="fs-custom-section-content wp-editor-area" rows="8"
                      placeholder="<?php esc_attr_e('Section content...', 'freelance-studio'); ?>">{{content}}</textarea>
        </div>
    </div>
</script>

<!-- Save Section Template Modal -->
<div id="fs-save-section-modal" class="fs-modal" style="display:none;">
    <div class="fs-modal-content" style="max-width: 500px;">
        <div class="fs-modal-header">
            <h2><?php esc_html_e('Save Section as Template', 'freelance-studio'); ?></h2>
            <button type="button" class="fs-modal-close">×</button>
        </div>
        <div class="fs-modal-body">
            <div class="fs-form-group">
                <label for="template_title"><?php esc_html_e('Template Name', 'freelance-studio'); ?></label>
                <input type="text" id="template_title" class="regular-text" placeholder="<?php esc_attr_e('e.g., Our Process, Project Timeline', 'freelance-studio'); ?>">
            </div>
            <div class="fs-form-group">
                <label for="template_position"><?php esc_html_e('Default Position', 'freelance-studio'); ?></label>
                <select id="template_position">
                    <option value="before_pricing"><?php esc_html_e('Before Pricing', 'freelance-studio'); ?></option>
                    <option value="after_pricing"><?php esc_html_e('After Pricing', 'freelance-studio'); ?></option>
                </select>
            </div>
            <input type="hidden" id="template_content" value="">
        </div>
        <div class="fs-modal-footer">
            <button type="button" class="button fs-modal-close"><?php esc_html_e('Cancel', 'freelance-studio'); ?></button>
            <button type="button" class="fs-btn fs-btn-primary" id="fs-save-template-btn"><?php esc_html_e('Save Template', 'freelance-studio'); ?></button>
        </div>
    </div>
</div>
