@extends('layouts.admin')

@section('title', 'Departman Düzenle')
@section('page-title', 'Departman Düzenle')
@section('page-subtitle', $departman->name)

@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.update', $departman) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <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', $departman->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', $departman->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>

                    {{-- Mevcut görsel önizlemesi --}}
                    <div id="cover_image_preview" class="{{ $departman->cover_image ? '' : 'hidden' }} mb-3">
                        <img id="cover_image_preview_img"
                             src="{{ $departman->cover_image ? Storage::url($departman->cover_image) : '' }}"
                             alt="Mevcut görsel"
                             class="w-24 h-24 rounded-lg object-cover border border-gray-200">
                        <p class="text-xs text-gray-400 mt-1">
                            {{ $departman->cover_image ? 'Mevcut görsel. Yeni dosya seçerseniz değiştirilir.' : 'Seçilen görsel önizlemesi' }}
                        </p>
                    </div>

                    {{-- Görseli kaldır seçeneği (sadece görsel varsa göster) --}}
                    @if($departman->cover_image)
                    <label class="flex items-center gap-2 cursor-pointer mb-2" id="remove_image_label">
                        <input type="checkbox" name="remove_cover_image" value="1" id="remove_cover_image_cb"
                               class="w-4 h-4 text-red-500 rounded border-gray-300 focus:ring-red-400"
                               onchange="toggleRemoveImage(this)">
                        <span class="text-xs text-red-500">Mevcut görseli kaldır</span>
                    </label>
                    @endif

                    <input type="file" name="cover_image" accept="image/jpeg,image/png,image/webp"
                           id="cover_image_file_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>

                {{-- 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', $departman->sort_order) }}" 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"
                               {{ old('is_active', $departman->is_active) ? '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"
                               {{ old('accepts_open_applications', $departman->accepts_open_applications) ? 'checked' : '' }}
                               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">
                    Güncelle
                </button>
                <a href="{{ route('admin.departmanlar.index') }}"
                   class="text-sm text-gray-500 hover:text-gray-700">İptal</a>
            </div>
        </form>
    </div>
</div>

<div id="js-dept-data"
     data-has-cover="{{ $departman->cover_image ? '1' : '0' }}"
     style="display:none;"></div>

<script nonce="{{ app('csp-nonce') }}">
(function () {
    var hasCoverImage = document.getElementById('js-dept-data').dataset.hasCover === '1';

    // "Görseli kaldır" checkbox'ı işaretlenince dosya input'unu devre dışı bırak
    window.toggleRemoveImage = function (cb) {
        var fileInput = document.getElementById('cover_image_file_input');
        var preview   = document.getElementById('cover_image_preview');
        if (cb.checked) {
            fileInput.disabled = true;
            fileInput.value    = '';
            if (preview) preview.classList.add('hidden');
        } else {
            fileInput.disabled = false;
            if (preview && hasCoverImage) {
                preview.classList.remove('hidden');
            }
        }
    };
}());
</script>
@endsection