<div>
    <x-layouts.app title="{{ __('Users Management') }}">
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Users Management') }}</h1>
                <p class="text-muted mb-0">{{ __('Manage system users and permissions') }}</p>
            </div>
            @can('create-users')
            <button class="btn btn-primary" wire:click="openModal">
                <i class="fas fa-user-plus me-2"></i>{{ __('Add User') }}
            </button>
            @endcan
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
        @endif

        <div class="card mb-3">
            <div class="card-body">
                <input type="text" class="form-control" wire:model.live.debounce.300ms="search" 
                       placeholder="{{ __('Search users...') }}">
            </div>
        </div>

        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('User') }}</th>
                                <th>{{ __('Email') }}</th>
                                <th>{{ __('Roles') }}</th>
                                <th>{{ __('Branch') }}</th>
                                <th class="text-center">{{ __('Status') }}</th>
                                <th class="text-end">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $user)
                                <tr wire:key="user-{{ $user->id }}">
                                    <td>
                                        <strong>{{ $user->name }}</strong>
                                        @if($user->phone)
                                            <small class="text-muted d-block">{{ $user->phone }}</small>
                                        @endif
                                    </td>
                                    <td>{{ $user->email }}</td>
                                    <td>
                                        @forelse($user->roles as $role)
                                            <span class="badge bg-{{ $role->name === 'super-admin' ? 'danger' : ($role->name === 'admin' ? 'warning' : 'secondary') }} me-1">
                                                {{ __(ucfirst($role->name)) }}
                                            </span>
                                        @empty
                                            <span class="text-muted">-</span>
                                        @endforelse
                                    </td>
                                    <td>{{ $user->branch?->name ?? '-' }}</td>
                                    <td class="text-center">
                                        @can('edit-users')
                                        <button class="btn btn-sm {{ $user->is_active ? 'btn-success' : 'btn-secondary' }}"
                                                wire:click="toggleActive({{ $user->id }})"
                                                @if($user->id === auth()->id()) disabled @endif>
                                            {{ $user->is_active ? __('Active') : __('Inactive') }}
                                        </button>
                                        @else
                                        <span class="badge bg-{{ $user->is_active ? 'success' : 'secondary' }}">
                                            {{ $user->is_active ? __('Active') : __('Inactive') }}
                                        </span>
                                        @endcan
                                    </td>
                                    <td class="text-end">
                                        @can('edit-users')
                                        <button class="btn btn-sm btn-outline-primary" wire:click="edit({{ $user->id }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        @endcan
                                        
                                        @if(auth()->user()->hasRole('super-admin'))
                                        <button class="btn btn-sm btn-outline-info" wire:click="openPermissionModal({{ $user->id }})" title="{{ __('Manage Permissions') }}">
                                            <i class="fas fa-key"></i>
                                        </button>
                                        @endif
                                        
                                        @can('delete-users')
                                        @if($user->id !== auth()->id())
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    wire:click="delete({{ $user->id }})"
                                                    wire:confirm="{{ __('Delete this user?') }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        @endif
                                        @endcan
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="text-center py-4 text-muted">{{ __('No users found.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($users->hasPages())
                <div class="card-footer">{{ $users->links() }}</div>
            @endif
        </div>

        <!-- User Edit Modal -->
        @if($showModal)
            <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ $isEditing ? __('Edit User') : __('Add User') }}</h5>
                            <button type="button" class="btn-close" wire:click="$set('showModal', false)"></button>
                        </div>
                        <form wire:submit="save">
                            <div class="modal-body">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Name') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror" wire:model="name">
                                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Email') }} <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror" wire:model="email">
                                        @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Phone') }}</label>
                                        <input type="text" class="form-control" wire:model="phone">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Branch') }}</label>
                                        <select class="form-select" wire:model="branch_id">
                                            <option value="">{{ __('All Branches') }}</option>
                                            @foreach($branches as $branch)
                                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label">{{ __('Roles') }} <span class="text-danger">*</span></label>
                                    <div class="row">
                                        @foreach($roles as $role)
                                            <div class="col-md-6 mb-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" 
                                                           value="{{ $role->name }}" 
                                                           wire:model="selectedRoles"
                                                           id="role-{{ $role->id }}">
                                                    <label class="form-check-label" for="role-{{ $role->id }}">
                                                        {{ __(ucfirst($role->name)) }}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    @error('selectedRoles') <div class="text-danger small">{{ $message }}</div> @enderror
                                </div>
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Password') }} @if(!$isEditing)<span class="text-danger">*</span>@endif</label>
                                        <input type="password" class="form-control @error('password') is-invalid @enderror" wire:model="password">
                                        @if($isEditing)<small class="text-muted">{{ __('Leave blank to keep current') }}</small>@endif
                                        @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">{{ __('Confirm Password') }}</label>
                                        <input type="password" class="form-control" wire:model="password_confirmation">
                                    </div>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" wire:model="is_active" id="userActive">
                                    <label class="form-check-label" for="userActive">{{ __('Active') }}</label>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" wire:click="$set('showModal', false)">{{ __('Cancel') }}</button>
                                <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif

        <!-- Permission Management Modal -->
        @if($showPermissionModal)
            <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
                <div class="modal-dialog modal-lg modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ __('Manage Direct Permissions') }}</h5>
                            <button type="button" class="btn-close" wire:click="$set('showPermissionModal', false)"></button>
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                {{ __('Direct permissions override role permissions. Use this to grant specific permissions to individual users.') }}
                            </div>
                            
                            @foreach($permissions as $category => $perms)
                                <div class="card mb-2">
                                    <div class="card-header bg-light">
                                        <strong>{{ $category }}</strong>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            @foreach($perms as $permission)
                                                <div class="col-md-6 mb-2">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" 
                                                               value="{{ $permission->name }}" 
                                                               wire:model="directPermissions"
                                                               id="perm-{{ $permission->id }}">
                                                        <label class="form-check-label" for="perm-{{ $permission->id }}">
                                                            {{ ucwords(str_replace('-', ' ', $permission->name)) }}
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" wire:click="$set('showPermissionModal', false)">
                                {{ __('Cancel') }}
                            </button>
                            <button type="button" class="btn btn-primary" wire:click="updateUserPermissions">
                                <i class="fas fa-save me-2"></i>{{ __('Save Permissions') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </x-layouts.app>
</div>
