@extends('layouts.app')
@section('title', 'قالب‌ها')
@section('content')
<div class="flex justify-between mb-4">
    <h1 class="text-xl font-bold">قالب اسناد و ایمیل</h1>
    <a href="{{ route('settings.index') }}" class="text-sm text-blue-600">بازگشت</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold mb-3 text-sm">قالب‌های موجود</h2>
        @forelse($templates as $t)
            <div class="border-b py-2 text-sm">
                <div class="font-medium"><a class="text-blue-600" href="{{ route('settings.templates.edit', $t->id) }}">{{ $t->name }}</a></div>
                <div class="text-xs text-gray-500">{{ $t->type }} @if($t->code) — {{ $t->code }} @endif</div>
            </div>
        @empty
            <p class="text-gray-500 text-sm">قالبی ثبت نشده.</p>
        @endforelse
    </div>
    <div class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold mb-3 text-sm">ایجاد قالب جدید</h2>
        <form method="POST" action="{{ route('settings.templates.store') }}" class="space-y-3 text-sm">
            @csrf
            <div>
                <label class="block mb-1">نوع *</label>
                <select name="type" required class="w-full border rounded px-3 py-2">
                    <option value="technical_proposal">پیشنهاد فنی</option>
                    <option value="financial_proposal">پیشنهاد مالی</option>
                    <option value="invoice">فاکتور</option>
                    <option value="email">ایمیل</option>
                </select>
            </div>
            <div>
                <label class="block mb-1">نام *</label>
                <input type="text" name="name" required class="w-full border rounded px-3 py-2">
            </div>
            <div>
                <label class="block mb-1">کد</label>
                <input type="text" name="code" class="w-full border rounded px-3 py-2">
            </div>
            <div>
                <label class="block mb-1">سربرگ (Header)</label>
                <textarea name="header" rows="2" class="w-full border rounded px-3 py-2" placeholder="{{company_name}} ..."></textarea>
            </div>
            <div>
                <label class="block mb-1">بدنه (با Placeholder)</label>
                <textarea name="body" rows="5" class="w-full border rounded px-3 py-2" placeholder="{{case_number}} {{customer_name}} {{amount}} ..."></textarea>
            </div>
            <div>
                <label class="block mb-1">پاورقی / امضا</label>
                <textarea name="footer" rows="2" class="w-full border rounded px-3 py-2"></textarea>
            </div>
            <div>
                <label class="block mb-1">نوع حساب (برای ایمیل)</label>
                <select name="account_type" class="w-full border rounded px-3 py-2">
                    <option value="">—</option>
                    <option value="internal">داخلی</option>
                    <option value="external">خارجی</option>
                </select>
            </div>
            <label class="flex items-center gap-2"><input type="checkbox" name="is_default" value="1"> قالب پیش‌فرض</label>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">ذخیره قالب</button>
        </form>
    </div>
</div>

<div class="bg-white rounded-lg shadow p-4 mt-6 text-sm">
  <h2 class="font-semibold mb-3">پیش‌نمایش زنده قالب</h2>
  <form method="POST" action="{{ route('settings.templates.preview') }}" target="_blank" class="space-y-2">@csrf
    <textarea name="header" rows="2" class="w-full border rounded px-2 py-1" placeholder="Header با {{company_name}}"></textarea>
    <textarea name="body" rows="4" class="w-full border rounded px-2 py-1" placeholder="Body با {{case_number}} {{customer_name}}"></textarea>
    <textarea name="footer" rows="2" class="w-full border rounded px-2 py-1" placeholder="Footer"></textarea>
    <input name="case_id" placeholder="شناسه پرونده اختیاری برای داده واقعی" class="w-full border rounded px-2 py-1">
    <button class="bg-slate-700 text-white px-3 py-1 rounded">پیش‌نمایش</button>
  </form>
</div>

@endsection