@extends('layouts.app')

@section('title', __('radio.requests') . ' - ' . 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.requests') }}</h2>
            
            @if(session('success'))
                <div class="bg-green-500 text-white p-4 rounded mb-4">
                    {{ session('success') }}
                </div>
            @endif

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

            <form action="{{ route('radio.requests.store') }}" method="POST" class="mb-8">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="artist" class="block text-sm font-medium text-gray-300">{{ __('radio.artist') }}</label>
                        <input type="text" name="artist" id="artist" required class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-300">{{ __('radio.title') }}</label>
                        <input type="text" name="title" id="title" required class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                </div>
                <div class="mt-4">
                    <label for="message" class="block text-sm font-medium text-gray-300">{{ __('radio.message') }}</label>
                    <input type="text" name="message" id="message" class="mt-1 block w-full rounded-md bg-gray-700 border-gray-600 text-white focus:border-indigo-500 focus:ring-indigo-500">
                </div>
                <div class="mt-4">
                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                        {{ __('radio.submit_request') }}
                    </button>
                </div>
            </form>

            @if(isset($recentRequests) && count($recentRequests) > 0)
                <h3 class="text-xl font-bold mb-4">{{ __('radio.queue') }}</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-gray-700 rounded-lg overflow-hidden">
                        <thead class="bg-gray-600">
                            <tr>
                                <th class="py-3 px-4 text-left">{{ __('radio.artist') }}</th>
                                <th class="py-3 px-4 text-left">{{ __('radio.title') }}</th>
                                <th class="py-3 px-4 text-left">{{ __('radio.requested_by') }}</th>
                                <th class="py-3 px-4 text-left">{{ __('radio.votes') }}</th>
                                <th class="py-3 px-4 text-left">{{ __('radio.vote') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentRequests as $request)
                                <tr class="border-b border-gray-600">
                                    <td class="py-3 px-4">{{ $request->artist }}</td>
                                    <td class="py-3 px-4">{{ $request->title }}</td>
                                    <td class="py-3 px-4">{{ $request->user->username ?? __('radio.unknown') }}</td>
                                    <td class="py-3 px-4">{{ $request->votes }}</td>
                                    <td class="py-3 px-4">
                                        <form action="{{ route('radio.requests.vote', $request) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="text-indigo-400 hover:text-indigo-300">{{ __('radio.vote') }}</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-gray-400">{{ __('radio.no_requests') }}</p>
            @endif
        </div>
    </div>
</div>
@endsection