@props(['faq' => null, 'nextSortOrder' => 0])

<div class="mb-3">
    <label for="question" class="form-label">Question</label>
    <input
        type="text"
        name="question"
        id="question"
        class="form-control @error('question') is-invalid @enderror"
        value="{{ old('question', $faq->question ?? '') }}"
        maxlength="255"
        required
    >
    @error('question')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

<div class="mb-3">
    <label for="answer" class="form-label">Answer</label>
    <textarea
        name="answer"
        id="answer"
        class="form-control @error('answer') is-invalid @enderror"
        rows="5"
        maxlength="5000"
        required
    >{{ old('answer', $faq->answer ?? '') }}</textarea>
    <div class="form-text">Plain text. Keep answers short and specific — this is the first thing a prospective client reads.</div>
    @error('answer')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

<div class="row">
    <div class="col-md-8 mb-3">
        <label for="category" class="form-label">Group <span class="text-muted">(optional)</span></label>
        <input
            type="text"
            name="category"
            id="category"
            class="form-control @error('category') is-invalid @enderror"
            value="{{ old('category', $faq->category ?? '') }}"
            placeholder="e.g. Pricing, Process, Support"
            maxlength="100"
        >
        @error('category')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4 mb-3">
        <label for="sort_order" class="form-label">Sort Order</label>
        <input
            type="number"
            name="sort_order"
            id="sort_order"
            class="form-control @error('sort_order') is-invalid @enderror"
            value="{{ old('sort_order', $faq->sort_order ?? $nextSortOrder) }}"
            min="0"
            max="9999"
        >
        @error('sort_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

<fieldset class="mb-3">
    <legend class="form-label fs-6">Show this question on</legend>
    <div class="form-check">
        <input type="checkbox" name="show_on_homepage" id="show_on_homepage" class="form-check-input" value="1" @checked(old('show_on_homepage', $faq->show_on_homepage ?? true))>
        <label for="show_on_homepage" class="form-check-label">Homepage FAQ section</label>
    </div>
    <div class="form-check">
        <input type="checkbox" name="show_on_services" id="show_on_services" class="form-check-input" value="1" @checked(old('show_on_services', $faq->show_on_services ?? false))>
        <label for="show_on_services" class="form-check-label">Services page</label>
    </div>
    <div class="form-check">
        <input type="checkbox" name="show_on_contact" id="show_on_contact" class="form-check-input" value="1" @checked(old('show_on_contact', $faq->show_on_contact ?? false))>
        <label for="show_on_contact" class="form-check-label">Contact page</label>
    </div>
</fieldset>

<div class="form-check mb-4">
    <input type="checkbox" name="is_visible" id="is_visible" class="form-check-input" value="1" @checked(old('is_visible', $faq->is_visible ?? true))>
    <label for="is_visible" class="form-check-label">Visible on the public site</label>
</div>