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

@section('content')
@php
    $query = request()->query();
    $categories = ['mahasiswa' => 'Mahasiswa', 'gaming' => 'Gaming', 'editing' => 'Editing', 'kantoran' => 'Kantoran'];
    $sorts = [
        'created_at' => 'Terbaru',
        'name' => 'Nama',
        'harga' => 'Harga',
        'kategori' => 'Kategori',
        'rating_avg' => 'Rating',
        'total_ulasan' => 'Jumlah review',
        'added_at' => 'Tanggal tambah',
    ];
    $activeFilters = [];
    if(request()->filled('search')) {
        $activeFilters[] = ['key' => 'search', 'label' => 'Search', 'value' => request('search')];
    }
    if(request()->filled('kategori')) {
        $activeFilters[] = ['key' => 'kategori', 'label' => 'Kategori', 'value' => $categories[request('kategori')] ?? request('kategori')];
    }
    if(request()->filled('recommended')) {
        $activeFilters[] = ['key' => 'recommended', 'label' => 'Rekomendasi', 'value' => request('recommended') ? 'Ya' : 'Tidak'];
    }
    if(request()->filled('min_rating')) {
        $activeFilters[] = ['key' => 'min_rating', 'label' => 'Rating', 'value' => request('min_rating').'+'];
    }
    if(request()->boolean('missing_image')) {
        $activeFilters[] = ['key' => 'missing_image', 'label' => 'Gambar', 'value' => 'Kosong'];
    }
    if(request()->filled('sort') && request('sort') !== 'created_at') {
        $activeFilters[] = ['key' => 'sort', 'label' => 'Sort', 'value' => $sorts[request('sort')] ?? request('sort')];
    }
@endphp

<x-admin.page-header
    title="Katalog Laptop"
    subtitle="{{ number_format($laptops->total()) }} data sesuai filter aktif"
>
    <x-slot:actions>
        <a href="{{ route('export.pdf', $query) }}" class="btn-secondary">
            <i class="fa-solid fa-file-pdf text-red-500"></i>
            PDF
        </a>
        <a href="{{ route('export.excel', $query) }}" class="btn-secondary">
            <i class="fa-solid fa-file-excel text-emerald-500"></i>
            Excel
        </a>
        <a href="{{ route('laptops.archive') }}" class="btn-secondary">
            <i class="fa-solid fa-box-archive"></i>
            Arsip
        </a>
        <a href="{{ route('laptops.create') }}" class="btn-primary">
            <i class="fa-solid fa-plus"></i>
            Tambah Laptop
        </a>
    </x-slot:actions>
</x-admin.page-header>

<div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="stat-card">
        <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Total aktif</p>
        <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ number_format($summary['total']) }}</p>
    </div>
    <div class="stat-card">
        <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Rekomendasi</p>
        <p class="mt-2 text-3xl font-black text-emerald-600">{{ number_format($summary['recommended']) }}</p>
    </div>
    <div class="stat-card">
        <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Belum ada gambar</p>
        <p class="mt-2 text-3xl font-black text-amber-600">{{ number_format($summary['missing_image']) }}</p>
    </div>
    <div class="stat-card">
        <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Di arsip</p>
        <p class="mt-2 text-3xl font-black text-slate-700 dark:text-slate-200">{{ number_format($summary['archived']) }}</p>
    </div>
</div>

@if(count($activeFilters))
    <div class="mb-6 rounded-2xl border border-brand-100 bg-brand-50/80 p-3 dark:border-blue-900 dark:bg-blue-950/30">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <p class="text-xs font-black uppercase tracking-wider text-brand-600 dark:text-blue-300">Filter aktif</p>
                <p class="mt-1 text-sm font-semibold text-slate-600 dark:text-slate-300">Export PDF/Excel mengikuti filter ini.</p>
            </div>
            <div class="flex flex-wrap gap-2">
                @foreach($activeFilters as $filter)
                    <a
                        href="{{ route('laptops.index', collect(request()->except('page', $filter['key']))->all()) }}"
                        class="active-filter-chip"
                        title="Hapus filter {{ $filter['label'] }}"
                    >
                        <span>{{ $filter['label'] }}: {{ $filter['value'] }}</span>
                        <i class="fa-solid fa-xmark"></i>
                    </a>
                @endforeach
                <a href="{{ route('laptops.index') }}" class="active-filter-chip reset">
                    Reset semua
                </a>
            </div>
        </div>
    </div>
