@extends('admin.layout')

@section('title', 'Roles & Access')

@section('content')
<div class="pg-head">
    <div>
        <h1>Roles &amp; Access</h1>
        <p>Manage user roles and permissions for your event.</p>
    </div>
    <a href="#access-rules" class="btn-purple">+ Add Role</a>
</div>

<div class="card">
    <div class="tbl-wrap">
        <table class="data-tbl">
            <thead>
                <tr>
                    <th>Role</th>
                    <th>Description</th>
                    <th>Users</th>
                    <th>Permissions</th>
                    <th style="text-align:right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($roles as $role)
                    @php
                        $color = $roleColors[$role->name] ?? '#6366F1';
                        $count = $roleCounts[strtoupper($role->name)] ?? 0;
                        $permCount = 2 + ($role->sessions_limit !== null ? 1 : 0);
                        $permLabel = $role->name === 'VIP' || $role->name === 'KEYNOTE SPEAKER'
                            ? 'All Permissions' : $permCount.' Permissions';
                    @endphp
                    <tr>
                        <td>
                            <div class="cell-user">
                                <div class="role-icon" style="background:{{ $color }}18;color:{{ $color }}">
                                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/></svg>
                                </div>
                                <span class="cell-name">{{ $role->name }}</span>
                            </div>
                        </td>
                        <td><span class="cell-sub">{{ $role->note ?: 'Event participant role' }}</span></td>
                        <td><strong>{{ $count }}</strong></td>
                        <td><span class="perm-badge">{{ $permLabel }}</span></td>
                        <td>
                            <div class="tbl-actions">
                                <a href="#access-rules" class="icon-btn" title="Edit">
                                    <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
                                </a>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="card mt-3" id="access-rules">
    <div class="form-panel">
        <h2>Edit access rules</h2>
        <p class="cell-sub mb-3">Session limits and stamps required per role. Leave session limit blank for unlimited.</p>
        <form method="POST" action="{{ route('mexco.admin.roles.update') }}">
            @csrf @method('PUT')
            <div class="tbl-wrap mb-3">
                <table class="data-tbl">
                    <thead>
                        <tr>
                            <th>Role</th>
                            <th>Session limit</th>
                            <th>Stamps required</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($roles as $role)
                            @php $color = $roleColors[$role->name] ?? '#6366F1'; @endphp
                            <tr>
                                <td><span class="status-pill" style="background:{{ $color }}20;color:{{ $color }}">{{ $role->name }}</span></td>
                                <td><input type="number" min="0" name="roles[{{ $role->name }}][sessions]" class="form-input" style="max-width:120px" value="{{ $role->sessions_limit ?? '' }}" placeholder="∞"></td>
                                <td><input type="number" min="0" name="roles[{{ $role->name }}][stamps]" class="form-input" style="max-width:120px" value="{{ $role->stamps_required }}"></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <button type="submit" class="btn-purple">Save roles</button>
        </form>
    </div>
</div>
@endsection
