@extends('layouts.main')

@section('title', 'Add New 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-plus"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Add New Company</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-buildings"></i>
                                Create a new company user account
                            </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>

                <form method="POST" action="{{ route('companies.store') }}">
                    @csrf

                    <!-- Form Instructions -->
                    <div class="alert alert-info 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 company user with a 'company' role.
                    </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>

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

                        <div class="col-md-6">
                            <!-- Workspace Name -->
                            <div class="form-group mb-4 d-none">
                                <label class="mb-2" for="workspace_name">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
                                </div>
                                <small class="form-text text-muted mt-1">
                                    <i class="bx bx-info-circle me-1"></i>
                                    If provided, a default workspace will be created for this user
                                </small>
                            </div>

                            <!-- Secure Invitation Process Notice -->
                            <div class="form-group mb-4">
                                <div class="alert alert-info" role="alert">
                                    <h6 class="alert-heading">
                                        <i class="bx bx-shield-check me-2"></i>Secure Invitation Process
                                    </h6>
                                    <p class="mb-0">
                                        The user will receive a secure invitation email to verify their account and create their own password. 
                                        No password will be sent via email for enhanced security.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Company Creation Process Information -->
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-success border-0" style="background: #f8f9ff; border-left: 4px solid #48cfc8 !important;">
                                <div class="d-flex align-items-start">
                                    <i class="bx bx-check-circle text-success me-3 mt-1" style="font-size: 1.2rem;"></i>
                                    <div>
                                        <h6 class="alert-heading mb-2" style="color: #2c3e50;">Company Creation Process:</h6>
                                        <ul class="mb-0" style="color: #5a6c7d;">
                                            <li class="mb-1">The new user will be automatically assigned the <strong>"Company"</strong> role</li>
                                            <li class="mb-1">A secure invitation email will be sent to verify their email address</li>
                                            <li class="mb-1">The user will create their own secure password after email verification</li>
                                            <li class="mb-1">If a workspace name is provided, a default workspace will be created for this user</li>
                                            <li class="mb-1">The user must verify their email address to activate their account</li>
                                            <li class="mb-0">No password will be sent via email for enhanced security</li>
                                        </ul>
                                    </div>
                                </div>
                            </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: #48cfc8; border-color: #48cfc8; color: white;">
                            <i class="bx bx-plus"></i> Create Company
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Password visibility toggle
        const passwordToggles = document.querySelectorAll('.fld-icon-end i');
        
        passwordToggles.forEach(toggle => {
            toggle.addEventListener('click', function() {
                const input = this.previousElementSibling;
                
                if (input.type === 'password') {
                    input.type = 'text';
                    this.className = 'eye-close-icon';
                } else {
                    input.type = 'password';
                    this.className = 'eye-open-icon';
                }
            });
        });
        
        // 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.remove();
                        }
                    }
                }
            });
            
            emailInput.addEventListener('input', function() {
                if (this.classList.contains('is-invalid')) {
                    this.classList.remove('is-invalid');
                    const feedback = this.parentNode.querySelector('.invalid-feedback');
                    if (feedback) {
                        feedback.remove();
                    }
                }
            });
        }
    });
</script>
@endsection