@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <button class="btn btn-secondary mb-0 me-3" onclick="history.back()">
                                <i class="fas fa-circle-left me-1"></i>Kembali
                            </button>
                            <h5 class="mb-0">Tambah {{ $title_menu }}</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('components.alert')
                        @php
                            $gedungLocked = $gedung_locked ?? false;
                            $selectedGedungValue = $gedungLocked
                                ? $default_gedung
                                : old('gedung', $default_gedung ?? request('gedung'));
                        @endphp
                        <form method="POST" action="{{ URL::to($url_menu) }}" id="trssrv-form" enctype="multipart/form-data">
                            @csrf
                            {{-- Gedung --}}
                            @if($field_meta['gedung']->show ?? true)
                            <div class="form-group">
                                <label class="form-control-label"><i class="fas fa-building label-icon"></i>{{ $field_meta['gedung']->alias ?? 'Gedung' }} <span class="text-danger">*</span></label>
                                <select name="gedung" class="form-control" required @disabled($gedungLocked)>
                                    @unless($gedungLocked)
                                    <option value="">-- Pilih Gedung --</option>
                                    @endunless
                                    @foreach ($gedung_list as $g)
                                        @continue($gedungLocked && (string) $selectedGedungValue !== (string) $g->value)
                                        <option value="{{ $g->value }}" {{ (string) $selectedGedungValue === (string) $g->value ? 'selected' : '' }}>
                                            {{ $g->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @if($gedungLocked)
                                    <input type="hidden" name="gedung" value="{{ $selectedGedungValue }}">
                                @endif
                                @error('gedung') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>
                            @endif

                            {{-- Kategori --}}
                            @if($field_meta['kategori']->show ?? true)
                            <div class="form-group">
                                <label class="form-control-label"><i class="fas fa-layer-group label-icon"></i>{{ $field_meta['kategori']->alias ?? 'Kategori' }} <span class="text-danger">*</span></label>
                                <select name="kategori" class="form-control" id="kategori" required onchange="onKategoriChange(this)">
                                    <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 ?? '')) }}"
                                            {{ old('kategori') == $k->id ? 'selected' : '' }}>
                                            {{ $k->nama_kategori }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('kategori') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>
                            @endif

                            {{-- Nama Perangkat (Search dari Master) --}}
                            @if($field_meta['nama_perangkat']->show ?? true)
                            <div class="form-group">
                                <label class="form-control-label"><i class="fas fa-tag label-icon"></i>{{ $field_meta['nama_perangkat']->alias ?? 'Nama Perangkat' }} <span class="text-danger">*</span></label>
                                <select name="nama_perangkat" class="form-control" id="nama_perangkat" required style="width:100%" disabled>
                                    <option value="">-- Pilih Kategori Terlebih Dahulu --</option>
                                </select>
                                <small class="text-muted add-perangkat-hint">Pilih kategori lalu cari nama perangkat dari data master</small>
                                @error('nama_perangkat') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>
                            @endif

                            {{-- Port Sumber (Input Jaringan) --}}
                            @if($field_meta['uplink_port']->show ?? true)
                            <div class="form-group mb-3" id="add_uplink_port_group" style="display:none">
                                <input type="hidden" id="old_uplink_port" value="{{ old('uplink_port') }}">
                                <label class="form-control-label">
                                    <i class="fas fa-arrow-down label-icon"></i>Port Sumber (Input Jaringan)
                                </label>
                                <div id="add_uplink_port_selector">
                                    <input type="text" name="uplink_port" class="form-control" id="add_uplink_port_text"
                                        value="{{ old('uplink_port') }}" placeholder="-- Pilih Perangkat Terlebih Dahulu --" disabled>
                                </div>
                                <small class="text-muted" id="add_uplink_port_hint">
                                    Port pada perangkat ini yang digunakan sebagai jalur masuk kabel dari parent switch. Kosongkan jika root device.
                                </small>
                            </div>
                            @endif

                            {{-- Terhubung Ke (Parent) --}}
                            @if($field_meta['parent']->show ?? true)
                            <div class="form-group">
                                <label class="form-control-label"><i class="fas fa-link label-icon"></i>{{ $field_meta['parent']->alias ?? 'Terhubung Ke (Parent)' }}</label>
                                <select name="parent" class="form-control" id="add_parent" style="width:100%">
                                    <option value="">-- Pilih Gedung Terlebih Dahulu --</option>
                                </select>
                                <small class="text-muted" id="add_parent_hint">Pilih gedung dahulu untuk melihat daftar parent</small>
                            </div>
                            @endif

                            {{-- Jumlah Port (for Switch, Server, Router) --}}
                            @if($field_meta['jumlah_port']->show ?? false)
                            <div class="form-group" id="add_jumlah_port_group" style="display:none">
                                <label class="form-control-label"><i class="fas fa-network-wired label-icon"></i>{{ $field_meta['jumlah_port']->alias ?? 'Jumlah Port' }}</label>
                                <input type="number" name="jumlah_port" class="form-control" id="add_jumlah_port"
                                       min="1" max="96" value="{{ old('jumlah_port') }}" placeholder="Masukkan jumlah port">
                                <small class="text-muted" id="add_jumlah_port_hint">
                                    Jumlah port untuk perangkat ini (slot port dihasilkan secara virtual).
                                </small>
                            </div>
                            @endif



                            {{-- Port Terpakai --}}
                            @if($field_meta['port_terpakai']->show ?? true)
                            <div class="form-group" id="add_port_group">
                                <label class="form-control-label"><i class="fas fa-plug label-icon"></i>{{ $field_meta['port_terpakai']->alias ?? 'Port Terpakai' }}</label>
                                <div id="add_port_selector">
                                    <div class="text-muted text-sm py-2 px-3 border rounded bg-gray-100">
                                        <i class="fas fa-circle-info me-1"></i>Pilih parent device untuk menampilkan port.
                                    </div>
                                </div>
                                <small class="text-muted" id="add_port_hint">Daftar port akan menyesuaikan parent yang dipilih</small>
                            </div>
                            @endif

                            {{-- IP Address (hidden - diisi via halaman edit) --}}
                            <input type="hidden" name="ip_address" id="add_ip_address" value="{{ old('ip_address') }}">

                            {{-- Location & Link Gedung --}}
                            <div class="row">
                                <div class="col-md-6">
                                    {{-- Location --}}
                                    @if($field_meta['location']->show ?? true)
                                    <div class="form-group">
                                        <label class="form-control-label"><i class="fas fa-map-marker-alt label-icon"></i>{{ $field_meta['location']->alias ?? 'Location' }}</label>
                                        <select name="location" class="form-control" id="add_location" style="width:100%">
                                            <option value="">-- Pilih Gedung Terlebih Dahulu --</option>
                                        </select>
                                        <small class="text-muted" id="add_location_hint">Location diambil dari master lokasi</small>
                                    </div>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    {{-- Link Gedung --}}
                                    @if($field_meta['link_gedung']->show ?? true)
                                    <div class="form-group">
                                        <label class="form-control-label"><i class="fas fa-project-diagram label-icon"></i>{{ $field_meta['link_gedung']->alias ?? '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 }}" {{ old('link_gedung') == $g->value ? 'selected' : '' }}>
                                                    {{ $g->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-muted">Untuk menghubungkan topologi antar gedung</small>
                                    </div>
                                    @endif
                                </div>
                            </div>

                            {{-- Keterangan --}}
                            @if($field_meta['keterangan']->show ?? true)
                            <div class="form-group">
                                <label class="form-control-label"><i class="fas fa-align-left label-icon"></i>{{ $field_meta['keterangan']->alias ?? 'Keterangan' }}</label>
                                <textarea name="keterangan" class="form-control" rows="3">{{ old('keterangan') }}</textarea>
                            </div>
                            @endif

                            {{-- Asset Photos from msjasset (dynamic preview) --}}
                            <div id="add_asset_photos_section" 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="add_asset_photos_count"></small>
                                </div>
                                <div class="row g-2 mb-3" id="add_asset_photos_grid"></div>
                            </div>

                            {{-- Dokumentasi Foto --}}
                            <div class="row">
                                <div class="col-md-6">
                                    @if($field_meta['foto_dekat']->show ?? true)
                                    <div class="form-group">
                                        <label class="form-control-label"><i class="fas fa-camera label-icon"></i>{{ $field_meta['foto_dekat']->alias ?? 'Foto Perangkat (Dekat)' }}</label>
                                        <input type="file" name="foto_dekat" class="form-control" accept="image/jpeg,image/png,image/webp,image/heic,image/heif">
                                        <small class="text-muted">Foto close-up perangkat (opsional, max 20MB)</small>
                                        @error('foto_dekat') <small class="text-danger">{{ $message }}</small> @enderror
                                    </div>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    @if($field_meta['foto_jauh']->show ?? true)
                                    <div class="form-group">
                                        <label class="form-control-label"><i class="fas fa-camera-retro label-icon"></i>{{ $field_meta['foto_jauh']->alias ?? 'Foto Perangkat (Jauh)' }}</label>
                                        <input type="file" name="foto_jauh" class="form-control" accept="image/jpeg,image/png,image/webp,image/heic,image/heif">
                                        <small class="text-muted">Foto perangkat dari jarak lebih jauh (opsional, max 20MB)</small>
                                        @error('foto_jauh') <small class="text-danger">{{ $message }}</small> @enderror
                                    </div>
                                    @endif
                                </div>
                            </div>

                            <hr class="horizontal dark">
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-floppy-disk me-1"></i>Simpan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addAssetPhotoModal" tabindex="-1" aria-labelledby="addAssetPhotoModalLabel"
        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="addAssetPhotoModalLabel">Foto Asset</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body text-center">
                    <div class="mb-3">
                        <button type="button" class="btn btn-sm btn-outline-dark" onclick="zoomAddAssetPhoto(-0.25)"
                            title="Zoom out">
                            <i class="fas fa-search-minus"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-dark mx-1"
                            onclick="resetAddAssetPhotoZoom()">
                            <i class="fas fa-rotate-left me-1"></i>Reset
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-dark" onclick="zoomAddAssetPhoto(0.25)"
                            title="Zoom in">
                            <i class="fas fa-search-plus"></i>
                        </button>
                        <span class="ms-2 text-sm text-muted" id="addAssetPhotoZoomLabel">100%</span>
                    </div>
                    <div id="addAssetPhotoContainer"
                        style="height:70vh; overflow:auto; display:flex; align-items:center; justify-content:center; background:#f5f5f5;">
                        <img id="addAssetPhotoPreview" 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>
@endsection

@push('js')
<style>
    .label-icon {
        color: #00b7bd;
        margin-right: 6px;
        width: 14px;
        text-align: center;
    }

    .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 ADD_URL_MENU = '{{ url($url_menu) }}';
    const ADD_PREFILL = {
        gedung: @json($selectedGedungValue ?? request('gedung')),
        parent: @json(request('parent')),
        port: @json(request('port')),
    };
    const ADD_OLD_NAMA_PERANGKAT = @json(old('nama_perangkat'));
    const ADD_UPLINK_DEFAULT_INPUT_HTML = '<input type="text" name="uplink_port" class="form-control" id="add_uplink_port_text" placeholder="-- Pilih Perangkat Terlebih Dahulu --" disabled>';
    let addPerangkatCache = [];
    let addPerangkatRequestToken = 0;

    $(document).ready(function() {
        initAddPerangkatSelect2({
            placeholder: '-- Pilih Kategori Terlebih Dahulu --',
            tags: false,
            disabled: true,
        });

        // On perangkat change → auto-fill IP and jumlah_port and asset photos
        $('#nama_perangkat').on('change', function() {
            const code = $(this).val();
            const item = addPerangkatCache.find(d => d.code === code);
            if (item && item.ip && item.ip !== '-' && item.ip !== '') {
                $('#add_ip_address').val(item.ip);
            } else {
                $('#add_ip_address').val('');
            }
            if (item && item.location) {
                setAddLocationFromMaster(item.location);
            }
            // Auto-fill jumlah port from master data (switch)
            if (item && item.total_port) {
                $('#add_jumlah_port').val(item.total_port).trigger('change');
                $('#add_jumlah_port_hint').html(`<i class="fas fa-check-circle text-success"></i> ${item.total_port} port dari data master (slot virtual).`);
            } else {
                if ($('#add_jumlah_port_group').is(':visible')) {
                    $('#add_jumlah_port_hint').text('Jumlah port untuk perangkat ini (slot port dihasilkan secara virtual).');
                }
            }
            // Load asset photos
            loadAddAssetPhotos(code, $('#kategori').val());
        });

        // Init Select2 on parent dropdown
        initAddParentSelect2();

        // Init Select2 on location dropdown
        initAddLocationSelect2();

        // On parent change → load port info (use delegate for Select2 re-init)
        $(document).on('change', '#add_parent', function() {
            loadAddParentPorts($(this).val());
        });

        // On gedung change → reload parent list
        $('select[name="gedung"]').on('change', function() {
            const gedung = $(this).val();
            loadAddParentsByGedung(gedung);
            loadAddLocationsByGedung(gedung);
            // Reset port
            loadAddParentPorts('');
        });

        // Auto-load parents if gedung pre-selected
        const addGedung = $('select[name="gedung"]').val();
        if (addGedung) {
            loadAddParentsByGedung(addGedung);
            loadAddLocationsByGedung(addGedung);
        } else {
            loadAddLocationsByGedung('');
        }

        // On jumlah port change → update uplink port visual grid
        $('#add_jumlah_port').on('input change', function(e) {
            // Only update if triggered by real user input
            if (!e.originalEvent) return;
            const total = parseInt($(this).val()) || 0;
            if (total > 0 && total <= 96) {
                const currentSelected = $('#old_uplink_port').val() || $('#add_uplink_port_hidden').val() || '';
                renderAddUplinkPortGrid(total, currentSelected);
            } else {
                $('#add_uplink_port_selector').html('<input type="text" name="uplink_port" class="form-control" id="add_uplink_port_text" placeholder="-- Pilih Perangkat Terlebih Dahulu --" disabled>');
                $('#add_uplink_port_hint').text('Masukkan jumlah port perangkat terlebih dahulu untuk memunculkan pilihan port.');
            }
        });

        // Use event delegation for nama_perangkat since Select2 destroy will strip bound events
        $(document).on('change', '#nama_perangkat', function() {
            const code = $(this).val();
            const item = addPerangkatCache.find(d => d.code === code);
            if (item && item.ip) { $('#add_ip_address').val(item.ip); }
            if (item && item.location) { setAddLocationFromMaster(item.location); }

            const $jumlahPort = $('#add_jumlah_port');
            if (item && item.total_port) {
                if ($jumlahPort.length) {
                    $jumlahPort.val(item.total_port);
                }
                $('#add_jumlah_port_hint').html(`<i class="fas fa-check-circle text-success"></i> ${item.total_port} port dari data master (slot virtual).`);
                
                // Directly render the uplink grid
                const currentSelected = $('#old_uplink_port').val() || $('#add_uplink_port_hidden').val() || '';
                renderAddUplinkPortGrid(item.total_port, currentSelected);
            } else {
                if ($jumlahPort.length) {
                    $jumlahPort.val('');
                }
                $('#add_jumlah_port_hint').text('Jumlah port untuk perangkat ini (slot port dihasilkan secara virtual).');
                
                // Reset the uplink grid
                $('#add_uplink_port_selector').html('<input type="text" name="uplink_port" class="form-control" id="add_uplink_port_text" placeholder="-- Pilih Perangkat Terlebih Dahulu --" disabled>');
                $('#add_uplink_port_hint').text('Masukkan jumlah port perangkat terlebih dahulu untuk memunculkan pilihan port.');
            }
            loadAddAssetPhotos(code, $('#kategori').val());
        });

        // Initialize grid if old values exist on page load
        const oldJumlahPort = parseInt($('#add_jumlah_port').val()) || 0;
        if (oldJumlahPort > 0) {
            $('#add_jumlah_port').trigger('change');
        }

        // Auto-load if old kategori value exists
        const oldKategori = $('#kategori').val();
        if (oldKategori) {
            onKategoriChange($('#kategori')[0]);
        }

        applyAddPrefillFromQuery();
    });

    function applyAddPrefillFromQuery() {
        if (!ADD_PREFILL.parent || !ADD_PREFILL.gedung) return;

        const $gedung = $('select[name="gedung"]');
        const currentGedung = $gedung.val();

        if (currentGedung !== ADD_PREFILL.gedung) {
            $gedung.val(ADD_PREFILL.gedung).trigger('change');
        }

        const trySetParent = (retry = 0) => {
            const $parent = $('#add_parent');
            if ($parent.find(`option[value="${ADD_PREFILL.parent}"]`).length) {
                $parent.val(ADD_PREFILL.parent).trigger('change');
                trySetPort();
                return;
            }
            if (retry < 15) {
                setTimeout(() => trySetParent(retry + 1), 180);
            }
        };

        const trySetPort = (retry = 0) => {
            if (!ADD_PREFILL.port) return;

            const btn = document.querySelector(`#add_port_selector .port-btn[data-port="${ADD_PREFILL.port}"]`);
            if (btn) {
                const notSelectable = btn.classList.contains('port-used') || btn.classList.contains('port-rusak') || btn.classList.contains('port-reserved');
                if (!notSelectable) {
                    selectAddPort(btn, false);
                    $('#add_port_hint').text(`Port ${ADD_PREFILL.port} dipilih dari detail parent`);
                }
                return;
            }

            const textInput = document.getElementById('add_port_text');
            if (textInput) {
                textInput.value = ADD_PREFILL.port;
                $('#add_port_hint').text(`Port ${ADD_PREFILL.port} dipilih dari detail parent`);
                return;
            }

            if (retry < 15) {
                setTimeout(() => trySetPort(retry + 1), 180);
            }
        };

        setTimeout(() => trySetParent(), 220);
    }

    function onKategoriChange(selectEl) {
        const requestToken = ++addPerangkatRequestToken;
        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'));
        addPerangkatCache = [];
        const isRusak = formType === 'rusak';
        const isSwitch = katName.includes('switch');
        const hasPort = isSwitch || katName.includes('server') || katName.includes('router');

        const $perangkat = $('#nama_perangkat');
        const $perangkatGroup = $perangkat.closest('.form-group');

        // Reset IP & Jumlah Port & Port Uplink
        $('#add_ip_address').val('');
        $('#add_jumlah_port').val('').trigger('change');
        toggleAddRusakMode(isRusak);
        if (isRusak) {
            $('#add_jumlah_port_group').hide();
            toggleAddUplinkPortGroup(false);
        } else {
            $('#add_jumlah_port_group').toggle(hasPort);
            toggleAddUplinkPortGroup(isSwitch);
        }

        if (!kategoriId) {
            toggleAddRusakMode(false);
            switchAddToSelect2('-- Pilih Kategori Terlebih Dahulu --', true);
            $('#add_jumlah_port_group').hide();
            toggleAddUplinkPortGroup(false);
            return;
        }

        if (isRusak) {
            $('#add_jumlah_port_group').hide();
            toggleAddUplinkPortGroup(false);
            switchAddToSelect2('-- Tidak Diperlukan untuk Rusak --', true);
            return;
        }

        if (formType === 'manual') {
            switchAddToManualInput(
                katName,
                ADD_OLD_NAMA_PERANGKAT,
                '<i class="fas fa-info-circle text-info me-1"></i>Kategori ini diisi manual tanpa data master perangkat.'
            );
            return;
        }

        switchAddToSelect2('Loading...', true);

        fetch(`${ADD_URL_MENU}/ajax/getperangkat?kategori_id=${kategoriId}`)
            .then(r => r.json())
            .then(data => {
                if (requestToken !== addPerangkatRequestToken) return;
                if (!Array.isArray(data) || data.length === 0) {
                    switchAddToSelect2('-- Data Master Belum Tersedia --', true);
                    $perangkatGroup.find('.add-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;
                }

                addPerangkatCache = data;
                const sel = initAddPerangkatSelect2({
                    placeholder: '-- Cari Perangkat --',
                    tags: false,
                    disabled: false,
                });
                sel.empty().append('<option value="">-- Cari Perangkat --</option>');
                data.forEach(item => {
                    sel.append(new Option(item.label, item.code, false, false));
                });
                sel.trigger('change');

                const oldVal = ADD_OLD_NAMA_PERANGKAT;
                if (oldVal) {
                    sel.val(oldVal).trigger('change');
                }

                $perangkatGroup.find('.add-perangkat-hint').text('Cari dan pilih nama perangkat dari data master');
            })
            .catch(() => {
                if (requestToken !== addPerangkatRequestToken) return;
                switchAddToSelect2('-- Gagal Memuat Data Master --', true);
                $perangkatGroup.find('.add-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 getAddManualPerangkatPlaceholder(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 switchAddToManualInput(katName, value = '', hintHtml = '') {
        const $perangkat = $('#nama_perangkat');
        const $perangkatGroup = $perangkat.closest('.form-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: 'nama_perangkat',
            placeholder: getAddManualPerangkatPlaceholder(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.';
        $perangkatGroup.find('.add-perangkat-hint').html(hintHtml || fallbackHint);
    }

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

        if (isRusak) {
            $('#nama_perangkat').prop('required', false).val('');
            $('select[name="gedung"]').prop('required', false);
        } else {
            $('#nama_perangkat').prop('required', true);
            $('select[name="gedung"]').prop('required', true);
        }
    }

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

        return sel;
    }

    function setAddLocationFromMaster(locationValue) {
        if (!locationValue) return;
        const $location = $('#add_location');
        const hasOption = $location.find('option').toArray().some(o => o.value === locationValue);
        if (!hasOption) {
            $location.append(new Option(locationValue, locationValue, true, true));
        } else {
            $location.val(locationValue);
        }
        $location.trigger('change');
        $('#add_location_hint').html('<i class="fas fa-check-circle text-success"></i> Location otomatis dari data master (bisa diubah)');
    }

    function loadAddLocationsByGedung(gedung) {
        const $location = $('#add_location');
        const oldLocation = @json(old('location'));
        const selectedLocation = $location.val() || oldLocation;

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

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

        fetch(`${ADD_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));
                });
                $('#add_location_hint').text('Location diambil dari master lokasi');
                initAddLocationSelect2();
            })
            .catch(() => {
                $location.empty().append('<option value="">-- Gagal Memuat Location --</option>');
                $('#add_location_hint').text('Gagal memuat location dari master lokasi');
                initAddLocationSelect2();
            });
    }

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

    function initAddPerangkatSelect2({ placeholder = '--', tags = false, disabled = false } = {}) {
        const sel = ensureAddSelect2();

        try { sel.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 };
            };
        }

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

    function initAddParentSelect2() {
        const hasGedung = !!$('select[name="gedung"]').val();
        $('#add_parent').select2({
            placeholder: hasGedung ? '-- Pilih Parent Device --' : '-- Pilih Gedung Terlebih Dahulu --',
            allowClear: true,
            width: '100%'
        });
    }

    function initAddLocationSelect2() {
        const $location = $('#add_location');
        if (!$location.length) return;

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

        $location.select2({
            placeholder: '-- Pilih Location --',
            allowClear: true,
            width: '100%'
        });
    }

    function loadAddParentsByGedung(gedung) {
        const $parent = $('#add_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>');
            initAddParentSelect2();
            $('#add_parent_hint').text('Pilih gedung dahulu untuk melihat daftar parent');
            return;
        }

        fetch(`${ADD_URL_MENU}/ajax/getparentlist?gedung=${gedung}`)
            .then(r => r.json())
            .then(data => {
                $parent.empty().append('<option value=""></option>');
                data.forEach(item => {
                    const label = item.label || ((item.nama_kategori || '') + ' - ' + (item.nama_perangkat || ''));
                    $parent.append(new Option(
                        label,
                        item.id
                    ));
                });
                $parent.val(null);
                initAddParentSelect2();
                $('#add_parent_hint').text('Pilih parent untuk menampilkan grid Port Terpakai, atau kosongkan jika perangkat root');
            })
            .catch(() => {
                $parent.empty().append('<option value="">-- Gagal Memuat --</option>');
                initAddParentSelect2();
            });
    }

    function loadAddParentPorts(parentId) {
        const portSelector = $('#add_port_selector');

        if (!parentId) {
            portSelector.html('<div class="text-muted text-sm py-2 px-3 border rounded bg-gray-100"><i class="fas fa-circle-info me-1"></i>Pilih parent device untuk menampilkan port.</div>');
            $('#add_port_hint').text('Daftar port akan menyesuaikan parent yang dipilih');
            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(`${ADD_URL_MENU}/ajax/getparentinfo?parent_id=${parentId}`)
            .then(r => r.json())
            .then(data => {
                if ((data.has_port || data.is_switch) && data.total_port > 0) {
                    renderAddPortGrid(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="add_port_text" placeholder="Contoh: 1">');
                    $('#add_port_hint').text('Nomor port pada ' + (data.name || ''));
                } else {
                    portSelector.html('<input type="text" name="port_terpakai" class="form-control" id="add_port_text" placeholder="Opsional">');
                    $('#add_port_hint').text('Port bersifat opsional untuk perangkat ini');
                }
            })
            .catch(() => {
                portSelector.html('<input type="text" name="port_terpakai" class="form-control" id="add_port_text" placeholder="Contoh: 1">');
            });
    }

    function renderAddPortGrid(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="add_port_hidden" value="">';
        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 deviceName = isUsed ? usedMap[portStr] : '';
            const reservedLabel = isReserved ? reservedMap[portStr] : '';
            const notSelectable = isUsed || isRusak || isReserved;
            let cls = 'port-available';
            let title = `Port ${i}: Tersedia`;
            if (isRusak) {
                cls = 'port-rusak';
                title = `Port ${i}: Rusak`;
            } else if (isReserved) {
                cls = 'port-reserved';
                title = `Port ${i}: ${reservedLabel}`;
            } else if (isUsed) {
                cls = 'port-used';
                title = `Port ${i}: Terpakai oleh ${deviceName}`;
            }
            html += `<div class="port-btn ${cls}" data-port="${i}" title="${title}" onclick="selectAddPort(this, ${notSelectable})">`;
            html += `<span class="port-num">${i}</span>`;
            if (!isUsed && !isRusak && !isReserved) {
                html += `<span class="port-status">Tersedia</span>`;
            } else if (isUsed) {
                html += `<span class="port-status">Terpakai</span>`;
                html += `<span class="port-device">${deviceName}</span>`;
            } else if (isReserved) {
                html += `<span class="port-status">Uplink</span>`;
                html += `<span class="port-device">Terpakai</span>`;
            } else if (isRusak) {
                html += `<span class="port-status">Rusak</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>';

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

    function selectAddPort(el, isUsed) {
        if (isUsed) return;
        $(el).closest('.port-grid').find('.port-btn').removeClass('port-selected');
        $(el).addClass('port-selected');
        const selectedPort = $(el).data('port');
        $('#add_port_hidden').val(selectedPort);
        $('#add_port_hint').text(`Port ${selectedPort} dipilih`);
    }

    function loadAddAssetPhotos(code, kategoriId) {
        const section = document.getElementById('add_asset_photos_section');
        const grid = document.getElementById('add_asset_photos_grid');
        const countEl = document.getElementById('add_asset_photos_count');

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

        fetch(`${ADD_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}" data-title="Foto Asset ${idx + 1}" class="img-fluid border-radius-lg" style="max-height: 160px; object-fit: cover; width: 100%; cursor: zoom-in;" onclick="openAddAssetPhoto(this)" onerror="this.closest('.col-md-6')?.remove()"></div>`;
                    html += `</div></div>`;
                });
                grid.innerHTML = html;
            })
            .catch(() => {
                section.style.display = 'none';
            });
    }

    let addAssetPhotoScale = 1;

    function openAddAssetPhoto(imageElement) {
        const modalElement = document.getElementById('addAssetPhotoModal');
        const previewImage = document.getElementById('addAssetPhotoPreview');
        const modalTitle = document.getElementById('addAssetPhotoModalLabel');

        previewImage.src = imageElement.src;
        previewImage.alt = imageElement.alt || 'Foto Asset';
        modalTitle.textContent = imageElement.dataset.title || imageElement.alt || 'Foto Asset';
        resetAddAssetPhotoZoom();
        bootstrap.Modal.getOrCreateInstance(modalElement).show();
    }

    function zoomAddAssetPhoto(change) {
        addAssetPhotoScale = Math.min(Math.max(addAssetPhotoScale + change, 0.5), 4);
        applyAddAssetPhotoZoom();
    }

    function resetAddAssetPhotoZoom() {
        addAssetPhotoScale = 1;
        applyAddAssetPhotoZoom();
        const container = document.getElementById('addAssetPhotoContainer');
        if (container) {
            container.scrollTop = 0;
            container.scrollLeft = 0;
        }
    }

    function applyAddAssetPhotoZoom() {
        const previewImage = document.getElementById('addAssetPhotoPreview');
        const zoomLabel = document.getElementById('addAssetPhotoZoomLabel');
        if (previewImage) previewImage.style.transform = `scale(${addAssetPhotoScale})`;
        if (zoomLabel) zoomLabel.textContent = `${Math.round(addAssetPhotoScale * 100)}%`;
    }

    document.getElementById('addAssetPhotoContainer')?.addEventListener('wheel', function(event) {
        event.preventDefault();
        zoomAddAssetPhoto(event.deltaY < 0 ? 0.25 : -0.25);
    }, { passive: false });

    document.getElementById('addAssetPhotoModal')?.addEventListener('hidden.bs.modal', function() {
        document.getElementById('addAssetPhotoPreview').src = '';
        resetAddAssetPhotoZoom();
    });

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

        clearAddUplinkPortValue();
        resetAddUplinkPortSelector();
        $group.stop(true, true).hide().addClass('d-none');
    }

    function clearAddUplinkPortValue() {
        $('#old_uplink_port').val('');
        $('#add_uplink_port_hidden').val('');
        $('#add_uplink_port_text').val('');
        $('#add_uplink_port_selector').find('[name="uplink_port"]').val('');
    }

    function resetAddUplinkPortSelector() {
        $('#add_uplink_port_selector').html(ADD_UPLINK_DEFAULT_INPUT_HTML);
        $('#add_uplink_port_hint').text('Masukkan jumlah port perangkat terlebih dahulu untuk memunculkan pilihan port.');
    }

    function renderAddUplinkPortGrid(totalPort, selectedPort) {
        let html = '<input type="hidden" name="uplink_port" id="add_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="selectAddUplinkPort(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>';

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

    function selectAddUplinkPort(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');
        $('#add_uplink_port_hidden').val(selectedPort);
        $('#add_uplink_port_hint').text(`Port Sumber ${selectedPort} dipilih`);
    }
</script>
@endpush