@extends('layouts.admin')

@section('title', 'Create Company')
@section('header', 'Create Company')
@section('subheader', 'Add a new company to the platform')

@section('content')
<form action="{{ route('admin.companies.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    
    <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') }}" 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') }}" class="form-input" placeholder="Auto-generated from name">
                            <p class="text-xs text-gray-500 mt-1">Leave blank to auto-generate</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') }}" 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') }}" 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') }}</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>
                            <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">PNG, JPG, or SVG (recommended 200x60px)</p>
                            @error('logo')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="form-label">Favicon</label>
                            <input type="file" name="favicon" accept="image/png,image/x-icon" class="form-input">
                            <p class="text-xs text-gray-500 mt-1">PNG or ICO (32x32px)</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', '#0066b2') }}" class="w-12 h-10 rounded border cursor-pointer">
                                <input type="text" value="{{ old('primary_color', '#0066b2') }}" class="form-input flex-1" readonly>
                            </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', '#2c3e50') }}" class="w-12 h-10 rounded border cursor-pointer">
                                <input type="text" value="{{ old('secondary_color', '#2c3e50') }}" class="form-input flex-1" readonly>
                            </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) - Optional
                    </h3>
                </div>
                <div class="card-body space-y-4">
                    <div class="p-4 bg-blue-50 rounded-lg">
                        <p class="text-sm text-blue-700">
                            <i class="fas fa-info-circle mr-2"></i>
                            Configure SMTP settings to enable email invitations. You can also set this up later.
                        </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') }}" 
                                   class="form-input" placeholder="smtp.gmail.com">
                        </div>
                        <div>
                            <label class="form-label">SMTP Port</label>
                            <input type="number" name="smtp_port" value="{{ old('smtp_port', 587) }}" 
                                   class="form-input" placeholder="587">
                        </div>
                        <div>
                            <label class="form-label">SMTP Username</label>
                            <input type="text" name="smtp_username" value="{{ old('smtp_username') }}" 
                                   class="form-input" placeholder="email@company.com">
                        </div>
                        <div>
                            <label class="form-label">SMTP Password</label>
                            <input type="password" name="smtp_password" value="{{ old('smtp_password') }}" 
                                   class="form-input" placeholder="Enter password">
                        </div>
                        <div>
                            <label class="form-label">Encryption</label>
                            <select name="smtp_encryption" class="form-select">
                                <option value="tls" {{ old('smtp_encryption') == 'tls' ? 'selected' : '' }}>TLS (Recommended)</option>
                                <option value="ssl" {{ old('smtp_encryption') == 'ssl' ? 'selected' : '' }}>SSL</option>
                                <option value="" {{ old('smtp_encryption') == '' ? 'selected' : '' }}>None</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label">From Email</label>
                            <input type="email" name="smtp_from_email" value="{{ old('smtp_from_email') }}" 
                                   class="form-input" placeholder="surveys@company.com">
                        </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') }}" 
                                   class="form-input" placeholder="Company HR Team">
                        </div>
                    </div>
                </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>
                        Create 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">Tips</h3>
                </div>
                <div class="card-body">
                    <ul class="text-sm text-gray-600 space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
                            <span>Upload a logo for branded login pages</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
                            <span>Choose colors that match the company brand</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-0.5"></i>
                            <span>Configure SMTP to send email invitations</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>

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