@extends('layouts.app')
@section('title', 'Company Management')

@section('content')
<div class="page-header">
    <div>
        <div class="page-breadcrumb"><a href="{{ route('dashboard') }}">Home</a> <span class="sep">›</span> Admin</div>
        <h1 class="page-title">Company Management</h1>
        <p class="page-subtitle">Multi-tenant company registry — {{ $companies->total() }} registered companies</p>
    </div>
    <a href="{{ route('admin.companies.create') }}" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Register Company</a>
</div>

{{-- Company Cards Grid --}}
<div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; margin-bottom: 24px">
    @foreach($companies as $company)
    <div class="card" style="transition:all .2s;cursor:pointer" onmouseenter="this.style.borderColor='var(--brand-primary)'" onmouseleave="this.style.borderColor='var(--border)'">
        <div style="padding:20px">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-12">
                    {{-- Company Logo/Branding --}}
                    <div style="width:52px;height:52px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,{{ $company->primary_color ?? '#6366f1' }},{{ $company->secondary_color ?? '#8b5cf6' }});display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:20px;color:#fff;flex-shrink:0">
                        @if($company->logo)
                            <img src="{{ asset('storage/' . $company->logo) }}" style="width:100%;height:100%;object-fit:cover">
                        @else
                            {{ strtoupper(substr($company->name, 0, 1)) }}
                        @endif
                    </div>
                    <div>
                        <div style="font-family:var(--font-display);font-weight:700;font-size:16px">{{ $company->name }}</div>
                        <div class="text-xs text-muted">{{ $company->registration_number }}</div>
                    </div>
                </div>
                <span class="badge-pill {{ $company->status === 'active' ? 'success' : 'neutral' }}">
                    <span class="dot"></span> {{ ucfirst($company->status) }}
                </span>
            </div>

            <div class="grid" style="grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px">
                <div style="font-size:11px">
                    <div class="text-muted mb-1">Country</div>
                    <div class="font-bold">🌍 {{ $company->country }}</div>
                </div>
                <div style="font-size:11px">
                    <div class="text-muted mb-1">Industry</div>
                    <div class="font-bold">{{ $company->industry }}</div>
                </div>
                <div style="font-size:11px">
                    <div class="text-muted mb-1">Users</div>
                    <div class="font-bold">{{ $company->users_count }} users</div>
                </div>
                <div style="font-size:11px">
                    <div class="text-muted mb-1">Plan</div>
                    <div class="font-bold" style="color:var(--brand-primary)">{{ ucfirst($company->plan) }}</div>
                </div>
            </div>

            {{-- Domain & Email info --}}
            <div style="background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px;font-size:11px">
                <div class="flex gap-2 mb-1">
                    <i class="fa-solid fa-globe" style="color:var(--text-muted);width:14px"></i>
                    <span class="text-muted">{{ $company->domain }}</span>
                </div>
                <div class="flex gap-2">
                    <i class="fa-solid fa-at" style="color:var(--text-muted);width:14px"></i>
                    <span class="text-muted">*@{{ $company->email_domain }}</span>
                </div>
            </div>

            {{-- Currency & Timezone --}}
            <div class="flex gap-2 mb-4 text-xs text-muted">
                <span><i class="fa-solid fa-money-bill"></i> {{ $company->currency }}</span>
                <span>·</span>
                <span><i class="fa-solid fa-clock"></i> {{ $company->timezone }}</span>
                <span>·</span>
                <span><i class="fa-solid fa-building"></i> {{ $company->departments_count }} depts</span>
            </div>

            <div class="flex gap-2">
                <a href="{{ route('admin.companies.show', $company) }}" class="btn btn-secondary btn-sm" style="flex:1;justify-content:center">
                    <i class="fa-solid fa-eye"></i> View
                </a>
                <a href="{{ route('admin.companies.edit', $company) }}" class="btn btn-ghost btn-sm"><i class="fa-solid fa-pen"></i></a>
                <div class="dropdown">
                    <button class="btn btn-ghost btn-sm" onclick="toggleDropdown('co-menu-{{ $company->id }}')"><i class="fa-solid fa-ellipsis"></i></button>
                    <div class="dropdown-menu" id="co-menu-{{ $company->id }}">
                        <a class="dropdown-item" href="{{ route('admin.companies.users', $company) }}"><i class="fa-solid fa-users"></i> Manage Users</a>
                        <a class="dropdown-item" href="{{ route('admin.companies.settings', $company) }}"><i class="fa-solid fa-gear"></i> Settings</a>
                        <a class="dropdown-item" href="{{ route('admin.companies.branding', $company) }}"><i class="fa-solid fa-palette"></i> Branding</a>
                        <a class="dropdown-item" href="{{ route('admin.companies.billing', $company) }}"><i class="fa-solid fa-credit-card"></i> Billing</a>
                        <hr class="dropdown-divider">
                        <a class="dropdown-item" href="#" onclick="impersonate({{ $company->id }})"><i class="fa-solid fa-user-secret"></i> Impersonate</a>
                        @if($company->status === 'active')
                        <a class="dropdown-item" style="color:var(--warning)" onclick="suspendCompany({{ $company->id }})"><i class="fa-solid fa-pause"></i> Suspend</a>
                        @else
                        <a class="dropdown-item" style="color:var(--success)" onclick="activateCompany({{ $company->id }})"><i class="fa-solid fa-play"></i> Activate</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{ $companies->links() }}

