@extends('frontend.layouts.app')

@php
    use App\Helpers\Helper;

    $isEn = app()->getLocale() == 'en';
    $pick = fn($m) => $isEn ? $m->name_en : $m->name_np ?? $m->name_en;

    // icon + colour per file extension
    $types = [
        'pdf' => ['fa-file-pdf', 'text-red-600 bg-red-50'],
        'doc' => ['fa-file-word', 'text-blue-600 bg-blue-50'],
        'docx' => ['fa-file-word', 'text-blue-600 bg-blue-50'],
        'xls' => ['fa-file-excel', 'text-green-600 bg-green-50'],
        'xlsx' => ['fa-file-excel', 'text-green-600 bg-green-50'],
        'csv' => ['fa-file-excel', 'text-green-600 bg-green-50'],
        'ppt' => ['fa-file-powerpoint', 'text-orange-600 bg-orange-50'],
        'pptx' => ['fa-file-powerpoint', 'text-orange-600 bg-orange-50'],
        'jpg' => ['fa-file-image', 'text-purple-600 bg-purple-50'],
        'jpeg' => ['fa-file-image', 'text-purple-600 bg-purple-50'],
        'png' => ['fa-file-image', 'text-purple-600 bg-purple-50'],
        'zip' => ['fa-file-zipper', 'text-yellow-600 bg-yellow-50'],
        'rar' => ['fa-file-zipper', 'text-yellow-600 bg-yellow-50'],
    ];

    $fileSize = function ($path) {
        $full = public_path($path);
        if (!$path || !is_file($full)) {
            return null;
        }
        $b = filesize($full);
        return $b >= 1048576 ? round($b / 1048576, 1) . ' MB' : max(1, round($b / 1024)) . ' KB';
    };

    $total = $downloadCategories->sum(fn($c) => $c->downloads->count());
@endphp

@section('title', 'Downloads')

