@extends('layouts.admin-layout')
@include('includes.getFormData')
@section('title', '使用者列表')
@section('content')

<h3 class="ms-2 mb-4">使用者列表</h3>
<table id="userTable" class="table table-striped text-center responsive nowrap" style="width:100%"></table>

@endsection

<script>
document.addEventListener('DOMContentLoaded', function(){
    const listUrl = '{{ route('get_user_list') }}'
    let list = []
    let table = ''
    const deleteUrl = '{{ route('delete') }}'

    init()

    function init(){
        if (table){ table.destroy() }

        fetch(listUrl)
        .then(res => res.json())
        .then(data => {
            list = data.data
            getDataTable()
        }) 
    }

    function getDataTable() {
        table = new DataTable('#userTable', {
            data: list,
            columns: [ 
                { data: 'name', title: "姓名" },
                { data: 'email', title: "Email" },
                {
                    title: "使用者身份",
                    data: null,
                    render: function(data, type, row){
                        if (row.group === 'admin'){
                            return '管理員'
                        } else if (row.group === 'user'){
                            return '一般使用者'
                        } else {
                            return '無身份'
                        }
                    }
                },
                {
                    title: "單位",
                    data: null,
                    render: function(data, type, row){
                        switch (row.unit) {
                            case 'comma':
                                return '逗點';
                                break;
                            case 'n23':
                                return '台灣北緯二十三度';
                                break;
                            case 'roll_call':
                                return '早點名';
                                break;
                            case 'experiment':
                                return '實驗室';
                                break;
                            default:
                                return '無單位';
                        }
                    }
                },
                {
                    title: "",
                    data: null,
                    render: function ( data, type, row ) {
                        var url = '{{ route("update", ":id") }}';
                        var id = row.id
                        url = url.replace(':id', id);
                        return   `<div class="d-flex flex-nowrap">
                                    <a href="${url}"><button type="button" class="btn btn-edit me-2 btn-sm" data-id="${row.id}"><i class="bi bi-pencil"></i></button></a>
                                    <button type="button" class="btn btn-warn btn-sm" id="delete" data-id="${row.id}"><i class="bi bi-archive" data-id="${row.id}"></i></button>
                                 </div>`
                        }
                },
                
            ],
            columnDefs: [
                { responsivePriority: 10002, targets: 1 },
                { responsivePriority: 10001, targets: 2 },
            ],
            responsive: true,
            dom: "<'d-flex justify-content-between align-items-center mt-5 mb-3'f>" + "tp",
            lengthChange: false,
            info: false,
            pageLength: 10,
            language: {
                paginate: {
                    previous: '<i class="bi bi-chevron-double-left"></i>',
                    next: '<i class="bi bi-chevron-double-right"></i>'
                },
                search: '<i class="bi bi-search me-2"></i>',
                emptyTable: '目前尚無資料',
                zeroRecords: '找不到符合的資料'
            }
        })
        Array.from(table.columns().header()).forEach(header => {
            header.classList.add('border', 'border-end-0','border-dark','text-center')
        })
        table.column(4).header().classList.remove('border-end-0', 'sorting')
        const searchOuter = document.querySelector('.dataTables_filter')
        const search = document.querySelector('.dataTables_filter input[type="search"]')
        search.placeholder = 'Search...'
        let createBtn = document.createElement('div')
        createBtn.innerHTML = ` <a class="btn btn-create" href="{{ route('register') }}">
            <i class="bi bi-plus-circle me-1"></i>
            新增使用者
        </a>`
        searchOuter.after(createBtn)
        deleteInit()
    }   

    function deleteInit(){
        const deleteBtns = document.querySelectorAll('#delete')
        const paginateBtns = document.querySelectorAll('.paginate_button')
        
        function deleteAlert(e){
            const id = e.target.dataset.id
            Swal.fire({
                icon: 'warning',
                text: '請確認是否要刪除',
                showCancelButton: true,
                cancelButtonText:'取消',
                confirmButtonText: '確認',
                reverseButtons: true,
            }).then((result) => {
                if (result.isConfirmed) {
                    deleteItem(id)
                }
            })  
        }

        function deleteItem (id){
            let formData = new FormData()
            formData.append('_token', '{{ csrf_token() }}')
            formData.append('userID', id)
            fetch(deleteUrl, {
                method: 'POST',
                body: formData
            })
            .then(res => {
                res.json()
                init()
            })
        }
        deleteBtns.forEach(btn => btn.addEventListener('click', deleteAlert))
        paginateBtns.forEach( btn => btn.addEventListener('click', deleteInit))
    }
})

</script>