@extends('layouts.app')

@section('title', 'Talepler Talep Detayı')

@section('content')
    @php
        $priorityLabelMap = [
            'low' => 'Düşük',
            'medium' => 'Orta',
            'high' => 'Yüksek',
            'critical' => 'Kritik',
        ];
        $activePriorityLabel = $priorityLabelMap[strtolower((string) ($requestRow->priority ?? 'medium'))] ?? 'Orta';
        $entryTypeLabelMap = [
            'workflow' => 'İşlem',
            'comment' => 'Yorum',
            'system' => 'Sistem',
        ];
    @endphp
    <div class="container-fluid py-3 talepler-show-page">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            @php
                $backRoute = !empty($canOperateBoard)
                    ? route('admin.talepler.board')
                    : route('admin.talepler.index');
                $backLabel = !empty($canOperateBoard)
                    ? 'Görev Yönetimine Dön'
                    : 'Talep Açma Ekranına Dön';
            @endphp
            <div>
                <h1 class="h4 mb-1">Talepler Talep Detayı</h1>
                <div class="text-muted small">{{ $requestRow->request_key }} - {{ $statusLabel }}</div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.talepler.archive') }}" class="btn btn-sm btn-outline-secondary">Arşiv</a>
                <a href="{{ $backRoute }}" class="btn btn-sm btn-outline-primary">{{ $backLabel }}</a>
            </div>
        </div>

        <div id="taleplerShowMessageArea">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
        </div>

        <div id="taleplerShowContent">
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-body">
                @if (!empty($isArchived))
                    <div class="alert alert-secondary py-2 small mb-3">Bu talep arşive alınmış durumda.</div>
                @endif
                @if (!empty($canArchive) || !empty($canRestore) || !empty($canDelete))
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        @if (!empty($canArchive))
                            <form method="post" action="{{ route('admin.talepler.tasks.archive', ['id' => (int) $requestRow->id]) }}" class="js-show-action-form" data-success-behavior="reload">
                                @csrf
                                <input type="hidden" name="return_to" value="show">
                                <button type="submit" class="btn btn-sm btn-outline-secondary 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">
                                    <i class="bi bi-archive me-1"></i>Arşive Gönder
                                </button>
                            </form>
                        @endif
                        @if (!empty($canRestore))
                            <form method="post" action="{{ route('admin.talepler.tasks.restore', ['id' => (int) $requestRow->id]) }}" class="js-show-action-form" data-success-behavior="reload">
                                @csrf
                                <input type="hidden" name="return_to" value="show">
                                <button type="submit" class="btn btn-sm btn-outline-secondary">
                                    <i class="bi bi-arrow-counterclockwise me-1"></i>Arşivden Geri Al
                                </button>
                            </form>
                        @endif
                        @if (!empty($canDelete))
                            <form method="post" action="{{ route('admin.talepler.tasks.delete', ['id' => (int) $requestRow->id]) }}" class="js-show-action-form" data-success-behavior="navigate-board">
                                @csrf
                                <input type="hidden" name="return_to" value="show">
                                <button type="submit" class="btn btn-sm btn-outline-danger 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">
                                    <i class="bi bi-trash me-1"></i>Sil
                                </button>
                            </form>
                        @endif
                    </div>
                @endif
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="text-muted small">Birim</div>
                        <div class="fw-semibold">{{ $requestRow->unit_name }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Kategori</div>
                        <div class="fw-semibold">{{ $requestRow->category_name }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Talep Açan</div>
                        <div class="fw-semibold">{{ $requestRow->reporter_name ?: '-' }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Atanan</div>
                        <div class="fw-semibold">{{ $currentAssigneeName ?? ($requestRow->assignee_name ?: '-') }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Termin</div>
                        <div class="fw-semibold">{{ $requestRow->due_date ?: '-' }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Mevcut Aşama</div>
                        <div class="d-flex align-items-center gap-2">
                            <div class="fw-semibold" id="taskCurrentStageLabel">{{ $statusLabel }}</div>
                            @if (empty($isArchived) && (!empty($canLaneMove) || !empty($canEditInProgressStage)))
                                <button type="button" class="btn btn-link btn-sm p-0 text-muted js-stage-edit-btn"
                                    title="Aşama Bilgilerini Düzenle" aria-label="Aşama Bilgilerini Düzenle">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Durum Grubu</div>
                        <div class="d-flex align-items-center gap-2">
                            <div class="fw-semibold" id="taskCurrentLaneLabel">{{ $currentLaneLabel ?? '-' }}</div>
                            @if (empty($isArchived) && (!empty($canLaneMove) || !empty($canEditInProgressStage)))
                                <button type="button" class="btn btn-link btn-sm p-0 text-muted js-stage-edit-btn"
                                    title="Aşama Bilgilerini Düzenle" aria-label="Aşama Bilgilerini Düzenle">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Öncelik</div>
                        <div class="fw-semibold">{{ $activePriorityLabel }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-muted small">Kaynak / Lokasyon</div>
                        <div class="fw-semibold">{{ $sourceLocationLabel ?? '-' }}</div>
                    </div>
                    @foreach ((array) ($metaFields['custom_fields'] ?? []) as $customField)
                        @php
                            $customFieldLabel = trim((string) ($customField['label'] ?? 'Ek Alan'));
                            $customFieldDisplay = trim((string) ($customField['display'] ?? ($customField['value'] ?? '-')));
                        @endphp
                        <div class="col-md-3">
                            <div class="text-muted small">{{ $customFieldLabel }}</div>
                            <div class="fw-semibold">{{ $customFieldDisplay !== '' ? $customFieldDisplay : '-' }}</div>
                        </div>
                    @endforeach
                    <div class="col-12">
                        <div class="text-muted small">Başlık</div>
                        <div class="fw-semibold">{{ $requestRow->title }}</div>
                    </div>
                    <div class="col-12">
                        <div class="text-muted small">Açıklama</div>
                        <div>{{ $requestRow->description ?: 'Açıklama yok.' }}</div>
                    </div>
                    <div class="col-12">
                        <div class="text-muted small mb-2">Kart Detay Yönetimi</div>
                        @if (!empty($isArchived))
                            <div class="text-muted">Talep arşivde olduğu için detay güncelleme kapatıldı.</div>
                        @elseif (!empty($canEditCardDetails))
                            <form method="post" action="{{ route('admin.talepler.tasks.status', ['id' => (int) $requestRow->id]) }}"
                                class="row g-2 align-items-end js-show-status-form">
                                @csrf
                                <input type="hidden" name="return_to" value="show">
                                <div class="col-md-4">
                                    <label class="form-label small text-muted mb-1">Öncelik</label>
                                    @php $activePriority = strtolower((string) ($requestRow->priority ?? 'medium')); @endphp
                                    <select name="priority" class="form-select form-select-sm">
                                        <option value="low" {{ $activePriority === 'low' ? 'selected' : '' }}>Düşük</option>
                                        <option value="medium" {{ $activePriority === 'medium' ? 'selected' : '' }}>Orta</option>
                                        <option value="high" {{ $activePriority === 'high' ? 'selected' : '' }}>Yüksek</option>
                                        <option value="critical" {{ $activePriority === 'critical' ? 'selected' : '' }}>Kritik</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small text-muted mb-1">Termin</label>
                                    <input type="date" name="due_date" class="form-control form-control-sm"
                                        value="{{ !empty($requestRow->due_date) ? \Carbon\Carbon::parse($requestRow->due_date)->format('Y-m-d') : '' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small text-muted mb-1">Atanan</label>
                                    <select name="assignee_user_id" class="form-select form-select-sm">
                                        <option value="">Atamayı Kaldır</option>
                                        @foreach (($unitMembers ?? collect()) as $member)
                                            <option value="{{ (int) $member['id'] }}"
                                                {{ (int) ($requestRow->assignee_user_id ?? 0) === (int) $member['id'] ? 'selected' : '' }}>
                                                {{ $member['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-sm btn-outline-primary">Kart Detaylarini Guncelle</button>
                                </div>
                                <div class="col-12">
                                    <small class="text-muted">Bu alandaki degisiklikler aktivite kaydina otomatik yazilir.</small>
                                </div>
                            </form>
                        @else
                            <div class="text-muted">Detay alanlarını güncelleme yetkiniz bulunmuyor.</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white"><strong>Talep Dosyalari</strong></div>
            <div class="card-body">
                @if (!empty($attachments) && $attachments->isNotEmpty())
                    <div class="d-flex flex-column gap-2">
                        @foreach ($attachments as $attachment)
                            <div class="border rounded p-2 d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-semibold">{{ $attachment->original_name ?: $attachment->stored_name }}</div>
                                    <div class="small text-muted">
                                        {{ $attachment->mime_type ?: '-' }}{{ !empty($attachment->file_size) ? ' - ' . number_format((int) $attachment->file_size / 1024, 1) . ' KB' : '' }}
                                    </div>
                                </div>
                                <a class="btn btn-sm btn-outline-primary"
                                    href="{{ route('admin.talepler.tasks.attachments.download', ['id' => (int) $requestRow->id, 'attachmentId' => (int) $attachment->id]) }}">
                                    Indir
                                </a>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-muted">Talep icin yuklenmis dosya yok.</div>
                @endif
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white"><strong>Yorum / Aktivite</strong></div>
            <div class="card-body">
                <form method="post" action="{{ route('admin.talepler.tasks.comments.store', ['id' => (int) $requestRow->id]) }}"
                    class="mb-3 js-show-comment-form">
                    @csrf
                    <label class="form-label small text-muted fw-semibold mb-1">Yorum Ekle</label>
                    <div class="d-flex gap-2">
                        <textarea name="message" class="form-control" rows="2" maxlength="4000"
                            placeholder="Sürece dair not, geri bildirim veya yönlendirme yazın..." required></textarea>
                        <button type="submit" class="btn btn-primary align-self-start">Ekle</button>
                    </div>
                </form>
                @forelse ($comments as $comment)
                    <div class="border rounded p-2 mb-2">
                        <div class="d-flex justify-content-between small text-muted">
                            <span>{{ $comment->user_name ?: 'Sistem' }} - {{ $entryTypeLabelMap[strtolower((string) ($comment->entry_type ?? ''))] ?? 'Kayıt' }}</span>
                            <span>{{ $comment->created_at }}</span>
                        </div>
                        <div>{{ $comment->message }}</div>
                    </div>
                @empty
                    <div class="text-muted">Yorum yok.</div>
                @endforelse
            </div>
        </div>
        </div>
    </div>
@endsection

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

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

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

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

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

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

        .talepler-show-page .text-primary {
            color: var(--pd-green) !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        (() => {
            const boardUrl = @json(route('admin.talepler.board'));

            const initTaleplerShowAsyncForms = () => {
                const messageArea = document.getElementById('taleplerShowMessageArea');
                const content = document.getElementById('taleplerShowContent');
                if (!messageArea || !content) {
                    return;
                }

                const showMessage = (type, message) => {
                    if (!message) {
                        messageArea.innerHTML = '';
                        return;
                    }

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

                const loadShowContent = async (forcedMessage = '') => {
                    const response = await fetch(window.location.href, {
                        headers: {
                            Accept: 'text/html,application/xhtml+xml',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        cache: 'no-store',
                        credentials: 'same-origin',
                    });
                    const html = await response.text();
                    const nextDocument = new DOMParser().parseFromString(html, 'text/html');
                    const nextContent = nextDocument.getElementById('taleplerShowContent');
                    const nextMessageArea = nextDocument.getElementById('taleplerShowMessageArea');
                    if (!nextContent) {
                        throw new Error('Talep detay icerigi yenilenemedi.');
                    }

                    content.innerHTML = nextContent.innerHTML;
                    messageArea.innerHTML = nextMessageArea ? nextMessageArea.innerHTML : '';
                    if (forcedMessage) {
                        showMessage('success', forcedMessage);
                    }

                    initTaleplerShowAsyncForms();
                };

                const submitJsonForm = async (form) => {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            Accept: 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: new FormData(form),
                        credentials: 'same-origin',
                    });
                    const payload = await response.json().catch(() => null);
                    if (!response.ok || !payload || payload.ok !== true) {
                        throw new Error(String(payload?.message || 'Islem tamamlanamadi.'));
                    }
                    return payload;
                };

                const confirmAsyncAction = async (button, form) => {
                    const title = button.getAttribute('data-confirm-title') || 'Emin misiniz?';
                    const text = button.getAttribute('data-confirm-message') || 'Bu islemi yapmak istediginize emin misiniz?';
                    const confirmText = button.getAttribute('data-confirm-confirm-text') || 'Evet';
                    const cancelText = button.getAttribute('data-confirm-cancel-text') || 'Vazgec';
                    const icon = button.getAttribute('data-confirm-icon') || 'warning';

                    let confirmed = false;
                    if (window.Swal && typeof window.Swal.fire === 'function') {
                        const result = await 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,
                        });
                        confirmed = Boolean(result.isConfirmed);
                    } else {
                        confirmed = window.confirm(text);
                    }

                    if (!confirmed) {
                        return;
                    }

                    try {
                        const payload = await submitJsonForm(form);
                        if (String(form.dataset.successBehavior || '') === 'navigate-board') {
                            if (!window.AdminApp?.navigate?.(boardUrl)) {
                                window.location.assign(boardUrl);
                            }
                            return;
                        }

                        await loadShowContent(String(payload.message || 'Islem tamamlandi.'));
                    } catch (error) {
                        showMessage('error', error instanceof Error ? error.message : 'Islem tamamlanamadi.');
                    }
                };

                content.querySelectorAll('.js-show-action-form .js-talepler-confirm-btn').forEach((button) => {
                    if (!(button instanceof HTMLElement) || button.dataset.asyncBound === '1') {
                        return;
                    }
                    button.dataset.asyncBound = '1';
                    button.addEventListener('click', (event) => {
                        event.preventDefault();
                        event.stopImmediatePropagation();
                        const form = button.closest('form');
                        if (!(form instanceof HTMLFormElement)) {
                            return;
                        }
                        confirmAsyncAction(button, form);
                    }, true);
                });

                const asyncForms = [
                    ...Array.from(content.querySelectorAll('.js-show-action-form')).filter((form) => !form.querySelector('.js-talepler-confirm-btn')),
                    ...Array.from(content.querySelectorAll('.js-show-status-form')),
                    ...Array.from(content.querySelectorAll('.js-show-comment-form')),
                ];

                asyncForms.forEach((form) => {
                    if (!(form instanceof HTMLFormElement) || form.dataset.asyncBound === '1') {
                        return;
                    }
                    form.dataset.asyncBound = '1';
                    form.addEventListener('submit', async (event) => {
                        event.preventDefault();
                        try {
                            const payload = await submitJsonForm(form);
                            await loadShowContent(String(payload.message || 'Islem tamamlandi.'));
                        } catch (error) {
                            showMessage('error', error instanceof Error ? error.message : 'Islem tamamlanamadi.');
                        }
                    });
                });
            };

            window.AdminApp.registerPageInitializer?.('talepler-show-async-forms', initTaleplerShowAsyncForms);
            initTaleplerShowAsyncForms();
        })();
    </script>
@endpush

@push('scripts')
    @php
        $laneOptionMap = (array) ($laneOptions ?? [
            'todo' => 'Yapilacaklar',
            'doing' => 'Islemdekiler',
            'done' => 'Tamamlananlar',
        ]);
        $stageEditConfig = [
            'status_url' => route('admin.talepler.tasks.status', ['id' => (int) $requestRow->id]),
            'csrf' => csrf_token(),
            'current_lane' => (string) ($currentLaneGroup ?? ''),
            'current_status' => (string) ($requestRow->status ?? ''),
            'can_lane_move' => !empty($canLaneMove),
            'can_edit_stage' => !empty($canEditInProgressStage),
            'lane_options' => $laneOptionMap,
            'stage_options' => (array) ($inProgressStageOptions ?? []),
        ];
    @endphp
    <script type="application/json"
        id="stageEditConfigJson">{!! json_encode($stageEditConfig, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) !!}</script>
    <script>
        (() => {
            const confirmSelector = '.js-talepler-confirm-btn';
            document.addEventListener('click', (event) => {
                const btn = event.target.closest(confirmSelector);
                if (!btn) return;

                const form = btn.closest('form');
                if (!form) return;
                event.preventDefault();

                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') || 'Vazgec';
                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((result) => {
                        if (result.isConfirmed) form.submit();
                    });
                    return;
                }

                if (window.confirm(text)) form.submit();
            });
        })();

        (() => {
            const buttons = Array.from(document.querySelectorAll('.js-stage-edit-btn'));
            const configEl = document.getElementById('stageEditConfigJson');
            const laneLabelEl = document.getElementById('taskCurrentLaneLabel');
            const stageLabelEl = document.getElementById('taskCurrentStageLabel');
            if (buttons.length === 0 || !configEl) return;

            let cfg = {};
            try {
                cfg = JSON.parse(configEl.textContent || '{}');
            } catch (e) {
                cfg = {};
            }

            const laneOptions = cfg && typeof cfg.lane_options === 'object' ? cfg.lane_options : {};
            const stageOptions = cfg && typeof cfg.stage_options === 'object' ? cfg.stage_options : {};
            const canLaneMove = Boolean(cfg.can_lane_move);
            const canEditStage = Boolean(cfg.can_edit_stage);
            const statusUrl = String(cfg.status_url || '').trim();
            const csrf = String(cfg.csrf || '').trim();

            const makeSelectHtml = (optionsMap, selectedValue) => Object.entries(optionsMap)
                .map(([key, label]) => {
                    const isSelected = String(selectedValue) === String(key) ? ' selected' : '';
                    return `<option value="${String(key)}"${isSelected}>${String(label)}</option>`;
                })
                .join('');

            const openPopup = async () => {
                const currentLane = String(cfg.current_lane || '').trim() || 'doing';
                const currentStatus = String(cfg.current_status || '').trim();

                if (!window.Swal || typeof window.Swal.fire !== 'function') {
                    alert('Bu islem icin pencere desteklenmiyor.');
                    return;
                }

                const laneSelectDisabled = canLaneMove ? '' : 'disabled';
                const stageSelectDisabled = canEditStage ? '' : 'disabled';
                const stageOptionsHtml = makeSelectHtml(stageOptions, currentStatus);
                const laneOptionsHtml = makeSelectHtml(laneOptions, currentLane);

                const result = await window.Swal.fire({
                    title: 'Aşama Bilgilerini Düzenle',
                    html: `
                        <div class="text-start">
                            <label class="form-label small text-muted mb-1">Durum Grubu</label>
                            <select id="popupLaneSelect" class="form-select form-select-sm mb-2" ${laneSelectDisabled}>
                                ${laneOptionsHtml}
                            </select>
                            <div id="popupStageWrap">
                                <label class="form-label small text-muted mb-1">Ara Aşama</label>
                                <select id="popupStageSelect" class="form-select form-select-sm" ${stageSelectDisabled}>
                                    ${stageOptionsHtml}
                                </select>
                                <small class="text-muted d-block mt-1" id="popupStageHint"></small>
                            </div>
                        </div>
                    `,
                    width: '28rem',
                    showCancelButton: true,
                    confirmButtonText: 'Guncelle',
                    cancelButtonText: 'Vazgec',
                    confirmButtonColor: '#145a46',
                    cancelButtonColor: '#6c757d',
                    reverseButtons: true,
                    focusConfirm: false,
                    didOpen: () => {
                        const popup = window.Swal.getPopup();
                        const laneSelect = popup?.querySelector('#popupLaneSelect');
                        const stageWrap = popup?.querySelector('#popupStageWrap');
                        const stageSelect = popup?.querySelector('#popupStageSelect');
                        const stageHint = popup?.querySelector('#popupStageHint');

                        const sync = () => {
                            const lane = String(laneSelect?.value || currentLane).trim();
                            const isDoing = lane === 'doing';
                            if (stageWrap) stageWrap.classList.toggle('d-none', !isDoing);

                            if (stageSelect) {
                                stageSelect.disabled = !isDoing || !canEditStage;
                            }

                            if (!isDoing) {
                                if (stageHint) stageHint.textContent = 'Ara asama sadece Islemdekiler grubunda duzenlenir.';
                                return;
                            }
                            if (!canEditStage) {
                                if (stageHint) stageHint.textContent = 'Ara asamayi sadece talep sahibi duzenleyebilir.';
                                return;
                            }
                            if (Object.keys(stageOptions).length === 0) {
                                if (stageHint) stageHint.textContent = 'Bu kategori icin Islemdekiler asamalari tanimli degil.';
                                return;
                            }
                            if (stageHint) stageHint.textContent = 'Bu degisiklik aktiviteye otomatik yazilir.';
                        };

                        laneSelect?.addEventListener('change', sync);
                        sync();
                    },
                    preConfirm: async () => {
                        if (statusUrl === '' || csrf === '') {
                            window.Swal.showValidationMessage('Güncelleme bilgisi eksik.');
                            return false;
                        }

                        const popup = window.Swal.getPopup();
                        const laneSelect = popup?.querySelector('#popupLaneSelect');
                        const stageSelect = popup?.querySelector('#popupStageSelect');
                        const lane = canLaneMove
                            ? String(laneSelect?.value || currentLane).trim()
                            : currentLane;
                        if (!['todo', 'doing', 'done'].includes(lane)) {
                            window.Swal.showValidationMessage('Gecerli bir durum grubu secin.');
                            return false;
                        }

                        const formData = new FormData();
                        formData.append('_token', csrf);
                        formData.append('return_to', 'show');
                        formData.append('lane', lane);

                        if (lane === 'doing' && canEditStage) {
                            const selectedStatus = String(stageSelect?.value || '').trim();
                            if (selectedStatus !== '') {
                                formData.append('target_status', selectedStatus);
                            }
                        }

                        let payload = null;
                        try {
                            const response = await fetch(statusUrl, {
                                method: 'POST',
                                headers: {
                                    'X-Requested-With': 'XMLHttpRequest',
                                    Accept: 'application/json',
                                },
                                body: formData,
                                credentials: 'same-origin',
                            });
                            payload = await response.json();
                            if (!response.ok || !payload || payload.ok !== true) {
                                throw new Error(String(payload?.message || 'Güncelleme tamamlanamadı.'));
                            }
                        } catch (err) {
                            window.Swal.showValidationMessage(err instanceof Error ? err.message : 'Güncelleme tamamlanamadı.');
                            return false;
                        }

                        return payload;
                    },
                });

                if (!result.isConfirmed || !result.value) return;

                const requestPayload = result.value.request || {};
                cfg.current_lane = String(requestPayload.lane_group || cfg.current_lane || '');
                cfg.current_status = String(requestPayload.status || cfg.current_status || '');
                if (laneLabelEl) {
                    laneLabelEl.textContent = String(laneOptions[cfg.current_lane] || laneLabelEl.textContent || '-');
                }
                if (stageLabelEl) {
                    stageLabelEl.textContent = String(requestPayload.status_label || stageLabelEl.textContent || '-');
                }
                if (!window.AdminApp?.reloadPage?.()) {
                    window.location.reload();
                }
            };

            buttons.forEach((btn) => {
                btn.addEventListener('click', (event) => {
                    event.preventDefault();
                    openPopup();
                });
            });
        })();
    </script>
@endpush