@extends('school.layouts.app')

@section('content')
<div class="flex flex-col gap-6">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">AI Chatbot Setup</h2>
            <p class="text-slate-500 text-sm">Teach your bot how to respond to parents and students.</p>
        </div>
    </div>

    <!-- Add New Response Form -->
    <div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm">
        <h3 class="text-sm font-bold text-slate-800 mb-4 uppercase tracking-wider">Add New Auto-Response</h3>
        <form action="{{ route('school.communication.bot_settings.store') }}" method="POST" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            @csrf
            <div>
                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Keywords (comma separated)</label>
                <input type="text" name="keywords" placeholder="e.g. fee, payment, cost" class="w-full px-4 py-2 text-sm rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <div class="md:col-span-1">
                <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Bot Response</label>
                <input type="text" name="response" placeholder="e.g. Fees can be paid via the portal..." class="w-full px-4 py-2 text-sm rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <div class="flex items-end">
                <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded-xl text-sm font-bold hover:bg-indigo-700 transition-all w-full">
                    <i class="fa-solid fa-plus mr-2"></i> Add Response
                </button>
            </div>
        </form>
    </div>

    <!-- Existing Knowledge Base -->
    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
        <table class="w-full text-left border-collapse">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr>
                    <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase">Keywords</th>
                    <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase">Bot Response</th>
                    <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase text-right">Action</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse($knowledge as $item)
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="px-6 py-4">
                        <div class="flex flex-wrap gap-1">
                            @foreach(explode(',', $item->keywords) as $kw)
                                <span class="bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded-md text-[10px] font-bold">{{ trim($kw) }}</span>
                            @endforeach
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-slate-600">{{ $item->response }}</td>
                    <td class="px-6 py-4 text-right">
                        <form action="{{ route('school.communication.bot_settings.delete', $item->id) }}" method="POST" class="inline">
                            @csrf @method('DELETE')
                            <button class="text-red-400 hover:text-red-600 transition-colors"><i class="fa-solid fa-trash-can"></i></button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="px-6 py-10 text-center text-slate-400 text-sm">No auto-responses configured yet.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection