{{--<div>--}}
{{--    <x-slot name="header">--}}
{{--        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">--}}
{{--            دفترچه یادداشت شخصی--}}
{{--        </h2>--}}
{{--    </x-slot>--}}

{{--    <div class="py-12">--}}
{{--        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">--}}

{{--            @if (session()->has('message'))--}}
{{--                <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg mb-6" role="alert">--}}
{{--                    <p>{{ session('message') }}</p>--}}
{{--                </div>--}}
{{--            @endif--}}

{{--            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">--}}
{{--                <div class="p-6">--}}
{{--                    <div class="flex justify-between items-center mb-6">--}}
{{--                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">یادداشت‌های شما</h3>--}}
{{--                        <x-button wire:click="confirmNoteAction">--}}
{{--                            <x-lucide-plus class="w-4 h-4 me-2"/>--}}
{{--                            ایجاد یادداشت جدید--}}
{{--                        </x-button>--}}
{{--                    </div>--}}

{{--                    <div class="space-y-4">--}}
{{--                        @forelse($notes as $note)--}}
{{--                            <div class="bg-gray-50 dark:bg-gray-900/50 p-4 rounded-lg border dark:border-gray-700">--}}
{{--                                <div class="flex justify-between items-start">--}}
{{--                                    <div>--}}
{{--                                        <h4 class="font-bold text-gray-800 dark:text-white">{{ $note->title }}</h4>--}}
{{--                                        <p class="text-xs text-gray-500 dark:text-gray-400 font-mono">{{ $note->note_code }}</p>--}}
{{--                                    </div>--}}
{{--                                    <div class="flex items-center space-x-2 space-x-reverse">--}}
{{--                                        <button wire:click="confirmNoteAction({{ $note->id }})" class="text-indigo-500 hover:text-indigo-700" title="ویرایش">--}}
{{--                                            <x-lucide-file-pen-line class="w-5 h-5"/>--}}
{{--                                        </button>--}}
{{--                                        <button wire:click="confirmNoteDeletion({{ $note->id }})" class="text-red-500 hover:text-red-700" title="حذف">--}}
{{--                                            <x-lucide-trash-2 class="w-5 h-5"/>--}}
{{--                                        </button>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        @empty--}}
{{--                            <div class="text-center py-12 text-gray-500 dark:text-gray-400">--}}
{{--                                <x-lucide-file-text class="w-12 h-12 mx-auto mb-4"/>--}}
{{--                                <p>هنوز هیچ یادداشتی ثبت نکرده‌اید.</p>--}}
{{--                            </div>--}}
{{--                        @endforelse--}}
{{--                    </div>--}}

{{--                    @if($notes->hasPages())--}}
{{--                        <div class="mt-6">--}}
{{--                            {{ $notes->links() }}--}}
{{--                        </div>--}}
{{--                    @endif--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <!-- Create/Edit Note Modal -->--}}
{{--    <x-dialog-modal wire:model.live="confirmingNoteAction" maxWidth="2xl">--}}
{{--        <x-slot name="title">--}}
{{--            {{ $editingNote ? 'ویرایش یادداشت' : 'ایجاد یادداشت جدید' }}--}}
{{--        </x-slot>--}}

{{--        <x-slot name="content">--}}
{{--            <div class="space-y-4">--}}
{{--                <div>--}}
{{--                    <x-label for="title" value="عنوان" />--}}
{{--                    <x-input id="title" type="text" class="mt-1 block w-full" wire:model.defer="state.title" />--}}
{{--                    <x-input-error for="state.title" class="mt-2" />--}}
{{--                </div>--}}

{{--                <div wire:ignore x-data="{--}}
{{--                    editor: null,--}}
{{--                    initEditor(content) {--}}
{{--                        if (typeof Jodit === 'undefined') return;--}}
{{--                        if (this.editor) this.editor.destruct();--}}
{{--                        this.editor = Jodit.make(this.$refs.editor, {--}}
{{--                            direction: 'rtl',--}}
{{--                            language: 'fa',--}}
{{--                            height: 350,--}}
{{--                        });--}}
{{--                        this.editor.value = content;--}}
{{--                        this.editor.events.on('change', (newValue) => {--}}
{{--                            @this.set('state.body', newValue);--}}
{{--                        });--}}
{{--                    }--}}
{{--                }"--}}
{{--                     x-init="initEditor($wire.get('state.body') || '')"--}}
{{--                     @init-editor.window="initEditor($event.detail.content)"--}}
{{--                >--}}
{{--                    <x-label for="body" value="متن یادداشت" />--}}
{{--                    <textarea x-ref="editor" id="body" class="mt-1 block w-full"></textarea>--}}
{{--                    <x-input-error for="state.body" class="mt-2" />--}}
{{--                </div>--}}

{{--                <div>--}}
{{--                    <x-label for="attachment" value="افزودن پیوست" />--}}
{{--                    <input type="file" id="attachment" wire:model="attachment" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"/>--}}
{{--                    <div wire:loading wire:target="attachment" class="mt-2 text-sm text-gray-500">در حال آپلود...</div>--}}
{{--                    <x-input-error for="attachment" class="mt-2" />--}}
{{--                </div>--}}

{{--                @if($editingNote && $editingNote->attachments->isNotEmpty())--}}
{{--                    <div>--}}
{{--                        <x-label value="فایل‌های پیوست شده" />--}}
{{--                        <ul class="mt-2 space-y-2">--}}
{{--                            @foreach($editingNote->attachments as $att)--}}
{{--                                <li class="flex items-center justify-between p-2 bg-gray-100 dark:bg-gray-700 rounded-md">--}}
{{--                                    <a href="{{ Storage::url($att->file_path) }}" target="_blank" class="text-sm font-medium text-blue-600 hover:underline">--}}
{{--                                        {{ $att->file_name }}--}}
{{--                                    </a>--}}
{{--                                    <button wire:click="removeAttachment({{ $att->id }})" class="text-xs text-red-500 hover:underline">حذف</button>--}}
{{--                                </li>--}}
{{--                            @endforeach--}}
{{--                        </ul>--}}
{{--                    </div>--}}
{{--                @endif--}}

{{--            </div>--}}
{{--        </x-slot>--}}

{{--        <x-slot name="footer">--}}
{{--            <x-secondary-button wire:click="$set('confirmingNoteAction', false)">انصراف</x-secondary-button>--}}
{{--            <x-button class="ms-3" wire:click="saveNote">ذخیره یادداشت</x-button>--}}
{{--        </x-slot>--}}
{{--    </x-dialog-modal>--}}

{{--    <!-- Delete Note Confirmation Modal -->--}}
{{--    <x-confirmation-modal wire:model.live="confirmingNoteDeletion">--}}
{{--        <x-slot name="title">--}}
{{--            حذف یادداشت--}}
{{--        </x-slot>--}}
{{--        <x-slot name="content">--}}
{{--            آیا از حذف یادداشت "{{ $noteToDelete?->title }}" مطمئن هستید؟ این عملیات غیرقابل بازگشت است.--}}
{{--        </x-slot>--}}
{{--        <x-slot name="footer">--}}
{{--            <x-secondary-button wire:click="$set('confirmingNoteDeletion', false)">انصراف</x-secondary-button>--}}
{{--            <x-danger-button class="ms-3" wire:click="deleteNote">--}}
{{--                بله، حذف کن--}}
{{--            </x-danger-button>--}}
{{--        </x-slot>--}}
{{--    </x-confirmation-modal>--}}

{{--</div>--}}
<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            دفترچه یادداشت شخصی
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            @if (session()->has('message'))
                <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg mb-6" role="alert">
                    <p>{{ session('message') }}</p>
                </div>
            @endif

            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">یادداشت‌های شما</h3>
                        <a href="{{ route('personal-notebook.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:ring focus:ring-blue-300 disabled:opacity-25 transition">
                            <x-lucide-plus class="w-4 h-4 me-2"/>
                            ایجاد یادداشت جدید
                        </a>
                    </div>

                    <div class="space-y-4">
                        @forelse($notes as $note)
                            <div class="bg-gray-50 dark:bg-gray-900/50 p-4 rounded-lg border dark:border-gray-700">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <h4 class="font-bold text-gray-800 dark:text-white">{{ $note->title }}</h4>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 font-mono mt-1">{{ $note->note_code }} - <span class="text-gray-400">آخرین ویرایش: {{ verta($note->updated_at)->formatDifference() }}</span></p>
                                    </div>
                                    <div class="flex items-center space-x-2 space-x-reverse">
                                        <a href="{{ route('personal-notebook.edit', $note) }}" class="text-indigo-500 hover:text-indigo-700" title="ویرایش">
                                            <x-lucide-file-pen-line class="w-5 h-5"/>
                                        </a>
                                        <button wire:click="confirmNoteDeletion({{ $note->id }})" class="text-red-500 hover:text-red-700" title="حذف">
                                            <x-lucide-trash-2 class="w-5 h-5"/>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-12 text-gray-500 dark:text-gray-400">
                                <x-lucide-file-text class="w-12 h-12 mx-auto mb-4"/>
                                <p>هنوز هیچ یادداشتی ثبت نکرده‌اید.</p>
                            </div>
                        @endforelse
                    </div>

                    @if($notes->hasPages())
                        <div class="mt-6">
                            {{ $notes->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Note Confirmation Modal -->
    <x-confirmation-modal wire:model.live="confirmingNoteDeletion">
        <x-slot name="title">
            حذف یادداشت
        </x-slot>
        <x-slot name="content">
            آیا از حذف یادداشت "{{ $noteToDelete?->title }}" مطمئن هستید؟ این عملیات غیرقابل بازگشت است.
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('confirmingNoteDeletion', false)">انصراف</x-secondary-button>
            <x-danger-button class="ms-3" wire:click="deleteNote">
                بله، حذف کن
            </x-danger-button>
        </x-slot>
    </x-confirmation-modal>

</div>