@extends('backEnd.master')

@section('mainContent')
<style>
:root {
    --einvoice-primary: #415a77;
    --einvoice-secondary: #778da9;
    --einvoice-success: #2ecc71;
    --einvoice-danger: #e74c3c;
    --einvoice-warning: #f39c12;
    --einvoice-info: #3498db;
    --einvoice-light: #f8f9fa;
    --einvoice-dark: #1b263b;
}

.einvoice-settings {
    padding: 1.5rem;
    background: #f5f7fa;
    min-height: calc(100vh - 60px);
}

.settings-header {
    background: linear-gradient(135deg, var(--einvoice-dark) 0%, var(--einvoice-primary) 100%);
    border-radius: 16px;
    padding: 2rem;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(27, 38, 59, 0.3);
}

.settings-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.settings-header p {
    margin: 0;
    opacity: 0.85;
    font-size: 0.95rem;
}

.settings-header-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.settings-header-actions .btn {
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-light-outline {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
}

.btn-light-outline:hover {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* Connection Status Banner */
.connection-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    transition: all 0.3s;
}

.connection-banner.checking {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
}

.connection-banner.connected {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 1px solid #28a745;
}

.connection-banner.ready {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border: 1px solid #17a2b8;
}

.connection-banner.disconnected {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: 1px solid #dc3545;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.connection-banner.checking .status-icon {
    background: #6c757d;
    color: white;
}

.connection-banner.connected .status-icon {
    background: #28a745;
    color: white;
}

.connection-banner.ready .status-icon {
    background: #17a2b8;
    color: white;
}

.connection-banner.disconnected .status-icon {
    background: #dc3545;
    color: white;
}

.connection-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.connection-info p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Tabs */
.settings-tabs {
    display: flex;
    gap: 0.25rem;
    background: white;
    padding: 0.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.settings-tab {
    flex: 1;
    padding: 0.875rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.settings-tab:hover {
    background: #f8f9fa;
    color: var(--einvoice-primary);
}

.settings-tab.active {
    background: var(--einvoice-primary);
    color: white;
}

.settings-tab i {
    font-size: 1rem;
}

/* Cards */
.settings-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.settings-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eef2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.settings-card-header h3 i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.settings-card-header h3 i.bg-primary { background: rgba(65, 90, 119, 0.15); color: var(--einvoice-primary); }
.settings-card-header h3 i.bg-success { background: rgba(46, 204, 113, 0.15); color: var(--einvoice-success); }
.settings-card-header h3 i.bg-warning { background: rgba(243, 156, 18, 0.15); color: var(--einvoice-warning); }
.settings-card-header h3 i.bg-info { background: rgba(52, 152, 219, 0.15); color: var(--einvoice-info); }
.settings-card-header h3 i.bg-danger { background: rgba(231, 76, 60, 0.15); color: var(--einvoice-danger); }

.settings-card-body {
    padding: 1.5rem;
}

/* Form Elements */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-label .required {
    color: var(--einvoice-danger);
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e5ec;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.form-control:focus {
    border-color: var(--einvoice-primary);
    box-shadow: 0 0 0 3px rgba(65, 90, 119, 0.1);
    outline: none;
}

.form-hint {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.375rem;
}

/* Custom Toggle Switch */
.toggle-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.toggle-switch:hover {
    background: #f0f2f5;
}

.toggle-switch:last-child {
    margin-bottom: 0;
}

.toggle-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.toggle-text h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
}

.toggle-text p {
    margin: 0;
    font-size: 0.8rem;
    color: #6c757d;
}

/* Custom Switch */
.switch {
    position: relative;
    width: 52px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ced4da;
    border-radius: 28px;
    transition: all 0.3s;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch input:checked + .switch-slider {
    background: var(--einvoice-success);
}

.switch input:checked + .switch-slider:before {
    transform: translateX(24px);
}

/* Grid Layout */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Sync Section */
.sync-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.sync-item:hover {
    border-color: var(--einvoice-primary);
    background: #fafbfc;
}

.sync-item:last-child {
    margin-bottom: 0;
}

.sync-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sync-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.sync-details h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.sync-details p {
    margin: 0;
    font-size: 0.8rem;
    color: #6c757d;
}

.sync-details .sync-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    background: #e9ecef;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.25rem;
}

.sync-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-sync {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s;
    position: relative;
}

.btn-sync:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-sync.syncing {
    pointer-events: none;
}

.btn-sync.sync-success {
    background: var(--einvoice-success) !important;
    animation: successPulse 0.5s ease;
}

.btn-sync.sync-error {
    background: var(--einvoice-danger) !important;
    animation: errorShake 0.5s ease;
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.btn-sync-primary {
    background: var(--einvoice-primary);
    color: white;
}

.btn-sync-primary:hover {
    background: var(--einvoice-dark);
}

.btn-sync-outline {
    background: white;
    border: 1px solid #dee2e6;
    color: #495057;
}

.btn-sync-outline:hover {
    border-color: var(--einvoice-primary);
    color: var(--einvoice-primary);
}

/* Tab Panels */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Buttons */
.btn-save {
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--einvoice-primary) 0%, var(--einvoice-dark) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(65, 90, 119, 0.3);
}

.btn-test {
    padding: 0.625rem 1.25rem;
    background: white;
    border: 2px solid var(--einvoice-primary);
    color: var(--einvoice-primary);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-test:hover {
    background: var(--einvoice-primary);
    color: white;
}

/* Resource Links */
.resource-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.resource-link:hover {
    border-color: var(--einvoice-primary);
    background: #fafbfc;
    transform: translateX(4px);
}

.resource-link:last-child {
    margin-bottom: 0;
}

.resource-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.resource-text h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.resource-text p {
    margin: 0;
    font-size: 0.8rem;
    color: #6c757d;
}

/* Password Input */
.password-wrapper {
    position: relative;
}

.password-wrapper .form-control {
    padding-right: 45px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
}

.password-toggle:hover {
    color: var(--einvoice-primary);
}

/* Environment Selector */
.env-selector {
    display: flex;
    gap: 1rem;
}

.env-option {
    flex: 1;
    padding: 1rem;
    border: 2px solid #e0e5ec;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.env-option:hover {
    border-color: var(--einvoice-secondary);
}

.env-option.active {
    border-color: var(--einvoice-primary);
    background: rgba(65, 90, 119, 0.05);
}

.env-option input {
    display: none;
}

.env-option i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.env-option.test i { color: var(--einvoice-warning); }
.env-option.prod i { color: var(--einvoice-success); }

.env-option h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.env-option p {
    margin: 0.25rem 0 0 0;
    font-size: 0.75rem;
    color: #6c757d;
}

/* Alert Messages */
.alert {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-danger {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.alert i {
    margin-top: 2px;
}

.alert-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.5;
}

.alert-close:hover {
    opacity: 1;
}
</style>

<div class="einvoice-settings">
    <!-- Header -->
    <div class="settings-header">
        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
            <div>
                <h1><i class="fas fa-cog me-2"></i>E-Fatura Ayarları</h1>
                <p>E-Fatura, E-Arşiv ve QNB eFinans entegrasyon ayarlarınızı yapılandırın</p>
            </div>
            <div class="settings-header-actions">
                <a href="{{ route('einvoice.dashboard') }}" class="btn btn-light-outline">
                    <i class="fas fa-arrow-left"></i> Dashboard
                </a>
                <a href="{{ route('einvoice.index') }}" class="btn btn-light-outline">
                    <i class="fas fa-list"></i> Faturalar
                </a>
            </div>
        </div>
    </div>

    <!-- Alerts -->
    @if(session('success'))
    <div class="alert alert-success">
        <i class="fas fa-check-circle"></i>
        <span>{{ session('success') }}</span>
        <button type="button" class="alert-close" onclick="this.parentElement.remove()">&times;</button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger">
        <i class="fas fa-exclamation-circle"></i>
        <span>{{ session('error') }}</span>
        <button type="button" class="alert-close" onclick="this.parentElement.remove()">&times;</button>
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger">
        <i class="fas fa-exclamation-circle"></i>
        <div>
            @foreach($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
        <button type="button" class="alert-close" onclick="this.parentElement.remove()">&times;</button>
    </div>
    @endif

    <!-- Connection Banner -->
    <div class="connection-banner checking" id="connectionBanner">
        <div class="connection-status">
            <div class="status-icon">
                <i class="fas fa-spinner fa-spin" id="statusIcon"></i>
            </div>
            <div class="connection-info">
                <h4 id="statusTitle">Bağlantı Kontrol Ediliyor...</h4>
                <p id="statusMessage">QNB eFinans sunucusuna bağlantı test ediliyor</p>
            </div>
        </div>
        <button type="button" class="btn-test" id="testConnectionBtn" onclick="window.testConnection()">
            <i class="fas fa-sync-alt"></i> Test Et
        </button>
    </div>

    <!-- Tabs -->
    <div class="settings-tabs">
        <button class="settings-tab active" data-tab="general" onclick="switchTab('general')">
            <i class="fas fa-sliders-h"></i> Genel Ayarlar
        </button>
        <button class="settings-tab" data-tab="api" onclick="switchTab('api')">
            <i class="fas fa-plug"></i> API Bağlantısı
        </button>
        <button class="settings-tab" data-tab="sync" onclick="switchTab('sync')">
            <i class="fas fa-sync"></i> Senkronizasyon
        </button>
        <button class="settings-tab" data-tab="stats" onclick="switchTab('stats')">
            <i class="fas fa-chart-bar"></i> İstatistikler
        </button>
    </div>

    <!-- Tab Panels -->
    <form action="{{ route('einvoice.settings.update') }}" method="POST" id="settingsForm">
        @csrf
        @method('PUT')

        <!-- General Settings Tab -->
        <div class="tab-panel active" id="panel-general">
            <div class="settings-grid">
                <!-- Firma Bilgileri -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3><i class="fas fa-building bg-primary"></i> Firma Bilgileri</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="form-group">
                            <label class="form-label">VKN (Vergi Kimlik Numarası) <span class="required">*</span></label>
                            <input type="text" name="vkn" class="form-control" 
                                   value="{{ old('vkn', $company->vkn ?? '') }}" 
                                   placeholder="10 haneli VKN" maxlength="11" required>
                            <div class="form-hint">10 haneli vergi kimlik numaranız veya 11 haneli TCKN</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Vergi Dairesi <span class="required">*</span></label>
                            <input type="text" name="tax_office" class="form-control" 
                                   value="{{ old('tax_office', $company->tax_office ?? '') }}" 
                                   placeholder="Örn: KADIKÖY" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Mersis No</label>
                            <input type="text" name="mersis_no" class="form-control" 
                                   value="{{ old('mersis_no', $company->mersis_no ?? '') }}" 
                                   placeholder="16 haneli Mersis numarası" maxlength="16">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Ticaret Sicil No</label>
                            <input type="text" name="ticaret_sicil_no" class="form-control" 
                                   value="{{ old('ticaret_sicil_no', $company->ticaret_sicil_no ?? '') }}" 
                                   placeholder="Ticaret sicil numarası">
                        </div>
                    </div>
                </div>

                <!-- E-Belge Durumu -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3><i class="fas fa-file-invoice bg-success"></i> E-Belge Durumu</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="toggle-switch">
                            <div class="toggle-info">
                                <div class="toggle-icon" style="background: rgba(46, 204, 113, 0.15); color: var(--einvoice-success);">
                                    <i class="fas fa-file-invoice"></i>
                                </div>
                                <div class="toggle-text">
                                    <h5>E-Fatura Mükellefi</h5>
                                    <p>GİB'de e-fatura mükellefi olarak kayıtlıysanız aktifleştirin</p>
                                </div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="has_einvoice" value="1" 
                                       {{ old('has_einvoice', $company->has_einvoice ?? false) ? 'checked' : '' }}>
                                <span class="switch-slider"></span>
                            </label>
                        </div>

                        <div class="toggle-switch">
                            <div class="toggle-info">
                                <div class="toggle-icon" style="background: rgba(52, 152, 219, 0.15); color: var(--einvoice-info);">
                                    <i class="fas fa-archive"></i>
                                </div>
                                <div class="toggle-text">
                                    <h5>E-Arşiv Mükellefi</h5>
                                    <p>E-Arşiv fatura düzenleyebiliyorsanız aktifleştirin</p>
                                </div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="has_earchive" value="1"
                                       {{ old('has_earchive', $company->has_earchive ?? false) ? 'checked' : '' }}>
                                <span class="switch-slider"></span>
                            </label>
                        </div>

                        <div class="toggle-switch">
                            <div class="toggle-info">
                                <div class="toggle-icon" style="background: rgba(243, 156, 18, 0.15); color: var(--einvoice-warning);">
                                    <i class="fas fa-truck"></i>
                                </div>
                                <div class="toggle-text">
                                    <h5>E-İrsaliye Mükellefi</h5>
                                    <p>E-İrsaliye düzenleyebiliyorsanız aktifleştirin</p>
                                </div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="has_edespatch" value="1"
                                       {{ old('has_edespatch', $company->has_edespatch ?? false) ? 'checked' : '' }}>
                                <span class="switch-slider"></span>
                            </label>
                        </div>

                        <hr style="margin: 1.25rem 0; border-color: #eef2f7;">

                        <div class="form-group">
                            <label class="form-label">Varsayılan Fatura Profili</label>
                            <select name="default_invoice_profile" class="form-control">
                                <option value="TEMELFATURA" {{ (old('default_invoice_profile', $company->default_invoice_profile ?? '') == 'TEMELFATURA') ? 'selected' : '' }}>Temel Fatura</option>
                                <option value="TICARIFATURA" {{ (old('default_invoice_profile', $company->default_invoice_profile ?? 'TICARIFATURA') == 'TICARIFATURA') ? 'selected' : '' }}>Ticari Fatura</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Fatura Serisi</label>
                            <input type="text" name="invoice_series" class="form-control" 
                                   value="{{ old('invoice_series', $company->invoice_series ?? 'FIX') }}" 
                                   placeholder="Örn: FIX" maxlength="3" style="text-transform: uppercase;">
                            <div class="form-hint">3 karakterlik seri kodu (Örn: FIX2024000000001)</div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin-top: 1.5rem; text-align: right;">
                <button type="submit" class="btn-save">
                    <i class="fas fa-save"></i> Değişiklikleri Kaydet
                </button>
            </div>
        </div>

        <!-- API Connection Tab -->
        <div class="tab-panel" id="panel-api">
            <div class="settings-grid">
                <!-- QNB API Bilgileri -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3><i class="fas fa-plug bg-warning"></i> QNB eFinans API</h3>
                    </div>
                    <div class="settings-card-body">
                        <!-- Ortam Seçimi -->
                        <div class="form-group">
                            <label class="form-label">Ortam Seçimi <span class="required">*</span></label>
                            <div class="env-selector">
                                <label class="env-option test {{ (old('qnb_environment', $company->qnb_environment ?? 'test') === 'test') ? 'active' : '' }}">
                                    <input type="radio" name="qnb_environment" value="test" 
                                           {{ (old('qnb_environment', $company->qnb_environment ?? 'test') === 'test') ? 'checked' : '' }}>
                                    <i class="fas fa-flask"></i>
                                    <h5>Test Ortamı</h5>
                                    <p>Geliştirme ve test için</p>
                                </label>
                                <label class="env-option prod {{ (old('qnb_environment', $company->qnb_environment ?? '') === 'production') ? 'active' : '' }}">
                                    <input type="radio" name="qnb_environment" value="production"
                                           {{ (old('qnb_environment', $company->qnb_environment ?? '') === 'production') ? 'checked' : '' }}>
                                    <i class="fas fa-globe"></i>
                                    <h5>Gerçek Ortam</h5>
                                    <p>Canlı işlemler için</p>
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Kullanıcı Adı <span class="required">*</span></label>
                            <input type="text" name="qnb_username" class="form-control" 
                                   value="{{ old('qnb_username', $company->qnb_username ?? '') }}" 
                                   placeholder="VKN ile aynı olabilir" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Şifre <span class="required">*</span></label>
                            <div class="password-wrapper">
                                <input type="password" name="qnb_password" id="qnb_password" class="form-control" 
                                       placeholder="{{ ($company->qnb_password ?? false) ? '••••••••' : 'QNB şifresi' }}">
                                <button type="button" class="password-toggle" onclick="togglePassword('qnb_password')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div class="form-hint">{{ ($company->qnb_password ?? false) ? 'Değiştirmek istemiyorsanız boş bırakın' : 'QNB hesabınızın şifresi' }}</div>
                        </div>
                    </div>
                </div>

                <!-- Posta Kutusu Etiketleri -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3><i class="fas fa-tags bg-info"></i> Posta Kutusu Etiketleri</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="alert alert-info" style="margin-bottom: 1.25rem;">
                            <i class="fas fa-info-circle"></i>
                            <span>Etiketler QNB panelindeki "Posta Kutusu" bölümünden alınır. Opsiyoneldir.</span>
                        </div>

                        <div class="form-group">
                            <label class="form-label">E-Fatura PK Etiketi</label>
                            <input type="text" name="qnb_einvoice_pk_label" class="form-control" 
                                   value="{{ old('qnb_einvoice_pk_label', $company->qnb_einvoice_pk_label ?? '') }}" 
                                   placeholder="urn:mail:defaultpk@firma.com.tr">
                        </div>

                        <div class="form-group">
                            <label class="form-label">E-Fatura GB Etiketi</label>
                            <input type="text" name="qnb_einvoice_gb_label" class="form-control" 
                                   value="{{ old('qnb_einvoice_gb_label', $company->qnb_einvoice_gb_label ?? '') }}" 
                                   placeholder="urn:mail:defaultgb@firma.com.tr">
                        </div>

                        <div class="form-group">
                            <label class="form-label">E-Arşiv PK Etiketi</label>
                            <input type="text" name="qnb_earchive_pk_label" class="form-control" 
                                   value="{{ old('qnb_earchive_pk_label', $company->qnb_earchive_pk_label ?? '') }}" 
                                   placeholder="urn:mail:defaultpk@firma.com.tr">
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin-top: 1.5rem; text-align: right;">
                <button type="submit" class="btn-save">
                    <i class="fas fa-save"></i> Değişiklikleri Kaydet
                </button>
            </div>
        </div>
    </form>

    <!-- Sync Tab -->
    <div class="tab-panel" id="panel-sync">
        <div class="settings-grid">
            <!-- Otomatik Senkronizasyon -->
            <div class="settings-card">
                <div class="settings-card-header">
                    <h3><i class="fas fa-magic bg-primary"></i> Otomatik Senkronizasyon</h3>
                </div>
                <div class="settings-card-body">
                    <div class="toggle-switch" style="background: linear-gradient(135deg, rgba(65, 90, 119, 0.1) 0%, rgba(119, 141, 169, 0.1) 100%);">
                        <div class="toggle-info">
                            <div class="toggle-icon" style="background: var(--einvoice-primary); color: white;">
                                <i class="fas fa-bolt"></i>
                            </div>
                            <div class="toggle-text">
                                <h5>Otomatik Senkronizasyon</h5>
                                <p>Yeni işlemler otomatik olarak QNB'ye gönderilsin</p>
                            </div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" name="einvoice_auto_sync" id="autoSync" value="1" {{ ($company->einvoice_auto_sync ?? false) ? 'checked' : '' }}>
                            <span class="switch-slider"></span>
                        </label>
                    </div>

                    <div class="alert alert-info" style="margin-top: 1rem;">
                        <i class="fas fa-info-circle"></i>
                        <span>Otomatik senkronizasyon açıkken, yeni satışlar ve alışlar otomatik olarak e-fatura olarak gönderilir.</span>
                    </div>
                </div>
            </div>

            <!-- Manuel Senkronizasyon -->
            <div class="settings-card">
                <div class="settings-card-header">
                    <h3><i class="fas fa-hand-pointer bg-warning"></i> Manuel Senkronizasyon</h3>
                </div>
                <div class="settings-card-body">
                    <p style="color: #6c757d; margin-bottom: 1rem;">Verileri tek seferde senkronize etmek için aşağıdaki butonları kullanın.</p>
                    
                    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
                        <button type="button" class="btn-sync btn-sync-primary" onclick="syncAll()">
                            <i class="fas fa-sync"></i> Tümünü Senkronize Et
                        </button>
                        <button type="button" class="btn-sync btn-sync-outline" onclick="pullFromQnb()">
                            <i class="fas fa-download"></i> QNB'den Çek
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sync Items -->
        <div class="settings-card" style="margin-top: 1.5rem;">
            <div class="settings-card-header">
                <h3><i class="fas fa-database bg-success"></i> Veri Senkronizasyonu</h3>
            </div>
            <div class="settings-card-body">
                <!-- Müşteriler -->
                <div class="sync-item">
                    <div class="sync-info">
                        <div class="sync-icon" style="background: rgba(52, 152, 219, 0.15); color: var(--einvoice-info);">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="sync-details">
                            <h5>Müşteriler</h5>
                            <p>Müşteri bilgilerini senkronize et</p>
                            <span class="sync-count"><i class="fas fa-database"></i> {{ $syncStats['customers'] ?? 0 }} kayıt</span>
                        </div>
                    </div>
                    <div class="sync-actions">
                        <button type="button" class="btn-sync btn-sync-primary" onclick="syncData('customers')">
                            <i class="fas fa-sync"></i> Senkronize Et
                        </button>
                    </div>
                </div>

                <!-- Tedarikçiler -->
                <div class="sync-item">
                    <div class="sync-info">
                        <div class="sync-icon" style="background: rgba(155, 89, 182, 0.15); color: #9b59b6;">
                            <i class="fas fa-truck-loading"></i>
                        </div>
                        <div class="sync-details">
                            <h5>Tedarikçiler</h5>
                            <p>Tedarikçi bilgilerini senkronize et</p>
                            <span class="sync-count"><i class="fas fa-database"></i> {{ $syncStats['suppliers'] ?? 0 }} kayıt</span>
                        </div>
                    </div>
                    <div class="sync-actions">
                        <button type="button" class="btn-sync btn-sync-primary" onclick="syncData('suppliers')">
                            <i class="fas fa-sync"></i> Senkronize Et
                        </button>
                    </div>
                </div>

                <!-- Ürünler -->
                <div class="sync-item">
                    <div class="sync-info">
                        <div class="sync-icon" style="background: rgba(46, 204, 113, 0.15); color: var(--einvoice-success);">
                            <i class="fas fa-boxes"></i>
                        </div>
                        <div class="sync-details">
                            <h5>Ürünler</h5>
                            <p>Ürün bilgilerini senkronize et</p>
                            <span class="sync-count"><i class="fas fa-database"></i> {{ $syncStats['products'] ?? 0 }} kayıt</span>
                        </div>
                    </div>
                    <div class="sync-actions">
                        <button type="button" class="btn-sync btn-sync-primary" onclick="syncData('products')">
                            <i class="fas fa-sync"></i> Senkronize Et
                        </button>
                    </div>
                </div>

                <!-- Satışlar -->
                <div class="sync-item">
                    <div class="sync-info">
                        <div class="sync-icon" style="background: rgba(231, 76, 60, 0.15); color: var(--einvoice-danger);">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <div class="sync-details">
                            <h5>Satışlar</h5>
                            <p>Satış faturalarını e-fatura olarak gönder</p>
                            <span class="sync-count"><i class="fas fa-clock"></i> {{ $syncStats['pending_sales'] ?? 0 }} bekleyen</span>
                        </div>
                    </div>
                    <div class="sync-actions">
                        <button type="button" class="btn-sync btn-sync-primary" onclick="syncData('sales')">
                            <i class="fas fa-paper-plane"></i> Gönder
                        </button>
                    </div>
                </div>

                <!-- Alışlar -->
                <div class="sync-item">
                    <div class="sync-info">
                        <div class="sync-icon" style="background: rgba(243, 156, 18, 0.15); color: var(--einvoice-warning);">
                            <i class="fas fa-file-import"></i>
                        </div>
                        <div class="sync-details">
                            <h5>Alışlar (Gelen Faturalar)</h5>
                            <p>Gelen e-faturaları içeri aktar</p>
                            <span class="sync-count"><i class="fas fa-inbox"></i> {{ $syncStats['pending_purchases'] ?? 0 }} yeni</span>
                        </div>
                    </div>
                    <div class="sync-actions">
                        <button type="button" class="btn-sync btn-sync-primary" onclick="syncData('purchases')">
                            <i class="fas fa-download"></i> İçeri Aktar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Tab -->
    <div class="tab-panel" id="panel-stats">
        <div class="settings-grid">
            <!-- Fatura İstatistikleri -->
            <div class="settings-card">
                <div class="settings-card-header">
                    <h3><i class="fas fa-chart-pie bg-primary"></i> Fatura İstatistikleri</h3>
                </div>
                <div class="settings-card-body">
                    <div class="sync-item" style="border: none; padding: 0.75rem 0;">
                        <div class="sync-info">
                            <div class="sync-icon" style="background: rgba(65, 90, 119, 0.15); color: var(--einvoice-primary);">
                                <i class="fas fa-file-invoice"></i>
                            </div>
                            <div class="sync-details">
                                <h5>Toplam E-Fatura</h5>
                            </div>
                        </div>
                        <strong style="font-size: 1.25rem;">{{ number_format($stats['total_einvoice'] ?? 0) }}</strong>
                    </div>

                    <div class="sync-item" style="border: none; padding: 0.75rem 0;">
                        <div class="sync-info">
                            <div class="sync-icon" style="background: rgba(52, 152, 219, 0.15); color: var(--einvoice-info);">
                                <i class="fas fa-archive"></i>
                            </div>
                            <div class="sync-details">
                                <h5>Toplam E-Arşiv</h5>
                            </div>
                        </div>
                        <strong style="font-size: 1.25rem;">{{ number_format($stats['total_earchive'] ?? 0) }}</strong>
                    </div>

                    <div class="sync-item" style="border: none; padding: 0.75rem 0;">
                        <div class="sync-info">
                            <div class="sync-icon" style="background: rgba(46, 204, 113, 0.15); color: var(--einvoice-success);">
                                <i class="fas fa-paper-plane"></i>
                            </div>
                            <div class="sync-details">
                                <h5>Giden Faturalar</h5>
                            </div>
                        </div>
                        <strong style="font-size: 1.25rem;">{{ number_format($stats['outgoing'] ?? 0) }}</strong>
                    </div>

                    <div class="sync-item" style="border: none; padding: 0.75rem 0;">
                        <div class="sync-info">
                            <div class="sync-icon" style="background: rgba(231, 76, 60, 0.15); color: var(--einvoice-danger);">
                                <i class="fas fa-inbox"></i>
                            </div>
                            <div class="sync-details">
                                <h5>Gelen Faturalar</h5>
                            </div>
                        </div>
                        <strong style="font-size: 1.25rem;">{{ number_format($stats['incoming'] ?? 0) }}</strong>
                    </div>
                </div>
            </div>

            <!-- Yardımcı Kaynaklar -->
            <div class="settings-card">
                <div class="settings-card-header">
                    <h3><i class="fas fa-book bg-info"></i> Yardımcı Kaynaklar</h3>
                </div>
                <div class="settings-card-body">
                    <a href="https://ebelge.gib.gov.tr/anasayfa.html" target="_blank" class="resource-link">
                        <div class="resource-icon" style="background: rgba(52, 152, 219, 0.15); color: var(--einvoice-info);">
                            <i class="fas fa-external-link-alt"></i>
                        </div>
                        <div class="resource-text">
                            <h5>GİB E-Belge Portalı</h5>
                            <p>Resmi e-belge platformu</p>
                        </div>
                    </a>

                    <a href="https://www.qnbefinans.com/" target="_blank" class="resource-link">
                        <div class="resource-icon" style="background: rgba(243, 156, 18, 0.15); color: var(--einvoice-warning);">
                            <i class="fas fa-external-link-alt"></i>
                        </div>
                        <div class="resource-text">
                            <h5>QNB eFinans</h5>
                            <p>Entegratör portalı</p>
                        </div>
                    </a>

                    <a href="{{ route('einvoice.index') }}" class="resource-link">
                        <div class="resource-icon" style="background: rgba(46, 204, 113, 0.15); color: var(--einvoice-success);">
                            <i class="fas fa-list"></i>
                        </div>
                        <div class="resource-text">
                            <h5>Tüm Faturalar</h5>
                            <p>Fatura listesine git</p>
                        </div>
                    </a>

                    <a href="{{ route('einvoice.dashboard') }}" class="resource-link">
                        <div class="resource-icon" style="background: rgba(65, 90, 119, 0.15); color: var(--einvoice-primary);">
                            <i class="fas fa-tachometer-alt"></i>
                        </div>
                        <div class="resource-text">
                            <h5>Dashboard</h5>
                            <p>E-Fatura kontrol paneli</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    'use strict';

    // Tab switching
    window.switchTab = function(tabName) {
        // Remove active from all tabs and panels
        document.querySelectorAll('.settings-tab').forEach(function(tab) {
            tab.classList.remove('active');
        });
        document.querySelectorAll('.tab-panel').forEach(function(panel) {
            panel.classList.remove('active');
        });

        // Add active to selected
        document.querySelector('[data-tab="' + tabName + '"]').classList.add('active');
        document.getElementById('panel-' + tabName).classList.add('active');
    };

    // Environment selector
    document.querySelectorAll('.env-option').forEach(function(option) {
        option.addEventListener('click', function() {
            document.querySelectorAll('.env-option').forEach(function(opt) {
                opt.classList.remove('active');
            });
            this.classList.add('active');
        });
    });

    // Password toggle
    window.togglePassword = function(inputId) {
        var input = document.getElementById(inputId);
        var icon = input.parentElement.querySelector('.password-toggle i');
        
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    };

    // Update connection banner
    function updateConnectionBanner(status, title, message) {
        var banner = document.getElementById('connectionBanner');
        var icon = document.getElementById('statusIcon');
        var titleEl = document.getElementById('statusTitle');
        var messageEl = document.getElementById('statusMessage');

        banner.className = 'connection-banner ' + status;
        titleEl.textContent = title;
        messageEl.textContent = message;

        if (status === 'checking') {
            icon.className = 'fas fa-spinner fa-spin';
        } else if (status === 'connected') {
            icon.className = 'fas fa-check';
        } else if (status === 'ready') {
            icon.className = 'fas fa-plug';
        } else {
            icon.className = 'fas fa-times';
        }
    }

    // Test connection
    window.testConnection = function() {
        var btn = document.getElementById('testConnectionBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Test Ediliyor...';
        
        updateConnectionBanner('checking', 'Bağlantı Test Ediliyor...', 'QNB eFinans sunucusuna bağlanılıyor');

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route("einvoice.test_connection_ajax") }}', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
        xhr.setRequestHeader('Accept', 'application/json');

        xhr.onload = function() {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-sync-alt"></i> Test Et';

            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    
                    if (data.success) {
                        updateConnectionBanner('connected', 'Bağlantı Aktif', 
                            (data.environment === 'production' ? 'Gerçek Ortam' : 'Test Ortamı') + ' - QNB eFinans bağlantısı başarılı');
                    } else {
                        updateConnectionBanner('disconnected', 'Bağlantı Hatası', 
                            data.message || data.error || 'Bağlantı kurulamadı');
                    }
                } catch (e) {
                    updateConnectionBanner('disconnected', 'Yanıt Hatası', 'Sunucu yanıtı okunamadı');
                }
            } else {
                updateConnectionBanner('disconnected', 'Sunucu Hatası', 'HTTP ' + xhr.status);
            }
        };

        xhr.onerror = function() {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-sync-alt"></i> Test Et';
            updateConnectionBanner('disconnected', 'Ağ Hatası', 'Sunucuya ulaşılamadı');
        };

        xhr.send(JSON.stringify({}));
    };

    // Sync functions
    window.syncData = function(type) {
        var btn = event.target.closest('.btn-sync');
        if (!btn) {
            btn = event.target;
        }
        
        var originalHtml = btn.innerHTML;
        btn.disabled = true;
        btn.classList.add('syncing');
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Senkronize Ediliyor...';

        var routes = {
            'customers': '{{ route("einvoice.sync.customers") }}',
            'suppliers': '{{ route("einvoice.sync.suppliers") }}',
            'products': '{{ route("einvoice.sync.products") }}',
            'sales': '{{ route("einvoice.sync.sales") }}',
            'purchases': '{{ route("einvoice.sync.incoming") }}'
        };

        var url = routes[type];
        if (!url) {
            btn.disabled = false;
            btn.innerHTML = originalHtml;
            alert('Geçersiz senkronizasyon tipi: ' + type);
            return;
        }

        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
        xhr.setRequestHeader('Accept', 'application/json');

        xhr.onload = function() {
            btn.disabled = false;
            btn.classList.remove('syncing');
            btn.innerHTML = originalHtml;

            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    if (data.success) {
                        showNotification('success', data.message || 'Senkronizasyon başarılı');
                        refreshSyncStats();
                        // Başarı animasyonu
                        btn.classList.add('sync-success');
                        setTimeout(function() { btn.classList.remove('sync-success'); }, 2000);
                    } else {
                        showNotification('error', data.message || 'Senkronizasyon hatası');
                        btn.classList.add('sync-error');
                        setTimeout(function() { btn.classList.remove('sync-error'); }, 2000);
                    }
                } catch (e) {
                    console.error('Parse error:', e, xhr.responseText);
                    showNotification('error', 'Yanıt okunamadı: ' + e.message);
                }
            } else {
                var errorMsg = 'Sunucu hatası: HTTP ' + xhr.status;
                try {
                    var errData = JSON.parse(xhr.responseText);
                    if (errData.message) errorMsg = errData.message;
                } catch(e) {}
                showNotification('error', errorMsg);
            }
        };

        xhr.onerror = function() {
            btn.disabled = false;
            btn.classList.remove('syncing');
            btn.innerHTML = originalHtml;
            showNotification('error', 'Ağ hatası - Sunucuya ulaşılamadı');
        };

        xhr.send(JSON.stringify({}));
    };

    window.syncAll = function() {
        var btn = event.target.closest('.btn-sync');
        if (!btn) {
            btn = event.target;
        }
        if (!btn) return;
        
        var originalHtml = btn.innerHTML;
        btn.disabled = true;
        btn.classList.add('syncing');
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Tümü Senkronize Ediliyor...';

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route("einvoice.sync.all") }}', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
        xhr.setRequestHeader('Accept', 'application/json');

        xhr.onload = function() {
            btn.disabled = false;
            btn.classList.remove('syncing');
            btn.innerHTML = originalHtml;

            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    if (data.success) {
                        showNotification('success', data.message || 'Tüm senkronizasyon tamamlandı');
                        refreshSyncStats();
                        btn.classList.add('sync-success');
                        setTimeout(function() { btn.classList.remove('sync-success'); }, 2000);
                    } else {
                        showNotification('error', data.message || 'Senkronizasyon hatası');
                        btn.classList.add('sync-error');
                        setTimeout(function() { btn.classList.remove('sync-error'); }, 2000);
                    }
                } catch (e) {
                    console.error('Parse error:', e);
                    showNotification('error', 'Yanıt okunamadı');
                }
            } else {
                showNotification('error', 'Sunucu hatası: HTTP ' + xhr.status);
            }
        };

        xhr.onerror = function() {
            btn.disabled = false;
            btn.classList.remove('syncing');
            btn.innerHTML = originalHtml;
            showNotification('error', 'Ağ hatası');
        };

        xhr.send(JSON.stringify({}));
    };

    window.pullFromQnb = function() {
        var btn = event.target.closest('.btn-sync');
        if (!btn) {
            btn = event.target;
        }
        
        var originalHtml = btn.innerHTML;
        btn.disabled = true;
        btn.classList.add('syncing');
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Çekiliyor...';

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route("einvoice.sync.incoming") }}', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
        xhr.setRequestHeader('Accept', 'application/json');

        xhr.onload = function() {
            btn.disabled = false;
            btn.classList.remove('syncing');
            btn.innerHTML = originalHtml;

            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    if (data.success) {
                        showNotification('success', data.message || 'Gelen faturalar çekildi');
                        refreshSyncStats();
                        btn.classList.add('sync-success');
                        setTimeout(function() { btn.classList.remove('sync-success'); }, 2000);
                    } else {
                        showNotification('error', data.message || 'Çekme hatası');
                        btn.classList.add('sync-error');
                        setTimeout(function() { btn.classList.remove('sync-error'); }, 2000);
                    }
                } catch (e) {
                    showNotification('error', 'Yanıt okunamadı');
                }
            } else {
                showNotification('error', 'Sunucu hatası: HTTP ' + xhr.status);
            }
        };

        xhr.onerror = function() {
            btn.disabled = false;
            btn.classList.remove('syncing');
            btn.innerHTML = originalHtml;
            showNotification('error', 'Ağ hatası');
        };

        xhr.send(JSON.stringify({}));
    };

    // Refresh sync stats
    function refreshSyncStats() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '{{ route("einvoice.sync.stats") }}', true);
        xhr.setRequestHeader('Accept', 'application/json');

        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    if (data.success && data.data) {
                        // Update counts in UI
                        updateSyncCount('customers', data.data.customers);
                        updateSyncCount('suppliers', data.data.suppliers);
                        updateSyncCount('products', data.data.products);
                        updateSyncCount('sales', data.data.pending_sales);
                        updateSyncCount('purchases', data.data.pending_purchases);
                    }
                } catch (e) {
                    console.error('Stats parse error:', e);
                }
            }
        };

        xhr.send();
    }

    function updateSyncCount(type, count) {
        var items = document.querySelectorAll('.sync-item');
        items.forEach(function(item) {
            var btn = item.querySelector('.sync-btn');
            if (btn && btn.getAttribute('onclick') && btn.getAttribute('onclick').indexOf(type) > -1) {
                var countEl = item.querySelector('.sync-count');
                if (countEl) {
                    countEl.innerHTML = '<i class="fas fa-database"></i> ' + count + ' kayıt';
                }
            }
        });
    }

    // Notification helper
    function showNotification(type, message) {
        // Try to use toastr if available
        if (typeof toastr !== 'undefined') {
            if (type === 'success') {
                toastr.success(message);
            } else {
                toastr.error(message);
            }
        } else {
            alert(message);
        }
    }

    // Initialize connection banner (no auto-test)
    document.addEventListener('DOMContentLoaded', function() {
        @if($hasEInvoiceSettings)
        updateConnectionBanner('ready', 'Bağlantı Hazır', 'Bağlantıyı test etmek için butona tıklayın');
        @else
        updateConnectionBanner('disconnected', 'Ayarlar Eksik', 'API bilgilerini girin ve kaydedin');
        @endif
        
        // Auto Sync toggle listener
        var autoSyncCheckbox = document.getElementById('autoSync');
        if (autoSyncCheckbox) {
            autoSyncCheckbox.addEventListener('change', function() {
                toggleAutoSync(this.checked);
            });
        }
    });
    
    // Toggle Auto Sync (AJAX)
    function toggleAutoSync(enabled) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route("einvoice.toggle_auto_sync") }}', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
        xhr.setRequestHeader('Accept', 'application/json');

        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    if (data.success) {
                        showNotification('success', data.message);
                    } else {
                        showNotification('error', data.message || 'Hata oluştu');
                        // Revert checkbox
                        document.getElementById('autoSync').checked = !enabled;
                    }
                } catch (e) {
                    showNotification('error', 'Yanıt okunamadı');
                    document.getElementById('autoSync').checked = !enabled;
                }
            } else {
                showNotification('error', 'Sunucu hatası: HTTP ' + xhr.status);
                document.getElementById('autoSync').checked = !enabled;
            }
        };

        xhr.onerror = function() {
            showNotification('error', 'Ağ hatası');
            document.getElementById('autoSync').checked = !enabled;
        };

        xhr.send(JSON.stringify({ enabled: enabled }));
    }
})();
</script>

@endsection