@endif

<div class="mb-6 flex flex-wrap items-center gap-2">
    <span class="text-xs font-black uppercase tracking-wider text-slate-400">Preset cepat</span>
    <a href="{{ route('laptops.index', ['recommended' => 1]) }}" class="quick-filter {{ request('recommended') === '1' ? 'active' : '' }}">
        <i class="fa-solid fa-circle-check text-emerald-500"></i>
        Rekomendasi
    </a>
    <a href="{{ route('laptops.index', ['missing_image' => 1]) }}" class="quick-filter {{ request()->boolean('missing_image') ? 'active' : '' }}">
        <i class="fa-solid fa-image text-amber-500"></i>
        Gambar kosong
    </a>
    <a href="{{ route('laptops.index', ['min_rating' => 4]) }}" class="quick-filter {{ (string) request('min_rating') === '4' ? 'active' : '' }}">
        <i class="fa-solid fa-star text-amber-500"></i>
        Rating 4+
    </a>
    <a href="{{ route('laptops.index', ['kategori' => 'gaming']) }}" class="quick-filter {{ request('kategori') === 'gaming' ? 'active' : '' }}">
        <i class="fa-solid fa-gamepad text-brand-500"></i>
        Gaming
    </a>
    <a href="{{ route('laptops.index') }}" class="quick-filter">
        <i class="fa-solid fa-rotate-left"></i>
        Reset
    </a>
</div>

