{{-- Permissions Tab Content (Partial) --}}
{{-- 此檔案被 index.blade.php 的 @include 和 AJAX 模式共用 --}}

{{-- Toolbar 區：搜尋框 + 公司篩選 --}}
<div class="flex items-center justify-between mb-8">
    <div class="flex items-center gap-4">
        <form @submit.prevent="searchInTab('permissions')" class="relative group">
            <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
                <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
            </span>
            <input type="text" x-model="permissionSearch"
                placeholder="{{ __('Search accounts...') }}"
                class="luxury-input py-2.5 pl-12 pr-6 block w-64">
        </form>

        @if(auth()->user()->isSystemAdmin())
        <div class="w-72">
            <x-searchable-select name="company_filter" :options="$companies" :selected="request('company_id')"
                :placeholder="__('All Companies')" 
                x-on:change="permissionCompanyId = $event.target.value; searchInTab('permissions')" />
        </div>
        @endif
    </div>
</div>

{{-- Permissions Table --}}
<div class="overflow-x-auto">
    <table class="w-full text-left border-separate border-spacing-y-0">
        <thead>
            <tr class="bg-slate-50/50 dark:bg-slate-900/10">
                <th
                    class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
                    {{ __('Account Info') }}</th>
                <th
                    class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-left">
                    {{ __('Company Name') }}</th>
                <th
                    class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">
                    {{ __('Authorized Machines') }}</th>
                <th
                    class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">
                    {{ __('Action') }}</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
            @forelse($users_list ?? [] as $user)
            <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
                <td class="px-6 py-6 font-display text-left">
                    <div class="flex items-center gap-4 text-left">
                        <div
                            class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white group-hover:border-cyan-500 shadow-sm group-hover:shadow-cyan-500/50 transition-all duration-300">
                            <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                                    d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                            </svg>
                        </div>
                        <div class="flex flex-col text-left">
                            <span
                                class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{
                                $user->name }}</span>
                            <span
                                class="text-xs font-mono font-bold text-slate-500 tracking-widest uppercase">{{
                                $user->username }}</span>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-6 text-left">
                    <span
                        class="px-2.5 py-1 rounded-lg text-xs font-bold border border-sky-100 dark:border-sky-900/30 bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400 tracking-widest uppercase">
                        {{ $user->company->name ?? __('System') }}
                    </span>
                </td>
                <td class="px-6 py-4 text-center">
                    <div
                        class="flex flex-wrap gap-2 justify-center lg:justify-start max-w-[420px] mx-auto lg:mx-0 max-h-[140px] overflow-y-auto pr-2 custom-scrollbar py-1 text-left">
                        @forelse($user->machines as $m)
                        <div
                            class="flex flex-col px-3 py-1.5 rounded-xl bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-white/5 hover:border-cyan-500/30 transition-all duration-300 text-left">
                            <span class="text-[11px] font-black text-slate-700 dark:text-slate-200 leading-tight">{{
                                $m->name }}</span>
                            <span class="text-[9px] font-mono font-bold text-cyan-500 tracking-tighter mt-0.5 opacity-80">{{
                                $m->serial_no }}</span>
                        </div>
                        @empty
                        <div class="w-full text-center lg:text-left">
                            <span
                                class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest opacity-40 italic">--
                                {{ __('None') }} --</span>
                        </div>
                        @endforelse
                    </div>
                </td>
                <td class="px-6 py-6 text-right">
                    <button
                        @click='openPermissionModal({{ json_encode(["id" => $user->id, "name" => $user->name]) }})'
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500 hover:text-white transition-all duration-300 text-xs font-black uppercase tracking-widest shadow-sm shadow-cyan-500/5 group/auth">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 00-2 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                        <span>{{ __('Authorize') }}</span>
                    </button>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-6 py-24 text-center">
                    <div class="flex flex-col items-center gap-3 opacity-20">
                        <svg class="size-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2m16-10a4 4 0 11-8 0 4 4 0 018 0zM23 21v-2a4 4 0 00-3-3.87m-4-12a4 4 0 010 7.75" />
                        </svg>
                        <p class="text-slate-400 font-extrabold tracking-widest uppercase text-xs">{{ __('No accounts found') }}</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-8 border-t border-slate-100/50 dark:border-slate-800/50 pt-6 text-left mb-6">
    @if($users_list)
        {{ $users_list->appends(['tab' => 'permissions'])->links('vendor.pagination.luxury') }}
    @endif
</div>