@extends('admin.layouts.default')
@section('title', 'Permissions')
@section('content')
<style>
    /* Container to hold the toast notifications */
    .toast-container {
        position: fixed;
        top: 1rem; /* Adjust this value to position the toast vertically */
        right: 1rem; /* Adjust this value to position the toast horizontally */
        z-index: 1050; /* Ensure the toast is above other content */
        display: flex;
        flex-direction: column;
        gap: 0.5rem; /* Space between toasts */
    }

    /* Toast styling */
    .toast {
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
    }
</style>
<div class="main-content app-content">
    <div class="container-fluid">
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <h1 class="page-title mb-0 text-primary">{{$role->name}} Permissions</h1>
            <div class="page-rightheader">
                <a href="{{ url('roles-list') }}" class="btn btn-outline-primary me-1">
                    Back
                </a>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h3 class="card-title">Permissions List</h3>
            </div>
            <div class="card-body">
                <form id="permissionsForm" action="{{ url('roles-give-permissions/') }}" method="POST">
                    @csrf
                    <input type="hidden" name="name" value="{{ $role->id }}">
                    @php
                        $groupedPermissions = $permissions->groupBy(function($item) {
                            return explode('-', $item->name)[0]; // 'role-list' se 'role' extract karenge
                        });
                    @endphp

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Permission Name</th>
                                    <th>List</th>
                                    <th>Create</th>
                                    <th>Edit</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($groupedPermissions as $groupName => $groupPermissions)
                                <tr>
                                    <td>{{ ucfirst($groupName) }}</td>
                                    <td>
                                        <input type="checkbox" name="permissions[]" value="{{ optional($groupPermissions->firstWhere('name', $groupName . '-list'))->id }}" 
                                            {{ in_array(optional($groupPermissions->firstWhere('name', $groupName . '-list'))->id, $rolePermissions) ? 'checked' : '' }}>
                                    </td>
                                    <td>
                                        <input type="checkbox" name="permissions[]" value="{{ optional($groupPermissions->firstWhere('name', $groupName . '-create'))->id }}" 
                                            {{ in_array(optional($groupPermissions->firstWhere('name', $groupName . '-create'))->id, $rolePermissions) ? 'checked' : '' }}>
                                    </td>
                                    <td>
                                        <input type="checkbox" name="permissions[]" value="{{ optional($groupPermissions->firstWhere('name', $groupName . '-edit'))->id }}" 
                                            {{ in_array(optional($groupPermissions->firstWhere('name', $groupName . '-edit'))->id, $rolePermissions) ? 'checked' : '' }}>
                                    </td>
                                    <td>
                                        <input type="checkbox" name="permissions[]" value="{{ optional($groupPermissions->firstWhere('name', $groupName . '-delete'))->id }}" 
                                            {{ in_array(optional($groupPermissions->firstWhere('name', $groupName . '-delete'))->id, $rolePermissions) ? 'checked' : '' }}>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    <div class="text-end mt-3">
                        <button type="submit" class="btn btn-primary">Save Permissions</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('#permissionsForm').on('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission

            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: $(this).serialize(), // Serialize the form data
                success: function(response) {
                    // Handle success response
                    showToast(response.message);
                },
                error: function(xhr) {
                    // Handle error response
                    showToast(response.error);

                }
            });
        });
    });

    function showToast(message) {
        var toastEl = document.getElementById('topright-Toast');
        var toast = new bootstrap.Toast(toastEl);
        toastEl.querySelector('.toast-body').textContent = message;
        toast.show();
    }
</script>


</script>
@endsection