@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Edit Email Template</h5>
                    <a href="{{ route('email.templates.index') }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left"></i> Back to Templates
                    </a>
                </div>

                <div class="card-body">
                    <form method="POST" action="{{ route('email.templates.update', $template) }}">
                        @csrf
                        @method('PUT')

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">Template Name</label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $template->name) }}" required>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="type">Template Type</label>
                                    <select class="form-control @error('type') is-invalid @enderror" id="type" name="type" required>
                                        @foreach($types as $type)
                                            <option value="{{ $type }}" {{ old('type', $template->type) == $type ? 'selected' : '' }}>
                                                {{ ucfirst($type) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('type')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="subject">Email Subject</label>
                            <input type="text" class="form-control @error('subject') is-invalid @enderror" id="subject" name="subject" value="{{ old('subject', $template->subject) }}" required>
                            @error('subject')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="content">Email Content</label>
                            <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content" rows="10" required>{{ old('content', $template->content) }}</textarea>
                            @error('content')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <small class="form-text text-muted">
                                You can use HTML and variables like {{name}}, {{company}}, etc.
                            </small>
                        </div>

                        <div class="card mb-3">
                            <div class="card-header">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="is_ai_enhanced" name="is_ai_enhanced" {{ old('is_ai_enhanced', $template->is_ai_enhanced) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_ai_enhanced">
                                        Enable AI Enhancement
                                    </label>
                                </div>
                            </div>
                            <div class="card-body ai-options" id="aiOptions">
                                <div class="form-group mb-3">
                                    <label for="ai_instructions">Instructions for AI</label>
                                    <textarea class="form-control @error('ai_instructions') is-invalid @enderror" id="ai_instructions" name="ai_instructions" rows="3">{{ old('ai_instructions', $template->ai_instructions) }}</textarea>
                                    @error('ai_instructions')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Provide instructions for how the AI should enhance or generate content.
                                    </small>
                                </div>

                                <div class="form-group mb-3">
                                    <label for="ai_variables">AI Variables (JSON)</label>
                                    <textarea class="form-control @error('ai_variables') is-invalid @enderror" id="ai_variables" name="ai_variables" rows="3">{{ old('ai_variables', is_array($template->ai_variables) ? json_encode($template->ai_variables) : $template->ai_variables) }}</textarea>
                                    @error('ai_variables')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <small class="form-text text-muted">
                                        Define variables in JSON format, e.g. {"industry":"tech", "tone":"professional"}
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Update Template
                            </button>
                            <button type="button" id="generateAiBtn" class="btn btn-success ml-2">
                                <i class="fas fa-robot"></i> Generate AI Content
                            </button>
                            <button type="button" id="previewBtn" class="btn btn-info ml-2">
                                <i class="fas fa-eye"></i> Preview
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle AI options visibility
        const aiCheckbox = document.getElementById('is_ai_enhanced');
        const aiOptions = document.getElementById('aiOptions');
        
        function toggleAiOptions() {
            if (aiCheckbox.checked) {
                aiOptions.style.display = 'block';
            } else {
                aiOptions.style.display = 'none';
            }
        }
        
        toggleAiOptions(); // Initial state
        aiCheckbox.addEventListener('change', toggleAiOptions);
        
        // Preview functionality
        const previewBtn = document.getElementById('previewBtn');
        previewBtn.addEventListener('click', function() {
            // Implement preview functionality here
            alert('Preview functionality will be implemented here');
        });
        
        // AI Content Generation
        const generateAiBtn = document.getElementById('generateAiBtn');
        generateAiBtn.addEventListener('click', function() {
            if (!aiCheckbox.checked) {
                alert('Please enable AI Enhancement to generate AI content');
                return;
            }
            
            const templateId = '{{ $template->id }}';
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            
            // Get variables from the form
            let variables = {};
            try {
                const variablesText = document.getElementById('ai_variables').value;
                if (variablesText) {
                    variables = JSON.parse(variablesText);
                }
            } catch (e) {
                alert('Invalid JSON in AI Variables field');
                return;
            }
            
            // Show loading state
            generateAiBtn.disabled = true;
            generateAiBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
            
            // Make AJAX request to generate content
            fetch(`/email/templates/${templateId}/generate-ai-content`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ variables: variables })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('content').value = data.content;
                generateAiBtn.disabled = false;
                generateAiBtn.innerHTML = '<i class="fas fa-robot"></i> Generate AI Content';
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Failed to generate AI content');
                generateAiBtn.disabled = false;
                generateAiBtn.innerHTML = '<i class="fas fa-robot"></i> Generate AI Content';
            });
        });
    });
</script>
@endpush
@endsection