<x-app-layout>
    <x-slot name="header">
        {{ $title }}
    </x-slot>

    <div class="p-6 space-y-6">
        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900">{{ $title }}</h2>
            <p class="mt-2 text-sm text-gray-600">
                Dealer: {{ optional($dealer)->name ?? '—' }}<br>
                User: {{ $user->full_name ?? trim($user->name.' '.($user->surname ?? '')) }}<br>
                Roles: {{ $user->roles->pluck('name')->join(', ') ?: '—' }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-5">
                <p class="text-sm text-gray-500">Financial KPIs</p>
                <p class="mt-2 text-lg font-semibold text-gray-900">Placeholder</p>
            </div>
            <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-5">
                <p class="text-sm text-gray-500">Expenses Overview</p>
                <p class="mt-2 text-lg font-semibold text-gray-900">Placeholder</p>
            </div>
            <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-5">
                <p class="text-sm text-gray-500">Net Profit</p>
                <p class="mt-2 text-lg font-semibold text-gray-900">Placeholder</p>
            </div>
        </div>
    </div>
</x-app-layout>

