{{-- GÖREV DETAY MODALI — new-week Livewire bileşeninden include edilir --}}
@if ($active_task)
@php
$modalIsOpen = $active_task->status === 'new';
$modalDate = $active_task->date ? \Carbon\Carbon::parse($active_task->date) : null;
$modalOtherTeamMembers = array_values(
array_filter($teamMembers, fn($member) => $member['id'] !== auth()->id()),
);
$toolbarButton =
'inline-flex items-center gap-1.5 p-2.5 text-sm font-medium rounded-md border border-stone-200 transition-colors
disabled:opacity-50 disabled:cursor-not-allowed';

// Tailwind, çalışırken üretilen sınıf adlarını göremez; hepsi burada
// düz metin olarak durmak zorunda.
$modalColors = [
'' => [
'label' => 'Renk yok',
'swatch' => 'bg-stone-200',
'check' => 'text-stone-600',
'frame' => 'border-stone-200',
'field' => 'bg-white',
],
'rose' => [
'label' => 'Kırmızı',
'swatch' => 'bg-rose-600',
'check' => 'text-white',
'frame' => 'border-rose-500',
'field' => 'bg-rose-50',
],
'amber' => [
'label' => 'Sarı',
'swatch' => 'bg-amber-600',
'check' => 'text-white',
'frame' => 'border-amber-500',
'field' => 'bg-amber-50',
],
'lime' => [
'label' => 'Yeşil',
'swatch' => 'bg-lime-600',
'check' => 'text-white',
'frame' => 'border-lime-500',
'field' => 'bg-lime-50',
],
'teal' => [
'label' => 'Turkuaz',
'swatch' => 'bg-teal-600',
'check' => 'text-white',
'frame' => 'border-teal-500',
'field' => 'bg-teal-50',
],
'sky' => [
'label' => 'Mavi',
'swatch' => 'bg-sky-600',
'check' => 'text-white',
'frame' => 'border-sky-500',
'field' => 'bg-sky-50',
],
'violet' => [
'label' => 'Mor',
'swatch' => 'bg-violet-600',
'check' => 'text-white',
'frame' => 'border-violet-500',
'field' => 'bg-violet-50',
],
'slate' => [
'label' => 'Gri',
'swatch' => 'bg-slate-600',
'check' => 'text-white',
'frame' => 'border-slate-500',
'field' => 'bg-slate-50',
],
];
$modalColorValue = $active_task->color ?? '';

if (!isset($modalColors[$modalColorValue])) {
$modalColorValue = '';
}

