@php
    $inputClass = 'w-full rounded border-gray-300 shadow-sm focus:ring focus:ring-emerald-300 px-3 py-2';
@endphp

<div class="grid md:grid-cols-2 gap-6">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Hosting Provider</label>
        <select name="hosting_id" class="{{ $inputClass }}" required>
            <option value="">-- Select Hosting Provider --</option>
            @foreach($hostings as $hosting)
                <option value="{{ $hosting->id }}" {{ (old('hosting_id', $hostedWebsite->hosting_id ?? '') == $hosting->id) ? 'selected' : '' }}>
                    {{ $hosting->provider }} ({{ $hosting->server_ip }})
                </option>
            @endforeach
        </select>
    </div>

    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Client Name</label>
        <input type="text" name="client_name" value="{{ old('client_name', $hostedWebsite->client_name ?? '') }}" class="{{ $inputClass }}" required>
    </div>
    <div class="md:col-span-2">
        <label class="block text-sm font-medium text-gray-700 mb-1">Domain Name</label>
        <input type="text" name="domain_name" value="{{ old('domain_name', $hostedWebsite->domain_name ?? '') }}" class="{{ $inputClass }}" required>
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">PHP App Path</label>
        <input type="text" name="php_app_path" value="{{ old('php_app_path', $hostedWebsite->php_app_path ?? '') }}" class="{{ $inputClass }}" placeholder="/var/www/html/project" >
    </div>

    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">MySQL Database Name</label>
        <input type="text" name="mysql_db_name" value="{{ old('mysql_db_name', $hostedWebsite->mysql_db_name ?? '') }}" class="{{ $inputClass }}" placeholder="database_name">
    </div>



    <div class="md:col-span-2">
        <label class="block text-sm font-medium text-gray-700 mb-1">Object Storage Bucket Name</label>
        <input type="text" name="bucket_name" value="{{ old('bucket_name', $hostedWebsite->bucket_name ?? '') }}" class="{{ $inputClass }}" placeholder="your-bucket-name">
    </div>
</div>

<div class="text-right mt-6">
    <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-6 py-2 rounded shadow-lg">
        {{ isset($hostedWebsite) ? 'Update Hosted Website' : 'Add Hosted Website' }}
    </button>
</div>