@extends('layouts.app')

@section('title', $req->request_key . ' – ' . $req->summary)

@section('content')
    <div class="container-fluid pd-show-page" data-force-full-nav>

        {{-- ── Top bar ── --}}
        <div class="pd-show-topbar">
            <div class="pd-show-topbar-left">
                <nav class="pd-breadcrumb-dark">
                    <a href="{{ route('admin.marketing.destek') }}">Pazarlama Destek</a>
                    <span>/</span>
                    @if ($canManage)
                        <a href="{{ route('admin.marketing.destek.queue') }}">Kuyruk</a>
                        <span>/</span>
                    @endif
                    <span>{{ $req->request_key }}</span>
                </nav>
                <h1 class="pd-show-title">{{ $req->summary }}</h1>
            </div>
            <div class="pd-show-topbar-right">
                @if ($canManage && $req->status === 'unassigned')
                    <form action="{{ route('admin.marketing.destek.assign', $req->id) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="bi bi-person-check me-1"></i>Üstlen
                        </button>
                    </form>
                @endif
                @if ($canManage)
                    <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#statusModal">
                        <i class="bi bi-pencil me-1"></i>Durum Değiştir
                    </button>
                @endif
            </div>
        </div>

        @if (session('success'))
        <div class="alert alert-success mx-3 mb-2">{{ session('success') }}</div>@endif
        @if (session('error'))
        <div class="alert alert-danger mx-3 mb-2">{{ session('error') }}</div>@endif

        {{-- ── Main 2-col layout ── --}}
        <div class="mx-3 mb-2 d-none" data-detail-notice></div>
        <div class="pd-show-layout">

            {{-- ── LEFT: Content ── --}}
            <div class="pd-show-main">

                {{-- Request info card --}}
                <div class="pd-card">
                    <div class="pd-card-header">
                        <span class="pd-key-badge">{{ $req->request_key }}</span>
                        <span class="pd-status {{ $statusMap[$req->status]['class'] ?? '' }}" data-detail-top-status-badge>
                            {{ $statusMap[$req->status]['label'] ?? $req->status }}
                        </span>
                    </div>

                    <div class="pd-info-grid">
                        <div class="pd-info-item">
                            <div class="pd-info-label">Kategori</div>
                            <div class="pd-info-val">{{ $category['label'] ?? $req->category_key }}</div>
                        </div>
                        <div class="pd-info-item">
                            <div class="pd-info-label">Talep Türü</div>
                            <div class="pd-info-val fw-semibold">{{ $req->request_type }}</div>
                        </div>
                        <div class="pd-info-item">
                            <div class="pd-info-label">Öncelik</div>
                            <div class="pd-info-val {{ $priorityMap[$req->priority]['class'] ?? '' }}" data-detail-top-priority>
                                <i class="bi {{ $priorityMap[$req->priority]['icon'] ?? 'bi-dash' }}"></i>
                                <span>{{ $priorityMap[$req->priority]['label'] ?? $req->priority }}</span>
                            </div>
                        </div>
                        <div class="pd-info-item">
                            <div class="pd-info-label">Termin</div>
                            <div
                                class="pd-info-val {{ ($req->termin_date && \Carbon\Carbon::parse($req->termin_date)->isPast() && $req->status !== 'done') ? 'text-danger fw-bold' : '' }}">
                                {{ $req->termin_date ? \Carbon\Carbon::parse($req->termin_date)->format('d.m.Y') : '—' }}
                            </div>
                        </div>
                    </div>

                    @if (!empty($req->description))
                        <div class="pd-desc-section">
                            <div class="pd-section-label">Açıklama</div>
                            <div class="pd-desc-body">{{ $req->description }}</div>
                        </div>
                    @endif

                </div>

                {{-- Attachments --}}
                @if ($attachments->isNotEmpty())
                    <div class="pd-card">
                        <div class="pd-section-label mb-3">Ekler ({{ $attachments->count() }})</div>
                        <div class="pd-attach-list">
                            @foreach ($attachments as $att)
                                @php
                                    $mime = (string) $att->mime_type;
                                    $icon = str_contains($mime, 'pdf') ? 'bi-file-earmark-pdf text-danger'
                                        : (str_contains($mime, 'image') ? 'bi-file-earmark-image text-info'
                                            : (str_contains($mime, 'word') || str_contains($mime, 'document') ? 'bi-file-earmark-word text-primary'
                                                : (str_contains($mime, 'excel') || str_contains($mime, 'sheet') ? 'bi-file-earmark-excel text-success'
                                                    : (str_contains($mime, 'zip') || str_contains($mime, 'rar') ? 'bi-file-earmark-zip text-warning'
                                                        : 'bi-file-earmark text-muted'))));
                                    $size = $att->file_size ? ($att->file_size < 1048576 ? round($att->file_size / 1024, 1) . ' KB' : round($att->file_size / 1048576, 1) . ' MB') : '';
                                    $uploaderName = trim((string) ($att->uploader_name ?? ''));
                                    $uploadSource = (int) ($att->uploaded_by ?? 0) > 0
                                        ? ((int) ($att->uploaded_by ?? 0) === (int) ($req->reporter_user_id ?? 0) ? 'Talep sahibi' : 'Pazarlama ekibi')
                                        : 'Sistem';
                                @endphp
                                <div class="pd-attach-item">
                                    <a href="{{ asset($att->path) }}" target="_blank" class="pd-attach-link">
                                        <i class="bi {{ $icon }} pd-attach-icon"></i>
                                        <span class="pd-attach-body">
                                            <span class="pd-attach-name">{{ $att->original_name }}</span>
                                            <span class="pd-attach-meta">
                                                {{ $uploaderName !== '' ? $uploaderName : 'Bilinmeyen kullanıcı' }}
                                                <span class="pd-attach-meta-sep">•</span>
                                                {{ $uploadSource }}
                                            </span>
                                        </span>
                                        @if ($size)<span class="pd-attach-size">{{ $size }}</span>@endif
                                    </a>
                                    <a href="{{ asset($att->path) }}" download="{{ $att->original_name }}"
                                        class="pd-attach-download-btn" title="Eki indir" aria-label="Eki indir">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Activity / Comments --}}
                <div class="pd-card">
                    <div class="pd-section-label mb-3">Aktivite</div>

                    @if ($comments->isNotEmpty())
                        <div class="pd-activity-list">
                            @foreach ($comments as $c)
                                @php $isSystem = $c->entry_type !== 'comment'; @endphp
                                <div class="pd-activity-item {{ $isSystem ? 'pd-activity-item--system' : '' }}">
                                    @if (!$isSystem)
                                        <div class="pd-activity-avatar">
                                            {{ strtoupper(substr($c->user_name ?? 'U', 0, 1)) }}
                                        </div>
                                    @else
                                        <div class="pd-activity-avatar pd-activity-avatar--sys"><i class="bi bi-gear"></i></div>
                                    @endif
                                    <div class="pd-activity-body">
                                        <div class="pd-activity-meta">
                                            <strong>{{ $c->user_name ?? 'Sistem' }}</strong>
                                            <span>{{ \Carbon\Carbon::parse($c->created_at)->diffForHumans() }}</span>
                                        </div>
                                        <div class="pd-activity-msg {{ $isSystem ? 'pd-activity-msg--system' : '' }}">
                                            {{ $c->message }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    {{-- Add comment form --}}
                    <form action="{{ route('admin.marketing.destek.comments.store', $req->id) }}" method="POST"
                        enctype="multipart/form-data" class="pd-comment-form">
                        @csrf
                        <textarea name="message" rows="3" class="form-control pd-comment-textarea"
                            placeholder="Yorum yaz..." required></textarea>
                        <div class="pd-comment-actions">
                            <label class="btn btn-sm btn-outline-secondary" for="comment-att">
                                <i class="bi bi-paperclip"></i>
                                <input type="file" id="comment-att" name="attachment" style="display:none;"
                                    onchange="document.getElementById('comment-att-name').textContent=this.files[0]?.name||''">
                            </label>
                            <span id="comment-att-name" class="text-muted small"></span>
                            <button type="submit" class="btn btn-sm btn-primary ms-auto">
                                <i class="bi bi-send me-1"></i>Gönder
                            </button>
                        </div>
                    </form>
                </div>

            </div>

            {{-- ── RIGHT: Sidebar ── --}}
            <div class="pd-show-sidebar">

                @php
                    $reviewStepLabel = match ((string) ($req->customer_review_step ?? '')) {
                        'reporter' => 'Reporter Onayı Bekliyor',
                        'approver' => 'Departman Müdürü Onayı Bekliyor',
                        default => null,
                    };
                @endphp

                @if ($canProgressWorkflow)
                    <div class="pd-card pd-card--sidebar pd-workflow-card" data-workflow-card>
                        <div class="pd-section-label mb-3">Workflow</div>
                        <div class="pd-workflow-stage-box">
                            <span class="pd-status {{ $statusMap[$req->status]['class'] ?? '' }}">
                                {{ $statusMap[$req->status]['label'] ?? $req->status }}
                            </span>
                            @if ($reviewStepLabel)
                                <div class="pd-workflow-substep">{{ $reviewStepLabel }}</div>
                            @endif
                        </div>

                        @if (!empty($workflowActions))
                            <div class="pd-workflow-actions">
                                @foreach ($workflowActions as $workflowAction)
                                    @if (!empty($workflowAction['requires_assignee']))
                                        <form action="{{ route('admin.marketing.destek.workflow', $req->id) }}" method="POST" class="pd-workflow-form" data-workflow-form>
                                            @csrf
                                            <input type="hidden" name="workflow_action" value="{{ $workflowAction['action'] }}">
                                            <label class="form-label fw-semibold small mb-1">Tasarım Uzmanı</label>
                                            <select name="target_assignee_id" class="form-select form-select-sm mb-2" required>
                                                <option value="">Seçin</option>
                                                @foreach ($assignableUsers as $userOption)
                                                    @if ((int) $userOption->id === (int) ($req->assignee_user_id ?? 0))
                                                        @continue
                                                    @endif
                                                    <option value="{{ $userOption->id }}">{{ $userOption->name }}</option>
                                                @endforeach
                                            </select>
                                            <button type="submit" class="btn btn-sm {{ $workflowAction['variant'] === 'primary' ? 'btn-primary' : 'btn-outline-secondary' }} w-100">
                                                {{ $workflowAction['label'] }}
                                            </button>
                                            <div class="pd-workflow-helper">{{ $workflowAction['helper'] }}</div>
                                        </form>
                                    @elseif (!empty($workflowAction['requires_approver']))
                                        <button type="button" class="btn btn-sm btn-success w-100"
                                            data-bs-toggle="modal" data-bs-target="#workflowApproverModal">
                                            {{ $workflowAction['label'] }}
                                        </button>
                                        <div class="pd-workflow-helper">{{ $workflowAction['helper'] }}</div>
                                    @else
                                        <form action="{{ route('admin.marketing.destek.workflow', $req->id) }}" method="POST" class="pd-workflow-form" data-workflow-form>
                                            @csrf
                                            <input type="hidden" name="workflow_action" value="{{ $workflowAction['action'] }}">
                                            <button type="submit" class="btn btn-sm {{ $workflowAction['variant'] === 'success' ? 'btn-success' : ($workflowAction['variant'] === 'warning' ? 'btn-warning' : 'btn-outline-secondary') }} w-100">
                                                {{ $workflowAction['label'] }}
                                            </button>
                                            <div class="pd-workflow-helper">{{ $workflowAction['helper'] }}</div>
                                        </form>
                                    @endif
                                @endforeach
                            </div>
                        @else
                            <div class="text-muted small">Bu aşamada ek işlem yok. Gerekli ise önce atama veya durum güncellemesi yapın.</div>
                        @endif
                    </div>
                @endif

                {{-- SLA --}}
                <div class="pd-card pd-card--sidebar pd-sla-card d-none">
                    <div class="pd-section-label mb-3">SLA'lar</div>

                    @php
                        $firstRespDue = $slaFirstResp;
                        $resolutionDue = $slaResolution;
                        $firstRespOver = $now->gt($firstRespDue);
                        $resolutionOver = $now->gt($resolutionDue);
                        $firstRespMins = abs($now->diffInMinutes($firstRespDue));
                        $resMins = abs($now->diffInMinutes($resolutionDue));
                    @endphp

                    <div class="pd-sla-item {{ $firstRespOver ? 'pd-sla-item--overdue' : '' }}">
                        <div class="pd-sla-time">{{ $firstRespDue->format('d M H:i') }}</div>
                        <div class="pd-sla-label">İlk yanıt süresi <span>(4 saat)</span></div>
                        @if ($firstRespOver)
                            <div class="pd-sla-tag pd-sla-tag--over"><i class="bi bi-clock-fill me-1"></i>Süresi geçti</div>
                        @else
                            <div class="pd-sla-tag pd-sla-tag--ok"><i
                                    class="bi bi-check2 me-1"></i>{{ floor($firstRespMins / 60) }}s {{ $firstRespMins % 60 }}d kaldı
                            </div>
                        @endif
                    </div>

                    <div class="pd-sla-item {{ $resolutionOver ? 'pd-sla-item--overdue' : '' }}">
                        <div class="pd-sla-time">{{ $resolutionDue->format('d M H:i') }}</div>
                        <div class="pd-sla-label">Çözüm süresi <span>(8 saat)</span></div>
                        @if ($resolutionOver)
                            <div class="pd-sla-tag pd-sla-tag--over"><i class="bi bi-clock-fill me-1"></i>Süresi geçti</div>
                        @else
                            <div class="pd-sla-tag pd-sla-tag--ok"><i class="bi bi-check2 me-1"></i>{{ floor($resMins / 60) }}s
                                {{ $resMins % 60 }}d kaldı</div>
                        @endif
                    </div>
                </div>

                {{-- Details --}}
                <div class="pd-card pd-card--sidebar pd-detail-card">
                    <div class="pd-section-label mb-3">Detaylar</div>
                    <div class="pd-detail-sla-wrap">
                        <div class="pd-detail-subtitle">SLA'lar</div>

                        <div class="pd-sla-item {{ $firstRespOver ? 'pd-sla-item--overdue' : '' }}">
                            <div class="pd-sla-time">{{ $firstRespDue->format('d M H:i') }}</div>
                            <div class="pd-sla-label">İlk yanıt süresi <span>(4 saat)</span></div>
                            @if ($firstRespOver)
                                <div class="pd-sla-tag pd-sla-tag--over"><i class="bi bi-clock-fill me-1"></i>Süresi geçti</div>
                            @else
                                <div class="pd-sla-tag pd-sla-tag--ok"><i
                                        class="bi bi-check2 me-1"></i>{{ floor($firstRespMins / 60) }}s {{ $firstRespMins % 60 }}d kaldı
                                </div>
                            @endif
                        </div>

                        <div class="pd-sla-item {{ $resolutionOver ? 'pd-sla-item--overdue' : '' }}">
                            <div class="pd-sla-time">{{ $resolutionDue->format('d M H:i') }}</div>
                            <div class="pd-sla-label">Çözüm süresi <span>(8 saat)</span></div>
                            @if ($resolutionOver)
                                <div class="pd-sla-tag pd-sla-tag--over"><i class="bi bi-clock-fill me-1"></i>Süresi geçti</div>
                            @else
                                <div class="pd-sla-tag pd-sla-tag--ok"><i class="bi bi-check2 me-1"></i>{{ floor($resMins / 60) }}s
                                    {{ $resMins % 60 }}d kaldı</div>
                            @endif
                        </div>
                    </div>

                    <div data-detail-dynamic-shell>
                    @if ($canEditTask)
                        <form action="{{ route('admin.marketing.destek.status', $req->id) }}" method="POST"
                            class="pd-detail-update-form" data-detail-form data-current-status="{{ $req->status }}">
                            @csrf
                            <input type="hidden" name="assignee_id"
                                value="{{ (int) ($req->assignee_user_id ?? 0) > 0 ? (int) ($req->assignee_user_id ?? 0) : '' }}"
                                data-detail-assignee-hidden>
                            <input type="hidden" name="status" value="{{ $req->status }}" data-detail-status-hidden>
                            <input type="hidden" name="priority" value="{{ $req->priority }}" data-detail-priority-hidden>

                            <div class="pd-detail-row">
                                <div class="pd-detail-label">Atanan</div>
                                <div class="pd-detail-val">
                                    @if ($canReassignTask && $assignableUsers->isNotEmpty())
                                        <select class="form-select form-select-sm" data-detail-assignee-select>
                                            <option value="">Atanmamış</option>
                                            @foreach ($assignableUsers as $userOption)
                                                <option value="{{ $userOption->id }}"
                                                    {{ (int) ($req->assignee_user_id ?? 0) === (int) $userOption->id ? 'selected' : '' }}>
                                                    {{ $userOption->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @elseif ($req->assignee_name)
                                        <div class="pd-assignee-chip">
                                            <div class="pd-assignee-av">{{ strtoupper(substr($req->assignee_name, 0, 1)) }}</div>
                                            {{ $req->assignee_name }}
                                        </div>
                                    @else
                                        <span class="text-muted">Atanmamış</span>
                                    @endif
                                </div>
                            </div>

                            <div class="pd-detail-row">
                                <div class="pd-detail-label">Durum</div>
                                <div class="pd-detail-val">
                                    <div class="pd-detail-inline-control">
                                        <select class="form-select form-select-sm" data-detail-status-select
                                            {{ (int) ($req->assignee_user_id ?? 0) <= 0 ? 'disabled' : '' }}>
                                            @if (in_array((string) $req->status, ['solution_center', 'control', 'customer_review'], true))
                                                <option value="{{ $req->status }}" selected>
                                                    {{ $statusMap[$req->status]['label'] ?? $req->status }}
                                                </option>
                                            @endif
                                            @foreach ($statusMap as $statusKey => $statusValue)
                                                @if (!$canReassignTask && $statusKey === 'unassigned')
                                                    @continue
                                                @endif
                                                @if (in_array($statusKey, ['solution_center', 'control', 'customer_review'], true))
                                                    @continue
                                                @endif
                                                <option value="{{ $statusKey }}"
                                                    {{ (string) $req->status === (string) $statusKey ? 'selected' : '' }}>
                                                    {{ $statusValue['label'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span class="pd-status {{ $statusMap[$req->status]['class'] ?? '' }}"
                                            data-detail-status-badge>
                                            {{ $statusMap[$req->status]['label'] ?? $req->status }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="pd-detail-row">
                                <div class="pd-detail-label">Öncelik</div>
                                <div class="pd-detail-val">
                                    <select class="form-select form-select-sm" data-detail-priority-select>
                                        @foreach ($priorityMap as $priorityKey => $priorityValue)
                                            <option value="{{ $priorityKey }}" {{ (string) $req->priority === (string) $priorityKey ? 'selected' : '' }}>
                                                {{ $priorityValue['label'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </form>
                    @else
                    <div class="pd-detail-row {{ $canEditTask ? 'd-none' : '' }}">
                        <div class="pd-detail-label">Atanan</div>
                        <div class="pd-detail-val">
                            @if ($req->assignee_name)
                                <div class="pd-assignee-chip">
                                    <div class="pd-assignee-av">{{ strtoupper(substr($req->assignee_name, 0, 1)) }}</div>
                                    {{ $req->assignee_name }}
                                </div>
                            @else
                                <span class="text-muted">Atanmamış</span>
                            @endif
                        </div>
                    </div>

                    @if (!$canEditTask)
                        <div class="pd-detail-row">
                            <div class="pd-detail-label">Durum</div>
                            <div class="pd-detail-val">
                                <span class="pd-status {{ $statusMap[$req->status]['class'] ?? '' }}">
                                    {{ $statusMap[$req->status]['label'] ?? $req->status }}
                                </span>
                            </div>
                        </div>
                    @endif
                    @endif
                    </div>

                    <div class="pd-detail-row">
                        <div class="pd-detail-label">Talep Eden</div>
                        <div class="pd-detail-val">
                            <div class="pd-assignee-chip pd-assignee-chip--reporter">
                                <div class="pd-assignee-av pd-assignee-av--green">
                                    {{ strtoupper(substr($req->reporter_name ?? 'U', 0, 1)) }}</div>
                                {{ $req->reporter_name ?? '—' }}
                            </div>
                        </div>
                    </div>

                    <div class="pd-detail-row {{ $canEditTask ? 'd-none' : '' }}">
                        <div class="pd-detail-label">Öncelik</div>
                        <div class="pd-detail-val">
                            <span class="{{ $priorityMap[$req->priority]['class'] ?? '' }}" data-detail-priority-badge>
                                <i class="bi {{ $priorityMap[$req->priority]['icon'] ?? 'bi-dash' }}"></i>
                                <span>{{ $priorityMap[$req->priority]['label'] ?? $req->priority }}</span>
                            </span>
                        </div>
                    </div>

                    <div class="pd-detail-row">
                        <div class="pd-detail-label">Oluşturuldu</div>
                        <div class="pd-detail-val">{{ \Carbon\Carbon::parse($req->created_at)->format('d.m.Y H:i') }}</div>
                    </div>

                    <div data-workflow-meta>
                    @if (!empty($req->approver_name))
                        <div class="pd-detail-row">
                            <div class="pd-detail-label">Approver</div>
                            <div class="pd-detail-val">
                                <div class="pd-assignee-chip">
                                    <div class="pd-assignee-av">{{ strtoupper(substr($req->approver_name, 0, 1)) }}</div>
                                    {{ $req->approver_name }}
                                </div>
                            </div>
                        </div>
                    @endif

                    @if (!empty($reviewStepLabel))
                        <div class="pd-detail-row">
                            <div class="pd-detail-label">Onay Adımı</div>
                            <div class="pd-detail-val">{{ $reviewStepLabel }}</div>
                        </div>
                    @endif
                    </div>

                    @if ($req->updated_at && $req->updated_at !== $req->created_at)
                        <div class="pd-detail-row">
                            <div class="pd-detail-label">Güncellendi</div>
                            <div class="pd-detail-val">{{ \Carbon\Carbon::parse($req->updated_at)->diffForHumans() }}</div>
                        </div>
                    @endif

                    @if ($canManage)
                        <div class="pd-detail-row">
                            <div class="pd-detail-label">İşlemler</div>
                            <div class="pd-detail-val text-end">
                                <form action="{{ route('admin.marketing.destek.delete', $req->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-outline-danger btn-sm px-3 py-1"
                                        data-confirm-title="Talep Sil"
                                        data-confirm-message="Bu talep kalıcı olarak silinsin mi?">
                                        <i class="bi bi-trash me-1"></i>Talebi Sil
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endif
                </div>

            </div>
        </div>

    </div>

    {{-- ── Status Modal (team only) ── --}}
    @if ($canManage)
        <div class="modal fade" id="statusModal" tabindex="-1">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form action="{{ route('admin.marketing.destek.status', $req->id) }}" method="POST">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title">Durum Değiştir</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <label class="form-label fw-semibold">Yeni Durum</label>
                            <select name="status" class="form-select">
                                @foreach ($statusMap as $sk => $sv)
                                    @if (in_array($sk, ['solution_center', 'control', 'customer_review'], true))
                                        @continue
                                    @endif
                                    <option value="{{ $sk }}" {{ $req->status === $sk ? 'selected' : '' }}>
                                        {{ $sv['label'] }}
                                    </option>
                                @endforeach
                            </select>

                            @if ($assignableUsers->isNotEmpty())
                                <label class="form-label fw-semibold mt-3">Atanan Kişi (opsiyonel)</label>
                                <select name="assignee_id" class="form-select">
                                    <option value="">Değiştirme</option>
                                    @foreach ($assignableUsers as $u)
                                        <option value="{{ $u->id }}" {{ $req->assignee_user_id == $u->id ? 'selected' : '' }}>
                                            {{ $u->name }}</option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                data-bs-dismiss="modal">İptal</button>
                            <button type="submit" class="btn btn-sm btn-primary">Kaydet</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @if (collect($workflowActions ?? [])->contains(static fn($item) => !empty($item['requires_approver'])))
        <div class="modal fade" id="workflowApproverModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-sm modal-dialog-centered">
                        <div class="modal-content">
                    <form action="{{ route('admin.marketing.destek.workflow', $req->id) }}" method="POST" data-workflow-form>
                        @csrf
                        <input type="hidden" name="workflow_action" value="send_to_customer_review">
                        <div class="modal-header">
                            <h5 class="modal-title">Customer Review Başlat</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <label class="form-label fw-semibold">Approver</label>
                            <select name="approver_id" class="form-select" required>
                                <option value="">Seçin</option>
                                @foreach ($approvalUsers as $approvalUser)
                                    <option value="{{ $approvalUser->id }}">{{ $approvalUser->name }}</option>
                                @endforeach
                            </select>
                            <p class="text-muted small mb-0 mt-2">
                                Reporter onayından sonra talep son onay için bu kullanıcıya gidecek.
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">İptal</button>
                            <button type="submit" class="btn btn-sm btn-success">Süreci Başlat</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('scripts')
    <script>
        (function () {
            const form = document.querySelector('[data-detail-form]');
            if (!form) {
                return;
            }

            const notice = document.querySelector('[data-detail-notice]');
            const assigneeSelect = form.querySelector('[data-detail-assignee-select]');
            const assigneeHidden = form.querySelector('[data-detail-assignee-hidden]');
            const statusSelect = form.querySelector('[data-detail-status-select]');
            const statusHidden = form.querySelector('[data-detail-status-hidden]');
            const prioritySelect = form.querySelector('[data-detail-priority-select]');
            const priorityHidden = form.querySelector('[data-detail-priority-hidden]');
            const topStatusBadge = document.querySelector('[data-detail-top-status-badge]');
            const sideStatusBadge = form.querySelector('[data-detail-status-badge]');
            const topPriority = document.querySelector('[data-detail-top-priority]');
            const sidePriorityBadge = document.querySelector('[data-detail-priority-badge]');

            const showNotice = function (message, type) {
                if (!notice) {
                    return;
                }

                notice.className = `alert alert-${type === 'success' ? 'success' : 'danger'} mx-3 mb-2`;
                notice.textContent = String(message || '');
            };

            const setBusy = function (isBusy) {
                if (assigneeSelect) {
                    assigneeSelect.disabled = isBusy;
                }

                if (statusSelect) {
                    if (isBusy) {
                        statusSelect.disabled = true;
                    } else {
                        statusSelect.disabled = String(assigneeHidden?.value || '').trim() === '';
                    }
                }

                if (prioritySelect) {
                    prioritySelect.disabled = isBusy;
                }
            };

            const restoreDefaults = function () {
                if (assigneeSelect && assigneeHidden) {
                    assigneeSelect.value = String(assigneeHidden.defaultValue || assigneeHidden.value || '');
                }

                if (statusSelect && statusHidden) {
                    statusSelect.value = String(statusHidden.defaultValue || statusHidden.value || form.dataset.currentStatus || '');
                    statusSelect.disabled = String(assigneeHidden?.defaultValue || assigneeHidden?.value || '').trim() === '';
                }

                if (prioritySelect && priorityHidden) {
                    prioritySelect.value = String(priorityHidden.defaultValue || priorityHidden.value || '');
                }
            };

            const syncDerivedState = function () {
                const assigneeValue = String(assigneeSelect?.value || '').trim();
                const currentStatus = String(statusHidden?.value || form.dataset.currentStatus || '').trim();

                if (assigneeValue === '') {
                    if (statusSelect) {
                        statusSelect.value = 'unassigned';
                    }
                    if (statusHidden) {
                        statusHidden.value = 'unassigned';
                    }
                    return;
                }

                if (currentStatus === 'unassigned') {
                    if (statusSelect) {
                        statusSelect.value = 'assigned';
                    }
                    if (statusHidden) {
                        statusHidden.value = 'assigned';
                    }
                }
            };

            const applyMutation = function (payload) {
                const nextStatus = String(payload.new_status || statusHidden?.value || '').trim();
                const nextAssigneeId = payload.assignee_id ? String(payload.assignee_id) : '';
                const nextPriority = String(payload.priority || priorityHidden?.value || '').trim();
                const badgeClass = String(payload.status_class || '').trim();
                const badgeText = String(payload.status_label || nextStatus || '');

                form.dataset.currentStatus = nextStatus;

                if (assigneeSelect) {
                    assigneeSelect.value = nextAssigneeId;
                }

                if (assigneeHidden) {
                    assigneeHidden.value = nextAssigneeId;
                    assigneeHidden.defaultValue = nextAssigneeId;
                }

                if (statusSelect) {
                    statusSelect.value = nextStatus;
                    statusSelect.disabled = nextAssigneeId === '';
                }

                if (statusHidden) {
                    statusHidden.value = nextStatus;
                    statusHidden.defaultValue = nextStatus;
                }

                if (prioritySelect && nextPriority !== '') {
                    prioritySelect.value = nextPriority;
                }

                if (priorityHidden && nextPriority !== '') {
                    priorityHidden.value = nextPriority;
                    priorityHidden.defaultValue = nextPriority;
                }

                [topStatusBadge, sideStatusBadge].forEach((badge) => {
                    if (!badge) {
                        return;
                    }

                    badge.className = badgeClass !== '' ? `pd-status ${badgeClass}` : 'pd-status';
                    badge.textContent = badgeText;
                });

                const priorityClass = String(payload.priority_class || '').trim();
                const priorityIcon = String(payload.priority_icon || 'bi-dash').trim();
                const priorityLabel = String(payload.priority_label || nextPriority || '').trim();

                if (topPriority) {
                    topPriority.className = priorityClass !== '' ? `pd-info-val ${priorityClass}` : 'pd-info-val';
                    topPriority.innerHTML = `<i class="bi ${priorityIcon}"></i> <span>${priorityLabel}</span>`;
                }

                if (sidePriorityBadge) {
                    sidePriorityBadge.className = priorityClass !== '' ? priorityClass : '';
                    sidePriorityBadge.innerHTML = `<i class="bi ${priorityIcon}"></i> <span>${priorityLabel}</span>`;
                }
            };

            const refreshWorkflowCardFragment = async function () {
                const currentCard = document.querySelector('[data-workflow-card]');
                if (!currentCard) {
                    return;
                }

                const response = await fetch(window.location.href, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'text/html',
                    },
                });

                if (!response.ok) {
                    return;
                }

                const html = await response.text();
                const parser = new DOMParser();
                const nextDoc = parser.parseFromString(html, 'text/html');
                const nextCard = nextDoc.querySelector('[data-workflow-card]');

                if (!nextCard) {
                    return;
                }

                currentCard.replaceWith(nextCard);
            };

            const submitMutation = async function () {
                if (assigneeSelect && assigneeHidden) {
                    assigneeHidden.value = String(assigneeSelect.value || '').trim();
                }

                if (statusSelect && statusHidden) {
                    statusHidden.value = String(statusSelect.value || form.dataset.currentStatus || '').trim();
                }

                if (prioritySelect && priorityHidden) {
                    priorityHidden.value = String(prioritySelect.value || priorityHidden.value || '').trim();
                }

                const selectedStatus = String(statusHidden?.value || form.dataset.currentStatus || '').trim();
                const selectedAssignee = String(assigneeHidden?.value || '').trim();

                if (selectedStatus !== 'unassigned' && selectedAssignee === '') {
                    restoreDefaults();
                    showNotice('Durum değiştirmeden önce bir atanan seçin.', 'danger');
                    return;
                }

                setBusy(true);

                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        },
                        body: new FormData(form),
                    });

                    const payload = await response.json().catch(() => ({}));

                    if (!response.ok) {
                        throw new Error(String(payload.message || 'İşlem tamamlanamadı.'));
                    }

                    applyMutation(payload);
                    try {
                        await refreshWorkflowCardFragment();
                    } catch (error) {
                        // Keep the successful mutation even if the workflow card refresh fails.
                    }
                    showNotice(String(payload.message || 'İşlem tamamlandı.'), 'success');
                } catch (error) {
                    restoreDefaults();
                    showNotice(String(error.message || 'İşlem tamamlanamadı.'), 'danger');
                } finally {
                    setBusy(false);
                }
            };

            form.addEventListener('change', function (event) {
                const target = event.target;
                if (!(target instanceof HTMLElement)) {
                    return;
                }

                if (target.matches('[data-detail-assignee-select]')) {
                    syncDerivedState();
                }

                if (!target.matches('[data-detail-assignee-select], [data-detail-status-select], [data-detail-priority-select]')) {
                    return;
                }

                submitMutation();
            });
        })();

        (function () {
            const pageEl = document.querySelector('.pd-show-page');
            if (!pageEl) {
                return;
            }

            const notice = document.querySelector('[data-detail-notice]');
            const topStatusBadge = document.querySelector('[data-detail-top-status-badge]');

            const showNotice = function (message, type) {
                if (!notice) {
                    return;
                }

                notice.className = `alert alert-${type === 'success' ? 'success' : 'danger'} mx-3 mb-2`;
                notice.textContent = String(message || '');
            };

            const setWorkflowBusy = function (form, isBusy) {
                form.querySelectorAll('button, select').forEach((element) => {
                    element.disabled = !!isBusy;
                });
            };

            const syncTopStatus = function (payload) {
                if (!topStatusBadge || !payload) {
                    return;
                }

                const statusClass = String(payload.status_class || '').trim();
                topStatusBadge.className = statusClass !== '' ? `pd-status ${statusClass}` : 'pd-status';
                topStatusBadge.textContent = String(payload.status_label || payload.new_status || '');
            };

            const refreshWorkflowFragments = async function () {
                const response = await fetch(window.location.href, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'text/html',
                    },
                });

                if (!response.ok) {
                    throw new Error('Ekran yenilenemedi.');
                }

                const html = await response.text();
                const parser = new DOMParser();
                const nextDoc = parser.parseFromString(html, 'text/html');
                const selectors = ['[data-workflow-card]', '[data-workflow-meta]', '[data-detail-dynamic-shell]'];

                selectors.forEach((selector) => {
                    const currentNode = document.querySelector(selector);
                    const nextNode = nextDoc.querySelector(selector);

                    if (!currentNode && !nextNode) {
                        return;
                    }

                    if (currentNode && nextNode) {
                        currentNode.replaceWith(nextNode);
                        return;
                    }

                    if (currentNode && !nextNode) {
                        currentNode.remove();
                    }
                });
            };

            const hideApproverModal = function () {
                const modalEl = document.getElementById('workflowApproverModal');
                if (!modalEl || typeof bootstrap === 'undefined' || !bootstrap.Modal) {
                    return;
                }

                const instance = bootstrap.Modal.getInstance(modalEl);
                if (instance) {
                    instance.hide();
                }
            };

            pageEl.addEventListener('submit', async function (event) {
                const target = event.target;
                if (!(target instanceof HTMLElement)) {
                    return;
                }

                const workflowForm = target.closest('[data-workflow-form]');
                if (!workflowForm) {
                    return;
                }

                event.preventDefault();
                const formData = new FormData(workflowForm);
                setWorkflowBusy(workflowForm, true);

                try {
                    const actionUrl = String(workflowForm.getAttribute('action') || '').trim();
                    const response = await fetch(actionUrl, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        },
                        body: formData,
                    });

                    const payload = await response.json().catch(() => ({}));

                    if (!response.ok) {
                        throw new Error(String(payload.message || 'Workflow işlemi tamamlanamadı.'));
                    }

                    syncTopStatus(payload);
                    hideApproverModal();
                    await refreshWorkflowFragments();
                    showNotice(String(payload.message || 'Workflow güncellendi.'), 'success');
                } catch (error) {
                    showNotice(String(error.message || 'Workflow işlemi tamamlanamadı.'), 'danger');
                } finally {
                    setWorkflowBusy(workflowForm, false);
                }
            });
        })();
    </script>
