@extends('admin.layouts.app')

@section('breadcrumbs')
    <a href="{{ route('admin.dashboard') }}" class="hover:underline">Dashboard</a>
    <span class="mx-2">/</span>
    <a href="{{ route('admin.static-pages') }}" class="hover:underline">Sabit Sayfalar</a>
    <span class="mx-2">/</span>
    <span class="text-slate-700">Yeni</span>
@endsection
@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Yeni Sabit Sayfa</h1>
            <p class="text-gray-600">Yeni bir sabit sayfa oluşturun</p>
        </div>
        <a href="{{ route('admin.static-pages') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-medium py-2 px-4 rounded-lg">
            Geri Dön
        </a>
    </div>

    <!-- Form -->
    <div class="bg-white shadow-sm rounded-lg">
        <form action="{{ route('admin.static-pages.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            <div class="px-4 py-5 sm:p-6 space-y-6">
                <!-- Title Field -->
                <div>
                    <label for="hBaslik" class="block text-sm font-medium text-gray-700">
                        Sayfa Başlığı
                    </label>
                    <input type="text" name="hBaslik" id="hBaslik" value="{{ old('hBaslik') }}" required
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-gray-500 focus:ring-gray-500">
                    @error('hBaslik')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Summary Field -->
                <div>
                    <label for="hKisa" class="block text-sm font-medium text-gray-700">
                        Sayfa Özeti
                    </label>
                    <textarea name="hKisa" id="hKisa" rows="3"
                              class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-gray-500 focus:ring-gray-500">{{ old('hKisa') }}</textarea>
                    @error('hKisa')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Content Field -->
                <div>
                    <label for="haber" class="block text-sm font-medium text-gray-700">
                        Sayfa İçeriği
                    </label>
                    <textarea name="haber" id="haber" rows="10" required
                              class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-gray-500 focus:ring-gray-500">{{ old('haber') }}</textarea>
                    @error('haber')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Image Field -->
                <div>
                    <label for="resim_file" class="block text-sm font-medium text-gray-700">
                        Görsel Yükle
                    </label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-gray-500 transition-colors duration-200">
                        <div class="space-y-1 text-center">
                            <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="resim_file" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
                                    <span>Görsel Seç</span>
                                    <input id="resim_file" name="resim_file" type="file" class="sr-only" accept="image/*" onchange="previewImage(this)">
                                </label>
                                <p class="pl-1">veya sürükleyip bırakın</p>
                            </div>
                            <p class="text-xs text-gray-500">PNG, JPG, GIF, WebP (Maksimum 2MB)</p>
                        </div>
                    </div>

                    <!-- Görsel Önizleme Alanı -->
                    <div id="imagePreview" class="mt-3 p-4 bg-gray-50 rounded-lg hidden">
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0">
                                <img id="previewImage" src="" alt="Önizleme" class="h-20 w-20 rounded-lg object-cover border border-gray-200">
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900">Seçilen Görsel</p>
                                <p id="fileName" class="text-sm text-gray-500"></p>
                                <p class="text-xs text-gray-400 mt-1">Görsel otomatik olarak yüklenecek.</p>
                            </div>
                        </div>
                    </div>

                    @error('resim_file')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Status Field -->
                <div class="flex items-center">
                    <input type="checkbox" name="durum" id="durum" value="1" {{ old('durum', true) ? 'checked' : '' }}
                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                    <label for="durum" class="ml-2 block text-sm text-gray-900">
                        Aktif Sayfa
                    </label>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-end space-x-3 pt-6">
                <a href="{{ route('admin.static-pages') }}"
                   class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-medium py-2 px-4 rounded-lg">
                    İptal
                </a>
                <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg">
                    Sayfa Oluştur
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

<script>
function previewImage(input) {
    const preview = document.getElementById('imagePreview');
    const previewImg = document.getElementById('previewImage');
    const fileName = document.getElementById('fileName');

    if (input.files && input.files[0]) {
        const file = input.files[0];
        if (file.size > 2 * 1024 * 1024) { alert('Dosya boyutu 2MB\'dan büyük olamaz!'); input.value=''; return; }
        const allowed = ['image/jpeg','image/jpg','image/png','image/gif','image/webp'];
        if (!allowed.includes(file.type)) { alert('Sadece JPG, PNG, GIF ve WebP formatları desteklenir!'); input.value=''; return; }
        const reader = new FileReader();
        reader.onload = function(e){ previewImg.src = e.target.result; fileName.textContent = file.name; preview.classList.remove('hidden'); };
        reader.readAsDataURL(file);
    } else {
        preview.classList.add('hidden');
    }
}

document.addEventListener('DOMContentLoaded', function(){
    const fileInput = document.getElementById('resim_file');
    if (!fileInput) return;
    const dropZone = fileInput.parentElement.parentElement.parentElement;
    dropZone.addEventListener('dragover', function(e){ e.preventDefault(); this.classList.add('border-gray-500'); });
    dropZone.addEventListener('dragleave', function(e){ e.preventDefault(); this.classList.remove('border-gray-500'); });
    dropZone.addEventListener('drop', function(e){
        e.preventDefault(); this.classList.remove('border-gray-500');
        if (e.dataTransfer.files && e.dataTransfer.files[0]) { fileInput.files = e.dataTransfer.files; previewImage(fileInput); }
    });
});
</script>