Add create form.

package-lock.json

@@ -5,7 +5,8 @@
     "packages": {
         "": {
             "dependencies": {
-                "@tailwindplus/elements": "^1.0.20"
+                "@tailwindplus/elements": "^1.0.20",
+                "alpinejs": "^3.15.3"
             },
             "devDependencies": {
                 "@tailwindcss/vite": "^4.0.0",
@@ -1101,6 +1102,30 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@vue/reactivity": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+            "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/shared": "3.1.5"
+            }
+        },
+        "node_modules/@vue/shared": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+            "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
+            "license": "MIT"
+        },
+        "node_modules/alpinejs": {
+            "version": "3.15.3",
+            "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.15.3.tgz",
+            "integrity": "sha512-fSI6F5213FdpMC4IWaup92KhuH3jBX0VVqajRJ6cOTCy1cL6888KyXdGO+seAAkn+g6fnrxBqQEx6gRpQ5EZoQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/reactivity": "~3.1.1"
+            }
+        },
         "node_modules/ansi-regex": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

package.json

@@ -15,6 +15,7 @@
         "vite": "^7.0.7"
     },
     "dependencies": {
-        "@tailwindplus/elements": "^1.0.20"
+        "@tailwindplus/elements": "^1.0.20",
+        "alpinejs": "^3.15.3"
     }
 }

resources/js/app.js

@@ -1,2 +1,7 @@
 import './bootstrap';
 import '@tailwindplus/elements';
+import Alpine from 'alpinejs';
+
+window.Alpine = Alpine;
+
+Alpine.start();

resources/views/admin/audition_etude/create.blade.php

@@ -2,9 +2,9 @@
     <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-form.form method="POST" action="{{ route('admin.etudes.store') }}" x-data="{ selectedEnsemble: '', selectedInstrument: '', selectedSetNumber: '' }">
                 <div>
-                    <x-form.select name="auditioned_ensemble_id">
+                    <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)
@@ -13,7 +13,7 @@
                     </x-form.select>
                 </div>
                 <div class="mt-3">
-                    <x-form.select name="instrument_id">
+                    <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)
@@ -21,6 +21,12 @@
                         @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>
@@ -28,11 +34,15 @@
         let ensembles = {
             @foreach($ensembles as $ensemble)
                 {{ $ensemble->id }}: {
-                id: {{ $enemble->id }},
+                id: {{ $ensemble->id }},
-                name: {{ $ensemble->name }},
+                name: '{{ $ensemble->name }}',
                 setCount: {{ $ensemble->set_count }}
-            }
+            },
             @endforeach
         };
+        function getSetCount(ensembleId) {
+            // noinspection JSUnresolvedVariable
+            return ensembles[ensembleId]?.setCount || '';
+        }
     </script>
 </x-layout.admin>

resources/views/components/form/input.blade.php

@@ -4,7 +4,7 @@
     $hasError = $errors->has($name);
 @endphp
 
-<div {{ $attributes }}>
+<div>
     @if(isset($label) && is_object($label))
         <label for="{{ $id ?? $name }}" {{ $label->attributes->merge(['class' => 'block text-sm/6 font-medium text-gray-900 dark:text-white']) }}>
             {{ $label }}
@@ -23,11 +23,11 @@
             value="{{ old($name, $value) }}"
             placeholder="{{ $placeholder }}"
             @if($hasError) aria-invalid="true" aria-describedby="{{ $id ?? $name }}-error" @endif
-            @class([
+            {{ $attributes->class([
                 'block w-full rounded-md bg-white py-1.5 outline-1 -outline-offset-1 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 dark:bg-white/5',
                 'col-start-1 row-start-1 pr-10 pl-3 text-red-900 outline-red-300 placeholder:text-red-300 focus:outline-red-600 sm:pr-9 dark:text-red-400 dark:outline-red-500/50 dark:placeholder:text-red-400/70 dark:focus:outline-red-400' => $hasError,
                 'px-3 text-base text-gray-900 outline-gray-300 placeholder:text-gray-400 focus:outline-brand-600 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-brand-500' => !$hasError,
-            ])
+            ]) }}
         />
 
         @if($hasError)