@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);
        $deleteDescendants = $delete_descendants ?? collect();
        $deleteDescendantCount = $deleteDescendants->count();
        $toggleActionLabel = $record->isactive == '1' ? 'Non aktifkan' : 'Aktifkan';
        $toggleButtonLabel = $record->isactive == '1' ? 'Hapus' : 'Aktifkan';
        $toggleButtonClass = $record->isactive == '1' ? 'btn-danger' : 'btn-success';
        $toggleButtonIcon = $record->isactive == '1' ? 'fa-trash' : 'fa-check';
        $deleteActionUrl = $topologyBackUrl . '/' . encrypt($record->id);
        $deleteDescendantsForJs = $deleteDescendants->map(function ($desc) {
            return [
                'name' => $desc->nama_perangkat ?? '-',
                'kategori' => $desc->nama_kategori ?? '',
                'port' => $desc->port_terpakai ?? '',
                'status' => ((string) ($desc->isactive ?? '1') === '1') ? 'Aktif' : 'Tidak Aktif',
                'depth' => (int) ($desc->depth ?? 1),
            ];
        })->values();
    @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;">
                    {{-- Header --}}
                    <div class="card-header border-0 pb-0" style="border-radius: 1rem 1rem 0 0;">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <a href="{{ $topologyBackUrl }}"
                               class="btn btn-sm btn-outline-secondary mb-0">
                                <i class="fas fa-arrow-left me-1"></i>Topologi
                            </a>
                            @if ($authorize->edit == '1' && $record->isactive == '1')
                                <a href="{{ $topologyBackUrl . '/edit/' . encrypt($record->id) }}"
                                   class="btn btn-sm btn-warning mb-0">
                                    <i class="fas fa-edit me-1"></i>Edit
                                </a>
                            @endif
                            @if ($authorize->delete == '1')
                                <button type="button"
                                        id="deviceDeleteTrigger"
                                        class="btn btn-sm mb-0 {{ $toggleButtonClass }}"
                                        data-delete-action="{{ $deleteActionUrl }}"
                                        data-delete-action-label="{{ $toggleActionLabel }}"
                                        data-parent-name="{{ $record->nama_perangkat ?? '-' }}"
                                        data-descendants='@json($deleteDescendantsForJs)'>
                                    <i class="fas {{ $toggleButtonIcon }} me-1"></i>{{ $toggleButtonLabel }}
                                </button>
                            @endif
                            <h5 class="mb-0 ms-2">Detail Perangkat</h5>
                        </div>
                    </div>

                    <div class="card-body pt-3">
                        {{-- Device Info Header --}}
                        <div class="text-center mb-4">
                            @php
                                $kat = strtolower($record->nama_kategori ?? '');
                                $icon = 'fa-microchip';
                                if (str_contains($kat, 'server')) $icon = 'fa-server';
                                elseif (str_contains($kat, 'switch')) $icon = 'fa-network-wired';
                                elseif (str_contains($kat, 'cpu') || str_contains($kat, 'pc')) $icon = 'fa-desktop';
                                elseif (str_contains($kat, 'printer')) $icon = 'fa-print';
                                elseif (str_contains($kat, 'monitor')) $icon = 'fa-tv';
                                elseif (str_contains($kat, 'scanner')) $icon = 'fa-barcode';
                            @endphp
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
                                 style="width: 70px; height: 70px; background: linear-gradient(135deg, #00b7bd, #009da3);">
                                <i class="fas {{ $icon }} fa-2x text-white"></i>
                            </div>
                            <h4 class="mb-1">{{ $record->nama_perangkat }}</h4>
                            @if (($is_master_active ?? true) === false)
                                @php
                                    $orphanReason = $orphan_reason ?? 'inactive';
                                    $isDeleted = $orphanReason === 'deleted';
                                    $badgeColor = $isDeleted ? 'danger' : 'warning';
                                    $badgeText = $isDeleted ? 'DIHAPUS DARI MASTER' : 'NONAKTIF DI MASTER';
                                @endphp
                                <span class="badge bg-{{ $badgeColor }} mb-2" style="font-size: 0.7rem;">
                                    <i class="fas {{ $isDeleted ? 'fa-trash-can' : 'fa-power-off' }} me-1"></i>{{ $badgeText }}
                                </span>
                            @else
                                <span class="badge bg-{{ $record->isactive == '1' ? 'success' : 'danger' }} mb-2">
                                    {{ $isactive_map[$record->isactive] ?? $record->isactive }}
                                </span>
                            @endif
                        </div>

                        {{-- Orphaned Device Alert Callout --}}
                        @if (($is_master_active ?? true) === false)
                        @php
                            $alertOrphanReason = $orphan_reason ?? 'inactive';
                            $alertIsDeleted = $alertOrphanReason === 'deleted';
                            $alertStatusLabel = $alertIsDeleted ? 'Dihapus' : 'Tidak Aktif';
                            $alertBorderColor = $alertIsDeleted ? '#e74c3c' : '#e67e22';
                            $alertBgColor = $alertIsDeleted ? '#fdf2f2' : '#fef9e7';
                            $alertIconBg = $alertIsDeleted ? '#e74c3c' : '#e67e22';
                            $alertIcon = $alertIsDeleted ? 'fa-trash-can' : 'fa-exclamation-triangle';
                        @endphp
                        <div style="border: 2px dashed {{ $alertBorderColor }}; border-radius: 12px; background: {{ $alertBgColor }}; padding: 16px 18px; margin-bottom: 16px;">
                            <div class="d-flex align-items-start gap-3">
                                <div class="flex-shrink-0">
                                    <div style="width: 36px; height: 36px; border-radius: 50%; background: {{ $alertIconBg }}; display: flex; align-items: center; justify-content: center;">
                                        <i class="fas {{ $alertIcon }} text-white" style="font-size: 0.85rem;"></i>
                                    </div>
                                </div>
                                <div>
                                    <h6 class="mb-1" style="color: {{ $alertBorderColor }}; font-weight: 700;">Perangkat {{ $alertStatusLabel }} di MIS Asset</h6>
                                    <p class="mb-2 text-sm" style="color: #606a85; line-height: 1.5;">
                                        Perangkat <strong>{{ $record->nama_perangkat }}</strong> sudah <strong style="color: {{ $alertBorderColor }};">{{ $alertStatusLabel }}</strong> dari sistem Master Aset (MIS Asset). Data detail master tidak tersedia.
                                    </p>
                                    <p class="mb-0 text-xs" style="color: #8392ab;">
                                        <i class="fas fa-info-circle me-1"></i>Silakan <strong>hapus/edit</strong> perangkat ini dari Topologi, atau <strong>aktifkan kembali</strong> di MIS Asset.
                                    </p>
                                </div>
                            </div>
                        </div>
                        @endif

                        <hr class="horizontal dark">

                        {{-- Info Grid --}}
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="p-3 bg-gray-100 border-radius-lg">
                                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">Gedung</small>
                                    <p class="mb-0 font-weight-bold">{{ $gedung_map[$record->gedung] ?? $record->gedung ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 bg-gray-100 border-radius-lg">
                                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">Location</small>
                                    <p class="mb-0 font-weight-bold">{{ $record->location ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 bg-gray-100 border-radius-lg">
                                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">Kategori</small>
                                    <p class="mb-0 font-weight-bold">{{ $kategori_map[$record->kategori] ?? $record->kategori ?? '-' }}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 bg-gray-100 border-radius-lg">
                                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">Parent</small>
                                    <p class="mb-0 font-weight-bold">{{ $parent_map[$record->parent] ?? '-' }}</p>
                                </div>
                            </div>
                            @if(!empty($record->parent_id) && !empty($record->port_sumber_input))
                            <div class="col-md-6">
                                <div class="p-3 bg-gray-100 border-radius-lg">
                                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">Port Sumber (Input Jaringan)</small>
                                    <p class="mb-0 font-weight-bold">Port {{ $record->port_sumber_input }} (Uplink/Sumber)</p>
                                </div>
                            </div>
                            @endif
                            <div class="col-md-6">
                                <div class="p-3 bg-gray-100 border-radius-lg">
                                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">Port</small>
                                    <p class="mb-0 font-weight-bold">{{ $record->port_terpakai ?? '-' }}</p>
                                </div>
                            </div>
                            @if (!($is_teknisi ?? false))
                            <div class="col-md-6">
                                <div class="p-3 bg-gray-100 border-radius-lg">
                                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">IP Address</small>
                                    <p class="mb-0 font-weight-bold">{{ $record->ip_address ?? '-' }}</p>
                                </div>
                            </div>
                            @endif
                            <div class="col-md-6">
                                <div class="p-3 bg-gray-100 border-radius-lg">
                                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">Link Gedung</small>
                                    <p class="mb-0 font-weight-bold">
                                        @if ($record->link_gedung)
                                            @php
                                                $linkGedungKey = strtoupper((string) $record->link_gedung);
                                                $linkGedungUrl = isset($gedungAliasMap[$linkGedungKey])
                                                    ? url($gedungAliasMap[$linkGedungKey])
                                                    : url($url_menu);
                                            @endphp
                                            <a href="{{ $linkGedungUrl }}" class="text-primary">
                                                → {{ $gedung_map[$record->link_gedung] ?? $record->link_gedung }}
                                            </a>
                                        @else
                                            -
                                        @endif
                                    </p>
                                </div>
                            </div>
                            @if ($record->keterangan)
                            <div class="col-12">
                                <div class="p-3 bg-gray-100 border-radius-lg">
                                    <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.68rem;">Keterangan</small>
                                    <p class="mb-0">{{ $record->keterangan }}</p>
                                </div>
                            </div>
                            @endif
                        </div>

                        @if (!empty($master_details) && count($master_details) > 0)
                        <hr class="horizontal dark mt-4">
                        <h6 class="mb-3"><i class="fas fa-list-alt text-primary me-2"></i>Detail Master Perangkat</h6>
                        <div class="row g-3">
                            @foreach ($master_details as $detail)
                            <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;">{{ $detail['label'] }}</small>
                                    <p class="mb-0 font-weight-bold">{{ $detail['value'] }}</p>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endif

                        @php
                            $hasAssetPhotos = !empty($asset_photos) && count($asset_photos) > 0;
                            $hasLocalPhotos = !empty($record->foto_dekat) || !empty($record->foto_jauh);
                        @endphp

                        @if ($hasAssetPhotos || $hasLocalPhotos)
                        <hr class="horizontal dark mt-4">
                        <h6 class="mb-3"><i class="fas fa-images text-primary me-2"></i>Dokumentasi Perangkat</h6>

                        {{-- Asset Photos from msjasset --}}
                        @if ($hasAssetPhotos)
                        <div class="mb-3">
                            <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">Foto dari sistem asset ({{ count($asset_photos) }} foto)</small>
                            </div>
                            <div class="row g-3">
                                @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 device-photo-preview"
                                                 style="max-height: 260px; object-fit: cover; width: 100%; cursor: zoom-in;"
                                                 data-bs-toggle="modal"
                                                 data-bs-target="#devicePhotoModal"
                                                 data-full-src="{{ $asset_storage_url }}/{{ $assetImg }}"
                                                 data-photo-title="Foto Asset: {{ basename($assetImg) }}"
                                                 onerror="this.closest('.col-md-6')?.remove()">
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        {{-- Local uploaded photos --}}
                        @if ($hasLocalPhotos)
                        <div class="row g-3">
                            <div class="col-12 mb-1">
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-gradient-success me-2"><i class="fas fa-upload me-1"></i>Upload Lokal</span>
                                    <small class="text-muted">Foto yang diupload di topologi ini</small>
                                </div>
                            </div>
                            <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 Perangkat (Dekat)</small>
                                    @if (!empty($record->foto_dekat))
                                        <div class="mt-2">
                                            <img src="{{ asset('storage/' . $record->foto_dekat) }}"
                                                 alt="Foto perangkat dekat"
                                                 class="img-fluid border-radius-lg device-photo-preview"
                                                 style="max-height: 260px; object-fit: cover; width: 100%; cursor: zoom-in;"
                                                 data-bs-toggle="modal"
                                                 data-bs-target="#devicePhotoModal"
                                                 data-full-src="{{ asset('storage/' . $record->foto_dekat) }}"
                                                 data-photo-title="Foto Perangkat (Dekat)">
                                        </div>
                                    @else
                                        <p class="mb-0 mt-2 text-muted">Belum ada foto.</p>
                                    @endif
                                </div>
                            </div>
                            <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 Perangkat (Jauh)</small>
                                    @if (!empty($record->foto_jauh))
                                        <div class="mt-2">
                                            <img src="{{ asset('storage/' . $record->foto_jauh) }}"
                                                 alt="Foto perangkat jauh"
                                                 class="img-fluid border-radius-lg device-photo-preview"
                                                 style="max-height: 260px; object-fit: cover; width: 100%; cursor: zoom-in;"
                                                 data-bs-toggle="modal"
                                                 data-bs-target="#devicePhotoModal"
                                                 data-full-src="{{ asset('storage/' . $record->foto_jauh) }}"
                                                 data-photo-title="Foto Perangkat (Jauh)">
                                        </div>
                                    @else
                                        <p class="mb-0 mt-2 text-muted">Belum ada foto.</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endif
                        @endif

                        @php
                            $detailKatName = strtolower($record->nama_kategori ?? '');
                            $detailHasPort = str_contains($detailKatName, 'switch') || str_contains($detailKatName, 'server') || str_contains($detailKatName, 'router');
                            $detailTotalPort = (int) ($record->jumlah_port ?? 0);
                            $detailUplinkPort = (!empty($record->parent_id) && !empty($record->port_sumber_input))
                                ? (string) $record->port_sumber_input
                                : '';
                            $uplinkParent = $uplink_parent ?? null;

                            $usedPortMap = [];
                            $rusakPortMap = [];

                            foreach ($children as $child) {
                                $port = (string) ($child->port_terpakai ?? '');
                                if ($port === '') {
                                    continue;
                                }

                                $childKat = strtolower($child->nama_kategori ?? '');
                                $isPlaceholder = ($child->is_placeholder ?? '0') === '1';
                                $isRusak = str_contains($childKat, 'rusak') || ($isPlaceholder && (($child->port_status ?? 'normal') === 'rusak'));

                                if ($isRusak) {
                                    $rusakPortMap[$port] = $child;
                                } elseif (!$isPlaceholder) {
                                    $usedPortMap[$port] = $child;
                                }
                            }

                            $connectedChildren = $connected_children ?? $children->filter(function ($child) {
                                return ($child->is_placeholder ?? '0') !== '1';
                            })->values();
                            $connectedDevices = $connected_devices ?? $connectedChildren;
                        @endphp

                        @if ($detailHasPort && $detailTotalPort > 0)
                        <hr class="horizontal dark mt-4">
                        <h6 class="mb-3"><i class="fas fa-ethernet text-primary me-2"></i>Port Grid Virtual ({{ $detailTotalPort }} Port)</h6>

                        <style>
                            .show-port-grid { display: flex; flex-wrap: wrap; gap: 8px; }
                            .show-port-item {
                                width: 74px;
                                min-height: 58px;
                                border: 2px solid #e9ecef;
                                border-radius: 10px;
                                background: #f8f9fa;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                font-size: 0.7rem;
                                line-height: 1.2;
                                padding: 6px 4px;
                            }
                            .show-port-link {
                                text-decoration: none;
                                color: inherit;
                                display: inline-block;
                            }
                            .show-port-link:hover .show-port-item {
                                transform: translateY(-1px);
                                box-shadow: 0 4px 10px rgba(0, 183, 189, 0.12);
                            }
                            .show-port-item.clickable { cursor: pointer; transition: all 0.2s ease; }
                            .show-port-item .port-no { font-weight: 700; color: #344767; }
                            .show-port-item .port-state { font-size: 0.6rem; margin-top: 2px; }
                            .show-port-item .port-no.uplink-label {
                                font-size: 0.66rem;
                                line-height: 1.15;
                                text-align: center;
                                color: #0f766e;
                            }
                            .show-port-item.used {
                                border-color: #2dce89;
                                background: #ecfdf3;
                            }
                            .show-port-item.used .port-state { color: #2dce89; font-weight: 700; }
                            .show-port-item.rusak {
                                border-color: #f5365c;
                                background: #fff5f7;
                            }
                            .show-port-item.rusak .port-state { color: #f5365c; font-weight: 700; }
                            .show-port-item.available .port-state { color: #8392ab; }
                            .show-port-item.uplink {
                                border-color: #14b8a6;
                                background: #e8fffb;
                                box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.2);
                            }
                            .show-port-item.uplink .port-state { color: #0f766e; font-weight: 700; }
                            .show-port-item.hidden-by-filter { display: none; }
                            .show-port-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
                            .show-port-filter-btn {
                                border: 1px solid #dfe3e8;
                                background: #fff;
                                color: #67748e;
                                font-size: 0.68rem;
                                border-radius: 999px;
                                padding: 4px 10px;
                                cursor: pointer;
                            }
                            .show-port-filter-btn.active { border-color: #00b7bd; color: #00b7bd; background: #f0fafa; }
                        </style>

                        <div class="show-port-filters">
                            <span class="text-xs text-muted">Filter:</span>
                            <button type="button" class="show-port-filter-btn active" data-port-filter="all">Semua</button>
                            <button type="button" class="show-port-filter-btn" data-port-filter="available">Kosong</button>
                            <button type="button" class="show-port-filter-btn" data-port-filter="used">Terisi</button>
                            <button type="button" class="show-port-filter-btn" data-port-filter="rusak">Rusak</button>
                            <button type="button" class="show-port-filter-btn" data-port-filter="uplink">Uplink</button>
                        </div>

                        <div class="show-port-grid">
                            @for ($i = 1; $i <= $detailTotalPort; $i++)
                                @php
                                    $p = (string) $i;
                                    $isUsed = isset($usedPortMap[$p]);
                                    $isRusak = isset($rusakPortMap[$p]);
                                    $isUplink = $detailUplinkPort !== '' && $p === $detailUplinkPort;
                                    $stateClass = $isUplink ? 'uplink' : ($isRusak ? 'rusak' : ($isUsed ? 'used' : 'available'));
                                    $stateKey = $isUplink ? 'uplink' : ($isRusak ? 'rusak' : ($isUsed ? 'used' : 'available'));
                                    $stateText = $isUplink ? 'Uplink/Sumber' : ($isRusak ? 'Rusak' : ($isUsed ? 'Terisi' : 'Kosong'));
                                    $stateTitle = 'Port ' . $i;
                                    $portUrl = null;

                                    if ($isUplink) {
                                        $stateTitle .= ' (Uplink/Sumber)';
                                        $uplinkParentName = $uplinkParent->nama_perangkat ?? ($parent_map[$record->parent_id] ?? 'Perangkat Induk');
                                        if (!empty($uplinkParentName)) {
                                            $stateTitle .= ' - dari ' . $uplinkParentName;
                                        }

                                        if ($uplinkParent && !empty($uplinkParent->id)) {
                                            $uplinkGedungKey = strtoupper((string) ($uplinkParent->gedung ?? $record->gedung ?? ''));
                                            $uplinkBaseUrl = isset($gedungAliasMap[$uplinkGedungKey]) ? url($gedungAliasMap[$uplinkGedungKey]) : url($url_menu);
                                            $portUrl = $uplinkBaseUrl . '/show/' . encrypt($uplinkParent->id);
                                        }
                                    } elseif ($isUsed) {
                                        $stateTitle .= ' - ' . ($usedPortMap[$p]->nama_perangkat ?? 'Terisi');
                                        $childGedungKey = strtoupper((string) ($usedPortMap[$p]->gedung ?? $record->gedung ?? ''));
                                        $childBaseUrl = isset($gedungAliasMap[$childGedungKey]) ? url($gedungAliasMap[$childGedungKey]) : url($url_menu);
                                        $portUrl = $childBaseUrl . '/show/' . encrypt($usedPortMap[$p]->id);
                                    } elseif ($isRusak) {
                                        $stateTitle .= ' - Rusak';
                                        $rusakGedungKey = strtoupper((string) ($rusakPortMap[$p]->gedung ?? $record->gedung ?? ''));
                                        $rusakBaseUrl = isset($gedungAliasMap[$rusakGedungKey]) ? url($gedungAliasMap[$rusakGedungKey]) : url($url_menu);
                                        $portUrl = $rusakBaseUrl . '/show/' . encrypt($rusakPortMap[$p]->id);
                                    } else {
                                        $stateTitle .= ' - Kosong';
                                        $portUrl = $topologyBackUrl . '/add?gedung=' . urlencode($record->gedung ?? '') . '&parent=' . $record->id . '&port=' . $i;
                                    }
                                @endphp
                                @if ($portUrl)
                                    <a href="{{ $portUrl }}" class="show-port-link" title="{{ $stateTitle }}">
                                        <div class="show-port-item {{ $stateClass }} clickable" data-port-state="{{ $stateKey }}">
                                            @if ($isUplink)
                                                <div class="port-no uplink-label">Port {{ $i }} (Uplink)</div>
                                            @else
                                                <div class="port-no">Port {{ $i }}</div>
                                                <div class="port-state">{{ $stateText }}</div>
                                            @endif
                                        </div>
                                    </a>
                                @else
                                    <div class="show-port-item {{ $stateClass }}" data-port-state="{{ $stateKey }}" title="{{ $stateTitle }}">
                                        @if ($isUplink)
                                            <div class="port-no uplink-label">Port {{ $i }} (Uplink)</div>
                                        @else
                                            <div class="port-no">Port {{ $i }}</div>
                                            <div class="port-state">{{ $stateText }}</div>
                                        @endif
                                    </div>
                                @endif
                            @endfor
                        </div>

                        <div class="mt-2 text-xs text-muted">
                            <span class="me-3"><i class="fas fa-circle text-secondary" style="font-size:0.55rem;"></i> Kosong</span>
                            <span class="me-3"><i class="fas fa-circle text-success" style="font-size:0.55rem;"></i> Terisi</span>
                            <span class="me-3"><i class="fas fa-circle text-danger" style="font-size:0.55rem;"></i> Rusak</span>
                            <span><i class="fas fa-circle" style="font-size:0.55rem; color:#14b8a6;"></i> Uplink/Sumber</span>
                        </div>
                        @endif

                        {{-- Connected Devices --}}
                        @if ($connectedDevices->count() > 0)
                        <hr class="horizontal dark mt-4">
                        <h6 class="mb-3"><i class="fas fa-sitemap text-primary me-2"></i>Perangkat Terhubung ({{ $connectedDevices->count() }})</h6>
                        <style>
                            .show-connected-table tbody tr:nth-child(even) {
                                background: #fbfcfe;
                            }
                            .show-connected-table tbody tr.show-conn-row-uplink {
                                background: #eefcf6 !important;
                            }
                            .show-conn-type-badge {
                                display: inline-flex;
                                align-items: center;
                                gap: 6px;
                                font-size: 0.68rem;
                                padding: 6px 10px;
                                border-radius: 999px;
                                font-weight: 700;
                                letter-spacing: .01em;
                            }
                            .show-status-badge {
                                background: #2dce89;
                                color: #fff;
                                font-size: 0.68rem;
                                letter-spacing: .02em;
                            }
                            .show-connected-code {
                                display: block;
                                width: 100%;
                                text-align: center;
                            }
                        </style>
                        <div class="table-responsive">
                            <table class="table table-sm align-middle show-connected-table">
                                <thead style="background: #f0fafa;">
                                    <tr>
                                        <th class="text-xs text-center">Tipe Koneksi</th>
                                        <th class="text-xs text-center">Port Lokal</th>
                                        <th class="text-xs text-center">Perangkat Terhubung</th>
                                        <th class="text-xs text-center">Port Lawan</th>
                                        <th class="text-xs text-center">Kategori</th>
                                        <th class="text-xs text-center">Status</th>
                                        <th class="text-xs text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($connectedDevices as $device)
                                    @php
                                        $connectionType = $device->connection_type ?? 'downlink';
                                        $isUplinkConnection = $connectionType === 'uplink';
                                        $typeBadgeClass = $isUplinkConnection ? 'bg-success' : 'bg-info';
                                        $typeLabel = $isUplinkConnection ? 'Uplink' : 'Downlink';
                                        $typeIcon = $isUplinkConnection ? 'fa-arrow-down' : 'fa-arrow-up';
                                        $localPort = trim((string) ($device->local_port ?? $device->port_terpakai ?? ''));
                                        $remotePort = trim((string) ($device->remote_port ?? ''));
                                        $deviceStatusLabel = $device->status_label ?? 'Aktif';
                                        $statusTextUpper = strtoupper((string) $deviceStatusLabel);
                                        $statusColor = strtolower((string) $deviceStatusLabel) === 'aktif' ? '#2dce89' : '#f5365c';
                                        $rowClass = $device->row_class ?? '';
                                    @endphp
                                    <tr class="{{ $rowClass }}">
                                        <td class="text-sm align-middle text-center">
                                            <div class="d-flex align-items-center justify-content-center">
                                            <span class="badge {{ $typeBadgeClass }} text-white show-conn-type-badge">
                                                <i class="fas {{ $typeIcon }}"></i>{{ $typeLabel }}
                                            </span>
                                            </div>
                                        </td>
                                        <td class="text-sm align-middle text-center">
                                            @if ($localPort !== '')
                                                Port {{ $localPort }}
                                                @if ($isUplinkConnection)
                                                    <span class="text-muted">(Sumber)</span>
                                                @endif
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td class="text-sm align-middle text-center font-weight-bold">
                                            <span class="show-connected-code">{{ $device->connected_name ?? $device->nama_perangkat ?? '-' }}</span>
                                        </td>
                                        <td class="text-sm align-middle text-center">{{ $remotePort !== '' ? 'Port ' . $remotePort : '-' }}</td>
                                        <td class="text-sm align-middle text-center">{{ $device->kategori_name ?? $device->nama_kategori ?? '-' }}</td>
                                        <td class="text-sm align-middle text-center">
                                            <span class="badge show-status-badge" style="background-color: {{ $statusColor }};">{{ $statusTextUpper }}</span>
                                        </td>
                                        <td class="align-middle text-center">
                                            @if (!empty($device->id))
                                                @php
                                                    $deviceGedungKey = strtoupper((string) ($device->gedung ?? $record->gedung ?? ''));
                                                    $deviceBaseUrl = isset($gedungAliasMap[$deviceGedungKey]) ? url($gedungAliasMap[$deviceGedungKey]) : url($url_menu);
                                                @endphp
                                                <a href="{{ $deviceBaseUrl . '/show/' . encrypt($device->id) }}"
                                                   class="btn btn-sm btn-outline-primary mb-0 px-2 py-1">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @endif

                        {{-- Audit Info --}}
                        <hr class="horizontal dark mt-4">
                        <div class="row">
                            <div class="col-md-6">
                                <small class="text-muted">
                                    <i class="fas fa-user-plus me-1"></i>
                                    {{ $record->user_create ?? '-' }} — {{ $record->created_at ?? '-' }}
                                </small>
                            </div>
                            <div class="col-md-6 text-end">
                                <small class="text-muted">
                                    <i class="fas fa-user-edit me-1"></i>
                                    {{ $record->user_update ?? '-' }} — {{ $record->updated_at ?? '-' }}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="devicePhotoModal" tabindex="-1" aria-labelledby="devicePhotoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 14px;">
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title" id="devicePhotoModalLabel">Foto Perangkat</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 text-center">
                    <img id="devicePhotoModalImage" src="" alt="Preview Foto" class="img-fluid border-radius-lg" style="max-height: 78vh; width: auto;">
                </div>
            </div>
        </div>
    </div>

    @if ($authorize->delete == '1')
    <form id="deviceDeleteForm" action="{{ $deleteActionUrl }}" method="POST" class="d-none">
        @csrf
        @method('DELETE')
        <input type="hidden" name="delete_mode" id="deviceDeleteMode" value="self_only">
    </form>

    <style>
        .swal2-delete-popup {
            border-radius: 14px !important;
        }

        .swal2-delete-html {
            text-align: left !important;
        }

        .swal-delete-main {
            border: 1px solid #ffd7de;
            border-radius: 10px;
            background: #fff8fa;
            padding: 10px 12px;
            margin-bottom: 10px;
        }

        .swal-delete-main .label {
            display: block;
            font-size: 0.68rem;
            text-transform: uppercase;
            color: #8a93a5;
            font-weight: 700;
            letter-spacing: .03em;
            margin-bottom: 2px;
        }

        .swal-delete-list {
            max-height: 220px;
            overflow: auto;
            border: 1px solid #f1f2f6;
            border-radius: 10px;
            background: #fbfcff;
            padding: 8px;
            margin-bottom: 10px;
        }

        .swal-delete-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 8px;
        }

        .swal-delete-item:nth-child(odd) {
            background: #f7f9fc;
        }

        .swal-delete-name {
            color: #344767;
            font-size: 0.8rem;
            font-weight: 600;
            line-height: 1.2;
        }

        .swal-delete-meta {
            color: #67748e;
            font-size: 0.68rem;
            white-space: nowrap;
        }

        .swal-delete-empty {
            font-size: 0.75rem;
            color: #8392ab;
            margin-bottom: 8px;
        }

        .swal2-delete-popup .swal2-radio {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            align-items: stretch;
            margin: 0.35rem 1.6em 0.3rem !important;
            width: auto;
        }

        .swal2-delete-popup .swal2-radio label {
            margin: 0 !important;
            font-size: 0.84rem !important;
            line-height: 1.35;
            color: #344767;
            font-weight: 600;
            width: 100%;
            border: 1px solid #e3e8ef;
            border-radius: 10px;
            background: #ffffff;
            padding: 9px 10px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            cursor: pointer;
            transition: all 0.16s ease;
            box-sizing: border-box;
        }

        .swal2-delete-popup .swal2-radio label:hover {
            border-color: #cbd5e1;
            background: #fafcff;
        }

        .swal2-delete-popup .swal2-radio label.selected {
            border-color: #5e72e4;
            background: #f6f8ff;
            box-shadow: 0 0 0 1px rgba(94, 114, 228, 0.08);
        }

        .swal2-delete-popup .swal2-radio input {
            margin: 2px 0 0 !important;
        }

        .swal-delete-choice-title {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #8a93a5;
            font-weight: 700;
            margin: 2px 1.6em 6px 2.12em;
        }

        .swal-delete-note {
            font-size: 0.73rem;
            color: #606a85;
            line-height: 1.45;
            margin-top: 4px;
            margin-bottom: 2px;
            margin-left: 2.5em;
            margin-right: 2.5em;
            border: 1px solid #e8edf4;
            border-left: 3px solid #5e72e4;
            border-radius: 8px;
            background: #f9fbff;
            padding: 7px 9px;
        }

        .swal-delete-confirm {
            border: 1px dashed #f1c4c9;
            border-radius: 10px;
            background: #fff4f6;
            padding: 10px 12px;
            margin-bottom: 10px;
            margin-left: 1.9em;
            margin-right: 1.9em;
        }

        .swal-delete-confirm .confirm-label {
            display: block;
            font-size: 0.68rem;
            text-transform: uppercase;
            color: #8a93a5;
            font-weight: 700;
            letter-spacing: .03em;
            margin-bottom: 4px;
        }

        .swal-delete-confirm .confirm-code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
            font-size: 0.85rem;
            color: #b31942;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .swal-delete-confirm-input {
            width: 100%;
            border: 1px solid #e3e8ef;
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 0.82rem;
            color: #344767;
            background: #ffffff;
        }

        .swal-delete-confirm-input:focus {
            outline: none;
            border-color: #e53358;
            box-shadow: 0 0 0 2px rgba(229, 51, 88, 0.12);
        }

        .swal-delete-confirm-hint {
            font-size: 0.7rem;
            color: #8a93a5;
            margin-top: 6px;
        }

        .swal-delete-note strong {
            color: #445071;
        }

        @media (max-width: 640px) {
            .swal2-delete-popup .swal2-radio {
                grid-template-columns: 1fr;
            }
        }
    </style>
    @endif
@endsection

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const photoModal = document.getElementById('devicePhotoModal');
        if (photoModal) {
            photoModal.addEventListener('show.bs.modal', function (event) {
                const trigger = event.relatedTarget;
                if (!trigger) return;

                const src = trigger.getAttribute('data-full-src') || '';
                const title = trigger.getAttribute('data-photo-title') || 'Foto Perangkat';

                const img = document.getElementById('devicePhotoModalImage');
                const titleEl = document.getElementById('devicePhotoModalLabel');
                if (img) img.src = src;
                if (titleEl) titleEl.textContent = title;
            });
        }

        const deleteTrigger = document.getElementById('deviceDeleteTrigger');
        const deleteForm = document.getElementById('deviceDeleteForm');
        const deleteModeInput = document.getElementById('deviceDeleteMode');

        const escapeHtml = function (value) {
            return String(value || '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        };

        const normalizeConfirmText = function (value) {
            return String(value || '').trim().replace(/\s+/g, ' ').toUpperCase();
        };

        const getConfirmSuffix = function (mode) {
            return mode === 'with_descendants' ? 'beserta semua turunan' : '';
        };

        const getConfirmTarget = function (code, mode) {
            return (getConfirmSuffix(mode) + ' ' + String(code || '').trim()).trim();
        };

        const buildDeleteSummaryHtml = function (parentDeviceName, deleteDescendants, confirmTarget, showConfirm) {
            let html = '<div class="swal-delete-main">';
            html += '<span class="label">Perangkat utama</span>';
            html += '<strong>' + escapeHtml(parentDeviceName) + '</strong>';
            html += '</div>';

            if (!deleteDescendants.length) {
                html += '<div class="swal-delete-empty">Tidak ada turunan pada perangkat ini.</div>';
            } else {
                html += '<div class="swal-delete-list">';
                deleteDescendants.forEach(function (item) {
                    const depth = Math.max(1, Number(item.depth || 1));
                    const indent = depth > 1 ? '&nbsp;'.repeat((depth - 1) * 3) + '&#10148;&nbsp;' : '';
                    const kategoriText = item.kategori ? ' (' + escapeHtml(item.kategori) + ')' : '';
                    const portText = item.port ? 'Port ' + escapeHtml(item.port) + ' • ' : '';
                    html += '<div class="swal-delete-item">';
                    html += '<div class="swal-delete-name">' + indent + escapeHtml(item.name) + kategoriText + '</div>';
                    html += '<div class="swal-delete-meta">' + portText + escapeHtml(item.status) + '</div>';
                    html += '</div>';
                });
                html += '</div>';
            }

            if (showConfirm) {
                html += '<div class="swal-delete-confirm" id="deleteConfirmWrap">';
                html += '<span class="confirm-label">Ketik konfirmasi persis seperti ini</span>';
                html += '<div class="confirm-code" id="deleteConfirmTarget">' + escapeHtml(confirmTarget) + '</div>';
                html += '<input id="deleteConfirmInput" class="swal-delete-confirm-input" type="text" autocomplete="off" autocorrect="off" autocapitalize="characters" spellcheck="false" placeholder="Ketik konfirmasi...">';
                html += '<div class="swal-delete-confirm-hint">Pilih cakupan aksi terlebih dahulu, lalu ketik manual (copy/paste dinonaktifkan).</div>';
                html += '</div>';
            }

            return html;
        };

        if (deleteTrigger && deleteForm && deleteModeInput) {
            const deleteDescendantsRaw = deleteTrigger.getAttribute('data-descendants') || '[]';
            const deleteDescendants = JSON.parse(deleteDescendantsRaw);
            const deleteActionLabel = deleteTrigger.getAttribute('data-delete-action-label') || 'Hapus';
            const parentDeviceName = deleteTrigger.getAttribute('data-parent-name') || '-';
            const confirmCode = String(parentDeviceName || '').trim();
            const requiresTypingConfirm = (deleteActionLabel.toLowerCase().includes('non aktif')
                || deleteActionLabel.toLowerCase().includes('hapus'))
                && confirmCode !== ''
                && confirmCode !== '-';

            deleteTrigger.addEventListener('click', function () {
                const hasDescendants = deleteDescendants.length > 0;

                if (typeof Swal === 'undefined') {
                    const fallbackConfirm = window.confirm(deleteActionLabel + ' perangkat ini?');
                    if (!fallbackConfirm) {
                        return;
                    }
                    const fallbackConfirmSecond = window.confirm('Konfirmasi terakhir: lanjutkan ' + deleteActionLabel.toLowerCase() + ' perangkat ini?');
                    if (!fallbackConfirmSecond) {
                        return;
                    }
                    deleteModeInput.value = 'self_only';
                    deleteForm.submit();
                    return;
                }

                const inputOptions = {
                    self_only: 'Perangkat ini saja',
                };

                if (hasDescendants) {
                    inputOptions.with_descendants = 'Beserta semua turunan (' + deleteDescendants.length + ')';
                }

                const initialConfirmTarget = getConfirmTarget(confirmCode, 'self_only');

                Swal.fire({
                    icon: 'warning',
                    title: deleteActionLabel + ' perangkat ini?',
                    html: buildDeleteSummaryHtml(parentDeviceName, deleteDescendants, initialConfirmTarget, requiresTypingConfirm),
                    input: hasDescendants ? 'radio' : undefined,
                    inputOptions: hasDescendants ? inputOptions : undefined,
                    inputValue: 'self_only',
                    showCancelButton: true,
                    confirmButtonText: deleteActionLabel + ' sekarang',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#e53358',
                    cancelButtonColor: '#67748e',
                    customClass: {
                        popup: 'swal2-delete-popup',
                        htmlContainer: 'swal2-delete-html'
                    },
                    didOpen: function (popup) {
                        const radioWrap = popup.querySelector('.swal2-radio');
                        let note = null;
                        if (radioWrap) {
                            const choiceTitle = document.createElement('div');
                            choiceTitle.className = 'swal-delete-choice-title';
                            choiceTitle.textContent = 'Pilih cakupan aksi';
                            radioWrap.insertAdjacentElement('beforebegin', choiceTitle);

                            const labels = Array.from(radioWrap.querySelectorAll('label'));
                            const syncSelectedState = function () {
                                labels.forEach(function (label) {
                                    const input = label.querySelector('input');
                                    label.classList.toggle('selected', !!(input && input.checked));
                                });
                            };

                            labels.forEach(function (label) {
                                const input = label.querySelector('input');
                                if (input) {
                                    input.addEventListener('change', function () {
                                        syncSelectedState();

                                        const selectedMode = input.value || 'self_only';
                                        const target = popup.querySelector('#deleteConfirmTarget');
                                        if (target) {
                                            target.textContent = getConfirmTarget(confirmCode, selectedMode);
                                        }
                                        const confirmInput = popup.querySelector('#deleteConfirmInput');
                                        if (confirmInput) {
                                            confirmInput.value = '';
                                        }
                                    });
                                }
                            });
                            syncSelectedState();

                            note = document.createElement('div');
                            note.className = 'swal-delete-note';
                            note.innerHTML = '<strong>Catatan:</strong> Opsi <em>Beserta semua turunan</em> akan menerapkan perubahan status ke seluruh perangkat turunan secara berantai.';
                            radioWrap.insertAdjacentElement('afterend', note);
                        }

                        const confirmWrap = popup.querySelector('#deleteConfirmWrap');
                        if (confirmWrap) {
                            if (radioWrap) {
                                const insertAfter = note || radioWrap;
                                insertAfter.insertAdjacentElement('afterend', confirmWrap);
                            } else {
                                popup.appendChild(confirmWrap);
                            }
                        }

                        const confirmInput = popup.querySelector('#deleteConfirmInput');
                        if (confirmInput) {
                            const blockPaste = function (event) {
                                event.preventDefault();
                            };

                            confirmInput.addEventListener('paste', blockPaste);
                            confirmInput.addEventListener('drop', blockPaste);
                            confirmInput.addEventListener('contextmenu', blockPaste);
                            confirmInput.addEventListener('keydown', function (event) {
                                const key = String(event.key || '').toLowerCase();
                                if ((event.ctrlKey || event.metaKey) && (key === 'v' || key === 'insert')) {
                                    event.preventDefault();
                                }
                                if (event.shiftKey && key === 'insert') {
                                    event.preventDefault();
                                }
                            });
                        }
                    },
                    focusCancel: true,
                    preConfirm: function (selectedMode) {
                        if (hasDescendants && !selectedMode) {
                            Swal.showValidationMessage('Pilih opsi aksi terlebih dahulu');
                            return false;
                        }

                        if (requiresTypingConfirm) {
                            const popup = Swal.getPopup();
                            const inputEl = popup ? popup.querySelector('#deleteConfirmInput') : null;
                            const typedValue = inputEl ? inputEl.value : '';
                            const mode = selectedMode || 'self_only';
                            const expectedText = getConfirmTarget(confirmCode, mode);

                            if (!typedValue || !typedValue.trim()) {
                                Swal.showValidationMessage('Ketik kode perangkat utama untuk konfirmasi');
                                return false;
                            }

                            if (normalizeConfirmText(typedValue) !== normalizeConfirmText(expectedText)) {
                                Swal.showValidationMessage('Kode perangkat tidak cocok. Ketik persis seperti yang ditampilkan.');
                                return false;
                            }
                        }

                        return selectedMode || 'self_only';
                    }
                }).then(function (result) {
                    if (!result.isConfirmed) {
                        return;
                    }

                    const selectedMode = result.value || 'self_only';
                    const modeLabel = selectedMode === 'with_descendants' ? 'beserta semua turunan' : 'perangkat ini saja';
                    const doSubmit = function () {
                        deleteModeInput.value = selectedMode;
                        deleteForm.submit();
                    };

                    if (requiresTypingConfirm) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Konfirmasi terakhir',
                            html: 'Anda akan <strong>' + escapeHtml(deleteActionLabel.toLowerCase()) + '</strong> perangkat <strong>'
                                + escapeHtml(parentDeviceName) + '</strong> (' + escapeHtml(modeLabel) + '). Lanjutkan?',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, lanjutkan',
                            cancelButtonText: 'Batal',
                            confirmButtonColor: '#e53358',
                            cancelButtonColor: '#67748e'
                        }).then(function (secondResult) {
                            if (!secondResult.isConfirmed) {
                                return;
                            }
                            doSubmit();
                        });
                        return;
                    }

                    doSubmit();
                });
            });
        }

        const filterButtons = document.querySelectorAll('.show-port-filter-btn');
        const portItems = document.querySelectorAll('.show-port-item[data-port-state]');
        if (filterButtons.length && portItems.length) {
            filterButtons.forEach(btn => {
                btn.addEventListener('click', function () {
                    const state = this.getAttribute('data-port-filter');
                    filterButtons.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');

                    portItems.forEach(item => {
                        const itemState = item.getAttribute('data-port-state');
                        const visible = state === 'all' || itemState === state;
                        item.classList.toggle('hidden-by-filter', !visible);
                        const link = item.closest('.show-port-link');
                        if (link) {
                            link.style.display = visible ? 'inline-block' : 'none';
                        }
                    });
                });
            });
        }
    });
</script>
@endpush