{{--<div>--}}
{{--    --}}{{-- هدر صفحه --}}
{{--    <div class="page-header">--}}
{{--        <h3 class="page-title">مدیریت کاربران</h3>--}}
{{--        <nav aria-label="breadcrumb">--}}
{{--            <ol class="breadcrumb">--}}
{{--                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">پنل مدیریت</a></li>--}}
{{--                <li class="breadcrumb-item active" aria-current="page">مدیریت کاربران</li>--}}
{{--            </ol>--}}
{{--        </nav>--}}
{{--    </div>--}}

{{--    <div class="row">--}}
{{--        <div class="col-lg-12 grid-margin stretch-card">--}}
{{--            <div class="card">--}}
{{--                <div class="card-body">--}}
{{--                    <div class="d-flex justify-content-between align-items-center mb-4">--}}
{{--                        <h4 class="card-title">لیست کاربران سیستم</h4>--}}
{{--                        <button wire:click="confirmUserAction" class="btn btn-primary">ایجاد کاربر جدید</button>--}}
{{--                    </div>--}}

{{--                    --}}{{-- بخش فیلترها و جستجو --}}
{{--                    <div class="row mb-3">--}}
{{--                        <div class="col-md-6">--}}
{{--                            <input type="text" class="form-control" wire:model.live.debounce.300ms="search" placeholder="جستجو بر اساس نام، ایمیل یا نام کاربری...">--}}
{{--                        </div>--}}
{{--                        <div class="col-md-3">--}}
{{--                            <select wire:model.live="roleFilter" class="form-select">--}}
{{--                                <option value="">همه نقش‌ها</option>--}}
{{--                                @foreach($roles as $role)--}}
{{--                                    <option value="{{ $role->id }}">{{ $role->name }}</option>--}}
{{--                                @endforeach--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                        <div class="col-md-3">--}}
{{--                            <select wire:model.live="institutionFilter" class="form-select">--}}
{{--                                <option value="">همه سازمان‌ها</option>--}}
{{--                                @foreach($institutions as $institution)--}}
{{--                                    <option value="{{ $institution->id }}">{{ $institution->name }}</option>--}}
{{--                                @endforeach--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                    </div>--}}

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

{{--                    <div class="table-responsive">--}}
{{--                        <table class="table table-striped">--}}
{{--                            <thead>--}}
{{--                            <tr>--}}
{{--                                <th>نام</th>--}}
{{--                                <th>نام کاربری</th>--}}
{{--                                <th>ایمیل</th>--}}
{{--                                <th>سازمان(ها)</th>--}}
{{--                                <th>نقش‌های سیستمی</th>--}}
{{--                                <th>عملیات</th>--}}
{{--                            </tr>--}}
{{--                            </thead>--}}
{{--                            <tbody>--}}
{{--                            @forelse ($users as $user)--}}
{{--                                <tr>--}}
{{--                                    <td>{{ $user->first_name }} {{ $user->last_name }}</td>--}}
{{--                                    <td>{{ $user->username }}</td>--}}
{{--                                    <td>{{ $user->email }}</td>--}}
{{--                                    <td>--}}
{{--                                        @foreach($user->institutionMemberships as $membership)--}}
{{--                                            <span class="badge badge-info-muted">{{ $membership->institution->name }}</span>--}}
{{--                                        @endforeach--}}
{{--                                    </td>--}}
{{--                                    <td>--}}
{{--                                        @foreach($user->systemRoles as $role)--}}
{{--                                            <span class="badge badge-primary">{{ $role->name }}</span>--}}
{{--                                        @endforeach--}}
{{--                                    </td>--}}
{{--                                    <td>--}}
{{--                                        <button wire:click="confirmUserAction({{ $user->id }})" class="btn btn-primary btn-sm">ویرایش</button>--}}
{{--                                        <button wire:click="confirmUserDeletion({{ $user->id }})" class="btn btn-danger btn-sm">حذف</button>--}}
{{--                                    </td>--}}
{{--                                </tr>--}}
{{--                            @empty--}}
{{--                                <tr>--}}
{{--                                    <td colspan="6" class="text-center">هیچ کاربری یافت نشد.</td>--}}
{{--                                </tr>--}}
{{--                            @endforelse--}}
{{--                            </tbody>--}}
{{--                        </table>--}}
{{--                    </div>--}}

{{--                    <div class="mt-4">--}}
{{--                        {{ $users->links() }}--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <!-- Modal برای ایجاد/ویرایش کاربر -->--}}
{{--    <x-dialog-modal wire:model.live="confirmingUserAction">--}}
{{--        <x-slot name="title">--}}
{{--            {{ $editingUser ? 'ویرایش کاربر' : 'ایجاد کاربر جدید' }}--}}
{{--        </x-slot>--}}

{{--        <x-slot name="content">--}}
{{--            <div class="grid grid-cols-6 gap-6">--}}
{{--                <div class="col-span-6 sm:col-span-3">--}}
{{--                    <x-label for="state.first_name" value="{{ __('نام') }}" />--}}
{{--                    <x-input id="state.first_name" type="text" class="mt-1 block w-full" wire:model.defer="state.first_name" />--}}
{{--                    <x-input-error for="state.first_name" class="mt-2" />--}}
{{--                </div>--}}
{{--                <div class="col-span-6 sm:col-span-3">--}}
{{--                    <x-label for="state.last_name" value="{{ __('نام خانوادگی') }}" />--}}
{{--                    <x-input id="state.last_name" type="text" class="mt-1 block w-full" wire:model.defer="state.last_name" />--}}
{{--                    <x-input-error for="state.last_name" class="mt-2" />--}}
{{--                </div>--}}
{{--                <div class="col-span-6 sm:col-span-3">--}}
{{--                    <x-label for="state.username" value="{{ __('نام کاربری') }}" />--}}
{{--                    <x-input id="state.username" type="text" class="mt-1 block w-full" wire:model.defer="state.username" />--}}
{{--                    <x-input-error for="state.username" class="mt-2" />--}}
{{--                </div>--}}
{{--                <div class="col-span-6 sm:col-span-3">--}}
{{--                    <x-label for="state.email" value="{{ __('ایمیل') }}" />--}}
{{--                    <x-input id="state.email" type="email" class="mt-1 block w-full" wire:model.defer="state.email" />--}}
{{--                    <x-input-error for="state.email" class="mt-2" />--}}
{{--                </div>--}}
{{--                <div class="col-span-6 sm:col-span-3">--}}
{{--                    <x-label for="state.password" value="{{ __('رمز عبور') }}" />--}}
{{--                    <x-input id="state.password" type="password" class="mt-1 block w-full" wire:model.defer="state.password" />--}}
{{--                    <x-input-error for="state.password" class="mt-2" />--}}
{{--                </div>--}}
{{--                <div class="col-span-6 sm:col-span-3">--}}
{{--                    <x-label for="state.password_confirmation" value="{{ __('تکرار رمز عبور') }}" />--}}
{{--                    <x-input id="state.password_confirmation" type="password" class="mt-1 block w-full" wire:model.defer="state.password_confirmation" />--}}
{{--                </div>--}}
{{--                <div class="col-span-6">--}}
{{--                    <x-label value="{{ __('نقش‌های سیستمی') }}" />--}}
{{--                    <div class="mt-2 grid grid-cols-2 md:grid-cols-4 gap-2">--}}
{{--                        @foreach($allRoles as $role)--}}
{{--                            <label for="role-{{ $role->id }}" class="flex items-center">--}}
{{--                                <input id="role-{{ $role->id }}" type="checkbox" wire:model.live="userRoles" value="{{ $role->id }}" class="rounded">--}}
{{--                                <span class="ms-2 text-sm">{{ $role->name }}</span>--}}
{{--                            </label>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </x-slot>--}}

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

{{--            <x-button class="ms-3" wire:click="saveUser" wire:loading.attr="disabled">--}}
{{--                {{ __('ذخیره') }}--}}
{{--            </x-button>--}}
{{--        </x-slot>--}}
{{--    </x-dialog-modal>--}}

{{--    <!-- Modal برای تایید حذف کاربر -->--}}
{{--    <x-confirmation-modal wire:model.live="confirmingUserDeletion">--}}
{{--        <x-slot name="title">--}}
{{--            {{ __('حذف کاربر') }}--}}
{{--        </x-slot>--}}
{{--        <x-slot name="content">--}}
{{--            {{ __('آیا از حذف این کاربر مطمئن هستید؟') }}--}}
{{--        </x-slot>--}}
{{--        <x-slot name="footer">--}}
{{--            <x-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">--}}
{{--                {{ __('انصراف') }}--}}
{{--            </x-secondary-button>--}}
{{--            <x-danger-button class="ms-3" wire:click="deleteUser" wire:loading.attr="disabled">--}}
{{--                {{ __('حذف کاربر') }}--}}
{{--            </x-danger-button>--}}
{{--        </x-slot>--}}
{{--    </x-confirmation-modal>--}}
{{--</div>--}}

<div>
    {{-- هدر صفحه --}}
    <div class="page-header">
        <h3 class="page-title">مدیریت کاربران</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">پنل مدیریت</a></li>
                <li class="breadcrumb-item active" aria-current="page">مدیریت کاربران</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="card-title">لیست کاربران سیستم</h4>
                        <button wire:click="confirmUserAction" class="btn btn-primary">ایجاد کاربر جدید</button>
                    </div>

                    {{-- بخش فیلترها و جستجو --}}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <input type="text" class="form-control" wire:model.live.debounce.300ms="search" placeholder="جستجو بر اساس نام، ایمیل یا نام کاربری...">
                        </div>
                        <div class="col-md-3">
                            <select wire:model.live="roleFilter" class="form-select">
                                <option value="">همه نقش‌ها</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select wire:model.live="institutionFilter" class="form-select">
                                <option value="">همه سازمان‌ها</option>
                                @foreach($institutions as $institution)
                                    <option value="{{ $institution->id }}">{{ $institution->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

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

                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>نام</th>
                                <th>نام کاربری</th>
                                <th>ایمیل</th>
                                <th>سازمان(ها)</th>
                                <th>نقش‌های سیستمی</th>
                                <th>عملیات</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse ($users as $user)
                                <tr>
                                    <td>{{ $user->first_name }} {{ $user->last_name }}</td>
                                    <td>{{ $user->username }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>
                                        @foreach($user->institutionMemberships as $membership)
                                            <span class="badge badge-info-muted">{{ $membership->institution->name }}</span>
                                        @endforeach
                                    </td>
                                    <td>
                                        {{-- [UPDATED] --}}
                                        @foreach($user->roles as $role)
                                            <span class="badge badge-primary">{{ $role->name }}</span>
                                        @endforeach
                                    </td>
                                    <td>
                                        <button wire:click="confirmUserAction({{ $user->id }})" class="btn btn-primary btn-sm">ویرایش</button>
                                        <button wire:click="confirmUserDeletion({{ $user->id }})" class="btn btn-danger btn-sm">حذف</button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">هیچ کاربری یافت نشد.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-4">
                        {{ $users->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal برای ایجاد/ویرایش کاربر -->
    <x-dialog-modal wire:model.live="confirmingUserAction">
        <x-slot name="title">
            {{ $editingUser ? 'ویرایش کاربر' : 'ایجاد کاربر جدید' }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-6 gap-6">
                <div class="col-span-6 sm:col-span-3">
                    <x-label for="state.first_name" value="{{ __('نام') }}" />
                    <x-input id="state.first_name" type="text" class="mt-1 block w-full" wire:model.defer="state.first_name" />
                    <x-input-error for="state.first_name" class="mt-2" />
                </div>
                <div class="col-span-6 sm:col-span-3">
                    <x-label for="state.last_name" value="{{ __('نام خانوادگی') }}" />
                    <x-input id="state.last_name" type="text" class="mt-1 block w-full" wire:model.defer="state.last_name" />
                    <x-input-error for="state.last_name" class="mt-2" />
                </div>
                <div class="col-span-6 sm:col-span-3">
                    <x-label for="state.username" value="{{ __('نام کاربری') }}" />
                    <x-input id="state.username" type="text" class="mt-1 block w-full" wire:model.defer="state.username" />
                    <x-input-error for="state.username" class="mt-2" />
                </div>
                <div class="col-span-6 sm:col-span-3">
                    <x-label for="state.email" value="{{ __('ایمیل') }}" />
                    <x-input id="state.email" type="email" class="mt-1 block w-full" wire:model.defer="state.email" />
                    <x-input-error for="state.email" class="mt-2" />
                </div>
                <div class="col-span-6 sm:col-span-3">
                    <x-label for="state.password" value="{{ __('رمز عبور') }}" />
                    <x-input id="state.password" type="password" class="mt-1 block w-full" wire:model.defer="state.password" />
                    <x-input-error for="state.password" class="mt-2" />
                </div>
                <div class="col-span-6 sm:col-span-3">
                    <x-label for="state.password_confirmation" value="{{ __('تکرار رمز عبور') }}" />
                    <x-input id="state.password_confirmation" type="password" class="mt-1 block w-full" wire:model.defer="state.password_confirmation" />
                </div>
                <div class="col-span-6">
                    <x-label value="{{ __('نقش‌های سیستمی') }}" />
                    <div class="mt-2 grid grid-cols-2 md:grid-cols-4 gap-2">
                        @foreach($allRoles as $role)
                            <label for="role-{{ $role->id }}" class="flex items-center">
                                <input id="role-{{ $role->id }}" type="checkbox" wire:model.live="userRoles" value="{{ $role->id }}" class="rounded">
                                <span class="ms-2 text-sm">{{ $role->name }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>
        </x-slot>

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

            <x-button class="ms-3" wire:click="saveUser" wire:loading.attr="disabled">
                {{ __('ذخیره') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Modal برای تایید حذف کاربر -->
    <x-confirmation-modal wire:model.live="confirmingUserDeletion">
        <x-slot name="title">
            {{ __('حذف کاربر') }}
        </x-slot>
        <x-slot name="content">
            {{ __('آیا از حذف این کاربر مطمئن هستید؟') }}
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
                {{ __('انصراف') }}
            </x-secondary-button>
            <x-danger-button class="ms-3" wire:click="deleteUser" wire:loading.attr="disabled">
                {{ __('حذف کاربر') }}
            </x-danger-button>
        </x-slot>
    </x-confirmation-modal>
</div>