@endpush

@push('styles')
    <style>
        :root {
            --pd-green: #145a46;
            --pd-green-dark: #0f4536;
            --pd-green-light: #e6f2ed;
        }

        .pd-show-page {
            background: #f4f7fc;
            min-height: 100vh;
            padding-bottom: 3rem;
        }

        .pd-show-page .btn-primary,
        .pd-show-page .btn-success {
            background: var(--pd-green);
            border-color: var(--pd-green);
            color: #fff;
        }

        .pd-show-page .btn-primary:hover,
        .pd-show-page .btn-primary:focus,
        .pd-show-page .btn-success:hover,
        .pd-show-page .btn-success:focus {
            background: var(--pd-green-dark);
            border-color: var(--pd-green-dark);
            color: #fff;
        }

        .pd-show-page .btn-outline-secondary {
            color: var(--pd-green-dark);
            border-color: #c8ddd4;
            background: #fff;
        }

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

        .pd-show-page .btn-warning {
            background: #f4b860;
            border-color: #f4b860;
            color: #2f2411;
        }

        .pd-show-page .btn-warning:hover,
        .pd-show-page .btn-warning:focus {
            background: #e2a343;
            border-color: #e2a343;
            color: #2f2411;
        }

        /* Top bar */
        .pd-show-topbar {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 1.5rem 1.5rem 1rem;
            flex-wrap: wrap;
            gap: .75rem;
            background: #fff;
            border-bottom: 1px solid #e2e8f0;
            margin-bottom: 1.25rem;
        }

        .pd-show-topbar-right {
            display: none;
        }

        .pd-breadcrumb-dark {
            font-size: .78rem;
            color: #94a3b8;
            margin-bottom: .3rem;
        }

        .pd-breadcrumb-dark a {
            color: #64748b;
            text-decoration: none;
        }

        .pd-breadcrumb-dark a:hover {
            color: var(--pd-green);
        }

        .pd-breadcrumb-dark span {
            margin: 0 .4rem;
        }

        .pd-show-title {
            font-size: 1.25rem;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            line-height: 1.3;
        }

        .pd-show-topbar-right {
            display: none;
        }

        /* Layout */
        .pd-show-layout {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 1.25rem;
            padding: 0 1.5rem;
            align-items: flex-start;
        }

        @media (max-width: 900px) {
            .pd-show-layout {
                grid-template-columns: 1fr;
            }
        }

        .pd-show-sidebar {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        /* Cards */
        .pd-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 1rem;
            padding: 1.25rem;
            margin-bottom: 1.25rem;
        }

        .pd-card--sidebar {
            margin-bottom: 0;
        }

        .pd-detail-card {
            order: 1;
            border-color: #d9e7e0;
            box-shadow: 0 10px 28px rgba(15, 69, 54, .06);
        }

        .pd-detail-card .pd-section-label {
            color: var(--pd-green);
        }

        .pd-detail-sla-wrap {
            border: 1px solid #e3eee8;
            border-radius: .85rem;
            background: #f8fbfa;
            padding: .85rem 1rem;
            margin-bottom: 1rem;
        }

        .pd-detail-subtitle {
            font-size: .74rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #6a7f76;
            margin-bottom: .35rem;
        }

        .pd-workflow-card {
            order: 2;
        }

        .pd-sla-card {
            order: 3;
        }

        .pd-card-header {
            display: flex;
            align-items: center;
            gap: .75rem;
            margin-bottom: 1rem;
        }

        .pd-key-badge {
            font-size: .8rem;
            font-weight: 700;
            font-family: monospace;
            color: var(--pd-green);
            background: var(--pd-green-light);
            padding: .2rem .55rem;
            border-radius: .4rem;
        }

        .pd-section-label {
            font-size: .74rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #94a3b8;
        }

        /* Info grid */
        .pd-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: .75rem;
            margin-bottom: 1rem;
        }

        .pd-info-item {
            background: #f8fafc;
            border: 1px solid #f1f5f9;
            border-radius: .6rem;
            padding: .65rem .85rem;
        }

        .pd-info-label {
            font-size: .72rem;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #94a3b8;
            margin-bottom: .2rem;
        }

        .pd-info-val {
            font-size: .88rem;
            color: #1e293b;
        }

        /* Description */
        .pd-desc-section {
            border-top: 1px solid #f1f5f9;
            padding-top: 1rem;
            margin-top: .75rem;
        }

        .pd-desc-body {
            white-space: pre-line;
            color: #374151;
            font-size: .9rem;
            line-height: 1.7;
            margin-top: .5rem;
        }

        /* Attachments */
        .pd-attach-list {
            display: flex;
            flex-direction: column;
            gap: .4rem;
        }

        .pd-attach-item {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .35rem .45rem .35rem .7rem;
            border: 1px solid #e2e8f0;
            border-radius: .6rem;
            color: #374151;
            font-size: .82rem;
            transition: background .12s ease, border-color .12s ease;
        }

        .pd-attach-item:hover {
            background: var(--pd-green-light);
            border-color: var(--pd-green);
            color: var(--pd-green);
        }

        .pd-attach-link {
            display: flex;
            align-items: center;
            gap: .5rem;
            flex: 1 1 auto;
            min-width: 0;
            text-decoration: none;
            color: inherit;
        }

        .pd-attach-link:hover {
            color: inherit;
            text-decoration: none;
        }

        .pd-attach-download-btn {
            flex: 0 0 auto;
            width: 28px;
            height: 28px;
            border-radius: .45rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #c8ddd4;
            background: #fff;
            color: var(--pd-green);
            text-decoration: none;
            transition: background .12s ease, border-color .12s ease, color .12s ease;
        }

        .pd-attach-download-btn:hover,
        .pd-attach-download-btn:focus {
            background: var(--pd-green-light);
            border-color: var(--pd-green);
            color: var(--pd-green-dark);
            text-decoration: none;
        }

        .pd-attach-icon {
            font-size: 1.05rem;
            flex: 0 0 auto;
        }

        .pd-attach-body {
            display: flex;
            flex-direction: column;
            min-width: 0;
            flex: 1 1 auto;
        }

        .pd-attach-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pd-attach-meta {
            font-size: .72rem;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: .1rem;
        }

        .pd-attach-meta-sep {
            margin: 0 .25rem;
        }

        .pd-attach-size {
            color: #94a3b8;
            white-space: nowrap;
        }

        /* Activity */
        .pd-activity-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .pd-activity-item {
            display: flex;
            gap: .75rem;
        }

        .pd-activity-avatar {
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--pd-green);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .78rem;
            font-weight: 700;
        }

        .pd-activity-avatar--sys {
            background: #e2e8f0;
            color: #64748b;
        }

        .pd-activity-body {
            flex: 1 1 auto;
        }

        .pd-activity-meta {
            font-size: .78rem;
            color: #64748b;
            margin-bottom: .2rem;
        }

        .pd-activity-meta strong {
            color: #374151;
            margin-right: .35rem;
        }

        .pd-activity-msg {
            font-size: .88rem;
            color: #374151;
            line-height: 1.5;
            background: #f8fafc;
            border: 1px solid #f1f5f9;
            border-radius: .5rem;
            padding: .5rem .75rem;
        }

        .pd-activity-msg--system {
            font-style: italic;
            background: none;
            border: none;
            color: #64748b;
            padding: 0;
        }

        .pd-activity-item--system {
            opacity: .8;
        }

        /* Comment form */
        .pd-comment-form {
            border-top: 1px solid #f1f5f9;
            padding-top: 1rem;
        }

        .pd-comment-textarea {
            resize: vertical;
            font-size: .88rem;
        }

        .pd-comment-actions {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin-top: .5rem;
        }

        /* SLA items */
        .pd-sla-item {
            padding: .75rem 0;
            border-bottom: 1px solid #f1f5f9;
        }

        .pd-sla-item:last-child {
            border-bottom: none;
        }

        .pd-sla-item--overdue .pd-sla-time {
            color: #dc2626;
        }

        .pd-sla-time {
            font-size: .88rem;
            font-weight: 700;
            color: #374151;
        }

        .pd-sla-label {
            font-size: .78rem;
            color: #64748b;
            margin: .15rem 0 .4rem;
        }

        .pd-sla-label span {
            color: #94a3b8;
        }

        .pd-sla-tag {
            display: inline-flex;
            align-items: center;
            font-size: .73rem;
            font-weight: 600;
            padding: .18rem .55rem;
            border-radius: .4rem;
        }

        .pd-sla-tag--over {
            background: #fee2e2;
            color: #dc2626;
        }

        .pd-sla-tag--ok {
            background: var(--pd-green-light);
            color: var(--pd-green);
        }

        /* Detail rows */
        .pd-detail-row {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            padding: .6rem 0;
            border-bottom: 1px solid #f8fafc;
        }

        .pd-detail-row:last-child {
            border-bottom: none;
        }

        .pd-detail-label {
            font-size: .72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #94a3b8;
        }

        .pd-detail-val {
            font-size: .88rem;
            color: #374151;
        }

        .pd-detail-update-form {
            display: contents;
        }

        .pd-detail-inline-control {
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        .pd-detail-inline-control .form-select {
            min-width: 0;
        }

        /* Assignee chip */
        .pd-assignee-chip {
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        .pd-assignee-av {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #64748b;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            font-weight: 700;
        }

        .pd-assignee-av--green {
            background: var(--pd-green);
        }

        /* Status badges */
        .pd-status {
            display: inline-block;
            padding: .22rem .6rem;
            border-radius: .4rem;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .04em;
        }

        .mkt-status--unassigned {
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #fed7aa;
        }

        .mkt-status--assigned {
            background: #f3f4f6;
            color: #374151;
            border: 1px solid #d1d5db;
        }

        .mkt-status--analiz {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .mkt-status--solution {
            background: #ecfeff;
            color: #0f766e;
            border: 1px solid #a5f3fc;
        }

        .mkt-status--control {
            background: #fffbeb;
            color: #b45309;
            border: 1px solid #fde68a;
        }

        .mkt-status--review {
            background: #f0f9ff;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }

        .mkt-status--inprogress {
            background: var(--pd-green-light);
            color: var(--pd-green);
            border: 1px solid #b9d9cc;
        }

        .mkt-status--pending {
            background: #fffbeb;
            color: #b45309;
            border: 1px solid #fde68a;
        }

        .mkt-status--done {
            background: #f0fdf4;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }

        .mkt-status--cancelled {
            background: #f8fafc;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }

        .pd-workflow-card {
            border-color: #d6e6df;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
        }

        .pd-workflow-stage-box {
            border: 1px solid #dbe8e2;
            border-radius: .9rem;
            padding: .8rem;
            background: #fff;
            margin-bottom: .9rem;
        }

        .pd-workflow-substep {
            margin-top: .45rem;
            font-size: .78rem;
            color: #5b6b66;
        }

        .pd-workflow-actions {
            display: grid;
            gap: .75rem;
        }

        .pd-workflow-form {
            display: grid;
            gap: .45rem;
        }

        .pd-workflow-helper {
            font-size: .74rem;
            color: #64748b;
            line-height: 1.45;
        }
    </style>
@endpush