{{-- Company Registration Flow --}}
@if(request()->routeIs('admin.companies.create'))
<div class="modal-backdrop open" id="createCompanyModal">
    <div class="modal xl">
        <div class="modal-header">
            <h3 class="modal-title">Register New Company</h3>
            <a href="{{ route('admin.companies.index') }}" class="modal-close"><i class="fa-solid fa-xmark"></i></a>
        </div>
        <form action="{{ route('admin.companies.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-body">
                {{-- Step Indicator --}}
                <div class="flex gap-0 mb-6" id="stepIndicator">
                    @foreach(['Company Info', 'Registration', 'Branding', 'Configuration', 'Admin User'] as $i => $step)
                    <div style="flex:1;text-align:center">
                        <div style="width:32px;height:32px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:{{ $i === 0 ? 'var(--brand-primary)' : 'var(--bg-hover)' }};color:{{ $i === 0 ? '#fff' : 'var(--text-muted)' }};transition:all .3s" id="step-dot-{{ $i }}">{{ $i + 1 }}</div>
                        <div style="font-size:10px;font-weight:600;color:{{ $i === 0 ? 'var(--brand-primary)' : 'var(--text-muted)' }};transition:all .3s" id="step-label-{{ $i }}">{{ $step }}</div>
                        @if(!$loop->last)<div style="height:1px;background:var(--border);position:relative;top:-20px;left:50%;width:100%"></div>@endif
                    </div>
                    @endforeach
                </div>

                {{-- Step 1: Company Info --}}
                <div id="step-0" class="step-panel">
                    <div class="form-grid cols-2">
                        <div class="form-group" style="grid-column:1/-1">
                            <label class="form-label">Company Name <span class="req">*</span></label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Industry / Business Type <span class="req">*</span></label>
                            <select name="industry" class="form-control" required>
                                <option value="">Select industry...</option>
                                <option value="hospitality">Hospitality / Hotels</option>
                                <option value="events">Events Management</option>
                                <option value="restaurant">Restaurant / Food & Beverage</option>
                                <option value="real_estate">Real Estate</option>
                                <option value="technology">Technology</option>
                                <option value="healthcare">Healthcare</option>
                                <option value="education">Education</option>
                                <option value="retail">Retail</option>
                                <option value="manufacturing">Manufacturing</option>
                                <option value="finance">Finance & Banking</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Country of Registration <span class="req">*</span></label>
                            <select name="country" class="form-control" required>
                                @foreach($countries as $code => $name)
                                <option value="{{ $code }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">City</label>
                            <input type="text" name="city" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" class="form-control" placeholder="+1234567890">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Website</label>
                            <input type="url" name="website" class="form-control" placeholder="https://">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Company Size</label>
                            <select name="size" class="form-control">
                                <option value="1-10">1–10 employees</option>
                                <option value="11-50">11–50</option>
                                <option value="51-200">51–200</option>
                                <option value="201-1000">201–1000</option>
                                <option value="1000+">1000+</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Plan</label>
                            <select name="plan" class="form-control">
                                <option value="starter">Starter</option>
                                <option value="professional" selected>Professional</option>
                                <option value="enterprise">Enterprise</option>
                            </select>
                        </div>
                    </div>
                </div>

                {{-- Step 2: Registration Details --}}
                <div id="step-1" class="step-panel" style="display:none">
                    <div class="form-grid cols-2">
                        <div class="form-group">
                            <label class="form-label">Registration Number <span class="req">*</span></label>
                            <input type="text" name="registration_number" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Tax ID / VAT Number</label>
                            <input type="text" name="tax_id" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Date of Incorporation</label>
                            <input type="text" name="incorporated_at" class="form-control flatpickr">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Business License Number</label>
                            <input type="text" name="license_number" class="form-control">
                        </div>
                        <div class="form-group" style="grid-column:1/-1">
                            <label class="form-label">Registered Address</label>
                            <textarea name="registered_address" class="form-control" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Currency</label>
                            <select name="currency" class="form-control">
                                @foreach($currencies as $code => $name)
                                <option value="{{ $code }}">{{ $code }} - {{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Timezone</label>
                            <select name="timezone" class="form-control">
                                @foreach($timezones as $tz)
                                <option value="{{ $tz }}">{{ $tz }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group" style="grid-column:1/-1">
                            <label class="form-label">Business Description</label>
                            <textarea name="description" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>

                {{-- Step 3: Branding --}}
                <div id="step-2" class="step-panel" style="display:none">
                    <div class="form-grid cols-2">
                        <div class="form-group" style="grid-column:1/-1">
                            <label class="form-label">Company Logo</label>
                            <input type="file" name="logo" class="form-control" accept="image/*" onchange="previewLogo(this)">
                            <div id="logoPreview" style="margin-top:10px;display:none">
                                <img id="logoImg" style="height:60px;object-fit:contain;border-radius:8px">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Primary Brand Color</label>
                            <div class="flex gap-2">
                                <input type="color" name="primary_color" class="form-control" style="width:50px;padding:4px;cursor:pointer" value="#6366f1">
                                <input type="text" id="primaryColorText" class="form-control" value="#6366f1" style="flex:1">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Secondary Brand Color</label>
                            <div class="flex gap-2">
                                <input type="color" name="secondary_color" class="form-control" style="width:50px;padding:4px;cursor:pointer" value="#8b5cf6">
                                <input type="text" id="secondaryColorText" class="form-control" value="#8b5cf6" style="flex:1">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Accent Color</label>
                            <input type="color" name="accent_color" class="form-control" style="width:100%;height:40px;padding:4px;cursor:pointer" value="#f59e0b">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Email Signature Header</label>
                            <textarea name="email_signature" class="form-control" rows="3" placeholder="Your company sign-off text for emails..."></textarea>
                        </div>
                    </div>
                </div>

                {{-- Step 4: Domain & Email Config --}}
                <div id="step-3" class="step-panel" style="display:none">
                    <div class="alert alert-info mb-4">
                        <i class="fa-solid fa-info-circle"></i>
                        <div>Each company has its own domain and email domain. Users send emails using their personal company email addresses (e.g., <strong>john@companyname.com</strong>), not a shared company email.</div>
                    </div>
                    <div class="form-grid cols-2">
                        <div class="form-group">
                            <label class="form-label">App Domain / Subdomain <span class="req">*</span></label>
                            <div class="flex gap-0">
                                <input type="text" name="subdomain" class="form-control" style="border-radius:8px 0 0 8px" placeholder="companyname" required>
                                <div style="padding:9px 14px;background:var(--bg-hover);border:1px solid var(--border);border-left:none;border-radius:0 8px 8px 0;font-size:13px;color:var(--text-muted);white-space:nowrap">.nexuscrm.com</div>
                            </div>
                            <div class="form-hint">Or enter a custom domain below</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Custom Domain</label>
                            <input type="text" name="domain" class="form-control" placeholder="app.yourcompany.com">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Email Domain <span class="req">*</span></label>
                            <div class="flex gap-0">
                                <div style="padding:9px 14px;background:var(--bg-hover);border:1px solid var(--border);border-right:none;border-radius:8px 0 0 8px;font-size:13px;color:var(--text-muted)">@</div>
                                <input type="text" name="email_domain" class="form-control" style="border-radius:0 8px 8px 0" placeholder="yourcompany.com" required>
                            </div>
                            <div class="form-hint">Users will email as firstname@yourcompany.com</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">SMTP Host</label>
                            <input type="text" name="smtp_host" class="form-control" placeholder="smtp.gmail.com">
                        </div>
                        <div class="form-group">
                            <label class="form-label">SMTP Port</label>
                            <input type="number" name="smtp_port" class="form-control" value="587">
                        </div>
                        <div class="form-group">
                            <label class="form-label">SMTP Username</label>
                            <input type="text" name="smtp_username" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-label">SMTP Password</label>
                            <input type="password" name="smtp_password" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-label">WhatsApp Business Number</label>
                            <input type="text" name="whatsapp_number" class="form-control" placeholder="+1234567890">
                        </div>
                        <div class="form-group">
                            <label class="form-label">SMS Provider API Key</label>
                            <input type="text" name="sms_api_key" class="form-control" placeholder="API key">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Flutterwave Public Key</label>
                            <input type="text" name="flutterwave_public_key" class="form-control" placeholder="FLWPUBK_TEST-...">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Flutterwave Secret Key</label>
                            <input type="password" name="flutterwave_secret_key" class="form-control">
                        </div>
                    </div>
                </div>

                {{-- Step 5: Admin User --}}
                <div id="step-4" class="step-panel" style="display:none">
                    <div class="alert alert-info mb-4">
                        <i class="fa-solid fa-user-shield"></i>
                        Create the primary administrator for this company. Their email will use the company email domain.
                    </div>
                    <div class="form-grid cols-2">
                        <div class="form-group">
                            <label class="form-label">First Name <span class="req">*</span></label>
                            <input type="text" name="admin_first_name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Last Name <span class="req">*</span></label>
                            <input type="text" name="admin_last_name" class="form-control" required>
                        </div>
                        <div class="form-group" style="grid-column:1/-1">
                            <label class="form-label">Admin Email <span class="req">*</span></label>
                            <div class="flex gap-0">
                                <input type="text" name="admin_email_prefix" class="form-control" style="border-radius:8px 0 0 8px" placeholder="admin" required>
                                <div style="padding:9px 14px;background:var(--bg-hover);border:1px solid var(--border);border-left:none;border-radius:0 8px 8px 0;font-size:13px;color:var(--text-muted)" id="emailDomainPreview">@yourcompany.com</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Password <span class="req">*</span></label>
                            <input type="password" name="admin_password" class="form-control" minlength="8" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Confirm Password <span class="req">*</span></label>
                            <input type="password" name="admin_password_confirmation" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Phone</label>
                            <input type="text" name="admin_phone" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Job Title</label>
                            <input type="text" name="admin_title" class="form-control" placeholder="e.g. CEO / Director">
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" id="prevBtn" onclick="changeStep(-1)" style="display:none">
                    <i class="fa-solid fa-arrow-left"></i> Previous
                </button>
                <div style="flex:1"></div>
                <button type="button" class="btn btn-primary" id="nextBtn" onclick="changeStep(1)">
                    Next <i class="fa-solid fa-arrow-right"></i>
                </button>
                <button type="submit" class="btn btn-primary" id="submitBtn" style="display:none">
                    <i class="fa-solid fa-check"></i> Register Company
                </button>
            </div>
        </form>
    </div>
</div>
@endif

@push('scripts')
<script>
flatpickr('.flatpickr', { dateFormat: 'Y-m-d' });

let currentStep = 0;
const totalSteps = 5;

function changeStep(dir) {
    const newStep = currentStep + dir;
    if(newStep < 0 || newStep >= totalSteps) return;

    // Validate current step
    if(dir > 0) {
        const required = document.querySelectorAll(`#step-${currentStep} [required]`);
        for(let el of required) {
            if(!el.value.trim()) { el.focus(); el.style.borderColor = 'var(--danger)'; return; }
            el.style.borderColor = '';
        }
    }

    document.getElementById(`step-${currentStep}`).style.display = 'none';
    document.getElementById(`step-${newStep}`).style.display = 'block';

    // Update indicators
    for(let i = 0; i < totalSteps; i++) {
        const dot = document.getElementById(`step-dot-${i}`);
        const label = document.getElementById(`step-label-${i}`);
        if(i < newStep) { dot.style.background = 'var(--success)'; dot.style.color = '#fff'; dot.innerHTML = '✓'; }
        else if(i === newStep) { dot.style.background = 'var(--brand-primary)'; dot.style.color = '#fff'; dot.innerHTML = i + 1; }
        else { dot.style.background = 'var(--bg-hover)'; dot.style.color = 'var(--text-muted)'; dot.innerHTML = i + 1; }
        label.style.color = i === newStep ? 'var(--brand-primary)' : 'var(--text-muted)';
    }

    currentStep = newStep;
    document.getElementById('prevBtn').style.display = currentStep > 0 ? 'block' : 'none';
    document.getElementById('nextBtn').style.display = currentStep < totalSteps - 1 ? 'block' : 'none';
    document.getElementById('submitBtn').style.display = currentStep === totalSteps - 1 ? 'block' : 'none';
}

// Sync email domain preview
document.querySelector('[name="email_domain"]')?.addEventListener('input', function() {
    document.getElementById('emailDomainPreview').textContent = '@' + (this.value || 'yourcompany.com');
});

function previewLogo(input) {
    if(input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById('logoImg').src = e.target.result;
            document.getElementById('logoPreview').style.display = 'block';
        };
        reader.readAsDataURL(input.files[0]);
    }
}

async function suspendCompany(id) {
    if(!confirm('Suspend this company? Users will lose access.')) return;
    const res = await fetch(`/admin/companies/${id}/suspend`, { method: 'POST', headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'} });
    if((await res.json()).success) location.reload();
}
async function activateCompany(id) {
    const res = await fetch(`/admin/companies/${id}/activate`, { method: 'POST', headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'} });
    if((await res.json()).success) location.reload();
}
async function impersonate(id) {
    if(!confirm('Access this company as admin?')) return;
    window.location.href = `/admin/companies/${id}/impersonate`;
}
</script>
@endpush
@endsection