@extends('layouts.main')

@section('title', 'Add User to Company')

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #48cfc8;">
                            <i class="bx bx-user-plus"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Add User to {{ $company->company ?? $company->name }}</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-user-plus"></i>
                                Create a new user account under this company
                            </h5>
                        </div>
                    </div>
                    <a href="{{ route('companies.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-arrow-back"></i> Back to Companies
                    </a>
                </div>

                <!-- Company Info -->
                <div class="alert alert-info mb-4" role="alert">
                    <i class="bx bx-info-circle me-2"></i>
                    Creating user for company: <strong>{{ $company->company ?? $company->name }}</strong> ({{ $company->email }})
                </div>

                <!-- User Limit Info -->
                @php
                    $stats = $company->getUserUsageStats();
                    $subscription = $company->companySubscription;
                @endphp
                <div class="alert {{ $stats['can_add_more'] ? 'alert-success' : 'alert-warning' }} mb-4" role="alert">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <i class="bx bx-user me-2"></i>
                            <strong>User Limit:</strong> {{ $stats['current_count'] }}/{{ $stats['max_allowed'] }} users
                            @if($subscription && $subscription->subscriptionPlan)
                                ({{ $subscription->subscriptionPlan->title }})
                            @endif
                        </div>
                        @if(!$stats['can_add_more'])
                            <span class="badge bg-danger">
                                <i class="bx bx-error-circle"></i> Limit Reached
                            </span>
                        @else
                            <span class="badge bg-success">
                                {{ $stats['remaining_slots'] }} slots available
                            </span>
                        @endif
                    </div>
                    @if(!$stats['can_add_more'])
                        <small class="text-muted mt-2 d-block">
                            <i class="bx bx-info-circle"></i> You've reached your plan's user limit. Please upgrade your subscription to add more users.
                        </small>
                    @endif
                </div>

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bx bx-error-circle me-2"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="bx bx-check-circle me-2"></i>
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <form method="POST" action="{{ route('companies.users.store', $company->id) }}">
                    @csrf

                    <!-- Form Instructions -->
                    <div class="alert alert-warning mb-4" role="alert">
                        <i class="bx bx-info-circle me-2"></i>
                        Fields marked with <span class="text-danger">*</span> are required. This will create a new user with 'company-user' role linked to the selected company.
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <!-- Full Name -->
                            <div class="form-group mb-4">
                                <label class="mb-2" for="name">Full Name <span class="text-danger">*</span></label>
                                <div>
                                    <input type="text" 
                                           id="name" 
                                           name="name" 
                                           class="form-control @error('name') is-invalid @enderror" 
                                           placeholder="Enter Full Name" 
                                           value="{{ old('name') }}" 
                                           required 
                                           autofocus 
                                           autocomplete="name" />
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Email -->
                            <div class="form-group mb-4">
                                <label class="mb-2" for="email">Email <span class="text-danger">*</span></label>
                                <div>
                                    <input type="email" 
                                           id="email" 
                                           name="email" 
                                           class="form-control @error('email') is-invalid @enderror" 
                                           placeholder="Enter email address" 
                                           value="{{ old('email') }}" 
                                           required 
                                           autocomplete="username" />
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Workspace Name - Hidden -->
                            <div class="form-group mb-4 d-none">
                                <label class="mb-2" for="workspace_name">Default Workspace Name <span class="text-muted small">(Optional)</span></label>
                                <div>
                                    <input type="text" 
                                           id="workspace_name" 
                                           name="workspace_name" 
                                           class="form-control @error('workspace_name') is-invalid @enderror" 
                                           placeholder="Enter workspace name" 
                                           value="{{ old('workspace_name') }}" />
                                    @error('workspace_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">If provided, a default workspace will be created for this user</small>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <!-- Company Info Display -->
                            <div class="form-group mb-4">
                                <div class="alert alert-light border" role="alert">
                                    <h6 class="alert-heading">
                                        <i class="bx bx-buildings me-2"></i>Company Information
                                    </h6>
                                    <div class="mb-2">
                                        <strong>Company:</strong> {{ $company->company ?? $company->name }}
                                    </div>
                                    <div class="mb-2">
                                        <strong>Owner:</strong> {{ $company->name }}
                                    </div>
                                    <div class="mb-0">
                                        <strong>Contact:</strong> {{ $company->email }}
                                    </div>
                                </div>
                            </div>

                            <!-- Auto-Generated Password Notice -->
                            <div class="form-group mb-4">
                                <div class="alert alert-success" role="alert">
                                    <h6 class="alert-heading">
                                        <i class="bx bx-key me-2"></i>Password Auto-Generation
                                    </h6>
                                    <p class="mb-0">A secure 8-character password will be automatically generated and sent to the user's email address along with the verification link.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Information -->
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-warning">
                                <strong>Note:</strong> 
                                <ul class="mb-0 mt-2">
                                    <li>The new user will be automatically assigned the "Company User" role</li>
                                    <li>The user will be linked to company: <strong>{{ $company->company ?? $company->name }}</strong></li>
                                    <li>A secure 8-character password will be automatically generated</li>
                                    <li>The verification email will include the login credentials</li>
                                    <li>The user must verify their email address to activate their account</li>
                                    <li>The user can change their password after first login</li>
                                    <li>Company users can only access data related to their parent company</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="d-flex gap-2 justify-content-end mt-4">
                        <a href="{{ route('companies.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-x"></i> Cancel
                        </a>
                        <button type="submit" 
                                class="btn" 
                                style="background: {{ $stats['can_add_more'] ? '#17a2b8' : '#6c757d' }}; border-color: {{ $stats['can_add_more'] ? '#17a2b8' : '#6c757d' }}; color: white;"
                                @if(!$stats['can_add_more']) disabled @endif>
                            <i class="bx bx-user-plus"></i> 
                            @if(!$stats['can_add_more'])
                                User Limit Reached
                            @else
                                Create Company User
                            @endif
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Email validation
        const emailInput = document.getElementById('email');
        
        function validateEmail(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            
            if (!emailRegex.test(email)) {
                return { valid: false, message: 'Please enter a valid email address format.' };
            }
            
            const domain = email.split('@')[1];
            const invalidDomains = ['test.com', 'example.com', 'temp.com', 'fake.com'];
            
            if (invalidDomains.includes(domain.toLowerCase())) {
                return { valid: false, message: 'Please use a real email address.' };
            }
            
            return { valid: true, message: '' };
        }
        
        if (emailInput) {
            emailInput.addEventListener('blur', function() {
                const email = this.value.trim();
                if (email) {
                    const validation = validateEmail(email);
                    
                    if (!validation.valid) {
                        this.classList.add('is-invalid');
                        let feedback = this.parentNode.querySelector('.invalid-feedback');
                        if (!feedback) {
                            feedback = document.createElement('div');
                            feedback.className = 'invalid-feedback';
                            this.parentNode.appendChild(feedback);
                        }
                        feedback.textContent = validation.message;
                    } else {
                        this.classList.remove('is-invalid');
                        const feedback = this.parentNode.querySelector('.invalid-feedback');
                        if (feedback && !feedback.textContent.includes('has already been taken')) {
                            feedback.remove();
                        }
                    }
                }
            });
            
            emailInput.addEventListener('input', function() {
                if (this.classList.contains('is-invalid')) {
                    const feedback = this.parentNode.querySelector('.invalid-feedback');
                    if (feedback && !feedback.textContent.includes('has already been taken')) {
                        this.classList.remove('is-invalid');
                        feedback.remove();
                    }
                }
            });
        }
    });
</script>
@endsection