@extends('layouts.madar')

@section('title', 'توليد الصور')
@section('page_title', 'استوديو الصور')

@section('content')
<div id="image-upgrade" class="mb-4 hidden rounded-xl border border-violet-500/30 bg-violet-500/10 px-4 py-3 text-sm">
    هذه الميزة تتطلب خطة Pro أو Ultra. <a href="{{ route('web.pricing') }}" class="font-bold text-cyan-400 underline">ترقية الآن</a>
</div>
<div class="grid gap-6 lg:grid-cols-3">
    <form id="image-form" class="glass-card space-y-4 p-6 lg:col-span-1">
        <div>
            <label class="mb-1 block text-xs text-zinc-400">وصف الصورة</label>
            <textarea id="image-prompt" rows="4" required class="madar-input" placeholder="شعار تقني لشركة مدار..."></textarea>
        </div>
        <label class="flex items-center gap-2 text-sm">
            <input type="checkbox" id="image-enhance" checked class="rounded">
            تحسين الـ Prompt تلقائياً (AI)
        </label>
        <p id="image-enhanced-preview" class="hidden rounded-lg bg-black/30 p-3 text-xs text-zinc-400"></p>
        <div>
            <label class="mb-1 block text-xs text-zinc-400">النمط</label>
            <select id="image-style" class="madar-input"></select>
        </div>
        <div class="grid grid-cols-2 gap-3">
            <div>
                <label class="mb-1 block text-xs text-zinc-400">الأبعاد</label>
                <select id="image-ratio" class="madar-input">
                    <option value="1:1">1:1</option>
                    <option value="16:9">16:9</option>
                    <option value="9:16">9:16</option>
                </select>
            </div>
            <div>
                <label class="mb-1 block text-xs text-zinc-400">الجودة</label>
                <select id="image-quality" class="madar-input">
                    <option value="medium">متوسط</option>
                    <option value="high" selected>احترافي</option>
                </select>
            </div>
        </div>
        <button type="submit" class="neon-btn w-full">توليد الصورة</button>
    </form>
    <div class="lg:col-span-2">
        <h2 class="mb-4 font-bold">المعرض</h2>
        <div id="image-gallery" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"></div>
    </div>
</div>
@endsection

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