@extends('layouts.app')

@section('title', 'Détail du budget | EasyMutuelle')
@section('page_title', 'Détail du budget')

@section('content')
<div class="space-y-6">
    <div class="card-surface rounded-2xl p-6">
        <div class="flex items-center justify-between gap-4">
            <div>
                <p class="text-sm uppercase tracking-[0.12em] text-slate-500">Budget</p>
                <h2 class="mt-2 text-3xl font-bold text-slate-900">{{ $budget->name }}</h2>
            </div>
            <span class="badge-success">{{ $budget->status }}</span>
        </div>
    </div>

    <div class="card-surface rounded-2xl p-6">
        <dl class="grid gap-6 md:grid-cols-2 text-sm">
            <div class="flex justify-between gap-4"><dt class="text-slate-500">Catégorie</dt><dd class="font-medium text-slate-800">{{ $budget->category }}</dd></div>
            <div class="flex justify-between gap-4"><dt class="text-slate-500">Année</dt><dd class="font-medium text-slate-800">{{ $budget->year }}</dd></div>
            <div class="flex justify-between gap-4"><dt class="text-slate-500">Montant</dt><dd class="font-medium text-slate-800">{{ number_format($budget->amount, 0, ',', ' ') }} FCFA</dd></div>
            <div class="flex justify-between gap-4"><dt class="text-slate-500">Statut</dt><dd class="font-medium text-slate-800">{{ $budget->status }}</dd></div>
        </dl>
    </div>
</div>
@endsection