@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">Add Team Member</h1>
                    <p class="text-muted">{{ $company->name }} - Create new user account</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.store', $company) }}">
                @csrf
                
                <!-- 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') }}" 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') }}" 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">Creation Method <span class="text-danger">*</span></label>
                                <select class="form-select @error('creation_method') is-invalid @enderror" name="creation_method" id="creation_method" required>
                                    <option value="">Select Method</option>
                                    <option value="manual" {{ old('creation_method') == 'manual' ? 'selected' : '' }}>
                                        Set Password Now
                                    </option>
                                    <option value="invitation" {{ old('creation_method') == 'invitation' ? 'selected' : '' }}>
                                        Send Email Invitation
                                    </option>
                                </select>
                                @error('creation_method')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Choose how to create the user account</small>
                            </div>
                            <div class="col-md-6" id="password-field">
                                <label class="form-label">Password <span class="text-danger">*</span></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">Minimum 8 characters</small>
                            </div>
                        </div>
                        
                        <div id="invitation-info" class="alert alert-info" style="display: none;">
                            <h6><i class="bi bi-envelope"></i> Email Invitation</h6>
                            <p class="mb-0">An invitation email will be sent to the user's email address. They can set their own password when accepting the invitation.</p>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Role <span class="text-danger">*</span></label>
                                <select class="form-select @error('role') is-invalid @enderror" name="role" required>
                                    <option value="">Select Role</option>
                                    <option value="hr" {{ old('role') == 'hr' ? 'selected' : '' }}>
                                        Company Admin
                                    </option>
                                    <option value="manager" {{ old('role') == 'manager' ? 'selected' : '' }}>
                                        Manager
                                    </option>
                                    <option value="staff" {{ old('role') == 'staff' ? 'selected' : '' }}>
                                        Staff
                                    </option>
                                </select>
                                @error('role')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    <strong>Admin:</strong> Full access, automatic website access<br>
                                    <strong>Manager:</strong> Approval permissions, assigned websites<br>
                                    <strong>Staff:</strong> Basic access, assigned websites
                                </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">Admin 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)
                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" 
                                                           id="website_{{ $website->id }}" 
                                                           name="website_ids[]" 
                                                           value="{{ $website->id }}"
                                                           {{ in_array($website->id, old('website_ids', [])) ? '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">Read Only</option>
                                                    <option value="write">Read & Write</option>
                                                    <option value="admin">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-plus-circle"></i> Create User
                    </button>
                </div>
            </form>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- 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>Admin</strong>
                                <ul class="small mt-1 mb-0">
                                    <li>Full access to all company operations</li>
                                    <li>Manage employees and admin 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 admin 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');
    const creationMethodSelect = document.getElementById('creation_method');
    const passwordField = document.getElementById('password-field');
    const invitationInfo = document.getElementById('invitation-info');
    const passwordInput = document.querySelector('input[name="password"]');
    
    function toggleWebsiteAccess() {
        if (roleSelect && websiteAccessCard) {
            if (roleSelect.value === 'hr') {
                websiteAccessCard.style.display = 'none';
            } else {
                websiteAccessCard.style.display = 'block';
            }
        }
    }
    
    function toggleCreationMethod() {
        if (creationMethodSelect.value === 'invitation') {
            passwordField.style.display = 'none';
            invitationInfo.style.display = 'block';
            passwordInput.required = false;
        } else if (creationMethodSelect.value === 'manual') {
            passwordField.style.display = 'block';
            invitationInfo.style.display = 'none';
            passwordInput.required = true;
        } else {
            passwordField.style.display = 'none';
            invitationInfo.style.display = 'none';
            passwordInput.required = false;
        }
    }
    
    // Check initial states
    toggleWebsiteAccess();
    toggleCreationMethod();
    
    // Add event listeners
    if (roleSelect) {
        roleSelect.addEventListener('change', toggleWebsiteAccess);
    }
    if (creationMethodSelect) {
        creationMethodSelect.addEventListener('change', toggleCreationMethod);
    }
});
</script>
@endpush
@endsection