@extends('admin.templates.layout')

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{ $faq ? 'Edit FAQ' : 'Create FAQ' }}</h4>
            </div>
            <div class="card-body">
                <form id="faq-form" action="{{ route('admin.faqs.store') }}" method="POST">
                    @csrf
                    @if($faq)
                        <input type="hidden" name="id" value="{{ $faq->id }}">
                    @endif
                    <div class="row gy-4">
                        <div class="col-xxl-12 col-md-12">
                            <div>
                                <label for="question" class="form-label">Question</label>
                                <input type="text" class="form-control" id="question" name="question" value="{{ $faq ? $faq->question : '' }}" required>
                            </div>
                        </div>
                        <div class="col-xxl-12 col-md-12">
                            <div>
                                <label for="answer" class="form-label">Answer</label>
                                <textarea class="form-control" id="answer" name="answer" rows="4" required>{{ $faq ? $faq->answer : '' }}</textarea>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-md-6">
                            <div>
                                <label for="sort_order" class="form-label">Sort Order</label>
                                <input type="number" class="form-control" id="sort_order" name="sort_order" value="{{ $faq ? $faq->sort_order : 0 }}">
                            </div>
                        </div>
                        <div class="col-xxl-6 col-md-6">
                            <div>
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="status2" name="status">
                                    <option value="1" {{ ($faq && $faq->status == 1) ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ ($faq && $faq->status == 0) ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xxl-12 col-md-12">
                            <button type="submit" class="btn btn-primary" id="submit-btn">{{ $faq ? 'Update' : 'Create' }}</button>
                            <a href="{{ route('admin.faqs') }}" class="btn btn-light">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        $('#faq-form').on('submit', function(e) {
            e.preventDefault();
            var btn = $('#submit-btn');
            var originalText = btn.text();
            
            btn.prop('disabled', true).text('Saving...');
            
            $.ajax({
                url: $(this).attr('action'),
                type: "POST",
                data: $(this).serialize(),
                success: function(response) {
                    if(response.status == 'success') {
                        toastr.success(response.message);
                        setTimeout(function() {
                            window.location.href = "{{ route('admin.faqs') }}";
                        }, 1000);
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    var errorMsg = 'Something went wrong.';
                    if(xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                },
                complete: function() {
                    btn.prop('disabled', false).text(originalText);
                }
            });
        });
    });
</script>
@endsection