<x-admin.card data-collapsible-filter>
    <x-slot:header>
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h2 class="text-base font-bold text-slate-950 dark:text-white">Filter katalog</h2>
                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                    Filter ini juga dipakai saat export PDF dan Excel.
                    @if(count($activeFilters))
                        <span class="font-bold text-brand-600 dark:text-blue-300">{{ count($activeFilters) }} filter aktif</span>
                    @endif
                </p>
            </div>
            <button type="button" class="btn-secondary" data-collapsible-filter-toggle aria-expanded="true">
                <i class="fa-solid fa-chevron-up transition-transform duration-200" data-collapsible-filter-icon></i>
                <span data-collapsible-filter-label>Sembunyikan</span>
            </button>
        </div>
    </x-slot:header>
    <form method="GET" class="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
        <div class="xl:col-span-2">
            <label class="form-label" for="search">Search</label>
            <input id="search" name="search" type="search" value="{{ request('search') }}" class="form-control" placeholder="Nama, processor, GPU">
        </div>
        <div>
            <label class="form-label" for="kategori">Kategori</label>
            <select id="kategori" name="kategori" class="form-control">
                <option value="">Semua</option>
                @foreach($categories as $value => $label)
                    <option value="{{ $value }}" @selected(request('kategori') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label" for="recommended">Rekomendasi</label>
            <select id="recommended" name="recommended" class="form-control">
                <option value="">Semua</option>
                <option value="1" @selected((string) request('recommended') === '1')>Ya</option>
                <option value="0" @selected((string) request('recommended') === '0')>Tidak</option>
            </select>
        </div>
        <div>
            <label class="form-label" for="min_rating">Rating min.</label>
            <select id="min_rating" name="min_rating" class="form-control">
                <option value="">Semua</option>
                @foreach([5, 4, 3, 2, 1] as $rating)
                    <option value="{{ $rating }}" @selected((string) request('min_rating') === (string) $rating)>{{ $rating }}+</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label" for="per_page">Per halaman</label>
            <select id="per_page" name="per_page" class="form-control">
                @foreach([10, 25, 50, 100] as $size)
                    <option value="{{ $size }}" @selected((int) request('per_page', 10) === $size)>{{ $size }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label" for="sort">Sort</label>
            <select id="sort" name="sort" class="form-control">
                @foreach($sorts as $value => $label)
                    <option value="{{ $value }}" @selected(request('sort', 'created_at') === $value)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label" for="dir">Arah</label>
            <select id="dir" name="dir" class="form-control">
                <option value="desc" @selected(request('dir', 'desc') === 'desc')>Desc</option>
                <option value="asc" @selected(request('dir') === 'asc')>Asc</option>
            </select>
        </div>
        <label class="flex items-center gap-3 rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm font-semibold text-slate-700 dark:border-slate-700 dark:text-slate-200 xl:mt-7">
            <input type="checkbox" name="missing_image" value="1" class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500" @checked(request()->boolean('missing_image'))>
            Gambar kosong
        </label>
        <div class="flex flex-wrap items-end gap-2 xl:col-span-3">
            <button type="submit" class="btn-primary">
                <i class="fa-solid fa-filter"></i>
                Terapkan
            </button>
            <a href="{{ route('laptops.index') }}" class="btn-secondary">Reset</a>
        </div>
    </form>
</x-admin.card>

<form method="POST" action="{{ route('laptops.bulk') }}" class="mt-6">
    @csrf
    <x-admin.card>
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th class="w-10">
                            <input type="checkbox" data-check-all class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                        </th>
                        <th>Laptop</th>
                        <th>Kategori</th>
                        <th>Harga</th>
                        <th>Rating</th>
                        <th>Status</th>
                        <th class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($laptops as $laptop)
                        <tr>
                            <td>
                                <input type="checkbox" name="ids[]" value="{{ $laptop->id }}" data-check-item class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                            </td>
                            <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 class="min-w-0">
                                        <p class="truncate font-bold text-slate-950 dark:text-white">{{ $laptop->name }}</p>
                                        <p class="truncate text-xs text-slate-500 dark:text-slate-400">{{ $laptop->processor }} / {{ $laptop->ram }}</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>
                                <div class="flex items-center gap-1 font-semibold text-slate-800 dark:text-slate-100">
                                    <i class="fa-solid fa-star text-amber-500"></i>
                                    {{ number_format((float) $laptop->rating_avg, 1) }}
                                    <span class="text-xs font-normal text-slate-500">({{ $laptop->total_ulasan }})</span>
                                </div>
                            </td>
                            <td>
                                <div class="flex flex-wrap gap-1">
                                    @if($laptop->recommended)
                                        <span class="badge-green"><i class="fa-solid fa-circle-check"></i> Rekomendasi</span>
                                    @else
                                        <span class="badge-slate">Standar</span>
                                    @endif
                                    @unless($laptop->image_url)
                                        <span class="badge-yellow"><i class="fa-solid fa-image"></i> Gambar kosong</span>
                                    @endunless
                                </div>
                            </td>
                            <td>
                                <div class="flex justify-end gap-1">
                                    <a href="{{ route('laptops.edit', $laptop) }}" class="icon-btn" title="Edit">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                    <button
                                        type="button"
                                        class="icon-btn text-red-600 hover:text-red-700 dark:text-red-400"
                                        title="Arsipkan"
                                        data-confirm-action="{{ route('laptops.destroy', $laptop) }}"
                                        data-confirm-method="DELETE"
                                        data-confirm-title="Arsipkan laptop?"
                                        data-confirm-message="{{ $laptop->name }} akan dipindahkan ke arsip dan bisa dipulihkan nanti."
                                    >
                                        <i class="fa-solid fa-box-archive"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7">
                                <x-admin.empty-state icon="fa-laptop" title="Belum ada laptop" description="Tambahkan data laptop pertama atau ubah filter pencarian." />
                            </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>

    <div class="action-bar mt-4 hidden" data-bulk-bar>
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <p class="text-sm font-semibold text-slate-700 dark:text-slate-200">
                <span data-selected-count>0</span> laptop dipilih
            </p>
            <div class="flex flex-wrap gap-2">
                <select name="action" class="form-control w-full sm:w-56">
                    <option value="recommend">Jadikan rekomendasi</option>
                    <option value="unrecommend">Hapus rekomendasi</option>
                    <option value="export">Export selected</option>
                    <option value="archive">Pindahkan ke arsip</option>
                </select>
                <button type="submit" class="btn-primary">
                    <i class="fa-solid fa-bolt"></i>
                    Jalankan
                </button>
            </div>
        </div>
    </div>
</form>
@endsection