@extends('template.master')

@section('content')
    @if ($canCreate)
        <button class="mb-4 btn btn-primary add">Tambah Users</button>
    @endif
    <div class="card">
        <div class="card-body">
            <table class="table table-striped data-table">
                <thead>
                    <tr>
                        <th id="no">No</th>
                        <th>Nama</th>
                        <th>Email</th>
                        <th>Username</th>
                        <th>Sites</th>
                        <th>Role</th>
                        {{-- <th>Content</th> --}}
                        <th width="105px">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>


    @include('master-data.users.modal')
@endsection

@push('extraJS')
    <script type="text/javascript">
        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('users.index') }}",
                columnDefs: [{
                    width: "50px",
                    targets: 0
                } // 0 adalah index kolom 'id'
                ],
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', className: 'text-center', orderable: false, searchable: false },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'username', name: 'username' },
                    { data: 'sites', name: 'sites' },
                    { data: 'role', name: 'role' },
                    // { data: 'content', name: 'content' },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

        });

        $(document).on("click", ".add", function () {
            $(".invalid-feedback").text("")
            $("#addModal").modal("show");

        });
        $(document).on("click", ".edit", function () {
            $(".invalid-feedback").text("")
            var id = $(this).data('id');
            var name = $(this).data('name');
            var email = $(this).data('email');
            var username = $(this).data('username');
            var roles = $(this).data('roles');
            var location = $(this).data('location');

            // Ubah ini ke URL update sesuai route Anda
            var updateUrl = `/users/${id}`; // Sesuaikan jika route Anda memiliki prefix lain
            $("#editModal form").attr("action", updateUrl);
            $("#name_edit").val(name);
            $("#email_edit").val(email);
            $("#username_edit").val(username);
            $("#roles_edit").val(roles).trigger('change'); // trigger agar select2 update
            $("#location_edit").val(location).trigger('change'); // trigger agar select2 update
            $("#editModal").modal("show");
        });


        $(document).on("click", ".delete", function () {
            var id = $(this).data("id");

            Swal.fire({
                title: 'Apakah kamu yakin?',
                text: "Data akan dihapus secara permanen!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/users/' + id,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (res) {
                            Swal.fire('Terhapus!', res.message, 'success');
                            $('.data-table').DataTable().ajax.reload();
                        },
                        error: function (xhr) {
                            console.log(xhr);
                            Swal.fire('Gagal!', 'Data gagal dihapus.', 'error');
                        }
                    });
                }
            });
        });
    </script>
@endpush