@extends('layouts.app')
@section('title', 'Companies')
@section('page-title', 'Companies')
@section('page-subtitle', 'Manage all client companies')

@section('breadcrumbs')
    @include('layouts.components.breadcrumbs', ['items' => [['label' => 'Admin', 'url' => '/admin/dashboard'], ['label' => 'Companies']]])
@endsection

@section('page-actions')
    <a href="{{ route('admin.companies.create') }}" class="btn-primary">
        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Add Company
    </a>
@endsection

@section('content')
    {{-- Stats --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6 animate-fade-up">
        <div class="stat-card"><div class="stat-value">{{ $stats['total'] }}</div><div class="stat-label">Total</div></div>
        <div class="stat-card"><div class="stat-value text-success-600">{{ $stats['active'] }}</div><div class="stat-label">Active</div></div>
        <div class="stat-card"><div class="stat-value text-warning-600">{{ $stats['onboarding'] }}</div><div class="stat-label">Onboarding</div></div>
        <div class="stat-card"><div class="stat-value text-gray-400">{{ $stats['inactive'] }}</div><div class="stat-label">Inactive</div></div>
    </div>

    {{-- Search & Filters --}}
    <div class="card-static animate-fade-up" style="animation-delay:.05s">
        <div class="px-5 py-3 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center gap-3">
            <form method="GET" class="flex items-center gap-2 flex-1">
                <div class="relative flex-1 max-w-xs">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search companies..." class="form-input pl-9">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </div>
                <select name="status" class="form-select w-auto" onchange="this.form.submit()">
                    <option value="">All Status</option>
                    @foreach(['active','inactive','onboarding'] as $s)
                        <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                    @endforeach
                </select>
            </form>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Company</th>
                        <th>City</th>
                        <th>Users</th>
                        <th>Modules</th>
                        <th>Status</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($companies as $company)
                    <tr>
                        <td>
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-primary-600 to-accent-500 flex items-center justify-center text-white font-display font-semibold text-xs flex-shrink-0">
                                    {{ $company->initials }}
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $company->name }}</p>
                                    <p class="text-xxs text-gray-400">{{ $company->email }}</p>
                                </div>
                            </div>
                        </td>
                        <td>{{ $company->city ?? '—' }}</td>
                        <td>{{ $company->users_count }}</td>
                        <td>{{ $company->modules_count }}</td>
                        <td><span class="badge badge-{{ $company->status }}"><span class="badge-dot"></span>{{ ucfirst($company->status) }}</span></td>
                        <td class="text-right">
                            <div class="flex items-center justify-end gap-1">
                                <a href="{{ route('admin.companies.modules', $company) }}" class="btn-icon w-8 h-8" title="Modules">
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
                                </a>
                                <a href="{{ route('admin.companies.edit', $company) }}" class="btn-icon w-8 h-8" title="Edit">
                                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                </a>
                                <form method="POST" action="{{ route('admin.companies.destroy', $company) }}" id="delete-company-{{ $company->id }}">
                                    @csrf @method('DELETE')
                                    <button type="button" class="btn-icon w-8 h-8 text-danger-500 hover:bg-danger-50"
                                        onclick="window.dispatchEvent(new CustomEvent('open-confirm',{detail:{title:'Archive Company',message:'This will archive {{ $company->name }}. You can restore it later.',confirmText:'Archive',action:()=>document.getElementById('delete-company-{{ $company->id }}').submit()}}))"
                                        title="Archive">
                                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6">@include('layouts.components.empty-state', ['icon' => 'box', 'title' => 'No companies yet', 'message' => 'Create your first client company.', 'actionUrl' => route('admin.companies.create'), 'actionLabel' => 'Add Company'])</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($companies->hasPages())
            <div class="px-5 py-3 border-t border-gray-100">
                @include('layouts.components.pagination', ['paginator' => $companies])
            </div>
        @endif
    </div>
@endsection