@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-8">
    <h2 class="text-2xl font-semibold mb-6">Website Usage History</h2>

    <table class="min-w-full bg-white border rounded shadow">
        <thead>
            <tr class="bg-gray-100">
                <th class="py-2 px-4 border">Domain</th>
                <th class="py-2 px-4 border">Month-Year</th>
                <th class="py-2 px-4 border">PHP App Space (GB)</th>
                <th class="py-2 px-4 border">MySQL DB Space (GB)</th>
                <th class="py-2 px-4 border">Object Storage (GB)</th>
                <th class="py-2 px-4 border">Total Space (GB)</th>
                <th class="py-2 px-4 border">Cost (₹)</th>
            </tr>
        </thead>
        <tbody>
            @forelse($usageRecords as $record)
                <tr>
                    <td class="py-2 px-4 border">{{ $record->hostedWebsite->domain_name }}</td>
                    <td class="py-2 px-4 border">{{ $record->month_year }}</td>
                    <td class="py-2 px-4 border">{{ $record->php_app_space_gb }}</td>
                    <td class="py-2 px-4 border">{{ $record->mysql_db_space_gb }}</td>
                    <td class="py-2 px-4 border">{{ $record->object_storage_space_gb }}</td>
                    <td class="py-2 px-4 border">{{ $record->total_space_used_gb }}</td>
                    <td class="py-2 px-4 border">{{ $record->calculated_cost }}</td>
                </tr>
            @empty
                <tr><td colspan="7" class="text-center p-4">No usage history found.</td></tr>
            @endforelse
        </tbody>
    </table>

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