@extends('layouts.app')

@section('title', 'التوثيق والمصادر')

@section('content')
@include('components.page-header', ['title' => 'التوثيق والمصادر'])
<section class="section">
    <div class="container">
        <div class="documents-filter">
            <a href="{{ route('documents') }}" class="{{ !$type ? 'active' : '' }}">الكل</a>
            <a href="{{ route('documents', ['type' => 'manuscript']) }}" class="{{ $type === 'manuscript' ? 'active' : '' }}">مخطوطات</a>
            <a href="{{ route('documents', ['type' => 'document']) }}" class="{{ $type === 'document' ? 'active' : '' }}">وثائق</a>
            <a href="{{ route('documents', ['type' => 'image']) }}" class="{{ $type === 'image' ? 'active' : '' }}">صور</a>
        </div>
        <div class="cards-grid">
            @forelse($documents as $doc)
                <div class="document-card">
                    <h3>{{ $doc->title }}</h3>
                    <p style="color:#666;font-size:.9rem;">{{ $doc->description }}</p>
                    <p style="margin:.5rem 0;"><span class="btn-outline" style="font-size:.8rem;">{{ $doc->type }}</span></p>
                    <a href="{{ asset('storage/'.$doc->file_path) }}" class="btn-primary" target="_blank" style="margin-top:1rem;font-size:.9rem;">عرض / تحميل</a>
                </div>
            @empty
                <p>لا توجد وثائق حالياً.</p>
            @endforelse
        </div>
        <div class="pagination">{{ $documents->withQueryString()->links() }}</div>
    </div>
</section>
@endsection