<%-include("../partials/header.ejs") %>
<%-include("../partials/sidebar.ejs") %>
<div class="app-content">
    <%-include("../partials/navbar.ejs") %>

    <main>
        <div class="container-fluid">
            <!-- Breadcrumb start -->
            <div class="row m-1">
                <div class="col-12">
                    <h4 class="main-title">Sisteme Kayıtlı Öğrenciler</h4>
                    <p>
                        Öğrenciler ekleyebilir, düzenleyebilir ve silebilirsiniz 
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card ">
                        <div class="card-header ">
                            <div class="d-flex flex-row flex-1">
                                <h5 class="flex-fill">
                                    Öğrenciler
                                </h5>
                                <div class="flex-min">
                                    <button class="btn btn-success" data-bs-target="#add_student" data-bs-toggle="modal" type="button">
                                        <i class="fa fa-plus"></i>
                                        Öğrenci ekle
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="app-datatable-default overflow-auto">
                                <table class="table display app-data-table default-data-table" id="studentslist"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<div aria-hidden="true" class="modal fade" id="add_student" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Yeni Öğrenci 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="studentsaveform" onsubmit="saveStudent(this);return false;">
                <div class="row app-form">
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Adı <small class="text-danger">*</small></label>
                        <input type="text" class="form-control" name="name" placeholder="Öğrencinin adı" required min="3">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Soyadı</label>
                        <input type="text" class="form-control" name="surname" placeholder="Öğrencinin Soyadı">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Numarası</label>
                        <input type="text" class="form-control" name="studentno" placeholder="Öğrencinin Numarası">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">E-Posta Adresi</label>
                        <input type="email" class="form-control" name="email" placeholder="Öğrencinin E-Posta Adresi">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Doğum Tarihi</label>
                        <input type="date" class="form-control" name="birthdate" placeholder="Öğrencinin E-Posta Adresi">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Cinsiyeti</label>
                        <select name="gender" class="form-control">
                            <option>Belirtilmemiş</option>
                            <option value="male">Erkek</option>
                            <option value="female">Kadın</option>
                        </select>
                    </div>
                    <div class="col-md-12 mt-3">
                        <label class="form-label">Açıklama</label>
                        <textarea name="description" class="form-control" placeholder="Öğrenci hakkında"></textarea>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button class="btn btn-outline-success" type="submit" form="studentsaveform">Kaydet</button>
                <button class="btn btn-light-secondary" data-bs-dismiss="modal" type="button">Kapat</button>
            </div>
        </div>
    </div>
</div>
<div aria-hidden="true" class="modal fade" id="update_student" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Öğrenci güncelle</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="studentupdateform" onsubmit="updateStudent(this);return false;">
                <input type="hidden" name="id">
                <div class="row app-form">
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Adı <small class="text-danger">*</small></label>
                        <input type="text" class="form-control" name="name" placeholder="Öğrencinin adı" required min="3">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Soyadı</label>
                        <input type="text" class="form-control" name="surname" placeholder="Öğrencinin Soyadı">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Numarası</label>
                        <input type="text" class="form-control" name="studentno" placeholder="Öğrencinin Numarası">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">E-Posta Adresi</label>
                        <input type="email" class="form-control" name="email" placeholder="Öğrencinin E-Posta Adresi">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Doğum Tarihi</label>
                        <input type="date" class="form-control" name="birthdate" placeholder="Öğrencinin E-Posta Adresi">
                    </div>
                    <div class="col-md-6 mt-3">
                        <label class="form-label">Cinsiyeti</label>
                        <select name="gender" class="form-control">
                            <option>Belirtilmemiş</option>
                            <option value="male">Erkek</option>
                            <option value="female">Kadın</option>
                        </select>
                    </div>
                    <div class="col-md-12 mt-3">
                        <label class="form-label">Açıklama</label>
                        <textarea name="description" class="form-control" placeholder="Öğrenci hakkında"></textarea>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button class="btn btn-outline-success" type="submit" form="studentupdateform">Güncelle</button>
                <button class="btn btn-light-secondary" data-bs-dismiss="modal" type="button">Kapat</button>
            </div>
        </div>
    </div>
