<?php

use Livewire\Component;
use App\Models\Faq;

new class extends Component
{
    public $question = '';
    public $answer = '';
    public $sort_order = 0;
    public $status = 'published';

    public function render()
    {
        return $this->view()->layout('layouts::auth');
    }

    public function save()
    {
        $this->validate([
            'question' => 'required|min:5',
            'answer' => 'required|min:10',
            'sort_order' => 'required|integer',
            'status' => 'required|in:draft,published',
        ]);

        Faq::create([
            'question' => $this->question,
            'answer' => $this->answer,
            'sort_order' => $this->sort_order,
            'status' => $this->status,
        ]);

        session()->flash('message', 'FAQ created successfully.');
        return $this->redirect(route('admin.faqs'), navigate: true);
    }
};
?>

<div class="max-content">
    <header class="flex justify-between items-center mb-10">
        <div>
            <h1 class="text-2xl font-semibold tracking-tight">Add New FAQ</h1>
            <p class="text-sm text-gray-500 mt-1">Create a new question and answer pair for the About page.</p>
        </div>
        <a href="{{ route('admin.faqs') }}" wire:navigate class="btn-secondary text-xs">Back to FAQs</a>
    </header>

    <form wire:submit.prevent="save" class="space-y-8">
        <div class="card p-8 space-y-6">
            <div>
                <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Question</label>
                <input type="text" wire:model="question" class="input-field w-full text-lg font-medium" placeholder="e.g. How can I join as a partner?" required>
                @error('question') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Answer</label>
                <textarea wire:model="answer" rows="6" class="input-field w-full resize-none text-base" placeholder="Provide a clear, detailed answer..." required></textarea>
                @error('answer') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Display Order</label>
                    <input type="number" wire:model="sort_order" class="input-field w-full" placeholder="e.g. 1">
                    <p class="text-[10px] text-gray-400 mt-2 italic">Higher numbers appear lower in the list.</p>
                    @error('sort_order') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
                <div>
                    <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Status</label>
                    <select wire:model="status" class="input-field w-full">
                        <option value="published">Published</option>
                        <option value="draft">Draft</option>
                    </select>
                    @error('status') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('admin.faqs') }}" wire:navigate class="px-8 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-50 transition-colors">Cancel</a>
            <button type="submit" wire:loading.attr="disabled" class="px-10 py-2 bg-sage text-white text-sm font-medium rounded-md hover:bg-sage-dark transition-colors" style="background-color: #99BC85;">
                <span wire:loading.remove wire:target="save">Create FAQ</span>
                <span wire:loading wire:target="save">Creating...</span>
            </button>
        </div>
    </form>
</div>