@section('content')
    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => Helper::contentText('pages.download'),
        'subHeading' => Helper::contentText('pages.download_tagline'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('route.download'),
            'route' => route('downloads'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    <section class="section-y">
        <div class="container-page">
            @if ($total > 0)
                <div x-data="{ cat: 'all', q: '' }" class="grid lg:grid-cols-[18rem_1fr] gap-8 items-start">

                    {{-- Categories --}}
                    <aside class="lg:sticky lg:top-28">
                        <h2 class="text-h3 text-primary mb-4">{!! Helper::content('pages.download_filter') !!}</h2>

                        {{-- mobile: dropdown --}}
                        <select x-model="cat" aria-label="{{ Helper::contentText('pages.download_filter') }}"
                            class="lg:hidden block w-full px-3 py-2.5 border border-gray-200 rounded-xl bg-white focus:ring-primary focus:border-primary">
                            <option value="all">{{ $isEn ? 'All files' : 'सबै फाइलहरू' }} ({{ $total }})</option>
                            @foreach ($downloadCategories as $category)
                                <option value="{{ $category->id }}">{{ $pick($category) }}
                                    ({{ $category->downloads->count() }})</option>
                            @endforeach
                        </select>

                        {{-- desktop: list --}}
                        <ul class="hidden lg:flex flex-col gap-2">
                            <li>
                                <button type="button" @click="cat = 'all'"
                                    :class="cat === 'all' ? 'bg-primary text-white shadow' : 'bg-white text-gray-700 hover:bg-primary/10'"
                                    class="w-full flex items-center justify-between gap-3 px-4 py-3 rounded-xl border border-gray-100 text-left text-sm font-medium transition">
                                    <span>{{ $isEn ? 'All files' : 'सबै फाइलहरू' }}</span>
                                    <span class="text-xs opacity-80">{{ $total }}</span>
                                </button>
                            </li>
                            @foreach ($downloadCategories as $category)
                                <li>
                                    <button type="button" @click="cat = '{{ $category->id }}'"
                                        :class="cat === '{{ $category->id }}' ? 'bg-primary text-white shadow' :
                                            'bg-white text-gray-700 hover:bg-primary/10'"
                                        class="w-full flex items-center justify-between gap-3 px-4 py-3 rounded-xl border border-gray-100 text-left text-sm font-medium transition">
                                        <span>{{ $pick($category) }}</span>
                                        <span class="text-xs opacity-80">{{ $category->downloads->count() }}</span>
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    </aside>

                    {{-- Files --}}
                    <div class="min-w-0">
                        <div class="relative mb-6">
                            <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
                                aria-hidden="true"></i>
                            <input type="search" x-model.debounce.150ms="q"
                                placeholder="{{ $isEn ? 'Search files…' : 'फाइल खोज्नुहोस्…' }}"
                                aria-label="{{ $isEn ? 'Search files' : 'फाइल खोज्नुहोस्' }}"
                                class="w-full pl-11 pr-4 py-3 border border-gray-200 rounded-xl bg-white focus:ring-primary focus:border-primary">
                        </div>

                        <div class="space-y-10">
                            @foreach ($downloadCategories as $category)
                                @continue($category->downloads->isEmpty())
                                <div x-show="cat === 'all' || cat === '{{ $category->id }}'">
                                    <h3 class="text-h3 text-primary mb-4 flex items-center gap-3">
                                        {{ $pick($category) }}
                                        <span
                                            class="text-xs font-semibold px-2.5 py-1 rounded-full bg-primary/10 text-primary">{{ $category->downloads->count() }}</span>
                                    </h3>

                                    <ul class="grid gap-3">
                                        @foreach ($category->downloads as $download)
                                            @php
                                                $ext = strtolower(pathinfo($download->file, PATHINFO_EXTENSION));
                                                [$icon, $tone] = $types[$ext] ?? ['fa-file-lines', 'text-gray-600 bg-gray-100'];
                                                $name = $pick($download);
                                                $size = $fileSize($download->file);
                                            @endphp
                                            <li data-file
                                                x-show="!q || @js(mb_strtolower($name)).includes(q.toLowerCase())"
                                                class="card-ui flex items-center gap-4 p-4">
                                                <span
                                                    class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-xl {{ $tone }}">
                                                    <i class="fa-solid {{ $icon }}" aria-hidden="true"></i>
                                                </span>

                                                <div class="min-w-0 flex-1">
                                                    <p class="font-semibold text-gray-900 wrap-break-word">{{ $name }}</p>
                                                    <p class="mt-0.5 text-xs text-gray-500 uppercase tracking-wide">
                                                        {{ $ext ?: 'file' }}@if ($size)
                                                            · {{ $size }}
                                                        @endif
                                                    </p>
                                                </div>

                                                <a href="{{ asset($download->file) }}" download
                                                    class="btn shrink-0 px-4! py-2! text-sm"
                                                    aria-label="{{ strip_tags(Helper::contentText('pages.download')) }}: {{ $name }}">
                                                    <i class="fa-solid fa-download" aria-hidden="true"></i>
                                                    <span class="hidden sm:inline">{!! Helper::content('pages.download') !!}</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endforeach

                            {{-- nothing matches the search --}}
                            <p x-cloak
                                x-show="q && !Array.from($root.querySelectorAll('[data-file]')).some(e => e.style.display !== 'none' && e.offsetParent !== null)"
                                class="text-center text-gray-500 py-10">
                                {{ $isEn ? 'No files match your search.' : 'तपाईंको खोजसँग मेल खाने फाइल भेटिएन।' }}
                            </p>
                        </div>
                    </div>
                </div>
            @else
                <div class="text-center flex flex-col items-center justify-center py-20">
                    <i class="fa-regular fa-folder-open text-5xl text-gray-300 mb-4" aria-hidden="true"></i>
                    <h3 class="text-lg text-primary">{!! Helper::content('pages.no_download') !!}</h3>
                </div>
            @endif
        </div>
    </section>
@endsection