@php
    $inputClass = 'mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100';
@endphp

<div class="grid gap-6 lg:grid-cols-2">
    <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
        <h3 class="text-lg font-bold text-slate-950 dark:text-white">Provider</h3>

        <div class="mt-5 space-y-4">
            <div>
                <label for="provider_name" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Provider Name</label>
                <select id="provider_name" name="provider_name" class="{{ $inputClass }}" required>
                    @foreach ($providers as $value => $label)
                        <option value="{{ $value }}" @selected(old('provider_name', $setting->provider_name) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('provider_name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="status" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Status</label>
                <select id="status" name="status" class="{{ $inputClass }}" required>
                    <option value="active" @selected(old('status', $setting->status) === 'active')>Active</option>
                    <option value="inactive" @selected(old('status', $setting->status) === 'inactive')>Inactive</option>
                </select>
                @error('status') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>
    </div>

    <div class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
        <h3 class="text-lg font-bold text-slate-950 dark:text-white">API Key</h3>
        <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
            The key is encrypted before saving. Leave this field blank while editing to keep the current key.
        </p>

        <div class="mt-5">
            <label for="api_key" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Secret Key</label>
            <input
                id="api_key"
                name="api_key"
                type="password"
                autocomplete="off"
                class="{{ $inputClass }}"
                @required(! $setting->exists)
            >
            @error('api_key') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror

            @if ($setting->exists)
                <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">Current key: {{ $setting->maskedApiKey() }}</p>
            @endif
        </div>
    </div>
</div>

<div class="mt-6 flex flex-wrap gap-3">
    <button type="submit" class="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-bold text-white shadow-sm shadow-blue-600/20 transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
        {{ $setting->exists ? 'Update API Setting' : 'Save API Setting' }}
    </button>
    <a href="{{ route('admin.api-settings.index') }}" class="rounded-lg border border-blue-100 px-5 py-2.5 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Cancel</a>
</div>
