@extends('layouts.layout')

@section('title', 'API Bağlantı Ayarları')
@section('header_title', 'Bağlantı & API')
@section('header_subtitle', 'Masaüstü (WinForms) uygulamasının web paneliyle haberleşebilmesi için gerekli ayarlar.')

@section('content')
<div class="card" style="max-width: 800px;">
    <div class="card-title">Masaüstü Bağlantı Bilgileri</div>
    
    <div class="settings-section">
        <p style="color: var(--text-secondary); font-size: 0.95rem;">
            Aşağıdaki bilgileri kopyalayarak C# Windows Forms uygulamanızdaki <strong>Web Bağlantı Paneli</strong> alanına yapıştırın. Bu sayede program buradaki sırayı kontrol edip taramayı başlatabilir.
        </p>

        <!-- Site URL Box -->
        <div class="form-group">
            <label>SİTE BAĞLANTI ADRESİ (SITE URL)</label>
            <div class="api-key-box">
                <span class="key-text" id="siteUrlText">{{ $siteUrl }}</span>
                <button class="btn btn-secondary btn-sm" onclick="copyToClipboard('siteUrlText', this)">
                    <ion-icon name="copy-outline"></ion-icon>
                    Kopyala
                </button>
            </div>
        </div>

        <!-- API Key Box -->
        <div class="form-group">
            <label>GÜVENLİK ANAHTARI (API KEY)</label>
            <div class="api-key-box">
                <span class="key-text" id="apiKeyText">{{ $apiKey }}</span>
                <button class="btn btn-secondary btn-sm" onclick="copyToClipboard('apiKeyText', this)">
                    <ion-icon name="copy-outline"></ion-icon>
                    Kopyala
                </button>
            </div>
        </div>

        <!-- Setup Guide -->
        <div class="info-box">
            <h4 style="color: var(--text-primary); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 6px;">
                <ion-icon name="information-circle-outline" style="color: var(--primary); font-size: 20px;"></ion-icon>
                Entegrasyon Nasıl Çalışır?
            </h4>
            <ol style="margin-left: 1.25rem; display: flex; flex-direction: column; gap: 6px; margin-top: 0.5rem;">
                <li>Web paneldeki <strong>Panel Kontrol</strong> sayfasından yeni tarama görevleri (ülke, şehir, sektör) ekleyin. Görevler "Sırada" (pending) olarak bekleyecektir.</li>
                <li>Windows Forms uygulamasını açıp <strong>Web Modu</strong> kutusunu işaretleyin.</li>
                <li>Uygulamaya yukarıdaki <strong>Bağlantı Adresi</strong> ve <strong>API Anahtarı</strong> değerlerini girip "Bağlan" tuşuna basın.</li>
                <li>Masaüstü uygulaması arka planda her 10 saniyede bir paneli sorgular. "Sırada" bekleyen bir görev bulduğunda otomatik olarak Chrome'u açıp Google Maps taramasını başlatır.</li>
                <li>Masaüstü uygulaması işletmeleri taradıkça web sunucusuna anlık olarak gönderir.</li>
                <li>Sunucu, gelen verinin <strong>telefon, web sitesi veya isim + bölge</strong> kombinasyonunu kontrol ederek veritabanında zaten kayıtlı olup olmadığına bakar. Zayıf/aynı veriler elenir, benzersiz olanlar veritabanına kaydedilir.</li>
                <li>Tarama bittiğinde masaüstü programı görevi tamamlandı olarak işaretler ve sıradaki yeni işe geçer.</li>
            </ol>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function copyToClipboard(elementId, button) {
        const text = document.getElementById(elementId).innerText;
        navigator.clipboard.writeText(text).then(() => {
            const originalHTML = button.innerHTML;
            button.innerHTML = '<ion-icon name="checkmark-outline"></ion-icon> Kopyalandı!';
            button.style.borderColor = 'var(--success)';
            button.style.color = 'var(--success)';
            setTimeout(() => {
                button.innerHTML = originalHTML;
                button.style.borderColor = '';
                button.style.color = '';
            }, 2000);
        }).catch(err => {
            alert('Kopyalama başarısız oldu.');
        });
    }
</script>
@endpush