{{-- <form action="{{ route('roles.store') }}" method="POST">
    @csrf
    <input type="text" name="name" placeholder="Role name">

    <h5>Assign Permissions</h5>
    @foreach ($permissions as $permission)
        <label>
            <input type="checkbox" name="permissions[]" value="{{ $permission->name }}">
            {{ $permission->name }}
        </label>
    @endforeach

    <button type="submit">Create Role</button>
</form> --}}
@extends('admin.layouts.app')
@section('content')
<div class="container px-0 py-4">
  <div class="row p-0">
    <!-- Left Side: Blog Post Form -->
    <div class="col-md-12 p-0">
      <div class="bg-white p-4 rounded shadow-sm border">
        <div class="row p-0">
            <div class="col-md-12 p-0">
                <h2 class="h4 mb-4 text-dark">Add Role</h2>
                {{-- <form action="{{ route('admin.roles.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Role Name</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Assign Permissions</label><br>
                        <div class="row">
                            @foreach ($permissions as $group => $groupPermissions)
                                <div class="col-md-3">
                                    <div class="mb-3 border p-3 rounded d-flex flex-column">
                                        <div class="form-check mb-2">
                                            <input type="checkbox" class="form-check-input group-checkbox" data-group="{{ $group }}" id="group_{{ $loop->index }}">
                                            <label class="form-check-label fw-bold" for="group_{{ $loop->index }}">{{ ucfirst($group) }} (Select All)</label>
                                        </div>

                                        @foreach ($groupPermissions as $permission)
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" class="form-check-input permission-checkbox group-{{ $group }}" name="permissions[]" value="{{ $permission->name }}" id="perm_{{ $permission->id }}">
                                                <label class="form-check-label" for="perm_{{ $permission->id }}">{{ $permission->name }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <button class="btn btn-success">Create Role</button>
                </form> --}}
                <form action="{{ isset($role) ? route('admin.roles.update', $role->id) : route('admin.roles.store') }}" method="POST">
                    @csrf
                    @if(isset($role))
                        @method('PUT')
                    @endif

                    <div class="mb-3">
                        <label class="form-label">Role Name</label>
                        <input type="text" name="name" class="form-control" required value="{{ old('name', $role->name ?? '') }}">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Assign Permissions</label><br>
                        <div class="row">
                            @foreach ($permissions as $group => $groupPermissions)
                                <div class="col-md-3">
                                    <div class="mb-3 border p-3 rounded d-flex flex-column">
                                        <div class="form-check mb-2">
                                            <input type="checkbox" class="form-check-input group-checkbox" data-group="{{ $group }}" id="group_{{ $loop->index }}">
                                            <label class="form-check-label fw-bold" for="group_{{ $loop->index }}">{{ ucfirst($group) }} (Select All)</label>
                                        </div>

                                        @foreach ($groupPermissions as $permission)
                                            <div class="form-check form-check-inline">
                                                <input
                                                    type="checkbox"
                                                    class="form-check-input permission-checkbox group-{{ $group }}"
                                                    name="permissions[]"
                                                    value="{{ $permission->name }}"
                                                    id="perm_{{ $permission->id }}"
                                                    {{ (isset($rolePermissions) && in_array($permission->name, $rolePermissions)) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="perm_{{ $permission->id }}">{{ $permission->name }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <button class="btn btn-{{ isset($role) ? 'primary' : 'success' }}">
                        {{ isset($role) ? 'Update Role' : 'Create Role' }}
                    </button>
                </form>

            </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
    document.querySelectorAll('.group-checkbox').forEach(groupCheckbox => {
        groupCheckbox.addEventListener('change', function () {
            const group = this.dataset.group;
            const checkboxes = document.querySelectorAll(`.group-${group}`);
            checkboxes.forEach(cb => cb.checked = this.checked);
        });
    });
</script>
@endpush
@endsection