@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Create 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.store') }}" method="POST">
        @csrf
         <div class="mb-3">
            <label>Title</label>
            <input type="text" class="form-control" required name="title" value="">
        </div>
        <div class="mb-3">
            <label>Subject</label>
            <input type="text" name="subject" class="form-control">
        </div>
        <div class="mb-3">
            <label>Body</label>
            <textarea name="body" class="form-control" rows="6"></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">Save</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');
        let cursorPos = $textarea.prop('selectionStart');
        let text = $textarea.val();
        let newText = text.substring(0, cursorPos) + val + text.substring(cursorPos);
        $textarea.val(newText);
        $textarea.focus();
    });

});
</script>

@endsection