@extends('layouts.madar')

@section('title', 'أدوات AI')
@section('page_title', 'مكتبة الأدوات')

@section('content')
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
    @foreach ($tools as $tool)
        @if (!empty($tool['route']))
            <a href="{{ route($tool['route']) }}" class="glass-card block p-5 transition hover:border-violet-500/30">
                <span class="text-2xl">{{ $tool['icon'] }}</span>
                <p class="mt-3 font-bold">{{ $tool['title'] }}</p>
                <p class="mt-1 text-xs text-zinc-500">تحليل أسلوبي + صياغة بشرية</p>
            </a>
        @else
            <button type="button" class="tool-open glass-card p-5 text-start transition hover:border-violet-500/30"
                    data-title="{{ $tool['title'] }}" data-prompt="{{ $tool['prompt'] ?? '' }}">
                <span class="text-2xl">{{ $tool['icon'] }}</span>
                <p class="mt-3 font-bold">{{ $tool['title'] }}</p>
            </button>
        @endif
    @endforeach
</div>

<div id="tool-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/70 p-4">
    <div class="glass-card w-full max-w-lg p-6">
        <h3 id="tool-modal-title" class="text-lg font-bold"></h3>
        <form id="tool-form" class="mt-4 space-y-4">
            <textarea id="tool-input" rows="5" required class="madar-input" placeholder="أدخل النص أو الفكرة..."></textarea>
            <div class="flex gap-2">
                <button type="button" id="tool-close" class="neon-btn-outline flex-1">إلغاء</button>
                <button type="submit" class="neon-btn flex-1">توليد عبر AI</button>
            </div>
        </form>
        <div id="tool-output" class="mt-4 hidden max-h-64 overflow-y-auto rounded-xl bg-black/30 p-4 text-sm whitespace-pre-wrap"></div>
    </div>
</div>
@endsection

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