@php $inputClass = 'w-full rounded border-gray-300 shadow-sm focus:ring focus:ring-blue-300'; @endphp
<div class="container mx-auto px-4">
    <div class="grid md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-gray-700">Provider</label>
            <input type="text" name="provider" value="{{ old('provider', $hosting->provider ?? '') }}" class="{{ $inputClass }}">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Server IP</label>
            <input type="text" name="server_ip" value="{{ old('server_ip', $hosting->server_ip ?? '') }}" class="{{ $inputClass }}">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">SSH Username</label>
            <input type="text" name="ssh_username" value="{{ old('ssh_username', $hosting->ssh_username ?? '') }}" class="{{ $inputClass }}">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">SSH Password</label>
            <input type="password" name="ssh_password" class="{{ $inputClass }}">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Total Cost</label>
            <input type="number" step="0.01" name="total_cost" value="{{ old('total_cost', $hosting->total_cost ?? '') }}" class="{{ $inputClass }}">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Cost Duration</label>
            <select name="cost_duration" class="{{ $inputClass }}">
                <option value="Monthly" {{ old('cost_duration', $hosting->cost_duration ?? '') == 'Monthly' ? 'selected' : '' }}>Monthly</option>
                <option value="Yearly" {{ old('cost_duration', $hosting->cost_duration ?? '') == 'Yearly' ? 'selected' : '' }}>Yearly</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Total Disk Space (GB)</label>
            <input type="number" step="0.01" name="total_disk_space" value="{{ old('total_disk_space', $hosting->total_disk_space ?? '') }}" class="{{ $inputClass }}">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Start Date</label>
            <input type="date" name="start_date" value="{{ old('start_date', $hosting->start_date ?? '') }}" class="{{ $inputClass }}">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Expiry Date</label>
            <input type="date" name="expiry_date" value="{{ old('expiry_date', $hosting->expiry_date ?? '') }}" class="{{ $inputClass }}">
        </div>
    </div>
    <div class="text-right mt-6">
        <button type="submit" class="bg-gray-100 hover:bg-emerald-700 text-black text-sm font-bold px-5 py-2 rounded-lg shadow-lg">Save Hosting</button>
    </div>
</div>