Atomcms-edit/resources/themes/atom/views/community/radio/apply.blade.php

<x-app-layout>
 @push('title', 'Word DJ')

 <div class="col-span-12 lg:col-span-9 lg:w-[96%]">
 <div class="flex flex-col gap-y-4">
 <x-content.content-card icon="star-icon" classes="border dark:border-gray-900">
 <x-slot:title>
 Word DJ
 </x-slot:title>

 <x-slot:under-title>
 Solliciteer als DJ bij {{ setting('hotel_name') }} Radio!
 </x-slot:under-title>

 <div class="px-2 text-sm space-y-4 dark:text-gray-200">
 @if (session('success'))
 <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
 {{ session('success') }}
 </div>
 @endif

 @if (session('error'))
 <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
 {{ session('error') }}
 </div>
 @endif

 @if ($errors->any())
 <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
 <ul class="list-disc list-inside">
 @foreach ($errors->all() as $error)
 <li>{{ $error }}</li>
 @endforeach
 </ul>
 </div>
 @endif

 @if ($hasPendingApplication)
 <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
 <p class="font-bold">Je hebt al een openstaande aanmelding!</p>
 <p>Je kunt pas een nieuwe aanmelding doen als je huidige aanmelding is beoordeeld.</p>
 </div>
 @else
 <p>Heb je passie voor muziek en wil je onze community entertainen? Solliciteer dan nu als DJ!</p>

 <form action="{{ route('radio.apply.store') }}" method="POST" class="space-y-4">
 @csrf

 <!-- Persoonlijke Gegevens -->
 <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
 <h3 class="font-bold text-[var(--color-primary)] mb-3 text-lg">Persoonlijke Gegevens</h3>
 
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div>
 <label for="real_name" class="block text-sm font-medium dark:text-gray-300 mb-1">
 Echte Naam <span class="text-red-500">*</span>
 </label>
 <input 
 type="text" 
 id="real_name" 
 name="real_name" 
 required
 value="{{ old('real_name') }}"
 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
 placeholder="Je echte naam">
 </div>

 <div>
 <label for="age" class="block text-sm font-medium dark:text-gray-300 mb-1">
 Leeftijd <span class="text-red-500">*</span>
 </label>
 <input 
 type="number" 
 id="age" 
 name="age" 
 required
 min="13"
 max="100"
 value="{{ old('age') }}"
 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
 placeholder="Je leeftijd">
 </div>
 </div>
 </div>

 <!-- DJ Gegevens -->
 <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
 <h3 class="font-bold text-[var(--color-primary)] mb-3 text-lg">DJ Gegevens</h3>

 <div class="space-y-4">
 <div>
 <label for="availability" class="block text-sm font-medium dark:text-gray-300 mb-1">
 Beschikbaarheid <span class="text-red-500">*</span>
 </label>
 <textarea 
 id="availability" 
 name="availability" 
 rows="3" 
 required
 minlength="10"
 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
 placeholder="Wanneer kan je draaien? (bijv. maandag 20:00-22:00, woensdag 19:00-21:00)">{{ old('availability') }}</textarea>
 <p class="text-xs text-gray-500 mt-1">Geef aan op welke dagen en tijden je beschikbaar bent om te draaien.</p>
 </div>

 <div>
 <label for="experience" class="block text-sm font-medium dark:text-gray-300 mb-1">
 Ervaring
 </label>
 <textarea 
 id="experience" 
 name="experience" 
 rows="3"
 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
 placeholder="Heb je ervaring als DJ? Zo ja, vertel erover...">{{ old('experience') }}</textarea>
 <p class="text-xs text-gray-500 mt-1">Heb je eerder als DJ gewerkt? Bijvoorbeeld op andere hotels of radio stations.</p>
 </div>

 <div>
 <label for="motivation" class="block text-sm font-medium dark:text-gray-300 mb-1">
 Motivatie <span class="text-red-500">*</span>
 </label>
 <textarea 
 id="motivation" 
 name="motivation" 
 rows="5" 
 required
 minlength="50"
 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
 placeholder="Waarom wil je DJ worden bij ons? Vertel ons waarom we jou moeten kiezen...">{{ old('motivation') }}</textarea>
 <p class="text-xs text-gray-500 mt-1">Minimaal 50 karakters. Wees zo uitgebreid mogelijk!</p>
 </div>

 <div>
 <label for="music_style" class="block text-sm font-medium dark:text-gray-300 mb-1">
 Muziekstijl
 </label>
 <textarea 
 id="music_style" 
 name="music_style" 
 rows="2"
 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
 placeholder="Welke muziekstijl draai je graag? (bijv. Pop, EDM, Hip-Hop, etc.)">{{ old('music_style') }}</textarea>
 </div>

 <div>
 <label for="discord_username" class="block text-sm font-medium dark:text-gray-300 mb-1">
 Discord Gebruikersnaam
 </label>
 <input 
 type="text" 
 id="discord_username" 
 name="discord_username"
 value="{{ old('discord_username') }}"
 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white"
 placeholder="bijv. gebruiker#1234">
 <p class="text-xs text-gray-500 mt-1">Voor contact over je aanmelding.</p>
 </div>

 <div>
 <label for="rank_id" class="block text-sm font-medium dark:text-gray-300 mb-1">
 Gewenste DJ Rank
 </label>
 <select 
 id="rank_id" 
 name="rank_id"
 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] dark:bg-gray-700 dark:border-gray-600 dark:text-white">
 <option value="">-- Kies een rank (optioneel) --</option>
 @foreach ($ranks as $rank)
 <option value="{{ $rank->id }}" {{ old('rank_id') == $rank->id ? 'selected' : '' }}>
 {{ $rank->name }}
 </option>
 @endforeach
 </select>
 </div>
 </div>
 </div>

 <div class="flex gap-2">
 <button type="submit" class="flex-1 bg-[var(--color-primary)] hover:bg-[var(--color-primary)] text-white px-6 py-3 rounded transition font-bold">
 Verstuur Aanmelding
 </button>
 <a href="{{ route('radio.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-3 rounded transition">
 Annuleren
 </a>
 </div>
 </form>
 @endif
 </div>
 </x-content.content-card>
 </div>
 </div>

 <div class="col-span-12 lg:col-span-3 lg:w-[110%] space-y-4 lg:-ml-[32px]">
 <x-content.content-card icon="info-icon" classes="border dark:border-gray-900">
 <x-slot:title>
 DJ Info
 </x-slot:title>

 <x-slot:under-title>
 Waarom word DJ?
 </x-slot:under-title>

 <div class="px-2 text-sm space-y-4 dark:text-gray-200">
 <p>Als DJ bij {{ setting('hotel_name') }} Radio krijg je de kans om je favoriete muziek te delen met de community.</p>
 
 <div class="space-y-2 text-xs">
 <p><strong class="text-[var(--color-primary)]">Voordelen:</strong></p>
 <ul class="list-disc list-inside space-y-1">
 <li>Eigen radioshow</li>
 <li>Leuke community</li>
 <li>Ervaring opdoen</li>
 <li>Events draaien</li>
 </ul>
 </div>

 <p class="text-xs text-gray-500">We zoeken naar gepassioneerde muziekliefhebbers!</p>
 </div>
 </x-content.content-card>

 <x-content.content-card icon="musical-note-icon" classes="border dark:border-gray-900">
 <x-slot:title>
 Beschikbare Ranks
 </x-slot:title>

 <x-slot:under-title>
 DJ Ranks
 </x-slot:under-title>

 <div class="px-2 text-sm space-y-2 dark:text-gray-200">
 @forelse ($ranks as $rank)
 <div class="flex items-center gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded">
 @if ($rank->badge_code)
 <img src="{{ sprintf(setting('badge_imaging_path'), $rank->badge_code) }}" alt="" class="w-6 h-6">
 @endif
 <span>{{ $rank->name }}</span>
 </div>
 @empty
 <p class="text-gray-500">Momenteel geen ranks beschikbaar.</p>
 @endforelse
 </div>
 </x-content.content-card>
 </div>
</x-app-layout>