@extends('layouts.master')

@section('title', $fine->exists ? 'Boete bewerken' : 'Nieuwe boete')

@section('content')
    <div class="container">
        <h1 class="mb-4">{{ $fine->exists ? 'Bewerk boete' : 'Nieuwe boete toevoegen' }}</h1>

        <form method="POST" action="{{ route('fine.save') }}">
            @csrf
            <input type="hidden" name="id" value="{{ $fine->id }}">

            <div class="mb-3">
                <label for="player_id" class="form-label">Speler</label>
                <select name="player_id" id="player_id" class="form-select" required>
                    <option value="">Kies speler...</option>
                    @foreach($players as $player)
                        <option value="{{ $player->id }}" @selected(old('player_id', $fine->player_id ?? null) == $player->id)>
                            {{ $player->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="mb-3">
                <label for="date" class="form-label">Datum</label>
                <input type="date" name="date" id="date" class="form-control" value="{{ old('date', $fine->date ? $fine->date->format('Y-m-d') : now()->format('Y-m-d')) }}" required>
            </div>

            <div class="mb-3">
                <label for="fine_type_id" class="form-label">Boetesoort</label>
                <select name="fine_type_id" id="fine_type_id" class="form-select" required>
                    <option value="">Kies boetesoort...</option>
                    @foreach($fineTypes as $type)
                        <option value="{{ $type->id }}"
                            data-description="{{ $type->description }}"
                            data-amount="{{ $type->payment?->amount }}"
                            data-url="{{ $type->payment?->url }}"
                            @selected(old('fine_type_id', $fine->fine_type_id) == $type->id)>
                            {{ $type->description }}
                            @if($type->payment)
                                (€{{ number_format($type->payment->amount, 2, ',', '.') }})
                            @endif
                        </option>
                    @endforeach
                </select>
            </div>

            <div id="payment-link" class="mb-3"></div>
            <button type="submit" class="btn btn-primary">Opslaan</button>
            <a href="{{ route('player.list') }}" class="btn btn-secondary">Annuleren</a>
        </form>
    </div>
@endsection

@push('scripts')
<script>
    function updateFineFields() {
        const select = document.getElementById('fine_type_id');
        const selected = select.options[select.selectedIndex];

        const description = selected.getAttribute('data-description') || '';
        const amount = selected.getAttribute('data-amount') || '';
        const url = selected.getAttribute('data-url');

        if (description) document.getElementById('description').value = description;
        if (amount) document.getElementById('amount').value = amount;

        // Toon betaallink als er één is
        const paymentDiv = document.getElementById('payment-link');
        if (url) {
            paymentDiv.innerHTML = `<a href="${url}" target="_blank" class="btn btn-outline-success">Tikkie-link openen</a>`;
        } else {
            paymentDiv.innerHTML = '';
        }
    }

    document.getElementById('fine_type_id').addEventListener('change', updateFineFields);
    document.addEventListener('DOMContentLoaded', updateFineFields);

    document.addEventListener("DOMContentLoaded", function () {
        new TomSelect("#player_id", {
            create: false,        // disallow creating new entries
            persist: false,       // don’t persist new entries
            openOnFocus: true,    // open dropdown when input focused
            maxOptions: 100,
            highlight: true,      // highlight matched text
            searchField: ["text"],

            score: function(search) {
                return function(item) {
                    return item.text.toLowerCase().indexOf(search.toLowerCase()) !== -1 ? 1 : 0;
                };
            }
        });
    });
</script>
@endpush