<style>
    .form-label {
        font-weight: 600;
    }
    #replyTemplateForm {
        background: #fff;
        border-radius: 6px;
    }
    #template_name,#template_content{
        font-size: 12px;
        color: #828282;
    }
</style>
<div class="style-title">
<h3>Reply Template Management</h3>  
</div>

<form id="replyTemplateForm" class="p-3">
    <input type="hidden" id="template_id">

    <div class="row g-3">

        <!-- Left column -->
        <div class="col-sm-2">
            <label class="form-label">Template Name</label>
            <input type="text" id="template_name" class="form-control" maxlength="100" required>
        </div>

        <!-- Right column -->
        <div class="col-sm-10">
            <label class="form-label">Template Content</label>
            <textarea id="template_content" rows="4" class="form-control" required></textarea>
        </div>

        <div class="col-sm-12 mt-2 d-flex gap-2">
            <button type="submit" id="saveBtn" class="btn btn-success btn-sm">Save</button>
            <button type="button" id="resetBtn" class="btn btn-secondary btn-sm">Clear</button>
        </div>

    </div>
</form>


<!-- <h4>Saved Reply Templates</h4> -->
<table id="templateTable" class="tableview tableview-2 mt-3">
    <thead>
        <tr>
            <td>ID</td>
            <td>Template Name</td>
            <td>Content</td>
            <td>Created By</td>
            <td>Actions</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>

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

    // Insert or Update
    $('#replyTemplateForm').on('submit', function (e) {
        e.preventDefault();
        const id = $('#template_id').val();
        const name = $('#template_name').val();
        const content = $('#template_content').val();

        $.ajax({
            url: 'admin/reply_template_action.php',
            type: 'POST',
            data: { action: id ? 'update' : 'insert', id, name, content },
            success: function (res) {
                alert(res);
                $('#replyTemplateForm')[0].reset();
                $('#template_id').val('');
                fetchTemplates();
            }
        });
    });

    // Fetch templates
    function fetchTemplates() {
        $.ajax({
            url: 'admin/reply_template_action.php',
            type: 'POST',
            data: { action: 'fetch' },
            success: function (data) {
                $('#templateTable tbody').html(data);
            }
        });
    }

    // Edit template
    $(document).on('click', '.editBtn', function () {
        const id = $(this).data('id');
        $.ajax({
            url: 'admin/reply_template_action.php',
            type: 'POST',
            data: { action: 'get', id },
            dataType: 'json',
            success: function (data) {
                $('#template_id').val(data.id);
                $('#template_name').val(data.template_name);
                $('#template_content').val(data.template_content);
            }
        });
    });

    // Delete template
    $(document).on('click', '.deleteBtn', function () {
        if (!confirm('Are you sure you want to delete this reply template?')) return;
        const id = $(this).data('id');
        $.ajax({
            url: 'admin/reply_template_action.php',
            type: 'POST',
            data: { action: 'delete', id },
            success: function (res) {
                alert(res);
                fetchTemplates();
            }
        });
    });

    $('#resetBtn').on('click', function () {
        $('#replyTemplateForm')[0].reset();
        $('#template_id').val('');
    });
});
</script>
