@extends('layouts.main')

@section('title', 'Edit Company User')

@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: #FFF3CD;">
                            <i class="bx bx-edit"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Edit User: {{ $user->name }}</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-user-pin"></i>
                                Update user information for {{ $company->company ?? $company->name }}
                            </h5>
                        </div>
                    </div>
                    <a href="{{ route('companies.users.index', $company->id) }}" class="btn btn-outline-secondary">
                        <i class="bx bx-arrow-back"></i> Back to Users
                    </a>
                </div>

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

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

                    <!-- 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. Update the user's basic information below.
                    </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', $user->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', $user->email) }}" 
                                           required 
                                           autocomplete="username" />
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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>

                            <!-- User Status Info -->
                            <div class="form-group mb-4">
                                <div class="alert alert-secondary" role="alert">
                                    <h6 class="alert-heading">
                                        <i class="bx bx-info-circle me-2"></i>User Status
                                    </h6>
                                    <div class="mb-2">
                                        <strong>Role:</strong> 
                                        @foreach($user->roles as $role)
                                            <span class="badge bg-info">{{ $role->title }}</span>
                                        @endforeach
                                    </div>
                                    <div class="mb-2">
                                        <strong>Email Status:</strong> 
                                        @if($user->email_verified_at)
                                            <span class="badge bg-success">Verified</span>
                                        @else
                                            <span class="badge bg-warning">Pending Verification</span>
                                        @endif
                                    </div>
                                    <div class="mb-2">
                                        <strong>Workspaces:</strong> {{ $user->workspaces->count() }} workspace(s)
                                    </div>
                                    <div class="mb-0">
                                        <strong>Created:</strong> {{ $user->created_at->format('M d, Y') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Information -->
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-info">
                                <strong>Note:</strong> 
                                <ul class="mb-0 mt-2">
                                    <li>Only the user's name and email can be updated</li>
                                    <li>The user will remain linked to: <strong>{{ $company->company ?? $company->name }}</strong></li>
                                    <li>Role and company assignments cannot be changed</li>
                                    <li>If you change the email, the user may need to verify the new email address</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="d-flex gap-2 justify-content-end mt-4">
                        <a href="{{ route('companies.users.index', $company->id) }}" class="btn btn-outline-secondary">
                            <i class="bx bx-x"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-warning text-white">
                            <i class="bx bx-save"></i> Update User
                        </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