@extends('layouts.app')

@section('title', 'Talepler Birim, Kategori ve Alt Aşama Ayarları')

@section('content')
    <div class="container-fluid py-3 talepler-settings-catalog-page">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div>
                <h1 class="h4 mb-1">Birim, Kategori ve Alt Aşama Ayarları</h1>
                <div class="text-muted small">Kategori akışları varsayılan olarak 3 aşama ile açılır. Ek ara aşamaları bu ekrandan yönetin.</div>
            </div>
            <a href="{{ route('admin.talepler.board', ['unit_id' => (int) ($selectedUnitId ?? 0)]) }}"
                class="btn btn-primary btn-sm">
                <i class="bi bi-kanban me-1"></i>Görev Yönetimine Dön
            </a>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (!$ready)
            <div class="alert alert-warning">Gerekli Talepler tabloları hazır değil.</div>
        @else
            <section class="catalog-section mb-4">
                <div class="catalog-section-title">1. Birim Ayarlari</div>
            <div class="card border-0 shadow-sm rounded-4 mb-3 catalog-main-card">
                <div class="card-header bg-white fw-bold d-flex justify-content-between align-items-center">
                    <span>Birimler</span>
                    <span class="badge text-bg-light border">{{ $units->count() }}</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 280px; overflow-y: auto;">
                        <table class="table table-sm align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 70px;">ID</th>
                                    <th>Ad</th>
                                    <th style="width: 85px;">Aktif</th>
                                    <th style="width: 135px;">Talep Acilabilir</th>
                                    <th style="width: 120px;">Islem</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($units as $unit)
                                    @php
                                        $updateFormId = 'unit-update-' . (int) $unit->id;
                                    @endphp
                                    <tr>
                                        <td>{{ (int) $unit->id }}</td>
                                        <td>{{ $unit->unit_name }}</td>
                                        <td class="text-center">
                                            {{ !empty($unit->is_active) ? 'Evet' : 'Hayir' }}
                                        </td>
                                        <td class="text-center">
                                            <input type="checkbox" name="request_open_enabled" value="1" form="{{ $updateFormId }}"
                                                {{ !empty($unit->request_open_enabled) ? 'checked' : '' }}>
                                        </td>
                                        <td>
                                            <form id="{{ $updateFormId }}" method="post" action="{{ route('admin.talepler.settings.units.store') }}">
                                                @csrf
                                                <input type="hidden" name="id" value="{{ (int) $unit->id }}">
                                                <button type="submit" class="btn btn-outline-primary btn-sm">Kaydet</button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-3">Kayıtlı birim yok.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            </section>

            <section class="catalog-section mb-4">
                <div class="catalog-section-title">2. Kategori Ayarlari</div>
            <div class="row g-3 mb-3">
                <div class="col-12 col-xl-4">
                    <div class="card border-0 shadow-sm rounded-4 catalog-main-card">
                        <div class="card-header bg-white fw-bold">Yeni Kategori</div>
                        <div class="card-body">
                            <form method="post" action="{{ route('admin.talepler.settings.categories.store') }}" class="row g-2">
                                @csrf
                                <div class="col-12">
                                    <label class="form-label small text-muted mb-1">Birim</label>
                                    <select name="unit_id" class="form-select form-select-sm" required>
                                        <option value="">Secin</option>
                                        @foreach ($units as $unit)
                                            @continue(empty($unit->is_active))
                                            <option value="{{ (int) $unit->id }}" {{ (int) old('unit_id') === (int) $unit->id ? 'selected' : '' }}>
                                                {{ $unit->unit_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small text-muted mb-1">Kategori Anahtari</label>
                                    <input type="text" name="category_key" class="form-control form-control-sm"
                                        value="{{ old('category_key') }}" required>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small text-muted mb-1">Kategori Adi</label>
                                    <input type="text" name="category_name" class="form-control form-control-sm"
                                        value="{{ old('category_name') }}" required>
                                </div>
                                <div class="col-12 d-flex align-items-end">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                                        <label class="form-check-label">Aktif</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="small text-muted border rounded-3 px-3 py-2 bg-light">
                                        Yeni kategori otomatik olarak 3 asamali akisa sahip olur: Yapilacaklar, Islemdekiler, Tamamlananlar.
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-success btn-sm w-100">Kategori Ekle</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-xl-8">
                    <div class="card border-0 shadow-sm rounded-4 catalog-main-card">
                        <div class="card-header bg-white fw-bold">
                            Kategoriler
                        </div>
                        <div class="card-body p-0">
                            <div class="p-3 border-bottom">
                                <div class="rounded-4 border bg-light px-3 py-3">
                                    <form method="get" action="{{ route('admin.talepler.settings.catalog') }}" class="row g-3 align-items-end">
                                    <input type="hidden" name="unit_id" value="{{ (int) ($selectedUnitId ?? 0) }}">
                                    <input type="hidden" name="category_id" value="{{ (int) ($selectedCategoryId ?? 0) }}">
                                        <div class="col-12">
                                            <div class="fw-semibold mb-1">Kategori Listesi Filtresi</div>
                                            <div class="small text-muted">Varsayilan gorunum tum birimleri listeler. Birim secerseniz sadece o birimin kategorileri gosterilir.</div>
                                        </div>
                                        <div class="col-12 col-lg-5 col-xl-4">
                                            <label class="form-label fw-semibold mb-2">Birim</label>
                                            <select name="category_table_unit_id" class="form-select category-table-filter-select" onchange="this.form.submit()">
                                                <option value="0" {{ (int) ($selectedCategoryTableUnitId ?? 0) === 0 ? 'selected' : '' }}>Tüm Birimler</option>
                                            @foreach ($units as $unit)
                                                @continue(empty($unit->is_active))
                                                <option value="{{ (int) $unit->id }}" {{ (int) ($selectedCategoryTableUnitId ?? 0) === (int) $unit->id ? 'selected' : '' }}>
                                                    {{ $unit->unit_name }}
                                                </option>
                                            @endforeach
                                            </select>
                                        </div>
                                        <div class="col-12 col-lg-7 col-xl-5">
                                            <div class="rounded-3 bg-white border px-3 py-2 h-100 d-flex align-items-center small text-muted category-table-filter-summary">
                                                Secili filtre:
                                                <strong class="ms-1">
                                                    {{ (int) ($selectedCategoryTableUnitId ?? 0) > 0 ? optional(($units ?? collect())->firstWhere('id', (int) $selectedCategoryTableUnitId))->unit_name : 'Tüm Birimler' }}
                                                </strong>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-sm align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width: 70px;">ID</th>
                                            <th>Birim</th>
                                            <th>Anahtar</th>
                                            <th>Ad</th>
                                            <th style="width: 90px;">Aktif</th>
                                            <th style="width: 220px;">Islem</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $tableCategories = ($categories ?? collect())
                                                ->when(
                                                    (int) ($selectedCategoryTableUnitId ?? 0) > 0,
                                                    fn($rows) => $rows->where('unit_id', (int) $selectedCategoryTableUnitId)
                                                )
                                                ->values();
                                        @endphp
                                        @forelse ($tableCategories as $category)
                                            @php
                                                $updateFormId = 'category-update-' . (int) $category->id;
                                                $deleteFormId = 'category-delete-' . (int) $category->id;
                                            @endphp
                                            <tr data-category-row data-unit-id="{{ (int) $category->unit_id }}">
                                                <td>{{ (int) $category->id }}</td>
                                                <td>
                                                    <select name="unit_id" form="{{ $updateFormId }}" class="form-select form-select-sm" required>
                                                        @foreach ($units as $unit)
                                                            <option value="{{ (int) $unit->id }}" {{ (int) $category->unit_id === (int) $unit->id ? 'selected' : '' }}>
                                                                {{ $unit->unit_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="text" name="category_key" form="{{ $updateFormId }}"
                                                        class="form-control form-control-sm" value="{{ $category->category_key }}" required>
                                                </td>
                                                <td>
                                                    <input type="text" name="category_name" form="{{ $updateFormId }}"
                                                        class="form-control form-control-sm" value="{{ $category->category_name }}" required>
                                                </td>
                                                <td class="text-center">
                                                    <input type="checkbox" name="is_active" value="1" form="{{ $updateFormId }}"
                                                        {{ !empty($category->is_active) ? 'checked' : '' }}>
                                                </td>
                                                <td>
                                                    <div class="d-flex gap-2">
                                                        <form id="{{ $updateFormId }}" method="post"
                                                            action="{{ route('admin.talepler.settings.categories.store') }}">
                                                            @csrf
                                                            <input type="hidden" name="id" value="{{ (int) $category->id }}">
                                                            <button type="submit" class="btn btn-outline-primary btn-sm">Guncelle</button>
                                                        </form>
                                                        <form id="{{ $deleteFormId }}" method="post"
                                                            action="{{ route('admin.talepler.settings.categories.delete', ['id' => (int) $category->id]) }}"
                                                            onsubmit="return confirm('Bu kategori silinsin mi?');">
                                                            @csrf
                                                            <button type="submit" class="btn btn-outline-danger btn-sm">Sil</button>
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center text-muted py-3">Kayıtlı kategori yok.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </section>

            <section class="catalog-section mb-4">
                <div class="catalog-section-title">3. Varsayilan Atama</div>
            <div class="card border-0 shadow-sm rounded-4 mb-3 catalog-main-card" id="defaultAssignmentCard"
                data-options-endpoint="{{ route('admin.talepler.settings.default-assignment.options') }}">
                <div class="card-header bg-white fw-bold d-flex justify-content-between align-items-center">
                    <span>Varsayilan Atama</span>
                    <span class="badge text-bg-light border">{{ ($defaultAssignments ?? collect())->count() }}</span>
                </div>
                <div class="card-body">
                    @if ($categoryDefaultAssignmentEnabled ?? false)
                        <div class="row g-3">
                            <div class="col-12 col-xl-5">
                                <form method="post" action="{{ route('admin.talepler.settings.default-assignment.save') }}"
                                    id="defaultAssignmentForm" class="row g-3">
                                    @csrf
                                    <div class="col-12">
                                        <label class="form-label small text-muted mb-1">Birim</label>
                                        <select name="unit_id" id="defaultAssignUnitSelect" class="form-select form-select-sm" required>
                                            <option value="">Secin</option>
                                            @foreach ($units as $unit)
                                                @continue(empty($unit->is_active))
                                                <option value="{{ (int) $unit->id }}">{{ $unit->unit_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label small text-muted mb-1">Kategori</label>
                                        <select name="category_id" id="defaultAssignCategorySelect" class="form-select form-select-sm" required disabled>
                                            <option value="">Kategori secin</option>
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label small text-muted mb-1">Varsayilan Atanan</label>
                                        <select name="default_assignee_user_id" id="defaultAssignUserSelect" class="form-select form-select-sm" disabled>
                                            <option value="">Atanmamis</option>
                                        </select>
                                        <div class="form-text" id="defaultAssignHelp">
                                            Kategori secildiginde mevcut varsayilan atama otomatik gelir. Bos birakirsaniz atanmamis olarak kalir.
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary btn-sm">Varsayilan Atamayi Kaydet</button>
                                    </div>
                                </form>
                            </div>
                            <div class="col-12 col-xl-7">
                                <div class="table-responsive border rounded-3" style="max-height: 300px; overflow-y: auto;">
                                    <table class="table table-sm align-middle mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Birim</th>
                                                <th>Kategori</th>
                                                <th>Varsayilan Atanan</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse (($defaultAssignments ?? collect()) as $assignment)
                                                <tr>
                                                    <td>{{ $assignment->unit_name }}</td>
                                                    <td>{{ $assignment->category_name }}</td>
                                                    <td>
                                                        @if ((int) ($assignment->default_assignee_user_id ?? 0) > 0)
                                                            {{ $assignment->default_assignee_name ?: ('#' . (int) $assignment->default_assignee_user_id) }}
                                                        @else
                                                            <span class="text-muted">Atanmamis</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="3" class="text-center text-muted py-3">Aktif kategori bulunamadi.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-warning mb-0">
                            Varsayilan atama alani icin migration calistirilmamis. Ozelligi acmak icin `artisan migrate` calistirin.
                        </div>
                    @endif
                </div>
            </div>
            </section>

            @php
                $coreStageKeys = ['todo', 'in_progress', 'done'];
                $activeCategories = $categories
                    ->filter(fn($category) => !empty($category->is_active))
                    ->values();
                $stageGroups = [
                    'todo' => [
                        'label' => 'Yapilacaklar',
                        'items' => ($editableWorkflowStages ?? collect())
                            ->where('lane_group', 'todo')
                            ->filter(fn($stage) => !in_array(trim((string) ($stage->stage_key ?? '')), $coreStageKeys, true))
                            ->values(),
                    ],
                    'doing' => [
                        'label' => 'Islemdekiler',
                        'items' => ($editableWorkflowStages ?? collect())
                            ->where('lane_group', 'doing')
                            ->filter(fn($stage) => !in_array(trim((string) ($stage->stage_key ?? '')), $coreStageKeys, true))
                            ->values(),
                    ],
                    'done' => [
                        'label' => 'Tamamlananlar',
                        'items' => ($editableWorkflowStages ?? collect())
                            ->where('lane_group', 'done')
                            ->filter(fn($stage) => !in_array(trim((string) ($stage->stage_key ?? '')), $coreStageKeys, true))
                            ->values(),
                    ],
                ];
            @endphp

            <section class="catalog-section mb-4">
                <div class="catalog-section-title">4. Alt Asama ve Ek Alanlar</div>
            <div class="card border-0 shadow-sm rounded-4 catalog-main-card">
                <div class="card-header bg-white fw-bold">Alt Aşama Ayarları</div>
                <div class="card-body">
                    <div id="catalogMessageArea"></div>
                    <form id="stageFilterForm" method="get" action="{{ route('admin.talepler.settings.catalog') }}" class="row g-2 align-items-end mb-3">
                        <div class="col-md-4">
                            <label class="form-label text-muted small fw-bold mb-1">Birim</label>
                            <select name="unit_id" class="form-select form-select-sm">
                                <option value="">Tüm Birimler</option>
                                @foreach ($units as $unit)
                                    @continue(empty($unit->is_active))
                                    <option value="{{ (int) $unit->id }}" {{ (int) $selectedUnitId === (int) $unit->id ? 'selected' : '' }}>
                                        {{ $unit->unit_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label text-muted small fw-bold mb-1">Kategori</label>
                            <select name="category_id" class="form-select form-select-sm" {{ (int) $selectedUnitId > 0 ? '' : 'disabled' }}>
                                <option value="">Kategori Secin</option>
                                @foreach ($activeCategories as $category)
                                    <option value="{{ (int) $category->id }}" data-unit-id="{{ (int) $category->unit_id }}"
                                        {{ (int) $selectedCategoryId === (int) $category->id ? 'selected' : '' }}>
                                        {{ $category->category_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>

                    <div id="stageSettingsContent">
                    @if ((int) $selectedCategoryId <= 0)
                        <div class="alert alert-info mb-0">
                            Alt asama duzenlemek icin birim ve kategori secin.
                        </div>
                    @else
                        <div class="small text-muted border rounded-3 px-3 py-2 bg-light mb-3">
                            Secili kategori icin ana akisin 3 temel asamasi sabittir. Sadece ek ara asamalar burada yonetilir.
                        </div>

                        <div class="card border shadow-sm rounded-4 mb-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <div>
                                        <div class="fw-semibold">Ek Talep Alanlari</div>
                                        <div class="small text-muted">Bu kategori icin ilave select alanlari tanimlayabilirsiniz.</div>
                                    </div>
                                    <span class="badge text-bg-light border">{{ ($categoryFormFields ?? collect())->count() }}</span>
                                </div>

                                <form method="post" action="{{ route('admin.talepler.settings.category-fields.store') }}" class="row g-3 mb-3">
                                    @csrf
                                    <input type="hidden" name="category_id" value="{{ (int) $selectedCategoryId }}">
                                    <input type="hidden" name="unit_id" value="{{ (int) $selectedUnitId }}">
                                    <div class="col-md-4">
                                        <label class="form-label text-muted small fw-bold mb-1">Alan Adi</label>
                                        <input type="text" name="field_label" class="form-control form-control-sm" placeholder="Ornek: Proje Tipi" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Alan Tipi</label>
                                        <select name="field_type" class="form-select form-select-sm js-field-type">
                                            <option value="select">Select</option>
                                            <option value="text">Kisa Metin</option>
                                            <option value="textarea">Uzun Metin</option>
                                            <option value="number">Sayi</option>
                                            <option value="date">Tarih</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3 js-field-source-mode">
                                        <label class="form-label text-muted small fw-bold mb-1">Kaynak Tipi</label>
                                        <select name="source_type" class="form-select form-select-sm js-field-source-type">
                                            <option value="manual">Liste</option>
                                            <option value="sql">SQL Sorgusu</option>
                                        </select>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="is_required" value="1" id="newFieldRequired">
                                            <label class="form-check-label" for="newFieldRequired">Zorunlu</label>
                                        </div>
                                    </div>
                                    <div class="col-md-1 d-flex align-items-end">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="newFieldActive" checked>
                                            <label class="form-check-label" for="newFieldActive">Aktif</label>
                                        </div>
                                    </div>
                                    <div class="col-12 js-field-source-manual js-field-source-wrap">
                                        <label class="form-label text-muted small fw-bold mb-1">Liste Degerleri</label>
                                        <textarea name="option_source" class="form-control form-control-sm" rows="3" placeholder="Deger 1, Deger 2, Deger 3" required></textarea>
                                        <div class="form-text">Virgul veya satir bazli girebilirsiniz. Isterseniz `deger|etiket` formati da kullanabilirsiniz.</div>
                                    </div>
                                    <div class="col-12 js-field-source-sql js-field-source-wrap d-none">
                                        <label class="form-label text-muted small fw-bold mb-1">SQL Sorgusu</label>
                                        <textarea name="option_source_sql" class="form-control form-control-sm" rows="3" placeholder="select code as value, name as label from tablo order by name"></textarea>
                                        <div class="form-text">Tek bir SELECT sorgusu olmali. `value` ve `label` kolonlari kullanilabilir.</div>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-outline-primary btn-sm">Ek Alan Ekle</button>
                                    </div>
                                </form>

                                @if (($categoryFormFields ?? collect())->isNotEmpty())
                                    <div class="table-responsive">
                                        <table class="table table-sm align-middle mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Alan</th>
                                                    <th>Tip</th>
                                                    <th>Kaynak</th>
                                                    <th>Zorunlu</th>
                                                    <th>Aktif</th>
                                                    <th style="width: 280px;">Yonetim</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (($categoryFormFields ?? collect()) as $field)
                                                    <tr>
                                                        <td>{{ $field->field_label }}</td>
                                                        <td>{{ $field->field_type }}</td>
                                                        <td>
                                                            {{ (string) ($field->field_type ?? 'select') !== 'select'
                                                                ? '-'
                                                                : (strtolower((string) ($field->source_type ?? 'manual')) === 'sql' ? 'SQL' : 'Liste') }}
                                                        </td>
                                                        <td>{{ !empty($field->is_required) ? 'Evet' : 'Hayir' }}</td>
                                                        <td>{{ !empty($field->is_active) ? 'Evet' : 'Hayir' }}</td>
                                                        <td>
                                                            <div class="d-flex gap-2">
                                                                <form method="post" action="{{ route('admin.talepler.settings.category-fields.store') }}" class="d-flex gap-2 flex-grow-1">
                                                                    @csrf
                                                                    <input type="hidden" name="id" value="{{ (int) $field->id }}">
                                                                    <input type="hidden" name="category_id" value="{{ (int) $selectedCategoryId }}">
                                                                    <input type="hidden" name="unit_id" value="{{ (int) $selectedUnitId }}">
                                                                    <input type="hidden" name="field_label" value="{{ $field->field_label }}">
                                                                    <input type="hidden" name="field_type" value="{{ $field->field_type }}">
                                                                    <input type="hidden" name="source_type" value="{{ $field->source_type }}">
                                                                    <input type="hidden" name="option_source" value="{{ $field->option_source }}">
                                                                    <input type="hidden" name="is_required" value="{{ !empty($field->is_required) ? 1 : 0 }}">
                                                                    <input type="hidden" name="is_active" value="{{ !empty($field->is_active) ? 0 : 1 }}">
                                                                    <button type="submit" class="btn btn-outline-secondary btn-sm">
                                                                        {{ !empty($field->is_active) ? 'Pasif Yap' : 'Aktif Yap' }}
                                                                    </button>
                                                                </form>
                                                                <form method="post" action="{{ route('admin.talepler.settings.category-fields.delete', ['id' => (int) $field->id]) }}"
                                                                    onsubmit="return confirm('Bu ek alan silinsin mi?');">
                                                                    @csrf
                                                                    <input type="hidden" name="unit_id" value="{{ (int) $selectedUnitId }}">
                                                                    <button type="submit" class="btn btn-outline-danger btn-sm">Sil</button>
                                                                </form>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <div class="small text-muted">Bu kategori icin tanimli ek alan yok.</div>
                                @endif
                            </div>
                        </div>

                        <form method="post" action="{{ route('admin.talepler.settings.stages.save') }}"
                            class="row g-2 align-items-end mb-3 bg-white p-3 rounded-4 border js-stage-action-form">
                            @csrf
                            <input type="hidden" name="return_to" value="settings_catalog">
                            <input type="hidden" name="template_id" value="{{ (int) ($activeWorkflowTemplate->id ?? 0) }}">
                            <input type="hidden" name="category_id" value="{{ (int) $selectedCategoryId }}">
                            <input type="hidden" name="unit_id" value="{{ (int) $selectedUnitId }}">

                            <div class="col-md-3">
                                <label class="form-label text-muted small fw-bold mb-1">Ana Aşama</label>
                                <select name="lane_group" class="form-select form-select-sm" required>
                                    @foreach (($laneGroups ?? []) as $laneKey => $laneLabel)
                                        <option value="{{ $laneKey }}">{{ $laneLabel }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-7">
                                <label class="form-label text-muted small fw-bold mb-1">Alt Aşama Adı</label>
                                <input type="text" name="stage_name" class="form-control form-control-sm" required>
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-success btn-sm w-100">
                                    <i class="bi bi-plus me-1"></i>Ekle
                                </button>
                            </div>
                        </form>

                        <div class="row g-3">
                            @foreach ($stageGroups as $laneKey => $group)
                                <div class="col-12 col-lg-4">
                                    <div class="card border-0 shadow-sm rounded-4 h-100">
                                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                                            <strong>{{ $group['label'] }}</strong>
                                            <span class="badge text-bg-light border">{{ $group['items']->count() }}</span>
                                        </div>
                                        <div class="card-body">
                                            @forelse ($group['items'] as $stage)
                                                <div class="d-flex gap-2 align-items-start mb-2 pb-2 border-bottom" data-stage-item>
                                                    <form method="post" action="{{ route('admin.talepler.settings.stages.save') }}"
                                                        class="d-flex gap-2 flex-grow-1 js-stage-action-form">
                                                        @csrf
                                                        <input type="hidden" name="return_to" value="settings_catalog">
                                                        <input type="hidden" name="stage_id" value="{{ (int) $stage->id }}">
                                                        <input type="hidden" name="template_id" value="{{ (int) ($activeWorkflowTemplate->id ?? 0) }}">
                                                        <input type="hidden" name="category_id" value="{{ (int) $selectedCategoryId }}">
                                                        <input type="hidden" name="unit_id" value="{{ (int) $selectedUnitId }}">
                                                        <input type="hidden" name="lane_group" value="{{ $laneKey }}">

                                                        <input type="text" name="stage_name" class="form-control form-control-sm"
                                                            value="{{ $stage->stage_name }}" required>
                                                        <button type="submit" class="btn btn-sm btn-outline-primary">Guncelle</button>
                                                    </form>

                                                    <form method="post"
                                                        action="{{ route('admin.talepler.settings.stages.delete', ['stageId' => (int) $stage->id]) }}"
                                                        class="js-stage-action-form"
                                                        data-stage-action="delete">
                                                        @csrf
                                                        <input type="hidden" name="return_to" value="settings_catalog">
                                                        <input type="hidden" name="template_id" value="{{ (int) ($activeWorkflowTemplate->id ?? 0) }}">
                                                        <input type="hidden" name="category_id" value="{{ (int) $selectedCategoryId }}">
                                                        <input type="hidden" name="unit_id" value="{{ (int) $selectedUnitId }}">
                                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Sil"
                                                            data-confirm-title="Alt Asama Sil"
                                                            data-confirm-message="Bu alt asama silinsin mi?"
                                                            data-confirm-confirm-text="Evet, Sil"
                                                            data-confirm-cancel-text="Vazgec"
                                                            data-confirm-icon="warning">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            @empty
                                                <div class="small text-muted">Bu grupta alt asama yok.</div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    </div>
                </div>
            </div>
            </section>
        @endif
    </div>
@endsection

@push('styles')
    <style>
        .talepler-settings-catalog-page .catalog-section {
            border: 1px solid #d8e0ec;
            border-radius: 1rem;
            padding: 0.9rem;
            background: #f6f8fc;
        }

        .talepler-settings-catalog-page .catalog-section-title {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            margin-bottom: 0.8rem;
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            border: 1px solid #bfd0ea;
            background: #e9f0fb;
            color: #20406f;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .talepler-settings-catalog-page .catalog-main-card {
            border: 1px solid #d7e0ee !important;
            box-shadow: 0 10px 24px rgba(15, 30, 55, 0.06) !important;
            overflow: hidden;
        }

        .talepler-settings-catalog-page .catalog-main-card > .card-header {
            background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%) !important;
            border-bottom: 1px solid #dfe7f3;
        }

        .talepler-settings-catalog-page #stageSettingsContent > .card {
            border: 1px solid #dbe4f2;
        }

        .talepler-settings-catalog-page .js-stage-action-form.is-submitting {
            opacity: 0.6;
            pointer-events: none;
        }

        .talepler-settings-catalog-page [data-stage-item].is-pending-delete {
            opacity: 0.5;
            transition: opacity 0.15s ease;
        }

        .category-table-filter-select {
            max-width: 360px;
            min-height: 44px;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            font-size: 1rem;
        }

        .category-table-filter-summary {
            min-height: 44px;
        }

        @media (max-width: 991.98px) {
            .talepler-settings-catalog-page .catalog-section {
                padding: 0.75rem;
            }

            .category-table-filter-select {
                max-width: 100%;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        (() => {
            const initCatalogSettingsPage = () => {
                const page = document.querySelector('.talepler-settings-catalog-page');
                if (!(page instanceof HTMLElement)) {
                    return;
                }
                page._isCatalogSettingsBound = true;

            const catalogUrl = @json(route('admin.talepler.settings.catalog'));
            const form = document.getElementById('stageFilterForm');
            const messageArea = document.getElementById('catalogMessageArea');
            const stageContent = document.getElementById('stageSettingsContent');
            const categoryTableFilterForm = document.querySelector('form[action="{{ route('admin.talepler.settings.catalog') }}"]:not(#stageFilterForm)');
            const categoryTableFilterSelect = categoryTableFilterForm?.querySelector('select[name="category_table_unit_id"]');
            const categorySummary = document.querySelector('.category-table-filter-summary strong');
            const defaultAssignmentCard = document.getElementById('defaultAssignmentCard');
            const defaultAssignmentOptionsEndpoint = String(defaultAssignmentCard?.dataset.optionsEndpoint || '').trim();
            const defaultAssignmentForm = document.getElementById('defaultAssignmentForm');
            const defaultAssignUnitSelect = document.getElementById('defaultAssignUnitSelect');
            const defaultAssignCategorySelect = document.getElementById('defaultAssignCategorySelect');
            const defaultAssignUserSelect = document.getElementById('defaultAssignUserSelect');
            const defaultAssignHelp = document.getElementById('defaultAssignHelp');
            let defaultAssignmentRequestToken = 0;
            let defaultAssignmentActiveController = null;

            const syncFieldSourceVisibility = (root = document) => {
                root.querySelectorAll('form[action="{{ route('admin.talepler.settings.category-fields.store') }}"]').forEach((fieldForm) => {
                    if (fieldForm._isDynamicFieldBound) {
                        return;
                    }
                    fieldForm._isDynamicFieldBound = true;

                    const fieldTypeSelect = fieldForm.querySelector('select[name="field_type"]');
                    const sourceTypeSelect = fieldForm.querySelector('select[name="source_type"]');
                    const sourceModeWrap = fieldForm.querySelector('.js-field-source-mode');
                    const manualWrap = fieldForm.querySelector('.js-field-source-manual');
                    const sqlWrap = fieldForm.querySelector('.js-field-source-sql');
                    const manualTextarea = manualWrap?.querySelector('textarea[name="option_source"]');
                    const sqlTextarea = sqlWrap?.querySelector('textarea[name="option_source_sql"]');

                    const refresh = () => {
                        const fieldType = String(fieldTypeSelect?.value || 'select').trim();
                        const isSelectType = fieldType === 'select';
                        const mode = String(sourceTypeSelect?.value || 'manual').trim();
                        const isSql = isSelectType && mode === 'sql';

                        sourceModeWrap?.classList.toggle('d-none', !isSelectType);
                        manualWrap?.classList.toggle('d-none', !isSelectType || isSql);
                        sqlWrap?.classList.toggle('d-none', !isSelectType || !isSql);

                        if (manualTextarea instanceof HTMLTextAreaElement) {
                            manualTextarea.required = isSelectType && !isSql;
                            if (isSql) {
                                manualTextarea.value = String(sqlTextarea instanceof HTMLTextAreaElement ? sqlTextarea.value : '').trim();
                            } else if (!isSelectType) {
                                manualTextarea.value = '';
                            }
                        }

                        if (sqlTextarea instanceof HTMLTextAreaElement) {
                            sqlTextarea.required = isSelectType && isSql;
                            if (!isSql) {
                                sqlTextarea.value = '';
                            }
                        }
                    };

                    fieldTypeSelect?.addEventListener('change', refresh);
                    sourceTypeSelect?.addEventListener('change', refresh);
                    fieldForm.addEventListener('submit', () => {
                        if (
                            manualTextarea instanceof HTMLTextAreaElement
                            && sqlTextarea instanceof HTMLTextAreaElement
                            && String(fieldTypeSelect?.value || 'select').trim() === 'select'
                            && String(sourceTypeSelect?.value || 'manual').trim() === 'sql'
                        ) {
                            manualTextarea.value = String(sqlTextarea.value || '').trim();
                        }
                    });
                    refresh();
                });
            };

            const applyCategoryFilter = () => {
                if (!form) {
                    return;
                }

                const unitSelect = form.querySelector('select[name="unit_id"]');
                const categorySelect = form.querySelector('select[name="category_id"]');
                if (!unitSelect || !categorySelect) {
                    return;
                }

                const selectedUnitId = String(unitSelect.value || '').trim();
                const hasUnitSelection = selectedUnitId !== '';
                let selectedVisible = false;

                categorySelect.disabled = !hasUnitSelection;

                Array.from(categorySelect.options).forEach((option, index) => {
                    if (index === 0 || String(option.value || '').trim() === '') {
                        option.hidden = false;
                        option.disabled = false;
                        return;
                    }

                    const optionUnitId = String(option.dataset.unitId || '').trim();
                    const visible = hasUnitSelection && optionUnitId === selectedUnitId;
                    option.hidden = !visible;
                    option.disabled = !visible;

                    if (option.selected && visible) {
                        selectedVisible = true;
                    }
                });

                if (
                    (!hasUnitSelection || !selectedVisible)
                    && String(categorySelect.value || '').trim() !== ''
                ) {
                    categorySelect.value = '';
                }
            };

            const applyCategoryTableFilter = () => {
                if (!(categoryTableFilterSelect instanceof HTMLSelectElement)) {
                    return;
                }

                const selectedUnitId = String(categoryTableFilterSelect.value || '0').trim();
                let visibleCount = 0;

                document.querySelectorAll('[data-category-row]').forEach((row) => {
                    const rowUnitId = String(row.getAttribute('data-unit-id') || '').trim();
                    const visible = selectedUnitId === '0' || selectedUnitId === '' || rowUnitId === selectedUnitId;
                    row.classList.toggle('d-none', !visible);
                    if (visible) {
                        visibleCount += 1;
                    }
                });

                if (categorySummary) {
                    const selectedLabel = categoryTableFilterSelect.options[categoryTableFilterSelect.selectedIndex]?.textContent?.trim() || 'Tum Birimler';
                    categorySummary.textContent = selectedLabel;
                }
            };

            const resetDefaultAssignmentSelects = () => {
                const defaultAssignCategorySelect = document.getElementById('defaultAssignCategorySelect');
                const defaultAssignUserSelect = document.getElementById('defaultAssignUserSelect');
                const defaultAssignHelp = document.getElementById('defaultAssignHelp');

                if (!(defaultAssignCategorySelect instanceof HTMLSelectElement) || !(defaultAssignUserSelect instanceof HTMLSelectElement)) {
                    return;
                }

                defaultAssignCategorySelect.innerHTML = '<option value="">Kategori secin</option>';
                defaultAssignCategorySelect.disabled = true;
                defaultAssignUserSelect.innerHTML = '<option value="">Atanmamis</option>';
                defaultAssignUserSelect.disabled = true;
                if (defaultAssignHelp) {
                    defaultAssignHelp.textContent = 'Birim secerek kategori ve varsayilan atama seceneklerini yukleyin.';
                }
            };

            const applyDefaultAssignmentSelection = () => {
                const defaultAssignCategorySelect = document.getElementById('defaultAssignCategorySelect');
                const defaultAssignUserSelect = document.getElementById('defaultAssignUserSelect');

                if (!(defaultAssignCategorySelect instanceof HTMLSelectElement) || !(defaultAssignUserSelect instanceof HTMLSelectElement)) {
                    return;
                }

                const hasCategory = String(defaultAssignCategorySelect.value || '').trim() !== '';
                defaultAssignUserSelect.disabled = !hasCategory;
                if (!hasCategory) {
                    defaultAssignUserSelect.value = '';
                    return;
                }

                const selectedOption = defaultAssignCategorySelect.options[defaultAssignCategorySelect.selectedIndex];
                const defaultAssigneeId = Number(selectedOption?.dataset.defaultAssigneeUserId || 0);
                const hasAssigneeOption = Array.from(defaultAssignUserSelect.options)
                    .some((option) => Number(option.value || 0) === defaultAssigneeId);
                defaultAssignUserSelect.value = defaultAssigneeId > 0 && hasAssigneeOption ? String(defaultAssigneeId) : '';
            };

            const loadDefaultAssignmentOptions = async () => {
                const defaultAssignmentCard = document.getElementById('defaultAssignmentCard');
                const defaultAssignmentOptionsEndpoint = String(defaultAssignmentCard?.dataset.optionsEndpoint || '').trim();
                const defaultAssignUnitSelect = document.getElementById('defaultAssignUnitSelect');
                const defaultAssignCategorySelect = document.getElementById('defaultAssignCategorySelect');
                const defaultAssignUserSelect = document.getElementById('defaultAssignUserSelect');
                const defaultAssignHelp = document.getElementById('defaultAssignHelp');

                if (
                    !(defaultAssignUnitSelect instanceof HTMLSelectElement)
                    || !(defaultAssignCategorySelect instanceof HTMLSelectElement)
                    || !(defaultAssignUserSelect instanceof HTMLSelectElement)
                    || defaultAssignmentOptionsEndpoint === ''
                ) {
                    return;
                }

                const unitId = Number(defaultAssignUnitSelect.value || 0);
                if (unitId <= 0) {
                    resetDefaultAssignmentSelects();
                    return;
                }

                const previousCategoryId = String(defaultAssignCategorySelect.value || '').trim();
                defaultAssignCategorySelect.disabled = true;
                defaultAssignUserSelect.disabled = true;
                if (defaultAssignHelp) {
                    defaultAssignHelp.textContent = 'Secenekler yukleniyor...';
                }

                if (defaultAssignmentActiveController) {
                    defaultAssignmentActiveController.abort();
                }
                const requestToken = ++defaultAssignmentRequestToken;
                const controller = new AbortController();
                defaultAssignmentActiveController = controller;

                const url = new URL(defaultAssignmentOptionsEndpoint, window.location.origin);
                url.searchParams.set('unit_id', String(unitId));
                try {
                    const response = await fetch(url.toString(), {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        cache: 'no-store',
                        credentials: 'same-origin',
                        signal: controller.signal,
                    });

                    if (!response.ok) {
                        resetDefaultAssignmentSelects();
                        if (defaultAssignHelp) {
                            defaultAssignHelp.textContent = 'Secenekler yuklenemedi. Tekrar deneyin.';
                        }
                        return;
                    }

                    const payload = await response.json();
                    if (requestToken !== defaultAssignmentRequestToken) {
                        return;
                    }
                    const categories = Array.isArray(payload?.categories) ? payload.categories : [];
                    const users = Array.isArray(payload?.users) ? payload.users : [];

                    defaultAssignCategorySelect.innerHTML = '<option value="">Kategori secin</option>';
                    categories.forEach((item) => {
                        const option = document.createElement('option');
                        option.value = String(Number(item?.id || 0));
                        option.textContent = String(item?.name || '-');
                        option.dataset.defaultAssigneeUserId = String(Number(item?.default_assignee_user_id || 0));
                        defaultAssignCategorySelect.appendChild(option);
                    });

                    defaultAssignUserSelect.innerHTML = '<option value="">Atanmamis</option>';
                    users.forEach((item) => {
                        const option = document.createElement('option');
                        option.value = String(Number(item?.id || 0));
                        option.textContent = String(item?.name || '-');
                        defaultAssignUserSelect.appendChild(option);
                    });

                    if (categories.length <= 0) {
                        defaultAssignCategorySelect.disabled = true;
                        defaultAssignUserSelect.disabled = true;
                        if (defaultAssignHelp) {
                            defaultAssignHelp.textContent = 'Secilen birimde aktif kategori yok.';
                        }
                        return;
                    }

                    const hasPreviousCategory = categories.some((item) => String(Number(item?.id || 0)) === previousCategoryId);
                    defaultAssignCategorySelect.value = hasPreviousCategory
                        ? previousCategoryId
                        : String(Number(categories[0]?.id || 0));
                    defaultAssignCategorySelect.disabled = false;
                    defaultAssignUserSelect.disabled = false;
                    applyDefaultAssignmentSelection();

                    if (defaultAssignHelp) {
                        defaultAssignHelp.textContent = users.length > 0
                            ? 'Kategori secildiginde mevcut varsayilan atama otomatik gelir. Bos birakirsaniz atanmamis olarak kalir.'
                            : 'Bu birimde aktif uye bulunmuyor. Sadece atanmamis secilebilir.';
                    }
                } catch (error) {
                    if (error?.name === 'AbortError') {
                        return;
                    }
                    resetDefaultAssignmentSelects();
                    if (defaultAssignHelp) {
                        defaultAssignHelp.textContent = 'Secenekler yuklenemedi. Tekrar deneyin.';
                    }
                } finally {
                    if (defaultAssignmentActiveController === controller) {
                        defaultAssignmentActiveController = null;
                    }
                }
            };

            const ensureDefaultAssignmentOptionsLoaded = async () => {
                const defaultAssignUnitSelect = document.getElementById('defaultAssignUnitSelect');
                const defaultAssignCategorySelect = document.getElementById('defaultAssignCategorySelect');

                if (
                    !(defaultAssignUnitSelect instanceof HTMLSelectElement)
                    || !(defaultAssignCategorySelect instanceof HTMLSelectElement)
                ) {
                    return;
                }

                const selectedUnitId = String(defaultAssignUnitSelect.value || '').trim();
                if (selectedUnitId === '' || selectedUnitId === '0') {
                    return;
                }

                const optionCount = defaultAssignCategorySelect.querySelectorAll('option').length;
                if (!defaultAssignCategorySelect.disabled && optionCount > 1) {
                    return;
                }

                await loadDefaultAssignmentOptions();
            };

            const showCatalogMessage = (type, message) => {
                if (!messageArea) {
                    return;
                }

                if (!message) {
                    messageArea.innerHTML = '';
                    return;
                }

                const className = type === 'success' ? 'alert-success' : 'alert-danger';
                messageArea.innerHTML = `<div class="alert ${className}">${message}</div>`;
            };

            const buildStageFilterUrl = () => {
                if (!form) {
                    return catalogUrl;
                }

                const url = new URL(catalogUrl, window.location.origin);
                const params = new URLSearchParams(new FormData(form));
                url.search = params.toString();
                return url.toString();
            };

            const bindStageActionForms = (root = document) => {
                root.querySelectorAll('.js-stage-action-form').forEach((actionForm) => {
                    if (!(actionForm instanceof HTMLFormElement) || actionForm._isAjaxBound) {
                        return;
                    }
                    actionForm._isAjaxBound = true;

                    actionForm.addEventListener('submit', async (event) => {
                        event.preventDefault();
                        const isDeleteAction = String(actionForm.dataset.stageAction || '').trim() === 'delete';
                        const stageItem = actionForm.closest('[data-stage-item]');
                        const submitButton = actionForm.querySelector('button[type="submit"]');

                        if (isDeleteAction) {
                            const title = String(submitButton?.getAttribute('data-confirm-title') || 'Emin misiniz?').trim();
                            const text = String(submitButton?.getAttribute('data-confirm-message') || 'Bu kayit silinsin mi?').trim();
                            const confirmText = String(submitButton?.getAttribute('data-confirm-confirm-text') || 'Evet').trim();
                            const cancelText = String(submitButton?.getAttribute('data-confirm-cancel-text') || 'Vazgec').trim();
                            const icon = String(submitButton?.getAttribute('data-confirm-icon') || 'warning').trim();

                            if (window.Swal && typeof window.Swal.fire === 'function') {
                                const result = await window.Swal.fire({
                                    title,
                                    text,
                                    icon,
                                    showCancelButton: true,
                                    confirmButtonText: confirmText,
                                    cancelButtonText: cancelText,
                                    reverseButtons: true,
                                });
                                if (!result?.isConfirmed) {
                                    return;
                                }
                            }
                        }

                        actionForm.classList.add('is-submitting');
                        if (isDeleteAction && stageItem instanceof HTMLElement) {
                            stageItem.classList.add('is-pending-delete');
                        }

                        try {
                            const response = await fetch(actionForm.action, {
                                method: 'POST',
                                body: new FormData(actionForm),
                                headers: {
                                    'Accept': 'text/html,application/xhtml+xml',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                cache: 'no-store',
                                credentials: 'same-origin',
                            });

                            const html = await response.text();
                            const nextDocument = new DOMParser().parseFromString(html, 'text/html');
                            const nextStageContent = nextDocument.getElementById('stageSettingsContent');
                            const successAlert = nextDocument.querySelector('.alert-success');
                            const errorAlert = nextDocument.querySelector('.alert-danger');

                            if (stageContent && nextStageContent) {
                                stageContent.innerHTML = nextStageContent.innerHTML;
                                bindStageActionForms(stageContent);
                                syncFieldSourceVisibility(stageContent);
                            }

                            if (successAlert) {
                                showCatalogMessage('success', successAlert.textContent?.trim() || 'Islem tamamlandi.');
                            } else if (errorAlert) {
                                showCatalogMessage('error', errorAlert.textContent?.trim() || 'Islem tamamlanamadi.');
                            } else if (!response.ok) {
                                showCatalogMessage('error', 'Islem tamamlanamadi.');
                            } else {
                                showCatalogMessage('', '');
                            }
                        } catch (error) {
                            showCatalogMessage('error', 'Islem sirasinda baglanti hatasi olustu.');
                        } finally {
                            actionForm.classList.remove('is-submitting');
                            if (isDeleteAction && stageItem instanceof HTMLElement) {
                                stageItem.classList.remove('is-pending-delete');
                            }
                        }
                    });
                });
            };

            const loadStageContent = async () => {
                if (!stageContent || !form) {
                    return;
                }

                const targetUrl = buildStageFilterUrl();
                const response = await fetch(targetUrl, {
                    headers: {
                        'Accept': 'text/html,application/xhtml+xml',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    cache: 'no-store',
                    credentials: 'same-origin',
                });

                if (!response.ok) {
                    return;
                }

                const html = await response.text();
                const nextDocument = new DOMParser().parseFromString(html, 'text/html');
                const nextStageContent = nextDocument.getElementById('stageSettingsContent');
                if (nextStageContent) {
                    stageContent.innerHTML = nextStageContent.innerHTML;
                    bindStageActionForms(stageContent);
                    syncFieldSourceVisibility(stageContent);
                }

                const nextCategorySelect = nextDocument.querySelector('#stageFilterForm select[name="category_id"]');
                const currentCategorySelect = form.querySelector('select[name="category_id"]');
                if (nextCategorySelect && currentCategorySelect) {
                    currentCategorySelect.innerHTML = nextCategorySelect.innerHTML;
                    currentCategorySelect.value = String(nextCategorySelect.value || '');
                }

                applyCategoryFilter();
                window.history.replaceState({}, '', targetUrl);
                showCatalogMessage('', '');
            };

            if (form && !form._isCatalogFilterBound) {
                form._isCatalogFilterBound = true;
                const unitSelect = form.querySelector('select[name="unit_id"]');
                const categorySelect = form.querySelector('select[name="category_id"]');

                unitSelect?.addEventListener('change', async () => {
                    applyCategoryFilter();
                    await loadStageContent();
                });
                categorySelect?.addEventListener('change', async () => {
                    await loadStageContent();
                });
                form.addEventListener('submit', (event) => event.preventDefault());
            }
            applyCategoryFilter();

            if (categoryTableFilterForm && !categoryTableFilterForm._isCatalogTableFilterBound) {
                categoryTableFilterForm._isCatalogTableFilterBound = true;
                categoryTableFilterForm.addEventListener('submit', (event) => {
                    event.preventDefault();
                    applyCategoryTableFilter();
                });
                categoryTableFilterSelect?.addEventListener('change', () => categoryTableFilterForm.requestSubmit());
            }
            applyCategoryTableFilter();

            if (!document._isCatalogGlobalEventsBound) {
                document._isCatalogGlobalEventsBound = true;
                
                document.addEventListener('change', (e) => {
                    const t = e.target;
                    if (t && t.id === 'defaultAssignUnitSelect') {
                        void loadDefaultAssignmentOptions();
                    } else if (t && t.id === 'defaultAssignCategorySelect') {
                        applyDefaultAssignmentSelection();
                    }
                });

                ['input', 'focus', 'click'].forEach(evt => {
                    document.addEventListener(evt, (e) => {
                        const t = e.target;
                        if (t && (t.id === 'defaultAssignUnitSelect' || t.id === 'defaultAssignCategorySelect')) {
                            void ensureDefaultAssignmentOptionsLoaded();
                        }
                    });
                });
                
                ['touchstart', 'mousedown'].forEach(evt => {
                    document.addEventListener(evt, (e) => {
                        const t = e.target;
                        if (t && (t.id === 'defaultAssignUnitSelect' || t.id === 'defaultAssignCategorySelect')) {
                            void ensureDefaultAssignmentOptionsLoaded();
                        }
                    }, { passive: true });
                });
            }

            const cardRef = document.getElementById('defaultAssignmentCard');
            const unitRef = document.getElementById('defaultAssignUnitSelect');
            const catRef = document.getElementById('defaultAssignCategorySelect');
            if (
                cardRef instanceof HTMLElement
                && !cardRef._isDefaultAssignmentInitialized
            ) {
                cardRef._isDefaultAssignmentInitialized = true;
                resetDefaultAssignmentSelects();
                if (
                    unitRef instanceof HTMLSelectElement
                    && Number(unitRef.value || 0) > 0
                ) {
                    void loadDefaultAssignmentOptions();
                }
            }

            if (
                unitRef instanceof HTMLSelectElement
                && catRef instanceof HTMLSelectElement
                && Number(unitRef.value || 0) > 0
                && catRef.disabled
            ) {
                void loadDefaultAssignmentOptions();
            }

            requestAnimationFrame(() => void ensureDefaultAssignmentOptionsLoaded());
            requestAnimationFrame(() => void ensureDefaultAssignmentOptionsLoaded());
            window.setTimeout(() => void ensureDefaultAssignmentOptionsLoaded(), 60);
            window.setTimeout(() => void ensureDefaultAssignmentOptionsLoaded(), 180);
            window.setTimeout(() => void ensureDefaultAssignmentOptionsLoaded(), 400);
            window.setTimeout(() => void ensureDefaultAssignmentOptionsLoaded(), 800);
            window.setTimeout(() => void ensureDefaultAssignmentOptionsLoaded(), 1400);
            if (!page._isDefaultAssignmentHydrationTimerBound) {
                page._isDefaultAssignmentHydrationTimerBound = true;
                let defaultAssignmentHydrationAttempts = 0;
                const defaultAssignmentHydrationTimer = window.setInterval(() => {
                    defaultAssignmentHydrationAttempts += 1;
                    void ensureDefaultAssignmentOptionsLoaded();
                    if (defaultAssignmentHydrationAttempts >= 20) {
                        window.clearInterval(defaultAssignmentHydrationTimer);
                    }
                }, 150);
            }

            bindStageActionForms();
            syncFieldSourceVisibility();
            };

            window.AdminApp = window.AdminApp || {};
            window.AdminApp.registerPageInitializer?.('talepler-settings-catalog', initCatalogSettingsPage);
            initCatalogSettingsPage();
            requestAnimationFrame(() => initCatalogSettingsPage());
            window.setTimeout(() => initCatalogSettingsPage(), 80);
            window.setTimeout(() => initCatalogSettingsPage(), 220);
            window.setTimeout(() => initCatalogSettingsPage(), 500);
        })();
    </script>
@endpush