@extends('layouts.admin')
@section('title', 'Edit role')
@section('content')
<x-admin.page
    title="{{ $role->name }}"
    subtitle="Update role details and the exact permissions granted to staff with this role."
>
    <x-slot:actions>
        <a href="{{ route('admin.roles.index') }}" class="admin-btn">All roles</a>
        <a href="{{ route('admin.roles.matrix', $role) }}" class="admin-btn">Permission matrix</a>
        <a href="{{ route('admin.staff.index') }}" class="admin-btn">Assign to staff</a>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @if(session('warning'))
        <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">{{ session('warning') }}</div>
    @endif
    @if($sodWarning)
        <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
            <strong>Separation of duties:</strong> this role currently has both <code>finance.refund</code> and <code>finance.approve</code>.
        </div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <form method="post" action="{{ route('admin.roles.update', $role) }}" class="space-y-5">
        @csrf @method('PUT')
        <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
            <div class="flex flex-wrap items-center gap-2">
                <h3 class="text-sm font-semibold">Role details</h3>
                @if($isLocked)
                    <x-admin.badge tone="warning">Protected</x-admin.badge>
                @endif
            </div>
            <div class="mt-4 grid gap-4 md:grid-cols-2">
                <label class="block text-sm md:col-span-2">
                    <span class="admin-label">Name</span>
                    <input class="admin-input" name="name" value="{{ old('name', $role->name) }}" required>
                </label>
                <label class="block text-sm">
                    <span class="admin-label">Slug</span>
                    <input class="admin-input font-mono text-xs" name="slug" value="{{ old('slug', $role->slug) }}" @readonly($isLocked) @required(! $isLocked)>
                    @if($isLocked)
                        <span class="mt-1 block text-xs text-[#6d7175]">Super-admin slug is locked.</span>
                    @endif
                </label>
                <label class="block text-sm md:col-span-2">
                    <span class="admin-label">Description</span>
                    <textarea class="admin-input min-h-[4rem]" name="description">{{ old('description', $role->description) }}</textarea>
                </label>
            </div>
            @if($role->users->isNotEmpty())
                <div class="mt-4 rounded-xl border border-[var(--color-admin-border)] bg-[#fafbfb] px-4 py-3">
                    <p class="text-xs font-semibold uppercase tracking-wide text-[#6d7175]">Staff with this role</p>
                    <ul class="mt-2 space-y-1 text-sm">
                        @foreach($role->users->take(8) as $user)
                            <li>{{ $user->name }} <span class="text-[#8c9196]">· {{ $user->email }}</span></li>
                        @endforeach
                        @if($role->users->count() > 8)
                            <li class="text-xs text-[#6d7175]">+{{ $role->users->count() - 8 }} more</li>
                        @endif
                    </ul>
                </div>
            @endif
        </section>

        @include('admin.roles._permissions', [
            'permissions' => $permissions,
            'presets' => $presets,
            'selectedIds' => $role->permissions->pluck('id')->all(),
        ])

        <div class="flex flex-wrap gap-2">
            <button class="admin-btn admin-btn-primary" type="submit">Save role & permissions</button>
            <a href="{{ route('admin.roles.index') }}" class="admin-btn">Cancel</a>
        </div>
    </form>

    @unless($isLocked)
        <form method="post" action="{{ route('admin.roles.destroy', $role) }}" class="mt-6 rounded-2xl border border-red-200 bg-red-50/50 p-5" onsubmit="return confirm('Delete this role? Staff must be unassigned first.')">
            @csrf @method('DELETE')
            <h3 class="text-sm font-semibold text-red-900">Delete role</h3>
            <p class="mt-1 text-xs text-red-800">Removes the role permanently. Staff currently assigned cannot remain on a deleted role.</p>
            <button class="admin-btn mt-3 border-red-300 text-red-800" type="submit">Delete role</button>
        </form>
    @endunless
</x-admin.page>
@endsection