@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">Preview: {{ $template->name }}</h5>
                    <div>
                        <a href="{{ route('email.templates.edit', $template) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-edit"></i> Edit Template
                        </a>
                        <a href="{{ route('email.templates.index') }}" class="btn btn-secondary btn-sm ml-2">
                            <i class="fas fa-arrow-left"></i> Back to Templates
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> This is a preview of your email with AI-generated content. You can edit the template to make changes.
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header bg-light">
                                    <div class="email-header">
                                        <div><strong>From:</strong> {{ config('app.name') }} &lt;{{ config('mail.from.address') }}&gt;</div>
                                        <div><strong>To:</strong> [Recipient]</div>
                                        <div><strong>Subject:</strong> {{ $template->subject }}</div>
                                    </div>
                                </div>
                                <div class="card-body border">
                                    <div class="email-preview">
                                        {!! $aiContent !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12 text-center">
                            <form method="POST" action="{{ route('email.templates.update', $template) }}">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="name" value="{{ $template->name }}">
                                <input type="hidden" name="subject" value="{{ $template->subject }}">
                                <input type="hidden" name="type" value="{{ $template->type }}">
                                <input type="hidden" name="is_ai_enhanced" value="1">
                                <input type="hidden" name="ai_variables" value='{{ is_array($template->ai_variables) ? json_encode($template->ai_variables) : $template->ai_variables }}'>
                                <input type="hidden" name="ai_instructions" value="{{ $template->ai_instructions }}">
                                <input type="hidden" name="content" value="{{ $aiContent }}">
                                
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-save"></i> Save AI Content
                                </button>
                                <a href="{{ route('email.templates.edit', $template) }}" class="btn btn-secondary ml-2">
                                    <i class="fas fa-edit"></i> Continue Editing
                                </a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .email-preview {
        max-height: 500px;
        overflow-y: auto;
    }
    .email-header {
        padding: 10px;
        border-radius: 4px;
    }
</style>
@endpush
@endsection