@extends('layouts.master')

@section('content')
<div class="container-xxl py-3">
    <div class="d-flex justify-content-end align-items-end mb-2">
        <h4 class="fw-bolder mb-0 me-auto">Data Pengguna</h4>
        <a href="{{ route('users.create') }}" class="btn btn-primary"><i class="fa-solid fa-fw fa-plus"></i> Tambah</a>
    </div>
    <div class="card shadow">
        <div class="card-body">
            <div class="table-responsive">
                <table id="dt" class="table align-middle" width="100%">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<link href="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-html5-2.4.2/b-print-2.4.2/datatables.min.css" rel="stylesheet">
@endPush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-html5-2.4.2/b-print-2.4.2/datatables.min.js"></script>
<script>
$(()=>{
    'use strict'
    const table = $('#dt').DataTable({
        serverSide: true,
        processing: true,
        ajax: {
            url: `{{ route('users.index') }}`
        },
        columns: [
            { data:'name' },
            { data:'username' },
            { data:'email' },
            { 
                data: 'roles',
                searchable: false,
                orderable: false,
                render(data){
                    let roles = data || [];
                    return roles.length > 0 ? roles[0].name : '';
                }
            },
            { 
                data:'id',
                className: 'text-end',
                width: '40px',
                render(data, type, row, meta){
                    return `<div class="dropdown dropstart">
                        <button class="btn btn-sm btn-light shadow" data-bs-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-vertical"></i></button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="{{ route('users.index') }}/${data}/edit">Edit</a></li>
                            <li><a class="dropdown-item dt-row-delete" href="{{ route('users.index') }}/${data}">Delete</a></li>
                        </ul>
                    </div>`;
                } 
            }
        ],
        rowCallback(row){
            let api = this.api();
            $(row).find('.dt-row-delete').click(function(e){
                e.preventDefault();
                let url = $(this).attr('href');
                Swal.fire({
                    title   : "Are you sure ?",
                    text    : "Data can't restore after deleted!",
                    icon    : "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, Delete!",
                    cancelButtonText: "No, Cancel",
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: url,
                            type: "DELETE",
                            data: {
                                _token  : '{{ csrf_token() }}',
                                _method : 'DELETE'
                            },
                            error   : function(response){
                                createAlert({status:'error', 'message':'Data gagal dihapus'});
                            },
                            success : function(response) {
                                api.ajax.reload(null, false);
                                createAlert(response.alert);
                            }
                        });
                    }
                });
            });
        }
    });
});
</script>
@endPush