@extends('layout.app')

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

@section('content')
<x-material-page-header 
    title="Tambah Infrastruktur" 
    :breadcrumbs="[
        ['name' => 'Infrastruktur', 'url' => route('infrastruktur.index')],
        ['name' => 'Tambah']
    ]"
    :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;">business</i> Form Tambah Infrastruktur
                    </h6>
                </div>
                <div class="card-body pt-3">
                <form method="POST" action="{{ route('infrastruktur.store') }}" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="form-group 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') }}" 
                               required>
                        @error('nama')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group 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') == 'BTS' ? 'selected' : '' }}>BTS (Base Transceiver Station)</option>
                                    <option value="POP" {{ old('jenis') == 'POP' ? 'selected' : '' }}>POP (Point of Presence)</option>
                                    <option value="Data Center" {{ old('jenis') == 'Data Center' ? 'selected' : '' }}>Data Center</option>
                                    <option value="Switch" {{ old('jenis') == 'Switch' ? 'selected' : '' }}>Switch</option>
                                    <option value="Router" {{ old('jenis') == 'Router' ? 'selected' : '' }}>Router</option>
                                    <option value="OLT" {{ old('jenis') == 'OLT' ? 'selected' : '' }}>OLT (Optical Line Terminal)</option>
                                    <option value="ODP" {{ old('jenis') == 'ODP' ? 'selected' : '' }}>ODP (Optical Distribution Point)</option>
                                    <option value="ODC" {{ old('jenis') == 'ODC' ? 'selected' : '' }}>ODC (Optical Distribution Cabinet)</option>
                                    <option value="Tiang" {{ old('jenis') == 'Tiang' ? 'selected' : '' }}>Tiang</option>
                                    <option value="Closure" {{ old('jenis') == 'Closure' ? 'selected' : '' }}>Closure / Joint Box</option>
                                </select>
                                @error('jenis')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group 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', 'Aktif') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="Maintenance" {{ old('status') == 'Maintenance' ? 'selected' : '' }}>Maintenance</option>
                                    <option value="Nonaktif" {{ old('status') == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label">Alamat</label>
                        <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                  id="alamat" 
                                  name="alamat" 
                                  rows="3">{{ old('alamat') }}</textarea>
                        @error('alamat')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Latitude</label>
                                <input type="number" 
                                       class="form-control @error('latitude') is-invalid @enderror" 
                                       id="latitude" 
                                       name="latitude" 
                                       value="{{ old('latitude') }}" 
                                       step="any" 
                                       placeholder="-6.2088">
                                <small class="text-muted">Contoh: -6.2088</small>
                                @error('latitude')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Longitude</label>
                                <input type="number" 
                                       class="form-control @error('longitude') is-invalid @enderror" 
                                       id="longitude" 
                                       name="longitude" 
                                       value="{{ old('longitude') }}" 
                                       step="any" 
                                       placeholder="106.8456">
                                <small class="text-muted">Contoh: 106.8456</small>
                                @error('longitude')
                                    <div class="invalid-feedback d-block">{{ $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 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', 8) }}"
                                       min="1"
                                       max="128"
                                       placeholder="Default: 8">
                                <small class="text-muted">Jumlah port untuk ODP (default: 8 port)</small>
                                @error('jumlah_port')
                                    <div class="invalid-feedback d-block">{{ $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 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') == '12C' ? 'selected' : '' }}>12C</option>
                                    <option value="24C" {{ old('kapasitas_core') == '24C' ? 'selected' : '' }}>24C</option>
                                    <option value="48C" {{ old('kapasitas_core') == '48C' ? 'selected' : '' }}>48C</option>
                                </select>
                                <small class="text-muted">Kapasitas core untuk ODC</small>
                                @error('kapasitas_core')
                                    <div class="invalid-feedback d-block">{{ $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 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') }}"
                                       placeholder="Contoh: T001, T002">
                                @error('nomor_tiang')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label 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') == 'Baik' ? 'selected' : '' }}>Baik</option>
                                    <option value="Rusak Ringan" {{ old('kondisi_tiang') == 'Rusak Ringan' ? 'selected' : '' }}>Rusak Ringan</option>
                                    <option value="Rusak Berat" {{ old('kondisi_tiang') == 'Rusak Berat' ? 'selected' : '' }}>Rusak Berat</option>
                                    <option value="Perlu Perbaikan" {{ old('kondisi_tiang') == 'Perlu Perbaikan' ? 'selected' : '' }}>Perlu Perbaikan</option>
                                </select>
                                @error('kondisi_tiang')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label 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') }}"
                                       placeholder="Contoh: ODC-001 → ODP-001">
                                <small class="text-muted">Jalur fiber yang melewati tiang ini</small>
                                @error('jalur_tiang')
                                    <div class="invalid-feedback d-block">{{ $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 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') }}"
                                       placeholder="Contoh: CL-001, CL-002">
                                @error('id_closure')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label 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') }}"
                                       min="0"
                                       placeholder="Jumlah core masuk">
                                @error('core_masuk')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label 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') }}"
                                       min="0"
                                       placeholder="Jumlah core keluar">
                                @error('core_keluar')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <!-- General Fields -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Kapasitas</label>
                                <input type="text" 
                                       class="form-control @error('kapasitas') is-invalid @enderror" 
                                       id="kapasitas" 
                                       name="kapasitas" 
                                       value="{{ old('kapasitas') }}" 
                                       placeholder="Contoh: 1000 Mbps, 48 Port">
                                @error('kapasitas')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Vendor</label>
                                <input type="text" 
                                       class="form-control @error('vendor') is-invalid @enderror" 
                                       id="vendor" 
                                       name="vendor" 
                                       value="{{ old('vendor') }}" 
                                       placeholder="Nama vendor/perusahaan">
                                @error('vendor')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label 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') }}">
                        @error('tanggal_instalasi')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group mb-3">
                        <label 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</small>
                        @error('foto')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    @if(config('librenms.enabled'))
                    <div class="form-group 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') }}" 
                               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 d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    @endif
                    
                    <div class="form-group 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') }}</textarea>
                        @error('keterangan')
                            <div class="invalid-feedback d-block">{{ $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>Simpan 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 class="col-lg-4">
            <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" style="font-size: 0.875rem; color: #344767;">Informasi</h6>
                </div>
                <div class="card-body pt-3">
                    <p class="text-muted">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">location_on</i>
                        Koordinat (lat/lng) untuk menampilkan di peta.
                    </p>
                    <p class="text-muted">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">image</i>
                        Foto opsional untuk dokumentasi.
                    </p>
                    <p class="text-muted">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">speed</i>
                        Kapasitas bisa berupa kecepatan atau jumlah port.
                    </p>
                    <p class="text-muted">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">business</i>
                        Vendor untuk tracking pemasok.
                    </p>
                    <div class="alert alert-warning text-white mt-3 mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">warning</i>
                        <strong>Penting:</strong> Pastikan koordinat sudah benar untuk akurasi peta.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@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