@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Edit Option for Question: {{ $option->question->text }}</h1>
        <x-ui.buttons.secondary href="{{ route('admin.questions.options.index', $option->question) }}" class="w-full sm:w-auto text-center">
            ← Back to Options
        </x-ui.buttons.secondary>
    </div>
    
    <x-ui.layout.card>
        <form action="{{ route('admin.options.update', $option) }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')
            
            <div>
                <x-ui.form.label for="text" value="Option Text" />
                <x-ui.form.textarea id="text" name="text" class="mt-1 block w-full" rows="4" required>{{ old('text', $option->text) }}</x-ui.form.textarea>
                <x-ui.form.error :messages="$errors->get('text')" />
            </div>
            
            <div>
                <x-ui.form.label for="is_correct" value="Is this the correct option?" />
                <div class="mt-1">
                    <x-ui.form.checkbox id="is_correct" name="is_correct" :checked="old('is_correct', $option->is_correct)" />
                </div>
                <x-ui.form.error :messages="$errors->get('is_correct')" />
            </div>
            
            <div class="flex justify-end space-x-4">
                <x-ui.buttons.secondary href="{{ route('admin.questions.options.index', $option->question) }}">
                    Cancel
                </x-ui.buttons.secondary>
                <x-ui.buttons.primary type="submit">
                    Update Option
                </x-ui.buttons.primary>
            </div>
        </form>
    </x-ui.layout.card>
</div>
@endsection