@extends('layouts.app')

@section('title', 'Yeni Zone Oluştur')

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-plus-circle me-2"></i>
                        Yeni DNS Zone Oluştur
                    </h5>
                </div>
                <div class="card-body">
                    <form id="createZoneForm">
                        <div class="mb-4">
                            <label class="form-label fw-bold">Domain Adı *</label>
                            <input type="text" 
                                   class="form-control form-control-lg" 
                                   name="name" 
                                   required 
                                   placeholder="example.com"
                                   pattern="^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z]{2,})+$">
                            <small class="text-muted">
                                Domain adını sonda nokta olmadan girin (örn: example.com)
                            </small>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Account</label>
                            <input type="text" 
                                   class="form-control" 
                                   name="account" 
                                   value="whmcs"
                                   placeholder="whmcs">
                            <small class="text-muted">
                                Varsayılan olarak "whmcs" kullanılır. WHMCS entegrasyonu için bu değeri kullanın.
                            </small>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Nameservers</label>
                            <div id="nameservers-container">
                                <div class="input-group mb-2">
                                    <input type="text" 
                                           class="form-control" 
                                           name="nameservers[]" 
                                           placeholder="ns1.example.com">
                                    <button type="button" class="btn btn-outline-danger btn-remove-ns" disabled>
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="add-nameserver">
                                <i class="fas fa-plus me-1"></i> Nameserver Ekle
                            </button>
                            <small class="d-block text-muted mt-2">
                                PowerDNS otomatik olarak NS kayıtları oluşturacaktır.
                            </small>
                        </div>

                        <hr>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('powerdns.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i> İptal
                            </a>
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save me-1"></i> Zone Oluştur
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('nameservers-container');
    
    // Add nameserver
    document.getElementById('add-nameserver').addEventListener('click', function() {
        const div = document.createElement('div');
        div.className = 'input-group mb-2';
        div.innerHTML = `
            <input type="text" class="form-control" name="nameservers[]" placeholder="ns2.example.com">
            <button type="button" class="btn btn-outline-danger btn-remove-ns">
                <i class="fas fa-times"></i>
            </button>
        `;
        container.appendChild(div);
        updateRemoveButtons();
    });

    // Remove nameserver
    container.addEventListener('click', function(e) {
        if (e.target.closest('.btn-remove-ns')) {
            e.target.closest('.input-group').remove();
            updateRemoveButtons();
        }
    });

    function updateRemoveButtons() {
        const buttons = container.querySelectorAll('.btn-remove-ns');
        buttons.forEach((btn, index) => {
            btn.disabled = buttons.length <= 1;
        });
    }

    // Form submit
    document.getElementById('createZoneForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = {
            name: formData.get('name'),
            account: formData.get('account') || 'whmcs',
            nameservers: formData.getAll('nameservers[]').filter(ns => ns.trim() !== '')
        };

        const btn = this.querySelector('button[type="submit"]');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Oluşturuluyor...';

        try {
            const response = await fetch('/api/powerdns/zones', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.success) {
                window.location.href = `/powerdns/zone/${data.name}`;
            } else {
                alert('Hata: ' + (result.message || 'Zone oluşturulamadı'));
            }
        } catch (error) {
            alert('Bir hata oluştu: ' + error.message);
        }

        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-save me-1"></i> Zone Oluştur';
    });
});
</script>
@endpush