$modalColor = $modalColors[$modalColorValue];
@endphp
<div class="fixed inset-0 z-[60] flex items-start justify-center px-4 py-6" wire:key="task-modal-{{ $active_task->id }}"
    x-on:keydown.escape.window="$wire.call('closeTaskModal')" x-data="{
            panel: 'none',
            companySearch: '',
            companyResults: [],
            selectedCompany: null,
            isCreatingCompany: false,
            companies: @js($companies),
            noteDraft: '',
            savingNote: false,
            editingNoteId: null,
            noteEditDraft: '',
            savingNoteEdit: false,
            linkEmailOpen: false,
            linkEmailSearch: '',
            linkInvoiceOpen: false,
            linkInvoiceSearch: '',

            togglePanel(name) {
                this.panel = this.panel === name ? 'none' : name;
            },

            searchCompanies() {
                if (this.companySearch.length < 2) {
                    this.companyResults = [];
                    this.isCreatingCompany = false;

                    return;
                }

                const term = this.companySearch.toLowerCase();

                this.companyResults = this.companies.filter((company) => {
                    return company.name.toLowerCase().includes(term) ||
                        (company.email && company.email.toLowerCase().includes(term));
                }).slice(0, 10);

                this.isCreatingCompany = this.companyResults.length === 0;
            },

            pickCompany(company) {
                this.selectedCompany = company;
                this.companySearch = company.name;
                this.companyResults = [];
                this.isCreatingCompany = false;
            },

            resetCompanyArea() {
                this.panel = 'none';
                this.companySearch = '';
                this.companyResults = [];
                this.selectedCompany = null;
                this.isCreatingCompany = false;
            },

            saveCompany() {
                if (this.isCreatingCompany && this.companySearch.trim()) {
                    $wire.call('createAndAssignCompany', {{ $active_task->id }}, this.companySearch.trim())
                        .then((company) => {
                            if (company) this.companies.push(company);

                            this.resetCompanyArea();
                        });

                    return;
                }

                if (this.selectedCompany) {
                    $wire.call('assignCompanyToTask', {{ $active_task->id }}, this.selectedCompany.id)
                        .then(() => this.resetCompanyArea());
                }
            },

            assignUser(userId) {
                $wire.call('assignUserToTask', {{ $active_task->id }}, userId)
                    .then(() => this.panel = 'none');
            },

            selectColor(color) {
                $wire.call('updateTaskColor', {{ $active_task->id }}, color === '' ? null : color)
                    .then(() => this.panel = 'none');
            },

            saveNoteLine() {
                const content = this.noteDraft.trim();

                if (!content || this.savingNote) return;

                this.savingNote = true;

                $wire.call('addNote', {{ $active_task->id }}, content).then(() => {
                    this.noteDraft = '';
                    this.savingNote = false;
                    this.$nextTick(() => this.$refs.noteInput.focus());
                }).catch(() => this.savingNote = false);
            },

            startNoteEdit(noteId, content) {
                this.editingNoteId = noteId;
                this.noteEditDraft = content;

                this.$nextTick(() => {
                    const input = this.$refs['noteEdit-' + noteId];

                    if (input) input.focus();
                });
            },

            cancelNoteEdit() {
                this.editingNoteId = null;
                this.noteEditDraft = '';
            },

            saveNoteEdit(noteId) {
                const content = this.noteEditDraft.trim();

                if (!content || this.savingNoteEdit) return;

                this.savingNoteEdit = true;

                $wire.call('updateNote', noteId, content).then(() => {
                    this.savingNoteEdit = false;
                    this.cancelNoteEdit();
                }).catch(() => this.savingNoteEdit = false);
            },

            linkEmail(messageId) {
                $wire.call('linkEmailToTask', messageId, {{ $active_task->id }}).then(() => {
                    this.linkEmailOpen = false;
                    this.linkEmailSearch = '';
                });
            },

            linkInvoice(invoiceId) {
                $wire.call('linkInvoiceToTask', invoiceId, {{ $active_task->id }}).then(() => {
                    this.linkInvoiceOpen = false;
                    this.linkInvoiceSearch = '';
                });
            },

            unlinkInvoice(invoiceId) {
                $wire.call('unlinkInvoiceFromTask', invoiceId, {{ $active_task->id }});
            }
        }">
    <div class="absolute inset-0 bg-stone-900/50" x-on:click="$wire.call('closeTaskModal')"></div>

    <div
        class="relative z-10 flex flex-col w-full max-w-3xl max-h-full bg-white rounded-2xl border shadow-2xl task-modal-panel {{ $modalColor['frame'] }}/80">
        {{-- HEADER --}}
        <div class="flex items-start justify-between gap-4 px-5 py-3 border-b border-stone-200">
            <div class="grid w-full gap-y-1">
                @if ($returnProcessId)
                <button type="button" wire:click="returnToProcess"
                    class="self-start text-xs text-sky-700 hover:underline">← Sürece dön</button>
                @endif
                <div class="flex items-center text-xs gap-x-2 text-stone-500">
                    <span class="text-base material-symbols-rounded">calendar_today</span>
                    <span>{{ $modalDate ? $modalDate->locale('tr')->translatedFormat('d F Y, l') : 'Tarihsiz görev'
                        }}</span>
                    <span
                        class="px-2 py-0.5 rounded-full {{ $modalIsOpen ? 'bg-stone-100 text-stone-600' : 'bg-teal-100 text-teal-700' }}">{{
                        $modalIsOpen ? 'Açık' : 'Tamamlandı' }}</span>
                </div>
                <input type="text" wire:model.live.debounce.500ms="modalTitle" placeholder="Görev başlığı..."
                    class="w-full px-2 py-1 text-lg font-semibold border border-transparent rounded-lg text-stone-800 placeholder:text-stone-400 hover:border-stone-200 focus:bg-white focus:border-stone-300 focus:ring-2 focus:ring-stone-300 focus:outline-none">
                <div class="flex flex-wrap items-center text-xs gap-x-2 gap-y-1 text-stone-500">
                    <x-process-badge :process="$active_task->process" />
                    @if ($active_task->company)
                    <span class="inline-flex items-center px-2 py-0.5 rounded-md bg-stone-200/60 text-stone-600">{{
                        $active_task->company->name }}</span>
                    @endif
                    @if ($active_task->assignedUser)
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-stone-200/60 text-stone-600">
                        <span class="text-sm material-symbols-rounded">person</span>
                        {{ $active_task->assignedUser->name }}
                    </span>
                    @endif
                    @if ($active_task->creator)
                    <span>{{ $active_task->creator->name }} ·
                        {{ $active_task->created_at?->format('d.m.Y') }}</span>
                    @endif
                </div>
            </div>
            <button type="button" wire:click="closeTaskModal"
                class="inline-flex items-center justify-center rounded-lg w-9 h-9 text-stone-500 hover:bg-stone-100 hover:text-stone-700">
                <span class="sr-only">Kapat</span>
                <span class="text-xl material-symbols-rounded">close</span>
            </button>
        </div>

        {{-- İŞLEVLER --}}
        <div class="flex flex-wrap items-center gap-1.5 px-5 py-2 border-b border-stone-200">
            <button type="button"
                wire:click="{{ $active_task->process_id ? 'openContinuation' : 'openTaskProcessSelection' }}({{ $active_task->id }})"
                wire:loading.attr="disabled" class="{{ $toolbarButton }} bg-sky-50 text-sky-800 text-xs">
                <span class="text-lg material-symbols-rounded" aria-hidden="true">account_tree</span>
                {{ $active_task->process_id ? 'Devam görevi oluştur' : 'Sürece dahil et' }}
            </button>
            <!-- TAMAMLA -->
            @if ($modalIsOpen)
            <button type="button" wire:click="markTaskAsCompleted({{ $active_task->id }})" wire:loading.attr="disabled"
                wire:target="markTaskAsCompleted"
                class="{{ $toolbarButton }} bg-teal-600 hover:bg-teal-500 border border-teal-700 text-white text-xs">
                <svg wire:target="markTaskAsCompleted" class="size-4" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                    <path
                        d="M128 64C145.7 64 160 78.3 160 96L160 112L229 94.8C267.1 85.3 307.3 89.7 342.5 107.3C388.8 130.5 443.3 130.5 489.6 107.3L499.2 102.5C519.8 92.1 544 107.1 544 130.1L544 409.8C544 423.1 535.7 435.1 523.2 439.8L488.5 452.8C442.3 470.1 390.9 467.4 346.8 445.4C308.9 426.4 265.4 421.7 224.3 432L160 448L160 544C160 561.7 145.7 576 128 576C110.3 576 96 561.7 96 544L96 96C96 78.3 110.3 64 128 64zM160 251.1L224 237.2L224 302.7L160 316.6L160 382.1L208.8 369.9C213.9 368.6 218.9 367.5 224 366.6L224 302.7L262.9 294.3C271.2 292.5 279.6 291.8 288 292.2L288 228.2C301.6 228.6 315.2 230.8 328.4 234.6L352 241.5L352 308.2L310.3 295.9C303 293.8 295.5 292.5 288 292.1L288 363.5C309.8 365.4 331.3 370.2 352 377.9L352 308.1L374.7 314.8C388.2 318.8 402 321.2 416 322.2L416 258C408.2 257.2 400.4 255.7 392.8 253.5L352 241.5L352 179.5C339 175.7 326.2 170.7 313.8 164.5C305.6 160.4 296.9 157.5 288 155.7L288 228.1C275 227.7 262 228.9 249.3 231.7L224 237.2L224 162L160 178L160 251.1zM416 399.7C432.8 401.2 449.9 399 466 392.9L480 387.7L480 316L472.1 317.8C453.7 322.1 434.8 323.5 416 322.3L416 399.7zM480 250.3L480 179.5C459.1 185.6 437.6 188.6 416 188.6L416 258C429.9 259.4 444 258.5 457.7 255.4L480 250.2z" />
                </svg>
                <span>Tamamla</span>
            </button>
            @else
            <button type="button" wire:click="markTaskAsNew({{ $active_task->id }})" wire:loading.attr="disabled"
                wire:target="markTaskAsNew" class="{{ $toolbarButton }} bg-stone-100 hover:bg-stone-200 text-stone-700">
                <span wire:target="markTaskAsNew" class="text-lg text-amber-600 material-symbols-rounded">undo</span>
                Geri Al
            </button>
            @endif
            <!-- İŞLETME EKLE -->
            <button type="button" @click="togglePanel('company')"
                class="{{ $toolbarButton }} hover:bg-stone-200 text-xs"
                :class="panel === 'company' ? 'bg-stone-200 text-stone-900' : 'bg-stone-100 text-stone-700'">
                <svg class="size-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                    <path
                        d="M352 64C316.7 64 288 92.7 288 128L288 160L240 160L240 88C240 74.7 229.3 64 216 64C202.7 64 192 74.7 192 88L192 160L128 160L128 88C128 74.7 117.3 64 104 64C90.7 64 80 74.7 80 88L80 162C52.4 169.1 32 194.2 32 224L32 512C32 547.3 60.7 576 96 576L544 576C579.3 576 608 547.3 608 512L608 320C608 284.7 579.3 256 544 256L480 256L480 128C480 92.7 451.3 64 416 64L352 64zM416 176L416 208C416 216.8 408.8 224 400 224L368 224C359.2 224 352 216.8 352 208L352 176C352 167.2 359.2 160 368 160L400 160C408.8 160 416 167.2 416 176zM400 256C408.8 256 416 263.2 416 272L416 304C416 312.8 408.8 320 400 320L368 320C359.2 320 352 312.8 352 304L352 272C352 263.2 359.2 256 368 256L400 256zM416 368L416 400C416 408.8 408.8 416 400 416L368 416C359.2 416 352 408.8 352 400L352 368C352 359.2 359.2 352 368 352L400 352C408.8 352 416 359.2 416 368zM528 352C536.8 352 544 359.2 544 368L544 400C544 408.8 536.8 416 528 416L496 416C487.2 416 480 408.8 480 400L480 368C480 359.2 487.2 352 496 352L528 352zM288 368L288 400C288 408.8 280.8 416 272 416L240 416C231.2 416 224 408.8 224 400L224 368C224 359.2 231.2 352 240 352L272 352C280.8 352 288 359.2 288 368zM272 256C280.8 256 288 263.2 288 272L288 304C288 312.8 280.8 320 272 320L240 320C231.2 320 224 312.8 224 304L224 272C224 263.2 231.2 256 240 256L272 256zM160 368L160 400C160 408.8 152.8 416 144 416L112 416C103.2 416 96 408.8 96 400L96 368C96 359.2 103.2 352 112 352L144 352C152.8 352 160 359.2 160 368zM144 256C152.8 256 160 263.2 160 272L160 304C160 312.8 152.8 320 144 320L112 320C103.2 320 96 312.8 96 304L96 272C96 263.2 103.2 256 112 256L144 256z" />
                </svg>
                İşletme Ekle
            </button>
            <!-- KİŞİ EKLE -->
            @if ($modalIsOpen && count($modalOtherTeamMembers) > 0)
            <button type="button" @click="togglePanel('user')" class="{{ $toolbarButton }} hover:bg-stone-200 text-xs"
                :class="panel === 'user' ? 'bg-stone-200 text-stone-900' : 'bg-stone-100 text-stone-700'">
                <svg class="size-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                    <path
                        d="M285.7 368C384.2 368 464 447.8 464 546.3C464 562.7 450.7 576 434.3 576L77.7 576C61.3 576 48 562.7 48 546.3C48 447.8 127.8 368 226.3 368L285.7 368zM528 144C541.3 144 552 154.7 552 168L552 216L600 216C613.3 216 624 226.7 624 240C624 253.3 613.3 264 600 264L552 264L552 312C552 325.3 541.3 336 528 336C514.7 336 504 325.3 504 312L504 264L456 264C442.7 264 432 253.3 432 240C432 226.7 442.7 216 456 216L504 216L504 168C504 154.7 514.7 144 528 144zM256 312C189.7 312 136 258.3 136 192C136 125.7 189.7 72 256 72C322.3 72 376 125.7 376 192C376 258.3 322.3 312 256 312z" />
                </svg>
                Kişi Ekle
            </button>
            @endif
            <!-- RENK SEÇ -->
            <button type="button" @click="togglePanel('color')" class="{{ $toolbarButton }} hover:bg-stone-200 text-xs"
                :class="panel === 'color' ? 'bg-stone-200 text-stone-900' : 'bg-stone-100 text-stone-700'">
                <svg class="size-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                    <path
                        d="M290.4 70C288.9 66.4 285.4 64 281.5 64L262.5 64C258.6 64 255 66.4 253.6 70L232.9 121.7C229.7 129.7 218.3 129.7 215.1 121.7L194.4 70C192.9 66.4 189.4 64 185.5 64L176 64C149.5 64 128 85.5 128 112L128 320L512 320L512 112C512 85.5 490.5 64 464 64L358.5 64C354.6 64 351 66.4 349.6 70L328.9 121.7C325.7 129.7 314.3 129.7 311.1 121.7L290.4 70zM128 368L128 384C128 419.3 156.7 448 192 448L256 448L256 512C256 547.3 284.7 576 320 576C355.3 576 384 547.3 384 512L384 448L448 448C483.3 448 512 419.3 512 384L512 368L128 368zM320 528C311.2 528 304 520.8 304 512C304 503.2 311.2 496 320 496C328.8 496 336 503.2 336 512C336 520.8 328.8 528 320 528z" />
                </svg>
                <span class="w-3.5 h-3.5 rounded-full {{ $modalColor['swatch'] }}"></span>
                {{ $modalColorValue === '' ? 'Renk' : $modalColor['label'] }}
            </button>
            <!-- SONRAKİ HAFTAYA GÖNDER -->
            <button type="button" wire:click="moveTaskToNextWeek({{ $active_task->id }})" wire:loading.attr="disabled"
                wire:target="moveTaskToNextWeek"
                class="{{ $toolbarButton }} bg-stone-100 hover:bg-stone-200 text-stone-700 text-xs">
                <svg wire:loading.remove wire:target="moveTaskToNextWeek" class="size-4" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                    <path
                        d="M149 100.8C161.9 93.8 177.7 94.5 190 102.6L448 272.1L448 128C448 110.3 462.3 96 480 96C497.7 96 512 110.3 512 128L512 512C512 529.7 497.7 544 480 544C462.3 544 448 529.7 448 512L448 367.9L190 537.5C177.7 545.6 162 546.3 149 539.3C136 532.3 128 518.7 128 504L128 136C128 121.3 136.1 107.8 149 100.8z" />
                </svg>
                <span wire:loading wire:target="moveTaskToNextWeek"
                    class="text-lg material-symbols-rounded">hourglass</span>
                Sonraki Hafta
            </button>
            <!-- ARŞİVLE -->
            <button type="button" wire:click="archiveTask({{ $active_task->id }})" wire:loading.attr="disabled"
                wire:target="archiveTask"
                class="{{ $toolbarButton }} bg-stone-100 hover:bg-rose-50 hover:text-rose-700 text-stone-700 text-xs">
                <svg wire:l wire:target="archiveTask" class="size-4" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                    <path
                        d="M64 128C64 110.3 78.3 96 96 96L544 96C561.7 96 576 110.3 576 128L576 160C576 177.7 561.7 192 544 192L96 192C78.3 192 64 177.7 64 160L64 128zM96 240L544 240L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 240zM248 304C234.7 304 224 314.7 224 328C224 341.3 234.7 352 248 352L392 352C405.3 352 416 341.3 416 328C416 314.7 405.3 304 392 304L248 304z" />
                </svg>
                Arşivle
            </button>
        </div>

        <div class="flex flex-col gap-4 p-5 overflow-y-auto">
            @if ($errors->any())
            <div role="alert" class="p-3 text-sm rounded-lg bg-rose-50 text-rose-800">
                @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
                @endforeach
            </div>
            @endif
            <form wire:submit="saveModalTaskDate" class="flex flex-wrap items-end gap-2">
                <label class="process-label">Task date
                    <input type="date" wire:model="modalTaskDate" class="process-input">
                </label>
                <button type="submit" wire:loading.attr="disabled" class="process-button">Save date</button>
                <span class="text-xs text-stone-400">Clear the date to defer this task.</span>
            </form>
            <!-- SEÇİMLİ PANELLER -->
            <div x-show="panel === 'company'" x-cloak x-transition
                class="p-3 border rounded-xl border-stone-200 bg-stone-50">
                <input type="text" x-model="companySearch" @input="searchCompanies()"
                    class="w-full px-3 py-2 text-sm bg-white border rounded-lg text-stone-700 border-stone-200 focus:ring-2 focus:ring-stone-300"
                    placeholder="İşletme ara veya yeni oluştur...">
                <div x-show="companyResults.length > 0" class="mt-2 overflow-y-auto max-h-40">
                    <template x-for="company in companyResults" :key="company.id">
                        <div @click="pickCompany(company)"
                            class="flex items-center px-3 py-2 text-sm rounded-lg cursor-pointer hover:bg-stone-200 text-stone-700">
                            <span x-text="company.name"></span>
                            <span class="ml-2 text-xs text-stone-500" x-text="company.email || ''"></span>
                        </div>
                    </template>
                </div>
                <div x-show="isCreatingCompany && companySearch.length >= 2" class="mt-2">
                    <div @click="saveCompany()"
                        class="flex items-center gap-x-1.5 px-3 py-2 text-sm rounded-lg cursor-pointer bg-amber-100 text-amber-800">
                        <span class="text-base material-symbols-rounded">add</span>
                        "<span x-text="companySearch"></span>" adında yeni işletme oluştur
                    </div>
                </div>
                <div x-show="selectedCompany" class="mt-2">
                    <div class="flex items-center gap-x-1.5 px-3 py-2 text-sm rounded-lg bg-teal-100 text-teal-800">
                        <span class="text-base material-symbols-rounded">check</span>
                        <span x-text="selectedCompany?.name"></span> seçildi
                    </div>
                </div>
                <div class="flex items-center gap-x-1.5 mt-3">
                    <button @click="saveCompany()" :disabled="!selectedCompany && !isCreatingCompany"
                        class="px-4 py-2 text-sm font-semibold text-white rounded-lg bg-stone-700 hover:bg-stone-600 disabled:opacity-30 disabled:cursor-not-allowed">
                        Ata
                    </button>
                    <button @click="resetCompanyArea()"
                        class="px-4 py-2 text-sm font-semibold rounded-lg text-stone-700 bg-stone-200 hover:bg-stone-300">
                        Vazgeç
                    </button>
                </div>
            </div>

            <!-- ATANAN KİŞİ -->
            <div x-show="panel === 'user'" x-cloak x-transition
                class="p-3 border rounded-xl border-stone-200 bg-stone-50">
                <div class="px-1 pb-2 text-xs text-stone-500">
                    Atanan:
                    <span class="font-semibold text-stone-700">{{ $active_task->assignedUser->name ?? 'Atanmamış'
                        }}</span>
                </div>
                <div class="overflow-y-auto max-h-56">
                    <div @click="assignUser(null)"
                        class="flex items-center gap-2 px-3 py-2 text-sm rounded-lg cursor-pointer hover:bg-stone-200 text-stone-700">
                        <span class="text-lg material-symbols-rounded text-stone-400">person_off</span>
                        Atanmamış
                    </div>
                    <template x-for="member in @js($modalOtherTeamMembers)" :key="member.id">
                        <div @click="assignUser(member.id)"
                            class="flex items-center gap-2 px-3 py-2 text-sm rounded-lg cursor-pointer hover:bg-stone-200 text-stone-700">
                            <img x-show="member.profile_photo_url" :src="member.profile_photo_url"
                                class="object-cover rounded-full w-7 h-7" :alt="member.name">
                            <span x-show="!member.profile_photo_url"
                                class="flex items-center justify-center text-xs font-bold text-white rounded-full w-7 h-7 bg-stone-500"
                                x-text="member.name.charAt(0).toUpperCase()"></span>
                            <span class="flex-1" x-text="member.name"></span>
                            @if ($active_task->assigned_to)
                            <span x-show="{{ $active_task->assigned_to }} === member.id"
                                class="text-base text-teal-600 material-symbols-rounded">check</span>
                            @endif
                        </div>
                    </template>
                </div>
            </div>

            {{-- RENK --}}
            <div x-show="panel === 'color'" x-cloak x-transition
                class="flex items-center gap-2 p-3 border rounded-xl border-stone-200 bg-stone-50">
                @foreach ($modalColors as $colorValue => $option)
                <button type="button" @click="selectColor('{{ $colorValue }}')"
                    class="relative flex items-center justify-center flex-1 h-8 rounded-lg {{ $option['swatch'] }} hover:outline hover:outline-stone-400 {{ $colorValue === $modalColorValue ? 'ring-2 ring-offset-2 ring-stone-800' : '' }}"
                    title="{{ $option['label'] }}">
                    @if ($colorValue === $modalColorValue)
                    <span class="text-base material-symbols-rounded {{ $option['check'] }}">check</span>
                    @endif
                </button>
                @endforeach
            </div>

            {{-- GÖREV NOTU --}}
            <div class="grid gap-y-1.5 rounded-xl p-2 bg-stone-50 border border-stone-200">
                <label class="text-xs font-semibold uppercase text-stone-400">Görev</label>
                <textarea rows="4" wire:model.live.debounce.800ms="modalNote" placeholder="Görev notunu yazın..."
                    class="w-full px-3 py-2 text-sm border resize-y rounded-xl border-stone-200 text-stone-800 focus:ring-2 focus:ring-stone-300 focus:border-stone-300"></textarea>
                <div class="flex items-center h-4 text-xs gap-x-1 text-stone-400">
                    <span wire:loading wire:target="modalNote">Kaydediliyor...</span>
                </div>
            </div>

            {{-- NOT SATIRLARI --}}
            <div class="grid gap-y-1.5">
                <label class="text-xs font-semibold uppercase text-stone-400">
                    Notlar
                    <span class="ml-1 text-stone-300">({{ $active_task->notes->count() }})</span>
                </label>

                <div class="border divide-y divide-stone-100 rounded-xl border-stone-200">
                    @forelse ($active_task->notes as $note)
                    <div class="px-3 py-2" wire:key="note-row-{{ $note->id }}">
                        {{-- GÖRÜNTÜLEME --}}
                        <div class="flex items-start gap-x-2" x-show="editingNoteId !== {{ $note->id }}">
                            <p class="flex-1 text-sm whitespace-pre-line text-stone-700">
                                {{ $note->content }}
                            </p>
                            @if ((int) $note->user_id === (int) auth()->id())
                            <div class="flex shrink-0 items-center gap-x-0.5">
                                <button type="button" @click="startNoteEdit({{ $note->id }}, @js($note->content))"
                                    class="p-1.5 rounded-md text-stone-400 hover:bg-stone-100 hover:text-stone-700"
                                    title="Satırı düzenle">
                                    <span class="text-base material-symbols-rounded">edit</span>
                                </button>
                                <button type="button" wire:click="deleteNote({{ $note->id }})"
                                    wire:confirm="Bu not satırı silinsin mi?" wire:loading.attr="disabled"
                                    wire:loading.class="opacity-50" wire:target="deleteNote({{ $note->id }})"
                                    class="p-1.5 rounded-md text-stone-400 hover:bg-rose-50 hover:text-rose-600"
                                    title="Satırı sil">
                                    <span class="text-base material-symbols-rounded">delete</span>
                                </button>
                            </div>
                            @endif
                        </div>

                        {{-- DÜZENLEME --}}
                        <div x-show="editingNoteId === {{ $note->id }}" x-cloak>
                            <textarea rows="3" x-ref="noteEdit-{{ $note->id }}" x-model="noteEditDraft"
                                @keydown.escape.stop="cancelNoteEdit()"
                                @keydown.ctrl.enter.prevent="saveNoteEdit({{ $note->id }})"
                                @keydown.meta.enter.prevent="saveNoteEdit({{ $note->id }})"
                                class="w-full px-3 py-2 text-sm bg-white border rounded-lg resize-y text-stone-700 border-stone-200 focus:ring-2 focus:ring-stone-300"></textarea>
                            <div class="flex items-center gap-x-1.5 mt-1">
                                <button type="button" @click="saveNoteEdit({{ $note->id }})" :disabled="savingNoteEdit"
                                    class="px-3 py-1.5 text-sm font-semibold text-white rounded-lg bg-stone-700 hover:bg-stone-600 disabled:opacity-50">
                                    Kaydet
                                </button>
                                <button type="button" @click="cancelNoteEdit()"
                                    class="px-3 py-1.5 text-sm font-semibold rounded-lg bg-stone-200 text-stone-700 hover:bg-stone-300">
                                    Vazgeç
                                </button>
                                <span class="ml-auto text-xs text-stone-400">Ctrl+Enter: kaydet · Esc:
                                    vazgeç</span>
                            </div>
                        </div>
                    </div>
                    @empty
                    @endforelse

                    {{-- YENİ NOT GİRİŞİ — her zaman görünür, eklenmiş notların altında durur --}}
                    <div class="p-2 bg-stone-50 rounded-xl">
                        <div class="flex items-start gap-x-1.5">
                            <textarea x-ref="noteInput" x-model="noteDraft" rows="2"
                                @keydown.enter.exact.prevent="saveNoteLine()" placeholder="Not yazın..."
                                class="flex-1 min-w-0 px-3 py-2 text-sm bg-white border rounded-lg resize-y text-stone-700 border-stone-200 focus:ring-2 focus:ring-stone-300"></textarea>
                            <button type="button" @click="saveNoteLine()" :disabled="savingNote"
                                class="px-3 py-2 text-sm font-semibold border rounded-lg text-stone-800 shrink-0 bg-stone-100 hover:bg-stone-200 border-stone-200 disabled:opacity-50">
                                Not ekle
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- İLGİLİ E-POSTALAR --}}
            <div class="grid gap-y-1.5">
                <div class="flex items-center justify-between">
                    <label class="text-xs font-semibold uppercase text-stone-400">
                        İlgili E-postalar
                        <span class="ml-1 text-stone-300">({{ $active_task->linkedGmailMessages->count() }})</span>
                    </label>
                    <button type="button" @click="linkEmailOpen = true"
                        class="inline-flex items-center gap-1 px-2.5 py-1.5 text-sm font-medium rounded-lg bg-stone-100 text-stone-700 hover:bg-stone-200">
                        <span class="text-lg material-symbols-rounded">mail</span>
                        E-posta bağla
                    </button>
                </div>

                <div class="border divide-y divide-stone-100 rounded-xl border-stone-200">
                    @forelse ($active_task->linkedGmailMessages as $msg)
                    <div class="flex items-center justify-between px-3 py-2" wire:key="linked-msg-{{ $msg->id }}">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="text-sm material-symbols-rounded text-stone-400">mail</span>
                                <span class="text-sm font-medium truncate text-stone-700">{{ $msg->from_name ?:
                                    $msg->from_email ?: 'Gmail' }}</span>
                                @if ($msg->received_at)
                                <span class="text-xs text-stone-400">{{ $msg->received_at->format('d.m.Y H:i') }}</span>
                                @endif
                            </div>
                            <p class="mt-0.5 text-xs truncate text-stone-500">
                                {{ $msg->subject ?: '(konu yok)' }}</p>
                        </div>
                        <button type="button" wire:click="unlinkEmailFromTask({{ $msg->id }})"
                            wire:confirm="Bu e-posta bağlantısı kaldırılsın mı?" wire:loading.attr="disabled"
                            wire:loading.class="opacity-50" wire:target="unlinkEmailFromTask({{ $msg->id }})"
                            class="p-1.5 rounded-md text-stone-400 hover:bg-rose-50 hover:text-rose-600"
                            title="Bağlantıyı kaldır">
                            <span class="text-base material-symbols-rounded">link_off</span>
                        </button>
                    </div>
                    @empty
                    <div class="px-3 py-3 text-sm text-stone-400">
                        Bu görevle ilgili e-posta yok.
                    </div>
                    @endforelse

                    <div x-show="linkEmailOpen" x-cloak x-transition class="p-2 bg-stone-50">
                        <input type="text" x-model="linkEmailSearch" placeholder="E-posta ara (gönderen, konu)..."
                            class="w-full px-3 py-2 text-sm bg-white border rounded-lg text-stone-700 border-stone-200 focus:ring-2 focus:ring-stone-300">
                        <div class="mt-2 overflow-y-auto max-h-40">
                            @foreach ($linkable_messages as $lm)
                            <div x-show="!linkEmailSearch || '{{ strtolower($lm['from']) }}'.includes(linkEmailSearch.toLowerCase()) || '{{ strtolower($lm['subject']) }}'.includes(linkEmailSearch.toLowerCase())"
                                @click="linkEmail({{ $lm['id'] }})"
                                class="flex items-center gap-2 px-3 py-2 text-sm rounded-lg cursor-pointer hover:bg-stone-200 text-stone-700">
                                <span class="text-base material-symbols-rounded text-stone-400">mail</span>
                                <div class="flex-1 min-w-0">
                                    <span class="truncate">{{ $lm['from'] }}</span>
                                    <span class="block text-xs truncate text-stone-400">{{ $lm['subject'] }}</span>
                                </div>
                                <span class="text-xs text-stone-400">{{ $lm['date'] }}</span>
                            </div>
                            @endforeach
                        </div>
                        <div class="flex items-center gap-x-1.5 mt-2">
                            <button type="button" @click="linkEmailOpen = false; linkEmailSearch = ''"
                                class="px-3 py-1.5 text-sm font-semibold rounded-lg bg-stone-200 text-stone-700 hover:bg-stone-300">
                                Kapat
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- İLGİLİ FATURALAR --}}
            <div class="grid gap-y-1.5">
                <div class="flex items-center justify-between">
                    <label class="text-xs font-semibold uppercase text-stone-400">
                        İlgili Faturalar
                        <span class="ml-1 text-stone-300">({{ $active_task->invoices->count() }})</span>
                    </label>
                    <button type="button" @click="linkInvoiceOpen = true"
                        class="inline-flex items-center gap-1 px-2.5 py-1.5 text-sm font-medium rounded-lg bg-stone-100 text-stone-700 hover:bg-stone-200">
                        <span class="text-lg material-symbols-rounded">receipt_long</span>
                        Fatura bağla
                    </button>
                </div>

                <div class="border divide-y divide-stone-100 rounded-xl border-stone-200">
                    @forelse ($active_task->invoices as $inv)
                    <div class="flex items-center justify-between px-3 py-2" wire:key="linked-inv-{{ $inv->id }}">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="text-sm material-symbols-rounded text-stone-400">receipt_long</span>
                                <span class="text-sm font-medium truncate text-stone-700">{{ $inv->number ?: '#' .
                                    $inv->id }}</span>
                                @if ($inv->date)
                                <span class="text-xs text-stone-400">{{
                                    \Carbon\Carbon::parse($inv->date)->format('d.m.Y') }}</span>
                                @endif
                            </div>
                            <p class="mt-0.5 text-xs truncate text-stone-500">
                                {{ $inv->company?->name ?? 'Firma yok' }} ·
                                {{ str_starts_with($inv->type, 'sales') ? 'Satış' : 'Alış' }} ·
                                {{ $inv->currency != 'TRL' ? $inv->ex_amount : $inv->total_amount }}
                                {{ $inv->currency }}
                            </p>
                        </div>
                        <button type="button" wire:click="unlinkInvoiceFromTask({{ $inv->id }}, {{ $active_task->id }})"
                            wire:confirm="Bu fatura bağlantısı kaldırılsın mı?" wire:loading.attr="disabled"
                            wire:loading.class="opacity-50"
                            wire:target="unlinkInvoiceFromTask({{ $inv->id }}, {{ $active_task->id }})"
                            class="p-1.5 rounded-md text-stone-400 hover:bg-rose-50 hover:text-rose-600"
                            title="Bağlantıyı kaldır">
                            <span class="text-base material-symbols-rounded">link_off</span>
                        </button>
                    </div>
                    @empty
                    <div class="px-3 py-3 text-sm text-stone-400">
                        Bu görevle ilgili fatura yok.
                    </div>
                    @endforelse

                    <div x-show="linkInvoiceOpen" x-cloak x-transition class="p-2 bg-stone-50">
                        <input type="text" x-model="linkInvoiceSearch" placeholder="Fatura ara (numara, firma)..."
                            class="w-full px-3 py-2 text-sm bg-white border rounded-lg text-stone-700 border-stone-200 focus:ring-2 focus:ring-stone-300">
                        <div class="mt-2 overflow-y-auto max-h-40">
                            @foreach ($linkable_invoices as $li)
                            <div x-show="!linkInvoiceSearch || '{{ strtolower($li['number']) }}'.includes(linkInvoiceSearch.toLowerCase()) || '{{ strtolower($li['company']) }}'.includes(linkInvoiceSearch.toLowerCase())"
                                @click="{{ $li['linked'] ? 'unlinkInvoice(' . $li['id'] . ')' : 'linkInvoice(' . $li['id'] . ')' }}"
                                class="flex items-center gap-2 px-3 py-2 text-sm rounded-lg cursor-pointer hover:bg-stone-200 text-stone-700">
                                <span class="text-base material-symbols-rounded text-stone-400">receipt_long</span>
                                <div class="flex-1 min-w-0">
                                    <span class="truncate">{{ $li['number'] }}</span>
                                    <span class="block text-xs truncate text-stone-400">{{ $li['company'] }}</span>
                                </div>
                                @if ($li['linked'])
                                <span class="inline-flex items-center gap-1 text-xs font-medium text-teal-600">
                                    <span class="text-base material-symbols-rounded">check_circle</span>
                                    Bağlı
                                </span>
                                @else
                                <span class="text-xs text-stone-400">{{ $li['amount'] }}</span>
                                @endif
                            </div>
                            @endforeach
                        </div>
                        <div class="flex items-center gap-x-1.5 mt-2">
                            <button type="button" @click="linkInvoiceOpen = false; linkInvoiceSearch = ''"
                                class="px-3 py-1.5 text-sm font-semibold rounded-lg bg-stone-200 text-stone-700 hover:bg-stone-300">
                                Kapat
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endif