@extends('agency.layouts.app')

@section('title', 'Site Ayarları')
@section('page_title', 'Site Ayarları')

@push('styles')
<style>
    .domain-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .domain-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--gray-200);
    }

    .domain-card-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--gray-900);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .domain-card-title i {
        color: var(--primary);
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .badge-success {
        background: #D1FAE5;
        color: #065F46;
    }

    .badge-warning {
        background: #FEF3C7;
        color: #92400E;
    }

    .badge-info {
        background: #CFFAFE;
        color: #164E63;
    }

    .badge-secondary {
        background: var(--gray-200);
        color: var(--gray-700);
    }

    .alert-box {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: start;
        gap: 0.75rem;
    }

    .alert-info {
        background: #DBEAFE;
        border-left: 4px solid var(--primary);
        color: #1E40AF;
    }

    .alert-warning {
        background: #FEF3C7;
        border-left: 4px solid var(--warning);
        color: #92400E;
    }

    .alert-success {
        background: #D1FAE5;
        border-left: 4px solid var(--success);
        color: #065F46;
    }

    .domain-preview {
        background: var(--gray-50);
        border: 2px dashed var(--gray-300);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.75rem;
        text-align: center;
    }

    .domain-preview-url {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--primary);
        word-break: break-all;
    }

    .domain-status-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background: var(--gray-50);
        border-radius: 8px;
        margin-top: 1rem;
    }

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

    .instructions-box {
        background: var(--gray-50);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
    }

    .instructions-box h4 {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.75rem;
    }

    .instructions-box ol {
        padding-left: 1.25rem;
        font-size: 0.875rem;
        color: var(--gray-600);
    }

    .instructions-box li {
        margin-bottom: 0.5rem;
    }

    .code-block {
        background: var(--gray-900);
        color: #D1D5DB;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        font-size: 0.813rem;
        margin: 0.5rem 0;
        overflow-x: auto;
    }

    .input-group {
        display: flex;
        gap: 0.75rem;
    }

    .input-group .form-control {
        flex: 1;
    }

    .loading {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
</style>
@endpush

@section('content')
<!-- Current Domain Status -->
<div class="domain-card">
    <div class="domain-card-header">
        <div class="domain-card-title">
            <i class="fas fa-info-circle"></i>
            Mevcut Domain Durumu
        </div>
    </div>

    <div class="domain-status-box">
        <div class="domain-status-info">
            <i class="fas fa-link" style="font-size: 1.5rem; color: var(--{{ $agency->domain_status_color }});"></i>
            <div>
                <div style="font-weight: 600; color: var(--gray-900);">{{ $agency->domain_status_text }}</div>
                <div style="font-size: 0.875rem; color: var(--gray-500);">
                    @if($agency->use_custom_domain && $agency->custom_domain_verified)
                        {{ $agency->custom_domain }}
                    @elseif($agency->subdomain)
                        {{ $agency->subdomain }}.{{ config('app.main_domain', 'acentepro.com') }}
                    @else
                        /agency/{{ $agency->slug }}
                    @endif
                </div>
            </div>
        </div>
        <span class="badge badge-{{ $agency->domain_status_color }}">
            <i class="fas fa-circle" style="font-size: 0.5rem;"></i>
            {{ $agency->domain_status_text }}
        </span>
    </div>

    <div class="domain-preview">
        <div style="font-size: 0.75rem; color: var(--gray-500); margin-bottom: 0.5rem;">Sitenizin Adresi:</div>
        <div class="domain-preview-url">{{ $agency->full_domain }}</div>
    </div>
</div>

<!-- Subdomain Settings -->
<div class="domain-card">
    <div class="domain-card-header">
        <div class="domain-card-title">
            <i class="fas fa-tag"></i>
            Subdomain Ayarları
        </div>
        @if($agency->subdomain)
            <span class="badge badge-success">
                <i class="fas fa-check"></i> Aktif
            </span>
        @endif
    </div>

    <div class="alert-box alert-info">
        <i class="fas fa-info-circle" style="font-size: 1.25rem;"></i>
        <div>
            <strong>Subdomain Nedir?</strong>
            <p style="margin-top: 0.25rem; font-size: 0.875rem;">
                Subdomain, sitenizin kendi özel adresini oluşturmanızı sağlar. Örneğin: <strong>acentenizismi.acentepro.com</strong>
            </p>
        </div>
    </div>

    <form id="subdomainForm">
        <div class="form-group">
            <label class="form-label">Subdomain Adı</label>
            <div class="input-group">
                <input type="text"
                       id="subdomain"
                       name="subdomain"
                       class="form-control"
                       value="{{ $agency->subdomain }}"
                       placeholder="acentenizismi"
                       pattern="[a-z0-9-]+"
                       required>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Kaydet
                </button>
            </div>
            <div class="form-help">
                Sadece küçük harf, rakam ve tire kullanabilirsiniz.
            </div>
        </div>

        @if($agency->subdomain)
            <div class="domain-preview">
                <div style="font-size: 0.75rem; color: var(--gray-500); margin-bottom: 0.5rem;">Subdomain Adresiniz:</div>
                <div class="domain-preview-url">{{ $agency->subdomain_url }}</div>
            </div>
        @endif
    </form>
</div>

<!-- Custom Domain Settings -->
<div class="domain-card">
    <div class="domain-card-header">
        <div class="domain-card-title">
            <i class="fas fa-crown"></i>
            Özel Domain (Kendi Domaininiz)
        </div>
        @if($agency->custom_domain_verified)
            <span class="badge badge-success">
                <i class="fas fa-check-circle"></i> Doğrulandı
            </span>
        @elseif($agency->custom_domain)
            <span class="badge badge-warning">
                <i class="fas fa-clock"></i> Doğrulama Bekliyor
            </span>
        @endif
    </div>

    <div class="alert-box alert-info">
        <i class="fas fa-crown" style="font-size: 1.25rem;"></i>
        <div>
            <strong>Kendi Domaininizi Kullanın!</strong>
            <p style="margin-top: 0.25rem; font-size: 0.875rem;">
                Kendi satın aldığınız domaini (örn: www.seyahatacente.com) kullanarak daha profesyonel bir görünüm elde edebilirsiniz.
            </p>
        </div>
    </div>

    @if(!$agency->custom_domain)
        <!-- Add Custom Domain Form -->
        <form id="customDomainForm">
            <div class="form-group">
                <label class="form-label">Domain Adresi</label>
                <div class="input-group">
                    <input type="text"
                           id="custom_domain"
                           name="custom_domain"
                           class="form-control"
                           placeholder="ornekacente.com"
                           required>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Ekle
                    </button>
                </div>
                <div class="form-help">
                    www olmadan sadece domain adını girin (örn: ornekacente.com)
                </div>
            </div>
        </form>
    @else
        <!-- Domain Info and Actions -->
        <div class="domain-status-box">
            <div class="domain-status-info">
                <i class="fas fa-globe" style="font-size: 1.5rem; color: var(--primary);"></i>
                <div>
                    <div style="font-weight: 600; color: var(--gray-900);">{{ $agency->custom_domain }}</div>
                    <div style="font-size: 0.875rem; color: var(--gray-500);">
                        @if($agency->custom_domain_verified)
                            Doğrulandı: {{ $agency->custom_domain_verified_at->diffForHumans() }}
                        @else
                            DNS ayarlarını yapıp doğrulama işlemini tamamlayın
                        @endif
                    </div>
                </div>
            </div>
            <div style="display: flex; gap: 0.5rem;">
                @if(!$agency->custom_domain_verified)
                    <button onclick="verifyDomain()" class="btn btn-success">
                        <i class="fas fa-check"></i> Doğrula
                    </button>
                @else
                    <button onclick="toggleDomain()" class="btn btn-{{ $agency->use_custom_domain ? 'warning' : 'success' }}">
                        <i class="fas fa-{{ $agency->use_custom_domain ? 'pause' : 'play' }}"></i>
                        {{ $agency->use_custom_domain ? 'Devre Dışı Bırak' : 'Aktif Et' }}
                    </button>
                @endif
                <button onclick="removeDomain()" class="btn btn-danger">
                    <i class="fas fa-trash"></i> Kaldır
                </button>
            </div>
        </div>

        @if(!$agency->custom_domain_verified)
            <!-- DNS Instructions -->
            <div class="instructions-box">
                <h4><i class="fas fa-tasks"></i> DNS Ayarları Nasıl Yapılır?</h4>
                <ol>
                    <li>Domain sağlayıcınızın (GoDaddy, Namecheap, vb.) kontrol paneline girin</li>
                    <li>DNS yönetimi bölümünü bulun</li>
                    <li>Aşağıdaki CNAME kaydını ekleyin:</li>
                </ol>
                <div class="code-block">
                    Type: CNAME<br>
                    Name: www (veya @)<br>
                    Value: {{ config('app.cname_target', 'sites.acentepro.com') }}<br>
                    TTL: 3600
                </div>
                <ol start="4">
                    <li>DNS değişikliklerinin yayılması 24-48 saat sürebilir</li>
                    <li>DNS ayarlarınız tamamlandıktan sonra "Doğrula" butonuna tıklayın</li>
                </ol>
            </div>
        @endif

        @if($agency->custom_domain_verified && !$agency->use_custom_domain)
            <div class="alert-box alert-warning" style="margin-top: 1rem;">
                <i class="fas fa-exclamation-triangle" style="font-size: 1.25rem;"></i>
                <div>
                    <strong>Özel domaininiz doğrulandı ancak aktif değil.</strong>
                    <p style="margin-top: 0.25rem; font-size: 0.875rem;">
                        Özel domaininizi kullanmaya başlamak için "Aktif Et" butonuna tıklayın.
                    </p>
                </div>
            </div>
        @endif
    @endif
</div>

<!-- SSL Certificate Info -->
@if($agency->custom_domain_verified)
    <div class="domain-card">
        <div class="domain-card-header">
            <div class="domain-card-title">
                <i class="fas fa-lock"></i>
                SSL Sertifikası (HTTPS)
            </div>
            @if($agency->ssl_status === 'active')
                <span class="badge badge-success">
                    <i class="fas fa-shield-alt"></i> Aktif
                </span>
            @else
                <span class="badge badge-warning">
                    <i class="fas fa-clock"></i> Beklemede
                </span>
            @endif
        </div>

        <div class="alert-box alert-{{ $agency->ssl_status === 'active' ? 'success' : 'info' }}">
            <i class="fas fa-{{ $agency->ssl_status === 'active' ? 'check-circle' : 'info-circle' }}" style="font-size: 1.25rem;"></i>
            <div>
                @if($agency->ssl_status === 'active')
                    <strong>SSL Sertifikanız Aktif!</strong>
                    <p style="margin-top: 0.25rem; font-size: 0.875rem;">
                        Siteniz güvenli HTTPS protokolü ile çalışıyor. SSL sertifikanız {{ $agency->ssl_issued_at->diffForHumans() }} alındı.
                    </p>
                @else
                    <strong>SSL Sertifikası Otomatik Olarak Oluşturulacak</strong>
                    <p style="margin-top: 0.25rem; font-size: 0.875rem;">
                        Domaininiz doğrulandıktan sonra ücretsiz SSL sertifikası otomatik olarak oluşturulacaktır. Bu işlem birkaç dakika sürebilir.
                    </p>
                @endif
            </div>
        </div>
    </div>
@endif
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    // Subdomain Form
    document.getElementById('subdomainForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const btn = this.querySelector('button[type="submit"]');
        const originalText = btn.innerHTML;

        btn.disabled = true;
        btn.innerHTML = '<span class="loading"></span> Kaydediliyor...';

        try {
            const response = await axios.post('{{ route('agency.website.subdomain.update') }}', {
                subdomain: document.getElementById('subdomain').value
            }, {
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });

            alert('✓ ' + response.data.message);
            window.location.reload();
        } catch (error) {
            alert('✗ ' + (error.response?.data?.message || 'Bir hata oluştu'));
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    });

    // Custom Domain Form
    @if(!$agency->custom_domain)
    document.getElementById('customDomainForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const btn = this.querySelector('button[type="submit"]');
        const originalText = btn.innerHTML;

        btn.disabled = true;
        btn.innerHTML = '<span class="loading"></span> Ekleniyor...';

        try {
            const response = await axios.post('{{ route('agency.website.custom-domain.update') }}', {
                custom_domain: document.getElementById('custom_domain').value
            }, {
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });

            alert('✓ ' + response.data.message);
            window.location.reload();
        } catch (error) {
            alert('✗ ' + (error.response?.data?.message || 'Bir hata oluştu'));
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    });
    @endif

    // Verify Domain
    async function verifyDomain() {
        if (!confirm('DNS ayarlarınızı tamamladınız mı? Doğrulama işlemine başlamak istiyor musunuz?')) return;

        try {
            const response = await axios.post('{{ route('agency.website.custom-domain.verify') }}', {}, {
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });

            alert('✓ ' + response.data.message);
            window.location.reload();
        } catch (error) {
            alert('✗ ' + (error.response?.data?.message || 'Bir hata oluştu'));
        }
    }

    // Toggle Domain
    async function toggleDomain() {
        const isActive = {{ $agency->use_custom_domain ? 'true' : 'false' }};
        const action = isActive ? 'devre dışı bırakmak' : 'aktif etmek';

        if (!confirm(`Özel domaininizi ${action} istediğinize emin misiniz?`)) return;

        try {
            const response = await axios.post('{{ route('agency.website.custom-domain.toggle') }}', {}, {
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });

            alert('✓ ' + response.data.message);
            window.location.reload();
        } catch (error) {
            alert('✗ ' + (error.response?.data?.message || 'Bir hata oluştu'));
        }
    }

    // Remove Domain
    async function removeDomain() {
        if (!confirm('Özel domaininizi kaldırmak istediğinize emin misiniz? Bu işlem geri alınamaz.')) return;

        try {
            const response = await axios.delete('{{ route('agency.website.custom-domain.remove') }}', {
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });

            alert('✓ ' + response.data.message);
            window.location.reload();
        } catch (error) {
            alert('✗ ' + (error.response?.data?.message || 'Bir hata oluştu'));
        }
    }
</script>
@endpush