@extends('admin.layouts.app')

@section('title', 'Sabit Sayfa Düzenle - CBL Admin Panel')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-8">
        <h1 class="text-2xl font-semibold text-gray-900">Sabit Sayfa Düzenle</h1>
        <p class="mt-2 text-sm text-gray-700">"{{ $article->hBaslik }}" sayfasını düzenleyin.</p>
    </div>

    <div class="bg-white shadow rounded-lg">
        <form action="{{ route('admin.articles.update', $article->haberID) }}" method="POST" enctype="multipart/form-data" class="space-y-6 p-6">
            @csrf
            @method('PUT')

            <!-- Başlık -->
            <div>
                <label for="hBaslik" class="block text-sm font-medium text-gray-700">Başlık *</label>
                <input type="text" name="hBaslik" id="hBaslik" value="{{ old('hBaslik', $article->hBaslik) }}" required
                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('hBaslik') border-red-300 @enderror"
                       placeholder="Sayfa başlığı">
                @error('hBaslik')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Kısa Açıklama -->
            <div>
                <label for="hKisa" class="block text-sm font-medium text-gray-700">Kısa Açıklama</label>
                <textarea name="hKisa" id="hKisa" rows="3"
                          class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('hKisa') border-red-300 @enderror"
                          placeholder="Sayfa hakkında kısa açıklama">{{ old('hKisa', $article->hKisa) }}</textarea>
                @error('hKisa')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

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

            <!-- Görsel -->
            <div>
                <label for="resim_file" class="block text-sm font-medium text-gray-700">Yeni 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-primary-400 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-primary-600 hover:text-primary-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500">
                                <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>

                <!-- Manuel Dosya Adı Girişi -->
                <div class="mt-4">
                    <label for="resim" class="block text-sm font-medium text-gray-700">Veya Manuel Dosya Adı</label>
                    <input type="text" name="resim" id="resim" value="{{ old('resim', $article->resim) }}"
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('resim') border-red-300 @enderror"
                           placeholder="ornek.jpg (public/assets/media/haber/ klasöründen)">
                    <p class="mt-1 text-sm text-gray-500">Eğer görsel zaten yüklüyse dosya adını buraya yazın.</p>
                </div>

                <!-- Mevcut Görsel Önizleme -->
                @if($article->resim)
                    <div class="mt-3 p-4 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0">
                                <img src="{{ asset('assets/media/haber/' . $article->resim) }}"
                                     alt="{{ $article->hBaslik }}"
                                     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">Mevcut Görsel</p>
                                <p class="text-sm text-gray-500">{{ $article->resim }}</p>
                                <p class="text-xs text-gray-400 mt-1">Yeni görsel yüklerseniz bu görsel değiştirilecek.</p>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="mt-3 p-4 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0">
                                <div class="h-20 w-20 rounded-lg bg-gray-200 flex items-center justify-center">
                                    <i class="fas fa-image text-gray-400 text-xl"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900">Görsel Yok</p>
                                <p class="text-sm text-gray-500">Bu sayfa için henüz görsel yüklenmemiş.</p>
                                <p class="text-xs text-gray-400 mt-1">Yukarıdaki alanı kullanarak görsel yükleyebilirsiniz.</p>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Yeni Görsel Önizleme -->
                <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 Yeni Görsel</p>
                            <p id="fileName" class="text-sm text-gray-500"></p>
                            <p class="text-xs text-gray-400 mt-1">Bu görsel mevcut görseli değiştirecek.</p>
                        </div>
                    </div>
                </div>

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

            <!-- Durum -->
            <div>
                <label for="durum" class="flex items-center">
                    <input type="checkbox" name="durum" id="durum" value="1" {{ old('durum', $article->durum) ? 'checked' : '' }}
                           class="rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50">
                    <span class="ml-2 text-sm text-gray-700">Aktif</span>
                </label>
                <p class="mt-1 text-sm text-gray-500">Bu sayfa aktif olarak görünsün mü?</p>
            </div>

            <!-- Buttons -->
            <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
                <a href="{{ route('admin.articles') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-arrow-left mr-2"></i>
                    İptal
                </a>
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-save mr-2"></i>
                    Güncelle
                </button>
            </div>
        </form>
    </div>
</div>

<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];

        // Dosya boyutu kontrolü (2MB)
        if (file.size > 2 * 1024 * 1024) {
            alert('Dosya boyutu 2MB\'dan büyük olamaz!');
            input.value = '';
            return;
        }

        // Dosya türü kontrolü
        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
        if (!allowedTypes.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');
    }
}

// Drag and drop desteği
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.querySelector('input[type="file"]').parentElement.parentElement;

    dropZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('border-primary-400');
    });

    dropZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.classList.remove('border-primary-400');
    });

    dropZone.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('border-primary-400');

        const files = e.dataTransfer.files;
        if (files.length > 0) {
            const fileInput = document.querySelector('input[type="file"]');
            fileInput.files = files;
            previewImage(fileInput);
        }
    });
});
</script>
@endsection