Before Apline

app/View/Components/Layout/Admin.php

@@ -32,6 +32,10 @@ class Admin extends Component
                 'name' => 'Site Data',
                 'link' => route('admin.site-data.index'),
             ],
+            [
+                'name' => 'Audition Etudes',
+                'link' => route('admin.etudes.index'),
+            ],
         ];
     }
 

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

@@ -1,3 +1,38 @@
 <x-layout.admin>
-    Create Audition Etude
+    <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') }}">
+                <div>
+                    <x-form.select name="auditioned_ensemble_id">
+                        <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">
+                        <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>
+            </x-form.form>
+        </x-slot:body>
+    </x-card>
+    <script>
+        let ensembles = {
+            @foreach($ensembles as $ensemble)
+                {{ $ensemble->id }}: {
+                id: {{ $enemble->id }},
+                name: {{ $ensemble->name }},
+                setCount: {{ $ensemble->set_count }}
+            }
+            @endforeach
+        };
+    </script>
 </x-layout.admin>

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

@@ -1,3 +1,4 @@
 <x-layout.admin>
-    Audition Etude Index
+    <x-form.button href="{{ route('admin.etudes.create') }}" type="link">Add Etude</x-form.button>
+    <p>Audition Etude Index</p>
 </x-layout.admin>

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

@@ -1,15 +1,22 @@
 @props(['size' => 3, 'type' => 'button'])
 
-<button
-    type="{{ $type }}"
-    {{ $attributes->class([
+@php
+    $classes = [
         'bg-brand-600 font-semibold text-white shadow-xs hover:bg-brand-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-600 dark:bg-brand-500 dark:shadow-none dark:hover:bg-brand-400 dark:focus-visible:outline-brand-500',
         'rounded-sm px-2 py-1 text-xs' => $size == 1,
         'rounded-sm px-2 py-1 text-sm' => $size == 2,
         'rounded-md px-2.5 py-1.5 text-sm' => $size == 3,
         'rounded-md px-3 py-2 text-sm' => $size == 4,
         'rounded-md px-3.5 py-2.5 text-sm' => $size == 5,
-    ]) }}
->
-    {{ $slot }}
-</button>
+    ];
+@endphp
+
+@if($type === 'link')
+    <a {{ $attributes->class($classes) }}>
+        {{ $slot }}
+    </a>
+@else
+    <button type="{{ $type }}" {{ $attributes->class($classes) }}>
+        {{ $slot }}
+    </button>
+@endif

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

@@ -0,0 +1,10 @@
+@props(['id', 'name', 'label'])
+<label for="{{ $id ?? $name }}" class="" {{ $label->attributes->merge(['class'=>'block text-sm/6 font-medium text-gray-900 dark:text-white']) }}>{{ $label }}</label>
+<div class="mt-2 grid grid-cols-1">
+    <select id="{{ $id ?? $name }}" name="{{ $name }}" {{ $attributes->merge(['class' => 'col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus-visible:outline-indigo-500']) }}>
+        {{ $slot }}
+    </select>
+    <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
+        <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
+    </svg>
+</div>

routes/web.php

@@ -3,6 +3,7 @@
 use App\Http\Controllers\Admin\DashboardController;
 use App\Http\Controllers\Admin\SiteDataController;
 use App\Http\Controllers\Admin\UsersController;
+use App\Http\Controllers\AuditionEtudeController;
 use App\Http\Controllers\AuditionInformationPageController;
 use App\Http\Controllers\ClinicInformationPageController;
 use App\Http\Controllers\WelcomeController;
@@ -21,4 +22,5 @@ Route::middleware(['auth'])->prefix('admin')->name('admin.')->group(function ()
     Route::prefix('/users')->name('users.')->group(function () {
         Route::get('/', [UsersController::class, 'index'])->name('index');
     });
+    Route::resource('/etudes', AuditionEtudeController::class)->names('etudes');
 });