@extends('layouts.madar')

@section('title', 'تحليل الملفات')
@section('page_title', 'ذكاء الملفات')

@section('content')
<div class="grid gap-6 lg:grid-cols-3">
    <div class="space-y-4 lg:col-span-1">
        <form id="files-upload-form" class="glass-card p-6">
            <h2 class="mb-4 font-bold">رفع ملف</h2>
            <label class="flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-white/15 bg-black/20 p-8 hover:border-cyan-500/40">
                <span class="text-3xl">📎</span>
                <span class="mt-2 text-sm text-zinc-400">PDF · DOCX · TXT · صورة</span>
                <input type="file" class="hidden" accept=".pdf,.doc,.docx,.txt,.png,.jpg,.jpeg">
            </label>
            <div id="upload-progress" class="mt-3 hidden h-1 w-0 rounded-full bg-gradient-to-l from-violet-500 to-cyan-400"></div>
            <button type="submit" class="neon-btn mt-4 w-full">رفع وتحليل</button>
        </form>
        <div id="files-list" class="max-h-96 space-y-2 overflow-y-auto"></div>
    </div>
    <div class="lg:col-span-2">
        <div id="file-result" class="glass-card hidden min-h-[20rem] p-6">
            <p class="text-zinc-500">اختر ملفاً لعرض الملخص</p>
        </div>
        <form id="file-qa-form" class="mt-4 glass-card flex gap-2 p-4">
            <input id="file-question" type="text" class="madar-input flex-1" placeholder="اسأل عن محتوى الملف...">
            <button type="submit" class="neon-btn">سؤال</button>
        </form>
    </div>
</div>
@endsection

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