@extends('layouts.madar')

@section('title', 'محادثة AI')
@section('page_title', 'محادثة AI')

@section('content')
<div id="chat-upgrade" class="mb-4 hidden rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
    وصلت للحد اليومي. <a href="{{ route('web.pricing') }}" class="font-bold underline">ترقية الخطة</a>
</div>
<div class="flex h-[calc(100vh-10rem)] gap-4 overflow-hidden rounded-2xl border border-white/10 bg-black/20">
    <aside class="hidden w-64 flex-shrink-0 flex-col border-l border-white/10 bg-madar-900/50 p-3 md:flex">
        <div class="mb-3 flex gap-2">
            <button type="button" id="chat-new" class="neon-btn flex-1 !py-2 !text-xs">محادثة جديدة</button>
        </div>
        <div id="chat-sidebar-list" class="flex-1 space-y-1 overflow-y-auto"></div>
        <div class="mt-2 flex gap-2 border-t border-white/10 pt-2">
            <button type="button" id="chat-rename" class="flex-1 rounded-lg bg-white/5 py-1 text-xs">إعادة تسمية</button>
            <button type="button" id="chat-delete" class="flex-1 rounded-lg bg-red-500/10 py-1 text-xs text-red-400">حذف</button>
        </div>
    </aside>
    <div class="flex min-w-0 flex-1 flex-col">
        <div class="flex items-center justify-between border-b border-white/10 px-4 py-3">
            <h2 id="chat-title" class="font-bold">محادثة جديدة</h2>
            <span id="chat-quota" class="text-xs text-zinc-500"></span>
        </div>
        <div id="chat-messages" class="flex-1 overflow-y-auto p-4"></div>
        <div id="chat-typing" class="hidden px-4 pb-2 text-xs text-zinc-500">مدار يكتب...
        </div>
        <div id="chat-suggestions" class="flex flex-wrap gap-2 px-4 pb-2"></div>
        <form id="chat-form" class="border-t border-white/10 p-4">
            <div class="flex gap-2">
                <textarea id="chat-input" rows="2" class="madar-input flex-1 resize-none" placeholder="اكتب رسالتك..."></textarea>
                <button type="submit" class="neon-btn self-end">إرسال</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('head')
    @vite('resources/js/madar-chat.js')
@endpush