@extends('layouts.app')

@section('title', 'Talepler Görev Yönetimi')

@section('content')
    @php
        $boardStyleClass = ($boardStyle ?? 'kanban_default') === 'kanban_compact' ? 'board-compact' : 'board-default';
    @endphp
    <div class="container-fluid talepler-board-page py-3 {{ $boardStyleClass }}">
        <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
            <div>
                <h1 class="h3 font-weight-bold mb-1 text-dark">Görev Yönetimi</h1>
                <p class="text-muted small mb-0">Talepleri tek ekrandan yönetin ve takip edin</p>
            </div>
            <div class="d-flex gap-2">
                @if (!empty($isAdminUser) && $ready)
                    <a href="{{ route('admin.talepler.settings.catalog', ['unit_id' => (int) $selectedUnitId, 'category_id' => (int) $selectedCategoryId]) }}"
                        class="btn btn-outline-secondary shadow-sm rounded-pill px-4">
                        <i class="bi bi-sliders me-2"></i>Birim/Kategori ve Alt Aşama Ayarları
                    </a>
                    <a href="{{ route('admin.talepler.settings.access') }}" class="btn btn-outline-secondary shadow-sm rounded-pill px-4">
                        <i class="bi bi-shield-lock me-2"></i>Talep Yetkileri
                    </a>
                @endif
                <a href="{{ route('admin.talepler.opened') }}" class="btn btn-outline-secondary shadow-sm rounded-pill px-4">
                    <i class="bi bi-send-check me-2"></i>Açtığım Talepler
                </a>
                <a href="{{ route('admin.talepler.archive') }}" class="btn btn-outline-secondary shadow-sm rounded-pill px-4">
                    <i class="bi bi-archive me-2"></i>Arşiv
                </a>
                <a href="{{ route('admin.talepler.index') }}" class="btn btn-primary shadow-sm rounded-pill px-4">
                    <i class="bi bi-plus-lg me-2"></i>Yeni Talep
                </a>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success border-0 shadow-sm rounded-3"><i class="bi bi-check-circle me-2"></i>
                {{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger border-0 shadow-sm rounded-3"><i class="bi bi-exclamation-octagon me-2"></i>
                {{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger border-0 shadow-sm rounded-3">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (!$ready)
            <div class="alert alert-warning border-0 shadow-sm rounded-3">
                Talepler görev tabloları hazır değil. Veritabanı geçişlerini çalıştırın.
            </div>
        @else
            {{-- Filtre Alani --}}
            <div class="card border-0 shadow-sm rounded-4 mb-4 filter-card">
                <div class="card-body p-3">
                    <form method="get" action="{{ route('admin.talepler.board') }}" class="row g-3 align-items-end">
                        <input type="hidden" name="scope" value="{{ $scopeFilter ?? 'unit' }}">
                        <div class="col-md-3">
                            <label class="form-label text-muted small fw-bold mb-1">Birim</label>
                            @if (($units->count() ?? 0) <= 1)
                                <input type="hidden" name="unit_id" value="{{ (int) ($selectedUnitId ?? ($units->first()->id ?? 0)) }}">
                                <div class="form-control form-control-sm border-0 bg-light d-flex align-items-center">
                                    {{ (string) ($units->first()->unit_name ?? 'Birim Yok') }}
                                </div>
                            @else
                                <select name="unit_id" class="form-select form-select-sm border-0 bg-light">
                                    <option value="">Tüm Birimler</option>
                                    @foreach ($units as $unit)
                                        <option value="{{ (int) $unit->id }}" {{ (int) $selectedUnitId === (int) $unit->id ? 'selected' : '' }}>{{ $unit->unit_name }}</option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                        <div class="col-md-3">
                            <label class="form-label text-muted small fw-bold mb-1">Kategori</label>
                            <select name="category_id" class="form-select form-select-sm border-0 bg-light">
                                <option value="">Tüm Kategoriler</option>
                                @foreach ($categories 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>
                        <div class="col-md-2">
                            <label class="form-label text-muted small fw-bold mb-1">Durum</label>
                            <select name="status" class="form-select form-select-sm border-0 bg-light">
                                @foreach (($statusFilterOptions ?? $statusOptions) as $statusKey => $statusLabel)
                                    <option value="{{ $statusKey }}" {{ $activeStatus === $statusKey ? 'selected' : '' }}>
                                        {{ $statusLabel }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label text-muted small fw-bold mb-1">Gösterim</label>
                            <label class="form-label text-muted small fw-bold mb-1">Öncelik</label>
                            <select name="priority" class="form-select form-select-sm border-0 bg-light mb-2">
                                @foreach (($priorityOptions ?? []) as $priorityKey => $priorityLabel)
                                    <option value="{{ $priorityKey }}" {{ ($activePriority ?? 'all') === $priorityKey ? 'selected' : '' }}>
                                        {{ $priorityLabel }}</option>
                                @endforeach
                            </select>
                            <label class="form-label text-muted small fw-bold mb-1">Gösterim</label>
                            @php
                                $unitScopeParams = array_filter([
                                    'unit_id' => (int) ($selectedUnitId ?? 0) ?: null,
                                    'category_id' => (int) ($selectedCategoryId ?? 0) ?: null,
                                    'status' => $activeStatus ?? 'all',
                                    'priority' => ($activePriority ?? 'all') !== 'all' ? ($activePriority ?? 'all') : null,
                                    'scope' => 'unit',
                                    'q' => $search !== '' ? $search : null,
                                ], static fn ($value) => $value !== null && $value !== '');
                                $mineScopeParams = array_filter([
                                    'unit_id' => (int) ($selectedUnitId ?? 0) ?: null,
                                    'category_id' => (int) ($selectedCategoryId ?? 0) ?: null,
                                    'status' => $activeStatus ?? 'all',
                                    'priority' => ($activePriority ?? 'all') !== 'all' ? ($activePriority ?? 'all') : null,
                                    'scope' => 'mine',
                                    'q' => $search !== '' ? $search : null,
                                ], static fn ($value) => $value !== null && $value !== '');
                            @endphp
                            <div class="btn-group btn-group-sm w-100" role="group" aria-label="Gösterim filtresi">
                                <a href="{{ route('admin.talepler.board', $unitScopeParams) }}"
                                    class="btn {{ ($scopeFilter ?? 'unit') === 'unit' ? 'btn-primary' : 'btn-outline-secondary' }}">
                                    Birime Ait
                                </a>
                                <a href="{{ route('admin.talepler.board', $mineScopeParams) }}"
                                    class="btn {{ ($scopeFilter ?? 'unit') === 'mine' ? 'btn-primary' : 'btn-outline-secondary' }}">
                                    Bana Ait
                                </a>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label text-muted small fw-bold mb-1">Arama</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text border-0 bg-light"><i class="bi bi-search"></i></span>
                                <input type="text" name="q" value="{{ $search }}" class="form-control border-0 bg-light"
                                    placeholder="No, başlık veya açıklama...">
                            </div>
                        </div>
                        <div class="col-md-2 d-flex gap-2">
                            <button type="submit" class="btn btn-sm btn-primary w-100 rounded-3">Uygula</button>
                        </div>
                    </form>
                </div>
            </div>
            @php
                $selectedUnitName = $selectedUnitId > 0 ? (string) (($units->firstWhere('id', $selectedUnitId)->unit_name ?? 'Bilinmeyen Birim')) : 'Tüm Birimler';
                $selectedCategoryName = $selectedCategoryId > 0 ? (string) (($categories->firstWhere('id', $selectedCategoryId)->category_name ?? 'Bilinmeyen Kategori')) : 'Tüm Kategoriler';
                $selectedStatusName = (string) ((($statusFilterOptions ?? $statusOptions)[$activeStatus] ?? $activeStatus));
                $selectedScopeName = ($scopeFilter ?? 'unit') === 'mine' ? 'Bana Ait Olanlar' : 'Birime Ait Olanlar';
                $shownCount = (int) ($requests->count());
                $canQuickCreateFromBoard = ($quickCreateUnits->isNotEmpty() ?? false) && ($quickCreateCategories->isNotEmpty() ?? false);
            @endphp
            <div class="alert alert-light border rounded-4 mb-4 d-flex flex-wrap gap-2 align-items-center">
                <span class="badge text-bg-light border">Birim: {{ $selectedUnitName }}</span>
                <span class="badge text-bg-light border">Kategori: {{ $selectedCategoryName }}</span>
                <span class="badge text-bg-light border">Durum: {{ $selectedStatusName }}</span>
                <span class="badge text-bg-light border">Öncelik: {{ ($priorityOptions[$activePriority ?? 'all'] ?? 'Tüm Öncelikler') }}</span>
                <span class="badge text-bg-light border">Gösterim: {{ $selectedScopeName }}</span>
                <span class="badge text-bg-light border">Arama: {{ $search !== '' ? $search : 'Yok' }}</span>
                <span class="badge text-bg-success">Görünen Kayıt: {{ $shownCount }}</span>
            </div>

            {{-- Kanban Board Alani --}}
            @php
                $laneClassMap = ['todo' => 'lane-todo', 'doing' => 'lane-doing', 'done' => 'lane-done'];
                $laneIconMap = ['todo' => 'bi-circle', 'doing' => 'bi-arrow-repeat', 'done' => 'bi-check-circle-fill'];
            @endphp

            <div class="talepler-board kanban-wrapper d-flex gap-4 pb-3">
                @foreach (($boardLaneOrder ?? ['todo', 'doing', 'done']) as $laneStatus)
                    @php
                        $laneRows = $requestsByLane->get($laneStatus, collect());
                        $laneGroup = $laneStatus;
                        $laneClass = $laneClassMap[$laneGroup] ?? 'lane-doing';
                        $laneIcon = $laneIconMap[$laneGroup] ?? 'bi-circle';
                        $laneLabel = $boardLaneLabels[$laneStatus] ?? ucfirst($laneStatus);
                    @endphp
                    <div class="talepler-board-lane d-flex flex-column">
                        <div class="kanban-column {{ $laneClass }} rounded-4 shadow-sm flex-grow-1 d-flex flex-column">
                            <div
                                class="kanban-header p-3 d-flex justify-content-between align-items-center border-bottom border-light">
                                <div class="d-flex align-items-center gap-2">
                                    <i class="bi {{ $laneIcon }} fs-5 opacity-75"></i>
                                    <h6 class="mb-0 fw-bold">{{ $laneLabel }}</h6>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <button type="button"
                                        class="btn btn-sm btn-outline-secondary rounded-circle d-inline-flex align-items-center justify-content-center js-board-quick-create-open"
                                        @if ($canQuickCreateFromBoard)
                                            data-bs-toggle="modal"
                                            data-bs-target="#boardQuickCreateModal"
                                        @endif
                                        data-target-lane="{{ $laneStatus }}"
                                        data-target-lane-label="{{ $laneLabel }}"
                                        title="{{ $laneLabel }} kolonuna talep ekle"
                                        aria-label="{{ $laneLabel }} kolonuna talep ekle"
                                        style="width: 2rem; height: 2rem;"
                                        {{ $canQuickCreateFromBoard ? '' : 'disabled' }}>
                                        <i class="bi bi-plus-lg"></i>
                                        {{--
                                                title="Yeni talep ekranına git"
                                                aria-label="Yeni talep ekranına git"
                                                style="width: 2rem; height: 2rem;">
                                                <i class="bi bi-plus-lg"></i>
                                        --}}
                                    </button>
                                    <span class="badge bg-white text-dark shadow-sm rounded-pill px-3 py-2"
                                        data-count-for="{{ $laneStatus }}">{{ $laneRows->count() }}</span>
                                </div>
                            </div>
                            <div class="kanban-body p-2 talepler-drop-zone flex-grow-1" data-status="{{ $laneStatus }}"
                                style="overflow-y: auto; max-height: 70vh;">
                                @forelse ($laneRows as $row)
                                    @php
                                        $allowedActionsJson = json_encode($row->allowed_actions ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                                        $actionToStatusMapJson = json_encode($row->action_to_status_map ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                                        $rowActionMeta = (array) ($row->action_meta ?? []);
                                        $rowActionLabels = (array) ($row->action_labels ?? []);
                                        $rowActionUserOptions = (array) ($row->action_user_options ?? []);
                                        $rowStatusLaneMap = (array) ($row->status_lane_map ?? []);
                                        $rowStatusOptions = (array) ($row->status_options ?? []);
                                        $actionMetaJson = json_encode($rowActionMeta, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                                        $actionLabelsJson = json_encode($rowActionLabels, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                                        $actionUserOptionsJson = json_encode($rowActionUserOptions, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                                        $statusLaneMapJson = json_encode($rowStatusLaneMap, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                                        $statusOptionsJson = json_encode($rowStatusOptions, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                                        $searchHaystack = strtolower(trim((string) (($row->request_key ?? '') . ' ' . ($row->title ?? '') . ' ' . ($row->description ?? '') . ' ' . ($row->unit_name ?? '') . ' ' . ($row->category_name ?? ''))));
                                        $priorityClass = match (strtolower((string) ($row->priority ?? 'medium'))) {
                                            'critical' => 'bg-danger-subtle text-danger border-danger',
                                            'high' => 'bg-warning-subtle text-warning-emphasis border-warning',
                                            'low' => 'bg-info-subtle text-info-emphasis border-info',
                                            default => 'bg-secondary-subtle text-secondary-emphasis border-secondary',
                                        };
                                        $priorityIcon = match (strtolower((string) ($row->priority ?? 'medium'))) {
                                            'critical' => 'bi-exclamation-triangle-fill',
                                            'high' => 'bi-arrow-up-circle-fill',
                                            'low' => 'bi-arrow-down-circle',
                                            default => 'bi-dash-circle',
                                        };
                                        $priorityLabel = match (strtolower((string) ($row->priority ?? 'medium'))) {
                                            'critical' => 'Kritik',
                                            'high' => 'Yüksek',
                                            'low' => 'Düşük',
                                            default => 'Orta',
                                        };
                                        $statusKey = strtolower(trim((string) ($row->status ?? '')));
                                        $stageLabelDisplay = trim((string) ($row->status_label ?? ''));
                                        $stageLabelFallbackMap = [
                                            'unassigned' => 'Ortak Havuz',
                                            'assigned' => 'Atandı',
                                            'in_progress' => 'İşlemde',
                                            'solution_center' => 'Çözüm Merkezi',
                                            'control' => 'Kontrol',
                                            'customer_review_reporter' => 'Talep Sahibi Kontrolü',
                                            'customer_review_approver' => 'Final Onay',
                                            'done' => 'Tamamlandı',
                                            'cancelled' => 'İptal',
                                            'todo' => 'Yapılacaklar',
                                            'doing' => 'İşlemdekiler',
                                        ];
                                        if ($stageLabelDisplay === '' || str_contains($stageLabelDisplay, '_')) {
                                            $stageLabelDisplay = (string) ($stageLabelFallbackMap[$statusKey] ?? str_replace('_', ' ', $stageLabelDisplay));
                                        }
                                        if ($stageLabelDisplay === '') {
                                            $stageLabelDisplay = '-';
                                        }
                                        $reporterSourceName = trim((string) ($row->reporter_name ?? ''));
                                        $reporterInitials = 'U';
                                        if ($reporterSourceName !== '') {
                                            $reporterParts = preg_split('/[\s]+/u', $reporterSourceName, -1, PREG_SPLIT_NO_EMPTY) ?: [];
                                            if (count($reporterParts) >= 2) {
                                                $reporterInitials = mb_strtoupper(
                                                    mb_substr((string) $reporterParts[0], 0, 1, 'UTF-8')
                                                    . mb_substr((string) end($reporterParts), 0, 1, 'UTF-8'),
                                                    'UTF-8'
                                                );
                                            } else {
                                                $singleReporterPart = (string) ($reporterParts[0] ?? $reporterSourceName);
                                                $reporterInitials = mb_strtoupper(mb_substr($singleReporterPart, 0, 2, 'UTF-8'), 'UTF-8');
                                            }
                                        }
                                        $avatarSourceName = trim((string) ($row->assignee_name ?? ''));
                                        $avatarInitials = '-';
                                        if ($avatarSourceName !== '') {
                                            $avatarParts = preg_split('/[\s]+/u', $avatarSourceName, -1, PREG_SPLIT_NO_EMPTY) ?: [];
                                            if (count($avatarParts) >= 2) {
                                                $avatarInitials = mb_strtoupper(
                                                    mb_substr((string) $avatarParts[0], 0, 1, 'UTF-8')
                                                    . mb_substr((string) end($avatarParts), 0, 1, 'UTF-8'),
                                                    'UTF-8'
                                                );
                                            } else {
                                                $singlePart = (string) ($avatarParts[0] ?? $avatarSourceName);
                                                $avatarInitials = mb_strtoupper(mb_substr($singlePart, 0, 2, 'UTF-8'), 'UTF-8');
                                            }
                                        }
                                        $assigneeFullName = trim((string) ($row->assignee_name ?? ''));
                                        $assigneeShortName = $assigneeFullName !== '' ? $avatarInitials : 'Atanmadı';
                                    @endphp
                                    <article class="talepler-card card mb-3 border-0 shadow-sm" data-request-id="{{ (int) $row->id }}"
                                        data-unit-id="{{ (int) $row->unit_id }}" data-status-key="{{ (string) ($row->status ?? '') }}"
                                        data-assignee-user-id="{{ (int) ($row->assignee_user_id ?? 0) }}"
                                        data-lane-group="{{ (string) ($row->lane_group ?? $laneStatus) }}"
                                        data-can-archive="{{ !empty($row->can_archive) ? '1' : '0' }}"
                                        data-can-delete="{{ !empty($row->can_delete) ? '1' : '0' }}"
                                        data-can-lane-move="{{ !empty($row->can_lane_move) ? '1' : '0' }}"
                                        data-status-url="{{ route('admin.talepler.tasks.status', ['id' => (int) $row->id]) }}"
                                        data-detail-url="{{ route('admin.talepler.tasks.show', ['id' => (int) $row->id]) }}"
                                        data-archive-url="{{ route('admin.talepler.tasks.archive', ['id' => (int) $row->id]) }}"
                                        data-delete-url="{{ route('admin.talepler.tasks.delete', ['id' => (int) $row->id]) }}"
                                        data-workflow-url="{{ route('admin.talepler.tasks.workflow', ['id' => (int) $row->id]) }}"
                                        data-allowed-actions='{{ $allowedActionsJson }}'
                                        data-action-to-status-map='{{ $actionToStatusMapJson }}'
                                        data-action-meta='{{ $actionMetaJson }}' data-action-labels='{{ $actionLabelsJson }}'
                                        data-action-user-options='{{ $actionUserOptionsJson }}'
                                        data-status-lane-map='{{ $statusLaneMapJson }}' data-status-options='{{ $statusOptionsJson }}'
                                        data-search="{{ e($searchHaystack) }}"
                                        draggable="false">

                                        <div class="card-body p-3">
                                            <div class="d-flex justify-content-between align-items-center mb-2 gap-2">
                                                <a href="{{ route('admin.talepler.tasks.show', ['id' => (int) $row->id]) }}"
                                                    class="text-primary fw-bold text-decoration-none small">
                                                    #{{ $row->request_key }}
                                                </a>
                                                <span class="badge border {{ $priorityClass }} rounded-pill" style="font-size: 0.7rem;">
                                                    <i
                                                        class="bi {{ $priorityIcon }} me-1"></i>{{ $priorityLabel }}
                                                </span>
                                            </div>

                                            <h6 class="card-title fw-bold text-dark mb-3" style="font-size: 0.95rem; line-height: 1.4;">
                                                {{ $row->title }}</h6>

                                            <div class="d-flex flex-wrap gap-1 mb-3">
                                                <span
                                                    class="badge bg-light text-secondary border border-light-subtle rounded-1 fw-normal"
                                                    style="font-size: 0.75rem;"><i
                                                        class="bi bi-building me-1"></i>{{ $row->unit_name }}</span>
                                                <span
                                                    class="badge bg-light text-secondary border border-light-subtle rounded-1 fw-normal"
                                                    style="font-size: 0.75rem;"><i
                                                        class="bi bi-tag me-1"></i>{{ $row->category_name }}</span>
                                                <span
                                                    class="badge text-bg-light border rounded-1 fw-normal talepler-stage-badge {{ $laneStatus === 'doing' ? '' : 'd-none' }}"
                                                    style="font-size: 0.75rem;">
                                                    <i class="bi bi-diagram-3 me-1"></i>Aşama: <span
                                                        class="talepler-stage-label">{{ $stageLabelDisplay }}</span>
                                                </span>
                                            </div>
                                            <div
                                                class="small text-muted mb-2 talepler-active-step-wrap {{ empty($row->active_step_label) ? 'd-none' : '' }}">
                                                Aktif İş Akışı Adımı: <span
                                                    class="fw-semibold text-dark talepler-active-step">{{ $row->active_step_label ?? '' }}</span>
                                            </div>

                                            <div class="d-flex justify-content-between align-items-center border-top pt-3 mt-1">
                                                <div class="d-flex flex-column gap-2">
                                                    <div class="d-flex align-items-center">
                                                        <div class="bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center fw-bold me-2"
                                                            style="width: 28px; height: 28px; font-size: 0.7rem;"
                                                            title="{{ $reporterSourceName !== '' ? $reporterSourceName : 'Bilinmeyen Kullanıcı' }}"
                                                            aria-label="{{ $reporterSourceName !== '' ? $reporterSourceName : 'Bilinmeyen Kullanıcı' }}">
                                                            {{ $reporterInitials }}
                                                        </div>
                                                        <div class="d-flex flex-column">
                                                            <small class="text-muted" style="font-size: 0.65rem;">Talep Sahibi</small>
                                                            <span class="fw-semibold text-dark" style="font-size: 0.8rem;"
                                                                title="{{ $reporterSourceName !== '' ? $reporterSourceName : 'Bilinmeyen Kullanıcı' }}">
                                                                {{ $reporterSourceName !== '' ? $reporterSourceName : '-' }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <div class="avatar bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center fw-bold me-2"
                                                            style="width: 28px; height: 28px; font-size: 0.7rem;"
                                                            title="{{ $avatarSourceName !== '' ? $avatarSourceName : 'Bilinmeyen Kullanıcı' }}"
                                                            aria-label="{{ $avatarSourceName !== '' ? $avatarSourceName : 'Bilinmeyen Kullanıcı' }}">
                                                            {{ $avatarInitials }}
                                                        </div>
                                                        <div class="d-flex flex-column">
                                                            <small class="text-muted" style="font-size: 0.65rem;">Sorumlu</small>
                                                            <span class="talepler-assignee fw-semibold text-dark" style="font-size: 0.8rem;"
                                                                title="{{ $assigneeFullName !== '' ? $assigneeFullName : 'Atanmadı' }}">
                                                                {{ $assigneeShortName }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>

                                                @if($row->due_date)
                                                    <div class="text-end" title="Termin">
                                                        <small class="text-muted d-block" style="font-size: 0.65rem;">Bitiş</small>
                                                        <span class="text-dark fw-semibold" style="font-size: 0.75rem;"><i
                                                                class="bi bi-calendar2-day text-primary me-1"></i>{{ \Carbon\Carbon::parse($row->due_date)->format('d.m.Y') }}</span>
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="mt-3 d-flex justify-content-end gap-2" data-utility-actions>
                                                <a href="{{ route('admin.talepler.tasks.show', ['id' => (int) $row->id]) }}"
                                                    class="btn btn-sm btn-light border icon-btn" title="Detay / Aşama Güncelle">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                @if ($laneStatus === 'done' && !empty($row->can_archive))
                                                    <form method="post"
                                                        action="{{ route('admin.talepler.tasks.archive', ['id' => (int) $row->id]) }}">
                                                        @csrf
                                                        <input type="hidden" name="return_to" value="board">
                                                        <button type="submit"
                                                            class="btn btn-sm btn-light border icon-btn js-talepler-confirm-btn"
                                                            data-confirm-title="Arşive Gönder"
                                                            data-confirm-message="Bu talep arşive gönderilsin mi?"
                                                            data-confirm-confirm-text="Evet, Gönder" data-confirm-icon="question"
                                                            title="Arşive Gönder">
                                                            <i class="bi bi-archive"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                                @if ($laneStatus === 'done' && !empty($row->can_delete))
                                                    <form method="post"
                                                        action="{{ route('admin.talepler.tasks.delete', ['id' => (int) $row->id]) }}">
                                                        @csrf
                                                        <input type="hidden" name="return_to" value="board">
                                                        <button type="submit"
                                                            class="btn btn-sm btn-light border text-danger icon-btn js-talepler-confirm-btn"
                                                            data-confirm-title="Talep Sil"
                                                            data-confirm-message="Bu talep kalıcı olarak silinsin mi?"
                                                            data-confirm-confirm-text="Evet, Sil" title="Sil">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </div>
                                    </article>
                                @empty
                                    <div
                                        class="talepler-empty-state d-flex flex-column align-items-center justify-content-center p-4 text-center h-100 opacity-50">
                                        <i class="bi bi-inbox fs-1 text-muted mb-2"></i>
                                        <p class="text-muted small fw-medium mb-0">Bu kolonda talep bulunmuyor</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            @if ($canQuickCreateFromBoard)
                <div class="modal fade" id="boardQuickCreateModal" tabindex="-1" aria-labelledby="boardQuickCreateModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content border-0 shadow-lg">
                            <div class="modal-header border-0 pb-0">
                                <div>
                                    <h5 class="modal-title" id="boardQuickCreateModalLabel">Kolona Talep Ekle</h5>
                                    <p class="text-muted small mb-0">
                                        Talep sadece kendi biriminize açılır ve
                                        <span class="fw-semibold" data-board-quick-create-lane-label>{{ old('target_lane') ? (($boardLaneLabels[old('target_lane')] ?? old('target_lane'))) : 'Yapılacaklar' }}</span>
                                        kolonunda başlar.
                                    </p>
                                </div>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
                            </div>
                            <div class="modal-body pt-3">
                                <form method="post" action="{{ route('admin.talepler.board.tasks.store') }}" id="boardQuickCreateForm" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="return_to" value="board">
                                    <input type="hidden" name="target_lane" id="boardQuickCreateTargetLane" value="{{ old('target_lane', 'todo') }}">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label small fw-semibold text-muted mb-1">İlgili Birim <span class="text-danger">*</span></label>
                                            <select name="unit_id" id="boardQuickCreateUnit" class="form-select" required>
                                                <option value="">-- Birim Seçiniz --</option>
                                                @foreach ($quickCreateUnits as $unit)
                                                    <option value="{{ (int) $unit->id }}" {{ (int) old('unit_id') === (int) $unit->id ? 'selected' : '' }}>
                                                        {{ $unit->unit_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small fw-semibold text-muted mb-1">Kategori / Alt Süreç <span class="text-danger">*</span></label>
                                            <select name="category_id" id="boardQuickCreateCategory" class="form-select" data-old="{{ old('category_id') }}" required>
                                                <option value="">Önce birim seçin</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small fw-semibold text-muted mb-1">Sorumlu</label>
                                            <select name="assignee_user_id" id="boardQuickCreateAssignee" class="form-select" data-old="{{ old('assignee_user_id') }}">
                                                <option value="">Atama yapma</option>
                                            </select>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label small fw-semibold text-muted mb-1">Talep Başlığı <span class="text-danger">*</span></label>
                                            <input type="text" name="title" class="form-control" value="{{ old('title') }}" maxlength="400"
                                                placeholder="Kısa ve net bir başlık yazın..." required>
                                        </div>
                                        <div class="col-12 board-quick-create-context {{ old('support_context_key') ? '' : 'd-none' }}">
                                            <label class="form-label small fw-semibold text-muted mb-1">Kaynak / Lokasyon</label>
                                            <select name="support_context_key" id="boardQuickCreateSupportContext" class="form-select">
                                                <option value="">-- Seçiniz --</option>
                                                @foreach (($supportContextOptions ?? []) as $contextKey => $contextLabel)
                                                    <option value="{{ $contextKey }}" {{ old('support_context_key') === $contextKey ? 'selected' : '' }}>
                                                        {{ $contextLabel }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <div class="form-text">Pazarlama Destek kategorisinde bu alan zorunludur.</div>
                                        </div>
                                        <div class="col-12 d-none" id="boardQuickCreateDynamicFieldSection">
                                            <div class="row g-3" id="boardQuickCreateDynamicFieldGrid"></div>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label small fw-semibold text-muted mb-1">Detaylı Açıklama</label>
                                            <textarea name="description" class="form-control" rows="5" maxlength="10000"
                                                placeholder="Talebin kapsamını ve beklentiyi açıklayın...">{{ old('description') }}</textarea>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label small fw-semibold text-muted mb-1 d-block">Dosya Ekleri</label>
                                            <div class="board-quick-create-dropzone border rounded-3 p-3 text-center bg-light-subtle">
                                                <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill"
                                                    onclick="document.getElementById('boardQuickCreateAttachments').click()">
                                                    <i class="bi bi-paperclip me-1"></i>Dosya Seç
                                                </button>
                                                <div class="small text-muted mt-2">PDF, Office, resim, zip. Maks. 20MB / dosya.</div>
                                                <input type="file" name="attachments[]" id="boardQuickCreateAttachments" class="d-none" multiple>
                                            </div>
                                            <div id="boardQuickCreateFileList" class="mt-2 small"></div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer border-0 pt-0">
                                <button type="button" class="btn btn-light border rounded-pill px-4" data-bs-dismiss="modal">Vazgeç</button>
                                <button type="submit" form="boardQuickCreateForm" class="btn btn-primary rounded-pill px-4">
                                    Talebi Oluştur
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endif
    </div>
@endsection

@push('styles')
    <style>
        .talepler-board-page {
            --pd-green: #145a46;
            --pd-green-dark: #0f4536;
            --pd-green-light: #e6f2ed;
            --pd-green-mid: #b9d9cc;
        }

        body {
            background-color: #f8fafc;
        }

        .talepler-board-page {
            min-height: calc(100vh - 60px);
        }


        .kanban-wrapper {
            width: 100%;
            align-items: stretch;
            overflow-x: hidden;
        }

        .talepler-board-lane {
            flex: 1 1 0;
            min-width: 320px;
            max-width: 100%;
        }

        .kanban-wrapper::-webkit-scrollbar {
            height: 8px;
        }

        .kanban-wrapper::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }

        .kanban-wrapper::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .kanban-wrapper::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        @media (max-width: 1199.98px) {
            .kanban-wrapper {
                overflow-x: auto;
            }

            .talepler-board-lane {
                flex: 0 0 min(420px, 86vw);
            }
        }

        .kanban-column {
            background-color: #f1f5f9;
            border: 1px solid #e2e8f0;
            transition: all 0.2s;
        }

        /* Lane Styling based on Groups */
        .lane-todo .kanban-header {
            border-top: 4px solid #94a3b8;
        }

        .lane-todo .kanban-header h6 {
            color: #475569;
        }

        .lane-todo .Kanban-header i {
            color: #64748b;
        }

        .lane-doing .kanban-header {
            border-top: 4px solid var(--pd-green);
        }

        .lane-doing .kanban-header h6 {
            color: var(--pd-green-dark);
        }

        .lane-doing .kanban-header i {
            color: var(--pd-green);
        }

        .lane-done .kanban-header {
            border-top: 4px solid #1f7a5f;
        }

        .lane-done .kanban-header h6 {
            color: var(--pd-green-dark);
        }

        .lane-done .kanban-header i {
            color: #1f7a5f;
        }

        /* Card Styling */
        .talepler-card {
            transition: border-color 0.2s, box-shadow 0.2s;
            border: 1px solid #e2e8f0 !important;
            border-radius: 10px;
            cursor: default;
        }

        .talepler-card:hover {
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05) !important;
            border-color: var(--pd-green-mid) !important;
        }

        .talepler-card-draggable {
            cursor: grab;
        }

        .talepler-card.is-dragging {
            opacity: 0.6;
            cursor: grabbing;
            transform: rotate(2deg) scale(0.98);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
        }

        .talepler-drop-zone.is-drag-over {
            background-color: #e2e8f0;
            border-radius: 12px;
            border: 2px dashed var(--pd-green-mid);
        }

        /* Action buttons matching lane */
        .action-btn {
            background-color: #f8fafc;
            border: 1px solid #cbd5e1;
            color: #475569;
            font-weight: 500;
            transition: all 0.2s;
        }

        .action-btn:hover {
            background-color: var(--pd-green-light);
            border-color: var(--pd-green-mid);
            color: var(--pd-green-dark);
        }

        .lane-doing .action-btn:hover {
            background-color: var(--pd-green-light);
            border-color: var(--pd-green-mid);
            color: var(--pd-green-dark);
        }

        .lane-done .action-btn:hover {
            background-color: #edf7f2;
            border-color: var(--pd-green-mid);
            color: var(--pd-green-dark);
        }

        .talepler-board-page .btn-primary {
            background: var(--pd-green);
            border-color: var(--pd-green);
        }

        .talepler-board-page .btn-primary:hover,
        .talepler-board-page .btn-primary:focus {
            background: var(--pd-green-dark);
            border-color: var(--pd-green-dark);
        }

        .talepler-board-page .btn-outline-primary {
            color: var(--pd-green);
            border-color: var(--pd-green-mid);
        }

        .talepler-board-page .btn-outline-primary:hover,
        .talepler-board-page .btn-outline-primary:focus {
            color: var(--pd-green-dark);
            border-color: var(--pd-green);
            background: var(--pd-green-light);
        }

        .talepler-board-page .btn-outline-secondary {
            color: var(--pd-green);
            border-color: var(--pd-green-mid);
        }

        .talepler-board-page .btn-outline-secondary:hover,
        .talepler-board-page .btn-outline-secondary:focus {
            color: var(--pd-green-dark);
            border-color: var(--pd-green);
            background: var(--pd-green-light);
        }

        .talepler-board-page .btn-success {
            background: var(--pd-green);
            border-color: var(--pd-green);
        }

        .talepler-board-page .btn-success:hover,
        .talepler-board-page .btn-success:focus {
            background: var(--pd-green-dark);
            border-color: var(--pd-green-dark);
        }

        .talepler-board-page .text-primary {
            color: var(--pd-green) !important;
        }

        .talepler-board-page .form-control:focus,
        .talepler-board-page .form-select:focus {
            border-color: var(--pd-green-mid);
            box-shadow: 0 0 0 0.2rem rgba(20, 90, 70, 0.15);
        }

        .talepler-empty-state {
            min-height: 120px;
        }

        .icon-btn {
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 8px;
            color: #475569;
        }

        .icon-btn:hover,
        .icon-btn:focus {
            color: var(--pd-green-dark);
            border-color: var(--pd-green-mid);
            background: var(--pd-green-light);
        }
    </style>
@endpush

@push('scripts')
    <script>
        (() => {
            const forms = Array.from(document.querySelectorAll('form'))
                .filter((form) => form.querySelector('[name="unit_id"]') && form.querySelector('select[name="category_id"]'));
            if (forms.length === 0) return;

            const applyCategoryFilter = (unitField, categorySelect) => {
                const selectedUnitId = String(unitField.value || '').trim();
                const hasUnitSelection = selectedUnitId !== '';
                let selectedVisible = false;
                const firstOption = categorySelect.options[0] || null;

                categorySelect.disabled = !hasUnitSelection;
                if (firstOption) {
                    firstOption.textContent = hasUnitSelection ? 'Tüm Kategoriler' : 'Önce birim seçin';
                }

                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 (!selectedVisible && String(categorySelect.value || '').trim() !== '') {
                    categorySelect.value = '';
                }
            };

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

                const onChange = () => {
                    categorySelect.value = '';
                    applyCategoryFilter(unitSelect, categorySelect);
                };
                unitSelect.addEventListener('change', onChange);
                applyCategoryFilter(unitSelect, categorySelect);
            });
        })();

        (() => {
            const initTaleplerBoardInteractions = () => {
            const board = document.querySelector('.talepler-board');
            if (!board || board.dataset.boardInteractionInitBound === '1') return;
            board.dataset.boardInteractionInitBound = '1';
            const zones = Array.from(board.querySelectorAll('.talepler-drop-zone'));
            const cards = Array.from(board.querySelectorAll('.talepler-card'));
            const csrfToken = '{{ csrf_token() }}';
            const defaultActionMeta = @json($actionMeta ?? []);
            const defaultActionLabels = @json($actionLabels ?? []);
            const unitMembersByUnit = @json($unitMembersByUnit ?? []);
            const transitionMap = @json($dragTransitionMap ?? []);
            const laneGroupsByStatus = @json($laneGroupsByStatus ?? []);
            const boardLaneGroups = new Set(['todo', 'doing', 'done']);
            const laneLabelMap = {
                todo: 'Yapılacaklar',
                doing: 'İşlemdekiler',
                done: 'Tamamlananlar',
            };
            const statusLabelMap = {
                unassigned: 'Ortak Havuz',
                assigned: 'Atandı',
                in_progress: 'İşlemde',
                solution_center: 'Çözüm Merkezi',
                control: 'Kontrol',
                customer_review_reporter: 'Talep Sahibi Kontrolü',
                customer_review_approver: 'Final Onay',
                done: 'Tamamlandı',
                cancelled: 'İptal',
                todo: 'Yapılacaklar',
                doing: 'İşlemdekiler',
            };
            let draggingCard = null;

            const refreshCounts = () => zones.forEach((zone) => {
                const status = String(zone.dataset.status || '');
                const counter = board.querySelector(`[data-count-for="${status}"]`);
                if (!counter) return;
                const total = zone.querySelectorAll('.talepler-card').length;
                counter.textContent = String(total);
                let emptyEl = zone.querySelector('.talepler-empty-state');
                if (total === 0 && !emptyEl) {
                    emptyEl = document.createElement('div');
                    emptyEl.className = 'talepler-empty-state d-flex flex-column align-items-center justify-content-center p-4 text-center h-100 opacity-50';
                    emptyEl.innerHTML = '<i class="bi bi-inbox fs-1 text-muted mb-2"></i><p class="text-muted small fw-medium mb-0">Bu kolonda talep bulunmuyor</p>';
                    zone.appendChild(emptyEl);
                }
                if (total > 0 && emptyEl) emptyEl.remove();
            });

            const parseCardJson = (card, key, fallback = {}) => {
                try {
                    const raw = String(card.dataset[key] || '');
                    if (raw === '') return fallback;
                    const parsed = JSON.parse(raw);
                    if (parsed && typeof parsed === 'object') return parsed;
                } catch (e) { }
                return fallback;
            };

            const getCardActionMeta = (card) => {
                const cardMeta = parseCardJson(card, 'actionMeta', {});
                return cardMeta && Object.keys(cardMeta).length > 0 ? cardMeta : defaultActionMeta;
            };

            const getCardActionLabels = (card) => {
                const cardLabels = parseCardJson(card, 'actionLabels', {});
                return cardLabels && Object.keys(cardLabels).length > 0 ? cardLabels : defaultActionLabels;
            };

            const getCardActionUserOptions = (card) => parseCardJson(card, 'actionUserOptions', {});
            const getCardStatusLaneMap = (card) => parseCardJson(card, 'statusLaneMap', {});
            const getCardStatusOptions = (card) => parseCardJson(card, 'statusOptions', {});

            const requiresUserSelect = (card, actionKey) => Boolean((getCardActionMeta(card)[actionKey] || {}).requires_user_select);
            const clearOverState = () => zones.forEach((zone) => zone.classList.remove('is-drag-over'));
            const toBool = (value) => ['1', 'true', 'yes', 'on'].includes(String(value || '').toLowerCase());
            const normalizeBool = (value, fallback = false) => {
                if (typeof value === 'boolean') return value;
                if (typeof value === 'number') return value === 1;
                if (typeof value === 'string') return toBool(value);
                return fallback;
            };
            const normalizeStatusLabel = (labelRaw, statusRaw = '') => {
                const statusKey = String(statusRaw || '').trim().toLowerCase();
                let label = String(labelRaw || '').trim();
                if (label !== '' && !label.includes('_')) {
                    return label;
                }
                if (statusKey !== '' && Object.prototype.hasOwnProperty.call(statusLabelMap, statusKey)) {
                    return String(statusLabelMap[statusKey]);
                }
                if (label.includes('_')) {
                    label = label.split('_').join(' ');
                }
                return label !== '' ? label : '-';
            };
            const resolveLaneGroupForStatus = (statusKeyRaw, card = null) => {
                const statusKey = String(statusKeyRaw || '').trim();
                if (statusKey === '') return 'doing';
                if (boardLaneGroups.has(statusKey)) return statusKey;
                if (card) {
                    const localMap = getCardStatusLaneMap(card);
                    const localLane = String(localMap[statusKey] || '').trim();
                    if (boardLaneGroups.has(localLane)) return localLane;
                }
                const lane = String(laneGroupsByStatus[statusKey] || '').trim();
                if (boardLaneGroups.has(lane)) return lane;
                if (['in_progress', 'assigned', 'analysis', 'solution_center', 'control', 'customer_review_reporter', 'customer_review_approver'].includes(statusKey)) {
                    return 'doing';
                }
                if (['unassigned', 'acik', 'todo'].includes(statusKey)) return 'todo';
                if (['done', 'ok', 'tamamlandi'].includes(statusKey)) return 'done';
                return 'doing';
            };

            const updateCardUtilityActions = (card, laneGroupRaw = '', req = null) => {
                const wrap = card.querySelector('[data-utility-actions]');
                if (!wrap) return;

                const laneGroup = String(laneGroupRaw || card.dataset.laneGroup || resolveLaneGroupForStatus(card.dataset.statusKey, card)).trim() || 'doing';
                const detailUrl = String(card.dataset.detailUrl || '#');
                const archiveUrl = String(card.dataset.archiveUrl || '');
                const deleteUrl = String(card.dataset.deleteUrl || '');
                const statusUrl = String(card.dataset.statusUrl || '').trim();

                const canArchive = req && Object.prototype.hasOwnProperty.call(req, 'can_archive')
                    ? normalizeBool(req.can_archive, toBool(card.dataset.canArchive))
                    : toBool(card.dataset.canArchive);
                const canDelete = req && Object.prototype.hasOwnProperty.call(req, 'can_delete')
                    ? normalizeBool(req.can_delete, toBool(card.dataset.canDelete))
                    : toBool(card.dataset.canDelete);

                card.dataset.laneGroup = laneGroup;
                card.dataset.canArchive = canArchive ? '1' : '0';
                card.dataset.canDelete = canDelete ? '1' : '0';

                wrap.innerHTML = '';
                if (statusUrl !== '') {
                    wrap.insertAdjacentHTML(
                        'beforeend',
                        `<button type="button" class="btn btn-sm btn-light border icon-btn js-card-board-action"
                                data-action-kind="assignee" title="Atamayı Yönet">
                                <i class="bi bi-person-gear"></i>
                            </button>`
                    );
                }

                if (statusUrl !== '') {
                    wrap.insertAdjacentHTML(
                        'beforeend',
                        `<button type="button" class="btn btn-sm btn-light border icon-btn js-card-board-action"
                                data-action-kind="stage" title="Aşama / Durum Güncelle">
                                <i class="bi bi-signpost-split"></i>
                            </button>`
                    );
                }

                wrap.insertAdjacentHTML(
                    'beforeend',
                    `<a href="${detailUrl}" class="btn btn-sm btn-light border icon-btn" title="Detay / Aşama Güncelle"><i class="bi bi-eye"></i></a>`
                );

                if (laneGroup === 'done' && canArchive && archiveUrl !== '') {
                    wrap.insertAdjacentHTML(
                        'beforeend',
                        `<form method="post" action="${archiveUrl}">
                                <input type="hidden" name="_token" value="${csrfToken}">
                                <input type="hidden" name="return_to" value="board">
                                <button type="submit" class="btn btn-sm btn-light border icon-btn js-talepler-confirm-btn"
                                    data-confirm-title="Arşive Gönder"
                                    data-confirm-message="Bu talep arşive gönderilsin mi?"
                                    data-confirm-confirm-text="Evet, Gönder"
                                    data-confirm-icon="question"
                                    title="Arşive Gönder">
                                    <i class="bi bi-archive"></i>
                                </button>
                            </form>`
                    );
                }

                if (laneGroup === 'done' && canDelete && deleteUrl !== '') {
                    wrap.insertAdjacentHTML(
                        'beforeend',
                        `<form method="post" action="${deleteUrl}">
                                <input type="hidden" name="_token" value="${csrfToken}">
                                <input type="hidden" name="return_to" value="board">
                                <button type="submit" class="btn btn-sm btn-light border text-danger icon-btn js-talepler-confirm-btn"
                                    data-confirm-title="Talep Sil"
                                    data-confirm-message="Bu talep kalıcı olarak silinsin mi?"
                                    data-confirm-confirm-text="Evet, Sil"
                                    title="Sil">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>`
                    );
                }
            };

            const postWorkflow = async (card, action, extraPayload = {}) => {
                const url = String(card.dataset.workflowUrl || '');
                const formData = new FormData();
                formData.append('_token', csrfToken);
                formData.append('action', action);
                formData.append('return_to', 'board');
                if (extraPayload && typeof extraPayload === 'object') {
                    Object.entries(extraPayload).forEach(([key, value]) => {
                        if (value === null || value === undefined || String(key || '').trim() === '') return;
                        formData.append(String(key), String(value));
                    });
                }
                const response = await fetch(url, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', Accept: 'application/json' }, body: formData, credentials: 'same-origin' });
                const payload = await response.json();
                if (!response.ok || !payload || payload.ok !== true) throw new Error(String(payload?.message || 'İşlem adımı tamamlanamadı.'));
                return payload;
            };

            const postLaneStatus = async (card, lane, targetStatus = '') => {
                const url = String(card.dataset.statusUrl || '');
                if (url === '') {
                    throw new Error('Kart durum grubu güncelleme adresi bulunamadı.');
                }
                const formData = new FormData();
                formData.append('_token', csrfToken);
                formData.append('lane', String(lane || '').trim());
                const targetStatusValue = String(targetStatus || '').trim();
                if (targetStatusValue !== '') {
                    formData.append('target_status', targetStatusValue);
                }
                formData.append('return_to', 'board');
                const response = await fetch(url, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', Accept: 'application/json' }, body: formData, credentials: 'same-origin' });
                const payload = await response.json();
                if (!response.ok || !payload || payload.ok !== true) throw new Error(String(payload?.message || 'Kart durum grubu güncellenemedi.'));
                return payload;
            };

            const postAssigneeUpdate = async (card, assigneeUserId = 0) => {
                const url = String(card.dataset.statusUrl || '');
                if (url === '') {
                    throw new Error('Kart atama güncelleme adresi bulunamadı.');
                }
                const formData = new FormData();
                formData.append('_token', csrfToken);
                formData.append('assignee_user_id', Number(assigneeUserId || 0) > 0 ? String(Number(assigneeUserId)) : '');
                formData.append('return_to', 'board');
                const response = await fetch(url, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', Accept: 'application/json' }, body: formData, credentials: 'same-origin' });
                const payload = await response.json();
                if (!response.ok || !payload || payload.ok !== true) throw new Error(String(payload?.message || 'Atama güncellenemedi.'));
                return payload;
            };

            const setCardDraggableState = (card, allowedActionsRaw = null) => {
                let allowedActions = [];
                if (Array.isArray(allowedActionsRaw)) {
                    allowedActions = allowedActionsRaw;
                } else {
                    try { allowedActions = JSON.parse(String(card.dataset.allowedActions || '[]')); } catch (e) { allowedActions = []; }
                }
                const statusUrl = String(card.dataset.statusUrl || '').trim();
                const canLaneMove = toBool(card.dataset.canLaneMove);
                const canDrag = canLaneMove && (statusUrl !== '' || allowedActions.some((actionKey) => !requiresUserSelect(card, actionKey)));
                card.classList.toggle('talepler-card-draggable', canDrag);
                card.setAttribute('draggable', canDrag ? 'true' : 'false');
            };

            const updateCardActions = (card, allowedActionsRaw) => {
                const allowedActions = Array.isArray(allowedActionsRaw) ? allowedActionsRaw : [];
                const current = card.querySelector('[data-actions-container]');
                if (current) current.remove();
                setCardDraggableState(card, allowedActions);
            };

            const applyWorkflowResponse = (card, payload, fallbackLane) => {
                const req = payload && typeof payload === 'object' ? payload.request : null;
                if (!req || typeof req !== 'object' || Array.isArray(req)) return;

                const nextStatus = String(req.status || '').trim();
                const statusLaneMap = req.status_lane_map && typeof req.status_lane_map === 'object' ? req.status_lane_map : {};
                const statusOptions = req.status_options && typeof req.status_options === 'object' ? req.status_options : {};
                if (statusLaneMap && Object.keys(statusLaneMap).length > 0) {
                    card.dataset.statusLaneMap = JSON.stringify(statusLaneMap);
                }
                if (statusOptions && Object.keys(statusOptions).length > 0) {
                    card.dataset.statusOptions = JSON.stringify(statusOptions);
                }
                const nextLane = String(req.lane_group || resolveLaneGroupForStatus(nextStatus, card) || fallbackLane || 'doing').trim();
                const nextStatusLabel = normalizeStatusLabel(req.status_label, nextStatus);
                if (nextStatus !== '') card.dataset.statusKey = nextStatus;
                if (nextLane !== '') card.dataset.laneGroup = nextLane;
                if (Object.prototype.hasOwnProperty.call(req, 'can_archive')) card.dataset.canArchive = req.can_archive ? '1' : '0';
                if (Object.prototype.hasOwnProperty.call(req, 'can_delete')) card.dataset.canDelete = req.can_delete ? '1' : '0';
                if (Object.prototype.hasOwnProperty.call(req, 'can_lane_move')) card.dataset.canLaneMove = req.can_lane_move ? '1' : '0';

                if (nextLane !== '') {
                    const nextZone = board.querySelector(`.talepler-drop-zone[data-status="${nextLane}"]`);
                    if (nextZone && card.parentElement !== nextZone) nextZone.appendChild(card);
                }

                const allowedActions = Array.isArray(req.allowed_actions) ? req.allowed_actions : [];
                const actionToStatusMap = req.action_to_status_map && typeof req.action_to_status_map === 'object' ? req.action_to_status_map : {};
                const actionMeta = req.action_meta && typeof req.action_meta === 'object' ? req.action_meta : {};
                const actionLabels = req.action_labels && typeof req.action_labels === 'object' ? req.action_labels : {};
                const actionUserOptions = req.action_user_options && typeof req.action_user_options === 'object' ? req.action_user_options : {};
                card.dataset.allowedActions = JSON.stringify(allowedActions);
                card.dataset.actionToStatusMap = JSON.stringify(actionToStatusMap);
                card.dataset.actionMeta = JSON.stringify(actionMeta);
                card.dataset.actionLabels = JSON.stringify(actionLabels);
                card.dataset.actionUserOptions = JSON.stringify(actionUserOptions);

                const assigneeEl = card.querySelector('.talepler-assignee');
                if (assigneeEl) assigneeEl.textContent = String(req.assignee_name || '').trim() || 'Atanmadı';
                if (assigneeEl) {
                    const assigneeName = String(req.assignee_name || '').trim();
                    assigneeEl.textContent = assigneeName !== '' ? buildAvatarInitials(assigneeName) : 'Atanmadı';
                    assigneeEl.setAttribute('title', assigneeName !== '' ? assigneeName : 'Atanmadı');
                }
                if (assigneeEl && String(req.assignee_name || '').trim() === '') {
                    assigneeEl.textContent = 'Atanmadı';
                    assigneeEl.setAttribute('title', 'Atanmadı');
                }
                if (Object.prototype.hasOwnProperty.call(req, 'assignee_user_id')) {
                    card.dataset.assigneeUserId = String(Number(req.assignee_user_id || 0));
                }
                const activeStepWrap = card.querySelector('.talepler-active-step-wrap');
                const activeStepEl = card.querySelector('.talepler-active-step');
                if (activeStepWrap && activeStepEl) {
                    const nextStep = String(req.active_step_label || '').trim();
                    if (nextStep !== '') {
                        activeStepEl.textContent = nextStep;
                        activeStepWrap.classList.remove('d-none');
                    } else {
                        activeStepEl.textContent = '';
                        activeStepWrap.classList.add('d-none');
                    }
                }
                const stageBadge = card.querySelector('.talepler-stage-badge');
                const stageLabelEl = card.querySelector('.talepler-stage-label');
                if (stageBadge && stageLabelEl) {
                    stageLabelEl.textContent = nextStatusLabel !== '' ? nextStatusLabel : '-';
                    if (nextLane === 'doing' && nextStatusLabel !== '') {
                        stageBadge.classList.remove('d-none');
                    } else {
                        stageBadge.classList.add('d-none');
                    }
                }

                const avatarEl = card.querySelector('.avatar');
                if (avatarEl) {
                    const disp = String(req.assignee_name || '').trim();
                    avatarEl.textContent = disp !== '' ? buildAvatarInitials(disp) : '-';
                    avatarEl.setAttribute('title', disp !== '' ? disp : 'Atanmadı');
                    avatarEl.setAttribute('aria-label', disp !== '' ? disp : 'Atanmadı');
                }

                updateCardActions(card, allowedActions);
                updateCardUtilityActions(card, nextLane, req);
                refreshCounts();
            };

            const readAllowedActions = (card) => {
                try {
                    const parsed = JSON.parse(String(card.dataset.allowedActions || '[]'));
                    return Array.isArray(parsed) ? parsed : [];
                } catch (e) {
                    return [];
                }
            };

            const readActionToStatusMap = (card) => {
                try {
                    const parsed = JSON.parse(String(card.dataset.actionToStatusMap || '{}'));
                    return parsed && typeof parsed === 'object' ? parsed : {};
                } catch (e) {
                    return {};
                }
            };

            const buildAvatarInitials = (value) => {
                const name = String(value || '').trim();
                if (name === '') {
                    return 'U';
                }

                const parts = name.split(/\s+/u).filter(Boolean);
                if (parts.length >= 2) {
                    return `${parts[0].charAt(0)}${parts[parts.length - 1].charAt(0)}`.toUpperCase();
                }

                return name.substring(0, 2).toUpperCase();
            };

            const isActionUsable = (card, allowedActions, actionKey) => {
                return actionKey !== ''
                    && Array.isArray(allowedActions)
                    && allowedActions.includes(actionKey)
                    && !requiresUserSelect(card, actionKey);
            };

            const pickLaneFallbackAction = (card, fromLane, toLane, allowedActions) => {
                const laneFlowMap = {
                    'todo->doing': ['claim_from_pool', 'move_forward'],
                    'todo->done': ['claim_from_pool', 'move_forward'],
                    'doing->todo': ['move_backward'],
                    'doing->done': ['move_forward'],
                    'done->doing': ['reopen_task', 'move_backward'],
                    'done->todo': ['reopen_task', 'move_backward'],
                };
                const key = `${fromLane}->${toLane}`;
                const candidates = Array.isArray(laneFlowMap[key]) ? laneFlowMap[key] : [];
                for (const candidate of candidates) {
                    if (isActionUsable(card, allowedActions, String(candidate || ''))) {
                        return String(candidate || '');
                    }
                }
                return '';
            };

            const resolveDragAction = (card, fromLane, toLane) => {
                const allowedActions = readAllowedActions(card);
                const actionToStatusMap = readActionToStatusMap(card);
                const currentStatusKey = String(card.dataset.statusKey || '').trim();

                let action = '';
                for (const [actionKey, mappedStatus] of Object.entries(actionToStatusMap || {})) {
                    const mappedLane = resolveLaneGroupForStatus(String(mappedStatus || ''), card);
                    if (mappedLane === toLane && isActionUsable(card, allowedActions, String(actionKey || ''))) {
                        action = String(actionKey || '');
                        break;
                    }
                }
                if (action === '') {
                    const byStatus = transitionMap[currentStatusKey] && typeof transitionMap[currentStatusKey] === 'object'
                        ? transitionMap[currentStatusKey]
                        : {};
                    for (const [targetStatus, candidateAction] of Object.entries(byStatus)) {
                        const mappedLane = resolveLaneGroupForStatus(String(targetStatus || ''), card);
                        const candidate = String(candidateAction || '');
                        if (mappedLane === toLane && isActionUsable(card, allowedActions, candidate)) {
                            action = candidate;
                            break;
                        }
                    }
                }
                if (action === '') {
                    const byLane = transitionMap[fromLane] && typeof transitionMap[fromLane] === 'object'
                        ? transitionMap[fromLane]
                        : {};
                    for (const [targetStatusOrLane, candidateAction] of Object.entries(byLane)) {
                        const mappedLane = resolveLaneGroupForStatus(String(targetStatusOrLane || ''), card);
                        const candidate = String(candidateAction || '');
                        if (mappedLane === toLane && isActionUsable(card, allowedActions, candidate)) {
                            action = candidate;
                            break;
                        }
                    }
                }
                if (action === '') {
                    action = pickLaneFallbackAction(card, fromLane, toLane, allowedActions);
                }

                return isActionUsable(card, allowedActions, action) ? action : '';
            };

            const escapeHtml = (value) => String(value || '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');

            const buildActionGroups = (card) => {
                const allowedActions = readAllowedActions(card);
                const actionMeta = getCardActionMeta(card);
                const actionLabels = getCardActionLabels(card);
                const assigneeActions = [];
                const stageActions = [];

                allowedActions.forEach((actionKey) => {
                    const key = String(actionKey || '').trim();
                    if (key === '') return;
                    const meta = actionMeta[key] || {};
                    const targetUserField = String(meta.target_user_field || '').trim();
                    const labelLower = String(actionLabels[key] || '').toLowerCase();
                    const keyLower = key.toLowerCase();
                    const isAssigneeAction = targetUserField === 'assignee_user_id'
                        || keyLower.includes('assign')
                        || keyLower.includes('claim')
                        || labelLower.includes('ata')
                        || labelLower.includes('uzerime');

                    if (isAssigneeAction) assigneeActions.push(key);
                    else stageActions.push(key);
                });

                return { assigneeActions, stageActions };
            };

            const buildPayloadForAction = (card, actionKey, selectedUserId = 0) => {
                const payload = {};
                const actionMeta = getCardActionMeta(card);
                const meta = actionMeta[actionKey] || {};
                const targetUserField = String(meta.target_user_field || '').trim();
                const userId = Number(selectedUserId || 0);
                if (userId > 0) {
                    payload.target_user_id = userId;
                    if (targetUserField !== '') payload[targetUserField] = userId;
                    if (targetUserField === '' && actionKey === 'assign_from_pool') payload.assignee_user_id = userId;
                    if (targetUserField === '' && actionKey === 'send_to_solution_center') payload.solution_user_id = userId;
                }
                return payload;
            };

            const buildStageOptionsByLane = (card) => {
                const laneMap = getCardStatusLaneMap(card);
                const statusOptions = getCardStatusOptions(card);
                const currentStatus = String(card.dataset.statusKey || '').trim();
                const options = { todo: [], doing: [], done: [] };

                const orderedStatusKeys = Object.keys(statusOptions)
                    .map((key) => String(key || '').trim())
                    .filter((key) => key !== '' && key !== 'all');

                const laneMapKeys = Object.keys(laneMap)
                    .map((key) => String(key || '').trim())
                    .filter((key) => key !== '' && key !== 'all');

                const allStatusKeys = [...orderedStatusKeys, ...laneMapKeys.filter((key) => !orderedStatusKeys.includes(key))];

                allStatusKeys.forEach((statusKey) => {
                    const lane = String(laneMap[statusKey] || '').trim();
                    if (!boardLaneGroups.has(lane)) return;
                    if (!options[lane].includes(statusKey)) options[lane].push(statusKey);
                });

                if (currentStatus !== '') {
                    const currentLane = String(resolveLaneGroupForStatus(currentStatus, card) || '').trim();
                    if (boardLaneGroups.has(currentLane) && !options[currentLane].includes(currentStatus)) {
                        options[currentLane].push(currentStatus);
                    }
                }

                return options;
            };

            const openBoardStageDialog = async (card) => {
                const currentLane = String(card.dataset.laneGroup || resolveLaneGroupForStatus(card.dataset.statusKey, card) || 'doing').trim() || 'doing';
                const currentStatus = String(card.dataset.statusKey || '').trim();
                const stageByLane = buildStageOptionsByLane(card);
                const laneStages = Array.isArray(stageByLane[currentLane]) ? stageByLane[currentLane] : [];
                const statusOptions = getCardStatusOptions(card);

                if (laneStages.length === 0) {
                    alert('Bulunduğu durum grubu için seçilebilir aşama yok.');
                    return;
                }

                if (!window.Swal || typeof window.Swal.fire !== 'function') {
                    const fallbackStage = laneStages.includes(currentStatus) ? currentStatus : String(laneStages[0] || '').trim();
                    const statusInput = String(window.prompt('Aşama anahtarını girin', fallbackStage) || '').trim();
                    if (statusInput === '') return;
                    if (!laneStages.includes(statusInput)) {
                        alert('Seçilen aşama bu durum grubu içinde değil.');
                        return;
                    }
                    const payload = await postLaneStatus(card, currentLane, statusInput);
                    applyWorkflowResponse(card, payload, currentLane);
                    return;
                }

                const selectedStatus = laneStages.includes(currentStatus)
                    ? currentStatus
                    : String(laneStages[0] || '').trim();

                const stageOptionsHtml = laneStages
                    .map((statusKey) => {
                        const fallbackLabel = normalizeStatusLabel('', statusKey);
                        const label = String(statusOptions[statusKey] || fallbackLabel).trim() || fallbackLabel;
                        const isSelected = selectedStatus !== '' && selectedStatus === statusKey ? ' selected' : '';
                        return `<option value="${escapeHtml(statusKey)}"${isSelected}>${escapeHtml(label)}</option>`;
                    })
                    .join('');

                const result = await window.Swal.fire({
                    title: 'Aşama Güncelle',
                    html: `
                        <div class="text-start">
                            <label class="form-label small text-muted mb-1">Aşama</label>
                            <select id="boardStageStatusSelect" class="form-select form-select-sm">${stageOptionsHtml}</select>
                        </div>
                    `,
                    width: '28rem',
                    showCancelButton: true,
                    confirmButtonText: 'Uygula',
                    cancelButtonText: 'Vazgeç',
                    confirmButtonColor: '#145a46',
                    cancelButtonColor: '#6c757d',
                    reverseButtons: true,
                    focusConfirm: false,
                    preConfirm: () => {
                        const popup = window.Swal.getPopup();
                        const statusSelect = popup?.querySelector('#boardStageStatusSelect');
                        const status = String(statusSelect?.value || '').trim();
                        if (status === '') {
                            window.Swal.showValidationMessage('Aşama seçmelisiniz.');
                            return false;
                        }
                        return { status };
                    }
                });

                if (!result.isConfirmed || !result.value) return;
                const status = String(result.value.status || '').trim();
                const payload = await postLaneStatus(card, currentLane, status);
                applyWorkflowResponse(card, payload, currentLane);
            };

            const openBoardActionDialog = async (card, actionKind) => {
                if (actionKind === 'stage') {
                    await openBoardStageDialog(card);
                    return;
                }

                if (actionKind !== 'assignee') {
                    return;
                }

                const laneGroup = String(card.dataset.laneGroup || resolveLaneGroupForStatus(card.dataset.statusKey, card) || 'doing').trim();
                const unitId = Number(card.dataset.unitId || 0);
                const fallbackMembers = Array.isArray(unitMembersByUnit[unitId]) ? unitMembersByUnit[unitId] : [];
                const currentAssigneeId = Number(card.dataset.assigneeUserId || 0);

                if (fallbackMembers.length === 0) {
                    alert('Bu birim için atanabilir kullanıcı bulunamadı.');
                    return;
                }

                if (!window.Swal || typeof window.Swal.fire !== 'function') {
                    const idList = fallbackMembers
                        .map((member) => `${Number(member?.id || 0)}:${String(member?.name || '-')}`)
                        .filter((line) => !line.startsWith('0:'))
                        .join(', ');
                    const rawInput = String(window.prompt(`Kullanıcı ID seçin (${idList})`, currentAssigneeId > 0 ? String(currentAssigneeId) : '') || '').trim();
                    if (rawInput === '') return;
                    const selectedUserId = Number(rawInput);
                    if (!Number.isInteger(selectedUserId) || selectedUserId <= 0) {
                        alert('Geçerli bir kullanıcı seçmelisiniz.');
                        return;
                    }
                    const payload = await postAssigneeUpdate(card, selectedUserId);
                    applyWorkflowResponse(card, payload, laneGroup);
                    return;
                }

                const uniqueMembers = [];
                const seenMemberIds = new Set();
                fallbackMembers.forEach((member) => {
                    const memberId = Number(member?.id || 0);
                    if (memberId <= 0 || seenMemberIds.has(memberId)) return;
                    seenMemberIds.add(memberId);
                    uniqueMembers.push({
                        id: memberId,
                        name: String(member?.name || '-'),
                    });
                });

                const userOptionsHtml = [
                    '<option value="">Atamayı Kaldır</option>',
                    ...uniqueMembers.map((member) => {
                        const isSelected = member.id === currentAssigneeId ? ' selected' : '';
                        return `<option value="${member.id}"${isSelected}>${escapeHtml(member.name)}</option>`;
                    }),
                ]
                    .join('');

                const result = await window.Swal.fire({
                    title: 'Atama Yönetimi',
                    html: `
                            <div class="text-start">
                                <label class="form-label small text-muted mb-1">Kullanıcı</label>
                                <select id="boardActionUserSelect" class="form-select form-select-sm">${userOptionsHtml}</select>
                            </div>
                        `,
                    width: '28rem',
                    showCancelButton: true,
                    confirmButtonText: 'Uygula',
                    cancelButtonText: 'Vazgeç',
                    confirmButtonColor: '#145a46',
                    cancelButtonColor: '#6c757d',
                    reverseButtons: true,
                    focusConfirm: false,
                    preConfirm: () => {
                        const popup = window.Swal.getPopup();
                        const userSelect = popup?.querySelector('#boardActionUserSelect');
                        const selectedRaw = String(userSelect?.value || '').trim();
                        const selectedUserId = selectedRaw === '' ? 0 : Number(selectedRaw);
                        if (selectedRaw !== '' && (!Number.isInteger(selectedUserId) || selectedUserId <= 0)) {
                            window.Swal.showValidationMessage('Geçerli bir kullanıcı seçmelisiniz.');
                            return false;
                        }
                        return { targetUserId: selectedUserId };
                    }
                });

                if (!result.isConfirmed || !result.value) return;
                const selectedUserId = Number(result.value.targetUserId || 0);
                const payload = await postAssigneeUpdate(card, selectedUserId);
                applyWorkflowResponse(card, payload, laneGroup);
            };

            const runLaneMove = async (card, toLane, initialAction = '') => {
                let attempts = 0;
                let nextAction = String(initialAction || '').trim();
                let lane = String(card.dataset.laneGroup || resolveLaneGroupForStatus(card.dataset.statusKey, card) || '').trim() || 'doing';

                while (attempts < 12) {
                    if (lane === toLane) return;
                    if (nextAction === '') {
                        nextAction = resolveDragAction(card, lane, toLane);
                    }
                    if (nextAction === '') {
                        throw new Error('Bu geçiş için uygun aksiyon bulunamadı.');
                    }

                    const payload = await postWorkflow(card, nextAction);
                    applyWorkflowResponse(card, payload, toLane);

                    const updatedLane = String(card.dataset.laneGroup || resolveLaneGroupForStatus(card.dataset.statusKey, card) || '').trim() || lane;
                    attempts += 1;
                    if (updatedLane === lane) {
                        nextAction = '';
                        continue;
                    }

                    lane = updatedLane;
                    nextAction = '';
                }

                if (lane !== toLane) {
                    throw new Error('Kart hedef asamaya tasinamadi.');
                }
            };

            cards.forEach((card) => {
                setCardDraggableState(card);
                updateCardUtilityActions(card, String(card.dataset.laneGroup || ''), null);
                card.addEventListener('dragstart', (event) => {
                    if (event.target && event.target.closest('form,button,select,input,textarea,a,label,select')) { event.preventDefault(); return; }
                    draggingCard = card;
                    card.classList.add('is-dragging');
                    event.dataTransfer.effectAllowed = 'move';
                });
                card.addEventListener('dragend', () => { card.classList.remove('is-dragging'); draggingCard = null; clearOverState(); });
            });

            zones.forEach((zone) => {
                zone.addEventListener('dragover', (event) => { if (!draggingCard) return; event.preventDefault(); clearOverState(); zone.classList.add('is-drag-over'); });
                zone.addEventListener('dragleave', () => zone.classList.remove('is-drag-over'));
                zone.addEventListener('drop', async (event) => {
                    event.preventDefault();
                    if (!draggingCard) return;
                    const sourceZone = draggingCard.closest('.talepler-drop-zone');
                    const fromLane = String(sourceZone?.dataset.status || '');
                    const toLane = String(zone.dataset.status || '');
                    clearOverState();
                    if (fromLane === '' || toLane === '' || fromLane === toLane) return;

                    const prevSibling = draggingCard.nextElementSibling;
                    zone.appendChild(draggingCard);
                    updateCardUtilityActions(draggingCard, toLane, null);
                    refreshCounts();
                    try {
                        const payload = await postLaneStatus(draggingCard, toLane);
                        applyWorkflowResponse(draggingCard, payload, toLane);
                    } catch (error) {
                        if (sourceZone) {
                            if (prevSibling && prevSibling.parentNode === sourceZone) sourceZone.insertBefore(draggingCard, prevSibling);
                            else sourceZone.appendChild(draggingCard);
                        }
                        updateCardUtilityActions(draggingCard, fromLane, null);
                        refreshCounts();
                        alert(error instanceof Error ? error.message : 'Kart durum grubu güncellenemedi.');
                    }
                });
            });

            board.addEventListener('click', async (event) => {
                const btn = event.target.closest('.js-card-board-action');
                if (!btn) return;
                event.preventDefault();
                const card = btn.closest('.talepler-card');
                if (!card) return;
                const actionKind = String(btn.dataset.actionKind || '').trim();
                if (!['assignee', 'stage'].includes(actionKind)) return;

                btn.disabled = true;
                try {
                    await openBoardActionDialog(card, actionKind);
                } catch (error) {
                    alert(error instanceof Error ? error.message : 'İşlem adımı tamamlanamadı.');
                } finally {
                    btn.disabled = false;
                }
            });

            refreshCounts();
            };

            window.AdminApp = window.AdminApp || {};
            window.AdminApp.registerPageInitializer?.('talepler-board-interactions', initTaleplerBoardInteractions);
            initTaleplerBoardInteractions();
        })();

        (() => {
            const modalEl = document.getElementById('boardQuickCreateModal');
            if (!modalEl) return;

            const laneInput = document.getElementById('boardQuickCreateTargetLane');
            const laneLabelEl = modalEl.querySelector('[data-board-quick-create-lane-label]');
            const laneLabels = @json($boardLaneLabels ?? ['todo' => 'Yapılacaklar', 'doing' => 'İşlemdekiler', 'done' => 'Tamamlananlar']);
            const categoryFieldsEndpoint = @json(route('admin.talepler.tasks.category-fields'));
            const oldCustomFieldValues = @json((array) old('custom_fields', []));
            const categoriesByUnit = @json(($quickCreateCategoriesByUnit ?? collect())->map(
                fn ($rows) => collect($rows)->map(
                    fn ($row) => ['id' => (int) $row->id, 'name' => (string) $row->category_name, 'key' => (string) ($row->category_key ?? '')]
                )->values()
            ));
            const membersByUnit = @json(collect($quickCreateMembersByUnit ?? [])->map(
                fn ($rows) => collect($rows)->map(
                    fn ($row) => ['id' => (int) ($row['id'] ?? 0), 'name' => (string) ($row['name'] ?? '')]
                )->values()
            ));

            const unitSelect = document.getElementById('boardQuickCreateUnit');
            const categorySelect = document.getElementById('boardQuickCreateCategory');
            const assigneeSelect = document.getElementById('boardQuickCreateAssignee');
            const contextWrap = modalEl.querySelector('.board-quick-create-context');
            const supportContextSelect = document.getElementById('boardQuickCreateSupportContext');
            const dynamicFieldSection = document.getElementById('boardQuickCreateDynamicFieldSection');
            const dynamicFieldGrid = document.getElementById('boardQuickCreateDynamicFieldGrid');
            const attachmentsInput = document.getElementById('boardQuickCreateAttachments');
            const fileList = document.getElementById('boardQuickCreateFileList');

            if (!(unitSelect instanceof HTMLSelectElement) || !(categorySelect instanceof HTMLSelectElement)) {
                return;
            }

            const syncLaneState = (laneValue, laneLabel) => {
                const normalizedLane = String(laneValue || 'todo').trim() || 'todo';
                if (laneInput instanceof HTMLInputElement) {
                    laneInput.value = normalizedLane;
                }
                if (laneLabelEl) {
                    laneLabelEl.textContent = String(laneLabel || laneLabels[normalizedLane] || normalizedLane);
                }
            };

            const escapeQuickCreateHtml = (value) => String(value || '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');

            const renderFiles = () => {
                if (!fileList) return;
                const files = Array.from(attachmentsInput?.files || []);
                if (files.length === 0) {
                    fileList.innerHTML = '';
                    return;
                }

                fileList.innerHTML = files
                    .map((file) => `<span class="badge bg-light text-dark border me-1 mb-1"><i class="bi bi-paperclip me-1"></i>${escapeQuickCreateHtml(file.name)}</span>`)
                    .join('');
            };

            const resolveCategoriesForUnit = (unitId) => {
                const normalized = String(unitId || '').trim();
                if (normalized === '') {
                    return [];
                }

                return categoriesByUnit[normalized]
                    || categoriesByUnit[String(Number(normalized))]
                    || categoriesByUnit[Number(normalized)]
                    || [];
            };

            const resolveMembersForUnit = (unitId) => {
                const normalized = String(unitId || '').trim();
                if (normalized === '') {
                    return [];
                }

                return membersByUnit[normalized]
                    || membersByUnit[String(Number(normalized))]
                    || membersByUnit[Number(normalized)]
                    || [];
            };

            const fillCategories = (rows, selectedValue = '') => {
                categorySelect.innerHTML = '';
                const empty = document.createElement('option');
                empty.value = '';
                empty.textContent = '-- Alt Kategori Secin --';
                categorySelect.appendChild(empty);

                (Array.isArray(rows) ? rows : []).forEach((row) => {
                    const option = document.createElement('option');
                    option.value = String(row.id || '');
                    option.dataset.categoryKey = String(row.key || '');
                    option.textContent = String(row.name || '-');
                    if (selectedValue !== '' && option.value === String(selectedValue)) {
                        option.selected = true;
                    }
                    categorySelect.appendChild(option);
                });
            };

            const fillAssignees = (rows, selectedValue = '') => {
                if (!(assigneeSelect instanceof HTMLSelectElement)) {
                    return;
                }

                assigneeSelect.innerHTML = '';
                const empty = document.createElement('option');
                empty.value = '';
                empty.textContent = 'Atama yapma';
                assigneeSelect.appendChild(empty);

                (Array.isArray(rows) ? rows : []).forEach((row) => {
                    const option = document.createElement('option');
                    option.value = String(row.id || '');
                    option.textContent = String(row.name || '-');
                    if (selectedValue !== '' && option.value === String(selectedValue)) {
                        option.selected = true;
                    }
                    assigneeSelect.appendChild(option);
                });
            };

            const toggleSupportContext = () => {
                if (!contextWrap || !supportContextSelect) return;
                const option = categorySelect.options[categorySelect.selectedIndex];
                const categoryKey = String(option?.dataset?.categoryKey || '').trim().toLowerCase();
                const isDestek = categoryKey === 'destek';
                contextWrap.classList.toggle('d-none', !isDestek);
                supportContextSelect.required = isDestek;
                supportContextSelect.disabled = !isDestek;
                if (!isDestek) {
                    supportContextSelect.value = '';
                }
            };

            let activeFieldRequestController = null;
            let latestFieldRequestToken = 0;

            const renderDynamicFields = (fields) => {
                if (!dynamicFieldSection || !dynamicFieldGrid) {
                    return;
                }

                dynamicFieldGrid.innerHTML = '';
                const normalizedFields = Array.isArray(fields) ? fields : [];
                dynamicFieldSection.classList.toggle('d-none', normalizedFields.length === 0);
                if (normalizedFields.length === 0) {
                    return;
                }

                normalizedFields.forEach((field) => {
                    const key = String(field?.key || '').trim();
                    if (key === '') {
                        return;
                    }

                    const wrapper = document.createElement('div');
                    wrapper.className = 'col-md-6';

                    const label = document.createElement('label');
                    label.className = 'form-label small fw-semibold text-muted mb-1';
                    label.textContent = String(field?.label || key);
                    if (field?.required) {
                        const requiredMark = document.createElement('span');
                        requiredMark.className = 'text-danger';
                        requiredMark.textContent = ' *';
                        label.appendChild(requiredMark);
                    }

                    const select = document.createElement('select');
                    select.className = 'form-select';
                    select.name = `custom_fields[${key}]`;
                    select.required = Boolean(field?.required);

                    const emptyOption = document.createElement('option');
                    emptyOption.value = '';
                    emptyOption.textContent = '-- Seçiniz --';
                    select.appendChild(emptyOption);

                    const selectedValue = String(oldCustomFieldValues[key] || '').trim();
                    (Array.isArray(field?.options) ? field.options : []).forEach((optionRow) => {
                        const option = document.createElement('option');
                        option.value = String(optionRow?.value || '');
                        option.textContent = String(optionRow?.label || option.value || '-');
                        if (selectedValue !== '' && option.value === selectedValue) {
                            option.selected = true;
                        }
                        select.appendChild(option);
                    });

                    wrapper.appendChild(label);
                    wrapper.appendChild(select);
                    dynamicFieldGrid.appendChild(wrapper);
                });
            };

            const loadCategoryFields = async (categoryId) => {
                const normalizedCategoryId = String(categoryId || '').trim();
                if (normalizedCategoryId === '') {
                    renderDynamicFields([]);
                    return;
                }

                if (activeFieldRequestController) {
                    activeFieldRequestController.abort();
                }

                const requestToken = ++latestFieldRequestToken;
                const controller = new AbortController();
                activeFieldRequestController = controller;

                try {
                    const url = new URL(categoryFieldsEndpoint, window.location.origin);
                    url.searchParams.set('category_id', normalizedCategoryId);

                    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) {
                        renderDynamicFields([]);
                        return;
                    }

                    const payload = await response.json();
                    if (requestToken !== latestFieldRequestToken) {
                        return;
                    }

                    renderDynamicFields(Array.isArray(payload?.fields) ? payload.fields : []);
                } catch (error) {
                    if (error?.name !== 'AbortError') {
                        renderDynamicFields([]);
                    }
                } finally {
                    if (activeFieldRequestController === controller) {
                        activeFieldRequestController = null;
                    }
                }
            };

            const refreshCategories = () => {
                const unitId = String(unitSelect.value || '').trim();
                const selectedValue = String(categorySelect.dataset.old || categorySelect.value || '').trim();
                fillCategories(resolveCategoriesForUnit(unitId), selectedValue);
                fillAssignees(resolveMembersForUnit(unitId), String(assigneeSelect?.dataset.old || assigneeSelect?.value || '').trim());
                if (assigneeSelect instanceof HTMLSelectElement) {
                    assigneeSelect.dataset.old = '';
                }
                categorySelect.dataset.old = '';
                toggleSupportContext();
                loadCategoryFields(selectedValue);
            };

            unitSelect.addEventListener('change', refreshCategories);
            unitSelect.addEventListener('input', refreshCategories);
            categorySelect.addEventListener('change', () => {
                toggleSupportContext();
                loadCategoryFields(categorySelect.value);
            });
            attachmentsInput?.addEventListener('change', renderFiles);
            document.querySelectorAll('.js-board-quick-create-open').forEach((button) => {
                button.addEventListener('click', () => {
                    const lane = String(button.dataset.targetLane || 'todo').trim();
                    const laneLabel = String(button.dataset.targetLaneLabel || laneLabels[lane] || lane).trim();
                    syncLaneState(lane, laneLabel);
                });
            });
            modalEl.addEventListener('show.bs.modal', (event) => {
                const trigger = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
                const lane = String(trigger?.dataset?.targetLane || laneInput?.value || 'todo').trim();
                const laneLabel = String(trigger?.dataset?.targetLaneLabel || laneLabels[lane] || lane).trim();
                syncLaneState(lane, laneLabel);
                refreshCategories();
            });

            syncLaneState(@json(old('target_lane', 'todo')), laneLabels[@json(old('target_lane', 'todo'))] || 'Yapılacaklar');
            refreshCategories();
            requestAnimationFrame(refreshCategories);
            renderFiles();

            if (@json($errors->any() && strtolower(trim((string) old('return_to', ''))) === 'board')) {
                const modal = window.bootstrap?.Modal.getOrCreateInstance(modalEl);
                modal?.show();
            }
        })();

        (() => {
            const confirmSelector = '.js-talepler-confirm-btn';
            const refreshBoardCounts = (board) => {
                if (!(board instanceof HTMLElement)) return;
                const zones = Array.from(board.querySelectorAll('.talepler-drop-zone'));
                zones.forEach((zone) => {
                    const status = String(zone.dataset.status || '');
                    const counter = board.querySelector(`[data-count-for="${status}"]`);
                    if (!counter) return;
                    const total = zone.querySelectorAll('.talepler-card').length;
                    counter.textContent = String(total);
                    let emptyEl = zone.querySelector('.talepler-empty-state');
                    if (total === 0 && !emptyEl) {
                        emptyEl = document.createElement('div');
                        emptyEl.className = 'talepler-empty-state d-flex flex-column align-items-center justify-content-center p-4 text-center h-100 opacity-50';
                        emptyEl.innerHTML = '<i class="bi bi-inbox fs-1 text-muted mb-2"></i><p class="text-muted small fw-medium mb-0">Bu kolonda talep bulunmuyor</p>';
                        zone.appendChild(emptyEl);
                    }
                    if (total > 0 && emptyEl) emptyEl.remove();
                });
            };
            const submitBoardAction = async (form) => {
                const action = String(form.getAttribute('action') || '').trim();
                if (action === '') throw new Error('İşlem adresi bulunamadı.');
                const response = await fetch(action, {
                    method: String(form.getAttribute('method') || 'POST').toUpperCase(),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        Accept: 'application/json',
                    },
                    body: new FormData(form),
                    credentials: 'same-origin',
                });
                let payload = null;
                try {
                    payload = await response.json();
                } catch (error) {
                    payload = null;
                }
                if (!response.ok || !payload || payload.ok !== true) {
                    throw new Error(String(payload?.message || 'İşlem tamamlanamadı.'));
                }
                const board = form.closest('.talepler-board');
                const card = form.closest('.talepler-card');
                if (card) card.remove();
                if (board) refreshBoardCounts(board);
                if (window.Swal && typeof window.Swal.fire === 'function') {
                    window.Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: String(payload.message || 'İşlem tamamlandı.'),
                        showConfirmButton: false,
                        timer: 1800,
                        timerProgressBar: true,
                    });
                }
            };
            document.addEventListener('click', (event) => {
                const btn = event.target.closest(confirmSelector);
                if (!btn) return;

                const form = btn.closest('form');
                if (!form) return;
                event.preventDefault();
                const board = form.closest('.talepler-board');
                const returnTo = String(form.querySelector('input[name="return_to"]')?.value || '').trim().toLowerCase();
                const isBoardAsyncAction = !!board && returnTo === 'board';

                const title = btn.getAttribute('data-confirm-title') || 'Emin misiniz?';
                const text = btn.getAttribute('data-confirm-message') || 'Bu islemi yapmak istediginize emin misiniz?';
                const confirmText = btn.getAttribute('data-confirm-confirm-text') || 'Evet';
                const cancelText = btn.getAttribute('data-confirm-cancel-text') || 'Vazgeç';
                const icon = btn.getAttribute('data-confirm-icon') || 'warning';

                if (window.Swal && typeof window.Swal.fire === 'function') {
                    window.Swal.fire({
                        title,
                        text,
                        icon,
                        width: '26rem',
                        padding: '1rem 1rem 0.9rem',
                        showCancelButton: true,
                        confirmButtonText: confirmText,
                        cancelButtonText: cancelText,
                        confirmButtonColor: '#145a46',
                        cancelButtonColor: '#6c757d',
                        reverseButtons: true,
                        focusCancel: true,
                    }).then(async (result) => {
                        if (!result.isConfirmed) return;
                        if (!isBoardAsyncAction) {
                            form.submit();
                            return;
                        }
                        btn.disabled = true;
                        try {
                            await submitBoardAction(form);
                        } catch (error) {
                            window.Swal.fire({
                                icon: 'error',
                                title: 'İşlem yapılamadı',
                                text: error instanceof Error ? error.message : 'İşlem tamamlanamadı.',
                                confirmButtonColor: '#145a46',
                            });
                        } finally {
                            btn.disabled = false;
                        }
                    });
                    return;
                }

                if (!window.confirm(text)) return;
                if (!isBoardAsyncAction) {
                    form.submit();
                    return;
                }
                btn.disabled = true;
                submitBoardAction(form)
                    .catch((error) => {
                        alert(error instanceof Error ? error.message : 'İşlem tamamlanamadı.');
                    })
                    .finally(() => {
                        btn.disabled = false;
                    });
            });
        })();
    </script>
@endpush