{{--<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">--}}
{{--    <div class="p-6 lg:p-8">--}}
{{--        @if (session()->has('message'))--}}
{{--            <div class="mb-4 p-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">--}}
{{--                {{ session('message') }}--}}
{{--            </div>--}}
{{--        @endif--}}

{{--        <h2 class="text-2xl font-medium text-gray-900 dark:text-white">--}}
{{--            درخواست‌های فعالیت شما--}}
{{--        </h2>--}}

{{--        <div class="mt-6 space-y-4">--}}
{{--            @forelse ($requests as $request)--}}
{{--                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">--}}
{{--                    <div class="text-sm text-gray-700 dark:text-gray-300">--}}
{{--                        <span class="font-bold">{{ $request->requester->first_name }} {{ $request->requester->last_name }}</span>--}}
{{--                        از شما درخواست کرده تا یادداشت--}}
{{--                        <a href="{{ route('entries.edit', $request->labNotebookEntry) }}" class="font-bold text-indigo-600 dark:text-indigo-400 hover:underline">--}}
{{--                            {{ $request->labNotebookEntry->title }} (طرح: {{ $request->labNotebookEntry->project->title }})--}}
{{--                        </a>--}}
{{--                        را--}}
{{--                        <span class="font-bold">"{{ $request->activity_type }}"</span>--}}
{{--                        نمایید.--}}
{{--                    </div>--}}
{{--                    <div class="flex space-x-2 space-x-reverse">--}}
{{--                        @if ($request->activity_type === 'امضا')--}}
{{--                            <x-button wire:click="confirmSignature({{ $request->id }})" class="bg-green-500 hover:bg-green-600">امضا</x-button>--}}
{{--                        @else--}}
{{--                            --}}{{-- در آینده این دکمه‌ها را برای سایر فعالیت‌ها فعال می‌کنیم --}}
{{--                            <x-button class="bg-green-500 hover:bg-green-600">تایید</x-button>--}}
{{--                        @endif--}}

{{--                        <x-secondary-button>رد</x-secondary-button>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            @empty--}}
{{--                <p class="text-center text-gray-500 dark:text-gray-400">--}}
{{--                    در حال حاضر هیچ درخواست فعالیتی برای شما وجود ندارد.--}}
{{--                </p>--}}
{{--            @endforelse--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <!-- Password Confirmation Modal -->--}}
{{--    <x-dialog-modal wire:model.live="confirmingSignature">--}}
{{--        <x-slot name="title">--}}
{{--            {{ __('تایید امضا و قفل کردن یادداشت') }}--}}
{{--        </x-slot>--}}

{{--        <x-slot name="content">--}}
{{--            {{ __('برای تایید هویت و امضای این یادداشت، لطفاً رمز عبور خود را وارد کنید.') }}--}}

{{--            <div class="mt-4" x-data="{}" x-on:confirming-signature.window="setTimeout(() => $refs.password.focus(), 250)">--}}
{{--                <x-input type="password" class="mt-1 block w-3/4"--}}
{{--                         placeholder="{{ __('رمز عبور') }}"--}}
{{--                         x-ref="password"--}}
{{--                         wire:model.defer="password"--}}
{{--                         wire:keydown.enter="signEntry" />--}}

{{--                <x-input-error for="password" class="mt-2" />--}}
{{--            </div>--}}
{{--        </x-slot>--}}

{{--        <x-slot name="footer">--}}
{{--            <x-secondary-button wire:click="$toggle('confirmingSignature')" wire:loading.attr="disabled">--}}
{{--                {{ __('انصراف') }}--}}
{{--            </x-secondary-button>--}}

{{--            <x-button class="ms-3" wire:click="signEntry" wire:loading.attr="disabled">--}}
{{--                {{ __('امضا و قفل کردن') }}--}}
{{--            </x-button>--}}
{{--        </x-slot>--}}
{{--    </x-dialog-modal>--}}
{{--</div>--}}
<div>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border-t-4 border-blue-600">
        <div class="p-6 sm:p-8">
            {{-- هدر ویجت --}}
            <div class="flex items-center mb-6">
                <x-lucide-bell-ring class="h-7 w-7 text-blue-600 dark:text-blue-400" />
                <h2 class="mr-3 text-xl font-semibold text-gray-900 dark:text-white">
                    درخواست‌های فعالیت شما
                </h2>
            </div>

            {{-- نمایش پیام‌های سیستم --}}
            @if (session()->has('message'))
                <div class="mb-4 p-4 text-sm text-green-800 bg-green-100 rounded-lg dark:bg-green-900 dark:text-green-300" role="alert">
                    {{ session('message') }}
                </div>
            @endif

            {{-- لیست درخواست‌ها --}}
            <div class="space-y-4">
                @forelse ($requests as $request)
                    <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700 p-4 transition-shadow hover:shadow-md">
                        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                            {{-- متن درخواست --}}
                            <div class="flex-grow text-sm text-gray-700 dark:text-gray-300">
                                <span class="font-semibold text-gray-900 dark:text-white">{{ $request->requester->first_name }} {{ $request->requester->last_name }}</span>
                                از شما درخواست کرده تا یادداشت
                                <a href="{{ route('entries.edit', $request->labNotebookEntry) }}" class="font-semibold text-blue-600 dark:text-blue-400 hover:underline">
                                    "{{ $request->labNotebookEntry->title }}"
                                </a>
                                را
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">"{{ $request->activity_type }}"</span>
                                نمایید.
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                                    مربوط به طرح: {{ $request->labNotebookEntry->project->title }}
                                </p>
                            </div>

                            {{-- دکمه‌های عملیات --}}
                            <div class="flex space-x-2 space-x-reverse flex-shrink-0 w-full md:w-auto">
                                @if ($request->activity_type === 'امضا')
                                    <x-button wire:click="confirmSignature({{ $request->id }})" class="w-full justify-center sm:w-auto bg-teal-600 hover:bg-teal-700">
                                        <x-lucide-pen-square class="w-4 h-4 ml-2" />
                                        امضا
                                    </x-button>
                                @else
                                    <x-button class="w-full justify-center sm:w-auto bg-green-600 hover:bg-green-700">
                                        <x-lucide-check class="w-4 h-4 ml-2" />
                                        تایید
                                    </x-button>
                                @endif

                                <x-secondary-button class="w-full justify-center sm:w-auto">
                                    <x-lucide-x class="w-4 h-4 ml-2" />
                                    رد
                                </x-secondary-button>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-12 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg">
                        <x-lucide-check-circle-2 class="mx-auto h-12 w-12 text-gray-400" />
                        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">هیچ درخواستی وجود ندارد</h3>
                        <p class="mt-1 text-sm text-gray-500">در حال حاضر هیچ درخواست فعالیتی برای شما ثبت نشده است.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Password Confirmation Modal -->
    <x-dialog-modal wire:model.live="confirmingSignature">
        <x-slot name="title">
            <div class="flex items-center text-gray-900 dark:text-white">
                <x-lucide-key-round class="w-6 h-6 ml-2 text-teal-500"/>
                <span class="text-lg font-bold">تایید امضا و قفل کردن یادداشت</span>
            </div>
        </x-slot>

        <x-slot name="content">
            <p class="text-sm text-gray-600 dark:text-gray-300">
                برای تایید هویت و امضای این یادداشت، لطفاً رمز عبور خود را وارد کنید. پس از امضا، یادداشت قفل خواهد شد.
            </p>

            <div class="mt-4" x-data="{}" x-on:confirming-signature.window="setTimeout(() => $refs.password.focus(), 250)">
                <x-input type="password" class="mt-1 block w-full"
                         placeholder="{{ __('رمز عبور') }}"
                         x-ref="password"
                         wire:model.defer="password"
                         wire:keydown.enter="signEntry" />

                <x-input-error for="password" class="mt-2" />
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$toggle('confirmingSignature')" wire:loading.attr="disabled">
                {{ __('انصراف') }}
            </x-secondary-button>

            <x-button class="ms-3 bg-teal-600 hover:bg-teal-700" wire:click="signEntry" wire:loading.attr="disabled">
                {{ __('امضا و قفل کردن') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>