@csrf

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Name</label>
        <input type="text" name="name" value="{{ old('name', $client->name ?? '') }}" required class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">URL</label>
        <input type="url" name="url" value="{{ old('url', $client->url ?? '') }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('url')" class="mt-2" />
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700">Sort order</label>
        <input type="number" name="sort_order" value="{{ old('sort_order', $client->sort_order ?? 0) }}" min="0" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('sort_order')" class="mt-2" />
    </div>

    <div class="flex items-center gap-2 pt-6">
        <input type="checkbox" name="is_active" value="1" class="rounded border-gray-300 text-gray-900 focus:ring-gray-900" @checked(old('is_active', $client->is_active ?? false)) />
        <span class="text-sm text-gray-700">Active</span>
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Logo</label>
        <input type="file" name="logo" accept="image/*" class="mt-1 w-full text-sm" />
        <x-input-error :messages="$errors->get('logo')" class="mt-2" />
        @if (!empty($client?->logo_path))
            <div class="mt-3 flex items-center gap-3 text-sm">
                <img src="{{ asset('storage/'.$client->logo_path) }}" class="w-24 h-14 object-contain rounded-md border border-gray-200 bg-white" alt="" />
                <label class="inline-flex items-center gap-2">
                    <input type="checkbox" name="remove_logo" value="1" class="rounded border-gray-300 text-gray-900 focus:ring-gray-900" />
                    <span>Remove</span>
                </label>
            </div>
        @endif
    </div>
</div>

<div class="mt-6 flex items-center gap-3">
    <button type="submit" class="rounded-md bg-gray-900 px-5 py-2 text-white text-sm font-semibold hover:bg-black">Save</button>
    <a href="{{ route('admin.clients.index') }}" class="text-sm font-semibold text-gray-700 hover:underline">Cancel</a>
</div>