@extends('layouts.platform')
@section('title','Perusahaan')
@section('content')
@php($planMap = $plans->keyBy('code'))
<div class="page-head">
    <div><h1 class="page-title">Tenant Perusahaan</h1><p class="page-subtitle">Provisioning, status langganan, dan akses portal seluruh klien.</p></div>
    <div class="cluster"><a class="btn btn-ghost" href="{{ route('platform.plans.index') }}"><i data-lucide="layers-3"></i> Bandingkan Paket</a><button class="btn btn-gold" data-dialog-open="#newCompany"><i data-lucide="plus"></i> Tambah Perusahaan</button></div>
</div>

<div class="stats-grid platform-stats">
    <div class="card stat"><div class="stat-icon"><i data-lucide="building-2"></i></div><div class="stat-value">{{ $stats['companies'] }}</div><div class="stat-label">Total perusahaan</div></div>
    <div class="card stat"><div class="stat-icon success"><i data-lucide="circle-check"></i></div><div class="stat-value">{{ $stats['active'] }}</div><div class="stat-label">Tenant aktif</div></div>
    <div class="card stat"><div class="stat-icon warning"><i data-lucide="timer"></i></div><div class="stat-value">{{ $stats['trial'] }}</div><div class="stat-label">Masa trial</div></div>
    <div class="card stat"><div class="stat-icon purple"><i data-lucide="users"></i></div><div class="stat-value">{{ $stats['employees'] }}</div><div class="stat-label">Karyawan dikelola</div></div>
</div>

<div class="card table-wrap">
    <table class="data-table">
        <thead><tr><th>Perusahaan</th><th>Portal</th><th>Paket</th><th>Pengguna</th><th>Karyawan</th><th>Status</th><th>Aksi</th></tr></thead>
        <tbody>
        @forelse($companies as $company)
            @php($tenantPlan = $company->subscriptionPlan ?? $planMap->get($company->plan))
            <tr>
                <td><strong>{{ $company->name }}</strong><div class="tiny muted">{{ $company->email }}</div></td>
                <td><a class="tenant-link" href="{{ route('tenant.portal',$company) }}" target="_blank">/{{ $company->slug }} <i data-lucide="external-link"></i></a></td>
                <td><span class="badge plan-{{ $company->plan }}">{{ strtoupper($tenantPlan?->name ?? $company->plan) }}</span></td>
                <td>{{ $company->users_count }}</td>
                <td>{{ $company->employees_count }} <span class="tiny muted">/ {{ $tenantPlan?->max_employees ? number_format($tenantPlan->max_employees,0,',','.') : '∞' }}</span></td>
                <td><span class="badge {{ $company->status }}">{{ strtoupper($company->status) }}</span></td>
                <td><a class="btn btn-ghost btn-sm" href="{{ route('platform.companies.show',$company) }}" aria-label="Kelola {{ $company->name }}"><i data-lucide="settings-2"></i> Kelola</a></td>
            </tr>
        @empty
            <tr><td colspan="7" class="empty">Belum ada tenant perusahaan.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>
<div style="margin-top:16px">{{ $companies->links() }}</div>

<dialog class="modal" id="newCompany">
    <form method="post" action="{{ route('platform.companies.store') }}">@csrf
        <div class="modal-head split"><div><strong>Provisioning Perusahaan</strong><div class="tiny muted">Tenant dan akun owner dibuat sekaligus</div></div><button type="button" class="btn btn-ghost btn-sm" data-dialog-close aria-label="Tutup"><i data-lucide="x"></i></button></div>
        <div class="modal-body stack">
            <div class="portal-preview"><i data-lucide="link-2"></i><div><span>Format portal perusahaan</span><strong>{{ rtrim(config('app.url'),'/') }}/<span data-slug-preview>nama-perusahaan</span></strong></div></div>
            <div class="form-grid">
                <div class="field"><label>Nama perusahaan</label><input class="control" name="name" value="{{ old('name') }}" required></div>
                <div class="field"><label>URL portal (opsional)</label><div class="input-prefix"><span>/</span><input class="control" name="slug" value="{{ old('slug') }}" placeholder="nama-perusahaan" pattern="[a-zA-Z0-9_-]+"></div><small>Otomatis dibuat dari nama perusahaan bila dikosongkan.</small></div>
                <div class="field"><label>Email perusahaan (kontak)</label><input class="control" type="email" name="email" value="{{ old('email') }}" required><small>Untuk informasi kontak perusahaan, bukan untuk login.</small></div>
                <div class="field"><label>Telepon</label><input class="control" name="phone" value="{{ old('phone') }}"></div>
                <div class="field"><label>Paket</label><select class="control" name="plan">@foreach($plans->where('is_active',true) as $plan)<option value="{{ $plan->code }}" @selected(old('plan','professional')===$plan->code)>{{ $plan->name }} — {{ $plan->max_employees ? 'maks. '.$plan->max_employees.' karyawan' : 'tanpa batas' }}</option>@endforeach</select></div>
                <div class="field"><label>Status</label><select class="control" name="status"><option value="trial" @selected(old('status','trial')==='trial')>Trial 14 hari</option><option value="active" @selected(old('status')==='active')>Aktif</option></select></div>
            </div>
            <div class="field"><label>Alamat</label><textarea class="control" name="address">{{ old('address') }}</textarea></div>
            <div class="form-grid"><div class="field"><label>Nama owner</label><input class="control" name="owner_name" value="{{ old('owner_name') }}" required></div><div class="field"><label>Email login Owner</label><input class="control" type="email" name="owner_email" value="{{ old('owner_email') }}" required><small>Email inilah yang dipakai Owner untuk masuk ke portal tenant.</small></div></div>
            <div class="field"><label>Password awal owner</label><input class="control" type="password" name="owner_password" minlength="10" required><small>Minimal 10 karakter; owner dapat menggantinya setelah login.</small></div>
            <button class="btn btn-gold"><i data-lucide="sparkles"></i> Buat Tenant & Portal</button>
        </div>
    </form>
</dialog>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const name = document.querySelector('#newCompany [name="name"]');
    const slug = document.querySelector('#newCompany [name="slug"]');
    const preview = document.querySelector('[data-slug-preview]');
    const normalize = value => value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
    const update = () => preview.textContent = normalize(slug.value || name.value) || 'nama-perusahaan';
    name?.addEventListener('input', update); slug?.addEventListener('input', update); update();
});
</script>
@endpush