@extends('layouts.app')

@section('title', 'Owner dashboard')

@section('content')
    @if ($missing && auth()->user()?->hasPermission('settings.manage'))
        <div class="mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
            <span class="flex-1">Company profile is incomplete: {{ implode(', ', $missing) }}.</span>
            <a href="{{ route('admin.company.edit') }}" class="rounded-md bg-amber-600 px-3 py-1.5 text-xs font-semibold text-white">Complete setup</a>
        </div>
    @endif

    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
        @foreach ($tiles as $tile)
            <div class="rounded-xl bg-white p-4 shadow-sm">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-500">{{ $tile['label'] }}</p>
                <p class="mt-2 text-lg font-semibold text-slate-900">{{ $tile['value'] }}</p>
            </div>
        @endforeach
    </div>

    <p class="mt-6 text-sm text-slate-500">
        Tiles show live figures as each module goes live. Start by completing
        <a href="{{ route('admin.company.edit') }}" class="font-medium underline" style="color: var(--brand)">Company profile</a>,
        then add product categories, sizes and routes.
    </p>
@endsection