@extends('layouts.app')
@section('title', 'Edit Role: ' . $role->display_name)

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="page-title">
            <i class="bi bi-shield-lock me-2"></i>{{ $role->display_name }}
            <span class="badge bg-secondary fs-6 ms-2">{{ $role->name }}</span>
        </h1>
        <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Back
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success fade-in"><i class="bi bi-check-circle me-1"></i> {{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger fade-in">
            @foreach($errors->all() as $error) <div>{{ $error }}</div> @endforeach
        </div>
    @endif

    <form method="POST" action="{{ route('admin.roles.update', $role) }}">
        @csrf
        @method('PUT')

        <!-- Role Meta -->
        <div class="card mb-4">
            <div class="card-header"><h6 class="mb-0">Role Details</h6></div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Display Name</label>
                        <input type="text" name="display_name" class="form-control"
                               value="{{ old('display_name', $role->display_name) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Description</label>
                        <input type="text" name="description" class="form-control"
                               value="{{ old('description', $role->description) }}">
                    </div>
                </div>
            </div>
        </div>

        <!-- Permission Matrix -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="bi bi-grid me-2"></i>Permission Matrix</h6>
                <div>
                    <button type="button" class="btn btn-sm btn-outline-success" id="selectAll">
                        <i class="bi bi-check-all"></i> Select All
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" id="deselectAll">
                        <i class="bi bi-x-lg"></i> Deselect All
                    </button>
                </div>
            </div>
            <div class="card-body">
                @foreach($permissionsByModule as $module => $permissions)
                    <div class="mb-4">
                        <h6 class="text-uppercase text-muted border-bottom pb-2 mb-3">
                            <i class="bi bi-folder me-1"></i>
                            {{ ucwords(str_replace('_', ' ', $module)) }}
                            <small class="text-muted">({{ count($permissions) }} permissions)</small>
                        </h6>

                        @php
                            // Group permissions by entity
                            $byEntity = collect($permissions)->groupBy(function ($p) {
                                $parts = explode('.', $p['name']);
                                return $parts[0] ?? '';
                            });
                        @endphp

                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width:200px">Entity</th>
                                        <th class="text-center" style="width:80px">View</th>
                                        <th class="text-center" style="width:80px">Create</th>
                                        <th class="text-center" style="width:80px">Edit</th>
                                        <th class="text-center" style="width:80px">Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($byEntity as $entity => $perms)
                                        <tr>
                                            <td>
                                                <strong>{{ ucwords(str_replace('_', ' ', $entity)) }}</strong>
                                            </td>
                                            @foreach(['view', 'create', 'edit', 'delete'] as $action)
                                                @php
                                                    $perm = $perms->firstWhere('name', "{$entity}.{$action}");
                                                @endphp
                                                <td class="text-center">
                                                    @if($perm)
                                                        <div class="form-check d-flex justify-content-center">
                                                            <input type="checkbox" name="permissions[]"
                                                                   value="{{ $perm['id'] }}"
                                                                   class="form-check-input perm-check"
                                                                   id="perm_{{ $perm['id'] }}"
                                                                   {{ in_array($perm['id'], $rolePermissionIds) ? 'checked' : '' }}>
                                                        </div>
                                                    @else
                                                        <span class="text-muted">—</span>
                                                    @endif
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="d-flex gap-2 mb-4">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg me-1"></i> Save Permissions
            </button>
            <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const checks = document.querySelectorAll('.perm-check');
    document.getElementById('selectAll').addEventListener('click', () => checks.forEach(c => c.checked = true));
    document.getElementById('deselectAll').addEventListener('click', () => checks.forEach(c => c.checked = false));
});
</script>
@endpush