@extends('layouts.admin')

@section('title', 'Yeni İlan Oluştur')
@section('page-title', 'Yeni İlan Oluştur')

@section('content')

<div class="max-w-3xl mt-2">

    {{-- Breadcrumb --}}
    <div class="flex items-center gap-2 mb-5 text-sm">
        <a href="{{ route('admin.ilanlar.index') }}" class="text-gray-400 hover:text-primary transition-colors flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            İlanlara Geri Dön
        </a>
        <span class="text-gray-300">/</span>
        <span class="text-gray-600 font-medium">Yeni İlan</span>
    </div>

    @if($errors->any())
    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm mb-4">
        <p class="font-medium mb-1">Lütfen aşağıdaki hataları düzeltin:</p>
        <ul class="list-disc list-inside space-y-0.5">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form method="POST" action="{{ route('admin.ilanlar.store') }}" enctype="multipart/form-data" class="space-y-6">
        @csrf

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-5">
            <h2 class="font-bold text-gray-800 border-b border-gray-100 pb-3">Temel Bilgiler</h2>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">İlan Başlığı <span class="text-red-500">*</span></label>
                <input type="text" name="title" value="{{ old('title') }}"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('title') border-red-400 @enderror"
                       placeholder="Örn: Kıdemli Yazılım Geliştirici">
                @error('title')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Departman <span class="text-red-500">*</span></label>
                    <input type="text" name="department" value="{{ old('department') }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('department') border-red-400 @enderror"
                           placeholder="Örn: Teknoloji, İK, Pazarlama">
                    @error('department')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Lokasyon <span class="text-red-500">*</span></label>
                    <input type="text" name="location" value="{{ old('location') }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('location') border-red-400 @enderror"
                           placeholder="Örn: İstanbul, Uzaktan">
                    @error('location')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Çalışma Şekli <span class="text-red-500">*</span></label>
                    <select name="employment_type"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('employment_type') border-red-400 @enderror">
                        <option value="">Seçiniz</option>
                        @foreach(['Tam Zamanlı', 'Yarı Zamanlı', 'Staj', 'Uzaktan', 'Hibrit', 'Ofis'] as $type)
                        <option value="{{ $type }}" {{ old('employment_type') == $type ? 'selected' : '' }}>{{ $type }}</option>
                        @endforeach
                    </select>
                    @error('employment_type')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Çalışma Saatleri</label>
                    <input type="text" name="working_hours" value="{{ old('working_hours') }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                           placeholder="Örn: 09:00 - 18:00">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Maaş Aralığı</label>
                <input type="text" name="salary_range" value="{{ old('salary_range') }}"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                       placeholder="Örn: 30.000 - 45.000 TL">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Son Başvuru Tarihi</label>
                <input type="date" name="closes_at" value="{{ old('closes_at') }}"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-5">
            <h2 class="font-bold text-gray-800 border-b border-gray-100 pb-3">İlan İçeriği</h2>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Pozisyon Açıklaması <span class="text-red-500">*</span></label>
                <textarea name="description" rows="8"
                          class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('description') border-red-400 @enderror"
                          placeholder="Pozisyon hakkında detaylı açıklama...">{{ old('description') }}</textarea>
                @error('description')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Aranan Nitelikler <span class="text-red-500">*</span></label>
                <textarea name="requirements" rows="8"
                          class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('requirements') border-red-400 @enderror"
                          placeholder="Adayda aradığımız nitelikler...">{{ old('requirements') }}</textarea>
                @error('requirements')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        {{-- Ek Belgeler & Özel Form --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-5">
            <h2 class="font-bold text-gray-800 border-b border-gray-100 pb-3">Başvuru & Belgeler</h2>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Görüşmeye Gelirken Getirilmesi Gereken Belgeler</label>
                <p class="text-xs text-gray-400 mb-2">Görüşmeye davet edilen adayların getirmesi gereken belgeleri yazın. Her satıra bir belge yazabilirsiniz.</p>
                <textarea name="required_documents" rows="5"
                          class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                          placeholder="Örn:&#10;Güncel CV (2 adet)&#10;Diploma veya mezuniyet belgesi fotokopisi&#10;Nüfus cüzdanı fotokopisi&#10;Referans mektubu (varsa)&#10;Sertifikalar (varsa)">{{ old('required_documents') }}</textarea>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Özel Başvuru Formu Yükle <span class="text-gray-400 font-normal">(İsteğe bağlı)</span></label>
                <p class="text-xs text-gray-400 mb-2">Kendi hazırladığınız başvuru formunu yükleyin. Yüklenmezse sistem otomatik form oluşturur. PDF, DOC veya DOCX — maks. 10MB.</p>
                <label class="flex items-center gap-3 w-full px-4 py-3 border-2 border-dashed border-gray-200 rounded-xl cursor-pointer hover:border-orange-400 hover:bg-orange-50 transition-colors group">
                    <svg class="w-5 h-5 text-gray-400 group-hover:text-orange-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                    <span class="text-sm text-gray-500 group-hover:text-orange-600" id="create-form-label">Dosya seçin (PDF, DOC, DOCX)</span>
                    <input type="file" name="custom_application_form" accept=".pdf,.doc,.docx" class="hidden"
                           onchange="document.getElementById('create-form-label').textContent = this.files[0]?.name || 'Dosya seçin (PDF, DOC, DOCX)'">
                </label>
                @error('custom_application_form')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            {{-- Şartlar / Koşullar PDF --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Şartlar / Koşullar PDF <span class="text-gray-400 font-normal">(İsteğe bağlı)</span></label>
                <p class="text-xs text-gray-400 mb-2">İş başvurusu şartlarını veya koşullarını içeren PDF dosyası. Maks. 10MB.</p>
                <label class="flex items-center gap-3 px-4 py-3 border-2 border-dashed border-gray-200 rounded-xl cursor-pointer hover:border-orange-400 hover:bg-orange-50 transition-colors group">
                    <svg class="w-5 h-5 text-gray-400 group-hover:text-orange-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                    <span class="text-sm text-gray-500 group-hover:text-orange-600" id="create-conditions-label">PDF dosyası seçin</span>
                    <input type="file" name="conditions_pdf" accept=".pdf" class="hidden"
                           onchange="document.getElementById('create-conditions-label').textContent = this.files[0]?.name || 'PDF dosyası seçin'">
                </label>
                @error('conditions_pdf')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        {{-- İlana Özel Form Ayarları --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-4">
            <div class="flex items-center justify-between border-b border-gray-100 pb-3">
                <div>
                    <h2 class="font-bold text-gray-800">İlana Özel Başvuru Formu Ayarları</h2>
                    <p class="text-xs text-gray-400 mt-0.5">Bu ilan için global form ayarlarını geçersiz kılmak istiyorsanız etkinleştirin.</p>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="use_custom_form_settings" id="use_custom_form_settings" value="1"
                           {{ old('use_custom_form_settings') ? 'checked' : '' }}
                           onchange="document.getElementById('job-form-settings-panel').style.display = this.checked ? '' : 'none'"
                           class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>
                </label>
            </div>

            <div id="job-form-settings-panel" style="{{ old('use_custom_form_settings') ? '' : 'display:none' }}" class="space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Şirket Adı</label>
                        <input type="text" name="jfs_company_name" value="{{ old('jfs_company_name') }}"
                               placeholder="Markamama"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Form Başlığı</label>
                        <input type="text" name="jfs_form_title" value="{{ old('jfs_form_title') }}"
                               placeholder="Başvuru Formu"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Form Şablonu</label>
                    <select name="jfs_form_template" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <option value="classic" {{ old('jfs_form_template') === 'classic' ? 'selected' : '' }}>Klasik</option>
                        <option value="modern" {{ old('jfs_form_template') === 'modern' ? 'selected' : '' }}>Modern</option>
                        <option value="minimal" {{ old('jfs_form_template') === 'minimal' ? 'selected' : '' }}>Minimal</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Gösterilecek Alanlar</label>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                            <input type="checkbox" name="jfs_show_phone" value="1" {{ old('jfs_show_phone', '1') ? 'checked' : '' }} class="rounded border-gray-300 text-orange-500">
                            Telefon
                        </label>
                        <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                            <input type="checkbox" name="jfs_show_linkedin" value="1" {{ old('jfs_show_linkedin', '1') ? 'checked' : '' }} class="rounded border-gray-300 text-orange-500">
                            LinkedIn
                        </label>
                        <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                            <input type="checkbox" name="jfs_show_cover_letter" value="1" {{ old('jfs_show_cover_letter', '1') ? 'checked' : '' }} class="rounded border-gray-300 text-orange-500">
                            Ön Yazı
                        </label>
                        <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
                            <input type="checkbox" name="jfs_show_source" value="1" {{ old('jfs_show_source', '1') ? 'checked' : '' }} class="rounded border-gray-300 text-orange-500">
                            Bizi Nereden Duydunuz
                        </label>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Alt Bilgi Metni</label>
                    <input type="text" name="jfs_footer_text" value="{{ old('jfs_footer_text') }}"
                           placeholder="Başvurunuz için teşekkür ederiz."
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" name="action" value="draft" class="bg-gray-600 text-white px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-700 transition-colors">
                Taslak Olarak Kaydet
            </button>
            <button type="submit" name="action" value="publish" class="bg-primary text-white px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors">
                Yayınla
            </button>
            <a href="{{ route('admin.ilanlar.index') }}" class="text-gray-500 hover:text-gray-700 text-sm">İptal</a>
        </div>
    </form>
</div>

@endsection
