@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Edit Email Template</h2>
    <style>
        .badge {
            color: #fff;
            padding: 10px 20px;
            font-size: 15px;
            font-weight: 500;
            margin-right: 20px;
        }
    </style>

    <div class="mb-3">
        <label>Select Form (Only for Available Placeholders)</label>
        <select name="form_id" id="form_id" class="form-control">
            <option value="">-- Select a Form --</option>
            @foreach($forms as $form)
                <option value="{{ $form->id }}">{{ $form->form_name }}</option>
            @endforeach
        </select>
    </div>
    <form action="{{ route('emailtemplates.update', $emailtemplate) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="mb-3">
            <label>Title</label>
            <input type="text" class="form-control" required name="title" value="{{ $emailtemplate->title }}">
        </div>
        <div class="mb-3">
            <label>Subject</label>
            <input type="text" name="subject" required class="form-control" value="{{ $emailtemplate->subject }}">
        </div>
        <div class="mb-3">
            <label>Body</label>
            <textarea name="body" id="body" class="form-control" rows="6">{{ $emailtemplate->body }}</textarea>
        </div>
        <div id="placeholders" class="mb-3" style="display:none;">
            <label>Available Placeholders</label>
            <div class="d-flex flex-wrap gap-2"></div>
        </div>
        <button type="submit" class="btn btn-success">Update</button>
    </form>
</div>

<script>
$(document).ready(function(){

    $('#form_id').change(function(){
        let formId = $(this).val();
        if(formId){
            $.ajax({
                url: "{{ route('forms.fields') }}", // route to get fields
                type: "GET",
                data: {form_id: formId},
                success: function(response){
                    if(response.fields && response.fields.length > 0){
                        $('#placeholders').show();
                        let html = '';
                        response.fields.forEach(field => {
                            if(field.name!=null && field.name!='')
                            html += `<span class="badge bg-primary placeholder-btn" 
                                        style="cursor:pointer;" 
                                        data-val="{${field.name}}">
                                        {${field.name}}
                                    </span> `;
                        });
                        $('#placeholders div').html(html);
                    } else {
                        $('#placeholders').hide();
                    }
                }
            });
        } else {
            $('#placeholders').hide();
        }
    });

    // insert placeholder into textarea
    $(document).on('click', '.placeholder-btn', function(){
        let val = $(this).data('val');
        let $textarea = $('#body')[0]; // raw DOM element
        let cursorPos = $textarea.selectionStart;
        let text = $textarea.value;
        let newText = text.substring(0, cursorPos) + val + text.substring(cursorPos);
        $textarea.value = newText;
        $textarea.focus();
        // move cursor after inserted placeholder
        $textarea.selectionEnd = cursorPos + val.length;
    });

});
</script>
@endsection