@extends('admin.layouts.app')

@section('title', 'Yeni Duyuru - CBL Admin Panel')
@section('content')
<div class="space-y-6">
    <!-- Page header -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Yeni Duyuru</h1>
                    <p class="mt-1 text-sm text-gray-500">Yeni bir e-bülten duyurusu oluşturun.</p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ route('admin.newsletter') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 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>
                        Geri Dön
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="bg-white shadow rounded-lg">
        <form action="{{ route('admin.newsletter.store') }}" method="POST" enctype="multipart/form-data" onsubmit="showLoading(); showProgress();" class="space-y-6">
            @csrf
            <div class="px-4 py-5 sm:p-6">
                <div class="grid grid-cols-1 gap-6">
                    <div>
                        <label for="Duyuru_Basligi" class="block text-sm font-medium text-gray-700">Duyuru Başlığı</label>
                        <input type="text" name="Duyuru_Basligi" id="Duyuru_Basligi" value="{{ old('Duyuru_Basligi') }}" 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" placeholder="Duyuru başlığını girin (HTML kodları otomatik temizlenir)">
                        @error('Duyuru_Basligi')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="Hitap_Sekli" class="block text-sm font-medium text-gray-700">Hitap Şekli</label>
                        <input type="text" name="Hitap_Sekli" id="Hitap_Sekli" value="{{ old('Hitap_Sekli') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Örn: Değerli üyelerimiz">
                        @error('Hitap_Sekli')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="Duyuru_Detayi" class="block text-sm font-medium text-gray-700">Duyuru Detayı</label>
                        <textarea name="Duyuru_Detayi" id="Duyuru_Detayi" rows="6" 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" placeholder="Duyuru detayını girin (HTML kodları otomatik temizlenir)">{{ old('Duyuru_Detayi') }}</textarea>
                        @error('Duyuru_Detayi')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                <div>
                        <label for="Duyuru_Resmi_file" class="block text-sm font-medium text-gray-700">Duyuru Resmi</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="Duyuru_Resmi_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="Duyuru_Resmi_file" name="Duyuru_Resmi_file" type="file" class="sr-only" accept="image/*" onchange="previewNewsletterImage(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 -->
                        <div id="newsletterImagePreview" 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="newsletterPreviewImage" 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="newsletterFileName" class="text-sm text-gray-500"></p>
                                </div>
                            </div>
                        </div>

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

                <div>
                        <label for="Resim_Yeri" class="block text-sm font-medium text-gray-700">Resim Yeri</label>
                        <input type="text" name="Resim_Yeri" id="Resim_Yeri" value="{{ old('Resim_Yeri') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Resim konumu">
                        @error('Resim_Yeri')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                            <label for="Kimden_Adi" class="block text-sm font-medium text-gray-700">Kimden (Ad)</label>
                            <input type="text" name="Kimden_Adi" id="Kimden_Adi" value="{{ old('Kimden_Adi') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Gönderen adı">
                            @error('Kimden_Adi')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                            <label for="Kimden" class="block text-sm font-medium text-gray-700">Kimden (Kullanıcı)</label>
                            <input type="text" name="Kimden" id="Kimden" value="{{ old('Kimden') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Gönderen kullanıcı">
                            @error('Kimden')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

                    <div>
                        <label for="Duyuru_Linki" class="block text-sm font-medium text-gray-700">Duyuru Linki</label>
                        <input type="url" name="Duyuru_Linki" id="Duyuru_Linki" value="{{ old('Duyuru_Linki') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="https://example.com/duyuru">
                        @error('Duyuru_Linki')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div>
                            <label for="Kacinci_Kisi" class="block text-sm font-medium text-gray-700">Kaçıncı Kişi</label>
                            <input type="number" name="Kacinci_Kisi" id="Kacinci_Kisi" value="{{ old('Kacinci_Kisi') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="0">
                            @error('Kacinci_Kisi')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="Kac_Saniye" class="block text-sm font-medium text-gray-700">Kaç Saniye</label>
                            <input type="number" name="Kac_Saniye" id="Kac_Saniye" value="{{ old('Kac_Saniye') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="0">
                            @error('Kac_Saniye')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="Kac_Email" class="block text-sm font-medium text-gray-700">Kaç Email</label>
                            <input type="number" name="Kac_Email" id="Kac_Email" value="{{ old('Kac_Email') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="0">
                            @error('Kac_Email')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="Grup" class="block text-sm font-medium text-gray-700">Grup</label>
                            <select name="Grup" id="Grup" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                                <option value="">Seçiniz</option>
                                <option value="1" {{ old('Grup') == '1' ? 'selected' : '' }}>Genel</option>
                                <option value="2" {{ old('Grup') == '2' ? 'selected' : '' }}>Üyeler</option>
                                <option value="3" {{ old('Grup') == '3' ? 'selected' : '' }}>VIP</option>
                                <option value="4" {{ old('Grup') == '4' ? 'selected' : '' }}>Özel</option>
                            </select>
                            @error('Grup')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md 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>
                    Kaydet
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

<script>
function previewNewsletterImage(input) {
    const preview = document.getElementById('newsletterImagePreview');
    const previewImg = document.getElementById('newsletterPreviewImage');
    const fileName = document.getElementById('newsletterFileName');

    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 fi = document.getElementById('Duyuru_Resmi_file');
    if (!fi) return;
    const dropZone = fi.parentElement.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');
        if (e.dataTransfer.files && e.dataTransfer.files[0]) { fi.files = e.dataTransfer.files; previewNewsletterImage(fi); }
    });
});
</script>