@php
    // Client-side arama için her notun aranabilir metnini oluştur
    $searchHaystack = fn($note) => trim(
        ($note->title ?? '') .
            ' ' .
            strip_tags($note->content ?? '') .
            ' ' .
            $note->companies->pluck('name')->implode(' ') .
            ' ' .
            $note->labels->pluck('name')->implode(' '),
    );
    $pinnedNotes = $this->filteredNotes->where('is_pinned', true);
    $otherNotes = $this->filteredNotes->where('is_pinned', false);
@endphp
<div class="grid grid-cols-1 gap-4 px-0 md:px-6" x-data="{
    search: '',
    panels: { primary: 'closed', secondary: 'closed' },
    openNote(noteId) {
        // Boş panel varsa onu kullan; yoksa görünür (açık) paneli değiştir.
        // Küçültülmüş notlara asla dokunma.
        let panel;
        if (this.panels.primary === 'closed') panel = 'primary';
        else if (this.panels.secondary === 'closed') panel = 'secondary';
        else if (this.panels.primary === 'open') panel = 'primary';
        else if (this.panels.secondary === 'open') panel = 'secondary';
        else panel = 'primary';
        Livewire.dispatch('openNoteModal', { noteId: noteId, panel: panel });
    },
    normalize(t) {
        return (t ?? '').toLocaleLowerCase('tr-TR')
            .replaceAll('ı', 'i').replaceAll('ğ', 'g').replaceAll('ü', 'u')
            .replaceAll('ş', 's').replaceAll('ö', 'o').replaceAll('ç', 'c');
    },
    matches(haystack) {
        if (this.search.trim().length < 3) return true;
        return this.normalize(haystack).includes(this.normalize(this.search));
    },
    anyMatch(list) {
        return list.some(h => this.matches(h));
    }
}"
    x-on:note-panel-state.window="panels[$event.detail.panel] = $event.detail.state">
    <!-- Note Modal Components (yan yana çalışma için iki panel) -->
    @livewire('note-modal', ['panel' => 'primary'], key('note-modal-primary'))
    @livewire('note-modal', ['panel' => 'secondary'], key('note-modal-secondary'))

    <!-- LOADING -->
    <div wire:loading class="fixed z-50 flex items-center ml-3 top-6 right-6">
        <svg class="w-6 h-6 text-stone-400 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
            </circle>
            <path class="opacity-75" fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
            </path>
        </svg>
    </div>

    {{-- TOAST NOTIFICATIONS --}}
    <div class="fixed z-40 space-y-3 pointer-events-none top-4 right-12">
        @if (session()->has('success'))
            <div x-data="{ show: true }" x-show="show" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0" x-init="setTimeout(() => show = false, 3000)"
                class="p-3 border border-teal-200 rounded-md shadow-lg pointer-events-auto bg-teal-50">
                <div class="flex">
                    <div class="shrink-0">
                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                            class="text-teal-400 size-5">
                            <path
                                d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0 1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-teal-800">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif
        @if (session()->has('info'))
            <div x-data="{ show: true }" x-show="show" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0" x-init="setTimeout(() => show = false, 3000)"
                class="p-3 border rounded-md shadow-lg pointer-events-auto border-sky-200 bg-sky-50">
                <div class="flex">
                    <div class="shrink-0">
                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                            class="size-5 text-sky-400">
                            <path
                                d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
                                clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-sky-800">{{ session('info') }}</p>
                    </div>
                </div>
            </div>
        @endif
        @if (session()->has('error'))
            <div x-data="{ show: true }" x-show="show" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0" x-init="setTimeout(() => show = false, 3000)"
                class="p-3 border rounded-md shadow-lg pointer-events-auto border-rose-200 bg-rose-50">
                <div class="flex">
                    <div class="shrink-0">
                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                            class="size-5 text-rose-400">
                            <path
                                d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
                                clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-rose-800">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <div class="py-24 mt-4">
        <h1 class="text-5xl font-bold tracking-tight text-center gabarito-500 text-stone-400">Not alın. Düzenleyin.
            Paylaşın.</h1>
    </div>

    {{-- ARAMA --}}
    <div class="w-full">
        <div class="flex items-center w-full gap-2 pt-4 pb-2 text-stone-400">
            <span class="material-symbols-rounded">search</span>
            Arama
        </div>
        <div class="flex w-full mt-2 gap-x-4">
            <div
                class="relative flex w-full bg-white rounded-md outline outline-1 -outline-offset-1 outline-stone-500 focus-within:outline focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-stone-600 active:outline active:outline-2 active:-outline-offset-2 active:outline-stone-600">
                <input x-model="search" type="text" name="search"
                    class="block w-full px-3 py-3 text-xl border-none rounded-md bg-stone-50 text-stone-900 md:min-w-96 grow sm:text-sm/6"
                    x-ref="searchInput"
                    @keydown.ctrl.k.window.prevent="$refs.searchInput.focus(); $refs.searchInput.select()"
                    @keydown.escape="search = ''; $el.blur()" />
                <button x-show="search.length > 0" x-cloak @click="search = ''"
                    class="absolute transition -translate-y-1/2 right-20 top-6 text-stone-400 hover:text-stone-600">
                    <span class="text-lg material-symbols-rounded">close</span>
                </button>
                <div class="flex py-1.5 pr-1.5 bg-stone-50">
                    <kbd
                        class="inline-flex items-center px-2 font-sans text-xs bg-white border rounded text-stone-400 border-stone-200">Ctrl+K</kbd>
                </div>
            </div>
        </div>
        {{-- ETİKET LİSTESİ --}}
        @if ($this->searchLabels->count() > 0)
            <div class="flex flex-wrap gap-2.5 mt-4">
                @foreach ($this->searchLabels as $label)
                    <button type="button" x-show="matches(@js($label->name))"
                        @click="search = @js($label->name)"
                        class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium transition-colors rounded-md bg-stone-100 border border-stone-200 text-stone-600 hover:bg-stone-200">
                        <span class="text-xs material-symbols-rounded">label</span>
                        {{ $label->name }}
                    </button>
                @endforeach
            </div>
        @endif
    </div>

    {{-- SABİTLENEN NOTLAR --}}
    @if ($pinnedNotes->count() > 0)
        <div x-show="anyMatch(@js($pinnedNotes->map($searchHaystack)->values()->all()))" class="flex items-center gap-2 pt-4 text-stone-400">
            <span class="material-symbols-rounded">push_pin</span>
            Sabitlenen Notlar
        </div>
        <div x-show="anyMatch(@js($pinnedNotes->map($searchHaystack)->values()->all()))" class="flex p-1 overflow-x-hidden gap-x-4">
            <div class="w-auto max-w-full gap-4 columns-1 md:columns-2 lg:columns-3 2xl:columns-4 5xl:columns-5">
                @foreach ($pinnedNotes as $note)
                    <div data-search="{{ $searchHaystack($note) }}" x-show="matches($el.dataset.search)"
                        class="relative note-item transition-all p-3 bg-{{ $note->color }}-100 border-b border-{{ $note->color }}-300 hover:border-opacity-0 text-sm rounded-t-2xl gap-4 break-inside-avoid-column mb-4 transition-all hover:ring-2 hover:ring-{{ $note->color }}-400">
                        <!-- Not içeriği -->
                        <div class="grid gap-1 overflow-hidden text-nowrap text-ellipsis text-stone-800">
                            <div class="flex items-center justify-between gap-2">
                                <div class="text-base font-bold leading-6 tracking-tight cursor-pointer"
                                    @click="openNote({{ $note->id }})">
                                    {{ $note->title }}
                                </div>
                                @if ($note->is_pinned)
                                    <span
                                        class="flex-shrink-0 text-xl material-symbols-rounded icon-filled text-{{ $note->color }}-600">push_pin</span>
                                @endif
                            </div>
                            <div class="line-content" style="max-height: 600px; overflow-y: auto;"
                                onclick="event.stopPropagation()">
                                @foreach (explode("\n", e(strip_tags($note->content))) as $line)
                                    <div class="{{ trim($line) === '' ? 'mb-3' : '' }} line-item overflow-hidden tracking-tight text-sm text-ellipsis cursor-pointer hover:bg-{{ $note->color }}-200/50 rounded flex justify-between items-center group"
                                        onclick="copyToClipboard({{ json_encode(trim($line)) }}); event.stopPropagation();">
                                        <span class="flex-grow">{{ $line }}</span>
                                        @if (trim($line) !== '')
                                            <span
                                                class="opacity-0 group-hover:opacity-100 pr-0.5 text-{{ $note->color }}-400 transition-opacity material-symbols-rounded text-sm">content_copy</span>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            <div class="flex flex-wrap gap-1 mt-2">
                                @foreach ($note->companies as $company)
                                    <span
                                        class="inline-flex items-center gap-0.5 rounded-md bg-{{ $note->color }}-200/80 px-2 py-1 text-xs font-medium text-{{ $note->color }}-500"
                                        wire:click.stop>
                                        <span class="text-xs material-symbols-rounded">
                                            store
                                        </span>
                                        {{ $company->name }}
                                        <button type="button"
                                            wire:click.stop="removeCompanyFromNote({{ $note->id }}, {{ $company->id }})"
                                            class="group relative -mr-1 size-3.5 rounded-xs hover:bg-{{ $note->color }}-500/20 transition">
                                            <span class="sr-only">Remove</span>
                                            <svg viewBox="0 0 14 14"
                                                class="size-3.5 stroke-{{ $note->color }}-700/50 group-hover:stroke-{{ $note->color }}-700/75">
                                                <path d="M4 4l6 6m0-6l-6 6" />
                                            </svg>
                                            <span class="absolute -inset-1"></span>
                                        </button>
                                    </span>
                                @endforeach
                                @foreach ($note->labels as $label)
                                    <span
                                        class="inline-flex items-center gap-0.5 rounded-md bg-{{ $note->color }}-200/80 px-2 py-1 text-xs font-medium text-{{ $note->color }}-500"
                                        wire:click.stop>
                                        <span class="text-xs material-symbols-rounded">
                                            label
                                        </span>
                                        {{ $label->name }}
                                        <button type="button"
                                            wire:click.stop="removeLabelFromNote({{ $note->id }}, {{ $label->id }})"
                                            class="group relative -mr-1 size-3.5 rounded-xs hover:bg-{{ $note->color }}-500/20 transition">
                                            <span class="sr-only">Remove</span>
                                            <svg viewBox="0 0 14 14"
                                                class="size-3.5 stroke-{{ $note->color }}-700/50 group-hover:stroke-{{ $note->color }}-700/75">
                                                <path d="M4 4l6 6m0-6l-6 6" />
                                            </svg>
                                            <span class="absolute -inset-1"></span>
                                        </button>
                                    </span>
                                @endforeach
                            </div>
                        </div>
                        <div class="flex justify-end text-stone-500">
                            <div class="flex gap-1">
                                <button wire:click.stop="deleteNote({{ $note->id }})"
                                    wire:confirm="Emin misiniz?"
                                    class="w-8 h-8 transition-all hover:bg-{{ $note->color }}-200/60 rounded-lg p-0.5 text-{{ $note->color }}-400 hover:text-{{ $note->color }}-600">
                                    <span class="text-base material-symbols-rounded">
                                        delete
                                    </span>
                                </button>
                                <button wire:click.stop="pinNote({{ $note->id }})"
                                    class="w-8 h-8 transition-all hover:bg-{{ $note->color }}-200/60 rounded-lg p-0.5 text-{{ $note->color }}-400 hover:text-{{ $note->color }}-600">
                                    <span class="text-base material-symbols-rounded">
                                        @if ($note->is_pinned)
                                            keep_off
                                        @else
                                            keep
                                        @endif
                                    </span>
                                </button>
                                <button
                                    onclick="event.stopPropagation(); copyToClipboard({{ json_encode(strip_tags($note->content)) }});"
                                    class="w-8 h-8 transition-all hover:bg-{{ $note->color }}-200/60 rounded-lg p-0.5 text-{{ $note->color }}-400 hover:text-{{ $note->color }}-600">
                                    <span class="text-base material-symbols-rounded">
                                        content_copy
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- DİĞER NOTLAR --}}
    @if ($otherNotes->count() > 0)
        <div x-show="anyMatch(@js($otherNotes->map($searchHaystack)->values()->all()))" class="flex items-center gap-2 pt-4 text-stone-400">
            <span class="material-symbols-rounded">note_stack</span>
            Diğer Notlar
        </div>
        <div x-show="anyMatch(@js($otherNotes->map($searchHaystack)->values()->all()))" class="flex p-1 overflow-x-hidden pb-36 gap-x-4">
            <div class="w-auto max-w-full gap-4 columns-1 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5">
                @foreach ($otherNotes as $note)
                    <div data-search="{{ $searchHaystack($note) }}" x-show="matches($el.dataset.search)"
                        class="relative note-item transition-all p-3 bg-{{ $note->color }}-100 border-b border-{{ $note->color }}-300 hover:border-opacity-0 text-sm rounded-t-2xl gap-4 break-inside-avoid-column mb-4 transition-all hover:ring-2 hover:ring-{{ $note->color }}-400">
                        <!-- Not içeriği -->
                        <div class="grid gap-1 overflow-hidden text-nowrap text-ellipsis text-stone-800">
                            <div class="flex items-center justify-between gap-2">
                                <div class="text-base font-bold leading-6 tracking-tight cursor-pointer"
                                    @click="openNote({{ $note->id }})">
                                    {{ $note->title }}
                                </div>
                                @if ($note->is_pinned)
                                    <span
                                        class="flex-shrink-0 text-xl material-symbols-rounded icon-filled text-{{ $note->color }}-600">push_pin</span>
                                @endif
                            </div>
                            <div class="line-content" style="max-height: 600px; overflow-y: auto;"
                                onclick="event.stopPropagation()">
                                @foreach (explode("\n", e(strip_tags($note->content))) as $line)
                                    <div class="{{ trim($line) === '' ? 'mb-3' : '' }} line-item overflow-hidden tracking-tight text-sm text-ellipsis cursor-pointer hover:bg-{{ $note->color }}-200/50 rounded flex justify-between items-center group"
                                        onclick="copyToClipboard({{ json_encode(trim($line)) }}); event.stopPropagation();">
                                        <span class="flex-grow">{{ $line }}</span>
                                        @if (trim($line) !== '')
                                            <span
                                                class="opacity-0 group-hover:opacity-100 pr-0.5 text-{{ $note->color }}-400 transition-opacity material-symbols-rounded text-sm">content_copy</span>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            <div class="flex flex-wrap gap-1 mt-2">
                                @foreach ($note->companies as $company)
                                    <span
                                        class="inline-flex items-center gap-0.5 rounded-md bg-{{ $note->color }}-200/80 px-2 py-1 text-xs font-medium text-{{ $note->color }}-500"
                                        wire:click.stop>
                                        <span class="text-xs material-symbols-rounded">
                                            store
                                        </span>
                                        {{ $company->name }}
                                        <button type="button"
                                            wire:click.stop="removeCompanyFromNote({{ $note->id }}, {{ $company->id }})"
                                            class="group relative -mr-1 size-3.5 rounded-xs hover:bg-{{ $note->color }}-500/20 transition">
                                            <span class="sr-only">Remove</span>
                                            <svg viewBox="0 0 14 14"
                                                class="size-3.5 stroke-{{ $note->color }}-700/50 group-hover:stroke-{{ $note->color }}-700/75">
                                                <path d="M4 4l6 6m0-6l-6 6" />
                                            </svg>
                                            <span class="absolute -inset-1"></span>
                                        </button>
                                    </span>
                                @endforeach
                                @foreach ($note->labels as $label)
                                    <span
                                        class="inline-flex items-center gap-0.5 rounded-md bg-{{ $note->color }}-200/80 px-2 py-1 text-xs font-medium text-{{ $note->color }}-500"
                                        wire:click.stop>
                                        <span class="text-xs material-symbols-rounded">
                                            label
                                        </span>
                                        {{ $label->name }}
                                        <button type="button"
                                            wire:click.stop="removeLabelFromNote({{ $note->id }}, {{ $label->id }})"
                                            class="group relative -mr-1 size-3.5 rounded-xs hover:bg-{{ $note->color }}-500/20 transition">
                                            <span class="sr-only">Remove</span>
                                            <svg viewBox="0 0 14 14"
                                                class="size-3.5 stroke-{{ $note->color }}-700/50 group-hover:stroke-{{ $note->color }}-700/75">
                                                <path d="M4 4l6 6m0-6l-6 6" />
                                            </svg>
                                            <span class="absolute -inset-1"></span>
                                        </button>
                                    </span>
                                @endforeach
                            </div>
                        </div>
                        <div class="flex justify-end text-stone-500">
                            <div class="flex gap-1">
                                <button wire:click.stop="deleteNote({{ $note->id }})"
                                    wire:confirm="Emin misiniz?"
                                    class="w-8 h-8 transition-all hover:bg-{{ $note->color }}-200/60 rounded-lg p-0.5 text-{{ $note->color }}-400 hover:text-{{ $note->color }}-600">
                                    <span class="text-base material-symbols-rounded">
                                        delete
                                    </span>
                                </button>
                                <button wire:click.stop="pinNote({{ $note->id }})"
                                    class="w-8 h-8 transition-all hover:bg-{{ $note->color }}-200/60 rounded-lg p-0.5 text-{{ $note->color }}-400 hover:text-{{ $note->color }}-600">
                                    <span class="text-base material-symbols-rounded">
                                        @if ($note->is_pinned)
                                            keep_off
                                        @else
                                            keep
                                        @endif
                                    </span>
                                </button>
                                <button
                                    onclick="event.stopPropagation(); copyToClipboard({{ json_encode(strip_tags($note->content)) }});"
                                    class="w-8 h-8 transition-all hover:bg-{{ $note->color }}-200/60 rounded-lg p-0.5 text-{{ $note->color }}-400 hover:text-{{ $note->color }}-600">
                                    <span class="text-base material-symbols-rounded">
                                        content_copy
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>