@extends('layouts.admin')
@section('title','Create Role')
@section('page-title','Create Role')
@section('content')
<div style="max-width:720px;">
    <div class="page-header">
        <h1>Create New Role</h1>
        <a href="{{ route('admin.roles.index') }}" class="btn btn-outline btn-sm">← Back</a>
    </div>
    <div class="card">
        <div class="card-body">
            @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif
            <form method="POST" action="{{ route('admin.roles.store') }}">
                @csrf
                <div class="grid-2" style="gap:1rem;">
                    <div class="form-group">
                        <label>Role Name *</label>
                        <input type="text" name="name" value="{{ old('name') }}" required placeholder="e.g. Manager">
                    </div>
                    <div class="form-group">
                        <label>Colour</label>
                        <div style="display:flex;gap:.5rem;align-items:center;">
                            <input type="color" name="color" value="{{ old('color','#8B3252') }}" style="width:50px;height:38px;padding:2px;border:1.5px solid #E8D5C4;border-radius:.375rem;">
                            <span style="font-size:.85rem;color:#7A6058;">Used for badge display</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <input type="text" name="description" value="{{ old('description') }}" placeholder="Brief description of this role">
                </div>

                <div style="border-top:1px solid #E8D5C4;padding-top:1.25rem;margin-top:.5rem;">
                    <h3 style="font-size:1rem;margin-bottom:1rem;">Permissions</h3>
                    @foreach($permissions as $group => $perms)
                    <div style="margin-bottom:1rem;">
                        <div style="font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:#7A6058;font-weight:600;margin-bottom:.5rem;border-bottom:1px solid #f0e8e0;padding-bottom:.25rem;">{{ $group }}</div>
                        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.4rem;">
                            @foreach($perms as $perm)
                            <label style="display:flex;align-items:center;gap:.5rem;font-weight:400;font-size:.875rem;cursor:pointer;padding:.3rem .5rem;border-radius:.25rem;transition:background .15s;" onmouseover="this.style.background='#faf5f0'" onmouseout="this.style.background=''">
                                <input type="checkbox" name="permissions[]" value="{{ $perm->id }}" {{ in_array($perm->id, old('permissions',[])) ? 'checked' : '' }} style="width:auto;">
                                {{ $perm->name }}
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>

                <button type="submit" class="btn btn-primary" style="width:100%;margin-top:1rem;">Create Role</button>
            </form>
        </div>
    </div>
</div>
@endsection