
<style>
.dataTables_filter {
    float: left !important;
}
.card-header{
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}
.required label:after {
    color: #e32;
    content: ' *';
    display: inline;
}
.btn-default {
    border: none;
    background: none;
    border-radius: 50%;
}
.dataTables_length{
    padding-top: 0.73em;
}
div.dataTables_filter{
    padding-bottom: 0.7em;
}
.table-hover tbody tr:hover td {
    background: #F8F8F8;
}
.card-header{
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}
#cancle{
    margin-right: 10px;
    border-color: #A79E9E;
}
div.dataTables_wrapper div.dataTables_info{
  	margin-left: -13px;
}
input[type="search"]{
 	width: 250px !important;
}
</style>
<div class="content-wrapper h-100">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container-fluid">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h1 class="card-title"><b>ผู้ใช้งาน</b></h1>
                </div>
                <div class="card-body">
					<table class="table table-bordered table-hover" id="myTable">
    					<thead>
    						<tr>
								<th width="5%">#</th>
								<th width="15%" style="text-align: left" >รหัสนิสิต</th>
								<th style="text-align: left">ชื่อ-นามสกุล</th>
								<th width="10%" style="text-align: left">บทบาท</th>
    							<th width="15%">จัดการ</th>
    						</tr>
    					</thead>
    					<tbody id="mybody">
							
						</tbody>
					</table>
                </div>
            </div>
        </div>
    </div>
</div>
<template id="user_template">
	<td class="text-center index"></td>
	<td class="student_id" style="padding-left:19px"></td>
	<td class="name" style="padding-left:19px"></td>
	<td class="role" style="padding-left:19px"></td>
	<td  class="text-center">
		<button type="button" title="แก้ไข" class="btn btn-default edit"><i class="fas fa-edit"></i></button>
		<button type="button" title="ลบ" class="btn btn-default delete"><i class="fas fa-trash-alt"></i></button>
	</td>
</template>

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

function get_user() {
    $.ajax({
        type: 'get',
        url: "<?php echo site_url() . '/User/get_user'; ?>",
        data: {

        },
        dataType: 'json',
        success: function(data) {
            create_table(data.user);
			let html_code = ''
			html_code = '<a type="button" href="<?php echo site_url() . "/User/show_user_create"; ?>"  id="submit" class="btn btn=info float-right mr-1" style="color:white "><i class="fas fa-plus"></i> เพิ่มผู้ใช้</a>'
			html_code += '<a type="button" href="<?php echo site_url() . "/User/show_user_create_excel"; ?>"  id="submit" class="btn btn=info float-right mr-1" style="color:white"><i class="fas fa-plus"></i> เพิ่ม Excel</a>'
			$("#myTable_filter").after(html_code);
		}
    })
}

function create_table(data) {
	$('#myTable').DataTable().destroy();;
	const table = document.querySelector("#myTable tbody")
    table.innerHTML = ''
	const template = document.getElementById("user_template");
    data.forEach((row, index) => {
		const tr = document.createElement("tr")
		const template_clone = template.content.cloneNode(true);
		template_clone.querySelector('.index').innerText = index+1
		template_clone.querySelector('.student_id').innerText = row.student_id
		template_clone.querySelector('.name').innerText = row.first_name+' '+row.last_name;
		template_clone.querySelector('.role').innerText = row.role == 1 ? 'User' : 'Admin' 
		template_clone.querySelector('.edit').addEventListener('click', function(){ window.location.href = '<?php echo site_url().'/User/show_user_edit/';?>'+row.user_id })
		template_clone.querySelector('.delete').addEventListener('click', function(){ delete_user(row.user_id) })
		tr.appendChild(template_clone);
		table.appendChild(tr);
    });
	convert_to_datatable('myTable')
	$(".dataTables_length").css('clear', 'none');
	$(".dataTables_length").css('margin-right', '20px');
	$(".dataTables_info").css('clear', 'none');
	$(".dataTables_info").css('padding-top', '1');
}

function delete_user(id) {
    Swal.fire({
        title: ' คุณยืนยันที่จะลบผู้ใช้งานหรือไม่',
        text: "",
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3177ce',
        cancelButtonColor: ' white ',
        confirmButtonText: 'ใช่',
        cancelButtonText:  '<Font color=black> ไม่ <Font>',
        reverseButtons: true
    }).then((result) => {
        //Start delete user
        if (result.value) {
            $.ajax({
                type: 'post',
                url: "<?php echo site_url().'/User/delete_user'; ?>",
                data: {
                    'id': id
                },
                dataType: 'json',
                success: async function(data) {
                    if (data['message'] == true) {
                        Toast.fire({
                            icon: 'success',
                            title: 'ลบข้อมูลสำเร็จ',
                        });
                        await get_user();
                    } 
                    else {
                        Toast.fire({
                            icon: 'success',
                            title: 'ลบข้อมูลไม่สำเร็จ',
                        });
                    } 
                }
            });
        }
    })
    $(".swal2-cancel").css("border", "1px solid #A79E9E");
}

</script>


