@php
    $breadcrumbs = [
        'Chatbot FAQ' => ''
    ];
@endphp

@extends('layouts.master')

@section('title')
    Chatbot FAQ Management
@endsection

@section('style')
<style>
    .faq-card { border-radius: 12px; border: 1px solid #d1d9e6; background-color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; }
    .label-main { color: #000; font-weight: 700; font-size: 0.9rem; margin-bottom: 5px; display: block; }
    .input-custom-black { color: #000000 !important; font-weight: 600; border-color: #cbd5e0; }
    .input-custom-black:focus { border-color: #3f78e0; color: #000000 !important; box-shadow: none; }
    .form-control-custom { height: 40px; font-size: 0.9rem; border-radius: 6px; }
    /* select ต้องกำหนด line-height ให้พอดีกับ height เอง ไม่งั้นข้อความในตัวเลือกจะโดนตัด (บนหรือล่าง) */
    select.form-control-custom { line-height: 38px; padding-top: 0; padding-bottom: 0; }
    .table-header-bg { background-color: #f8f9fa; border-bottom: 2px solid #343f52; padding: 10px; font-weight: 700; color: #60697b; }
    #btn-add-faq { border: 1px dashed #6f42c1; color: #6f42c1; background-color: #f3effb; font-weight: 600; }
    #btn-add-faq:hover { background-color: #6f42c1; color: #fff; }

    /* Tabs (เขียนเอง ไม่พึ่ง Bootstrap JS) */
    .kb-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e9ecef; margin-bottom: 20px; }
    .kb-tab-btn {
        background: none; border: none; padding: 10px 18px; font-weight: 600; color: #60697b;
        cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
    }
    .kb-tab-btn.active { color: #6f42c1; border-bottom-color: #6f42c1; }
    .kb-tab-pane { display: none; }
    .kb-tab-pane.active { display: block; }

    .upload-box {
        border: 1px dashed #d1d9e6; border-radius: 10px; padding: 16px; background: #fbfbfd; margin-bottom: 16px;
    }
    .upload-box h6 { font-weight: 700; color: #343f52; margin-bottom: 10px; }
    .doc-type-badge { font-size: 0.72rem; padding: 3px 8px; border-radius: 20px; font-weight: 700; }
    .doc-type-badge.pdf { background: #fdecec; color: #d90429; }
    .doc-type-badge.image { background: #eaf4ff; color: #1d6fd8; }
    .doc-type-badge.text { background: #f3effb; color: #6f42c1; }

    /* Modal เพิ่ม/แก้ไข FAQ */
    #faqModalOverlay {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,.5); z-index: 1050; align-items: center; justify-content: center;
    }
    #faqModalBox {
        background: #fff; border-radius: 10px; width: 100%; max-width: 520px;
        margin: 20px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.2);
    }
    #faqModalBox .modal-header, #faqModalBox .modal-body, #faqModalBox .modal-footer { padding: 16px 20px; }
    #faqModalBox .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
    #faqModalBox .modal-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #eee; }
    #faqModalClose { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #666; }
</style>
@endsection

@section('content')

<section class="wrapper bg-light">
    <div class="container py-10">
        <div class="row">
            <div class="col-lg-12 col-xl-10 mx-auto">

                <br><br>

                <div class="mb-4">
                    <h2 style="font-size: 1.3rem; color: #000;">Chatbot Knowledge Base</h2>
                    <p class="text-muted mb-0">จัดการเมนูคำถามแนะนำแบบหลายชั้น (หัวข้อ → ตัวเลือกย่อย → คำตอบ) และไฟล์/ข้อความอ้างอิงที่ Chatbot ใช้ตอบคำถาม</p>
                </div>

                @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                <div class="kb-tabs">
                    <button type="button" class="kb-tab-btn active" data-tab="faq">เมนูคำถามแนะนำ (Topic Menu)</button>
                    <button type="button" class="kb-tab-btn" data-tab="docs">ไฟล์ข้อมูล / เอกสาร</button>
                </div>

                {{-- ============ TAB 1: FAQ ============ --}}
                <div class="kb-tab-pane active" id="tab-faq">

                    {{-- Breadcrumb: บอกว่าตอนนี้กำลังดูหัวข้อย่อยของอะไรอยู่ --}}
                    <nav class="mb-2" style="font-size:0.85rem;">
                        <a href="{{ url('/managefaq') }}" style="color:#6f42c1; text-decoration:none;">🏠 หัวข้อหลัก</a>
                        @foreach($breadcrumbTrail as $crumb)
                            <span class="text-muted"> / </span>
                            @if($loop->last)
                                <span class="text-muted">{{ $crumb->question }}</span>
                            @else
                                <a href="{{ url('/managefaq') }}?parent_id={{ $crumb->id }}" style="color:#6f42c1; text-decoration:none;">{{ $crumb->question }}</a>
                            @endif
                        @endforeach
                    </nav>

                    <p class="text-muted small mb-2">
                        @if($parent)
                            กำลังจัดการหัวข้อย่อยของ "<strong>{{ $parent->question }}</strong>" — ตัวเลือกในตารางนี้จะโชว์พร้อมกันตอนผู้ใช้เลือก "{{ $parent->question }}" ในแชท
                        @else
                            แถวในตารางนี้คือ "หัวข้อหลัก" ที่โชว์เป็นปุ่มตอนผู้ใช้เปิดแชทครั้งแรก — กด "ดูหัวข้อย่อย" ที่แถวไหนเพื่อจัดการตัวเลือกข้างในหัวข้อนั้น
                        @endif
                        &nbsp; 🔗📄🖼️ = มีไฟล์/ลิงก์แนบอยู่
                    </p>

                    <div class="d-flex justify-content-end mb-3">
                        <button type="button" class="btn" id="btn-add-faq">
                            {{ $parent ? '+ เพิ่มหัวข้อย่อยใน "'.$parent->question.'"' : '+ เพิ่มหัวข้อหลัก' }}
                        </button>
                    </div>

                    <div class="card faq-card">
                        <div class="card-body p-8 p-lg-10">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover align-middle">
                                    <thead>
                                        <tr class="table-header-bg">
                                            <th style="width:70px">ลำดับ</th>
                                            <th>หัวข้อ/คำถาม</th>
                                            <th>คำตอบ</th>
                                            <th>คีย์เวิร์ด</th>
                                            <th style="width:100px">สถานะ</th>
                                            <th style="width:230px">จัดการ</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($faqs as $faq)
                                        <tr>
                                            <td>{{ $faq->order }}</td>
                                            <td>
                                                {{ $faq->question }}
                                                @if($faq->attachment_type === 'image') 🖼️
                                                @elseif($faq->attachment_type === 'pdf') 📄
                                                @elseif($faq->attachment_type === 'link') 🔗
                                                @endif
                                            </td>
                                            <td>{{ $faq->answer ? \Illuminate\Support\Str::limit($faq->answer, 80) : '—' }}</td>
                                            <td>{{ $faq->keywords }}</td>
                                            <td>
                                                @if($faq->status === 'active')
                                                    <span class="badge bg-success">Active</span>
                                                @else
                                                    <span class="badge bg-secondary">Inactive</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ url('/managefaq') }}?parent_id={{ $faq->id }}" class="btn btn-sm btn-outline-primary">
                                                    ดูหัวข้อย่อย @if($faq->child_count) ({{ $faq->child_count }}) @endif
                                                </a>
                                                <button type="button" class="btn btn-sm btn-warning btn-edit-faq" data-id="{{ $faq->id }}">
                                                    แก้ไข
                                                </button>
                                                <a href="{{ url('/faqdelete/'.$faq->id) }}"
                                                   class="btn btn-sm btn-danger"
                                                   onclick="return confirm('ยืนยันการลบ? (ถ้ามีหัวข้อย่อยอยู่ข้างใต้ จะถูกลบตามไปด้วยทั้งหมด)')">
                                                    ลบ
                                                </a>
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">ยังไม่มีข้อมูลในชั้นนี้</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ============ TAB 2: DOCUMENTS ============ --}}
                <div class="kb-tab-pane" id="tab-docs">

                    <div class="row gy-3 mb-2">
                        <div class="col-md-4">
                            <div class="upload-box">
                                <h6>📄 อัปโหลด PDF</h6>
                                <p class="text-muted small mb-2">ระบบจะดึงข้อความในไฟล์มาทำดัชนีค้นหาอัตโนมัติ</p>
                                <form id="formUploadPdf">
                                    <input type="file" class="form-control form-control-sm mb-2" name="file" accept="application/pdf" required>
                                    <button type="submit" class="btn btn-sm btn-primary w-100">อัปโหลด</button>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="upload-box">
                                <h6>🖼️ อัปโหลดรูปภาพ</h6>
                                <p class="text-muted small mb-2">เก็บไว้เป็นข้อมูลอ้างอิงเท่านั้น (ยังไม่รองรับค้นข้อความในรูป)</p>
                                <form id="formUploadImage">
                                    <input type="file" class="form-control form-control-sm mb-2" name="file" accept="image/*" required>
                                    <button type="submit" class="btn btn-sm btn-primary w-100">อัปโหลด</button>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="upload-box">
                                <h6>✍️ เพิ่มข้อความ</h6>
                                <p class="text-muted small mb-2">พิมพ์รายละเอียดเว็บ/บริการ ที่อยากให้บอทใช้ตอบ</p>
                                <form id="formStoreText">
                                    <input type="text" class="form-control form-control-sm mb-2" name="title" placeholder="หัวข้อ เช่น เงื่อนไขการชำระเงิน" required>
                                    <textarea class="form-control form-control-sm mb-2" name="text" rows="2" placeholder="เนื้อหา..." required></textarea>
                                    <button type="submit" class="btn btn-sm btn-primary w-100">บันทึก</button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="card faq-card">
                        <div class="card-body p-8 p-lg-10">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover align-middle">
                                    <thead>
                                        <tr class="table-header-bg">
                                            <th style="width:100px">ประเภท</th>
                                            <th>ชื่อ/หัวข้อ</th>
                                            <th style="width:110px">จำนวนส่วน</th>
                                            <th style="width:150px">อัปโหลดเมื่อ</th>
                                            <th style="width:100px">จัดการ</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($documentGroups as $batchId => $chunks)
                                        @php $first = $chunks->first(); @endphp
                                        <tr>
                                            <td><span class="doc-type-badge {{ $first->type }}">{{ strtoupper($first->type) }}</span></td>
                                            <td>
                                                {{ $first->title }}
                                                @if($first->file_path)
                                                    <br><a href="{{ url('/chatbot-doc/view/'.$batchId) }}" target="_blank" class="small">ดูไฟล์ต้นฉบับ</a>
                                                @elseif($first->type === 'text')
                                                    <br><button type="button" class="btn btn-link btn-sm p-0 small btn-view-doc-text" data-content="{{ $chunks->sortBy('chunk_index')->pluck('content')->implode("\n\n") }}">ดูเนื้อหา</button>
                                                @endif
                                            </td>
                                            <td>{{ $chunks->count() }}</td>
                                            <td>{{ $first->created_at->format('d/m/Y H:i') }}</td>
                                            <td>
                                                <a href="{{ url('/chatbot-doc/delete/'.$batchId) }}"
                                                   class="btn btn-sm btn-danger"
                                                   onclick="return confirm('ยืนยันการลบไฟล์/ข้อมูลนี้?')">
                                                    ลบ
                                                </a>
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">ยังไม่มีไฟล์/ข้อมูลอัปโหลด</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

{{-- Modal ดูเนื้อหาข้อความที่บันทึกไว้ (สำหรับรายการ type = text ที่ไม่มีไฟล์ต้นฉบับให้ดู) --}}
<div id="docTextModalOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:1050; align-items:center; justify-content:center;">
  <div style="background:#fff; border-radius:10px; width:100%; max-width:520px; margin:20px; max-height:80vh; overflow-y:auto; box-shadow:0 10px 30px rgba(0,0,0,.2);">
    <div style="padding:16px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee;">
      <h5 class="mb-0">เนื้อหาที่บันทึกไว้</h5>
      <button type="button" id="docTextModalClose" style="background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:#666;">&times;</button>
    </div>
    <div style="padding:16px 20px; white-space:pre-wrap; word-break:break-word;" id="docTextModalBody"></div>
  </div>
</div>

{{-- Modal เพิ่ม/แก้ไข FAQ (custom, ไม่พึ่ง Bootstrap JS) --}}
<div id="faqModalOverlay">
  <div id="faqModalBox">
    <form id="faqForm">
      <div class="modal-header">
        <h5 class="mb-0" id="faqModalTitle">เพิ่มคำถาม FAQ</h5>
        <button type="button" id="faqModalClose">&times;</button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="faq_id" name="id">

        <div class="mb-3">
          <input type="hidden" id="faq_parent_id" name="parent_id" value="{{ $parent->id ?? '' }}">
          <label class="label-main">หัวข้อแม่</label>
          <div class="form-control form-control-custom" style="background:#f8f9fa; color:#60697b; display:flex; align-items:center;">
            {{ $parent ? $parent->question : '— ไม่มี (จะเป็นหัวข้อหลัก) —' }}
          </div>
        </div>

        <div class="mb-3">
          <label class="label-main" for="faq_question">คำถาม / ข้อความปุ่ม</label>
          <input type="text" class="form-control form-control-custom input-custom-black" id="faq_question" name="question" maxlength="500" required>
        </div>

        <div class="mb-3">
          <label class="label-main" for="faq_answer">คำตอบ (เว้นว่างได้ ถ้าข้อนี้เป็นแค่หัวข้อที่มีตัวเลือกย่อยต่อ)</label>
          <textarea class="form-control input-custom-black" id="faq_answer" name="answer" rows="4"></textarea>
        </div>

        <div class="mb-3">
          <label class="label-main" for="faq_keywords">คีย์เวิร์ด (คั่นด้วยจุลภาค เช่น ราคา,ค่าบริการ,quotation)</label>
          <input type="text" class="form-control form-control-custom input-custom-black" id="faq_keywords" name="keywords" maxlength="500">
        </div>

        <div class="mb-3">
          <label class="label-main" for="faq_attachment_type">ไฟล์แนบ / ลิงก์ (แสดงเมื่อผู้ใช้กดถึงคำตอบนี้)</label>
          <select class="form-control form-control-custom input-custom-black" id="faq_attachment_type" name="attachment_type">
            <option value="none">ไม่มี</option>
            <option value="image">รูปภาพ</option>
            <option value="pdf">ไฟล์ PDF</option>
            <option value="link">ลิงก์ภายนอก</option>
          </select>

          <div id="faq_attachment_file_wrap" class="mt-2" style="display:none">
            <input type="file" class="form-control form-control-sm" id="faq_attachment_file" name="attachment_file" accept="image/*,application/pdf">
            <div class="small text-muted mt-1" id="faq_attachment_current"></div>
          </div>

          <div id="faq_attachment_url_wrap" class="mt-2" style="display:none">
            <input type="url" class="form-control form-control-custom input-custom-black" id="faq_attachment_url" name="attachment_url" placeholder="https://...">
          </div>
        </div>

        <div class="row gy-3">
          <div class="col-md-6">
            <label class="label-main" for="faq_status">สถานะ</label>
            <select class="form-control form-control-custom input-custom-black" id="faq_status" name="status">
              <option value="active">Active</option>
              <option value="inactive">Inactive</option>
            </select>
          </div>
          <div class="col-md-6">
            <label class="label-main" for="faq_order">ลำดับ (เรียงในกลุ่มพี่น้องเดียวกัน)</label>
            <input type="number" class="form-control form-control-custom input-custom-black" id="faq_order" name="order" value="0">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="faqModalCancel">ยกเลิก</button>
        <button type="submit" class="btn btn-primary">บันทึก</button>
      </div>
    </form>
  </div>
</div>

<script>
// รอให้ jQuery โหลดเสร็จก่อนค่อยรันโค้ดนี้ (กันปัญหา script ตัวนี้มาก่อน jQuery
// ในหน้าเว็บ ซึ่งจะทำให้ $ undefined แล้วทั้งบล็อกพังไปเลยแบบเงียบๆ ปุ่มเลยกดไม่ติด)
(function waitForJQuery() {
    if (window.jQuery) {
        jQuery(runManageFaqPage);
    } else {
        setTimeout(waitForJQuery, 50);
    }
})();

function runManageFaqPage() {
    var $ = jQuery;
    var csrfToken = $('meta[name="csrf-token"]').attr('content');

    // Base URL ของแอป (รองรับกรณีติดตั้งใน subdirectory เช่น /consultingcenter/public)
    // ห้ามใช้ path แบบ '/xxx' ตรงๆ ใน AJAX เพราะจะไม่มี prefix subdirectory ต่อท้าย
    var urls = {
        faqget:        "{{ url('/faqget') }}/",
        createfaq:     "{{ url('/createfaq') }}",
        editfaq:       "{{ url('/editfaq') }}",
        uploadPdf:     "{{ url('/chatbot-doc/upload-pdf') }}",
        uploadImage:   "{{ url('/chatbot-doc/upload-image') }}",
        storeText:     "{{ url('/chatbot-doc/store-text') }}"
    };

    // ---------- Tabs ----------
    $('.kb-tab-btn').on('click', function () {
        var tab = $(this).data('tab');
        $('.kb-tab-btn').removeClass('active');
        $(this).addClass('active');
        $('.kb-tab-pane').removeClass('active');
        $('#tab-' + tab).addClass('active');
    });

    // ---------- FAQ modal ----------
    function openModal() { $('#faqModalOverlay').css('display', 'flex'); }
    function closeModal() { $('#faqModalOverlay').css('display', 'none'); }

    // โชว์/ซ่อนช่องแนบไฟล์ หรือช่องกรอกลิงก์ ตามประเภทไฟล์แนบที่เลือก
    function toggleAttachmentFields() {
        var type = $('#faq_attachment_type').val();
        $('#faq_attachment_file_wrap').toggle(type === 'image' || type === 'pdf');
        $('#faq_attachment_url_wrap').toggle(type === 'link');
    }
    $('#faq_attachment_type').on('change', toggleAttachmentFields);

    $('#btn-add-faq').on('click', function () {
        $('#faqModalTitle').text(@json($parent ? 'เพิ่มหัวข้อย่อยใน "'.$parent->question.'"' : 'เพิ่มหัวข้อหลัก'));
        $('#faqForm')[0].reset();
        $('#faq_id').val('');
        $('#faq_attachment_current').text('');
        toggleAttachmentFields();
        openModal();
    });

    $('#faqModalClose, #faqModalCancel').on('click', closeModal);
    $('#faqModalOverlay').on('click', function (e) {
        if (e.target === this) closeModal();
    });

    $(document).on('click', '.btn-edit-faq', function () {
        var id = $(this).data('id');
        $.get(urls.faqget + id, function (faq) {
            $('#faqModalTitle').text('แก้ไขหัวข้อ/คำถาม');
            $('#faqForm')[0].reset();
            $('#faq_id').val(faq.id);
            $('#faq_parent_id').val(faq.parent_id || '');
            $('#faq_question').val(faq.question);
            $('#faq_answer').val(faq.answer);
            $('#faq_keywords').val(faq.keywords);
            $('#faq_status').val(faq.status);
            $('#faq_order').val(faq.order);
            $('#faq_attachment_type').val(faq.attachment_type || 'none');

            $('#faq_attachment_current').text('');
            if (faq.attachment_type === 'link') {
                $('#faq_attachment_url').val(faq.attachment_url);
            } else if (faq.attachment_path) {
                $('#faq_attachment_current').text('ไฟล์เดิม: ' + faq.attachment_path + ' (เลือกไฟล์ใหม่เพื่อแทนที่ ไม่เลือก = ใช้ไฟล์เดิมต่อ)');
            }

            toggleAttachmentFields();
            openModal();
        });
    });

    // ใช้ FormData เสมอ (ไม่ใช่ .serialize()) เพราะฟอร์มนี้อาจมีไฟล์แนบ (รูป/PDF) ติดไปด้วย
    $('#faqForm').on('submit', function (e) {
        e.preventDefault();
        var id = $('#faq_id').val();
        var url = id ? urls.editfaq : urls.createfaq;

        var formData = new FormData(this);
        formData.append('_token', csrfToken);

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function () { location.reload(); },
            error: function (xhr) {
                var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'กรุณาตรวจสอบข้อมูลที่กรอก';
                alert('เกิดข้อผิดพลาด: ' + msg);
            }
        });
    });

    // ---------- ดูเนื้อหาเต็มของรายการ type = text ----------
    $(document).on('click', '.btn-view-doc-text', function () {
        $('#docTextModalBody').text($(this).data('content'));
        $('#docTextModalOverlay').css('display', 'flex');
    });
    $('#docTextModalClose').on('click', function () {
        $('#docTextModalOverlay').css('display', 'none');
    });
    $('#docTextModalOverlay').on('click', function (e) {
        if (e.target === this) $(this).css('display', 'none');
    });

    // ---------- Document uploads (ใช้ FormData เพราะมีไฟล์แนบ) ----------
    function submitUploadForm($form, url, extraNote) {
        $form.on('submit', function (e) {
            e.preventDefault();

            var formData = new FormData(this);
            formData.append('_token', csrfToken);

            var $btn = $form.find('button[type=submit]');
            var originalText = $btn.text();
            $btn.prop('disabled', true).text('กำลังอัปโหลด...' + (extraNote || ''));

            $.ajax({
                url: url,
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    alert(res.message || 'สำเร็จ');
                    location.reload();
                },
                error: function (xhr) {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'เกิดข้อผิดพลาด กรุณาลองใหม่';
                    alert(msg);
                    $btn.prop('disabled', false).text(originalText);
                }
            });
        });
    }

    submitUploadForm($('#formUploadPdf'), urls.uploadPdf, ' (กำลังทำดัชนีค้นหา อาจใช้เวลาสักครู่)');
    submitUploadForm($('#formUploadImage'), urls.uploadImage);
    submitUploadForm($('#formStoreText'), urls.storeText);
}
</script>
@endsection