@extends('root')
@php
    $isEdit = isset($aiKnowledge);
@endphp
@section('title', $isEdit ? 'Edit Dokumen AI' : 'Tambah Dokumen AI')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => $isEdit ? 'Edit Referensi AI' : 'Tambah Referensi AI',
        'links' => [
            ['url' => route('client.balasan-otomatis.index'), 'label' => 'Auto Reply'],
            ['url' => route('client.ai-knowledge.index'), 'label' => 'Knowledge Base'],
        ],
        'current' => $isEdit ? 'Edit Dokumen' : 'Tambah Dokumen'
    ])

    <div class="row row-cards justify-content-center">
                <div class="col-lg-8">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3 border-bottom-0 d-flex justify-content-between align-items-center">
                            <h3 class="card-title fw-bold text-primary"><i class="ti ti-file-text me-2"></i> Konfigurasi Dokumen</h3>
                            <a href="{{ route('client.ai-knowledge.index') }}" class="btn btn-sm btn-white border shadow-sm rounded-pill px-3">
                                <i class="ti ti-arrow-left me-1"></i> Kembali
                            </a>
                        </div>
                        <div class="card-body p-4 pt-2">
                            <form action="{{ $isEdit ? route('client.ai-knowledge.update', $aiKnowledge) : route('client.ai-knowledge.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @if($isEdit) @method('PUT') @endif

                                <div class="mb-4">
                                    <label class="form-label fw-bold text-dark">Judul Dokumen <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" 
                                           value="{{ old('title', $isEdit ? $aiKnowledge->title : '') }}" 
                                           placeholder="Contoh: FAQ Produk Herbal, Kebijakan Pengembalian Dana" required>
                                    @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fw-bold text-dark">Kategori / Tipe Dokumen <span class="text-danger">*</span></label>
                                    <select class="form-select @error('knowledge_type') is-invalid @enderror" name="knowledge_type" required>
                                        <option value="faq" {{ old('knowledge_type', $isEdit ? $aiKnowledge->knowledge_type : '') == 'faq' ? 'selected' : '' }}>FAQ / Tanya Jawab</option>
                                        <option value="product_info" {{ old('knowledge_type', $isEdit ? $aiKnowledge->knowledge_type : '') == 'product_info' ? 'selected' : '' }}>Informasi Produk & Harga</option>
                                        <option value="policy" {{ old('knowledge_type', $isEdit ? $aiKnowledge->knowledge_type : '') == 'policy' ? 'selected' : '' }}>Kebijakan (Ongkir, Garansi, dll)</option>
                                        <option value="other" {{ old('knowledge_type', $isEdit ? $aiKnowledge->knowledge_type : '') == 'other' ? 'selected' : '' }}>Lain-lain / Profil Perusahaan</option>
                                    </select>
                                    @error('knowledge_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fw-bold text-dark mb-3">Sumber Pengetahuan <span class="text-danger">*</span></label>
                                    
                                    <ul class="nav nav-tabs nav-fill mb-3" data-bs-toggle="tabs">
                                        <li class="nav-item">
                                            <a href="#tab-upload" class="nav-link active" data-bs-toggle="tab">
                                                <i class="ti ti-upload me-2"></i> Upload Dokumen
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="#tab-manual" class="nav-link" data-bs-toggle="tab">
                                                <i class="ti ti-keyboard me-2"></i> Tulis Manual
                                            </a>
                                        </li>
                                    </ul>
                                    
                                    <div class="tab-content">
                                        <!-- Tab Upload Dokumen -->
                                        <div class="tab-pane active show" id="tab-upload">
                                            <div class="border-2 border-dashed bg-light rounded-3 p-5 text-center position-relative" style="transition: all 0.3s;" id="dropzone-area">
                                                <input type="file" name="document_file" id="document_file" class="position-absolute w-100 h-100 top-0 start-0 opacity-0" style="cursor: pointer;" accept=".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt" onchange="updateFileName(this)">
                                                <div class="mb-3 text-primary">
                                                    <i class="ti ti-cloud-upload" style="font-size: 3rem;"></i>
                                                </div>
                                                <h4 class="fw-bold mb-1 text-dark">Pilih atau Tarik File Kesini</h4>
                                                <p class="text-muted small mb-3">Mendukung: PDF, Word (DOCX), Excel (XLSX), CSV, TXT (Max 10MB)</p>
                                                <span id="file-name-display" class="badge bg-white text-primary border px-3 py-2" style="display: none;"></span>
                                                <div class="mt-3">
                                                    <span class="btn btn-primary btn-sm rounded-pill px-4">Telusuri File</span>
                                                </div>
                                            </div>
                                            @error('document_file')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
                                            
                                            @if($isEdit)
                                            <div class="alert alert-warning mt-3 small py-2 mb-0">
                                                <i class="ti ti-info-circle me-1"></i> Mengupload dokumen baru akan <strong>menimpa/menghapus</strong> seluruh isi knowledge base sebelumnya.
                                            </div>
                                            @endif
                                        </div>
                                        
                                        <!-- Tab Manual Text -->
                                        <div class="tab-pane" id="tab-manual">
                                            <p class="small text-muted mb-2">Teks yang Anda masukkan akan dipecah menjadi unit-unit kecil agar mudah dicari oleh AI.</p>
                                            <textarea class="form-control @error('raw_content') is-invalid @enderror" name="raw_content" rows="12" placeholder="Paste teks dokumen Anda di sini...
Contoh text:

Q: Berapa lama estimasi pengiriman?
A: Untuk reguler memakan waktu 2-3 hari kerja.
">{{ old('raw_content', $isEdit ? $rawContent : '') }}</textarea>
                                            <div class="form-text text-muted mt-2"><i class="ti ti-info-circle me-1"></i> Pisahkan paragraf dengan dua kali Enter agar sistem dapat memotong konteks dengan tepat.</div>
                                            @error('raw_content')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="d-grid mt-5">
                                    <button type="submit" class="btn btn-primary btn-lg shadow-sm">
                                        <i class="ti ti-device-floppy me-2"></i> {{ $isEdit ? 'Simpan Perubahan Dokumen' : 'Simpan & Proses Dokumen' }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card shadow-sm border-0 info-card h-100 bg-info text-white bg-opacity-10 align-items-center justify-content-center text-center p-4">
                        <div class="mb-3">
                            <span class="bg-info text-white p-3 rounded-circle d-inline-flex fs-1"><i class="ti ti-bulb"></i></span>
                        </div>
                        <h4 class="fw-bold text-info mb-2">Cara Kerja RAG</h4>
                        <p class="small text-dark text-opacity-75 mb-0 text-start">
                            <strong>Retrieval-Augmented Generation (RAG)</strong> memastikan AI Anda tidak mengarang jawaban.
                            <br><br>
                            1. Teks besar yang Anda paste akan dipecah menjadi "chunks" kecil.<br>
                            2. Saat pelanggan bertanya, AI mencari chunk yang paling cocok.<br>
                            3. AI menyusun kalimat jawaban berdasarkan data akurat dari chunk tersebut.
                        </p>
                    </div>
                </div>
            </div>
</div>
@endsection

@push('scripts')
<script>
    function updateFileName(input) {
        const display = document.getElementById('file-name-display');
        const dropzone = document.getElementById('dropzone-area');
        
        if (input.files && input.files.length > 0) {
            display.innerHTML = '<i class="ti ti-file me-1"></i> ' + input.files[0].name;
            display.style.display = 'inline-block';
            dropzone.classList.replace('bg-light', 'bg-primary-lt');
            dropzone.style.borderColor = '#0d6efd';
            
            // Clear textarea to prevent conflicting inputs
            document.querySelector('textarea[name="raw_content"]').value = '';
        } else {
            display.style.display = 'none';
            dropzone.classList.replace('bg-primary-lt', 'bg-light');
            dropzone.style.borderColor = '#dee2e6';
        }
    }

    // Add drag and drop visual cues
    const dropzone = document.getElementById('dropzone-area');
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropzone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropzone.addEventListener(eventName, () => {
            dropzone.classList.add('bg-primary-lt', 'border-primary');
        }, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropzone.addEventListener(eventName, () => {
            dropzone.classList.remove('bg-primary-lt', 'border-primary');
        }, false);
    });
</script>
@endpush