@extends('layouts.admin')

@section('title', 'Sesi Login & Perangkat')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Sesi Perangkat Mobile</h1>
            <p class="text-xs text-slate-500 mt-1">Single Device Binding (1 akun pegawai terkunci pada 1 smartphone terdaftar untuk mencegah titip absen)</p>
        </div>
    </div>

    <!-- Tabel Sesi Perangkat -->
    <div class="rounded-2xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full min-w-[750px] text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-100 bg-slate-50/60 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                        <th class="py-3 px-4">Pegawai</th>
                        <th class="py-3 px-4">Model Smartphone</th>
                        <th class="py-3 px-4">UUID Perangkat</th>
                        <th class="py-3 px-4">IP & Waktu Login</th>
                        <th class="py-3 px-4 text-center">Status Lock</th>
                        <th class="py-3 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($sesiList as $s)
                    <tr class="hover:bg-slate-50/70 transition-colors">
                        <td class="py-3.5 px-4 font-bold text-slate-900">
                            <span class="block">{{ $s->pegawai->nama_lengkap ?? '-' }}</span>
                            <span class="text-[11px] font-normal text-slate-400">{{ $s->pegawai->nip ?? '-' }}</span>
                        </td>
                        <td class="py-3.5 px-4">
                            <div class="flex items-center gap-2">
                                <i data-lucide="smartphone" class="w-4 h-4 text-primary-600"></i>
                                <div>
                                    <span class="font-bold text-slate-800 block">{{ $s->model_perangkat ?? 'Perangkat Mobile' }}</span>
                                    <span class="text-[11px] text-slate-400">{{ $s->versi_os ?? '-' }} • v{{ $s->versi_aplikasi ?? '1.0' }}</span>
                                </div>
                            </div>
                        </td>
                        <td class="py-3.5 px-4 font-mono text-[11px] text-slate-500">
                            {{ $s->device_id }}
                        </td>
                        <td class="py-3.5 px-4 text-slate-600">
                            <span class="block">{{ $s->ip_terakhir ?? '-' }}</span>
                            <span class="text-[11px] text-slate-400">{{ $s->login_terakhir_at ? $s->login_terakhir_at->diffForHumans() : '-' }}</span>
                        </td>
                        <td class="py-3.5 px-4 text-center">
                            <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold {{ $s->status_terkunci ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-rose-50 text-rose-700 border border-rose-200' }}">
                                {{ $s->status_terkunci ? 'Terkunci (Aman)' : 'Tidak Terkunci' }}
                            </span>
                        </td>
                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <form action="{{ route('admin.pengaturan-absensi.sesi-login.toggle-lock', $s->id) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="px-2.5 py-1 rounded-lg border border-slate-200 hover:bg-slate-50 text-[11px] font-semibold text-slate-700 transition-colors" title="Ubah status lock">
                                        {{ $s->status_terkunci ? 'Buka Kunci' : 'Kunci' }}
                                    </button>
                                </form>
                                <form action="{{ route('admin.pengaturan-absensi.sesi-login.destroy', $s->id) }}" method="POST" onsubmit="return confirm('Reset sesi perangkat ini? Pegawai harus login ulang.');" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Reset Perangkat">
                                        <i data-lucide="unlink" class="w-4 h-4"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-8 text-center text-slate-400">Belum ada sesi perangkat terikat</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection