@extends('layouts.admin')

@section('title', 'Edit Company')
@section('header', 'Edit Company')
@section('subheader', $company->name)

@section('content')
<form action="{{ route('admin.companies.update', $company) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Info -->
        <div class="lg:col-span-2 space-y-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="font-semibold text-secondary-900">Company Information</h3>
                </div>
                <div class="card-body space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="md:col-span-2">
                            <label class="form-label">Company Name <span class="text-red-500">*</span></label>
                            <input type="text" name="name" value="{{ old('name', $company->name) }}" class="form-input" required>
                            @error('name')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">Slug (URL identifier)</label>
                            <input type="text" name="slug" value="{{ old('slug', $company->slug) }}" class="form-input">
                            <p class="text-xs text-gray-500 mt-1">Login URL: /login/{{ $company->slug }}</p>
                            @error('slug')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">Email</label>
                            <input type="email" name="email" value="{{ old('email', $company->email) }}" class="form-input">
                            @error('email')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" value="{{ old('phone', $company->phone) }}" class="form-input">
                            @error('phone')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div class="md:col-span-2">
                            <label class="form-label">Address</label>
                            <textarea name="address" rows="2" class="form-input">{{ old('address', $company->address) }}</textarea>
                            @error('address')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3 class="font-semibold text-secondary-900">Branding</h3>
                </div>
                <div class="card-body space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="form-label">Logo</label>
                            @if($company->logo)
                                <div class="mb-2 p-2 bg-gray-50 rounded inline-block">
                                    <img src="{{ asset('storage/' . $company->logo) }}" alt="Current logo" class="h-10">
                                </div>
                            @endif
                            <input type="file" name="logo" accept="image/png,image/jpeg,image/svg+xml" class="form-input">
                            <p class="text-xs text-gray-500 mt-1">Leave empty to keep current logo</p>
                            @error('logo')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">Favicon</label>
                            @if($company->favicon)
                                <div class="mb-2 p-2 bg-gray-50 rounded inline-block">
                                    <img src="{{ asset('storage/' . $company->favicon) }}" alt="Current favicon" class="h-8">
                                </div>
                            @endif
                            <input type="file" name="favicon" accept="image/png,image/x-icon" class="form-input">
                            <p class="text-xs text-gray-500 mt-1">Leave empty to keep current favicon</p>
                            @error('favicon')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">Primary Color</label>
                            <div class="flex items-center space-x-2">
                                <input type="color" name="primary_color" value="{{ old('primary_color', $company->primary_color ?? '#0066b2') }}" class="w-12 h-10 rounded border cursor-pointer">
                                <input type="text" value="{{ old('primary_color', $company->primary_color ?? '#0066b2') }}" class="form-input flex-1" readonly id="primaryColorText">
                            </div>
                            @error('primary_color')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">Secondary Color</label>
                            <div class="flex items-center space-x-2">
                                <input type="color" name="secondary_color" value="{{ old('secondary_color', $company->secondary_color ?? '#2c3e50') }}" class="w-12 h-10 rounded border cursor-pointer">
                                <input type="text" value="{{ old('secondary_color', $company->secondary_color ?? '#2c3e50') }}" class="form-input flex-1" readonly id="secondaryColorText">
                            </div>
                            @error('secondary_color')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- SMTP Settings -->
            <div class="card">
                <div class="card-header">
                    <h3 class="font-semibold text-secondary-900">
                        <i class="fas fa-mail-bulk mr-2 text-blue-500"></i>Email Settings (SMTP)
                    </h3>
                </div>
                <div class="card-body space-y-4">
                    <div class="p-4 bg-blue-50 rounded-lg mb-4">
                        <p class="text-sm text-blue-700">
                            <i class="fas fa-info-circle mr-2"></i>
                            Configure company-specific SMTP settings for sending survey invitations and reminders. 
                            Leave blank to use the default system email settings.
                        </p>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="form-label">SMTP Host</label>
                            <input type="text" name="smtp_host" value="{{ old('smtp_host', $company->smtp_host) }}" 
                                   class="form-input" placeholder="smtp.gmail.com or smtp.office365.com">
                            @error('smtp_host')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">SMTP Port</label>
                            <input type="number" name="smtp_port" value="{{ old('smtp_port', $company->smtp_port ?? 587) }}" 
                                   class="form-input" placeholder="587">
                            <p class="text-xs text-gray-500 mt-1">Common ports: 587 (TLS), 465 (SSL), 25 (unencrypted)</p>
                            @error('smtp_port')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">SMTP Username</label>
                            <input type="text" name="smtp_username" value="{{ old('smtp_username', $company->smtp_username) }}" 
                                   class="form-input" placeholder="your-email@company.com">
                            @error('smtp_username')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">SMTP Password</label>
                            <input type="password" name="smtp_password" value="{{ old('smtp_password', $company->smtp_password) }}" 
                                   class="form-input" placeholder="••••••••">
                            <p class="text-xs text-gray-500 mt-1">For Gmail, use an App Password</p>
                            @error('smtp_password')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">Encryption</label>
                            <select name="smtp_encryption" class="form-select">
                                <option value="tls" {{ old('smtp_encryption', $company->smtp_encryption) == 'tls' ? 'selected' : '' }}>TLS (Recommended)</option>
                                <option value="ssl" {{ old('smtp_encryption', $company->smtp_encryption) == 'ssl' ? 'selected' : '' }}>SSL</option>
                                <option value="" {{ old('smtp_encryption', $company->smtp_encryption) == '' ? 'selected' : '' }}>None</option>
                            </select>
                            @error('smtp_encryption')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">From Email</label>
                            <input type="email" name="smtp_from_email" value="{{ old('smtp_from_email', $company->smtp_from_email) }}" 
                                   class="form-input" placeholder="surveys@company.com">
                            <p class="text-xs text-gray-500 mt-1">Email address shown as sender</p>
                            @error('smtp_from_email')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div class="md:col-span-2">
                            <label class="form-label">From Name</label>
                            <input type="text" name="smtp_from_name" value="{{ old('smtp_from_name', $company->smtp_from_name) }}" 
                                   class="form-input" placeholder="{{ $company->name }} HR Team">
                            <p class="text-xs text-gray-500 mt-1">Name shown as sender (e.g., "Company Name HR Team")</p>
                            @error('smtp_from_name')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                    </div>
                    
                    @if($company->smtp_host)
                    <div class="pt-4 border-t flex items-center justify-between">
                        <div class="flex items-center">
                            @if($company->hasSmtpConfigured())
                                <span class="flex items-center text-green-600 text-sm">
                                    <i class="fas fa-check-circle mr-2"></i>SMTP Configured
                                </span>
                            @else
                                <span class="flex items-center text-yellow-600 text-sm">
                                    <i class="fas fa-exclamation-circle mr-2"></i>Incomplete Configuration
                                </span>
                            @endif
                        </div>
                        <button type="button" onclick="testSmtpConnection()" class="btn-secondary btn-sm">
                            <i class="fas fa-plug mr-2"></i>Test Connection
                        </button>
                    </div>
                    <div id="smtp-test-result" class="hidden mt-3 p-3 rounded-lg"></div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="font-semibold text-secondary-900">Actions</h3>
                </div>
                <div class="card-body space-y-3">
                    <button type="submit" class="btn-primary w-full">
                        <i class="fas fa-save mr-2"></i>
                        Update Company
                    </button>
                    <a href="{{ route('admin.companies.index') }}" class="btn-ghost w-full justify-center">
                        Cancel
                    </a>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3 class="font-semibold text-secondary-900">Statistics</h3>
                </div>
                <div class="card-body space-y-3">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Users</span>
                        <span class="font-medium">{{ $company->users()->count() }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Surveys</span>
                        <span class="font-medium">{{ $company->surveys()->count() }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Status</span>
                        @if($company->is_active)
                            <span class="badge badge-success">Active</span>
                        @else
                            <span class="badge badge-danger">Inactive</span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3 class="font-semibold text-secondary-900">Login URL</h3>
                </div>
                <div class="card-body">
                    <code class="text-sm bg-gray-100 px-3 py-2 rounded block break-all">
                        {{ url('/login/' . $company->slug) }}
                    </code>
                    <button type="button" onclick="copyToClipboard('{{ url('/login/' . $company->slug) }}')" class="btn-ghost btn-sm mt-2 w-full">
                        <i class="fas fa-copy mr-2"></i>Copy URL
                    </button>
                </div>
            </div>

            <!-- Email Status -->
            <div class="card">
                <div class="card-header">
                    <h3 class="font-semibold text-secondary-900">Email Status</h3>
                </div>
                <div class="card-body">
                    @if($company->hasSmtpConfigured())
                        <div class="flex items-center text-green-600 mb-2">
                            <i class="fas fa-check-circle mr-2"></i>
                            <span class="font-medium">SMTP Configured</span>
                        </div>
                        <p class="text-sm text-gray-500">
                            Emails will be sent from:<br>
                            <strong>{{ $company->smtp_from_name ?? $company->name }}</strong><br>
                            &lt;{{ $company->smtp_from_email ?? $company->smtp_username }}&gt;
                        </p>
                    @else
                        <div class="flex items-center text-yellow-600 mb-2">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            <span class="font-medium">Not Configured</span>
                        </div>
                        <p class="text-sm text-gray-500">
                            Configure SMTP settings to enable email invitations for this company.
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    document.querySelectorAll('input[type="color"]').forEach(picker => {
        picker.addEventListener('input', function() {
            this.nextElementSibling.value = this.value;
        });
    });

    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            alert('URL copied to clipboard!');
        });
    }

    function testSmtpConnection() {
        const resultDiv = document.getElementById('smtp-test-result');
        resultDiv.classList.remove('hidden', 'bg-green-100', 'bg-red-100');
        resultDiv.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Testing connection...';
        resultDiv.classList.add('bg-gray-100');
        
        fetch('{{ route("admin.companies.test-smtp", $company) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            resultDiv.classList.remove('bg-gray-100');
            if (data.success) {
                resultDiv.classList.add('bg-green-100');
                resultDiv.innerHTML = '<i class="fas fa-check-circle text-green-600 mr-2"></i><span class="text-green-700">' + data.message + '</span>';
            } else {
                resultDiv.classList.add('bg-red-100');
                resultDiv.innerHTML = '<i class="fas fa-times-circle text-red-600 mr-2"></i><span class="text-red-700">' + data.message + '</span>';
            }
        })
        .catch(error => {
            resultDiv.classList.remove('bg-gray-100');
            resultDiv.classList.add('bg-red-100');
            resultDiv.innerHTML = '<i class="fas fa-times-circle text-red-600 mr-2"></i><span class="text-red-700">Connection test failed. Please check your settings.</span>';
        });
    }
</script>
@endsection