@extends('front.layouts.app')

@section('title', 'الملفات الدوائية المتاحة - MedExchange')

@section('styles')
<style>
    .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-top: 30px; }
    .file-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s; border: 1px solid #f1f5f9; display: flex; flex-direction: column; }
    .file-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
    .file-header { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); padding: 20px; color: white; }
    .file-category { font-size: 0.8rem; opacity: 0.9; margin-bottom: 5px; display: block; }
    .file-title { font-size: 1.25rem; font-weight: 800; line-height: 1.4; }
    .file-body { padding: 20px; flex-grow: 1; }
    .file-price { font-size: 1.5rem; font-weight: 800; color: var(--primary-color); margin-bottom: 15px; display: block; }
    .file-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
    .meta-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #64748b; }
    .file-footer { padding: 15px 20px; background: #f8fafc; border-top: 1px solid #f1f5f9; }
    .btn-details { display: block; width: 100%; text-align: center; background: var(--primary-color); color: white; padding: 10px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: 0.3s; }
    .btn-details:hover { background: var(--primary-dark); }
</style>
@endsection

@section('content')
<main class="main-content" style="padding-top: 100px; padding-bottom: 60px;">
    <div class="container">
        <div class="section-header" style="text-align: center; margin-bottom: 40px;">
            <h1 style="font-size: 2.5rem; color: #1e293b; font-weight: 900; margin-bottom: 10px;">سوق الملفات الدوائية</h1>
            <p style="color: #64748b; font-size: 1.1rem;">تصفح واستثمر في الملفات الدوائية المرخصة</p>
        </div>

        <div class="file-grid">
            @forelse($files as $file)
                <div class="file-card">
                    <div class="file-header">
                        <span class="file-category">{{ $file->category }}</span>
                        <h3 class="file-title">{{ $file->name }}</h3>
                    </div>
                    <div class="file-body">
                        <span class="file-price">{{ number_format($file->price, 2) }} ج.م</span>
                        <div class="file-meta">
                            <div class="meta-item"><i class="fas fa-handshake"></i> <span>نوع العرض: {{ $file->allow_direct_sale ? 'بيع مباشر' : '' }} {{ $file->allow_investment ? 'إستثمار' : '' }}</span></div>
                            <div class="meta-item"><i class="fas fa-user"></i> <span>بواسطة: {{ $file->user->name ?? 'مكتب علمي' }}</span></div>
                        </div>
                        <p style="color: #64748b; font-size: 0.9rem; line-height: 1.6; height: 3.2em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
                            {{ $file->description ?: 'لا يوجد وصف متاح لهذا الملف.' }}
                        </p>
                    </div>
                    <div class="file-footer">
                        <a href="{{ route('pharmaceutical-files.show', $file->id) }}" class="btn-details">تفاصيل التواصل والشراء</a>
                    </div>
                </div>
            @empty
                <div style="grid-column: 1 / -1; text-align: center; padding: 100px 0; background: #f8fafc; border-radius: 20px; border: 2px dashed #e2e8f0;">
                    <i class="fas fa-folder-open" style="font-size: 4rem; color: #cbd5e1; margin-bottom: 20px;"></i>
                    <h3 style="color: #64748b;">لا توجد ملفات متاحة حالياً</h3>
                    <p style="color: #94a3b8;">يرجى العودة في وقت لاحق لتصفح أحدث العروض</p>
                </div>
            @endforelse
        </div>

        <div style="margin-top: 40px;">{{ $files->links() }}</div>
    </div>
</main>
@endsection