@extends('layouts.app')
@section('title', __('FAQ'))
@section('page-title', $faq->exists ? __('Edit FAQ') : __('New FAQ'))

@section('content')
@include('super-admin._nav')

<div x-data="{ tab: '{{ $locales[0] }}' }">
    <a href="{{ route('super-admin.faqs.index') }}" class="text-sm text-brand-600 hover:underline inline-flex items-center gap-1 mb-4">
        <x-icon name="arrow-right" class="w-4 h-4 rotate-180 rtl:rotate-0"/> {{ __('Back') }}
    </a>

    <form method="POST" action="{{ $faq->exists ? route('super-admin.faqs.update', $faq) : route('super-admin.faqs.store') }}" class="space-y-6">
        @csrf
        @if($faq->exists) @method('PATCH') @endif

        <div class="card card-pad grid sm:grid-cols-3 gap-4">
            <div>
                <label class="form-label">{{ __('Sort order') }}</label>
                <input type="number" name="sort" class="form-input" value="{{ old('sort', $faq->sort) }}">
            </div>
            <label class="flex items-center gap-2 mt-7 sm:col-span-2">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" class="w-4 h-4 accent-brand-600" @checked(old('is_active', $faq->is_active ?? true))>
                <span class="text-sm">{{ __('Active') }}</span>
            </label>
        </div>

        <div class="card overflow-hidden">
            <div class="flex border-b border-slate-200/70 dark:border-slate-800 overflow-x-auto">
                @foreach($locales as $loc)
                    <button type="button" @click="tab='{{ $loc }}'"
                            :class="tab==='{{ $loc }}' ? 'text-brand-700 border-brand-500' : 'text-slate-500 border-transparent'"
                            class="px-5 py-3 text-sm font-semibold uppercase tracking-wider border-b-2 transition whitespace-nowrap">
                        {{ $loc }}
                    </button>
                @endforeach
            </div>
            @foreach($locales as $loc)
                <div x-show="tab==='{{ $loc }}'" x-cloak class="p-6 space-y-4" dir="{{ $loc==='ar' ? 'rtl' : 'ltr' }}">
                    <div>
                        <label class="form-label">{{ __('Question') }} ({{ strtoupper($loc) }})</label>
                        <input type="text" name="question_{{ $loc }}" class="form-input"
                               value="{{ old("question_$loc", ($faq->question ?? [])[$loc] ?? '') }}">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Answer') }} ({{ strtoupper($loc) }})</label>
                        <textarea name="answer_{{ $loc }}" rows="6" class="form-input">{{ old("answer_$loc", ($faq->answer ?? [])[$loc] ?? '') }}</textarea>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="flex justify-end">
            <button class="btn-primary"><x-icon name="check" class="w-4 h-4"/> {{ __('Save') }}</button>
        </div>
    </form>
</div>
@endsection