meobda-website/resources/views/admin/audition_etude/create.blade.php

49 lines
2.4 KiB
PHP

<x-layout.admin>
<x-card class="max-w-xl mx-auto">
<x-slot:header class="bg-brand-600!">New Etude</x-slot:header>
<x-slot:body class="bg-white border border-brand-600">
<x-form.form method="POST" action="{{ route('admin.etudes.store') }}" x-data="{ selectedEnsemble: '', selectedInstrument: '', selectedSetNumber: '' }">
<div>
<x-form.select name="auditioned_ensemble_id" x-model="selectedEnsemble">
<x-slot:label>Ensemble</x-slot:label>
<option value="">Select Ensemble...</option>
@foreach($ensembles as $ensemble)
<option value="{{ $ensemble->id }}">{{ $ensemble->name }}</option>
@endforeach
</x-form.select>
</div>
<div class="mt-3">
<x-form.select name="instrument_id" x-model="selectedInstrument">
<option value="">Select Instrument...</option>
<x-slot:label>Instrument</x-slot:label>
@foreach($instruments as $instrument)
<option value="{{ $instrument->id }}">{{ $instrument->instrument }}</option>
@endforeach
</x-form.select>
</div>
<div class="mt-3" x-show="selectedEnsemble" x-cloak x-model="selectedSetNumber">
<x-form.input name="set" label="Set Number" type="number" min="1" x-bind:max="selectedEnsemble ? getSetCount(selectedEnsemble) : ''" />
</div>
<div class="mt-3" x-show="selectedEnsemble && selectedInstrument && selectedSetNumber" x-cloak>
<x-form.input name="file" type="file" label="Etude PDF" />
</div>
</x-form.form>
</x-slot:body>
</x-card>
<script>
let ensembles = {
@foreach($ensembles as $ensemble)
{{ $ensemble->id }}: {
id: {{ $ensemble->id }},
name: '{{ $ensemble->name }}',
setCount: {{ $ensemble->set_count }}
},
@endforeach
};
function getSetCount(ensembleId) {
// noinspection JSUnresolvedVariable
return ensembles[ensembleId]?.setCount || '';
}
</script>
</x-layout.admin>