@extends('layout.app')

@section('title', 'Konfigurasi Mikrotik - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Konfigurasi Mikrotik" 
    :breadcrumbs="[
        ['name' => 'Mikrotik', 'url' => route('mikrotik.index')],
        ['name' => 'Konfigurasi']
    ]"
/>

<div class="container-fluid py-4">
<div class="row">
    <div class="col-lg-8">
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Pengaturan Koneksi Mikrotik</h6>
            </div>

            <div class="card-body pt-0">
                <form method="POST" action="{{ route('mikrotik.config.update') }}">
                    @csrf

                    <div class="input-group input-group-outline mb-3">
                        <label for="pppoe_local_address" class="form-label">Default PPPoE Local Address</label>
                        <input type="text"
                               class="form-control @error('pppoe_local_address') is-invalid @enderror"
                               id="pppoe_local_address"
                               name="pppoe_local_address"
                               value="{{ old('pppoe_local_address', $config->pppoe_local_address ?? '') }}"
                               placeholder="Contoh: 10.10.10.1">
                        <small class="text-muted">
                            IP ini otomatis diisi ke field <code>local-address</code> saat membuat PPPoE secret.
                            Kosongkan untuk memakai alamat host Mikrotik.
                        </small>
                        @error('pppoe_local_address')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="input-group input-group-outline mb-3">
                        <label for="nama" class="form-label">Nama Konfigurasi <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control @error('nama') is-invalid @enderror" 
                               id="nama" 
                               name="nama" 
                               value="{{ old('nama', $config->nama ?? 'Mikrotik Router') }}" 
                               placeholder="Mikrotik Router" 
                               required>
                        @error('nama')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label for="host" class="form-label">Host/IP Address <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('host') is-invalid @enderror" 
                                       id="host" 
                                       name="host" 
                                       value="{{ old('host', $config->ip_address ?? '') }}" 
                                       placeholder="192.168.1.1" 
                                       required>
                                @error('host')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label for="port" class="form-label">Port <span class="text-danger">*</span></label>
                                <input type="number" 
                                       class="form-control @error('port') is-invalid @enderror" 
                                       id="port" 
                                       name="port" 
                                       value="{{ old('port', $config->port ?? 8728) }}" 
                                       min="1" 
                                       max="65535" 
                                       required>
                                <small class="text-muted">Default: 8728 (RouterOS API)</small>
                                @error('port')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label for="username" class="form-label">Username <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('username') is-invalid @enderror" 
                                       id="username" 
                                       name="username" 
                                       value="{{ old('username', $config->username ?? '') }}" 
                                       required>
                                @error('username')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label for="password" class="form-label">Password <span class="text-danger">*</span></label>
                                <input type="password" 
                                       class="form-control @error('password') is-invalid @enderror" 
                                       id="password" 
                                       name="password" 
                                       value="{{ old('password', $config->password ?? '') }}" 
                                       required>
                                @error('password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="input-group input-group-outline mb-3">
                        <label for="timeout" class="form-label">Timeout (detik) <span class="text-danger">*</span></label>
                        <input type="number" 
                               class="form-control @error('timeout') is-invalid @enderror" 
                               id="timeout" 
                               name="timeout" 
                               value="{{ old('timeout', $config->timeout ?? 30) }}" 
                               min="1" 
                               max="300" 
                               required>
                        <small class="text-muted">Waktu tunggu maksimal untuk koneksi (1-300 detik)</small>
                        @error('timeout')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mt-4">
                        <button type="submit" class="btn bg-gradient-primary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i>Simpan Konfigurasi
                        </button>
                        <button type="button" class="btn bg-gradient-success mb-0" onclick="testConnection()">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">power</i>Test Koneksi
                        </button>
                        <a href="{{ route('mikrotik.index') }}" class="btn bg-gradient-secondary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">close</i>Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0 font-weight-bold text-primary">Informasi</h6>
            </div>
            <div class="card-body pt-0">
                <div class="alert alert-info">
                    <strong><i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">info</i>Catatan:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Pastikan RouterOS API sudah diaktifkan</li>
                        <li>Username harus memiliki akses API</li>
                        <li>Port default RouterOS API adalah 8728</li>
                        <li>Timeout disarankan 30-60 detik</li>
                    </ul>
                </div>
                
                <div class="alert alert-warning">
                    <strong><i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">warning</i>Penting:</strong>
                    <p class="mb-0 mt-2">Pastikan koneksi jaringan ke router Mikrotik stabil dan dapat diakses.</p>
                </div>
                
                <div class="alert alert-success">
                    <strong><i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">check_circle</i>Fitur:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Monitor bandwidth real-time</li>
                        <li>Sync data otomatis</li>
                        <li>Export log bandwidth</li>
                        <li>Statistik penggunaan</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@section('scripts')
<script>
function testConnection() {
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle; animation: spin 1s linear infinite;">sync</i>Testing...';
    btn.disabled = true;
    
    // Get form data
    const formData = new FormData();
    formData.append('nama', document.getElementById('nama').value);
    formData.append('host', document.getElementById('host').value);
    formData.append('port', document.getElementById('port').value);
    formData.append('username', document.getElementById('username').value);
    formData.append('password', document.getElementById('password').value);
    formData.append('timeout', document.getElementById('timeout').value);
    
    fetch('{{ route("mikrotik.test-connection") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
        } else {
            showAlert('danger', data.message);
        }
    })
    .catch(error => {
        showAlert('danger', 'Error: ' + error.message);
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-' + type + ' alert-dismissible fade show';
    alertDiv.innerHTML = message;
    
    const container = document.querySelector('.container-fluid');
    container.insertBefore(alertDiv, container.firstChild);
    
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}
</script>
@endsection