@extends('layouts.main')

@section('content')
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center mb-4 gap-2">
    <h4 class="mb-0">Manage Permissions: {{ $user->name }}</h4>
    <a href="{{ route('users.index') }}" class="btn btn-secondary btn-sm">Back to Users</a>
</div>

<div class="card">
    <div class="card-header">
        <span class="badge bg-{{ $user->role === 'admin' ? 'primary' : 'info' }}">{{ ucfirst($user->role) }}</span>
        <span class="badge bg-{{ $user->is_active ? 'success' : 'secondary' }} ms-2">{{ $user->is_active ? 'Active' : 'Inactive' }}</span>
    </div>
    <div class="card-body">
        <div class="mb-3">
            <input type="text" id="searchPermissions" class="form-control" placeholder="Search permissions...">
        </div>
        <div class="mb-3 text-muted d-flex gap-3 align-items-center">
            <span><strong>Total:</strong> <span id="totalPermissions">{{ count($permissions) }}</span></span>
            <span><strong>Selected:</strong> <span id="selectedPermissions">{{ count(array_filter($user->permissions ?? [])) }}</span></span>
            <div class="form-check ms-3">
                <input type="checkbox" id="selectAll" class="form-check-input">
                <label for="selectAll" class="form-check-label">Select All</label>
            </div>
        </div>
        <form method="POST" action="{{ route('users.permissions.update', $user->id) }}">
            @csrf
            @method('PUT')

            <div class="row g-3" id="permissionsList">
                @foreach($permissions as $permission)
                    <div class="col-12 col-sm-6 col-md-4 permission-item" data-name="{{ strtolower($permission->name) }}" data-slug="{{ strtolower($permission->slug) }}">
                        <div class="form-check">
                            <input 
                                type="checkbox" 
                                name="permissions[]" 
                                value="{{ $permission->slug }}" 
                                id="perm_{{ $permission->id }}"
                                class="form-check-input"
                                {{ in_array($permission->slug, $user->permissions ?? []) ? 'checked' : '' }}
                            >
                            <label class="form-check-label" for="perm_{{ $permission->id }}">
                                <strong>{{ $permission->name }}</strong>
                                <small class="d-block text-muted">{{ $permission->description }}</small>
                            </label>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-4 d-flex flex-column flex-sm-row gap-2">
                <button type="submit" class="btn btn-primary">Save Permissions</button>
                <a href="{{ route('users.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('searchPermissions').addEventListener('input', function() {
    const search = this.value.toLowerCase();
    document.querySelectorAll('.permission-item').forEach(function(item) {
        const name = item.dataset.name;
        const slug = item.dataset.slug;
        if (name.includes(search) || slug.includes(search)) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
});

function updateSelectedCount() {
    const checked = document.querySelectorAll('input[name="permissions[]"]:checked').length;
    document.getElementById('selectedPermissions').textContent = checked;
    
    const totalCheckboxes = document.querySelectorAll('input[name="permissions[]"]').length;
    const selectAll = document.getElementById('selectAll');
    if (selectAll) {
        selectAll.checked = checked === totalCheckboxes;
    }
}

document.querySelectorAll('input[name="permissions[]"]').forEach(function(checkbox) {
    checkbox.addEventListener('change', updateSelectedCount);
});

document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('input[name="permissions[]"]');
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = document.getElementById('selectAll').checked;
    });
    updateSelectedCount();
});
</script>
@endsection
