auditionadmin/resources/views/admin/auditions/bulk_edit_form.blade.php

115 lines
5.7 KiB
PHP

<x-layout.app x-data="{ selectAuditionsForm: true, newValuesForm: false }">
<x-slot:page_title>Bulk Edit Auditions</x-slot:page_title>
@if($errors->any())
<div class="mt-3">
@foreach($errors->all() as $error)
<div class="ml-3">
<span
class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 inset-ring inset-ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:inset-ring-red-400/20">{{$error}}</span>
</div>
@endforeach
</div>
@endif
<x-form.form method="POST" action="{{ route('admin.auditions.bulkEdit') }}">
<div x-show="selectAuditionsForm" x-cloak>
@foreach($events as $event)
<x-card.card class="mb-3">
<x-card.heading>
{{ $event->name }}
<x-slot:right_side>
<x-form.button type="button" @click="checkAllCheckboxesByClass('event-{{$event->id}}')">Select all {{ $event->name }}</x-form.button>
</x-slot:right_side>
</x-card.heading>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-3">
@foreach($auditions[$event->id] as $audition)
<div>
<x-form.checkbox name="auditions[{{ $audition->id }}]" label="{{$audition->name}}" value="{{ $audition->id }}"
class="event-{{$event->id}}"/>
</div>
@endforeach
</div>
</x-card.card>
@endforeach
<x-form.button type="button" @click="selectAuditionsForm = false; newValuesForm = true">Edit Selected
Auditions
</x-form.button>
</div>
<div x-show="newValuesForm" x-cloak>
<x-card.card class="max-w-xl mx-auto" x-data="{ editName: false, editEvent: false, editDeadline: false, editFee: false, editMinGrade: false, editMaxGrade: false, editScope: false }">
<x-card.heading>Select Values to Edit</x-card.heading>
<div class="grid grid-cols-2 gap-4 p-3 border-b-2">
<div>
<x-form.checkbox name="editEvent" label="Edit Audition Event" x-model="editEvent"/>
</div>
<x-form.select name="event_id" x-show="editEvent" x-cloak>
<x-slot:label></x-slot:label>
@foreach($events as $event)
<option value="{{ $event->id }}">{{ $event->name }}</option>
@endforeach
</x-form.select>
</div>
<div class="grid grid-cols-2 gap-4 p-3 border-b-2">
<div>
<x-form.checkbox name="editDeadline" label="Edit Entry Deadline" x-model="editDeadline"/>
</div>
<x-form.field name="entry_deadline" type="date" x-cloak x-show="editDeadline"/>
</div>
<div class="grid grid-cols-2 gap-4 p-3 border-b-2">
<div>
<x-form.checkbox name="editFee" label="Edit Entry Fee" x-model="editFee"/>
</div>
<x-form.field name="entry_fee" type="number" placeholder="Enter New Entry Fee" x-cloak x-show="editFee" />
</div>
<div class="grid grid-cols-2 gap-4 p-3 border-b-2">
<div>
<x-form.checkbox name="editMinGrade" label="Edit Minimum Grade" x-model="editMinGrade"/>
</div>
<x-form.field name="minimum_grade" type="number" placeholder="Enter New Minimum Grade" x-cloak x-show="editMinGrade" />
</div>
<div class="grid grid-cols-2 gap-4 p-3 border-b-2">
<div>
<x-form.checkbox name="editMaxGrade" label="Edit Maximum Grade" x-model="editMaxGrade"/>
</div>
<x-form.field name="maximum_grade" type="number" placeholder="Enter New Maximum Grade " x-cloak x-show="editMaxGrade" />
</div>
@if(auditionSetting('advanceTo'))
<div class="grid grid-cols-2 gap-4 p-3 border-b-2">
<div>
<x-form.checkbox name="editScope" label="Edit Audition Scope" x-model="editScope"/>
</div>
<div class="grid grid-cols-2" x-show="editScope" x-cloak>
<div class="align-top">
<x-form.checkbox name="for_seating" label="For Seats" description="Students will be seated in this audition" checked />
</div>
<div class="align-top">
<x-form.checkbox name="for_advancement" label="For {{ auditionSetting('advanceTo') }}" description="Students compete for advancement" checked/>
</div>
</div>
</div>
@endif
</x-card.card>
</div>
<x-form.button x-cloak x-show="newValuesForm" class="mt-3 max-w-xl mx-auto">Submit Changes</x-form.button>
</x-form.form>
<script>
function checkAllCheckboxesByClass(className) {
const checkboxes = document.querySelectorAll(`input[type="checkbox"].${className}`);
checkboxes.forEach(checkbox => {
checkbox.checked = true;
});
}
</script>
</x-layout.app>