@extends('layouts.app')

@section('content')
@php
    $translationLanguages = $appLanguages->filter(fn ($language) => filled($language->code))->values();
@endphp
<div class="page-wrapper">
    <div class="page-content">
        @include('includes.page_header', [
            'heading' => __('FAQ Management'),
            'url' => route('admin.faqs.index'),
            'action' => __('Edit FAQ')
        ])
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card">
            <div class="card-body p-4">
                <h5 class="mb-4">{{ __('Edit FAQ') }}</h5>
                <form action="{{ route('admin.faqs.update', $faq->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="row g-4">
                        <!-- MAIN CONTENT LEFT COLUMN -->
                        <div class="col-lg-8 col-md-8 col-12">
                            <div class="border rounded p-3 h-100">
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label fw-bold">{{ __('Question') }} <span class="text-danger">*</span></label>
                                        <input type="text" name="question" class="form-control @error('question') is-invalid @enderror" value="{{ old('question', $faq->question) }}" placeholder="{{ __('Enter Question') }}" required>
                                        @error('question')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12">
                                        <label class="form-label fw-bold">{{ __('Answer') }} <span class="text-danger">*</span></label>
                                        <textarea name="answer" id="answer" rows="6" class="form-control rich-editor @error('answer') is-invalid @enderror" placeholder="{{ __('Enter answer details') }}" required>{{ old('answer', $faq->answer) }}</textarea>
                                        @error('answer')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    @if($translationLanguages->count())
                                        <div class="col-12 mt-4">
                                            <div class="border rounded p-3">
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <div>
                                                        <h6 class="mb-1">{{ __('Translations') }}</h6>
                                                        <p class="text-muted mb-0 small">{{ __('Admin can enter manual translations. Default locale is') }} <strong>{{ strtoupper($defaultTranslationLocale) }}</strong>. {{ __('Missing locales will auto translate based on settings.') }}</p>
                                                    </div>
                                                </div>
                                                @include('includes.partial.auto_translate.edit_toggle')

                                                <ul class="nav nav-tabs nav-primary flex-nowrap overflow-auto mb-3" role="tablist">
                                                    @foreach($translationLanguages as $language)
                                                        @php
                                                            $translationLanguageName = $language->language->name ?? ($language->data['name'] ?? strtoupper($language->code));
                                                        @endphp
                                                        <li class="nav-item" role="presentation">
                                                            <button
                                                                class="nav-link {{ $loop->first ? 'active' : '' }}"
                                                                data-bs-toggle="tab"
                                                                data-bs-target="#edit-translation-{{ $language->code }}"
                                                                type="button"
                                                                role="tab">
                                                                {{ strtoupper($language->code) }}
                                                            </button>
                                                        </li>
                                                    @endforeach
                                                </ul>

                                                <div class="tab-content">
                                                    @foreach($translationLanguages as $language)
                                                        @php
                                                            $translationLanguageName = $language->language->name ?? ($language->data['name'] ?? strtoupper($language->code));
                                                            $translation = $faq->translations->firstWhere('locale', $language->code);
                                                        @endphp
                                                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="edit-translation-{{ $language->code }}" role="tabpanel">
                                                            <div class="row g-3">
                                                                <div class="col-md-12">
                                                                    <label class="form-label">
                                                                        {{ $translationLanguageName }} {{ __('Question') }}
                                                                        @if($language->code === $defaultTranslationLocale)
                                                                            <span class="badge bg-light text-dark border ms-1">{{ __('Default') }}</span>
                                                                        @endif
                                                                    </label>
                                                                    <input
                                                                        type="text"
                                                                        name="translations[{{ $language->code }}][question]"
                                                                        class="form-control @error('translations.' . $language->code . '.question') is-invalid @enderror"
                                                                        value="{{ old('translations.' . $language->code . '.question', $translation->question ?? '') }}">
                                                                    @error('translations.' . $language->code . '.question')
                                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                                    @enderror
                                                                </div>

                                                                <div class="col-md-12">
                                                                    <label class="form-label">
                                                                        {{ $translationLanguageName }} {{ __('Answer') }}
                                                                    </label>
                                                                    <textarea
                                                                        name="translations[{{ $language->code }}][answer]"
                                                                        rows="5"
                                                                        class="form-control rich-editor @error('translations.' . $language->code . '.answer') is-invalid @enderror">{{ old('translations.' . $language->code . '.answer', $translation->answer ?? '') }}</textarea>
                                                                    @error('translations.' . $language->code . '.answer')
                                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- RIGHT SIDEBAR COLUMN -->
                        <div class="col-lg-4 col-md-4 col-12">
                            <div class="border rounded p-3 h-100">
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label fw-bold">{{ __('Status') }} <span class="text-danger">*</span></label>
                                        <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                                            <option value="active" {{ old('status', $faq->status) === 'active' ? 'selected' : '' }}>{{ __('Active') }}</option>
                                            <option value="deactivated" {{ old('status', $faq->status) === 'deactivated' ? 'selected' : '' }}>{{ __('Deactivated') }}</option>
                                        </select>
                                        @error('status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12">
                                        <label class="form-label fw-bold">{{ __('Type') }}</label>
                                        <select name="type" class="form-select @error('type') is-invalid @enderror">
                                            <option value="">{{ __('Select Type (Optional)') }}</option>
                                            <option value="home" {{ old('type', $faq->type) === 'home' ? 'selected' : '' }}>{{ __('Home') }}</option>
                                            <option value="plan" {{ old('type', $faq->type) === 'plan' ? 'selected' : '' }}>{{ __('Plan') }}</option>
                                        </select>
                                        @error('type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 mt-4 d-grid gap-2">
                                        <button type="submit" class="btn btn-primary px-4">{{ __('Update FAQ') }}</button>
                                        <a href="{{ route('admin.faqs.index') }}" class="btn btn-light border px-4">{{ __('Back') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@include('includes.commonjs')
@endsection