</div>
<script>
    let dataTable;
    $(function(){
        dataTable = $("#studentslist").DataTable({
            serverSide: true,
            processing: true,
            autoWidth: false,
            ajax: {
                url: "/students/list",
                method:"post"
            },
            columns: [
                {
                    width: "1%",
                    title: "#",
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    title: "Adı Soyadı",
                    data: null,
                    name: "fullname",
                    render: function (data, row) {
                        return `${data.name} ${data.surname || ''}`;
                    }
                },
                {
                    title: "Öğrenci No",
                    data: "studentno",
                    name: "studentno"
                },
                {
                    title: "Cinsiyet",
                    data: "gender",
                    name: "gender",
                    render: function (data) {
                        if (data === 'male') return 'Erkek';
                        if (data === 'female') return 'Kadın';
                        return 'Belirtilmemiş';
                    }
                },
                {
                    title: "E-Posta",
                    data: "email",
                    name: "email"
                },
                {
                    width: "1%",
                    title: "İşlemler",
                    data: null,
                    orderable: false, // İşlemlere göre sıralama yapılamasın
                    render: function (data) {
                        return `
                            <div class="btn-group d-flex flex-row flex-nowrap" role="group">
                                <button class="btn btn-sm btn-outline-primary text-nowrap" onclick="updateModal(this)" title="Düzenle">
                                    <i class="fa fa-edit"></i>
                                    Düzenle
                                </button>
                                <button class="btn btn-sm btn-outline-danger text-nowrap" onclick="deleteStudent(${data.id})" title="Sil">
                                    <i class="fa fa-trash"></i>
                                    Sil
                                </button>
                            </div>`;
                    }
                }
            ],
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.13.6/i18n/tr.json"
            }
        });
    });
    async function saveStudent(form)
    {
        blockui("#add_student .modal-content");
        $.ajax({
            url: "/students/store",
            type: "post",
            data: new FormData(form),
            processData: false,
            contentType: false,
            success: function(response) {
                dataTable.ajax.reload(null, false);
                $("#add_student").modal("hide");
                ublockui();
            },
            error: function(err) {
                ublockui();
            },
        });
    }
    async function deleteStudent(id)
    {
        if(confirm("Kaydı silmek istediğinize emin misiniz?"))
        {
            $.ajax({
                url: "/students/destroy",
                type: "post",
                data: {
                    id
                },
                success: function(response) {
                    dataTable.ajax.reload(null, false);
                    ublockui();
                },
                error: function(err) {
                    ublockui();
                },
            });
        }
    }
    async function updateStudent(form)
    {
        blockui("#update_student .modal-content");
        $.ajax({
            url: "/students/update",
            type: "post",
            data: new FormData(form),
            processData: false,
            contentType: false,
            success: function(response) {
                dataTable.ajax.reload(null, false);
                $("#update_student").modal("hide");
                ublockui();
            },
            error: function(err) {
                ublockui();
            },
        });
    }
    
    async function updateModal(tr)
    {
        let data = dataTable.row($(tr).closest('tr')).data();

        $("#update_student form").get(0).reset();
        $("#update_student [name='id']").val(data.id);

        $("#update_student form input,#update_student form textarea").each(function(){
            let name = this.name;
            $(this).val(data[name]);
        });
        $("#update_student form select").each(function(){
            let name = this.name;
            $(this).find("option:selected").removeAttr("selected");
            $(this).find(`option[value="${data[name]}"]`).attr("selected","selected");
        });
        $("#update_student").modal("show");
    }
    function blockui(ui)
    {
        $(blockui.id = ui).block({
            message: '<div class="loader-container-box"><div class="loader"></div></div>',
            //timeout: 13000,
            overlayCSS: {
                backgroundColor: 'rgba(var(--dark), 0.8)',
                opacity: 0.8,
                borderRadius: 'var(--app-border-radius)',
                cursor: 'wait'
            },
            css: {
                border: 0,
                padding: 0,
                backgroundColor: 'transparent'
            }
        });
    }
    function ublockui()
    {
        $(blockui.id).unblock()
    }
</script>
<%-include("../partials/footer.ejs") %>