@extends('layouts.app')

@section('title', 'Document Storage Dashboard')

@section('content')
<div class="container mx-auto px-4 py-6">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-800">Document Storage Management</h1>
        <p class="text-gray-600 mt-2">Manage secure document storage, encryption, and access logs</p>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <!-- Total Documents -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 font-semibold">Total Documents</p>
                    <p class="text-3xl font-bold text-blue-600 mt-2">{{ $stats['total_documents'] ?? 0 }}</p>
                </div>
                <div class="text-4xl text-blue-100">
                    <i class="fas fa-file-pdf"></i>
                </div>
            </div>
        </div>

        <!-- Storage Used -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 font-semibold">Storage Used</p>
                    <p class="text-3xl font-bold text-green-600 mt-2">{{ formatBytes($stats['total_storage_size'] ?? 0) }}</p>
                </div>
                <div class="text-4xl text-green-100">
                    <i class="fas fa-database"></i>
                </div>
            </div>
        </div>

        <!-- Encrypted Documents -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 font-semibold">Encrypted</p>
                    <p class="text-3xl font-bold text-purple-600 mt-2">{{ $stats['encrypted_documents'] ?? 0 }}</p>
                </div>
                <div class="text-4xl text-purple-100">
                    <i class="fas fa-lock"></i>
                </div>
            </div>
        </div>

        <!-- Total Accesses -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 font-semibold">Total Accesses</p>
                    <p class="text-3xl font-bold text-orange-600 mt-2">{{ $stats['total_accesses'] ?? 0 }}</p>
                </div>
                <div class="text-4xl text-orange-100">
                    <i class="fas fa-eye"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Two Column Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <!-- Storage Type Breakdown -->
        <div class="lg:col-span-1 bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">Storage Types</h2>
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="font-semibold text-gray-700">Lifetime Storage</p>
                        <p class="text-sm text-gray-600">Permanent documents</p>
                    </div>
                    <div class="text-2xl font-bold text-green-600">
                        {{ $stats['lifetime_storage'] ?? 0 }}
                    </div>
                </div>
                <hr>
                <div class="flex items-center justify-between">
                    <div>
                        <p class="font-semibold text-gray-700">Archived</p>
                        <p class="text-sm text-gray-600">Old versions</p>
                    </div>
                    <div class="text-2xl font-bold text-gray-600">
                        {{ $stats['archived'] ?? 0 }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="lg:col-span-2 bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">Actions</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <button class="flex items-center justify-center px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                    <i class="fas fa-archive mr-2"></i>
                    Archive Old Documents
                </button>
                <button class="flex items-center justify-center px-4 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition">
                    <i class="fas fa-sync mr-2"></i>
                    Verify Encryption
                </button>
                <button class="flex items-center justify-center px-4 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition">
                    <i class="fas fa-download mr-2"></i>
                    Export Logs
                </button>
                <button class="flex items-center justify-center px-4 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-lg transition">
                    <i class="fas fa-bar-chart mr-2"></i>
                    View Statistics
                </button>
            </div>
        </div>
    </div>

    <!-- Tabs for Different Views -->
    <div class="bg-white rounded-lg shadow">
        <div class="border-b">
            <nav class="flex gap-0">
                <button class="px-6 py-4 font-semibold text-gray-800 border-b-2 border-blue-600 hover:bg-gray-50 transition" id="tab-stored">
                    <i class="fas fa-folder mr-2"></i>Stored Documents
                </button>
                <button class="px-6 py-4 font-semibold text-gray-600 hover:bg-gray-50 border-b-2 border-transparent transition" id="tab-access">
                    <i class="fas fa-list mr-2"></i>Access Logs
                </button>
                <button class="px-6 py-4 font-semibold text-gray-600 hover:bg-gray-50 border-b-2 border-transparent transition" id="tab-sharing">
                    <i class="fas fa-share-alt mr-2"></i>Document Sharing
                </button>
            </nav>
        </div>

        <div class="p-6">
            <!-- Stored Documents Tab -->
            <div id="content-stored">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Document</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Client</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Type</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Size</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Stored</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Accesses</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y">
                            <!-- Sample Row -->
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3">
                                    <div class="flex items-center">
                                        <i class="fas fa-file-pdf text-red-500 mr-2"></i>
                                        <span class="font-semibold text-gray-800">Will_Client_001.pdf</span>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-gray-800">John Doe</td>
                                <td class="px-4 py-3">
                                    <span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-semibold">Will</span>
                                </td>
                                <td class="px-4 py-3 text-gray-800">2.4 MB</td>
                                <td class="px-4 py-3 text-gray-600 text-sm">2024-12-03</td>
                                <td class="px-4 py-3 text-gray-800 font-bold">5</td>
                                <td class="px-4 py-3">
                                    <button class="text-blue-600 hover:text-blue-800 mr-3" title="View">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="text-green-600 hover:text-green-800 mr-3" title="Download">
                                        <i class="fas fa-download"></i>
                                    </button>
                                    <button class="text-purple-600 hover:text-purple-800 mr-3" title="Share">
                                        <i class="fas fa-share"></i>
                                    </button>
                                    <button class="text-red-600 hover:text-red-800" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            <!-- More rows would go here -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Access Logs Tab (Hidden by default) -->
            <div id="content-access" class="hidden">
                <div class="space-y-3">
                    <div class="bg-gray-50 p-4 rounded flex justify-between items-center">
                        <div>
                            <p class="font-semibold text-gray-800">Document Downloaded</p>
                            <p class="text-sm text-gray-600">will_client_001.pdf by Admin - 2024-12-03 10:45:23</p>
                        </div>
                        <div class="text-green-600">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="bg-gray-50 p-4 rounded flex justify-between items-center">
                        <div>
                            <p class="font-semibold text-gray-800">Document Shared</p>
                            <p class="text-sm text-gray-600">trust_client_002.pdf with user@example.com - 2024-12-03 09:30:15</p>
                        </div>
                        <div class="text-blue-600">
                            <i class="fas fa-share-alt"></i>
                        </div>
                    </div>
                    <div class="bg-gray-50 p-4 rounded flex justify-between items-center">
                        <div>
                            <p class="font-semibold text-gray-800">Document Viewed</p>
                            <p class="text-sm text-gray-600">will_client_003.pdf by Lawyer - 2024-12-03 08:15:42</p>
                        </div>
                        <div class="text-purple-600">
                            <i class="fas fa-eye"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Document Sharing Tab (Hidden by default) -->
            <div id="content-sharing" class="hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Document</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Shared With</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Access Type</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Expires</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Status</th>
                                <th class="text-left px-4 py-3 font-semibold text-gray-700">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y">
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3 font-semibold text-gray-800">Will_Client_001.pdf</td>
                                <td class="px-4 py-3 text-gray-800">executor@example.com</td>
                                <td class="px-4 py-3">
                                    <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-semibold">Download</span>
                                </td>
                                <td class="px-4 py-3 text-gray-600">2025-12-03</td>
                                <td class="px-4 py-3">
                                    <span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-semibold">Active</span>
                                </td>
                                <td class="px-4 py-3">
                                    <button class="text-red-600 hover:text-red-800" title="Revoke">
                                        <i class="fas fa-times-circle"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Tab switching
    document.getElementById('tab-stored').addEventListener('click', function() {
        document.getElementById('content-stored').classList.remove('hidden');
        document.getElementById('content-access').classList.add('hidden');
        document.getElementById('content-sharing').classList.add('hidden');
    });

    document.getElementById('tab-access').addEventListener('click', function() {
        document.getElementById('content-stored').classList.add('hidden');
        document.getElementById('content-access').classList.remove('hidden');
        document.getElementById('content-sharing').classList.add('hidden');
    });

    document.getElementById('tab-sharing').addEventListener('click', function() {
        document.getElementById('content-stored').classList.add('hidden');
        document.getElementById('content-access').classList.add('hidden');
        document.getElementById('content-sharing').classList.remove('hidden');
    });

    // Helper function to format bytes
    function formatBytes(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }
</script>
@endsection