@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 d-flex gap-2">
                                    <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="faqHeaderForm-save"
                                        onclick="event.preventDefault(); document.getElementById('faqHeaderForm').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 py-3">
                        <h5 class="mb-0 fw-bold text-dark">
                            Edit Header & Banner CTA Halaman FAQ
                        </h5>
                    </div>

                    <div class="card-body p-4">
                        <form id="faqHeaderForm" action="{{ url('/faq-master/header/update') }}" method="POST">
                            @csrf

                            <h6 class="fw-bold text-primary mb-3"><i class="fas fa-bullhorn me-1"></i> 1. Pengaturan Header & Judul Halaman FAQ</h6>

                            <div class="row mb-4">
                                {{-- 🇮🇩 Bahasa Indonesia --}}
                                <div class="col-md-6 mb-4 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">Badge Text (ID)</label>
                                                <input type="text" name="badge_text_id" class="form-control" value="{{ old('badge_text_id', $headerLangId->badge_text ?? 'FAQ') }}" placeholder="Contoh: FAQ">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Judul Halaman (ID)</label>
                                                <input type="text" name="judul_id" class="form-control" value="{{ old('judul_id', $headerLangId->judul ?? 'Pertanyaan yang Sering Diajukan') }}" required placeholder="Contoh: Pertanyaan yang Sering Diajukan">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Deskripsi Halaman (ID)</label>
                                                <textarea name="deskripsi_id" class="form-control" rows="3" placeholder="Tuliskan deskripsi ringkas halaman...">{{ old('deskripsi_id', $headerLangId->deskripsi ?? '') }}</textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Placeholder Input Pencarian (ID)</label>
                                                <input type="text" name="placeholder_search_id" class="form-control" value="{{ old('placeholder_search_id', $headerLangId->placeholder_search ?? 'Cari pertanyaan atau kata kunci...') }}" placeholder="Contoh: Cari pertanyaan...">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Meta Title SEO (ID)</label>
                                                <input type="text" name="meta_title_id" class="form-control" value="{{ old('meta_title_id', $headerLangId->meta_title ?? '') }}" placeholder="Meta Title untuk Google Search">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Meta Description SEO (ID)</label>
                                                <textarea name="meta_description_id" class="form-control" rows="2" placeholder="Meta Description untuk Google Search">{{ old('meta_description_id', $headerLangId->meta_description ?? '') }}</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">Badge Text (EN)</label>
                                                <input type="text" name="badge_text_en" class="form-control" value="{{ old('badge_text_en', $headerLangEn->badge_text ?? 'FAQ') }}" placeholder="Example: FAQ">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Page Title (EN)</label>
                                                <input type="text" name="judul_en" class="form-control" value="{{ old('judul_en', $headerLangEn->judul ?? 'Frequently Asked Questions') }}" required placeholder="Example: Frequently Asked Questions">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Page Description (EN)</label>
                                                <textarea name="deskripsi_en" class="form-control" rows="3" placeholder="Write concise page description...">{{ old('deskripsi_en', $headerLangEn->deskripsi ?? '') }}</textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Search Input Placeholder (EN)</label>
                                                <input type="text" name="placeholder_search_en" class="form-control" value="{{ old('placeholder_search_en', $headerLangEn->placeholder_search ?? 'Search questions or keywords...') }}" placeholder="Example: Search questions...">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Meta Title SEO (EN)</label>
                                                <input type="text" name="meta_title_en" class="form-control" value="{{ old('meta_title_en', $headerLangEn->meta_title ?? '') }}" placeholder="Meta Title for Google Search">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Meta Description SEO (EN)</label>
                                                <textarea name="meta_description_en" class="form-control" rows="2" placeholder="Meta Description for Google Search">{{ old('meta_description_en', $headerLangEn->meta_description ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal dark my-4">

                            <h6 class="fw-bold text-primary mb-3"><i class="fas fa-hand-holding-heart me-1"></i> 2. Pengaturan Banner CTA Bantuan (Bottom Box)</h6>

                            <div class="row mb-4">
                                <div class="col-md-12 mb-3">
                                    <label class="form-control-label fw-bold">URL / Link Tombol Bantuan (Target Link)</label>
                                    <input type="text" name="cta_btn_link" class="form-control" value="{{ old('cta_btn_link', $headerSetting->cta_btn_link ?? '/kontak') }}" placeholder="Contoh: /kontak atau https://wa.me/...">
                                    <small class="text-muted">Link halaman yang dituju saat pengunjung menekan tombol bantuan di bagian bawah FAQ</small>
                                </div>
                            </div>

                            <div class="row mb-4">
                                {{-- 🇮🇩 Bahasa Indonesia CTA --}}
                                <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">🇮🇩 Banner Bantuan (ID)</div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Judul Banner CTA (ID)</label>
                                                <input type="text" name="cta_judul_id" class="form-control" value="{{ old('cta_judul_id', $headerLangId->cta_judul ?? 'Masih memiliki pertanyaan lain?') }}" placeholder="Contoh: Masih memiliki pertanyaan lain?">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Deskripsi Banner CTA (ID)</label>
                                                <textarea name="cta_deskripsi_id" class="form-control" rows="3" placeholder="Tuliskan pesan ajakan bantuan...">{{ old('cta_deskripsi_id', $headerLangId->cta_deskripsi ?? 'Tim kami siap membantu menjawab dan memberikan solusi terbaik untuk kebutuhan Anda.') }}</textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">Teks Tombol CTA (ID)</label>
                                                <input type="text" name="cta_btn_text_id" class="form-control" value="{{ old('cta_btn_text_id', $headerLangId->cta_btn_text ?? 'Hubungi Kami') }}" placeholder="Contoh: Hubungi Kami">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- 🇬🇧 English CTA --}}
                                <div class="col-md-6">
                                    <div class="card border h-100">
                                        <div class="card-header bg-light fw-bold text-dark">🇬🇧 CTA Banner (EN)</div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">CTA Banner Title (EN)</label>
                                                <input type="text" name="cta_judul_en" class="form-control" value="{{ old('cta_judul_en', $headerLangEn->cta_judul ?? 'Still have questions?') }}" placeholder="Example: Still have questions?">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">CTA Banner Description (EN)</label>
                                                <textarea name="cta_deskripsi_en" class="form-control" rows="3" placeholder="Write help call-to-action message...">{{ old('cta_deskripsi_en', $headerLangEn->cta_deskripsi ?? 'Our team is ready to help answer and provide the best solutions for your needs.') }}</textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-control-label fw-bold">CTA Button Label (EN)</label>
                                                <input type="text" name="cta_btn_text_en" class="form-control" value="{{ old('cta_btn_text_en', $headerLangEn->cta_btn_text ?? 'Contact Us') }}" placeholder="Example: Contact Us">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

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