@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-8">
    <h2 class="text-2xl font-semibold mb-6">Monthly Usage History for {{ $hostedWebsite->domain_name }}</h2>

    <a href="{{ route('hosted_websites.index') }}" class="mb-4 inline-block text-blue-600 hover:underline">← Back to Hosted Websites</a>

    <table class="min-w-full bg-white border rounded shadow">
        <thead>
            <tr class="bg-gray-100">
                <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">Calculated Cost (₹)</th>
            </tr>
        </thead>
        <tbody>
            @forelse($histories as $history)
                <tr class="hover:bg-gray-50">
                    <td class="py-2 px-4 border">{{ $history->month_year }}</td>
                    <td class="py-2 px-4 border">{{ $history->php_app_space_gb }}</td>
                    <td class="py-2 px-4 border">{{ $history->mysql_db_space_gb }}</td>
                    <td class="py-2 px-4 border">{{ $history->object_storage_space_gb }}</td>
                    <td class="py-2 px-4 border">{{ $history->total_space_used_gb }}</td>
                    <td class="py-2 px-4 border">{{ $history->calculated_cost }}</td>
                </tr>
            @empty
                <tr><td colspan="6" class="text-center p-4">No usage history found.</td></tr>
            @endforelse
        </tbody>
    </table>

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