@php use Illuminate\Support\Carbon; @endphp
<x-layout.app>
    <x-slot:page_title>Enter {{ $bonusScoreDefinition->name }} Score</x-slot:page_title>
    <x-card.card>
        <x-card.heading>
            {{ $entry->student->full_name() }}
            <x-slot:subheading>{{ $entry->student->school->name }}</x-slot:subheading>
        </x-card.heading>
    </x-card.card>
    <div class="grid grid-cols-3  gap-3 w-full mt-5">

        <x-card.card class="col-span-2">
            <x-card.heading>Existing Scores</x-card.heading>
            <div class="px-6">
                @foreach($relatedEntries as $related)
                    <x-table.table class="mb-8 ">
                        <x-slot:title class="border rounded-md pl-3 bg-gray-100">
                            {{ $related->audition->name }} #{{ $related->draw_number }}
                        </x-slot:title>
                        <x-slot:subtitle>
                            Entry ID: {{ $related->id }}
                        </x-slot:subtitle>
                        <thead>
                        <tr>
                            <x-table.th>Judge</x-table.th>
                            <x-table.th>Audition Scored</x-table.th>
                            <x-table.th>Score</x-table.th>
                            <x-table.th>Timestamp</x-table.th>
                        </tr>
                        </thead>
                        <x-table.body>
                            @foreach($existingScores[$related->id] as $score)
                                <tr>
                                    <td>{{ $score->judge->full_name() }}</td>
                                    <td>{{ $score->originallyScoredEntry->audition->name }}</td>
                                    <td>{{ $score->score }}</td>
                                    <td>{{ Carbon::create($score->created_at)->setTimezone('America/Chicago')->format('m/d/y H:i') }}</td>
                                </tr>
                            @endforeach
                        </x-table.body>
                    </x-table.table>
                @endforeach
            </div>
        </x-card.card>

        <x-card.card >
            <x-card.heading>Enter Score</x-card.heading>
            <div class="mx-5 border-b text-sm">
                <p class="mb-3">NOTE: Entering score will delete any existing scores for that entry by that judge</p>
                <p>Submitting the form with no score value will delete scores by that judge</p>
            </div>
            <x-form.form class="my-3" method="POST" action="{{route('bonus-scores.saveEntryBonusScoreSheet', $entry)}}" x-data="{ judgeChanged: false }">
                <x-form.select name="judge_id" class="mb-5" required x-on:change="judgeChanged=true">
                    <x-slot:label>Judge</x-slot:label>
                    <option value="" x-bind:disabled="judgeChanged">Choose Judge</option>
                    @foreach($assignedJudges as $judge)
                        <option value="{{ $judge->id }}">{{ $judge->full_name() }}</option>
                    @endforeach
                </x-form.select>
                <x-form.select name="entry_id" class="mb-5" required>
                    <x-slot:label>Scored Audition</x-slot:label>
                    @foreach($relatedEntries as $related)
                        <option value="{{$related->id}}" {{$related->id == $entry->id ? 'selected':' '}}>{{ $related->audition->name }}</option>
                    @endforeach
                </x-form.select>
                <x-form.field label_text="Score" name="score" type="number" max="{{ $bonusScoreDefinition->max_score }}"/>
                <x-form.button class="mt-5" x-show="judgeChanged">Enter Score</x-form.button>
            </x-form.form>
        </x-card.card>
    </div>
</x-layout.app>