@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <div class="row align-items-center mb-4">
        <div class="col">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item small"><a href="{{ route('roles.index') }}">Roles</a></li>
                    <li class="breadcrumb-item active small" aria-current="page">Add New Role</li>
                </ol>
            </nav>
            <h2 class="h3 mb-0 text-gray-800">Add New Role</h2>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <form action="{{ route('roles.store') }}" method="POST">
                        @csrf
                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Role Name</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="e.g. Sales Manager" required>
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted text-uppercase d-block mb-3">Assign Permissions</label>
                            <div class="row g-3">
                                @foreach($permissions->chunk(2) as $chunk)
                                    @foreach($chunk as $permission)
                                        <div class="col-md-6">
                                            <div class="form-check p-3 border rounded-3 hover-shadow-sm transition-all h-100">
                                                <input class="form-check-input ms-0 me-3" type="checkbox" name="permissions[]" value="{{ $permission->id }}" id="perm_{{ $permission->id }}">
                                                <label class="form-check-label ms-1 fw-bold" for="perm_{{ $permission->id }}">
                                                    {{ $permission->name }}
                                                    <div class="text-muted small fw-normal mt-1">Allows user to access {{ strtolower($permission->name) }} features.</div>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                @endforeach
                            </div>
                            @error('permissions') <div class="text-danger small mt-2">{{ $message }}</div> @enderror
                        </div>

                        <div class="mt-4 pt-4 border-top text-end">
                            <a href="{{ route('roles.index') }}" class="btn btn-light border">Cancel</a>
                            <button type="submit" class="btn btn-primary px-4">Create Role</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.hover-shadow-sm:hover {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-color: #0d6efd !important;
}
.transition-all {
    transition: all 0.2s ease-in-out;
}
</style>
@endsection