<%-include("../partials/header.ejs") %>
<%-include("../partials/sidebar.ejs") %>
<div class="app-content">
    <%-include("../partials/navbar.ejs") %>
    <main>
        <div class="container-fluid">
            <div class="row m-1">
                <div class="col-12">
                    <h4 class="main-title text-center">
                        Öğrenci Skor Tablosu
                    </h4>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card ">
                        <div class="card-body p-0">
                            <div class="app-datatable-default overflow-auto">
                                <table class="table display app-data-table default-data-table" id="eventslist"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<div aria-hidden="true" class="modal fade" id="add_event" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Yeni Skor Ekle</h5>
                <button aria-label="Close" class="btn-close m-0 fs-5" data-bs-dismiss="modal" type="button"></button>
            </div>
            <form class="modal-body" id="eventsaveform" onsubmit="saveEvent(this);return false;">
                <div class="row app-form">
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Öğrenci</label>
                        <select name="student" class="form-control student" required></select>
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Puan Kataloğu</label>
                        <select name="catalog" class="form-control catalog" required></select>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button class="btn btn-outline-success" type="submit" form="eventsaveform">Kaydet</button>
                <button class="btn btn-light-secondary" data-bs-dismiss="modal" type="button">Kapat</button>
            </div>
        </div>
    </div>
</div>
<script>
    let dataTable;
    $(function(){
        dataTable = $("#eventslist").DataTable({
            serverSide: true,
            processing: true,
            autoWidth: false,
            ajax: {
                url: "/events/students",
                method:"post"
            },
            columns: [
                {
                    width: "1%",
                    title: "#",
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    title: "Öğrenci",
                    data: null,
                    name: "fullname",
                    render: function (data, row) {
                        return `${data.name} ${data.surname || ''}`;
                    }
                },
                {
                    title: "Negatif Puan",
                    data: "negative_score",
                    name: "negative_score",
                    render:e => {
                        return `<span class="text-danger">${e.toString()}</span>`;
                    }
                },
                {
                    title: "Pozitif Puan",
                    data: "positive_score",
                    name: "positive_score",
                    render:e => {
                        return `<span class="text-success">+${e.toString()}</span>`;
                    }
                },
                {
                    title: "Toplam Puanı",
                    data: "total_score",
                    name: "total_score",
                    render:e => {
                        return `<span class="text-primary">+${e.toString()}</span>`;
                    }
                }
            ],
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.13.6/i18n/tr.json"
            }
        });
    });
</script>
<%-include("../partials/footer.ejs") %>