{% extends "baseadmin.html.twig" %}

{% block title %}CC Management - {{ parent() }}{% endblock %}

{% block content %}
<div class="mb-3">
    <button id="add-entity" class="btn btn-primary">Create CC Whitelist</button>
</div>

<div class="card shadow mb-4">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="custom-class-table">
                <thead class="thead-light">
                    <tr>
                        <th>Steam ID</th>
                        <th>Metadata</th>
                        <th>
                            <div>
                                Models
                            </div>
                            <small>Seperate by new lines</small>
                        </th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ parent() }}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function refreshTable() {
    $.getJSON("{{ path('admin_custom_class_list') }}", function(data){
        const tbody = $("#custom-class-table tbody");
        tbody.empty();
        data.entities.forEach(e => {
            tbody.append(`
                <tr data-steamid="${e.steamId}">
                    <td>${e.steamId}</td>
                    <td>
                        <div class="form-floating mb-1">
                            <input id="name-${e.steamId}" type="text" class="form-control form-control-sm name" value="${e.name}">
                            <label for="name-${e.steamId}">Name</label>
                        </div>
                        <div class="form-floating mb-1">
                            <input id="hp-${e.steamId}" type="number" class="form-control form-control-sm hp" value="${e.hp}">
                            <label for="hp-${e.steamId}">HP</label>
                        </div>
                        <div class="form-floating mb-1">
                            <input id="salary-${e.steamId}" type="number" class="form-control form-control-sm salary" value="${e.salary}">
                            <label for="salary-${e.steamId}">Salary</label>
                        </div>
                    </td>
                    <td><textarea id="extramodels-${e.steamId}" class="form-control form-control-sm extramodels" rows="8" cols="100">${e.extramodels.join("\n")}</textarea></td>
                    <td>
                        <button class="btn btn-sm btn-success save">Save</button>
                        <button class="btn btn-sm btn-danger delete">Delete</button>
                    </td>
                </tr>
            `);
        });
    });
}

$(document).ready(function(){
    refreshTable();

    // Update existing entity
    $(document).on("click", ".save", function(){
        const row = $(this).closest("tr");
        const steamId = row.data("steamid");
        const payload = {
            name: row.find(".name").val(),
            hp: row.find(".hp").val(),
            salary: row.find(".salary").val(),
            extramodels: row.find(".extramodels").val()
        };
        $.post(`/admin/custom_tools/reborngaming/cc_whitelist/update/${steamId}`, payload, function(res){
            alert(res.message);
            refreshTable();
        });
    });

    // Delete entity
    $(document).on("click", ".delete", function(){
        if(!confirm("Delete this CustomClass?")) return;
        const row = $(this).closest("tr");
        const steamId = row.data("steamid");
        $.post(`/admin/custom_tools/reborngaming/cc_whitelist/delete/${steamId}`, {}, function(res){
            alert(res.message);
            refreshTable();
        });
    });

    // Add new entity
    $("#add-entity").click(function(){
        const steamId = prompt("Enter new Steam ID:");
        if(!steamId) return;
        $.post(`/admin/custom_tools/reborngaming/cc_whitelist/create`, {steamId}, function(res){
            alert(res.message);
            refreshTable();
        });
    });
});
</script>
{% endblock %}