@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">Edit Team Member</h1>
                    <p class="text-muted">{{ $company->name }} - Update user: {{ $user->name }}</p>
                </div>
                <div>
                    <a href="{{ route('companies.users.index', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Team Members
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ 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" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-lg-8">
            <!-- User Form -->
            <form method="POST" action="{{ route('companies.users.update', [$company, $user]) }}">
                @csrf
                @method('PUT')

                <!-- Basic Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Basic Information</h5>
                    </div>
                    <div class="card-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"
                                       name="name" value="{{ old('name', $user->name) }}" required autofocus>
                                @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"
                                       name="email" value="{{ old('email', $user->email) }}" required>
                                @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">New Password</label>
                                <input type="password" class="form-control @error('password') is-invalid @enderror"
                                       name="password">
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Leave blank to keep current password. Minimum 8 characters if changing.</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Role <span class="text-danger">*</span></label>
                                @php
                                    $currentUserRole = auth()->user()->role;
                                    $isSuperAdmin = auth()->user()->isSuperAdmin();
                                    $canChangeRole = false;
                                    $availableRoles = [];
                                    
                                    // Determine what roles current user can assign
                                    if ($isSuperAdmin) {
                                        $canChangeRole = true;
                                        $availableRoles = ['hr', 'manager', 'staff'];
                                    } elseif ($currentUserRole === 'hr') {
                                        // HR can only change roles for managers and staff
                                        if (in_array($user->role, ['manager', 'staff'])) {
                                            $canChangeRole = true;
                                            $availableRoles = ['manager', 'staff'];
                                        }
                                    } elseif ($currentUserRole === 'manager') {
                                        // Manager can only change role for staff
                                        if ($user->role === 'staff') {
                                            $canChangeRole = true;
                                            $availableRoles = ['staff'];
                                        }
                                    }
                                    
                                    // Users cannot change their own role unless they are super admin
                                    if ($user->id === auth()->id() && !$isSuperAdmin) {
                                        $canChangeRole = false;
                                    }
                                @endphp
                                
                                @if($canChangeRole)
                                    <select class="form-select @error('role') is-invalid @enderror" name="role" required>
                                        <option value="">Select Role</option>
                                        @if(in_array('hr', $availableRoles))
                                        <option value="hr" {{ old('role', $user->role) == 'hr' ? 'selected' : '' }}>
                                            Company Admin
                                        </option>
                                        @endif
                                        @if(in_array('manager', $availableRoles))
                                        <option value="manager" {{ old('role', $user->role) == 'manager' ? 'selected' : '' }}>
                                            Manager
                                        </option>
                                        @endif
                                        @if(in_array('staff', $availableRoles))
                                        <option value="staff" {{ old('role', $user->role) == 'staff' ? 'selected' : '' }}>
                                            Staff
                                        </option>
                                        @endif
                                    </select>
                                @else
                                    <input type="hidden" name="role" value="{{ $user->role }}">
                                    <select class="form-select" disabled>
                                        <option selected>
                                            @if($user->role === 'hr')
                                                Company Admin
                                            @elseif($user->role === 'manager')
                                                Manager
                                            @else
                                                Staff
                                            @endif
                                            @if($user->id === auth()->id())
                                                (Cannot change own role)
                                            @else
                                                (Insufficient permissions)
                                            @endif
                                        </option>
                                    </select>
                                    <small class="text-muted">You cannot change this user's role</small>
                                @endif
                                @error('role')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    <strong>Company Admin:</strong> Full access to all company operations<br>
                                    <strong>Manager:</strong> Approval permissions for leaves, expenses<br>
                                    <strong>Staff:</strong> Basic employee access
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                @if($websites->count() > 0)
                <!-- Website Access -->
                <div class="card mb-4" id="website-access-card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Website Access</h5>
                        <small class="text-muted">HR users have automatic access to all websites. Select websites for Manager and Staff roles.</small>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th width="50">Access</th>
                                        <th>Website</th>
                                        <th width="150">Permission Level</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($websites as $website)
                                        @php
                                            $isAssigned = in_array($website->id, $assignedWebsites);
                                            $currentPermission = $user->assignedWebsites()->where('website_id', $website->id)->value('permission') ?? 'read';
                                        @endphp
                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input"
                                                           id="website_{{ $website->id }}"
                                                           name="website_ids[]"
                                                           value="{{ $website->id }}"
                                                           {{ $isAssigned ? 'checked' : '' }}>
                                                </div>
                                            </td>
                                            <td>
                                                <label for="website_{{ $website->id }}" class="form-label mb-0">
                                                    <strong>{{ $website->name }}</strong>
                                                    @if($website->domain)
                                                        <br><small class="text-muted">{{ $website->domain }}</small>
                                                    @endif
                                                </label>
                                            </td>
                                            <td>
                                                <select name="permissions[{{ $website->id }}]" class="form-select form-select-sm">
                                                    <option value="read" {{ $currentPermission == 'read' ? 'selected' : '' }}>Read Only</option>
                                                    <option value="write" {{ $currentPermission == 'write' ? 'selected' : '' }}>Read & Write</option>
                                                    <option value="admin" {{ $currentPermission == 'admin' ? 'selected' : '' }}>Full Admin</option>
                                                </select>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @error('website_ids')
                            <div class="text-danger small mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                @endif

                <!-- Submit Buttons -->
                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ route('companies.users.index', $company) }}" class="btn btn-secondary">
                        <i class="bi bi-x-circle"></i> Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save"></i> Update User
                    </button>
                </div>
            </form>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- User Info -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">User Information</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-6"><strong>Created:</strong></div>
                        <div class="col-6">{{ $user->created_at->format('M d, Y') }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-6"><strong>Last Updated:</strong></div>
                        <div class="col-6">{{ $user->updated_at->format('M d, Y') }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-6"><strong>Current Role:</strong></div>
                        <div class="col-6">
                            @if($user->role === 'hr')
                                <span class="badge bg-primary">Company Admin</span>
                            @elseif($user->role === 'manager')
                                <span class="badge bg-warning">Manager</span>
                            @else
                                <span class="badge bg-secondary">Staff</span>
                            @endif
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6"><strong>Website Access:</strong></div>
                        <div class="col-6">
                            <span class="badge bg-info">{{ $user->assignedWebsites->count() }} websites</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Role Guide -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">Role Permissions</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex align-items-start">
                            <i class="bi bi-shield-fill-check text-primary me-2 mt-1"></i>
                            <div>
                                <strong>Company Admin</strong>
                                <ul class="small mt-1 mb-0">
                                    <li>Full access to all company operations</li>
                                    <li>Manage employees and HR functions</li>
                                    <li>Access all websites</li>
                                    <li>Process payroll and manage benefits</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex align-items-start">
                            <i class="bi bi-person-badge text-warning me-2 mt-1"></i>
                            <div>
                                <strong>Manager</strong>
                                <ul class="small mt-1 mb-0">
                                    <li>Approve leave requests and expenses</li>
                                    <li>Manage team performance reviews</li>
                                    <li>Access assigned websites</li>
                                    <li>View team reports and analytics</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="d-flex align-items-start">
                            <i class="bi bi-person-fill text-secondary me-2 mt-1"></i>
                            <div>
                                <strong>Staff</strong>
                                <ul class="small mt-1 mb-0">
                                    <li>Basic employee access</li>
                                    <li>Submit leave requests and expenses</li>
                                    <li>Clock in/out for attendance</li>
                                    <li>View personal HR information</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Permission Guide -->
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Permission Levels</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <span class="badge bg-success me-2">Admin</span>
                        <small>Full control including settings and user management</small>
                    </div>
                    <div class="mb-3">
                        <span class="badge bg-warning me-2">Write</span>
                        <small>Can edit content, pages, and website data</small>
                    </div>
                    <div>
                        <span class="badge bg-info me-2">Read</span>
                        <small>View-only access to website content</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const roleSelect = document.querySelector('select[name="role"]');
    const websiteAccessCard = document.getElementById('website-access-card');

    function toggleWebsiteAccess() {
        if (roleSelect.value === 'hr') {
            websiteAccessCard.style.display = 'none';
        } else {
            websiteAccessCard.style.display = 'block';
        }
    }

    // Check initial state
    toggleWebsiteAccess();

    // Add event listener
    roleSelect.addEventListener('change', toggleWebsiteAccess);
});
</script>
@endpush
@endsection