@extends('layouts.app')
@section('title', 'Roles & Permissions')
@section('content')
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div><h1 class="text-lg font-bold text-gray-900">Roles & Permissions</h1><p class="text-xs text-gray-400">Manage access roles for system users</p></div>
    <button onclick="document.getElementById('addRoleModal').classList.remove('hidden')" class="btn-primary text-xs flex items-center gap-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> Add Role</button>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
@foreach($roles as $role)
    <div class="bg-white rounded-xl border p-4">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="text-sm font-bold text-gray-800">{{ $role->name }}</h3>
                <p class="text-xs text-gray-400 mt-1">{{ $role->users_count }} user{{ $role->users_count === 1 ? '' : 's' }}</p>
            </div>
            <span class="badge badge-info">{{ $role->guard_name ?? 'web' }}</span>
        </div>
    </div>
@endforeach
</div>

<div class="mt-6 bg-white rounded-xl border shadow-sm p-5">
    <h3 class="text-sm font-bold text-gray-800 mb-3">Default Roles Guide</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs text-gray-600">
        <div><span class="font-semibold text-gray-800">Super Admin:</span> Full system access, manage all settings</div>
        <div><span class="font-semibold text-gray-800">Admin:</span> User management, pricing, reports</div>
        <div><span class="font-semibold text-gray-800">Reception:</span> Patient registration, appointments, visits</div>
        <div><span class="font-semibold text-gray-800">Clinician:</span> Consultations, prescriptions, lab orders</div>
        <div><span class="font-semibold text-gray-800">Nurse:</span> Triage, vitals, medication administration</div>
        <div><span class="font-semibold text-gray-800">Lab Tech:</span> Lab result entry, reports</div>
        <div><span class="font-semibold text-gray-800">Pharmacist:</span> Dispensing, inventory, OTC</div>
        <div><span class="font-semibold text-gray-800">Cashier:</span> Billing, payments, receipts</div>
    </div>
</div>

<div id="addRoleModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-sm mx-4 p-6">
        <h3 class="font-bold mb-3">Add Role</h3>
        <form method="POST" action="{{ route('admin.roles.store') }}">@csrf
            <div><label class="form-label">Role Name *</label><input type="text" name="name" required class="form-input" placeholder="e.g. Imaging Tech"></div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('addRoleModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-primary text-xs">Create Role</button></div>
        </form>
    </div>
</div>
@endsection