@extends('layouts.app')
@section('title', 'Permissions Management')

@section('css')
    <link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 grid-margin stretch-card">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-2"></div>
                                        <div class="col-md-8 text-center ">
                                            @can('permission-create')
                                                <a href="{{ route('permissions.create') }}" class="btn btn-primary btn-sm" onClick="createData()">
                                                    <i class="mdi mdi-plus"></i> Create Role
                                                </a>
                                            @endcan
                                        </div>
                                        <div class="col-md-2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">
                        <table class="table" id="data-table">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Role Name</th>
                                    <th>Total Users</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Check for flash message
    @if(session('success'))
        Swal.fire({
            title: 'Success!',
            text: "{{ session('success') }}",
            icon: 'success',
            confirmButtonColor: '#3085d6'
        });
    @endif

    var dataTable = $('#data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("permissions.index") }}',
            type: 'GET'
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'user_count', name: 'user_count' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
        order: [[1, 'asc']]
    });

    function createData() {
        $('#formData').trigger('reset');
        $('#role_id').val('');
        $('.permission-checkbox').prop('checked', false);
        $('#formModalLabel').html('Create Role');
        $('#formModal').modal('show');
    }

    function editData(id) {
        $.get('{{ url("permissions") }}/' + id + '/edit', function(data) {
            $('#role_id').val(data.id);
            $('#name').val(data.name);
            $('.permission-checkbox').prop('checked', false);
            data.permissions.forEach(function(permission) {
                $('.permission-checkbox[value="' + permission.name + '"]').prop('checked', true);
            });
            $('#formModalLabel').html('Edit Role');
            $('#formModal').modal('show');
        });
    }

    $('#saveBtn').click(function() {
        var id = $('#role_id').val();
        var method = id ? 'PATCH' : 'POST';
        var url = id ? '{{ url("permissions") }}/' + id : '{{ route("permissions.store") }}';

        var permissions = [];
        $('.permission-checkbox:checked').each(function() {
            permissions.push($(this).val());
        });

        $.ajax({
            url: url,
            method: method,
            data: {
                name: $('#name').val(),
                permissions: permissions,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if(response.success) {
                    $('#formModal').modal('hide');
                    dataTable.ajax.reload();
                    Swal.fire('Success!', response.message, 'success');
                } else {
                    Swal.fire('Error!', response.message, 'error');
                }
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                let errorMessage = '';
                for (let field in errors) {
                    errorMessage += errors[field][0] + '\n';
                }
                Swal.fire('Validation Error!', errorMessage, 'error');
            }
        });
    });

    function deleteData(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ url("permissions") }}/' + id,
                    method: 'DELETE',
                    success: function(response) {
                        if(response.success) {
                            dataTable.ajax.reload();
                            Swal.fire({
                                title: 'Deleted!',
                                text: response.message,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            });
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: response.message,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Something went wrong!',
                            icon: 'error',
                            confirmButtonColor: '#3085d6'
                        });
                    }
                });
            }
        });
    }
</script>
@endsection