@extends('layouts.app')

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

    <a href="{{ route('hosted_websites.create') }}" 
       class="bg-emerald-600 text-white px-4 py-2 rounded hover:bg-emerald-700 shadow mb-4 inline-block">
        Add New Hosted Website
    </a>

    @if(session('success'))
        <div class="mb-4 text-green-700 bg-green-100 p-3 rounded">{{ session('success') }}</div>
    @endif

    <table class="min-w-full bg-white border rounded shadow">
        <thead>
            <tr class="bg-gray-100">
                <th class="py-2 px-4 border text-left">Client Name</th>
                <th class="py-2 px-4 border text-left">Domain Name</th>
                <th class="py-2 px-4 border text-left">Hosting Provider</th>
                <th class="py-2 px-4 border text-left">PHP App Path</th>
                <th class="py-2 px-4 border text-left">MySQL DB Name</th>
                <th class="py-2 px-4 border text-left">Bucket Name</th>
                <th class="py-2 px-4 border text-left">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($hostedWebsites as $website)
                <tr class="hover:bg-gray-50">
                    <td class="py-2 px-4 border">{{ $website->client_name }}</td>
                    <td class="py-2 px-4 border">{{ $website->domain_name }}</td>
                    <td class="py-2 px-4 border">{{ $website->hosting->provider ?? 'N/A' }}</td>
                    <td class="py-2 px-4 border break-all">{{ $website->php_app_path ?? '-' }}</td>
                    <td class="py-2 px-4 border">{{ $website->mysql_db_name ?? '-' }}</td>
                    <td class="py-2 px-4 border">{{ $website->bucket_name ?? '-' }}</td>
                    <td class="py-2 px-4 border whitespace-nowrap">
                        <a href="{{ route('hosted_websites.edit', $website) }}" 
                           class="text-blue-600 hover:underline mr-2">Edit</a>
                        <form method="POST" action="{{ route('hosted_websites.destroy', $website) }}" 
                              class="inline-block" onsubmit="return confirm('Are you sure?');">
                            @csrf
                            @method('DELETE')
                            <button class="text-red-600 hover:underline">Delete</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="text-center p-4">No hosted websites found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

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