@extends('layouts.app')

@section('title', 'Tambah Cell-ID Provider')

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="mb-6">
        <a href="{{ route('cell-id-provider-configs.index') }}" class="text-blue-400 hover:text-blue-300 text-sm mb-4 inline-flex items-center gap-2">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Kembali
        </a>
        <h2 class="text-3xl font-bold text-white">Tambah Cell-ID Provider</h2>
        <p class="text-gray-400 text-sm mt-1">Konfigurasi provider baru untuk Cell-ID tracking</p>
    </div>

    <form action="{{ route('cell-id-provider-configs.store') }}" method="POST" class="bg-surface border border-border rounded-xl p-6 space-y-6">
        @csrf

        <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">Provider *</label>
            <select name="provider" required class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="">Pilih Provider</option>
                @foreach($availableProviders as $key => $name)
                <option value="{{ $key }}" {{ old('provider', request('provider')) == $key ? 'selected' : '' }}>{{ $name }}</option>
                @endforeach
            </select>
            @error('provider')
            <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">Nama Provider *</label>
            <input type="text" name="name" value="{{ old('name') }}" required
                   class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                   placeholder="Telkomsel">
            @error('name')
            <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">API URL *</label>
            <input type="url" name="api_url" value="{{ old('api_url') }}" required
                   class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                   placeholder="https://api.provider.com/cell-id">
            @error('api_url')
            <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">API Key *</label>
            <input type="text" name="api_key" value="{{ old('api_key') }}" required
                   class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                   placeholder="Masukkan API Key">
            @error('api_key')
            <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">API Secret</label>
            <input type="text" name="api_secret" value="{{ old('api_secret') }}"
                   class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                   placeholder="Masukkan API Secret (opsional)">
            @error('api_secret')
            <p class="text-red-400 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Priority</label>
                <input type="number" name="priority" value="{{ old('priority', 0) }}" min="0" max="100"
                       class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p class="text-xs text-gray-500 mt-1">Lower number = higher priority</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Timeout (seconds)</label>
                <input type="number" name="timeout_seconds" value="{{ old('timeout_seconds', 5) }}" min="1" max="60"
                       class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">Max Retries</label>
            <input type="number" name="max_retries" value="{{ old('max_retries', 3) }}" min="1" max="10"
                   class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
            <textarea name="description" rows="3"
                      class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Deskripsi konfigurasi provider">{{ old('description') }}</textarea>
        </div>

        <div class="flex items-center">
            <input type="checkbox" name="is_enabled" id="is_enabled" value="1" {{ old('is_enabled') ? 'checked' : '' }}
                   class="w-4 h-4 text-blue-600 bg-white/5 border-white/10 rounded focus:ring-blue-500">
            <label for="is_enabled" class="ml-2 text-sm text-gray-300">Enable provider</label>
        </div>

        <div class="flex gap-3 pt-4 border-t border-white/5">
            <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
                Simpan
            </button>
            <a href="{{ route('cell-id-provider-configs.index') }}" class="px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-lg transition">
                Batal
            </a>
        </div>
    </form>
</div>
@endsection