68 lines
2.8 KiB
PHP
68 lines
2.8 KiB
PHP
<x-layout.app>
|
|
<x-slot:page_title>Ensembles</x-slot:page_title>
|
|
<x-slot:title_bar_right>@include('admin.ensembles.index-help-modal')</x-slot:title_bar_right>
|
|
<x-card.card class="mb-6 mx-auto max-w-lg">
|
|
<x-card.heading>Create New Ensemble</x-card.heading>
|
|
<x-form.form method="POST" action="{{ route('admin.ensembles.store') }}">
|
|
<x-form.body-grid columns="3" class="mb-5">
|
|
<x-form.field name="name" label_text="Name" colspan="2" />
|
|
<x-form.field name="code" label_text="Code" colspan="1" />
|
|
<x-form.select name="event_id" colspan="2">
|
|
<x-slot:label>Event</x-slot:label>
|
|
<option disabled selected>Select Event</option>
|
|
@foreach($events as $event)
|
|
<option value="{{ $event->id }}" class="text-gray-500">{{ $event->name }}</option>
|
|
@endforeach
|
|
</x-form.select>
|
|
<x-form.button class="mt-6">Create</x-form.button>
|
|
|
|
</x-form.body-grid>
|
|
</x-form.form>
|
|
</x-card.card>
|
|
<div id="app">
|
|
@foreach($events as $event)
|
|
@include('admin.ensembles.index-event-table')
|
|
@endforeach
|
|
</div>
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const tables = document.querySelectorAll('.sortable-table');
|
|
|
|
tables.forEach(table => {
|
|
new Sortable(table.querySelector('tbody'), {
|
|
handle: '.handle',
|
|
animation: 150,
|
|
onEnd: function (evt) {
|
|
const rows = Array.from(evt.from.children);
|
|
const order = rows.map((row, index) => ({
|
|
id: row.dataset.id,
|
|
rank: index + 1
|
|
}));
|
|
|
|
// Send the new order to the server
|
|
fetch('/admin/ensembles/updateEnsembleRank', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({
|
|
event_id: table.id.split('-')[1],
|
|
order: order
|
|
})
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
console.log('Success:', data);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</x-layout.app>
|