96 lines
4.0 KiB
PHP
96 lines
4.0 KiB
PHP
<x-layout.app>
|
|
<x-slot:page_title>Rooms</x-slot:page_title>
|
|
<x-slot:title_bar_right><x-form.button href="/admin/rooms/create">New Room</x-form.button></x-slot:title_bar_right>
|
|
<div class="grid md:grid-cols-4 gap-5" x-data="roomManager()">
|
|
|
|
<div class="col-span-3"> {{-- Container for room cards --}}
|
|
<div class="grid md:grid-cols-3 gap-3">
|
|
|
|
@foreach($rooms as $room)
|
|
{{-- Room 0 should be at the end for unassigned auditions--}}
|
|
@if($room->id == '0')
|
|
@push('noRoom')
|
|
@endif
|
|
<x-card.card>
|
|
<x-card.heading>
|
|
{{ $room->name }}
|
|
<x-slot:subheading>{{ $room->description }}</x-slot:subheading>
|
|
<x-slot:right_side>
|
|
@if($room->entries->count() === 0 and $room->id != '0')
|
|
<div class="flex justify-end">
|
|
<x-form.form method="DELETE"
|
|
action="{{ route('admin.rooms.destroy', ['room'=>$room->id]) }}"
|
|
class="!px-0 -mr-6 -mt-2"
|
|
id="deleteResource">
|
|
<x-form.red-trash-button/>
|
|
</x-form.form>
|
|
</div>
|
|
@else
|
|
<x-badge_pill>{{ $room->entries->count() }}</x-badge_pill>
|
|
@endif
|
|
</x-slot:right_side>
|
|
</x-card.heading>
|
|
<x-card.list.body id="room-{{ $room->id }}" class="audition-list">
|
|
|
|
@foreach($room->auditions as $audition)
|
|
<x-card.list.row class="!py-3" data-id="{{ $audition->id }}">
|
|
<x-badge_pill>{{ $audition->entries->count() }}</x-badge_pill>
|
|
<x-card.list.row-text-subtext>{{ $audition->name }}</x-card.list.row-text-subtext>
|
|
</x-card.list.row>
|
|
@endforeach
|
|
|
|
</x-card.list.body>
|
|
|
|
</x-card.card>
|
|
@if($room->id == '0')
|
|
@endpush
|
|
@endif
|
|
@endforeach()
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div> {{-- Unassigned Auditions --}}
|
|
@stack('noRoom')
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function roomManager() {
|
|
return {
|
|
rooms: @json($rooms), // Pass rooms data from the controller
|
|
init() {
|
|
this.rooms.forEach(room => {
|
|
new Sortable(document.getElementById('room-' + room.id), {
|
|
group: 'shared',
|
|
animation: 150,
|
|
onEnd: this.updateOrder.bind(this)
|
|
});
|
|
});
|
|
},
|
|
updateOrder(event) {
|
|
let order = [];
|
|
event.to.querySelectorAll('li').forEach((el, index) => {
|
|
order.push({
|
|
id: el.dataset.id,
|
|
room_id: event.to.id.split('-')[1],
|
|
room_order: index
|
|
});
|
|
});
|
|
|
|
fetch('/admin/auditions/roomUpdate', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify(order)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</x-layout.app>
|