@extends('layouts.master')

@section('title', 'Boetetypebeheer')

@section('content')
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="mb-0">Boetetypes</h1>
            <a href="{{ route('fine.type.new') }}" class="btn btn-success">➕ Nieuw boetetype</a>
        </div>

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <table class="table table-striped align-middle">
            <thead>
                <tr>
                    <th>Omschrijving</th>
                    <th>Bedrag</th>
                    <th>Actie</th>
                </tr>
            </thead>
            <tbody>
                @forelse($fineTypes as $type)
                    <tr>
                        <td>{{ $type->description }}</td>
                        <td>
                            {{ $type->payment ? '€ ' . number_format($type->payment->amount, 2, ',', '.') : '-' }}
                        </td>
                        <td>
                            <a href="{{ route('fine.type.edit', $type) }}" class="btn btn-sm btn-outline-primary">Bewerken</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="text-center">Nog geen boetetypes toegevoegd.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection