@extends('layouts.admin')

@section('title', 'Arquivos')
@section('eyebrow', 'Biblioteca')

@section('content')
    <div class="mb-5 flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
        <form method="GET" action="{{ route('admin.arquivos.index') }}" class="grid gap-3 md:grid-cols-[minmax(220px,1fr)_180px_150px_auto]">
            <input name="search" value="{{ request('search') }}" placeholder="Buscar por título" class="h-10 rounded-lg border border-slate-300 px-3 text-sm outline-none focus:border-[#0B6EFD] focus:ring-4 focus:ring-blue-100">
            <select name="category_id" class="h-10 rounded-lg border border-slate-300 px-3 text-sm outline-none focus:border-[#0B6EFD] focus:ring-4 focus:ring-blue-100">
                <option value="">Todas as categorias</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" @selected((int) request('category_id') === $category->id)>{{ $category->name }}</option>
                @endforeach
            </select>
            <select name="status" class="h-10 rounded-lg border border-slate-300 px-3 text-sm outline-none focus:border-[#0B6EFD] focus:ring-4 focus:ring-blue-100">
                <option value="">Todos</option>
                <option value="active" @selected(request('status') === 'active')>Ativos</option>
                <option value="inactive" @selected(request('status') === 'inactive')>Inativos</option>
            </select>
            <button type="submit" class="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-4 text-sm font-bold text-slate-700 hover:bg-slate-50">
                <i data-lucide="search" class="h-4 w-4"></i>
                Filtrar
            </button>
        </form>
        <a href="{{ route('admin.arquivos.create') }}" class="inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-[#0B6EFD] px-4 text-sm font-bold text-white hover:bg-blue-700">
            <i data-lucide="upload" class="h-4 w-4"></i>
            Novo arquivo
        </a>
    </div>

    <div class="mb-4 flex flex-wrap gap-2 text-xs">
        <a href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => $sort === 'created_at' && $direction === 'desc' ? 'asc' : 'desc']) }}" class="rounded-full border border-slate-200 bg-white px-3 py-1.5 font-semibold text-slate-600 hover:bg-slate-50">Ordenar por data</a>
        <a href="{{ request()->fullUrlWithQuery(['sort' => 'downloads_count', 'direction' => $sort === 'downloads_count' && $direction === 'desc' ? 'asc' : 'desc']) }}" class="rounded-full border border-slate-200 bg-white px-3 py-1.5 font-semibold text-slate-600 hover:bg-slate-50">Ordenar por downloads</a>
    </div>

    <div class="overflow-hidden rounded-lg border border-slate-200 bg-white">
        <div class="overflow-x-auto">
            <table class="w-full min-w-[1040px] text-left text-sm">
                <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                    <tr>
                        <th class="px-5 py-3">Título</th>
                        <th class="px-5 py-3">Categoria</th>
                        <th class="px-5 py-3">Tipo</th>
                        <th class="px-5 py-3">Tamanho</th>
                        <th class="px-5 py-3">Status</th>
                        <th class="px-5 py-3">Downloads</th>
                        <th class="px-5 py-3">Cadastro</th>
                        <th class="px-5 py-3 text-right">Ações</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($files as $file)
                        <tr>
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-blue-50 text-[#0B6EFD]">
                                        <i data-lucide="{{ $file->icon }}" class="h-5 w-5"></i>
                                    </div>
                                    <div>
                                        <div class="font-semibold text-slate-950">{{ $file->title }}</div>
                                        <div class="text-xs text-slate-500">{{ $file->original_name }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4">{{ $file->category?->name }}</td>
                            <td class="px-5 py-4">{{ $file->type_label }}</td>
                            <td class="px-5 py-4">{{ $file->formatted_size }}</td>
                            <td class="px-5 py-4">
                                <span class="rounded-full px-2.5 py-1 text-xs font-semibold {{ $file->status === 'active' ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-600' }}">
                                    {{ $file->status === 'active' ? 'Ativo' : 'Inativo' }}
                                </span>
                            </td>
                            <td class="px-5 py-4">{{ number_format($file->downloads_count, 0, ',', '.') }}</td>
                            <td class="px-5 py-4">{{ $file->created_at?->format('d/m/Y') }}</td>
                            <td class="px-5 py-4">
                                <div class="flex justify-end gap-2">
                                    <a href="{{ route('admin.arquivos.show', $file) }}" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50" title="Visualizar">
                                        <i data-lucide="eye" class="h-4 w-4"></i>
                                    </a>
                                    <a href="{{ route('admin.arquivos.edit', $file) }}" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50" title="Editar">
                                        <i data-lucide="pencil" class="h-4 w-4"></i>
                                    </a>
                                    <a href="{{ route('admin.arquivos.download', $file) }}" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50" title="Baixar">
                                        <i data-lucide="download" class="h-4 w-4"></i>
                                    </a>
                                    <a href="{{ route('public.files.show', ['file' => $file->slug]) }}" target="_blank" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50" title="Página pública">
                                        <i data-lucide="external-link" class="h-4 w-4"></i>
                                    </a>
                                    <button type="button" data-copy="{{ route('public.files.show', ['file' => $file->slug]) }}" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50" title="Copiar link">
                                        <i data-lucide="copy" class="h-4 w-4"></i>
                                    </button>
                                    <form method="POST" action="{{ route('admin.arquivos.destroy', $file) }}" onsubmit="return confirm('Excluir este arquivo?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-red-200 text-red-600 hover:bg-red-50" title="Excluir">
                                            <i data-lucide="trash-2" class="h-4 w-4"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-5 py-10 text-center text-slate-500">Nenhum arquivo encontrado.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-5">
        {{ $files->links() }}
    </div>
@endsection