@extends('backend.layouts.app')

@section('content')
<x-back-button-component route="backend.faqs.index" />
{{ html()->form('POST', route('backend.faqs.update', $data->id))
        ->attribute('enctype', 'multipart/form-data')
        ->attribute('data-toggle', 'validator')
        ->attribute('id', 'form-submit')  // Add the id attribute here
        ->class('requires-validation')  // Add the requires-validation class
        ->attribute('novalidate', 'novalidate')  // Disable default browser validation
        ->open() }}
@csrf
@method('PUT')

<div class="card">
    <div class="card-body">
        <div class="row gy-3">
            <!-- Question Field -->
            <div class="col-md-6">
                {{ html()->label(__('faq.lbl_question') . ' <span class="text-danger">*</span>', 'question')->class('form-label') }}
                {{ html()->text('question')
                        ->attribute('value', $data->question)
                        ->placeholder(__('faq.enter_question'))
                        ->class('form-control')
                        ->required() }}
                @error('question')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
                <div class="invalid-feedback" id="question-error">Question field is required</div>
            </div>

            <!-- Answer Field -->
            <div class="col-md-6">
                <label for="answer" class="form-label">{{ __('faq.lbl_answer') }} <span class="text-danger">*</span></label>
                <textarea name="answer" id="answer" class="form-control" placeholder="{{ __('faq.enter_answer') }}" required>{{ old('answer', $data->answer) }}</textarea>
                @error('answer')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
                <div class="invalid-feedback" id="answer-error">Answer field is required</div>
            </div>
            

            <!-- Status Field -->
            <div class="col-md-6">
                {{ html()->label(__('faq.lbl_status'), 'status')->class('form-label') }}
                <div class="d-flex align-items-center justify-content-between form-control">
                    {{ html()->label(__('messages.active'), 'status')->class('form-label mb-0 text-body') }}
                    <div class="form-check form-switch">
                        {{ html()->hidden('status', 0) }}
                        {{ html()->checkbox('status', $data->status)
                                ->class('form-check-input')
                                ->id('status') }}
                    </div>
                </div>
                @error('status')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
        </div>
    </div>
</div>

<div class="d-grid d-sm-flex justify-content-sm-end gap-3 mb-5">
    {{ html()->submit(trans('messages.save'))->class('btn btn-md btn-primary float-right')->id('submit-button') }}
</div>

{{ html()->form()->close() }}
@endsection