@extends('layouts.master')

@section('title', $fineType->exists ? 'Boetetype bewerken' : 'Nieuw boetetype')

@section('content')
    <div class="container">
        <h1 class="mb-4">{{ $fineType->exists ? 'Bewerk boetetype' : 'Nieuw boetetype' }}</h1>

        <form method="POST" action="{{ route('fine.type.save') }}">
            @csrf

            <input type="hidden" name="id" value="{{ $fineType->id }}">

            <div class="mb-3">
                <label for="description" class="form-label">Omschrijving</label>
                <input type="text" name="description" id="description" class="form-control" required
                    value="{{ old('description', $fineType->description) }}">
            </div>

            <div class="mb-3">
                <label for="fine_payment_id" class="form-label">Tikkie-link</label>
                <select name="fine_payment_id" id="fine_payment_id" class="form-select" required onchange="updateAmount()">
                    <option value="">-- Kies een Tikkie-link --</option>
                    @foreach($payments as $payment)
                        <option value="{{ $payment->id }}"
                            data-amount="{{ $payment->amount }}"
                            @if(old('fine_payment_id', $fineType->fine_payment_id ?? null) == $payment->id) selected @endif>
                            €{{ number_format($payment->amount, 2, ',', '.') }} - {{ $payment->url }}
                        </option>
                    @endforeach
                </select>
            </div>

            <button type="submit" class="btn btn-primary">Opslaan</button>
            <a href="{{ route('fine.type.list') }}" class="btn btn-secondary">Annuleren</a>
        </form>
    </div>

    <script>
        function updateAmount() {
            let select = document.getElementById('fine_payment_id');
            let amount = select.options[select.selectedIndex]?.getAttribute('data-amount') || '';
            document.getElementById('amount').value = amount;
        }
        document.addEventListener('DOMContentLoaded', updateAmount);
    </script>
@endsection