@extends('layout.app')

@section('title', 'Edit Infrastruktur - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Edit Infrastruktur" 
    :breadcrumbs="[
        ['name' => 'Infrastruktur', 'url' => route('infrastruktur.index')],
        ['name' => 'Edit']
    ]"
    :action="route('infrastruktur.index')" 
    actionLabel="Kembali" 
    actionIcon="arrow_back"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-8">
            <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;">edit</i> Form Edit Infrastruktur
                    </h6>
                </div>
                <div class="card-body pt-3">
                <form method="POST" action="{{ route('infrastruktur.update', $infrastruktur) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Nama Infrastruktur <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control @error('nama') is-invalid @enderror" 
                               id="nama" 
                               name="nama" 
                               value="{{ old('nama', $infrastruktur->nama) }}" 
                               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 class="form-label">Jenis <span class="text-danger">*</span></label>
                                <select class="form-control @error('jenis') is-invalid @enderror" 
                                        id="jenis" name="jenis" required>
                                    <option value="">Pilih Jenis</option>
                                    <option value="BTS" {{ old('jenis', $infrastruktur->jenis) == 'BTS' ? 'selected' : '' }}>BTS (Base Transceiver Station)</option>
                                    <option value="POP" {{ old('jenis', $infrastruktur->jenis) == 'POP' ? 'selected' : '' }}>POP (Point of Presence)</option>
                                    <option value="Data Center" {{ old('jenis', $infrastruktur->jenis) == 'Data Center' ? 'selected' : '' }}>Data Center</option>
                                    <option value="Switch" {{ old('jenis', $infrastruktur->jenis) == 'Switch' ? 'selected' : '' }}>Switch</option>
                                    <option value="Router" {{ old('jenis', $infrastruktur->jenis) == 'Router' ? 'selected' : '' }}>Router</option>
                                    <option value="OLT" {{ old('jenis', $infrastruktur->jenis) == 'OLT' ? 'selected' : '' }}>OLT (Optical Line Terminal)</option>
                                    <option value="ODP" {{ old('jenis', $infrastruktur->jenis) == 'ODP' ? 'selected' : '' }}>ODP (Optical Distribution Point)</option>
                                    <option value="ODC" {{ old('jenis', $infrastruktur->jenis) == 'ODC' ? 'selected' : '' }}>ODC (Optical Distribution Cabinet)</option>
                                    <option value="Tiang" {{ old('jenis', $infrastruktur->jenis) == 'Tiang' ? 'selected' : '' }}>Tiang</option>
                                    <option value="Closure" {{ old('jenis', $infrastruktur->jenis) == 'Closure' ? 'selected' : '' }}>Closure / Joint Box</option>
                                </select>
                                @error('jenis')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-control @error('status') is-invalid @enderror" 
                                        id="status" name="status" required>
                                    <option value="">Pilih Status</option>
                                    <option value="Aktif" {{ old('status', $infrastruktur->status) == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="Maintenance" {{ old('status', $infrastruktur->status) == 'Maintenance' ? 'selected' : '' }}>Maintenance</option>
                                    <option value="Nonaktif" {{ old('status', $infrastruktur->status) == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="alamat" class="form-label">Alamat <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                  id="alamat" 
                                  name="alamat" 
                                  rows="3" 
                                  required>{{ old('alamat', $infrastruktur->alamat) }}</textarea>
                        @error('alamat')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="latitude" class="form-label">Latitude</label>
                                <input type="number" 
                                       class="form-control @error('latitude') is-invalid @enderror" 
                                       id="latitude" 
                                       name="latitude" 
                                       value="{{ old('latitude', $infrastruktur->latitude) }}" 
                                       step="any" 
                                       placeholder="-6.2088">
                                <small class="text-muted">Contoh: -6.2088</small>
                                @error('latitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="longitude" class="form-label">Longitude</label>
                                <input type="number" 
                                       class="form-control @error('longitude') is-invalid @enderror" 
                                       id="longitude" 
                                       name="longitude" 
                                       value="{{ old('longitude', $infrastruktur->longitude) }}" 
                                       step="any" 
                                       placeholder="106.8456">
                                <small class="text-muted">Contoh: 106.8456</small>
                                @error('longitude')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- ODP Specific Fields -->
                    <div id="odp-fields" class="row" style="display: none;">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="jumlah_port" class="form-label">Jumlah Port</label>
                                <input type="number" 
                                       class="form-control @error('jumlah_port') is-invalid @enderror" 
                                       id="jumlah_port" 
                                       name="jumlah_port" 
                                       value="{{ old('jumlah_port', $infrastruktur->jumlah_port) }}"
                                       min="1"
                                       max="128"
                                       placeholder="Default: 8">
                                <small class="form-text text-muted">Jumlah port untuk ODP (default: 8 port)</small>
                                @error('jumlah_port')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- ODC Specific Fields -->
                    <div id="odc-fields" class="row" style="display: none;">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="kapasitas_core" class="form-label">Kapasitas Core</label>
                                <select class="form-control @error('kapasitas_core') is-invalid @enderror" 
                                        id="kapasitas_core" 
                                        name="kapasitas_core">
                                    <option value="">Pilih Kapasitas</option>
                                    <option value="12C" {{ old('kapasitas_core', $infrastruktur->kapasitas_core) == '12C' ? 'selected' : '' }}>12C</option>
                                    <option value="24C" {{ old('kapasitas_core', $infrastruktur->kapasitas_core) == '24C' ? 'selected' : '' }}>24C</option>
                                    <option value="48C" {{ old('kapasitas_core', $infrastruktur->kapasitas_core) == '48C' ? 'selected' : '' }}>48C</option>
                                </select>
                                <small class="form-text text-muted">Kapasitas core untuk ODC</small>
                                @error('kapasitas_core')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tiang Specific Fields -->
                    <div id="tiang-fields" class="row" style="display: none;">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="nomor_tiang" class="form-label">Nomor Tiang</label>
                                <input type="text" 
                                       class="form-control @error('nomor_tiang') is-invalid @enderror" 
                                       id="nomor_tiang" 
                                       name="nomor_tiang" 
                                       value="{{ old('nomor_tiang', $infrastruktur->nomor_tiang) }}"
                                       placeholder="Contoh: T001, T002">
                                @error('nomor_tiang')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="kondisi_tiang" class="form-label">Kondisi Tiang</label>
                                <select class="form-control @error('kondisi_tiang') is-invalid @enderror" 
                                        id="kondisi_tiang" 
                                        name="kondisi_tiang">
                                    <option value="">Pilih Kondisi</option>
                                    <option value="Baik" {{ old('kondisi_tiang', $infrastruktur->kondisi_tiang) == 'Baik' ? 'selected' : '' }}>Baik</option>
                                    <option value="Rusak Ringan" {{ old('kondisi_tiang', $infrastruktur->kondisi_tiang) == 'Rusak Ringan' ? 'selected' : '' }}>Rusak Ringan</option>
                                    <option value="Rusak Berat" {{ old('kondisi_tiang', $infrastruktur->kondisi_tiang) == 'Rusak Berat' ? 'selected' : '' }}>Rusak Berat</option>
                                    <option value="Perlu Perbaikan" {{ old('kondisi_tiang', $infrastruktur->kondisi_tiang) == 'Perlu Perbaikan' ? 'selected' : '' }}>Perlu Perbaikan</option>
                                </select>
                                @error('kondisi_tiang')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label for="jalur_tiang" class="form-label">Jalur Tiang</label>
                                <input type="text" 
                                       class="form-control @error('jalur_tiang') is-invalid @enderror" 
                                       id="jalur_tiang" 
                                       name="jalur_tiang" 
                                       value="{{ old('jalur_tiang', $infrastruktur->jalur_tiang) }}"
                                       placeholder="Contoh: ODC-001 → ODP-001">
                                <small class="form-text text-muted">Jalur fiber yang melewati tiang ini</small>
                                @error('jalur_tiang')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- Closure Specific Fields -->
                    <div id="closure-fields" class="row" style="display: none;">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="id_closure" class="form-label">ID Closure</label>
                                <input type="text" 
                                       class="form-control @error('id_closure') is-invalid @enderror" 
                                       id="id_closure" 
                                       name="id_closure" 
                                       value="{{ old('id_closure', $infrastruktur->id_closure) }}"
                                       placeholder="Contoh: CL-001, CL-002">
                                @error('id_closure')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label for="core_masuk" class="form-label">Core Masuk</label>
                                <input type="number" 
                                       class="form-control @error('core_masuk') is-invalid @enderror" 
                                       id="core_masuk" 
                                       name="core_masuk" 
                                       value="{{ old('core_masuk', $infrastruktur->core_masuk) }}"
                                       min="0"
                                       placeholder="Jumlah core masuk">
                                @error('core_masuk')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label for="core_keluar" class="form-label">Core Keluar</label>
                                <input type="number" 
                                       class="form-control @error('core_keluar') is-invalid @enderror" 
                                       id="core_keluar" 
                                       name="core_keluar" 
                                       value="{{ old('core_keluar', $infrastruktur->core_keluar) }}"
                                       min="0"
                                       placeholder="Jumlah core keluar">
                                @error('core_keluar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- General Fields -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="kapasitas" class="form-label">Kapasitas</label>
                                <input type="text" 
                                       class="form-control @error('kapasitas') is-invalid @enderror" 
                                       id="kapasitas" 
                                       name="kapasitas" 
                                       value="{{ old('kapasitas', $infrastruktur->kapasitas) }}" 
                                       placeholder="Contoh: 1000 Mbps, 48 Port">
                                @error('kapasitas')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="vendor" class="form-label">Vendor</label>
                                <input type="text" 
                                       class="form-control @error('vendor') is-invalid @enderror" 
                                       id="vendor" 
                                       name="vendor" 
                                       value="{{ old('vendor', $infrastruktur->vendor) }}" 
                                       placeholder="Nama vendor/perusahaan">
                                @error('vendor')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="tanggal_instalasi" class="form-label">Tanggal Instalasi</label>
                        <input type="date" 
                               class="form-control @error('tanggal_instalasi') is-invalid @enderror" 
                               id="tanggal_instalasi" 
                               name="tanggal_instalasi" 
                               value="{{ old('tanggal_instalasi', $infrastruktur->tanggal_instalasi?->format('Y-m-d')) }}">
                        @error('tanggal_instalasi')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="foto" class="form-label">Foto</label>
                        <input type="file" 
                               class="form-control @error('foto') is-invalid @enderror" 
                               id="foto" 
                               name="foto"
                               accept="image/*">
                        <small class="text-muted">Format: JPG, PNG. Maksimal 2MB. Kosongkan jika tidak ingin mengubah foto.</small>
                        @if($infrastruktur->foto)
                        <div class="mt-2">
                            <img src="{{ asset('uploads/infrastruktur/' . $infrastruktur->foto) }}" 
                                 alt="Foto {{ $infrastruktur->nama }}" 
                                 class="img-thumbnail" 
                                 style="max-height: 100px;">
                        </div>
                        @endif
                        @error('foto')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    @if(config('librenms.enabled'))
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">LibreNMS Device ID</label>
                        <input type="number" 
                               class="form-control @error('librenms_device_id') is-invalid @enderror" 
                               id="librenms_device_id" 
                               name="librenms_device_id" 
                               value="{{ old('librenms_device_id', $infrastruktur->librenms_device_id) }}" 
                               placeholder="ID perangkat di LibreNMS">
                        <small class="text-muted">Opsional: ID perangkat di LibreNMS untuk monitoring</small>
                        @error('librenms_device_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    @endif
                    
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea class="form-control @error('keterangan') is-invalid @enderror" 
                                  id="keterangan" 
                                  name="keterangan" 
                                  rows="3">{{ old('keterangan', $infrastruktur->keterangan) }}</textarea>
                        @error('keterangan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <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>Update Infrastruktur
                        </button>
                        <a href="{{ route('infrastruktur.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 shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Informasi</h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <strong><i class="fas fa-info-circle me-2"></i>Catatan:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Koordinat (lat/lng) untuk menampilkan di peta</li>
                        <li>Foto opsional untuk dokumentasi</li>
                        <li>Kapasitas bisa berupa kecepatan atau jumlah port</li>
                        <li>Vendor untuk tracking pemasok</li>
                        @if(config('librenms.enabled'))
                        <li>LibreNMS Device ID untuk monitoring</li>
                        @endif
                    </ul>
                </div>
                
                <div class="alert alert-warning">
                    <strong><i class="fas fa-exclamation-triangle me-2"></i>Penting:</strong>
                    <p class="mb-0 mt-2">Pastikan koordinat sudah benar untuk akurasi peta.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@section('scripts')
<script>
// Show/hide fields based on jenis
document.getElementById('jenis').addEventListener('change', function() {
    const jenis = this.value;
    
    // Hide all specific fields
    document.getElementById('odp-fields').style.display = 'none';
    document.getElementById('odc-fields').style.display = 'none';
    document.getElementById('tiang-fields').style.display = 'none';
    document.getElementById('closure-fields').style.display = 'none';
    
    // Remove required attributes
    const jumlahPort = document.getElementById('jumlah_port');
    const kapasitasCore = document.getElementById('kapasitas_core');
    if (jumlahPort) jumlahPort.removeAttribute('required');
    if (kapasitasCore) kapasitasCore.removeAttribute('required');
    
    // Show relevant fields based on jenis
    if (jenis === 'ODP') {
        document.getElementById('odp-fields').style.display = 'block';
    } else if (jenis === 'ODC') {
        document.getElementById('odc-fields').style.display = 'block';
    } else if (jenis === 'Tiang') {
        document.getElementById('tiang-fields').style.display = 'block';
    } else if (jenis === 'Closure') {
        document.getElementById('closure-fields').style.display = 'block';
    }
});

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const jenisSelect = document.getElementById('jenis');
    if (jenisSelect && jenisSelect.value) {
        jenisSelect.dispatchEvent(new Event('change'));
    }
});
</script>
@endsection