@extends('layouts.admin')

@section('content')
    <style>
        .list-permission .form-check .form-check-label {
            margin-left: .5rem;
        }
    </style>
    <div class="container">
        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Manajemen Role & Hak Akses</h5>
                <button class="btn btn-primary btn-sm" onclick="addRole()">Tambah Role</button>
            </div>
            <div class="card-body">
                <table class="table table-striped table-bordered dt-responsive" id="table-role" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Role</th>
                            <th>Permissions</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalRole" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <form id="formRole">
                @csrf
                <input type="hidden" name="id" id="role_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>Form Role</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Nama Role</label>
                            <input type="text" name="name" id="role_name" class="form-control" required>
                        </div>
                        <label class="mb-2">Pilih Permission:</label>
                        <div class="row list-permission" style="margin: 10px;">
                            @foreach ($permissions as $p)
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="permissions[]"
                                            value="{{ $p->name }}" id="p-{{ $p->id }}">
                                        <label class="form-check-label"
                                            for="p-{{ $p->id }}">{{ $p->name }}</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan Role</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            var table = $('#table-role').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('roles.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'permissions',
                        name: 'permissions'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    }
                ]
            });

            window.addRole = function() {
                $('#role_id').val('');
                $('#formRole')[0].reset();
                $('.form-check-input').prop('checked', false);
                $('#modalRole').modal('show');
            }

            window.editRole = function(id) {
                $.get("/roles/" + id + "/edit", function(data) {
                    $('#role_id').val(data.id);
                    $('#role_name').val(data.name);
                    $('.form-check-input').prop('checked', false);

                    // Centang permission yang sudah dimiliki
                    data.permissions.forEach(p => {
                        $("input[value='" + p.name + "']").prop('checked', true);
                    });
                    $('#modalRole').modal('show');
                });
            }

            $('#formRole').on('submit', function(e) {
                e.preventDefault();
                let id = $('#role_id').val();
                let url = id ? "/roles/" + id : "{{ route('roles.store') }}";
                let method = id ? "PUT" : "POST";

                $.ajax({
                    url: url,
                    type: method,
                    data: $(this).serialize(),
                    success: function(res) {
                        $('#modalRole').modal('hide');
                        table.ajax.reload();
                        Swal.fire('Berhasil', res.success, 'success');
                    }
                });
            });
        });
    </script>
@endpush