@extends('layouts.app')

@section('title', 'UI Tasarımı Yükle')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div>
        <div class="mb-6">
            <a href="{{ route('sites.ui-designs.index', $site) }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-arrow-left"></i> UI tasarımları listesine dön
            </a>
        </div>

        <h1 class="text-3xl font-semibold text-gray-900 mb-6">UI Tasarımı Yükle</h1>

        <form action="{{ route('sites.ui-designs.store', $site) }}" method="POST" enctype="multipart/form-data" class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            @csrf

            <div class="px-4 py-6 sm:p-8">
                <div class="grid grid-cols-1 gap-x-6 gap-y-8">
                    <div>
                        <label for="name" class="block text-sm font-medium leading-6 text-gray-900">Tasarım Adı</label>
                        <div class="mt-2">
                            <input type="text" name="name" id="name" required value="{{ old('name') }}" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
                            @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="file" class="block text-sm font-medium leading-6 text-gray-900">Tasarım Dosyası</label>
                        <div class="mt-2">
                            <input type="file" name="file" id="file" required accept="image/*,.pdf,.zip" class="block w-full text-sm text-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                            <p class="mt-1 text-xs text-gray-500">JPEG, PNG, GIF, SVG, PDF, ZIP (Max: 20MB)</p>
                            @error('file')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="description" class="block text-sm font-medium leading-6 text-gray-900">Açıklama</label>
                        <div class="mt-2">
                            <textarea name="description" id="description" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">{{ old('description') }}</textarea>
                            @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <div class="flex items-center">
                            <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active') ? 'checked' : '' }} class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <label for="is_active" class="ml-2 block text-sm text-gray-900">
                                Bu tasarımı aktif olarak işaretle
                            </label>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">Aktif tasarım, site sayfaları oluşturulurken kullanılacaktır.</p>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
                <a href="{{ route('sites.ui-designs.index', $site) }}" class="text-sm font-semibold leading-6 text-gray-900">İptal</a>
                <button type="submit" class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500">
                    Yükle
                </button>
            </div>
        </form>
    </div>
</div>
@endsection