@extends('layouts.landlord')
@section('title', 'القوالب')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h2 class="text-2xl font-bold">القوالب (Themes)</h2>
</div>

@if ($errors->any())
    <div class="mb-4 bg-red-100 text-red-700 px-4 py-2 rounded">{{ $errors->first() }}</div>
@endif

<form method="post" action="{{ route('landlord.themes.store') }}" enctype="multipart/form-data" class="bg-white p-5 rounded-lg shadow mb-6 flex items-end gap-4">
    @csrf
    <div class="flex-1">
        <label class="block text-sm font-medium mb-1">رفع قالب جديد (.zip يحتوي theme.json)</label>
        <input type="file" name="zip_file" accept=".zip" required class="w-full border rounded p-2">
    </div>
    <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="is_premium" value="1"> قالب مدفوع (خطط عليا فقط)
    </label>
    <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded">رفع</button>
</form>

<div class="grid grid-cols-3 gap-4">
    @foreach ($themes as $theme)
    <div class="bg-white rounded-lg shadow p-4">
        <div class="h-32 bg-gray-100 rounded mb-3 flex items-center justify-center text-gray-400 text-xs">
            {{ $theme->preview_image ? '' : 'لا توجد معاينة' }}
        </div>
        <h3 class="font-bold">{{ $theme->name }}</h3>
        <p class="text-xs text-gray-500" dir="ltr">{{ $theme->slug }}</p>
        <p class="text-xs mt-1">{{ $theme->is_premium ? '💎 مدفوع' : 'مجاني' }}</p>
        <a href="{{ route('landlord.themes.edit', $theme) }}" class="text-blue-600 text-sm hover:underline block mt-2">تعديل</a>
        <form action="{{ route('landlord.themes.destroy', $theme) }}" method="post" class="mt-1" onsubmit="return confirm('متأكد تبي تحذف هذا القالب؟')">
            @csrf @method('DELETE')
            <button class="text-red-600 text-sm hover:underline">حذف</button>
        </form>
    </div>
    @endforeach
</div>
@endsection