@extends('layouts.main')

@section('title', 'Edit Company: ' . $company->name)

@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;">{{ strtoupper(substr($company->name, 0, 1)) }}</div>
                        <div class="block-heading">
                            <h3>Edit Company: {{ $company->name }}</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-edit"></i>
                                Update company information
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('companies.show', $company->id) }}" class="btn" 
                           style="border: 1px solid #48cfc8; color: #48cfc8;"
                           onmouseover="this.style.background='#48cfc8'; this.style.color='white';"
                           onmouseout="this.style.background='transparent'; this.style.color='#48cfc8';">
                            <i class="bx bx-show"></i> View
                        </a>
                        <a href="{{ route('companies.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-arrow-back"></i> Back
                        </a>
                    </div>
                </div>

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

                    <!-- 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. Update company 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', $company->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', $company->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-muted small">(Optional)</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', $company->company) }}" />
                                    @error('company')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Account Information -->
                            <div class="card border-info">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">Account Information</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <strong>Created:</strong><br>
                                            <span class="text-muted">{{ $company->created_at->format('M d, Y H:i A') }}</span>
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Email Status:</strong><br>
                                            @if($company->email_verified_at)
                                                <span class="badge bg-success">Verified</span>
                                                <small class="d-block text-muted">{{ $company->email_verified_at->format('M d, Y') }}</small>
                                            @else
                                                <span class="badge bg-warning">Pending Verification</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <!-- Password Management Notice -->
                            <div class="form-group mb-4">
                                <div class="alert alert-info" role="alert">
                                    <h6 class="alert-heading">
                                        <i class="bx bx-key me-2"></i>Password Management
                                    </h6>
                                    <p class="mb-0">Password updates are managed separately. Users can change their passwords through their profile settings or password reset functionality.</p>
                                </div>
                            </div>

                            <!-- 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', $company->workspaces->first()?->name) }}" />
                                    @error('workspace_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Workspace Information -->
                            <div class="card border-secondary">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">Workspace Information</h6>
                                </div>
                                <div class="card-body">
                                    @if($company->workspaces->count() > 0)
                                        <div class="mb-2">
                                            <strong>Total Workspaces:</strong> {{ $company->workspaces->count() }}
                                        </div>
                                        @foreach($company->workspaces as $workspace)
                                            <div class="border rounded p-2 mb-2">
                                                <strong>{{ $workspace->name }}</strong>
                                                @if($workspace->description)
                                                    <br><small class="text-muted">{{ $workspace->description }}</small>
                                                @endif
                                                <br><small class="text-info">{{ $workspace->workspaceItems->count() }} item(s)</small>
                                            </div>
                                        @endforeach
                                    @else
                                        <p class="text-muted mb-0">No workspaces created yet.</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Information -->
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-warning">
                                <strong>Update Notes:</strong> 
                                <ul class="mb-0 mt-2">
                                    <li>If you change the email address, the user will need to verify the new email</li>
                                    <li>Password updates will require the user to log in again with the new password</li>
                                    <li>Workspace name changes will update the first workspace (if exists) or create a new one</li>
                                    <li>This user will maintain their "Company" role</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>
                        <a href="{{ route('companies.show', $company->id) }}" class="btn" 
                           style="border: 1px solid #48cfc8; color: #48cfc8;"
                           onmouseover="this.style.background='#48cfc8'; this.style.color='white';"
                           onmouseout="this.style.background='transparent'; this.style.color='#48cfc8';">
                            <i class="bx bx-show"></i> View Details
                        </a>
                        <button type="submit" class="btn" style="background: #48cfc8; border-color: #48cfc8; color: white;">
                            <i class="bx bx-save"></i> Update 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.textContent.includes('address is already registered')) {
                            feedback.remove();
                        }
                    }
                }
            });
            
            emailInput.addEventListener('input', function() {
                if (this.classList.contains('is-invalid')) {
                    const feedback = this.parentNode.querySelector('.invalid-feedback');
                    if (feedback && !feedback.textContent.includes('address is already registered')) {
                        this.classList.remove('is-invalid');
                        feedback.remove();
                    }
                }
            });
        }
        
        // Confirm before updating if password is changed
        const form = document.querySelector('form');
        const passwordInput = document.getElementById('password');
        
        form.addEventListener('submit', function(e) {
            if (passwordInput.value.trim() !== '') {
                const confirm = window.confirm('You are changing the password. The user will need to log in again with the new password. Continue?');
                if (!confirm) {
                    e.preventDefault();
                }
            }
        });
    });
</script>
@endsection