@extends('template.master')
{{-- modal --}}

{{-- modal --}}
@section('content')
    <x-primary-button data-bs-toggle="modal" data-bs-target="#modalTambahRole" class="mb-4">Tambah Role</x-primary-button>
    <div class="card">
        <div class="card-body">
            <table class="table table-striped data-table">
                <thead>
                    <tr>
                        <th id="no">No</th>
                        <th>Role</th>
                        <th width="105px">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    @include('master-data.role.modal.add')
    @include('master-data.role.modal.edit')
@endsection
@push('extraJS')
    <script type="text/javascript">
        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('roles.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: 'role',
                    name: 'role'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
                ]
            });

        });

        // tambah
        $('#formTambahRole').on('submit', function (e) {
            e.preventDefault();

            const form = $(this);
            const name = $('#role').val().trim();
            let actions = $('[name="actions[]"]');
            if (!name) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Validasi Gagal',
                    text: 'Nama role wajib diisi.'
                });
                return;
            }

            $.ajax({
                url: '{{ route('roles.store') }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: form.serialize(),
                success: function (response) {
                    $('#modalTambahRole').modal('hide');
                    form.trigger("reset");

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });

                    $('.data-table').DataTable().ajax.reload();
                },
                error: function (xhr) {
                    let message = xhr.responseJSON?.message || 'Terjadi kesalahan';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Menyimpan',
                        text: message
                    });
                }
            });
        });

        // edit
        $(document).on('click', '.edit', function () {
            let id = $(this).data('id');
            let role = $(this).data('role');
            let actions = $(this).data('actions');

            $('#edit-id').val(id);
            $('#edit-role').val(role);
            $('#modalEditRole').modal('show');

            $('[name="actions[]"]').prop('checked', false).trigger('change');

            // Loop dan centang yang sesuai
            if (Array.isArray(actions)) {
                actions.forEach(function (actionId) {
                    $(`[name="actions[]"][value="${actionId}"]`).prop('checked', true).trigger('change');
                });
            }
        });

        // Handle form submit edit
        $('#formEditRole').on('submit', function (e) {
            e.preventDefault();
            const form = $(this);

            let id = $('#edit-id').val();
            let role = $('#edit-role').val().trim();
            let actions = $('[name="actions[]"]');

            if (!role) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Validasi Gagal',
                    text: 'Nama role wajib diisi.'
                });
                return;
            }

            $.ajax({
                url: `/roles/${id}`,
                type: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: form.serialize(),
                success: function (response) {
                    $('#modalEditRole').modal('hide');

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });

                    $('.data-table').DataTable().ajax.reload();
                },
                error: function (xhr) {
                    let message = xhr.responseJSON?.message || 'Terjadi kesalahan saat update.';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Update',
                        text: message
                    });
                }
            });
        });
        // delete
        $(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: '/roles/' + 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) {
                            Swal.fire('Gagal!', 'Data gagal dihapus.', 'error');
                        }
                    });
                }
            });
        });
    </script>
@endpush