82 lines
3.5 KiB
PHP
82 lines
3.5 KiB
PHP
<div x-data="sortableData()">
|
|
{{-- Unassigned auditions first --}}
|
|
@php($guide = $guides->find(0))
|
|
<x-card.card class="mb-4">
|
|
<x-card.heading>{{ $guide->name }}</x-card.heading>
|
|
|
|
<div class="grid md:grid-cols-4 sm:grid-cols-2 mx-6 gap-2 mt-3 mb-3 guide-list" id="guide-{{ $guide->id }}" data-guide-id="{{ $guide->id }}">
|
|
@foreach($guide->auditions as $audition)
|
|
<div class="px-3 py-3 border border-indigo-300 bg-gray-100" data-id="{{ $audition->id }}">{{ $audition->name }}</div>
|
|
@endforeach
|
|
</div>
|
|
</x-card.card>
|
|
|
|
|
|
@foreach($guides as $guide)
|
|
@continue($guide->id === 0)
|
|
<x-card.card class="mb-4">
|
|
<x-card.heading>
|
|
{{ $guide->name }}
|
|
@if($guide->auditions()->count() === 0)
|
|
<x-slot:right_side>
|
|
<x-form.form method="DELETE"
|
|
action="{{route('admin.scoring.destroy', ['guide'=>$guide->id])}}"
|
|
class="!pr-0 !-mr-6 !-mt-2">
|
|
<x-form.red-trash-button type="submit"/>
|
|
</x-form.form>
|
|
</x-slot:right_side>
|
|
@endif
|
|
</x-card.heading>
|
|
|
|
<div class="grid md:grid-cols-4 sm:grid-cols-2 mx-6 gap-2 mt-3 mb-3 guide-list" id="guide-{{ $guide->id }}" data-guide-id="{{ $guide->id }}">
|
|
@foreach($guide->auditions as $audition)
|
|
<div class="px-3 py-3 border border-indigo-300 bg-gray-100" data-id="{{ $audition->id }}">{{ $audition->name }}</div>
|
|
@endforeach
|
|
</div>
|
|
</x-card.card>
|
|
@endforeach
|
|
</div>
|
|
|
|
<script>
|
|
function sortableData() {
|
|
return {
|
|
init() {
|
|
this.initSortable();
|
|
},
|
|
initSortable() {
|
|
document.querySelectorAll('.guide-list').forEach((el) => {
|
|
Sortable.create(el, {
|
|
group: 'shared',
|
|
animation: 150,
|
|
onEnd: (evt) => {
|
|
let itemEl = evt.item; // dragged HTMLElement
|
|
let newGuideId = evt.to.getAttribute('data-guide-id');
|
|
let auditionId = itemEl.getAttribute('data-id');
|
|
|
|
// Make an AJAX request to update the audition_guide_id
|
|
fetch('{{route('ajax.assignScoringGuideToAudition')}}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({
|
|
audition_id: auditionId,
|
|
new_guide_id: newGuideId
|
|
})
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
console.log('Audition updated successfully');
|
|
} else {
|
|
console.error('Failed to update audition');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|