@extends('layouts.app')

@section('title', 'Pazarlama Kanban')

@section('content')
    <div class="container-fluid marketing-page">
        <div class="marketing-hero card shadow-sm border-0 mb-3">
            <div class="card-body p-4">
                <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
                    <div>
                        <div class="marketing-breadcrumb">Pazarlama / Projeler</div>
                        <h2 class="h3 mb-1">Kanban Board</h2>
                        <p class="text-muted mb-0">To do, aktif işler ve tamamlanan kayıtları tek ekranda yönetin.</p>
                    </div>
                    @if ($canManage)
                        <div class="d-flex flex-wrap gap-2">
                            <button class="btn btn-sm btn-success" type="button" data-bs-toggle="collapse"
                                data-bs-target="#marketingTaskPanel" aria-expanded="false" aria-controls="marketingTaskPanel">
                                <i class="bi bi-plus-circle me-1"></i> Yeni İş
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse"
                                data-bs-target="#marketingProjectPanel" aria-expanded="false" aria-controls="marketingProjectPanel">
                                <i class="bi bi-folder-plus me-1"></i> Proje Ekle
                            </button>
                        </div>
                    @endif
                </div>

                <form method="get" action="{{ route('admin.marketing.index') }}" class="marketing-toolbar mt-4 row g-2 align-items-end">
                    <div class="col-12 col-lg-3">
                        <label class="form-label mb-1">Proje</label>
                        <select name="project_id" class="form-select form-select-sm">
                            <option value="0">Tüm Projeler</option>
                            @foreach ($projects as $project)
                                <option value="{{ (int) $project->id }}"
                                    {{ (int) $selectedProjectId === (int) $project->id ? 'selected' : '' }}>
                                    {{ $project->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-lg-4">
                        <label class="form-label mb-1">Kart Ara</label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="search" id="marketingSearch" class="form-control"
                                placeholder="Başlık, açıklama, kişi veya proje...">
                        </div>
                    </div>
                    <div class="col-12 col-lg-3">
                        <label class="form-label mb-1">Takım</label>
                        <div class="marketing-avatars">
                            @forelse ($assignableUsers->take(6) as $member)
                                @php
                                    $parts = preg_split('/\s+/', trim((string) ($member->name ?? '')));
                                    $initials = '';
                                    foreach (array_slice(array_filter($parts), 0, 2) as $part) {
                                        $initials .= mb_strtoupper(mb_substr($part, 0, 1, 'UTF-8'), 'UTF-8');
                                    }
                                    $initials = $initials !== '' ? $initials : 'U';
                                @endphp
                                <span class="marketing-avatar" title="{{ $member->name }}">{{ $initials }}</span>
                            @empty
                                <span class="text-muted small">Üyeler yüklenemedi.</span>
                            @endforelse
                        </div>
                    </div>
                    <div class="col-12 col-lg-2 d-flex gap-2">
                        <button type="submit" class="btn btn-sm btn-primary flex-fill">Uygula</button>
                        <a href="{{ route('admin.marketing.index') }}" class="btn btn-sm btn-outline-secondary">Temizle</a>
                    </div>
                </form>
            </div>
        </div>

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

        @if (!$ready)
            <div class="alert alert-warning">
                Pazarlama modülü tabloları hazır değil. Lütfen migration çalıştırın.
            </div>
        @else
            @if ($canManage)
                <div class="collapse mb-3" id="marketingTaskPanel">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3">
                            <h6 class="mb-0">Yeni İş Kaydı</h6>
                        </div>
                        <div class="card-body">
                            <form method="post" action="{{ route('admin.marketing.tasks.store') }}" class="row g-2">
                                @csrf
                                <div class="col-md-3">
                                    <label class="form-label mb-1">Proje</label>
                                    <select name="project_id" class="form-select form-select-sm" required>
                                        <option value="">Seçiniz</option>
                                        @foreach ($projects as $project)
                                            <option value="{{ (int) $project->id }}"
                                                {{ (int) $selectedProjectId === (int) $project->id ? 'selected' : '' }}>
                                                {{ $project->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label mb-1">Başlık</label>
                                    <input type="text" name="title" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label mb-1">Sorumlu</label>
                                    <select name="owner_user_id" class="form-select form-select-sm js-inline-search-select"
                                        data-search-placeholder="Kullanıcı ara...">
                                        <option value="">Atama yok</option>
                                        @foreach ($assignableUsers as $assignable)
                                            <option value="{{ (int) $assignable->id }}">{{ $assignable->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label mb-1">Termin</label>
                                    <input type="date" name="due_date" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label mb-1">Durum</label>
                                    <select name="status" class="form-select form-select-sm">
                                        <option value="todo">To Do</option>
                                        <option value="active">Aktif İş</option>
                                        <option value="done">Tamamlandı</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label mb-1">Öncelik</label>
                                    <select name="priority" class="form-select form-select-sm">
                                        <option value="normal">Normal</option>
                                        <option value="low">Düşük</option>
                                        <option value="high">Yüksek</option>
                                        <option value="critical">Kritik</option>
                                    </select>
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label mb-1">Açıklama</label>
                                    <input type="text" name="description" class="form-control form-control-sm"
                                        placeholder="Kısa açıklama yazın...">
                                </div>
                                <div class="col-md-12 text-end">
                                    <button type="submit" class="btn btn-sm btn-success">Kaydet</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="collapse mb-3" id="marketingProjectPanel">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3">
                            <h6 class="mb-0">Yeni Proje</h6>
                        </div>
                        <div class="card-body">
                            <form method="post" action="{{ route('admin.marketing.projects.store') }}" class="row g-2">
                                @csrf
                                <div class="col-md-4">
                                    <label class="form-label mb-1">Proje Adı</label>
                                    <input type="text" name="name" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">Açıklama</label>
                                    <input type="text" name="description" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label mb-1">Renk</label>
                                    <input type="text" name="color" class="form-control form-control-sm" placeholder="#16A34A">
                                </div>
                                <div class="col-12 text-end">
                                    <button type="submit" class="btn btn-sm btn-success">Proje Ekle</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @endif

            @php
                $statusMap = [
                    'todo' => ['label' => 'To Do', 'class' => 'lane-todo'],
                    'active' => ['label' => 'In Progress', 'class' => 'lane-active'],
                    'done' => ['label' => 'Done', 'class' => 'lane-done'],
                ];
                $priorityMap = [
                    'low' => ['label' => 'Low', 'class' => 'bg-info'],
                    'normal' => ['label' => 'Normal', 'class' => 'bg-secondary'],
                    'high' => ['label' => 'High', 'class' => 'bg-warning text-dark'],
                    'critical' => ['label' => 'Critical', 'class' => 'bg-danger'],
                ];
            @endphp

            <div class="marketing-board row g-3">
                @foreach (['todo', 'active', 'done'] as $columnKey)
                    @php
                        $columnTasks = $tasksByStatus->get($columnKey, collect());
                        $columnCfg = $statusMap[$columnKey];
                    @endphp
                    <div class="col-12 col-xl-4 d-flex">
                        <div class="marketing-lane {{ $columnCfg['class'] }} w-100">
                            <div class="marketing-lane-header">
                                <div class="marketing-lane-title">{{ $columnCfg['label'] }}</div>
                                <div class="marketing-lane-count" data-count-for="{{ $columnKey }}">{{ $columnTasks->count() }}</div>
                            </div>
                            <div class="marketing-lane-body marketing-drop-zone" data-status="{{ $columnKey }}">
                                @forelse ($columnTasks as $task)
                                    @php
                                        $priorityCfg = $priorityMap[(string) ($task->priority ?? 'normal')] ?? $priorityMap['normal'];
                                        $projectColor = trim((string) ($task->project_color ?? ''));
                                        $projectStyle = $projectColor !== '' ? 'background-color: ' . e($projectColor) . '; color: #fff;' : '';
                                        $ownerName = trim((string) ($task->owner_name ?? ''));
                                        $ownerInitial = $ownerName !== '' ? mb_strtoupper(mb_substr($ownerName, 0, 1, 'UTF-8'), 'UTF-8') : '?';
                                        $searchText = mb_strtolower(trim((string) ($task->title . ' ' . ($task->description ?? '') . ' ' . ($task->project_name ?? '') . ' ' . $ownerName)), 'UTF-8');
                                        $detailData = json_decode((string) ($task->detail_json ?? ''), true);
                                        $detailData = is_array($detailData) ? $detailData : [];
                                        $detailProgress = isset($detailData['progress_percent']) && $detailData['progress_percent'] !== null
                                            ? max(0, min(100, (int) $detailData['progress_percent']))
                                            : null;
                                        $modalPayload = [
                                            'id' => (int) $task->id,
                                            'title' => (string) ($task->title ?? ''),
                                            'description' => (string) ($task->description ?? ''),
                                            'status' => (string) ($task->status ?? 'todo'),
                                            'priority' => (string) ($task->priority ?? 'normal'),
                                            'due_date' => (string) ($task->due_date ?? ''),
                                            'owner_name' => $ownerName,
                                            'project_name' => (string) ($task->project_name ?? ''),
                                            'project_color' => $projectColor,
                                            'status_url' => route('admin.marketing.tasks.status', ['id' => $task->id]),
                                            'details_url' => route('admin.marketing.tasks.details', ['id' => $task->id]),
                                            'delete_url' => route('admin.marketing.tasks.delete', ['id' => $task->id]),
                                            'show_url' => route('admin.marketing.tasks.show', ['id' => $task->id]),
                                            'detail' => $detailData,
                                        ];
                                        $modalPayloadJson = json_encode(
                                            $modalPayload,
                                            JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
                                        );
                                    @endphp
                                    <article class="marketing-task-card {{ $canManage ? 'marketing-draggable' : '' }}"
                                        data-task-id="{{ (int) $task->id }}"
                                        data-status-url="{{ route('admin.marketing.tasks.status', ['id' => $task->id]) }}"
                                        data-search="{{ e($searchText) }}"
                                        draggable="{{ $canManage ? 'true' : 'false' }}">
                                        <div class="marketing-task-top">
                                            <span class="badge {{ $priorityCfg['class'] }}">{{ $priorityCfg['label'] }}</span>
                                            <span class="marketing-owner-avatar" title="{{ $ownerName !== '' ? $ownerName : 'Atama yok' }}">{{ $ownerInitial }}</span>
                                        </div>
                                        <h6 class="marketing-task-title">{{ $task->title }}</h6>
                                        <p class="marketing-task-desc">{{ $task->description ?: 'Açıklama yok.' }}</p>
                                        <div class="marketing-task-meta">
                                            <span class="marketing-tag" style="{{ $projectStyle }}">{{ $task->project_name }}</span>
                                            <span class="marketing-meta-item">
                                                <i class="bi bi-calendar-event"></i>
                                                {{ $task->due_date ?: '-' }}
                                            </span>
                                            @if ($detailProgress !== null)
                                                <span class="marketing-meta-item">
                                                    <i class="bi bi-bar-chart-steps"></i>
                                                    %{{ $detailProgress }}
                                                </span>
                                            @endif
                                        </div>

                                        @if ($canManage)
                                            <div class="marketing-task-actions-inline mt-2">
                                                <button type="button" class="btn btn-sm btn-primary marketing-open-detail"
                                                    data-task='{{ $modalPayloadJson }}' data-bs-toggle="modal"
                                                    data-bs-target="#marketingTaskDetailModal">
                                                    <i class="bi bi-arrows-fullscreen me-1"></i> Detayi Ac
                                                </button>
                                            </div>
                                        @endif
                                    </article>
                                @empty
                                    <div class="marketing-empty marketing-empty-state">Bu kolonda kayıt yok.</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endsection

@push('styles')
    <style>
        .marketing-page {
            --mk-bg: #f4f7fc;
            --mk-card: #ffffff;
            --mk-border: #dbe3f0;
            --mk-text: #0f172a;
            --mk-muted: #64748b;
            --mk-brand: #0ea5e9;
            --mk-brand-dark: #0369a1;
            --mk-success: #16a34a;
        }

        .marketing-hero {
            background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
            border: 1px solid var(--mk-border);
        }

        .marketing-breadcrumb {
            font-size: .78rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--mk-muted);
            margin-bottom: .35rem;
        }

        .marketing-toolbar {
            background: rgba(255, 255, 255, .9);
            border: 1px solid var(--mk-border);
            border-radius: .85rem;
            padding: .75rem;
        }

        .marketing-avatars {
            display: flex;
            align-items: center;
            gap: .45rem;
            min-height: 31px;
            overflow: auto;
            padding-bottom: 2px;
        }

        .marketing-avatar {
            width: 29px;
            height: 29px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #0ea5e9, #0369a1);
            color: #fff;
            font-weight: 700;
            font-size: .73rem;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(2, 132, 199, .25);
            flex: 0 0 auto;
        }

        .marketing-lane {
            background: var(--mk-bg);
            border: 1px solid var(--mk-border);
            border-radius: 1rem;
            display: flex;
            flex-direction: column;
            min-height: 62vh;
        }

        .marketing-lane-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .95rem 1rem;
            border-bottom: 1px solid var(--mk-border);
        }

        .marketing-lane-title {
            font-size: .8rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--mk-muted);
            font-weight: 700;
        }

        .marketing-lane-count {
            min-width: 30px;
            height: 24px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: .78rem;
            font-weight: 700;
            background: #e2e8f0;
            color: #334155;
            padding: 0 .45rem;
        }

        .marketing-lane-body {
            padding: .85rem;
            flex: 1 1 auto;
            min-height: 260px;
            max-height: calc(100vh - 340px);
            overflow: auto;
        }

        .marketing-task-card {
            background: var(--mk-card);
            border: 1px solid #d7e2f1;
            border-radius: .9rem;
            padding: .85rem;
            margin-bottom: .75rem;
            box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
        }

        .marketing-task-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            margin-bottom: .55rem;
        }

        .marketing-owner-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #1e293b;
            color: #fff;
            font-size: .76rem;
            font-weight: 700;
        }

        .marketing-task-title {
            color: var(--mk-text);
            font-size: 1rem;
            margin-bottom: .3rem;
        }

        .marketing-task-desc {
            color: var(--mk-muted);
            font-size: .86rem;
            margin-bottom: .55rem;
            min-height: 34px;
        }

        .marketing-task-meta {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            align-items: center;
        }

        .marketing-tag {
            border-radius: .45rem;
            font-size: .74rem;
            padding: .2rem .45rem;
            border: 1px solid #cbd5e1;
            background: #f8fafc;
            color: #334155;
            font-weight: 600;
        }

        .marketing-meta-item {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            font-size: .75rem;
            color: var(--mk-muted);
        }

        .marketing-detail-link {
            text-decoration: none;
            font-weight: 600;
        }

        .marketing-detail-link:hover {
            color: var(--mk-brand-dark);
        }

        .marketing-task-actions-inline {
            display: flex;
            justify-content: flex-end;
        }

        .marketing-open-detail {
            border-radius: .6rem;
            font-weight: 600;
            letter-spacing: .01em;
            box-shadow: 0 4px 12px rgba(13, 110, 253, .2);
        }

        .marketing-task-actions {
            margin-top: .55rem;
            border-top: 1px dashed #d7e2f1;
            padding-top: .45rem;
        }

        .marketing-task-actions summary {
            cursor: pointer;
            color: #334155;
            font-size: .8rem;
            font-weight: 600;
            list-style: none;
        }

        .marketing-task-actions summary::-webkit-details-marker {
            display: none;
        }

        .marketing-task-actions-body {
            margin-top: .5rem;
        }

        .marketing-empty {
            border: 1px dashed #cbd5e1;
            border-radius: .75rem;
            background: #f8fafc;
            color: #64748b;
            font-size: .84rem;
            text-align: center;
            padding: 1.2rem .8rem;
        }

        .marketing-empty-state {
            pointer-events: none;
        }

        .marketing-draggable {
            cursor: grab;
            transition: box-shadow .15s ease, transform .15s ease, opacity .15s ease;
        }

        .marketing-task-card.is-dragging {
            opacity: .65;
            transform: scale(.98);
            box-shadow: 0 10px 22px rgba(2, 132, 199, .25);
            cursor: grabbing;
        }

        .marketing-drop-zone.is-drag-over {
            outline: 2px dashed var(--mk-brand);
            outline-offset: -6px;
            border-radius: .8rem;
            background: rgba(14, 165, 233, .08);
        }

        .lane-todo .marketing-lane-count {
            background: #e2e8f0;
        }

        .lane-active .marketing-lane-count {
            background: #fef3c7;
            color: #854d0e;
        }

        .lane-done .marketing-lane-count {
            background: #dcfce7;
            color: #166534;
        }

        @media (max-width: 1199px) {
            .marketing-lane {
                min-height: 50vh;
            }

            .marketing-lane-body {
                max-height: 56vh;
            }
        }
    </style>
@endpush

@push('modals')
    <div class="modal fade" id="marketingTaskDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-1" id="marketingTaskModalTitle">Kart Detayi</h5>
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <span class="badge border" id="marketingTaskModalProject">Proje</span>
                            <span class="badge bg-secondary" id="marketingTaskModalPriority">Normal</span>
                            <span class="badge bg-light text-dark border" id="marketingTaskModalOwner">Atama yok</span>
                            <span class="badge bg-light text-dark border" id="marketingTaskModalDue">Termin: -</span>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="border rounded p-3 bg-light-subtle" id="marketingTaskModalDescription">Açıklama yok.</div>
                        </div>
                        <div class="col-12">
                            <form method="post" id="marketingTaskModalStatusForm" class="row g-2 align-items-end">
                                @csrf
                                <input type="hidden" name="return_to" value="board">
                                <div class="col-md-4">
                                    <label class="form-label mb-1">Durum</label>
                                    <select name="status" class="form-select form-select-sm" id="marketingTaskModalStatus">
                                        <option value="todo">To Do</option>
                                        <option value="active">In Progress</option>
                                        <option value="done">Done</option>
                                    </select>
                                </div>
                                <div class="col-md-8 text-md-end">
                                    <button type="submit" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-arrow-repeat me-1"></i> Durumu Güncelle
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="col-12">
                            <form method="post" id="marketingTaskModalDetailsForm" class="row g-2">
                                @csrf
                                <input type="hidden" name="return_to" value="board">
                                <div class="col-md-6">
                                    <label class="form-label mb-1">Is Hedefi</label>
                                    <input type="text" name="business_goal" id="mtdBusinessGoal" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">Paydaslar</label>
                                    <input type="text" name="stakeholders" id="mtdStakeholders" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1">Kanal</label>
                                    <select name="channel" id="mtdChannel" class="form-select form-select-sm">
                                        <option value="">Seçiniz</option>
                                        <option value="digital">Digital</option>
                                        <option value="social">Social</option>
                                        <option value="email">E-mail</option>
                                        <option value="field">Field</option>
                                        <option value="mixed">Mixed</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1">KPI Hedefi</label>
                                    <input type="text" name="kpi_target" id="mtdKpiTarget" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1">Butce</label>
                                    <input type="number" min="0" step="0.01" name="budget_amount" id="mtdBudget" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label mb-1">Baslangic</label>
                                    <input type="date" name="start_date" id="mtdStartDate" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label mb-1">Bitis</label>
                                    <input type="date" name="end_date" id="mtdEndDate" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label mb-1">Ilerleme (%)</label>
                                    <input type="number" min="0" max="100" name="progress_percent" id="mtdProgress" class="form-control form-control-sm">
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button type="submit" class="btn btn-sm btn-success w-100">
                                        <i class="bi bi-save me-1"></i> Detay Kaydet
                                    </button>
                                </div>
                                <div class="col-12">
                                    <label class="form-label mb-1">Detay Notu</label>
                                    <textarea name="detail_note" rows="2" id="mtdDetailNote" class="form-control form-control-sm"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">Riskler</label>
                                    <textarea name="risk_note" rows="2" id="mtdRiskNote" class="form-control form-control-sm"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">Aksiyonlar</label>
                                    <textarea name="action_items" rows="2" id="mtdActionItems" class="form-control form-control-sm"></textarea>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <div>
                        <a href="#" target="_blank" class="btn btn-sm btn-outline-secondary" id="marketingTaskModalFullLink">
                            <i class="bi bi-box-arrow-up-right me-1"></i> Tam Ekran
                        </a>
                    </div>
                    <form method="post" id="marketingTaskModalDeleteForm" class="js-marketing-delete-form" data-skip-global-confirm="1">
                        @csrf
                        <button type="button" class="btn btn-sm btn-outline-danger js-marketing-delete-btn"
                            data-confirm-title="Kart Sil"
                            data-confirm-message="Bu karti silmek istediginize emin misiniz?">
                            <i class="bi bi-trash me-1"></i> Karti Sil
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="marketingDeleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" data-marketing-delete-title>Emin misiniz?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0" data-marketing-delete-message>Kaydi silmek istediginize emin misiniz?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Hayir</button>
                    <button type="button" class="btn btn-danger" data-marketing-delete-confirm>Evet</button>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <script>
        (() => {
            const detailModalEl = document.getElementById('marketingTaskDetailModal');
            if (!detailModalEl) {
                return;
            }

            const titleEl = document.getElementById('marketingTaskModalTitle');
            const descEl = document.getElementById('marketingTaskModalDescription');
            const projectEl = document.getElementById('marketingTaskModalProject');
            const ownerEl = document.getElementById('marketingTaskModalOwner');
            const dueEl = document.getElementById('marketingTaskModalDue');
            const priorityEl = document.getElementById('marketingTaskModalPriority');
            const fullLinkEl = document.getElementById('marketingTaskModalFullLink');
            const statusFormEl = document.getElementById('marketingTaskModalStatusForm');
            const detailsFormEl = document.getElementById('marketingTaskModalDetailsForm');
            const deleteFormEl = document.getElementById('marketingTaskModalDeleteForm');
            const statusSelectEl = document.getElementById('marketingTaskModalStatus');

            const fields = {
                business_goal: document.getElementById('mtdBusinessGoal'),
                stakeholders: document.getElementById('mtdStakeholders'),
                channel: document.getElementById('mtdChannel'),
                kpi_target: document.getElementById('mtdKpiTarget'),
                budget_amount: document.getElementById('mtdBudget'),
                start_date: document.getElementById('mtdStartDate'),
                end_date: document.getElementById('mtdEndDate'),
                progress_percent: document.getElementById('mtdProgress'),
                detail_note: document.getElementById('mtdDetailNote'),
                risk_note: document.getElementById('mtdRiskNote'),
                action_items: document.getElementById('mtdActionItems'),
            };

            const priorityClassMap = {
                low: 'bg-info',
                normal: 'bg-secondary',
                high: 'bg-warning text-dark',
                critical: 'bg-danger',
            };

            const toText = (value, fallback = '') => {
                const text = value === null || value === undefined ? '' : String(value).trim();
                return text !== '' ? text : fallback;
            };

            const fillDetails = (detail) => {
                const payload = detail && typeof detail === 'object' ? detail : {};
                Object.entries(fields).forEach(([key, input]) => {
                    if (!input) {
                        return;
                    }
                    input.value = toText(payload[key], '');
                });
            };

            document.addEventListener('click', (event) => {
                const trigger = event.target.closest('.marketing-open-detail');
                if (!trigger) {
                    return;
                }

                let payload = {};
                const rawPayload = trigger.getAttribute('data-task') || '{}';
                try {
                    payload = JSON.parse(rawPayload);
                } catch (e) {
                    payload = {};
                }

                if (titleEl) {
                    titleEl.textContent = toText(payload.title, 'Kart Detayi');
                }
                if (descEl) {
                    descEl.textContent = toText(payload.description, 'Açıklama yok.');
                }
                if (projectEl) {
                    projectEl.textContent = toText(payload.project_name, 'Proje');
                    const color = toText(payload.project_color, '');
                    projectEl.style.backgroundColor = color !== '' ? color : '';
                    projectEl.style.color = color !== '' ? '#fff' : '';
                }
                if (ownerEl) {
                    ownerEl.textContent = toText(payload.owner_name, 'Atama yok');
                }
                if (dueEl) {
                    dueEl.textContent = 'Termin: ' + toText(payload.due_date, '-');
                }
                if (priorityEl) {
                    const key = toText(payload.priority, 'normal').toLowerCase();
                    const label = key === 'critical'
                        ? 'Critical'
                        : (key === 'high' ? 'High' : (key === 'low' ? 'Low' : 'Normal'));
                    priorityEl.className = 'badge ' + (priorityClassMap[key] || priorityClassMap.normal);
                    priorityEl.textContent = label;
                }
                if (statusFormEl) {
                    statusFormEl.action = toText(payload.status_url, '#');
                }
                if (detailsFormEl) {
                    detailsFormEl.action = toText(payload.details_url, '#');
                }
                if (deleteFormEl) {
                    deleteFormEl.action = toText(payload.delete_url, '#');
                }
                if (fullLinkEl) {
                    fullLinkEl.href = toText(payload.show_url, '#');
                }
                if (statusSelectEl) {
                    statusSelectEl.value = toText(payload.status, 'todo');
                }

                fillDetails(payload.detail || {});
            });
        })();

        (() => {
            const modalEl = document.getElementById('marketingDeleteModal');
            if (!modalEl || !window.bootstrap?.Modal) {
                return;
            }

            const titleEl = modalEl.querySelector('[data-marketing-delete-title]');
            const messageEl = modalEl.querySelector('[data-marketing-delete-message]');
            const confirmBtn = modalEl.querySelector('[data-marketing-delete-confirm]');
            const modal = new bootstrap.Modal(modalEl);
            let pendingForm = null;

            document.addEventListener('click', (event) => {
                const btn = event.target.closest('.js-marketing-delete-btn');
                if (!btn) {
                    return;
                }
                const form = btn.closest('form');
                if (!form) {
                    return;
                }
                pendingForm = form;
                if (titleEl) {
                    titleEl.textContent = btn.getAttribute('data-confirm-title') || 'Emin misiniz?';
                }
                if (messageEl) {
                    messageEl.textContent = btn.getAttribute('data-confirm-message') || 'Kaydi silmek istediginize emin misiniz?';
                }
                modal.show();
            });

            confirmBtn?.addEventListener('click', () => {
                if (!pendingForm) {
                    return;
                }
                pendingForm.submit();
            });

            modalEl.addEventListener('hidden.bs.modal', () => {
                pendingForm = null;
            });
        })();
    </script>
@endpush

@push('scripts')
    <script>
        (() => {
            const board = document.querySelector('.marketing-board');
            if (!board) {
                return;
            }

            const searchInput = document.getElementById('marketingSearch');
            const zones = Array.from(board.querySelectorAll('.marketing-drop-zone'));
            const cards = Array.from(board.querySelectorAll('.marketing-task-card'));
            const canManage = @json((bool) $canManage);
            const csrfToken = '{{ csrf_token() }}';
            let draggingCard = null;

            const refreshEmptyStates = () => {
                zones.forEach((zone) => {
                    const cardsInZone = Array.from(zone.querySelectorAll('.marketing-task-card'))
                        .filter((card) => card.style.display !== 'none')
                        .length;
                    let emptyEl = zone.querySelector('.marketing-empty-state');

                    if (cardsInZone === 0) {
                        if (!emptyEl) {
                            emptyEl = document.createElement('div');
                            emptyEl.className = 'marketing-empty marketing-empty-state';
                            emptyEl.textContent = 'Bu kolonda kayıt yok.';
                            zone.appendChild(emptyEl);
                        }
                        return;
                    }

                    if (emptyEl) {
                        emptyEl.remove();
                    }
                });
            };

            const refreshCounts = () => {
                zones.forEach((zone) => {
                    const status = String(zone.dataset.status || '');
                    const counter = board.querySelector(`[data-count-for="${status}"]`);
                    if (!counter) {
                        return;
                    }
                    const total = zone.querySelectorAll('.marketing-task-card').length;
                    counter.textContent = String(total);
                });
                refreshEmptyStates();
            };

            const applySearch = () => {
                const q = String(searchInput?.value || '').trim().toLocaleLowerCase('tr-TR');
                cards.forEach((card) => {
                    const haystack = String(card.dataset.search || '');
                    card.style.display = q === '' || haystack.includes(q) ? '' : 'none';
                });
                refreshEmptyStates();
            };

            if (searchInput) {
                searchInput.addEventListener('input', applySearch);
            }

            if (!canManage) {
                refreshCounts();
                applySearch();
                return;
            }

            const cleanDragOver = () => {
                zones.forEach((zone) => zone.classList.remove('is-drag-over'));
            };

            const updateTaskStatus = async (card, nextStatus) => {
                const url = String(card.dataset.statusUrl || '');
                if (!url) {
                    throw new Error('Durum guncelleme adresi bulunamadı.');
                }

                const formData = new FormData();
                formData.append('_token', csrfToken);
                formData.append('status', nextStatus);

                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        Accept: 'application/json',
                    },
                    body: formData,
                    credentials: 'same-origin',
                });

                if (!response.ok) {
                    throw new Error('Durum guncelleme istegi basarisiz.');
                }

                const payload = await response.json();
                if (!payload || payload.ok !== true) {
                    throw new Error('Durum guncelleme basarisiz.');
                }
            };

            const performDrop = async (zone, insertBefore = null) => {
                const movingCard = draggingCard;
                if (!movingCard || !zone) {
                    return;
                }

                const sourceZone = movingCard.closest('.marketing-drop-zone');
                const previousSibling = movingCard.nextElementSibling;
                const fromStatus = String(sourceZone?.dataset.status || '');
                const toStatus = String(zone.dataset.status || '');

                if (!toStatus) {
                    return;
                }

                if (insertBefore && insertBefore.parentNode === zone && insertBefore !== movingCard) {
                    zone.insertBefore(movingCard, insertBefore);
                } else {
                    zone.appendChild(movingCard);
                }

                refreshCounts();

                if (fromStatus === toStatus) {
                    return;
                }

                movingCard.style.pointerEvents = 'none';
                try {
                    await updateTaskStatus(movingCard, toStatus);
                } catch (error) {
                    if (sourceZone) {
                        if (previousSibling && previousSibling.parentNode === sourceZone) {
                            sourceZone.insertBefore(movingCard, previousSibling);
                        } else {
                            sourceZone.appendChild(movingCard);
                        }
                    }
                    refreshCounts();
                    alert('Durum guncellenemedi. Lütfen tekrar deneyin.');
                } finally {
                    movingCard.style.pointerEvents = '';
                    if (draggingCard === movingCard) {
                        draggingCard = null;
                    }
                }
            };

            cards.forEach((card) => {
                card.addEventListener('dragstart', (event) => {
                    const target = event.target;
                    if (target && target.closest('form,select,button,input,textarea,a,label,summary')) {
                        event.preventDefault();
                        return;
                    }
                    draggingCard = card;
                    card.classList.add('is-dragging');
                    event.dataTransfer.effectAllowed = 'move';
                    event.dataTransfer.setData('text/plain', String(card.dataset.taskId || ''));
                });

                card.addEventListener('dragend', () => {
                    card.classList.remove('is-dragging');
                    draggingCard = null;
                    cleanDragOver();
                });

                card.addEventListener('dragover', (event) => {
                    if (!draggingCard) {
                        return;
                    }
                    event.preventDefault();
                    const zone = card.closest('.marketing-drop-zone');
                    if (!zone) {
                        return;
                    }
                    cleanDragOver();
                    zone.classList.add('is-drag-over');
                });

                card.addEventListener('drop', async (event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    if (!draggingCard || draggingCard === card) {
                        return;
                    }
                    const zone = card.closest('.marketing-drop-zone');
                    cleanDragOver();
                    await performDrop(zone, card);
                });
            });

            zones.forEach((zone) => {
                zone.addEventListener('dragover', (event) => {
                    if (!draggingCard) {
                        return;
                    }
                    event.preventDefault();
                    cleanDragOver();
                    zone.classList.add('is-drag-over');
                });

                zone.addEventListener('dragleave', () => {
                    zone.classList.remove('is-drag-over');
                });

                zone.addEventListener('drop', async (event) => {
                    event.preventDefault();
                    cleanDragOver();
                    await performDrop(zone);
                });
            });

            refreshCounts();
            applySearch();
        })();
    </script>
@endpush