@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @php
        $gedungAliasMap = [
            'A' => 'trsgda',
            'B' => 'trsgdb',
            'C' => 'trsgdc',
            'E' => 'trsgde',
            'F' => 'trsgdf',
        ];
        $currentGedung = strtoupper((string) ($record->gedung ?? ''));
        $topologyBackUrl = isset($gedungAliasMap[$currentGedung])
            ? url($gedungAliasMap[$currentGedung])
            : url($url_menu);

        $editKatName = '';
        if (isset($record->kategori) && isset($kategori_list)) {
            $editKat = $kategori_list->firstWhere('id', $record->kategori);
            $editKatName = $editKat ? strtolower($editKat->nama_kategori) : '';
        }
        $isEditSwitch = str_contains($editKatName, 'switch');
        $isEditHasPort =
            str_contains($editKatName, 'switch') ||
            str_contains($editKatName, 'server') ||
            str_contains($editKatName, 'router');
    @endphp
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="card border-0 shadow-lg" style="border-radius: 1rem;">
                    <div class="card-header border-0 pb-0" style="border-radius: 1rem 1rem 0 0;">
                        <div class="d-flex align-items-center">
                            <a href="{{ $topologyBackUrl }}" class="btn btn-sm btn-outline-secondary mb-0 me-3">
                                <i class="fas fa-arrow-left me-1"></i>Topologi
                            </a>
                            <h5 class="mb-0">Edit Perangkat</h5>
                        </div>
                    </div>
                    <div class="card-body pt-3">
                        @include('components.alert')
                        <form method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}" id="editDeviceForm"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="form-group mb-3">
                                <label class="form-control-label">
                                    <i class="fas fa-building text-primary me-1"></i>Gedung <span
                                        class="text-danger">*</span>
                                </label>
                                <input type="hidden" name="gedung" value="{{ $record->gedung }}">
                                <select class="form-control" disabled id="edit_gedung">
                                    <option value="">-- Pilih Gedung --</option>
                                    @foreach ($gedung_list as $g)
                                        <option value="{{ $g->value }}"
                                            {{ $record->gedung == $g->value ? 'selected' : '' }}>
                                            {{ $g->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Jenis Perangkat (Kategori) --}}
                            <div class="form-group mb-3">
                                <label class="form-control-label">
                                    <i class="fas fa-th-large text-primary me-1"></i>Jenis Perangkat <span
                                        class="text-danger">*</span>
                                </label>
                                <select name="kategori" class="form-control" required id="edit_kategori">
                                    <option value="" data-name="" data-form-type="">-- Pilih Kategori --</option>
                                    @foreach ($kategori_list as $k)
                                        <option value="{{ $k->id }}" data-name="{{ strtolower($k->nama_kategori) }}"
                                            data-form-type="{{ strtolower(trim($k->tipe_form ?? '')) }}"
                                            {{ $record->kategori == $k->id ? 'selected' : '' }}>
                                            {{ $k->nama_kategori }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Nama Perangkat --}}
                            <div class="form-group mb-3" id="edit_perangkat_group">
                                <label class="form-control-label">
                                    <i class="fas fa-tag text-primary me-1"></i>Nama Perangkat <span
                                        class="text-danger">*</span>
                                </label>
                                <select name="nama_perangkat" class="form-control" required id="edit_nama_perangkat"
                                    style="width:100%">
                                    <option value="{{ $record->nama_perangkat }}" selected>{{ $record->nama_perangkat }}
                                    </option>
                                </select>
                                <small class="text-muted edit-perangkat-hint">Pilih jenis perangkat terlebih dahulu, lalu
                                    cari nama perangkat</small>
                            </div>

                            {{-- Port Sumber (Input Jaringan) --}}
                            <div class="form-group mb-3" id="edit_uplink_port_group"
                                style="{{ $isEditSwitch ? '' : 'display:none' }}">
                                <input type="hidden" id="old_uplink_port" value="{{ $record->uplink_port }}">
                                <label class="form-control-label">
                                    <i class="fas fa-arrow-down text-primary me-1"></i>Port Sumber (Input Jaringan)
                                </label>
                                <div id="edit_uplink_port_selector">
                                    <input type="text" name="uplink_port" class="form-control" id="edit_uplink_port_text"
                                        value="{{ $record->uplink_port }}" placeholder="Contoh: 1">
                                </div>
                                <small class="text-muted" id="edit_uplink_port_hint">Port pada perangkat ini yang digunakan
                                    sebagai jalur masuk kabel dari parent switch. Kosongkan jika root device.</small>
                            </div>

                            {{-- Terhubung Ke (Parent) --}}
                            <div class="form-group mb-3">
                                <label class="form-control-label">
                                    <i class="fas fa-link text-primary me-1"></i>Terhubung Ke (Parent)
                                </label>
                                <select name="parent" class="form-control" id="edit_parent" style="width:100%">
                                    <option value="">-- Tanpa Parent / Root --</option>
                                    @foreach ($parent_list as $p)
                                        <option value="{{ $p->id }}"
                                            {{ $record->parent == $p->id ? 'selected' : '' }}>
                                            {{ $p->label ?? ($p->nama_kategori ?? '') . ' - ' . ($p->nama_perangkat ?? '') }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted" id="edit_parent_hint">Pilih switch parent atau langsung ke Server
                                    Pusat</small>
                            </div>

                            {{-- Port --}}
                            <div class="form-group mb-3" id="edit_port_group">
                                <label class="form-control-label">
                                    <i class="fas fa-plug text-primary me-1"></i>Port Terpakai
                                </label>
                                <div id="edit_port_selector">
                                    <input type="text" name="port_terpakai" class="form-control" id="edit_port_text"
                                        value="{{ $record->port_terpakai }}" placeholder="Contoh: 1">
                                </div>
                                <small class="text-muted" id="edit_port_hint">Port pada parent device</small>
                            </div>

                            {{-- Jumlah Port (only for Switch) --}}
                            @php
                                $editKatName = '';
                                if ($record->kategori) {
                                    $editKat = $kategori_list->firstWhere('id', $record->kategori);
                                    $editKatName = $editKat ? strtolower($editKat->nama_kategori) : '';
                                }
                                $isEditHasPort =
                                    str_contains($editKatName, 'switch') ||
                                    str_contains($editKatName, 'server') ||
                                    str_contains($editKatName, 'router');
                            @endphp
                            {{-- <div class="form-group mb-3" id="edit_jumlah_port_group"
                                style="{{ $isEditHasPort ? '' : 'display:none' }}">
                                <label class="form-control-label">
                                    <i class="fas fa-th text-primary me-1"></i>Jumlah Port
                                </label>
                                <input type="number" name="jumlah_port" class="form-control" id="edit_jumlah_port"
                                    min="1" max="96" value="{{ $record->jumlah_port }}"
                                    placeholder="Otomatis dari data master">
                                <small class="text-muted" id="edit_jumlah_port_hint">
                                    @if ($isEditHasPort && $record->jumlah_port)
                                        <i class="fas fa-info-circle text-info"></i> Saat ini {{ $record->jumlah_port }}
                                        port (slot virtual). Ubah angka untuk menambah/mengurangi jumlah slot.
                                    @else
                                        Jumlah port untuk perangkat ini (slot port dihasilkan secara virtual).
                                    @endif
                                </small>
                            </div> --}}



                            <hr class="horizontal dark">
                            <p class="text-xs text-uppercase font-weight-bold text-muted mb-3">
                                <i class="fas fa-globe me-1"></i>Informasi Jaringan
                            </p>

                            {{-- <div class="row">
                             
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            <i class="fas fa-network-wired text-primary me-1"></i>IP Address
                                        </label>
                                        <input type="text" class="form-control" id="edit_ip_address"
                                            value="{{ $record->ip_address }}" placeholder="192.168.1.100">
                                        <input type="hidden" name="ip_address" id="edit_ip_address_value"
                                            value="{{ $record->ip_address }}">
                                        <small class="text-muted">Format: 192.168.x.x atau IPv6</small>
                                    </div>
                                </div>
                              
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            <i class="fas fa-building text-primary me-1"></i>Gedung <span
                                                class="text-danger">*</span>
                                        </label>
                                        <select class="form-control" disabled id="edit_gedung_detail">
                                            <option value="">-- Pilih Gedung --</option>
                                            @foreach ($gedung_list as $g)
                                                <option value="{{ $g->value }}"
                                                    {{ $record->gedung == $g->value ? 'selected' : '' }}>
                                                    {{ $g->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div> --}}

                            <div class="row">
                                {{-- Location --}}
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            <i class="fas fa-map-marker-alt text-primary me-1"></i>Location
                                        </label>
                                        <select name="location" class="form-control" id="edit_location"
                                            style="width:100%">
                                            <option value="">-- Memuat Location --</option>
                                        </select>
                                        <small class="text-muted" id="edit_location_hint">Location diambil dari master
                                            lokasi</small>
                                    </div>
                                </div>
                                {{-- Link Gedung --}}
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            <i class="fas fa-arrow-right-arrow-left text-primary me-1"></i>Link Gedung
                                        </label>
                                        <select name="link_gedung" class="form-control">
                                            <option value="">-- Tidak Ada Link --</option>
                                            @foreach ($link_gedung_list as $g)
                                                <option value="{{ $g->value }}"
                                                    {{ $record->link_gedung == $g->value ? 'selected' : '' }}>
                                                    {{ $g->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-muted">Untuk menghubungkan topologi antar gedung</small>
                                    </div>
                                </div>
                            </div>

                            {{-- Asset Photos from msjasset (read-only preview) --}}
                            @php
                                $editHasAssetPhotos = !empty($asset_photos) && count($asset_photos) > 0;
                            @endphp
                            <div id="edit_asset_photos_section" {!! $editHasAssetPhotos ? '' : 'style="display:none"' !!}>
                                <div class="d-flex align-items-center mb-2">
                                    <span class="badge bg-gradient-info me-2"><i
                                            class="fas fa-cloud-arrow-down me-1"></i>Master Asset</span>
                                    <small class="text-muted" id="edit_asset_photos_count">
                                        @if ($editHasAssetPhotos)
                                            Foto dari sistem asset ({{ count($asset_photos) }} foto)
                                        @endif
                                    </small>
                                </div>
                                <div class="row g-2 mb-3" id="edit_asset_photos_grid">
                                    @if ($editHasAssetPhotos)
                                        @foreach ($asset_photos as $idx => $assetImg)
                                            <div class="col-md-6">
                                                <div class="p-3 bg-gray-100 border-radius-lg h-100">
                                                    <small class="text-muted text-uppercase font-weight-bold"
                                                        style="font-size: 0.68rem;">Foto Asset {{ $idx + 1 }}</small>
                                                    <div class="mt-2">
                                                        <img src="{{ $asset_storage_url }}/{{ $assetImg }}"
                                                            alt="Foto Asset {{ $idx + 1 }}"
                                                            class="img-fluid border-radius-lg asset-photo-preview"
                                                            data-title="Foto Asset {{ $idx + 1 }}"
                                                            style="max-height: 160px; object-fit: cover; width: 100%; cursor: zoom-in;"
                                                            onclick="openAssetPhoto(this)"
                                                            onerror="this.closest('.col-md-6')?.remove()">
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            <i class="fas fa-camera text-primary me-1"></i>Foto Perangkat (Dekat)
                                        </label>
                                        <input type="file" name="foto_dekat" class="form-control"
                                            accept="image/jpeg,image/png,image/webp">
                                        @if (!empty($record->foto_dekat))
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/' . $record->foto_dekat) }}"
                                                    alt="Foto Asset {{ $idx + 1 }}"
                                                    class="img-fluid border-radius-lg asset-photo-preview"
                                                    data-title="Foto Asset {{ $idx + 1 }}"
                                                    style="max-height: 160px; object-fit: cover; width: 100%; cursor: zoom-in;"
                                                    onclick="openAssetPhoto(this)"
                                                    onerror="this.closest('.col-md-6')?.remove()">
                                            </div>
                                        @endif
                                        <small class="text-muted">Upload foto baru untuk mengganti (opsional, max
                                            20MB)</small>
                                        @error('foto_dekat')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">
                                            <i class="fas fa-image text-primary me-1"></i>Foto Perangkat (Jauh)
                                        </label>
                                        <input type="file" name="foto_jauh" class="form-control"
                                            accept="image/jpeg,image/png,image/webp">
                                        @if (!empty($record->foto_jauh))
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/' . $record->foto_jauh) }}"
                                                    alt="Foto Asset {{ $idx + 1 }}"
                                                    class="img-fluid border-radius-lg asset-photo-preview"
                                                    data-title="Foto Asset {{ $idx + 1 }}"
                                                    style="max-height: 160px; object-fit: cover; width: 100%; cursor: zoom-in;"
                                                    onclick="openAssetPhoto(this)"
                                                    onerror="this.closest('.col-md-6')?.remove()">
                                            </div>
                                        @endif
                                        <small class="text-muted">Upload foto baru untuk mengganti (opsional, max
                                            20MB)</small>
                                        @error('foto_jauh')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- Keterangan --}}
                            <div class="form-group mb-3">
                                <label class="form-control-label">
                                    <i class="fas fa-sticky-note text-primary me-1"></i>Keterangan
                                </label>
                                <textarea name="keterangan" class="form-control" rows="2" placeholder="Catatan tambahan tentang perangkat...">{{ $record->keterangan }}</textarea>
                            </div>

                            <hr class="horizontal dark">
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ $topologyBackUrl }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times me-1"></i>Batal
                                </a>
                                <button type="submit" class="btn bg-gradient-primary">
                                    <i class="fas fa-save me-1"></i>Update Perangkat
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="assetPhotoModal" tabindex="-1" aria-labelledby="assetPhotoModalLabel"
        aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-white">
                <div class="modal-header">
                    <h6 class="modal-title text-dark mb-0" id="assetPhotoModalLabel">
                        Foto Asset
                    </h6>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>

                <div class="modal-body text-center">
                    <div class="mb-3">
                        <button type="button" class="btn btn-sm btn-outline-dark" onclick="zoomAssetPhoto(-0.25)">
                            <i class="fas fa-search-minus"></i>
                        </button>

                        <button type="button" class="btn btn-sm btn-outline-dark mx-1" onclick="resetAssetPhotoZoom()">
                            <i class="fas fa-rotate-left me-1"></i>
                            Reset
                        </button>

                        <button type="button" class="btn btn-sm btn-outline-dark" onclick="zoomAssetPhoto(0.25)">
                            <i class="fas fa-search-plus"></i>
                        </button>

                        <span class="ms-2 text-sm text-muted" id="assetPhotoZoomLabel">
                            100%
                        </span>
                    </div>

                    <div id="assetPhotoContainer"
                        style="
                        height: 70vh;
                        overflow: auto;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #f5f5f5;
                    ">

                        <img id="assetPhotoPreview" src="" alt="Foto Asset" draggable="false"
                            style="
                            max-width: 100%;
                            max-height: 100%;
                            object-fit: contain;
                            transform: scale(1);
                            transform-origin: center;
                            transition: transform 0.15s ease;
                        ">
                    </div>

                    <small class="text-muted d-block mt-2">
                        Gunakan tombol atau scroll mouse untuk memperbesar gambar.
                    </small>
                </div>
            </div>
        </div>
    </div>
    <script>
        let assetPhotoScale = 1;

        function openAssetPhoto(imageElement) {
            const modalElement =
                document.getElementById('assetPhotoModal');

            const previewImage =
                document.getElementById('assetPhotoPreview');

            const modalTitle =
                document.getElementById('assetPhotoModalLabel');

            previewImage.src = imageElement.src;
            previewImage.alt = imageElement.alt || 'Foto Asset';

            modalTitle.textContent =
                imageElement.dataset.title ||
                imageElement.alt ||
                'Foto Asset';

            resetAssetPhotoZoom();

            bootstrap.Modal
                .getOrCreateInstance(modalElement)
                .show();
        }

        function zoomAssetPhoto(change) {
            assetPhotoScale += change;

            // Batas zoom 50% sampai 400%
            assetPhotoScale = Math.min(
                Math.max(assetPhotoScale, 0.5),
                4
            );

            applyAssetPhotoZoom();
        }

        function resetAssetPhotoZoom() {
            assetPhotoScale = 1;
            applyAssetPhotoZoom();

            const container =
                document.getElementById('assetPhotoContainer');

            if (container) {
                container.scrollTop = 0;
                container.scrollLeft = 0;
            }
        }

        function applyAssetPhotoZoom() {
            const previewImage =
                document.getElementById('assetPhotoPreview');

            const zoomLabel =
                document.getElementById('assetPhotoZoomLabel');

            previewImage.style.transform =
                `scale(${assetPhotoScale})`;

            zoomLabel.textContent =
                `${Math.round(assetPhotoScale * 100)}%`;
        }

        document
            .getElementById('assetPhotoContainer')
            ?.addEventListener('wheel', function(event) {
                event.preventDefault();

                zoomAssetPhoto(
                    event.deltaY < 0 ? 0.25 : -0.25
                );
            }, {
                passive: false
            });

        document
            .getElementById('assetPhotoModal')
            ?.addEventListener('hidden.bs.modal', function() {
                document.getElementById('assetPhotoPreview').src = '';
                resetAssetPhotoZoom();
            });
    </script>
@endsection

@push('js')
    <style>
        .port-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 0;
        }

        .port-btn {
            width: 56px;
            height: 40px;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: 700;
            color: #344767;
            transition: all 0.2s;
            position: relative;
        }

        .port-btn.port-available {
            border-color: #86efac;
            background: #f0fdf4;
            color: #166534;
        }

        .port-btn:hover:not(.port-used):not(.port-selected):not(.port-rusak):not(.port-reserved) {
            border-color: #22c55e;
            background: #dcfce7;
        }

        .port-btn.port-selected {
            border-color: #00b7bd;
            background: #00b7bd;
            color: #fff;
        }

        .port-btn.port-selected::after {
            content: 'v';
            position: absolute;
            top: -3px;
            right: 2px;
            font-size: 0.65rem;
            font-weight: 900;
            color: #ffffff;
        }

        .port-btn.port-used {
            border-color: #f59e0b;
            background: #fff7e6;
            color: #b45309;
            cursor: not-allowed;
            opacity: 0.9;
            position: relative;
        }

        .port-btn.port-used::after {
            content: '!';
            position: absolute;
            top: -3px;
            right: 2px;
            font-size: 0.65rem;
            font-weight: 900;
            color: #b45309;
        }

        .port-btn.port-rusak {
            border-color: #ef4444;
            background: #ffeef0;
            color: #b91c1c;
            cursor: not-allowed;
            opacity: 0.9;
            position: relative;
        }

        .port-btn.port-rusak::after {
            content: 'x';
            position: absolute;
            top: -3px;
            right: 2px;
            font-size: 0.65rem;
            font-weight: 900;
            color: #b91c1c;
        }

        .port-btn.port-reserved {
            border-color: #38bdf8;
            background: #eff6ff;
            color: #0369a1;
            cursor: not-allowed;
            opacity: 0.9;
            position: relative;
        }

        .port-btn.port-reserved::after {
            content: 'u';
            position: absolute;
            top: -3px;
            right: 2px;
            font-size: 0.65rem;
            font-weight: 900;
            color: #0369a1;
        }

        .port-btn .port-num {
            font-size: 0.8rem;
            line-height: 1;
        }

        .port-btn .port-device {
            font-size: 0.5rem;
            line-height: 1;
            margin-top: 1px;
            max-width: 52px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .port-btn .port-status {
            font-size: 0.5rem;
            line-height: 1;
            margin-top: 1px;
            font-weight: 700;
            letter-spacing: 0.2px;
        }

        .port-legend {
            display: flex;
            gap: 12px;
            margin-top: 6px;
            font-size: 0.68rem;
            color: #8392ab;
        }

        .port-legend span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .port-legend .dot {
            width: 10px;
            height: 10px;
            border-radius: 3px;
            border: 2px solid;
        }

        .dot-available {
            border-color: #22c55e;
            background: #dcfce7;
        }

        .dot-selected {
            border-color: #00b7bd;
            background: #00b7bd;
        }

        .dot-used {
            border-color: #f59e0b;
            background: #fff7e6;
        }

        .dot-rusak {
            border-color: #ef4444;
            background: #ffeef0;
        }

        .dot-reserved {
            border-color: #38bdf8;
            background: #eff6ff;
        }
    </style>
    <script>
        const EDIT_URL_MENU = '{{ url($url_menu) }}';
        const EDIT_CURRENT_ID = {{ $record->id }};
        const EDIT_CURRENT_PARENT = {{ $record->parent ? $record->parent : 'null' }};
        const EDIT_CURRENT_PORT = '{{ $record->port_terpakai }}';
        const EDIT_CURRENT_PERANGKAT = '{{ $record->nama_perangkat }}';
        const EDIT_CURRENT_JUMLAH_PORT = {{ $record->jumlah_port ? $record->jumlah_port : 'null' }};
        const EDIT_CURRENT_LOCATION = @json($record->location);
        const
            EDIT_UPLINK_DEFAULT_INPUT_HTML =
            '<input type="text" name="uplink_port" class="form-control" id="edit_uplink_port_text" placeholder="-- Pilih Perangkat Terlebih Dahulu --" disabled>';
        let editPerangkatCache = [];
        let editPerangkatRequestToken = 0;

        $(document).ready(function() {
            $('#edit_ip_address').on('input change', function() {
                $('#edit_ip_address_value').val(this.value);
            });
            $('#editDeviceForm').on('submit', function() {
                $('#edit_ip_address_value').val($('#edit_ip_address').val());
            });

            // Init Select2 for perangkat
            initEditPerangkatSelect2({
                placeholder: '-- Pilih Jenis Perangkat Terlebih Dahulu --',
                tags: false,
                disabled: false,
            });

            // Init Select2 for parent
            initEditParentSelect2();

            // On kategori change → reload perangkat list
            $('#edit_kategori').on('change', function() {
                onEditKategoriChange(this);
            });

            // On perangkat change → auto-fill IP & Area & Jumlah Port & Asset Photos
            $(document).on('change', '#edit_nama_perangkat', function() {
                const code = $(this).val();
                const kategoriId = $('#edit_kategori').val();

                if ($(this).prop('tagName') === 'SELECT') {
                    const item = editPerangkatCache.find(d => d.code === code);
                    if (item) {
                        $('#edit_ip_address').val(item.ip && item.ip !== '-' ? item.ip : '').trigger('change');
                    }
                    // Auto-fill jumlah port for switches
                    if (item && item.total_port) {
                        $('#edit_jumlah_port').val(item.total_port).trigger('change');
                        $('#edit_jumlah_port_hint').html(
                            `<i class="fas fa-check-circle text-success"></i> ${item.total_port} port dari data master (slot virtual). Sesuaikan
    saat update jika perlu.`
                        );
                    } else {
                        if ($('#edit_jumlah_port_group').is(':visible')) {
                            $('#edit_jumlah_port_hint').text(
                                'Jumlah port untuk perangkat ini (slot port dihasilkan secara virtual).'
                            );
                        }
                    }
                }

                // Reload asset photos
                loadEditAssetPhotos(code, kategoriId);
            });

            // On gedung change → reload parent list
            $('#edit_gedung').on('change', function() {
                const gedung = $(this).val();
                loadEditParentsByGedung(gedung);
                loadEditLocationsByGedung(gedung);
                $('#edit_parent').val('').trigger('change');
                loadEditParentPorts('');
            });

            // On parent change → load port info
            $(document).on('change', '#edit_parent', function() {
                loadEditParentPorts($(this).val());
            });

            // Load parent ports for current parent on page load
            if (EDIT_CURRENT_PARENT) {
                loadEditParentPorts(EDIT_CURRENT_PARENT);
            }

            // Load parent list filtered by current gedung on page load
            const currentGedung = $('#edit_gedung').val();
            if (currentGedung) {
                loadEditParentsByGedung(currentGedung);
                loadEditLocationsByGedung(currentGedung);
            } else {
                loadEditLocationsByGedung('');
            }

            // On jumlah port change → update uplink port grid
            $('#edit_jumlah_port').on('input change', function(e) {
                if (!e.originalEvent) return;
                const total = parseInt($(this).val()) || 0;
                if (total > 0 && total <= 96) {
                    const currentSelected = $('#edit_uplink_port_hidden').val() || '';
                    renderEditUplinkPortGrid(total, currentSelected);
                } else {
                    $('#edit_uplink_port_selector').html(
                        '<input type="text" name="uplink_port" class="form-control" id="edit_uplink_port_text" placeholder="Contoh: 1">'
                    );
                    $('#edit_uplink_port_hint').text(
                        'Masukkan jumlah port perangkat terlebih dahulu untuk memunculkan pilihan port visual.'
                    );
                }
            }); // Use event delegation for edit_nama_perangkat to handle dynamic port grid updating
            $(document).on('change', '#edit_nama_perangkat', function() {
                const code = $(this).val();
                let
                    item = editPerangkatCache.find(d => d.code === code);

                // Fallback for current device which is excluded from getperangkat API
                if (!item && code === EDIT_CURRENT_PERANGKAT) {
                    item = {
                        code: EDIT_CURRENT_PERANGKAT,
                        total_port: EDIT_CURRENT_JUMLAH_PORT
                    };
                }

                const $jumlahPort = $('#edit_jumlah_port');
                if (item && item.total_port) {
                    if ($jumlahPort.length) {
                        $jumlahPort.val(item.total_port);
                    }

                    // 1. Sequence Control & Penanganan Race Condition:
                    // Saat Ajax success dan men-trigger 'change', pastikan old_value (Port Sumber)
                    // terpilih otomatis jika sebelumnya sempat ter-reset saat proses loading.
                    let currentSelected = $('#edit_uplink_port_hidden').val() || '';
                    if (!currentSelected && code === EDIT_CURRENT_PERANGKAT) {
                        currentSelected = $('#old_uplink_port').val() || '';
                    }

                    // Render ulang port dengan data yang sudah tersimpan
                    renderEditUplinkPortGrid(item.total_port, currentSelected);
                } else {
                    if ($jumlahPort.length) {
                        $jumlahPort.val('');
                    }

                    // Reset the uplink grid
                    $('#edit_uplink_port_selector').html(
                        '<input type="text" name="uplink_port" class="form-control" id="edit_uplink_port_text" placeholder="-- Pilih Perangkat Terlebih Dahulu --" disabled>'
                    );
                    $('#edit_uplink_port_hint').text(
                        'Masukkan jumlah port perangkat terlebih dahulu untuk memunculkan pilihan port visual.'
                    );
                }
            });

            // Initialize grid if old/current values exist on page load
            const oldJumlahPort = parseInt($('#edit_jumlah_port').val()) || EDIT_CURRENT_JUMLAH_PORT || 0;
            const oldUplinkPort = $('#old_uplink_port').val() || '';
            const initialKatName = ($('#edit_kategori').find(':selected').data('name') || '').toLowerCase();
            const isInitialSwitch = initialKatName.includes('switch');
            toggleEditUplinkPortGroup(isInitialSwitch, !isInitialSwitch);
            if (oldJumlahPort > 0 && isInitialSwitch) {
                renderEditUplinkPortGrid(oldJumlahPort, oldUplinkPort);
            }

            // Load perangkat list for current kategori on page load
            const currentKat = $('#edit_kategori').val();
            if (currentKat) {
                onEditKategoriChange($('#edit_kategori')[0], true);
            }
        });

        function initEditParentSelect2() {
            $('#edit_parent').select2({
                placeholder: '-- Tanpa Parent / Root --',
                allowClear: true,
                width: '100%'
            });
        }

        function initEditPerangkatSelect2({
            placeholder = '--',
            tags = false,
            disabled = false
        } = {}) {
            const $perangkat = ensureEditSelect2();

            try {
                $perangkat.select2('destroy');
            } catch (e) {}

            const config = {
                placeholder,
                allowClear: true,
                width: '100%',
                tags: !!tags,
            };

            if (tags) {
                config.createTag = function(params) {
                    const term = (params.term || '').trim();
                    if (term === '') return null;
                    return {
                        id: term,
                        text: term,
                        newTag: true
                    };
                };
            }

            $perangkat.select2(config);
            $perangkat.prop('disabled', !!disabled);
            const s2 = $perangkat.data('select2');
            if (s2 && s2.$container) {
                s2.$container.toggleClass('select2-container--disabled', !!disabled);
            }
            return $perangkat;
        }

        function onEditKategoriChange(selectEl, isInit) {
            const requestToken = ++editPerangkatRequestToken;
            const kategoriId = selectEl.value;
            const $selectedKategori = $(selectEl).find(':selected');
            const katName = ($selectedKategori.data('name') || '').toLowerCase();
            const configuredFormType = String($selectedKategori.data('form-type') || '').toLowerCase();
            const formType = ['master', 'manual', 'rusak'].includes(configuredFormType) ?
                configuredFormType :
                (katName.includes('rusak') ? 'rusak' :
                    (['server', 'router', 'spare'].some(c => katName.includes(c)) ? 'manual' : 'master'));
            editPerangkatCache = [];
            const isRusak = formType === 'rusak';
            $('#edit_ip_address').prop('disabled', !!kategoriId && formType === 'master');
            const isSwitch = katName.includes('switch');
            const hasPort = isSwitch || katName.includes('server') || katName.includes('router');

            const $perangkat = $('#edit_nama_perangkat');
            const $group = $('#edit_perangkat_group');

            // Show/hide jumlah_port (switch/server/router) and uplink_port (switch only)
            if (!isInit) {
                $('#edit_jumlah_port').val('');
                $('#edit_jumlah_port_hint').text('Jumlah port untuk perangkat ini (slot port dihasilkan secara virtual).');
                resetEditUplinkPortSelector();
            }
            toggleEditRusakMode(isRusak);
            if (isRusak) {
                $('#edit_jumlah_port_group').hide();
                toggleEditUplinkPortGroup(false);
            } else {
                $('#edit_jumlah_port_group').toggle(hasPort);
                toggleEditUplinkPortGroup(isSwitch, !isSwitch);
            }

            if (!kategoriId) {
                toggleEditRusakMode(false);
                switchEditToSelect2('-- Pilih Jenis Perangkat Terlebih Dahulu --', true);
                $('#edit_jumlah_port_group').hide();
                toggleEditUplinkPortGroup(false);
                return;
            }

            if (isRusak) {
                $('#edit_jumlah_port_group').hide();
                toggleEditUplinkPortGroup(false);
                switchEditToSelect2('-- Tidak Diperlukan untuk Rusak --', true);
                return;
            }

            if (formType === 'manual') {
                const currentVal = isInit ? EDIT_CURRENT_PERANGKAT : '';
                switchEditToManualInput(
                    katName,
                    currentVal,
                    '<i class="fas fa-info-circle text-info me-1"></i>Kategori ini diisi manual tanpa data master perangkat.'
                );
                return;
            }

            // Has master table — use Select2
            switchEditToSelect2('Loading...', true);

            fetch(`${EDIT_URL_MENU}/ajax/getperangkat?kategori_id=${encodeURIComponent(kategoriId)}&current_id=${encodeURIComponent(EDIT_CURRENT_ID)}`)
                .then(r => r.json())
                .then(data => {
                    if (requestToken !== editPerangkatRequestToken) return;
                    if (!Array.isArray(data) || data.length === 0) {
                        if (isInit && EDIT_CURRENT_PERANGKAT) {
                            const sel = initEditPerangkatSelect2({
                                placeholder: '-- Data Master Belum Tersedia --',
                                tags: false,
                                disabled: false,
                            });
                            sel.empty();
                            sel.append(new Option(EDIT_CURRENT_PERANGKAT, EDIT_CURRENT_PERANGKAT, true, true));
                            sel.trigger('change');
                            $group.find('.edit-perangkat-hint').html(
                                '<i class="fas fa-circle-info text-warning me-1"></i>Data master tidak tersedia. Nilai existing dipertahankan; lengkapi master untuk mengganti perangkat.'
                            );
                        } else {
                            switchEditToSelect2('-- Data Master Belum Tersedia --', true);
                            $group.find('.edit-perangkat-hint').html(
                                '<i class="fas fa-circle-info text-warning me-1"></i>Data master untuk kategori ini belum tersedia. Tambahkan di master terlebih dahulu.'
                            );
                        }
                        return;
                    }

                    editPerangkatCache = data;
                    const sel = initEditPerangkatSelect2({
                        placeholder: '-- Cari Perangkat --',
                        tags: false,
                        disabled: false,
                    });
                    sel.empty().append('<option value="">-- Cari Perangkat --</option>');

                    // Add current value first if not in list (already used but it's this device's own)
                    const currentInList = data.some(d => d.code === EDIT_CURRENT_PERANGKAT);
                    if (isInit && !currentInList && EDIT_CURRENT_PERANGKAT) {
                        sel.append(new Option(EDIT_CURRENT_PERANGKAT, EDIT_CURRENT_PERANGKAT, true, true));
                    }

                    data.forEach(item => {
                        const isSelected = isInit && item.code === EDIT_CURRENT_PERANGKAT;
                        sel.append(new Option(item.label, item.code, isSelected, isSelected));
                    });
                    sel.trigger('change');
                    $group.find('.edit-perangkat-hint').text('Cari dan pilih nama perangkat dari data master');
                })
                .catch(() => {
                    if (requestToken !== editPerangkatRequestToken) return;
                    if (isInit && EDIT_CURRENT_PERANGKAT) {
                        const sel = initEditPerangkatSelect2({
                            placeholder: '-- Gagal Memuat Data Master --',
                            tags: false,
                            disabled: false,
                        });
                        sel.empty();
                        sel.append(new Option(EDIT_CURRENT_PERANGKAT, EDIT_CURRENT_PERANGKAT, true, true));
                        sel.trigger('change');
                        $group.find('.edit-perangkat-hint').html(
                            '<i class="fas fa-triangle-exclamation text-warning me-1"></i>Gagal memuat data master. Nilai existing tetap dipakai sementara.'
                        );
                    } else {
                        switchEditToSelect2('-- Gagal Memuat Data Master --', true);
                        $group.find('.edit-perangkat-hint').html(
                            '<i class="fas fa-triangle-exclamation text-warning me-1"></i>Gagal memuat data master. Coba refresh halaman atau cek data master.'
                        );
                    }
                });
        }

        function getEditManualPerangkatPlaceholder(katName) {
            if (katName.includes('server')) return 'Contoh: SRV-MAIN-01';
            if (katName.includes('router')) return 'Contoh: RTR-CORE-01';
            if (katName.includes('spare')) return 'Contoh: SPARE-LAN-01';

            const key = String(katName || '').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').toUpperCase();
            return key ? `Contoh: ${key}-01` : 'Contoh: DEVICE-01';
        }

        function switchEditToManualInput(katName, value = '', hintHtml = '') {
            const $perangkat = $('#edit_nama_perangkat');
            const $group = $('#edit_perangkat_group');

            try {
                if ($perangkat.length && $perangkat.prop('tagName') === 'SELECT') {
                    $perangkat.select2('destroy');
                }
            } catch (e) {}

            const $input = $('<input>', {
                type: 'text',
                name: 'nama_perangkat',
                class: 'form-control',
                required: true,
                id: 'edit_nama_perangkat',
                placeholder: getEditManualPerangkatPlaceholder(katName),
            });

            $input.val(value || '');
            $perangkat.replaceWith($input);

            const
                fallbackHint =
                '<i class="fas fa-circle-info text-info me-1"></i>Isi nama perangkat manual untuk kategori ini.';
            $group.find('.edit-perangkat-hint').html(hintHtml || fallbackHint);
        }

        function toggleEditRusakMode(isRusak) {
            const $form = $('#editDeviceForm');
            $form.find('.form-group')
                .not(':has(#edit_kategori)')
                .not(':has(textarea[name="keterangan"])')
                .toggle(!isRusak);

            if (isRusak) {
                $('#edit_nama_perangkat').prop('required', false);
                $('#edit_gedung').prop('required', false);
            } else {
                $('#edit_nama_perangkat').prop('required', true);
                $('#edit_gedung').prop('required', true);
            }
        }

        function ensureEditSelect2() {
            let sel = $('#edit_nama_perangkat');
            if (!sel.length || sel.prop('tagName') !== 'SELECT') {
                sel.remove();
                const group = $('#edit_perangkat_group');
                group.find('input[name="nama_perangkat"]').remove();
                group.find('.form-control-label').after(
                    '<select name="nama_perangkat" class="form-control" id="edit_nama_perangkat" required style="width:100%"></select>'
                );
                sel = $('#edit_nama_perangkat');
            }
            return sel;
        }

        function loadEditLocationsByGedung(gedung) {
            const $location = $('#edit_location');
            const selectedLocation = $location.val() || EDIT_CURRENT_LOCATION || '';

            $location.empty().append('<option value="">-- Memuat... --</option>');

            if (!gedung) {
                $location.empty().append('<option value="">-- Pilih Gedung Terlebih Dahulu --</option>');
                $('#edit_location_hint').text('Pilih gedung untuk menampilkan location dari master lokasi');
                return;
            }

            fetch(`${EDIT_URL_MENU}/ajax/getarealist?gedung=${gedung}`)
                .then(r => r.json())
                .then(data => {
                    $location.empty().append('<option value="">-- Pilih Location --</option>');
                    data.forEach(item => {
                        const isSelected = selectedLocation && selectedLocation === item.value;
                        $location.append(new Option(item.name, item.value, isSelected, isSelected));
                    });
                    $('#edit_location_hint').text('Location diambil dari master lokasi');
                })
                .catch(() => {
                    $location.empty().append('<option value="">-- Gagal Memuat Location --</option>');
                    $('#edit_location_hint').text('Gagal memuat location dari master lokasi');
                });
        }

        function switchEditToSelect2(placeholder, disabled) {
            const sel = initEditPerangkatSelect2({
                placeholder,
                tags: false,
                disabled: !!disabled,
            });
            sel.empty().append(`<option value="">${placeholder}</option>`);
            sel.trigger('change');
        }

        function loadEditParentsByGedung(gedung) {
            const $parent = $('#edit_parent');
            try {
                $parent.select2('destroy');
            } catch (e) {}
            $parent.empty().append('<option value="">-- Memuat... --</option>');

            if (!gedung) {
                $parent.empty().append('<option value="">-- Pilih Gedung Terlebih Dahulu --</option>');
                initEditParentSelect2();
                $('#edit_parent_hint').text('Pilih gedung dahulu untuk melihat daftar parent');
                return;
            }

            fetch(`${EDIT_URL_MENU}/ajax/getparentlist?gedung=${gedung}`)
                .then(r => r.json())
                .then(data => {
                    $parent.empty().append('<option value="">-- Tanpa Parent / Root --</option>');
                    data.forEach(item => {
                        // Don't show current device as potential parent
                        if (item.id == EDIT_CURRENT_ID) return;
                        const selected = item.id == EDIT_CURRENT_PARENT ? ' selected' : '';
                        const label = item.label || ((item.nama_kategori || '') + ' - ' + (item
                            .nama_perangkat || ''));
                        $parent.append(`<option value="${item.id}"${selected}>${label}</option>`);
                    });
                    initEditParentSelect2();
                    $('#edit_parent_hint').text('Ketik untuk mencari parent device');
                    const selectedParent = $parent.val() || EDIT_CURRENT_PARENT;
                    if (selectedParent) {
                        loadEditParentPorts(selectedParent);
                    }
                })
                .catch(() => {
                    $parent.empty().append('<option value="">-- Gagal Memuat --</option>');
                    initEditParentSelect2();
                });
        }

        function loadEditParentPorts(parentId) {
            const portSelector = $('#edit_port_selector');

            if (!parentId) {
                portSelector.html(
                    `<input type="text" name="port_terpakai" class="form-control" id="edit_port_text"
            value="${EDIT_CURRENT_PORT}" placeholder="Contoh: 1">`
                );
                $('#edit_port_hint').text('Port pada parent device');
                return;
            }

            portSelector.html(
                '<div class="text-muted text-sm py-2"><i class="fas fa-spinner fa-spin me-1"></i>Memuat info port...</div>'
            );

            fetch(`${EDIT_URL_MENU}/ajax/getparentinfo?parent_id=${parentId}`)
                .then(r => r.json())
                .then(data => {
                    if ((data.has_port || data.is_switch) && data.total_port > 0) {
                        renderEditPortGrid(data.total_port, data.ports_used || [], data.ports_rusak || [], data
                            .ports_reserved || []);
                    } else if (data.has_port || data.is_switch) {
                        portSelector.html(
                            `<input type="text" name="port_terpakai" class="form-control" id="edit_port_text"
            value="${EDIT_CURRENT_PORT}" placeholder="Contoh: 1">`
                        );
                        $('#edit_port_hint').text('Nomor port pada ' + (data.name || ''));
                    } else {
                        portSelector.html(
                            `<input type="text" name="port_terpakai" class="form-control" id="edit_port_text"
            value="${EDIT_CURRENT_PORT}" placeholder="Opsional">`
                        );
                        $('#edit_port_hint').text('Port bersifat opsional untuk perangkat ini');
                    }
                })
                .catch(() => {
                    portSelector.html(
                        `<input type="text" name="port_terpakai" class="form-control" id="edit_port_text"
            value="${EDIT_CURRENT_PORT}" placeholder="Contoh: 1">`
                    );
                });
        }

        function renderEditPortGrid(totalPort, portsUsed, portsRusak, portsReserved) {
            const usedMap = {};
            portsUsed.forEach(p => {
                usedMap[String(p.port)] = p.device;
            });
            const rusakSet = new Set((portsRusak || []).map(p => String(p)));
            const reservedMap = {};
            (portsReserved || []).forEach(p => {
                reservedMap[String(p.port)] = p.label || (p.is_uplink ? 'Terpakai - Uplink' : 'Reserved');
            });

            let html = `<input type="hidden" name="port_terpakai" id="edit_port_hidden" value="${EDIT_CURRENT_PORT}">`;
            html += '<div class="port-grid">';
            for (let i = 1; i <= totalPort; i++) {
                const portStr = String(i);
                const isRusak = rusakSet.has(portStr);
                const
                    isReserved = !isRusak && reservedMap.hasOwnProperty(portStr);
                const isUsed = !isRusak && !isReserved && usedMap.hasOwnProperty(portStr);
                const isCurrent = !isRusak && !isReserved && portStr === EDIT_CURRENT_PORT;
                const
                    deviceName = isUsed ? usedMap[portStr] : '';
                const reservedLabel = isReserved ? reservedMap[portStr] : '';
                let cls = 'port-available';
                if (isRusak) {
                    cls = 'port-rusak';
                } else if (isReserved) {
                    cls = 'port-reserved';
                } else if (isCurrent) {
                    cls = 'port-selected';
                } else if (isUsed) {
                    cls = 'port-used';
                }
                const
                    notSelectable = isReserved || (isUsed && !isCurrent) || isRusak;
                let title = `Port ${i}: Tersedia`;
                if (isReserved) title = `Port ${i}: ${reservedLabel}`;
                else if (isCurrent) title = `Port ${i}: Port saat ini`;
                else
                if (isUsed) title = `Port ${i}: ${deviceName}`;
                else if (isRusak) title = `Port ${i}: Rusak`;
                html += `<div
                class="port-btn ${cls}" data-port="${i}" title="${title}"
                onclick="selectEditPort(this, ${notSelectable})">`;
                html += `<span class="port-num">${i}</span>`;
                if (isReserved) {
                    html += `<span class="port-status">Uplink</span>`;
                    html += `<span class="port-device">Terpakai</span>`;
                }
                if (isUsed && !isCurrent) {
                    html += `<span class="port-status">Terpakai</span>`;
                    html += `<span class="port-device">${deviceName}</span>`;
                }
                if (isCurrent) html += `<span class="port-status">Dipilih</span>`;
                if (isRusak && !isCurrent) html += `<span class="port-status">Rusak</span>`;
                if (!isReserved && !isUsed && !isCurrent && !isRusak) {
                    html += `<span class="port-status">Tersedia</span>`;
                }
                html += '</div>';
            }
            html += '</div>';
            html += '<div class="port-legend">' +
                '<span><span class="dot dot-available"></span>Tersedia</span>' +
                '<span><span class="dot dot-selected"></span>Dipilih</span>' +
                '<span><span class="dot dot-used"></span>Terpakai</span>' +
                '<span><span class="dot dot-reserved"></span>Uplink</span>' +
                '<span><span class="dot dot-rusak"></span>Rusak</span>' +
                '</div>';

            $('#edit_port_selector').html(html);
            $('#edit_port_hint').text('Klik port yang tersedia untuk memilih');
        }

        function selectEditPort(el, isUsed) {
            if (isUsed) return;
            $(el).closest('.port-grid').find('.port-btn').removeClass('port-selected');
            $(el).addClass('port-selected');
            $('#edit_port_hidden').val($(el).data('port'));
        }

        function loadEditAssetPhotos(code, kategoriId) {
            const section = document.getElementById('edit_asset_photos_section');
            const grid = document.getElementById('edit_asset_photos_grid');
            const countEl = document.getElementById('edit_asset_photos_count');

            if (!code || !section) {
                if (section) section.style.display = 'none';
                return;
            }

            fetch(`${EDIT_URL_MENU}/ajax/getassetphotos?code=${encodeURIComponent(code)}&kategori_id=${kategoriId || ''}`)
                .then(r => r.json())
                .then(data => {
                    if (!data.images || data.images.length === 0) {
                        section.style.display = 'none';
                        return;
                    }

                    section.style.display = '';
                    countEl.textContent = `Foto dari sistem asset (${data.images.length} foto)`;

                    let html = '';
                    data.images.forEach((img, idx) => {
                        const fullUrl = data.storage_url + '/' + img;
                        html += `<div class="col-md-6">`;
                        html += `<div class="p-3 bg-gray-100 border-radius-lg h-100">`;
                        html +=
                            `<small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">Foto Asset ${idx +
                    1}</small>`;
                        html +=
                            `<div class="mt-2"><img src="${fullUrl}" alt="Foto Asset ${idx + 1}"
                        class="img-fluid border-radius-lg asset-photo-preview"
                        data-title="Foto Asset ${idx + 1}"
                        style="max-height: 160px; object-fit: cover; width: 100%; cursor: zoom-in;"
                        onclick="openAssetPhoto(this)" onerror="this.closest('.col-md-6')?.remove()"></div>`;
                        html += `</div>
        </div>`;
                    });
                    grid.innerHTML = html;
                })
                .catch(() => {
                    section.style.display = 'none';
                });
        }

        function toggleEditUplinkPortGroup(show, clearValue = true) {
            const $group = $('#edit_uplink_port_group');
            if (show) {
                $group.removeClass('d-none').stop(true, true).fadeIn(150);
                return;
            }

            if (clearValue) {
                clearEditUplinkPortValue();
            }
            resetEditUplinkPortSelector();
            $group.stop(true, true).hide().addClass('d-none');
        }

        function clearEditUplinkPortValue() {
            $('#old_uplink_port').val('');
            $('#edit_uplink_port_hidden').val('');
            $('#edit_uplink_port_text').val('');
            $('#edit_uplink_port_selector').find('[name="uplink_port"]').val('');
        }

        function resetEditUplinkPortSelector() {
            $('#edit_uplink_port_selector').html(EDIT_UPLINK_DEFAULT_INPUT_HTML);
            $('#edit_uplink_port_hint').text(
                'Masukkan jumlah port perangkat terlebih dahulu untuk memunculkan pilihan port visual.');
        }

        function renderEditUplinkPortGrid(totalPort, selectedPort) {
            let html = '<input type="hidden" name="uplink_port" id="edit_uplink_port_hidden" value="' + (selectedPort ||
                '') + '">';
            html += '<div class="port-grid">';
            for (let i = 1; i <= totalPort; i++) {
                const portStr = String(i);
                const isSelected = selectedPort &&
                    String(selectedPort) === portStr;
                let cls = isSelected ? 'port-selected' : 'port-available';
                let title = `Port ${i}: ${isSelected ? 'Dipilih' : 'Tersedia'}`;
                html += `<div class="port-btn ${cls}" data-port="${i}"
                title="${title}" onclick="selectEditUplinkPort(this)">`;
                html += `<span class="port-num">${i}</span>`;
                if (isSelected) {
                    html += `<span class="port-status">Dipilih</span>`;
                } else {
                    html += `<span class="port-status">Tersedia</span>`;
                }
                html += '</div>';
            }
            html += '</div>';
            html += '<div class="port-legend">' +
                '<span><span class="dot dot-available"></span>Tersedia</span>' +
                '<span><span class="dot dot-selected"></span>Dipilih</span>' +
                '</div>';

            $('#edit_uplink_port_selector').html(html);
            $('#edit_uplink_port_hint').text('Klik port yang bertindak sebagai jalur masuk data (Uplink)');
        }

        function selectEditUplinkPort(el) {
            $(el).closest('.port-grid').find('.port-btn').removeClass('port-selected').find('.port-status').text(
                'Tersedia');
            $(el).addClass('port-selected').find('.port-status').text('Dipilih');
            const selectedPort = $(el).data('port');
            $('#edit_uplink_port_hidden').val(selectedPort);
            $('#edit_uplink_port_hint').text(`Port Sumber ${selectedPort} dipilih`);
        }
    </script>
@endpush