@extends('layouts.public')

@section('title', 'Central de Downloads')

@section('content')
    <section class="relative overflow-hidden bg-slate-950 text-white">
        <img src="{{ asset('images/hero-downloads.png') }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-70">
        <div class="absolute inset-0 bg-slate-950/60"></div>
        <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
            <div class="max-w-3xl">
                <p class="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-300">Inovasoft Tecnologia</p>
                <h1 class="text-4xl font-bold leading-tight sm:text-5xl">Central de Downloads</h1>
                <p class="mt-4 max-w-2xl text-lg leading-8 text-slate-200">Baixe arquivos, documentos e materiais disponibilizados pela Inovasoft Tecnologia.</p>
            </div>
            <form method="GET" action="{{ route('public.files.index') }}" class="mt-8 grid max-w-4xl gap-3 rounded-lg bg-white p-3 shadow-xl sm:grid-cols-[minmax(220px,1fr)_220px_auto]">
                <div class="relative">
                    <i data-lucide="search" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
                    <input name="search" value="{{ request('search') }}" placeholder="Buscar arquivos" class="h-12 w-full rounded-lg border border-slate-200 pl-10 pr-3 text-sm text-slate-900 outline-none focus:border-[#0B6EFD] focus:ring-4 focus:ring-blue-100">
                </div>
                <select name="category" class="h-12 rounded-lg border border-slate-200 px-3 text-sm text-slate-900 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->slug }}" @selected(request('category') === $category->slug)>{{ $category->name }}</option>
                    @endforeach
                </select>
                <button type="submit" class="inline-flex h-12 items-center justify-center gap-2 rounded-lg bg-[#0B6EFD] px-5 text-sm font-bold text-white hover:bg-blue-700">
                    <i data-lucide="filter" class="h-4 w-4"></i>
                    Buscar
                </button>
            </form>
        </div>
    </section>

    <main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <div class="mb-8 flex flex-wrap gap-2">
            <a href="{{ route('public.files.index', request()->except('category')) }}" class="rounded-full border px-4 py-2 text-sm font-semibold {{ request('category') ? 'border-slate-200 text-slate-600 hover:bg-slate-50' : 'border-[#0B6EFD] bg-blue-50 text-[#0B6EFD]' }}">
                Todos
            </a>
            @foreach ($categories as $category)
                <a href="{{ route('public.files.index', array_merge(request()->except('page'), ['category' => $category->slug])) }}" class="rounded-full border px-4 py-2 text-sm font-semibold {{ request('category') === $category->slug ? 'border-[#0B6EFD] bg-blue-50 text-[#0B6EFD]' : 'border-slate-200 text-slate-600 hover:bg-slate-50' }}">
                    {{ $category->name }}
                    <span class="ml-1 text-xs text-slate-400">{{ $category->files_count }}</span>
                </a>
            @endforeach
        </div>

        @if ($featuredFiles->isNotEmpty())
            <section class="mb-12">
                <div class="mb-5 flex items-center justify-between gap-4">
                    <div>
                        <h2 class="text-2xl font-bold">Arquivos em destaque</h2>
                        <p class="mt-1 text-sm text-slate-500">Materiais priorizados pela Inovasoft Tecnologia.</p>
                    </div>
                </div>
                <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                    @foreach ($featuredFiles as $file)
                        @include('partials.file-card', ['file' => $file])
                    @endforeach
                </div>
            </section>
        @endif

        <section>
            <div class="mb-5 flex items-end justify-between gap-4">
                <div>
                    <h2 class="text-2xl font-bold">Todos os arquivos</h2>
                    <p class="mt-1 text-sm text-slate-500">{{ number_format($files->total(), 0, ',', '.') }} arquivo(s) disponível(is).</p>
                </div>
            </div>

            @if ($files->isNotEmpty())
                <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                    @foreach ($files as $file)
                        @include('partials.file-card', ['file' => $file])
                    @endforeach
                </div>
                <div class="mt-8">
                    {{ $files->links() }}
                </div>
            @else
                <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 px-5 py-12 text-center">
                    <div class="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-lg bg-white text-slate-500">
                        <i data-lucide="search-x" class="h-6 w-6"></i>
                    </div>
                    <h3 class="font-bold">Nenhum arquivo encontrado</h3>
                    <p class="mt-1 text-sm text-slate-500">Tente ajustar a busca ou escolher outra categoria.</p>
                </div>
            @endif
        </section>
    </main>
@endsection