@extends('layouts.admin')

@section('title', 'Yeni Departman')
@section('page-title', 'Yeni Departman')

@section('content')
<div class="mt-4 max-w-2xl">
    <div class="mb-4">
        <a href="{{ route('admin.departmanlar.index') }}"
           class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-primary transition-colors">
            <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>
            Departmanlara Dön
        </a>
    </div>

    {{-- Hata mesajı (controller'dan dönen flash) --}}
    @if(session('error'))
    <div class="mb-4 bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm">
        {{ session('error') }}
    </div>
    @endif

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <form method="POST" action="{{ route('admin.departmanlar.store') }}" enctype="multipart/form-data">
            @csrf

            <div class="space-y-5">

                {{-- Departman Adı --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Departman Adı <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="name" value="{{ old('name') }}" required
                           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('name') border-red-400 @enderror">
                    @error('name')
                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Açıklama --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Açıklama</label>
                    <textarea name="description" rows="4"
                              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">{{ old('description') }}</textarea>
                    @error('description')
                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Kapak Görseli --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Kapak Görseli</label>
                    <input type="file" name="cover_image" accept="image/jpeg,image/png,image/webp"
                           id="cover_image_input"
                           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('cover_image') border-red-400 @enderror"
                           onchange="checkFileSize(this, 5); previewImage(this, 'cover_image_preview')">
                    <p class="text-xs text-gray-400 mt-1">JPG, PNG veya WebP. Maks 5MB.</p>
                    <p id="cover_image_size_error" class="text-xs text-red-500 mt-1 hidden">Dosya boyutu 5MB'dan büyük olamaz.</p>
                    @error('cover_image')
                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                    <div id="cover_image_preview" class="mt-2 hidden">
                        <img src="" alt="Önizleme" class="w-24 h-24 rounded-lg object-cover border border-gray-200">
                        <p class="text-xs text-gray-400 mt-1">Seçilen görsel önizlemesi</p>
                    </div>
                </div>

                {{-- Sıralama --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Sıralama</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0"
                           class="w-32 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    <p class="text-xs text-gray-400 mt-1">Küçük sayı önce gösterilir.</p>
                </div>

                {{-- Durum Seçenekleri --}}
                <div class="flex items-center gap-6">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" checked
                               class="w-4 h-4 text-orange-500 rounded border-gray-300 focus:ring-orange-400">
                        <span class="text-sm text-gray-700">Aktif</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="hidden" name="accepts_open_applications" value="0">
                        <input type="checkbox" name="accepts_open_applications" value="1"
                               class="w-4 h-4 text-orange-500 rounded border-gray-300 focus:ring-orange-400">
                        <span class="text-sm text-gray-700">Açık Başvuru Kabul Et</span>
                    </label>
                </div>
            </div>

            <div class="flex items-center gap-3 mt-6 pt-5 border-t border-gray-100">
                <button type="submit"
                        class="bg-primary text-white px-5 py-2 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors">
                    Oluştur
                </button>
                <a href="{{ route('admin.departmanlar.index') }}"
                   class="text-sm text-gray-500 hover:text-gray-700">İptal</a>
            </div>
        </form>
    </div>
</div>
@endsection
