@extends('layouts.app')

@section('title', __('radio.become_dj') . ' - ' . config('app.name'))

@section('content')
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    <div class="bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-white">
            <h2 class="text-2xl font-bold mb-4">{{ __('radio.become_dj') }}</h2>

            @if(session('success'))
                <div class="bg-green-500 text-white p-4 rounded mb-4">
                    {{ session('success') }}
                </div>
            @endif

            @if($errors->any())
                <div class="bg-red-500 text-white p-4 rounded mb-4">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if(isset($hasPendingApplication) && $hasPendingApplication)
                <div class="bg-blue-500 text-white p-4 rounded">
                    {{ __('radio.application_pending') }}
                </div>
            @else
                <form action="{{ route('radio.apply.store') }}" method="POST">
                    @csrf
                    
                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <label for="real_name" class="block text-sm font-medium text-gray-300">{{ __('radio.real_name') }}</label>
                            <input type="text" name="real_name" id="real_name" required class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white">
                        </div>

                        <div>
                            <label for="age" class="block text-sm font-medium text-gray-300">{{ __('radio.age') }}</label>
                            <input type="number" name="age" id="age" required min="13" max="99" class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white">
                        </div>

                        <div>
                            <label for="discord_username" class="block text-sm font-medium text-gray-300">{{ __('radio.discord') }}</label>
                            <input type="text" name="discord_username" id="discord_username" class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white">
                        </div>

                        <div>
                            <label for="experience" class="block text-sm font-medium text-gray-300">{{ __('radio.experience') }}</label>
                            <textarea name="experience" id="experience" rows="3" class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white"></textarea>
                        </div>

                        <div>
                            <label for="music_style" class="block text-sm font-medium text-gray-300">{{ __('radio.music_style') }}</label>
                            <textarea name="music_style" id="music_style" rows="2" class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white"></textarea>
                        </div>

                        <div>
                            <label for="availability" class="block text-sm font-medium text-gray-300">{{ __('radio.availability') }}</label>
                            <textarea name="availability" id="availability" required rows="2" class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white"></textarea>
                        </div>

                        <div>
                            <label for="motivation" class="block text-sm font-medium text-gray-300">{{ __('radio.motivation') }}</label>
                            <textarea name="motivation" id="motivation" required rows="4" class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white"></textarea>
                        </div>

                        <div>
                            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                                {{ __('radio.send_application') }}
                            </button>
                        </div>
                    </div>
                </form>
            @endif
        </div>
    </div>
</div>
@endsection