@extends('admin.layouts.app')

@section('title', isset($role) ? 'Edit Role' : 'Create Role')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-xl font-semibold" style="color: var(--vsc-text-primary)">
            {{ isset($role) ? 'Edit Role' : 'Create Role' }}
        </h1>
        <p class="text-sm mt-1" style="color: var(--vsc-text-muted)">
            {{ isset($role) ? 'Update role details and permissions' : 'Define a new role with permissions' }}
        </p>
    </div>
    <a href="{{ route('admin.roles.index') }}" class="btn btn-secondary flex items-center gap-2">
        <i data-lucide="arrow-left" class="w-4 h-4"></i> Back
    </a>
</div>

<div class="glass-card p-6" style="max-width: 600px;">
    <form method="POST" action="{{ isset($role) ? route('admin.roles.update', $role) : route('admin.roles.store') }}">
        @csrf
        @if(isset($role)) @method('PUT') @endif

        <div class="form-group mb-4">
            <label class="form-label">Role Name <span class="text-red-400">*</span></label>
            <input type="text" name="name" class="form-control @error('name') border-red-500 @enderror"
                value="{{ old('name', $role->name ?? '') }}" required>
            @error('name')<span class="text-red-400 text-xs mt-1 block">{{ $message }}</span>@enderror
        </div>

        <div class="form-group mb-6">
            <label class="form-label">Description</label>
            <textarea name="description" class="form-control" rows="3">{{ old('description', $role->description ?? '') }}</textarea>
        </div>

        <div class="form-group mb-6">
            <label class="form-label">Permissions</label>
            @php
                $allPermissions = ['view', 'create', 'edit', 'delete', 'export', 'manage_users', 'manage_settings'];
                $current = old('permissions', isset($role) ? ($role->permissions ?? []) : []);
            @endphp
            <div class="grid grid-cols-2 gap-3 mt-2">
                @foreach($allPermissions as $perm)
                <label class="flex items-center gap-2 cursor-pointer p-2 rounded" style="background: var(--vsc-bg-secondary); border: 1px solid var(--vsc-border);">
                    <input type="checkbox" name="permissions[]" value="{{ $perm }}"
                        {{ in_array($perm, $current) ? 'checked' : '' }}
                        class="w-4 h-4 rounded" style="accent-color: var(--vsc-blue)">
                    <span style="color: var(--vsc-text-secondary); font-size: 0.85rem;">{{ ucfirst(str_replace('_', ' ', $perm)) }}</span>
                </label>
                @endforeach
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" class="btn btn-primary">
                <i data-lucide="{{ isset($role) ? 'save' : 'plus-circle' }}" class="w-4 h-4 mr-2"></i>
                {{ isset($role) ? 'Update Role' : 'Create Role' }}
            </button>
            <a href="{{ route('admin.roles.index') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection