@extends('layouts.app')
@section('title', 'Roles & Permissions')
@section('breadcrumb')
    <a href="{{ route('admin.index') }}" style="color:var(--text-secondary);">Admin</a>
    <span class="topbar-breadcrumb-sep">/</span>
    <span style="font-weight:600;color:var(--text-primary);">Roles & Permissions</span>
@endsection

@section('content')
<div class="page-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>🔐 Roles & Permissions Dashboard</h1>
    <button type="button" class="btn btn-primary" onclick="document.getElementById('createRoleModal').style.display='flex'">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;margin-right:8px;"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
        New Role
    </button>
</div>

<style>
    .roles-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
    .role-list { display: flex; flex-direction: column; gap: 8px; }
    .role-item {
        padding: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
        border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s;
        display: flex; justify-content: space-between; align-items: center;
    }
    .role-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
    .role-item.active { background: rgba(99,102,241,0.1); border-color: var(--accent-primary); box-shadow: inset 2px 0 0 var(--accent-primary); }
    .role-name { font-weight: 600; color: var(--text-primary); }
    .role-meta { font-size: 0.8rem; color: var(--text-secondary); }
    .role-badge { background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
    
    .role-editor-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; padding: 24px; box-shadow: var(--shadow-sm); }
    .permission-group { margin-bottom: 30px; }
    .permission-group-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); display:flex; align-items:center; gap:8px;}
    .permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
    
    .permission-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(0,0,0,0.15); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; }
    .permission-toggle:hover { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.1); }
    .permission-toggle.checked { background: rgba(99,102,241,0.05); border-color: rgba(99,102,241,0.3); }
    .permission-label { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); text-transform: capitalize; }
    .permission-toggle.checked .permission-label { color: #fff; }

    /* Custom Checkbox */
    .custom-cb { width:18px; height:18px; appearance:none; outline:none; border:2px solid var(--border-color); border-radius:4px; background:transparent; cursor:pointer; position:relative; transition:all 0.2s; }
    .custom-cb:checked { background:var(--accent-primary); border-color:var(--accent-primary); }
    .custom-cb:checked::after { content:''; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid white; border-width:0 2px 2px 0; transform:rotate(45deg); display:block; }

    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: center; justify-content: center; }
    .modal-content { background: var(--bg-secondary); padding: 24px; border-radius: var(--radius-lg); width: 100%; max-width: 400px; border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); }
</style>

<div class="roles-layout" x-data="rolesManager()">
    <!-- Roles Sidebar -->
    <div class="role-list">
        @foreach($roles as $role)
            <div class="role-item" :class="{ 'active': activeRole == {{ $role->id }} }" @click="selectRole({{ $role->id }})">
                <div>
                    <div class="role-name">{{ $role->name }}</div>
                    <div class="role-meta">{{ $role->users_count }} Team members</div>
                </div>
                <div class="role-badge">{{ $role->permissions->count() }} Perms</div>
            </div>
        @endforeach
    </div>

    <!-- Active Role Editor -->
    @foreach($roles as $role)
    <div class="role-editor-card" x-show="activeRole == {{ $role->id }}" style="display:none;" x-transition.opacity>
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 24px;">
            <div>
                <h2 style="margin:0;font-size:1.4rem;color:#fff;">{{ $role->name }}</h2>
                <div style="color:var(--text-secondary);font-size:0.9rem;margin-top:4px;">Manage access levels and specific entity abilities for this role.</div>
            </div>
            <div style="display:flex;gap:10px;">
                @if(!in_array($role->name, ['Super Admin', 'Company Admin', 'Manager']))
                    <form method="POST" action="{{ route('admin.roles.delete', $role) }}" onsubmit="return confirm('Are you sure you want to permanently delete this role?');">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm" style="background:rgba(239, 68, 68, 0.1); color:#ef4444; border:1px solid rgba(239, 68, 68, 0.2);">Delete Role</button>
                    </form>
                @endif
            </div>
        </div>

        <form method="POST" action="{{ route('admin.roles.update', $role) }}">
            @csrf @method('PUT')
            
            <div style="margin-bottom:24px;">
                <label class="form-label">Role Name (Optional)</label>
                <input type="text" name="name" class="form-control" value="{{ $role->name }}" {{ $role->name === 'Super Admin' ? 'readonly' : '' }}>
            </div>

            @foreach($permissions as $group => $perms)
                <div class="permission-group">
                    <div class="permission-group-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;color:var(--accent-primary);"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                        {{ $group }} Module
                    </div>
                    <div class="permission-grid">
                        @foreach($perms as $permission)
                            @php 
                                $isChecked = $role->permissions->contains('id', $permission->id) || $role->name === 'Super Admin';
                            @endphp
                            <label class="permission-toggle {{ $isChecked ? 'checked' : '' }}" onclick="this.classList.toggle('checked', this.querySelector('input').checked)">
                                <span class="permission-label">{{ str_replace('_', ' ', $permission->name) }}</span>
                                <input type="checkbox" class="custom-cb" name="permissions[]" value="{{ $permission->id }}" 
                                    {{ $isChecked ? 'checked' : '' }}
                                    {{ $role->name === 'Super Admin' ? 'disabled' : '' }}>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endforeach

            @if($role->name !== 'Super Admin')
            <div style="margin-top: 30px; display:flex; justify-content:flex-end;">
                <button type="submit" class="btn btn-primary">Save Role Configuration</button>
            </div>
            @endif
        </form>
    </div>
    @endforeach

</div>

<!-- Create Role Modal -->
<div class="modal-overlay" id="createRoleModal">
    <div class="modal-content">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px;">
            <h3 style="margin:0;">Create New Role</h3>
            <button type="button" style="background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.2rem;" onclick="document.getElementById('createRoleModal').style.display='none'">&times;</button>
        </div>
        <form method="POST" action="{{ route('admin.roles.store') }}">
            @csrf
            <div class="form-group" style="margin-bottom:20px;">
                <label class="form-label">Role Name</label>
                <input type="text" name="name" class="form-control" placeholder="e.g. Content Editor" required>
            </div>
            <div style="display:flex; justify-content:flex-end; gap:10px;">
                <button type="button" class="btn" style="background:transparent; border:1px solid var(--border-color);" onclick="document.getElementById('createRoleModal').style.display='none'">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Role</button>
            </div>
        </form>
    </div>
</div>

<script>
    function rolesManager() {
        return {
            activeRole: {{ $roles->first()->id ?? 0 }},
            selectRole(id) {
                this.activeRole = id;
            }
        }
    }
</script>

@endsection