@extends('admin.layout')
@section('title', 'Arsip Laptop - LapFinder Admin')

@section('content')
<x-admin.page-header
    title="Arsip Laptop"
    subtitle="{{ number_format($laptops->total()) }} laptop sedang diarsipkan"
>
    <x-slot:actions>
        <a href="{{ route('laptops.index') }}" class="btn-secondary">
            <i class="fa-solid fa-arrow-left"></i>
            Katalog
        </a>
    </x-slot:actions>
</x-admin.page-header>

<x-admin.card title="Data arsip" description="Restore untuk mengembalikan ke katalog aktif. Hapus permanen tidak bisa dibatalkan.">
    <div class="overflow-x-auto">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Laptop</th>
                    <th>Kategori</th>
                    <th>Harga</th>
                    <th>Diarsipkan</th>
                    <th class="text-right">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($laptops as $laptop)
                    <tr>
                        <td>
                            <div class="flex items-center gap-3">
                                <div class="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-slate-100 text-slate-400 dark:bg-slate-800">
                                    @if($laptop->image_url)
                                        <img src="{{ $laptop->image_url }}" alt="{{ $laptop->name }}" class="h-full w-full object-cover">
                                    @else
                                        <i class="fa-solid fa-laptop"></i>
                                    @endif
                                </div>
                                <div>
                                    <p class="font-bold text-slate-950 dark:text-white">{{ $laptop->name }}</p>
                                    <p class="text-xs text-slate-500 dark:text-slate-400">{{ $laptop->processor }}</p>
                                </div>
                            </div>
                        </td>
                        <td><span class="badge-blue">{{ ucfirst($laptop->kategori ?? 'Umum') }}</span></td>
                        <td class="font-semibold text-slate-800 dark:text-slate-100">{{ $laptop->harga }}</td>
                        <td class="text-slate-500 dark:text-slate-400">{{ optional($laptop->deleted_at)->format('d M Y H:i') }}</td>
                        <td>
                            <div class="flex justify-end gap-2">
                                <button
                                    type="button"
                                    class="btn-secondary px-3 py-2"
                                    data-confirm-action="{{ route('laptops.restore', $laptop->id) }}"
                                    data-confirm-method="POST"
                                    data-confirm-title="Pulihkan laptop?"
                                    data-confirm-message="{{ $laptop->name }} akan kembali tampil di katalog aktif."
                                >
                                    <i class="fa-solid fa-rotate-left"></i>
                                    Restore
                                </button>
                                <button
                                    type="button"
                                    class="btn-danger px-3 py-2"
                                    data-confirm-action="{{ route('laptops.force-delete', $laptop->id) }}"
                                    data-confirm-method="DELETE"
                                    data-confirm-title="Hapus permanen?"
                                    data-confirm-message="{{ $laptop->name }} akan dihapus permanen dari database."
                                >
                                    <i class="fa-solid fa-trash"></i>
                                    Hapus
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5">
                            <x-admin.empty-state icon="fa-box-archive" title="Arsip kosong" description="Laptop yang dihapus dari katalog akan muncul di sini." />
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($laptops->hasPages())
        <div class="mt-4 border-t border-slate-100 pt-4 dark:border-slate-800">
            {{ $laptops->withQueryString()->links() }}
        </div>
    @endif
</x-admin.card>
@endsection