@extends('backend.app')

@section('title', 'Edit Email Template')

@push('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
<style>
    .CodeMirror {
        border: 1px solid #ddd;
        border-radius: 4px;
        height: 300px;
    }
    .variable-badge {
        display: inline-block;
        background: #e3f2fd;
        color: #1976d2;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.85rem;
        margin: 0.25rem;
        font-family: monospace;
        cursor: pointer;
    }
    .variable-badge:hover {
        background: #bbdefb;
    }
    .preview-box {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        background: #f8f9fa;
        min-height: 200px;
    }
</style>
@endpush

@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                @include('backend.partials.breadcrumb', [
                    'items' => [
                        ['url' => route('dashboard'), 'title' => 'Dashboard', 'icon' => 'fas fa-home'],
                        ['url' => route('email-templates.index'), 'title' => 'Email Templates', 'icon' => 'fas fa-envelope'],
                        ['title' => 'Edit Template', 'icon' => 'fas fa-edit']
                    ]
                ])
            </div>
        </div>

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

                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Edit Template: {{ $template->name }}</h4>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label">Template Name</label>
                                    <input type="text" name="name" class="form-control" value="{{ $template->name }}" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Email Subject</label>
                                    <input type="text" name="subject" class="form-control" value="{{ $template->subject }}" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Email Body (HTML)</label>
                                    <textarea name="email_body" id="email_body" class="form-control" rows="15" required>{{ $template->email_body }}</textarea>
                                    <small class="text-muted">Use {variable_name} to insert dynamic data</small>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">SMS Body (Short)</label>
                                    <textarea name="sms_body" class="form-control" rows="3">{{ $template->sms_body }}</textarea>
                                    <small class="text-muted">Keep it under 160 characters for single SMS</small>
                                </div>

                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="send_copy_to_admin" value="1" @if($template->send_copy_to_admin) checked @endif>
                                    <label class="form-check-label">Send copy to admin</label>
                                </div>

                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="status" value="1" @if($template->status) checked @endif>
                                    <label class="form-check-label">Active</label>
                                </div>

                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i> Save Template
                                </button>
                                <a href="{{ route('email-templates.index') }}" class="btn btn-outline-secondary ms-2">
                                    <i class="fas fa-times me-2"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="card-title">Available Variables</h5>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-2">Click to insert:</p>
                                @foreach($template->getAvailableVariables() as $variable)
                                <span class="variable-badge" onclick="insertVariable('{{ $variable }}')">{ {{ $variable }} }</span>
                                @endforeach
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Preview</h5>
                            </div>
                            <div class="card-body">
                                <button type="button" class="btn btn-info btn-sm mb-3" onclick="previewTemplate()">
                                    <i class="fas fa-eye me-2"></i> Preview
                                </button>
                                <div id="preview-content" class="preview-box">
                                    <p class="text-muted text-center">Click preview to see how the email will look</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
let editor;

document.addEventListener('DOMContentLoaded', function() {
    editor = CodeMirror.fromTextArea(document.getElementById('email_body'), {
        mode: 'htmlmixed',
        theme: 'monokai',
        lineNumbers: true,
        autoCloseTags: true,
        autoCloseBrackets: true
    });
});

function insertVariable(variable) {
    editor.replaceSelection('{' + variable + '}');
    editor.focus();
}

function previewTemplate() {
    const content = editor.getValue();

    $.ajax({
        url: '{{ route('email-templates.preview', $template) }}',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            content: content
        },
        success: function(response) {
            $('#preview-content').html(response.body);
        },
        error: function() {
            Swal.fire({
                title: 'Error',
                text: 'Failed to preview template',
                icon: 'error'
            });
        }
    });
}
</script>
@endpush
@endsection