@extends('layouts.app')

@section('title', 'إدارة الملفات المشفرة')

@section('content')
<div class="container mx-auto py-6">
    @if (session('status'))
        <div class="mb-4 rounded bg-green-100 p-3 text-green-800">
            {{ session('status') }}
        </div>
    @endif

    <div class="mb-6 rounded border border-slate-200 bg-white p-5 shadow">
        <h2 class="mb-4 text-xl font-semibold text-slate-800">رفع ملف جديد</h2>
        <form method="POST" action="{{ route('secure-files.store') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-600">اختر الملف</label>
                <input type="file" name="file" required class="mt-1 w-full rounded border border-slate-300 p-2">
                @error('file')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-600">بيانات وصفية (اختياري)</label>
                <textarea name="metadata[description]" rows="3" class="mt-1 w-full rounded border border-slate-300 p-2" placeholder="اكتب وصفاً مختصراً"></textarea>
            </div>
            <div class="text-left">
                <button type="submit" class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
                    رفع الملف المشفر
                </button>
            </div>
        </form>
    </div>

    <div class="rounded border border-slate-200 bg-white p-5 shadow">
        <div class="mb-4 flex flex-col justify-between gap-4 md:flex-row md:items-center">
            <h2 class="text-xl font-semibold text-slate-800">قائمة الملفات</h2>
            <form method="GET" action="{{ route('secure-files.index') }}" class="flex gap-2">
                <input type="search" name="search" value="{{ $search }}" class="rounded border border-slate-300 p-2" placeholder="ابحث باسم الملف">
                <button type="submit" class="rounded bg-slate-600 px-4 py-2 text-white hover:bg-slate-700">بحث</button>
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 text-right">
                <thead class="bg-slate-50 text-slate-600">
                    <tr>
                        <th class="px-4 py-2">الاسم</th>
                        <th class="px-4 py-2">الحجم</th>
                        <th class="px-4 py-2">المالك</th>
                        <th class="px-4 py-2">تاريخ الرفع</th>
                        <th class="px-4 py-2">الإجراءات</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($files as $file)
                        <tr>
                            <td class="px-4 py-2 font-medium text-slate-700">{{ $file->original_name }}</td>
                            <td class="px-4 py-2 text-slate-600">{{ number_format($file->size / 1024, 2) }} كيلوبايت</td>
                            <td class="px-4 py-2 text-slate-600">{{ $file->owner->name }}</td>
                            <td class="px-4 py-2 text-slate-600">{{ $file->created_at->format('Y-m-d H:i') }}</td>
                            <td class="px-4 py-2">
                                <div class="flex justify-end gap-2">
                                    <a href="{{ route('secure-files.download', $file) }}" class="rounded bg-emerald-600 px-3 py-1 text-sm text-white hover:bg-emerald-700">
                                        تنزيل
                                    </a>
                                    @can('delete', $file)
                                        <form method="POST" action="{{ route('secure-files.destroy', $file) }}" onsubmit="return confirm('هل أنت متأكد من حذف الملف؟');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="rounded bg-red-600 px-3 py-1 text-sm text-white hover:bg-red-700">حذف</button>
                                        </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-6 text-center text-slate-500">لا توجد ملفات مسجلة حالياً.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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