@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">

                @include('components.alert')

                {{-- Card Top Action (Kembali & Simpan) --}}
                <div class="card shadow-lg mx-1 mb-4">
                    <div class="card-body p-4">
                        <div class="row gx-4">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <a href="{{ url('/faq-master') }}" class="btn btn-secondary mb-0">
                                        <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
                                    </a>
                                    <button class="btn btn-primary mb-0" id="faqForm-save"
                                        onclick="event.preventDefault(); document.getElementById('faqForm').submit();">
                                        <i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Form Card --}}
                <div class="card shadow-sm border-0 mx-1 mb-4">
                    <div class="card-header pb-0 border-bottom">
                        <h5 class="mb-0 fw-bold">
                            {{ $title_menu }}
                        </h5>
                    </div>

                    <div class="card-body p-4">
                        <form id="faqForm" action="{{ $item ? url('/faq-master/update/' . $item->idfaq) : url('/faq-master/store') }}" method="POST">
                            @csrf
                            @if ($item)
                                @method('PUT')
                            @endif

                            <div class="row mb-4">
                                <div class="col-md-3">
                                    <label class="form-control-label fw-bold">Urutan Tampilan</label>
                                    <input type="number" name="urutan" class="form-control" value="{{ old('urutan', $item->urutan ?? 1) }}" required min="1">
                                    <small class="text-muted d-block mt-1">Urutan posisi FAQ pada halaman</small>
                                </div>
                            </div>

                            <div class="row mb-4">
                                {{-- 🇮🇩 Bahasa Indonesia --}}
                                <div class="col-md-6 mb-3 mb-md-0">
                                    <div class="card border h-100">
                                        <div class="card-header bg-light fw-bold text-dark">🇮🇩 Bahasa Indonesia</div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Pertanyaan (ID)</label>
                                                <input type="text" name="pertanyaan_id" class="form-control" value="{{ old('pertanyaan_id', $langId->pertanyaan ?? '') }}" required placeholder="Contoh: Apa itu Intisolve?">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Jawaban (ID)</label>
                                                <textarea name="jawaban_id" class="form-control" rows="8" required placeholder="Tuliskan jawaban lengkap...">{{ old('jawaban_id', $langId->jawaban ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- 🇬🇧 English --}}
                                <div class="col-md-6">
                                    <div class="card border h-100">
                                        <div class="card-header bg-light fw-bold text-dark">🇬🇧 English</div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Question (EN)</label>
                                                <input type="text" name="pertanyaan_en" class="form-control" value="{{ old('pertanyaan_en', $langEn->pertanyaan ?? '') }}" required placeholder="Example: What is Intisolve?">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Answer (EN)</label>
                                                <textarea name="jawaban_en" class="form-control" rows="8" required placeholder="Write full answer...">{{ old('jawaban_en', $langEn->jawaban ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection