@extends('admin.layouts.app')
@section('title', 'FAQs')
@section('heading', 'Frequently Asked Questions')

@section('content')
<div class="page-actions">
    <p class="muted" style="font-size:.9rem;">Manage FAQs displayed on the site. Sorted by order field, then ID.</p>
</div>

{{-- Add form --}}
<div class="card">
    <div class="section-header">
        <i class="fa-solid fa-circle-question"></i>
        <div><h3>Add FAQ</h3><p>Add a new question and answer</p></div>
    </div>
    <form method="POST" action="{{ route('admin.faqs.store') }}">
        @csrf
        <div class="form-field">
            <label>Question <span class="req">*</span></label>
            <input type="text" name="question" required value="{{ old('question') }}" placeholder="e.g. Do you offer size exchange?">
        </div>
        <div class="form-field" style="margin-top:.75rem;">
            <label>Answer <span class="req">*</span></label>
            <textarea name="answer" rows="4" required placeholder="Detailed answer...">{{ old('answer') }}</textarea>
        </div>
        <div class="form-row" style="margin-top:.75rem;">
            <div class="form-field">
                <label>Sort Order</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
            </div>
            <div class="form-field" style="justify-content:flex-end; padding-top:.25rem;">
                <label>Active</label>
                <label class="toggle-switch" style="margin-top:.5rem;">
                    <input type="checkbox" name="active" value="1" checked>
                    <span class="toggle-track"></span>
                    <span style="margin-left:.6rem; font-size:.875rem; color:#374151;">Visible on site</span>
                </label>
            </div>
        </div>
        <div style="margin-top:1rem;">
            <button class="adm-btn adm-btn-primary"><i class="fa-solid fa-plus"></i> Add FAQ</button>
        </div>
    </form>
</div>

@if($faqs->isEmpty())
    <div class="empty-state">
        <i class="fa-solid fa-circle-question"></i>
        <h3>No FAQs yet</h3>
        <p>Add your first FAQ above.</p>
    </div>
@else
    <div class="card" style="padding:0; overflow:hidden;">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Question</th>
                    <th>Answer</th>
                    <th style="width:70px;">Order</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($faqs as $faq)
                <tr>
                    <td style="max-width:250px;">
                        <strong style="font-size:.9rem;">{{ $faq->question }}</strong>
                    </td>
                    <td style="max-width:350px;">
                        <span style="font-size:.85rem; color:#374151; line-height:1.5;">{{ Str::limit($faq->answer, 120) }}</span>
                    </td>
                    <td><span class="chip">{{ $faq->sort_order }}</span></td>
                    <td>
                        @if($faq->active)
                            <span class="badge badge-delivered">Active</span>
                        @else
                            <span class="badge badge-cancelled">Hidden</span>
                        @endif
                    </td>
                    <td>
                        <div class="actions-row">
                            <button class="adm-btn adm-btn-warn" onclick="toggleEditFaq({{ $faq->id }})"><i class="fa-solid fa-pen"></i></button>
                            <form method="POST" action="{{ route('admin.faqs.destroy', $faq) }}" onsubmit="return confirm('Delete this FAQ?');" style="display:inline;">
                                @csrf @method('DELETE')
                                <button class="adm-btn adm-btn-danger"><i class="fa-solid fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                <tr id="edit-faq-{{ $faq->id }}" style="display:none; background:#f8fafc;">
                    <td colspan="5" style="padding:1.25rem;">
                        <form method="POST" action="{{ route('admin.faqs.update', $faq) }}">
                            @csrf @method('PUT')
                            <div class="form-field">
                                <label>Question <span class="req">*</span></label>
                                <input type="text" name="question" required value="{{ $faq->question }}">
                            </div>
                            <div class="form-field" style="margin-top:.75rem;">
                                <label>Answer <span class="req">*</span></label>
                                <textarea name="answer" rows="4" required>{{ $faq->answer }}</textarea>
                            </div>
                            <div class="form-row" style="margin-top:.75rem;">
                                <div class="form-field">
                                    <label>Sort Order</label>
                                    <input type="number" name="sort_order" value="{{ $faq->sort_order }}" min="0">
                                </div>
                                <div class="form-field" style="padding-top:.25rem;">
                                    <label>Active</label>
                                    <label class="toggle-switch" style="margin-top:.5rem;">
                                        <input type="checkbox" name="active" value="1" {{ $faq->active ? 'checked' : '' }}>
                                        <span class="toggle-track"></span>
                                        <span style="margin-left:.6rem; font-size:.875rem; color:#374151;">Visible</span>
                                    </label>
                                </div>
                            </div>
                            <div style="display:flex; gap:.5rem; margin-top:.85rem;">
                                <button class="adm-btn adm-btn-primary"><i class="fa-solid fa-check"></i> Save Changes</button>
                                <button type="button" class="adm-btn adm-btn-ghost" onclick="toggleEditFaq({{ $faq->id }})"><i class="fa-solid fa-xmark"></i> Cancel</button>
                            </div>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

@push('scripts')
<script>
function toggleEditFaq(id) {
    var row = document.getElementById('edit-faq-' + id);
    var allRows = document.querySelectorAll('[id^="edit-faq-"]');
    allRows.forEach(function(r) { if (r !== row) r.style.display = 'none'; });
    row.style.display = row.style.display === 'none' ? 'table-row' : 'none';
}
</script>
@endpush
@endsection