@extends('layout.app')

@section('title', 'Edit Konfigurasi NetXMS')

@section('content')
<x-material-page-header 
    title="Edit Konfigurasi NetXMS" 
    description="Ubah pengaturan koneksi NetXMS"
    :breadcrumbs="[
        ['name' => 'Dashboard', 'url' => route('dashboard')],
        ['name' => 'NetXMS', 'url' => route('netxms.index')],
        ['name' => 'Edit']
    ]"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-xl-8 offset-xl-2">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">settings</i> Konfigurasi NetXMS
                    </h6>
                </div>
                <div class="card-body pt-3">
                    @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">check_circle</i></span>
                        <span class="alert-text">{{ session('success') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif

                    @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
                        <span class="alert-text">{{ session('error') }}</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif

                    @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
                        <span class="alert-text">
                            <strong>Terjadi kesalahan:</strong>
                            <ul class="mb-0 mt-2">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif

                    <form action="{{ route('netxms.update') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" id="enabled" name="enabled" value="1" {{ old('enabled', $config['enabled']) ? 'checked' : '' }}>
                            <label class="form-check-label" for="enabled">
                                <span id="enabled-label">{{ $config['enabled'] ? 'Aktif' : 'Nonaktif' }}</span>
                            </label>
                            <small class="form-text text-muted d-block">Centang untuk mengaktifkan integrasi NetXMS</small>
                        </div>

                        <div class="input-group input-group-outline mb-3">
                            <label for="url" class="form-label">URL NetXMS Server <span class="text-danger">*</span></label>
                            <input type="url" class="form-control @error('url') is-invalid @enderror" id="url" name="url" 
                                   value="{{ old('url', $config['url']) }}" placeholder="http://setupladen.net/netxms" required>
                            @error('url')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">URL lengkap ke server NetXMS (contoh: http://setupladen.net/netxms atau http://server:4701)</small>
                        </div>

                        <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']) }}" placeholder="admin" required>
                            @error('username')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Username untuk autentikasi ke NetXMS</small>
                        </div>

                        <div class="input-group input-group-outline mb-3">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" 
                                   placeholder="Kosongkan jika tidak ingin mengubah password">
                            @error('password')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Password untuk autentikasi. Kosongkan jika tidak ingin mengubah password yang sudah ada.</small>
                        </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']) }}" min="1" max="300" required>
                            @error('timeout')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Waktu timeout koneksi dalam detik (1-300)</small>
                        </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>
                            <a href="{{ route('netxms.index') }}" class="btn bg-gradient-secondary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">arrow_back</i> Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Info Card -->
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded me-2 text-info" style="font-size: 20px; vertical-align: middle;">info</i> Informasi
                    </h6>
                </div>
                <div class="card-body pt-0">
                    <div class="alert alert-info mb-0">
                        <h6 class="alert-heading">Catatan Penting:</h6>
                        <ul class="mb-0">
                            <li>Konfigurasi akan disimpan ke database dan akan digunakan untuk koneksi ke NetXMS</li>
                            <li>Pastikan URL NetXMS dapat diakses dari server aplikasi</li>
                            <li>Setelah menyimpan, gunakan tombol "Test Connection" untuk memverifikasi koneksi</li>
                            <li>Jika password dikosongkan, password yang lama akan tetap digunakan</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Update label when enabled checkbox changes
    const enabledCheckbox = document.getElementById('enabled');
    const enabledLabel = document.getElementById('enabled-label');
    
    if (enabledCheckbox && enabledLabel) {
        enabledCheckbox.addEventListener('change', function() {
            enabledLabel.textContent = this.checked ? 'Aktif' : 'Nonaktif';
        });
    }
});
</script>
@endsection