53 lines
2.2 KiB
PHP
53 lines
2.2 KiB
PHP
<div x-data="sortableData()">
|
|
@foreach($guides as $guide)
|
|
<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>
|
|
@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('/update-audition-guide', {
|
|
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>
|