

<?php $__env->startSection('title', 'Manajemen Keluhan Pelanggan'); ?>
<?php $__env->startSection('page_heading', 'CRM Reaktif: Pusat Resolusi Keluhan & Feedback'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">

    <?php if(session('success')): ?>
    <div class="bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm p-4 rounded-xl font-semibold shadow-sm">
        ✅ <?php echo e(session('success')); ?>

    </div>
    <?php endif; ?>

    <!-- 📋 TABEL DAFTAR KELUHAN -->
    <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h2 class="font-bold text-gray-800 text-sm">Daftar Antrean Komplain Konsumen</h2>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-gray-600">
                <thead class="bg-gray-100 text-[10px] text-gray-700 uppercase font-bold border-b border-gray-200">
                    <tr>
                        <th class="px-6 py-3">Pelanggan & Nota</th>
                        <th class="px-6 py-3">Judul Aduan</th>
                        <th class="px-6 py-3">Isi Keluhan</th>
                        <th class="px-6 py-3 text-center">Status CRM</th>
                        <th class="px-6 py-3">Solusi Admin</th>
                        <th class="px-6 py-3 text-center">Tindakan</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <?php $__empty_1 = true; $__currentLoopData = $keluhans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $klh): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <tr class="hover:bg-gray-50/70 font-medium text-gray-900 items-start">
                        <!-- Kolom Pelanggan -->
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="block font-bold text-gray-900"><?php echo e($klh->pelanggan->nama); ?></span>
                            <span class="font-mono text-[10px] text-blue-600 block mt-0.5">#TRX-<?php echo e($klh->transaksi_id); ?></span>
                        </td>
                        <!-- Judul -->
                        <td class="px-6 py-4 font-bold text-gray-800"><?php echo e($klh->judul_keluhan); ?></td>
                        <!-- Isi Keluhan -->
                        <td class="px-6 py-4 max-w-xs whitespace-normal text-gray-600"><?php echo e($klh->isi_keluhan); ?></td>
                        <!-- Status -->
                        <td class="px-6 py-4 text-center">
                            <?php if($klh->status == 'terbuka'): ?>
                            <span class="px-2 py-0.5 text-[9px] font-black bg-red-100 text-red-700 rounded border border-red-200 uppercase">Terbuka</span>
                            <?php elseif($klh->status == 'diproses'): ?>
                            <span class="px-2 py-0.5 text-[9px] font-black bg-amber-100 text-amber-700 rounded border border-amber-200 uppercase">Diproses</span>
                            <?php else: ?>
                            <span class="px-2 py-0.5 text-[9px] font-black bg-emerald-100 text-emerald-700 rounded border border-emerald-200 uppercase">Selesai</span>
                            <?php endif; ?>
                        </td>
                        <!-- Solusi Terpasang -->
                        <td class="px-6 py-4 max-w-xs whitespace-normal italic text-slate-500">
                            <?php echo e($klh->solusi_admin ?? '— Belum ada tanggapan resmi —'); ?>

                        </td>
                        <!-- Form Tindakan Langsung -->
                        <td class="px-6 py-4 text-center">
                            <?php if($klh->status != 'selesai'): ?>
                            <button onclick="openModal('<?php echo e($klh->id); ?>', '<?php echo e($klh->judul_keluhan); ?>')" class="bg-slate-950 text-white px-2.5 py-1.5 rounded-md text-[10px] font-black hover:bg-slate-800 transition shadow-sm">
                                💬 Jawab
                            </button>
                            <?php else: ?>
                            <span class="text-xs text-emerald-600 font-bold">Closed Arrived</span>
                            <?php endif; ?>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <tr>
                        <td colspan="6" class="px-6 py-8 text-center text-gray-400 font-medium">
                            😇 Bersih! Tidak ada keluhan atau komplain yang masuk dari pelanggan saat ini.
                        </td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 📦 POPUP MODAL INTERAKTIF BALAS KELUHAN -->
<div id="modal-solusi" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
    <div class="bg-white border border-gray-200 rounded-xl max-w-md w-full p-6 shadow-xl space-y-4">
        <div class="flex justify-between items-center border-b border-gray-100 pb-2">
            <h3 class="font-bold text-gray-900 text-sm">Form Solusi CRM Reaktif</h3>
            <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 text-sm font-bold">✕</button>
        </div>

        <p class="text-[11px] text-gray-500 font-medium">Menanggapi keluhan: <span id="modal-judul" class="font-bold text-gray-800"></span></p>

        <form id="form-solusi" method="POST" class="space-y-4">
            <?php echo csrf_field(); ?>
            <div>
                <label class="block text-xs font-bold text-gray-700 mb-1">Pilih Status Penanganan</label>
                <select name="status" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-xs bg-white focus:ring-2 focus:ring-blue-500 outline-none">
                    <option value="diproses">🛠️ Proses Pengaduan (Diproses)</option>
                    <option value="selesai">✅ Masalah Selesai / Kompensasi Diterima (Selesai)</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-bold text-gray-700 mb-1">Solusi / Kompensasi Untuk Pelanggan</label>
                <textarea name="solusi_admin" rows="4" placeholder="Tulis tanggapan atau solusi resmi di sini (misal: Barang akan dikirim ulang / Saldo poin di-refund)..." required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-xs focus:ring-2 focus:ring-blue-500 outline-none"></textarea>
            </div>

            <div class="flex justify-end gap-2 pt-2">
                <button type="button" onclick="closeModal()" class="px-3 py-1.5 bg-gray-100 text-gray-700 font-bold rounded-lg text-xs hover:bg-gray-200 transition">Batal</button>
                <button type="submit" class="px-4 py-1.5 bg-blue-600 text-white font-black rounded-lg text-xs hover:bg-blue-700 transition shadow-md">Kirim Solusi</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openModal(id, judul) {
        document.getElementById('modal-judul').innerText = judul;
        document.getElementById('form-solusi').action = "<?php echo e(url('/admin/keluhan/solusi')); ?>/" + id;
        document.getElementById('modal-solusi').classList.remove('hidden');
    }

    function closeModal() {
        document.getElementById('modal-solusi').classList.add('hidden');
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.backend', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\JOKI\2026\della\megamart-crm\resources\views/admin/keluhan_index.blade.php ENDPATH**/ ?>