@extends('layouts.master')

@section('title', 'Wedstrijdstatistieken invullen')

@section('content')
    <h1 class="mb-4">Wedstrijdstatistieken voor {{ $match->opponentTeam->name }} op {{ $match->date->format('d-m-Y') }}</h1>

    <form method="POST" action="{{ route('match.stats.save', $match) }}">
        @csrf

        <div class="accordion" id="playerStatsAccordion">
            @foreach($players as $player)
                <div class="accordion-item mb-2">
                    <h2 class="accordion-header" id="heading-{{ $player->id }}">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $player->id }}">
                            {{ $player->name }}
                        </button>
                    </h2>
                    <div id="collapse-{{ $player->id }}" class="accordion-collapse collapse">
                        <div class="accordion-body">
                            @include('games.stats.partials.player', ['player' => $player])
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <button type="submit" class="btn btn-primary mt-3">Statistieken opslaan</button>
    </form>
@endsection

@php
    $assistOptionsHtml = '<option value="">Geen assist</option>';
    foreach ($players as $assist) {
        $assistOptionsHtml .= '<option value="' . $assist->id . '">' . $assist->name . '</option>';
    }
@endphp

@push('scripts')
<script>
    const assistOptions = @json($assistOptionsHtml);

    document.querySelectorAll('.add-goal').forEach(btn => {
        btn.addEventListener('click', function () {
            const playerId = this.dataset.playerId;
            const wrapper = document.querySelector(`.goal-wrapper[data-player-id="${playerId}"]`);
            const index = wrapper.children.length;
            const template = `
                <div class="input-group mb-1">
                    <input type="number" name="players[${playerId}][goals][${index}][minute]" class="form-control" placeholder="Minuut">
                    <select name="players[${playerId}][goals][${index}][assist_id]" class="form-select">
                        ${assistOptions}
                    </select>
                </div>`;
            wrapper.insertAdjacentHTML('beforeend', template);
        });
    });
</script>
@endpush