@extends('layouts.app')

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

@section('content')
<div>
    <div class="flex justify-between items-center mb-6">
        <div>
            <h2 class="text-3xl font-bold text-white">Cell-ID Provider Configuration</h2>
            <p class="text-gray-400 text-sm mt-1">Konfigurasi provider untuk Cell-ID tracking</p>
        </div>
        <a href="{{ route('cell-id-provider-configs.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition flex items-center gap-2">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Tambah Provider
        </a>
    </div>

    <!-- Info Alert -->
    <div class="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 mb-6">
        <div class="flex items-start gap-3">
            <i data-lucide="info" class="w-5 h-5 text-blue-400 mt-0.5"></i>
            <div class="flex-1">
                <p class="text-sm text-blue-300">
                    <strong>Catatan:</strong> Cell-ID tracking memerlukan integrasi dengan provider (Telkomsel, Indosat, XL, Tri). 
                    Pastikan Anda memiliki API credentials dari provider sebelum mengkonfigurasi.
                </p>
            </div>
        </div>
    </div>

    <!-- Providers List -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        @forelse($providers as $provider)
        <div class="bg-surface border border-border rounded-xl p-6 hover:border-blue-500/50 transition">
            <div class="flex items-start justify-between mb-4">
                <div>
                    <h3 class="text-lg font-semibold text-white">{{ $provider->name }}</h3>
                    <p class="text-sm text-gray-400">{{ $provider->provider }}</p>
                </div>
                <div class="flex items-center gap-2">
                    <form action="{{ route('cell-id-provider-configs.toggle-enabled', $provider) }}" method="POST" class="inline">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 {{ $provider->is_enabled ? 'bg-blue-600' : 'bg-gray-600' }}">
                            <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform {{ $provider->is_enabled ? 'translate-x-6' : 'translate-x-1' }}"></span>
                        </button>
                    </form>
                </div>
            </div>

            <div class="space-y-2 mb-4">
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-400">Status:</span>
                    <span class="px-2 py-1 rounded text-xs font-medium {{ $provider->is_enabled ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400' }}">
                        {{ $provider->is_enabled ? 'Enabled' : 'Disabled' }}
                    </span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-400">Priority:</span>
                    <span class="text-white">{{ $provider->priority }}</span>
                </div>
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-400">Configured:</span>
                    <span class="px-2 py-1 rounded text-xs font-medium {{ $provider->isConfigured() ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400' }}">
                        {{ $provider->isConfigured() ? 'Yes' : 'No' }}
                    </span>
                </div>
            </div>

            <div class="flex gap-2 pt-4 border-t border-white/5">
                <a href="{{ route('cell-id-provider-configs.show', $provider) }}" class="flex-1 bg-white/5 hover:bg-white/10 text-white px-3 py-2 rounded-lg text-sm transition text-center">
                    View
                </a>
                <a href="{{ route('cell-id-provider-configs.edit', $provider) }}" class="flex-1 bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 px-3 py-2 rounded-lg text-sm transition text-center">
                    Edit
                </a>
                <button onclick="testConnection({{ $provider->id }})" class="bg-green-600/20 hover:bg-green-600/30 text-green-400 px-3 py-2 rounded-lg text-sm transition">
                    Test
                </button>
            </div>
        </div>
        @empty
        <div class="col-span-full bg-surface border border-border rounded-xl p-12 text-center">
            <i data-lucide="wifi-off" class="w-12 h-12 text-gray-500 mx-auto mb-4"></i>
            <p class="text-gray-400 mb-4">Belum ada provider yang dikonfigurasi</p>
            <a href="{{ route('cell-id-provider-configs.create') }}" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition">
                Tambah Provider Pertama
            </a>
        </div>
        @endforelse
    </div>

    <!-- Available Providers -->
    @if(count($providerOptions) > count($providers))
    <div class="mt-6 bg-surface border border-border rounded-xl p-6">
        <h3 class="text-lg font-semibold text-white mb-4">Available Providers</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            @foreach($providerOptions as $key => $name)
                @if(!$providers->contains('provider', $key))
                <div class="bg-white/5 border border-white/10 rounded-lg p-3 text-center">
                    <p class="text-sm text-gray-400">{{ $name }}</p>
                    <a href="{{ route('cell-id-provider-configs.create', ['provider' => $key]) }}" class="text-xs text-blue-400 hover:text-blue-300 mt-2 inline-block">
                        Configure
                    </a>
                </div>
                @endif
            @endforeach
        </div>
    </div>
    @endif
</div>

<script>
async function testConnection(providerId) {
    const response = await fetch(`/cell-id-provider-configs/${providerId}/test-connection`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json',
        },
    });
    
    const result = await response.json();
    
    if (result.success) {
        alert('Connection successful!');
    } else {
        alert('Connection failed: ' + result.message);
    }
}
</script>
@endsection