@extends('layouts.app')

@section('title', '42U Server Rack Cabinet - ISP ERP System')

@section('page-title', '42U Server Rack Cabinet')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-server me-2"></i>
                                42U Server Rack Cabinet
                            </h3>
                            <p class="mb-0 opacity-75">Visual rack management for switches and routers</p>
                        </div>
                        <div>
                            <a href="{{ route('mikrotik.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Servers
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Device Palette -->
        <div class="col-md-3">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-palette me-2"></i>
                        Device Palette
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="device-palette">
                        <div class="palette-item" data-device-type="router" data-device-height="1">
                            <div class="device-icon router-icon">
                                <i class="fas fa-network-wired"></i>
                            </div>
                            <div class="device-label">Router (1U)</div>
                        </div>
                        <div class="palette-item" data-device-type="switch" data-device-height="1">
                            <div class="device-icon switch-icon">
                                <i class="fas fa-sitemap"></i>
                            </div>
                            <div class="device-label">Switch (1U)</div>
                        </div>
                        <div class="palette-item" data-device-type="switch" data-device-height="2">
                            <div class="device-icon switch-icon">
                                <i class="fas fa-sitemap"></i>
                            </div>
                            <div class="device-label">Switch (2U)</div>
                        </div>
                        <div class="palette-item" data-device-type="server" data-device-height="1">
                            <div class="device-icon server-icon">
                                <i class="fas fa-server"></i>
                            </div>
                            <div class="device-label">Server (1U)</div>
                        </div>
                        <div class="palette-item" data-device-type="server" data-device-height="2">
                            <div class="device-icon server-icon">
                                <i class="fas fa-server"></i>
                            </div>
                            <div class="device-label">Server (2U)</div>
                        </div>
                        <div class="palette-item" data-device-type="patch-panel" data-device-height="1">
                            <div class="device-icon patch-icon">
                                <i class="fas fa-plug"></i>
                            </div>
                            <div class="device-label">Patch Panel (1U)</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Device Configuration Panel -->
            <div class="custom-card mt-3" id="configPanel" style="display: none;">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-2"></i>
                        Device Configuration
                    </h5>
                </div>
                <div class="custom-card-body">
                    <form id="deviceConfigForm">
                        <input type="hidden" id="configDeviceId">
                        <div class="form-group mb-3">
                            <label for="deviceName">Device Name</label>
                            <input type="text" class="form-control" id="deviceName" placeholder="Enter device name">
                        </div>
                        <div class="form-group mb-3">
                            <label for="deviceModel">Model</label>
                            <input type="text" class="form-control" id="deviceModel" placeholder="e.g., RB750, CRS326">
                        </div>
                        <div class="form-group mb-3">
                            <label for="deviceIP">IP Address</label>
                            <input type="text" class="form-control" id="deviceIP" placeholder="192.168.1.1">
                        </div>
                        <div class="form-group mb-3">
                            <label for="deviceStatus">Status</label>
                            <select class="form-control" id="deviceStatus">
                                <option value="online">Online</option>
                                <option value="offline">Offline</option>
                                <option value="maintenance">Maintenance</option>
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label for="deviceNotes">Notes</label>
                            <textarea class="form-control" id="deviceNotes" rows="3" placeholder="Additional notes"></textarea>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-sm" onclick="saveDeviceConfig()">
                                <i class="fas fa-save me-1"></i>Save
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" onclick="removeDevice()">
                                <i class="fas fa-trash me-1"></i>Remove
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Rack Visualization -->
        <div class="col-md-9">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-server me-2"></i>
                            Server Rack (42U)
                        </h5>
                        <div>
                            <div class="btn-group me-2" role="group">
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomOut()" title="Zoom Out">
                                    <i class="fas fa-search-minus"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="resetZoom()" title="Reset Zoom">
                                    <i class="fas fa-search"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" onclick="zoomIn()" title="Zoom In">
                                    <i class="fas fa-search-plus"></i>
                                </button>
                            </div>
                            <button class="btn btn-sm btn-outline-primary" onclick="clearRack()">
                                <i class="fas fa-trash-alt me-1"></i>Clear Rack
                            </button>
                            <button class="btn btn-sm btn-outline-success" onclick="saveRack()">
                                <i class="fas fa-save me-1"></i>Save Configuration
                            </button>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    <div class="rack-container" id="rackContainer">
                        <div class="rack-svg-container" id="rackSvgContainer">
                            <!-- SVG rack will be generated here -->
                        </div>
                        <div class="rack-units-overlay" id="rackUnitsOverlay">
                            <!-- Interactive overlay for drag and drop -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- BDCOM S5828 Detail Modal -->
<div class="modal fade" id="bdcomS5828Modal" tabindex="-1" role="dialog" aria-labelledby="bdcomS5828ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bdcomS5828ModalLabel">
                    <i class="fas fa-network-wired me-2"></i>BDCOM S5828 100G Data Center TOR Switch
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Switch Image -->
                <div class="text-center mb-4">
                    <div class="switch-image-container" style="background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6;">
                        <div style="max-width: 600px; margin: 0 auto;">
                            <div style="background: linear-gradient(to bottom, #2c2c2c 0%, #1a1a1a 100%); border: 2px solid #000; border-radius: 4px; padding: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.3);">
                                <div style="background: #1a1a1a; padding: 8px; border-bottom: 2px solid #000; position: relative;">
                                    <div style="height: 3px; background: #8b4513; width: 60%; margin: 0 auto; border-radius: 2px;"></div>
                                    <div style="position: absolute; right: 10px; top: 5px; color: white; font-size: 10px; font-weight: bold;">BDCOM</div>
                                </div>
                                <div style="background: linear-gradient(to bottom, #e8e8e8 0%, #d0d0d0 100%); padding: 10px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;">
                                    <!-- 8 Modular Bays -->
                                    <div style="background: #1a1a1a; border: 1px solid #000; border-radius: 2px; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative;">
                                        <div style="position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 3px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 3px #00ff00;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                    </div>
                                    <!-- Repeat 7 more times -->
                                    <div style="background: #1a1a1a; border: 1px solid #000; border-radius: 2px; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative;">
                                        <div style="position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 3px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 3px #00ff00;"></div>
                                        <div style="background: #27ae60; border: 0.5px solid #1e8449; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                    </div>
                                    <div style="background: #1a1a1a; border: 1px solid #000; border-radius: 2px; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative;">
                                        <div style="position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 3px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 3px #00ff00;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                    </div>
                                    <div style="background: #1a1a1a; border: 1px solid #000; border-radius: 2px; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative;">
                                        <div style="position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 3px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 3px #00ff00;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                    </div>
                                    <div style="background: #1a1a1a; border: 1px solid #000; border-radius: 2px; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative;">
                                        <div style="position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 3px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 3px #00ff00;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                    </div>
                                    <div style="background: #1a1a1a; border: 1px solid #000; border-radius: 2px; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative;">
                                        <div style="position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 3px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 3px #00ff00;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                    </div>
                                    <div style="background: #1a1a1a; border: 1px solid #000; border-radius: 2px; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative;">
                                        <div style="position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 3px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 3px #00ff00;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                    </div>
                                    <div style="background: #1a1a1a; border: 1px solid #000; border-radius: 2px; padding: 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative;">
                                        <div style="position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 3px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 3px #00ff00;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                        <div style="background: #2c2c2c; border: 0.5px solid #000; min-height: 8px;"></div>
                                    </div>
                                </div>
                                <div style="background: #f0f0f0; border: 1px solid #ccc; border-radius: 2px; padding: 5px; margin-top: 5px; text-align: center; font-size: 10px; font-weight: bold; color: #333;">
                                    BDCOM S5828 100G Data Center TOR Switch
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Switch Details -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header bg-primary text-white">
                                <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Specifications</h6>
                            </div>
                            <div class="card-body">
                                <table class="table table-sm table-bordered">
                                    <tr>
                                        <td><strong>Model</strong></td>
                                        <td>BDCOM S5828</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Ports</strong></td>
                                        <td>24 x GE/10GE SFP+ Port<br>4 x 40GE/100GE QSFP Port</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Protocol</strong></td>
                                        <td>IPv4 / IPv6 Routing</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Backplane</strong></td>
                                        <td>800Gbps</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Forwarding Rate</strong></td>
                                        <td>600 Mpps</td>
                                    </tr>
                                    <tr>
                                        <td><strong>MAC Addresses</strong></td>
                                        <td>32K</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Jumbo Frame</strong></td>
                                        <td>9K</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Flash Memory</strong></td>
                                        <td>32 MB</td>
                                    </tr>
                                    <tr>
                                        <td><strong>DRAM</strong></td>
                                        <td>1024 MB</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Total SVI</strong></td>
                                        <td>1K</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Features</strong></td>
                                        <td>MPLS VPN</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Form Factor</strong></td>
                                        <td>1U Rack-Mounted</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Dimensions</strong></td>
                                        <td>440 x 350 x 44 mm</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Weight</strong></td>
                                        <td>7.1 Kg</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header bg-success text-white">
                                <h6 class="mb-0"><i class="fas fa-plug me-2"></i>Port Configuration</h6>
                            </div>
                            <div class="card-body">
                                <div id="switchPortGridDetail" class="switch-port-grid-detail">
                                    <!-- Port grid will be generated here -->
                                </div>
                                <div id="connectionDiagram" class="mt-3" style="display: none;">
                                    <div class="card border-primary">
                                        <div class="card-header bg-primary text-white">
                                            <h6 class="mb-0"><i class="fas fa-project-diagram me-2"></i>Connection Diagram</h6>
                                        </div>
                                        <div class="card-body" id="connectionDiagramContent">
                                            <!-- Connection diagram will be shown here -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<style>
.rack-container {
    background: #fbf9f5;
    padding: 0 20px 20px 20px;
    border-radius: 8px;
    position: relative;
    min-height: 1900px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    transform-origin: top center;
    transition: transform 0.3s ease;
}

.rack-svg-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    z-index: 1;
}

.rack-svg-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.rack-units-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    z-index: 2;
}

.rack-units-overlay-inner {
    position: relative;
    width: 600px;
    max-width: 100%;
    height: 1900px;
}

.rack-unit-overlay {
    position: absolute;
    width: 440px;
    height: 40px;
    left: 80px;
    cursor: pointer;
    pointer-events: all;
    transition: background 0.2s;
    border-radius: 2px;
}

.rack-unit-overlay:hover {
    background: rgba(52, 152, 219, 0.1);
}

.rack-unit-overlay.occupied {
    background: rgba(52, 152, 219, 0.3);
}

.rack-unit-overlay.occupied:hover {
    background: rgba(52, 152, 219, 0.4);
}

.rack-unit-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    pointer-events: none;
}

.device-palette {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.palette-item {
    padding: 15px;
    border: 2px dashed #bdc3c7;
    border-radius: 8px;
    text-align: center;
    cursor: grab;
    transition: all 0.2s;
    background: white;
}

.palette-item:hover {
    border-color: #3498db;
    background: #ebf5fb;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.palette-item:active {
    cursor: grabbing;
}

.device-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.router-icon {
    color: #e74c3c;
}

.switch-icon {
    color: #3498db;
}

.server-icon {
    color: #27ae60;
}

.patch-icon {
    color: #f39c12;
}

.device-label {
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
}

/* Switch Port Grid Visualization */
.switch-port-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 1px;
    padding: 2px;
    background: #ffffff;
    border: 1px solid #bdc3c7;
    border-radius: 2px;
    width: 100%;
    box-sizing: border-box;
}

.port-square {
    aspect-ratio: 1;
    border: 0.5px solid #bdc3c7;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4px;
    font-weight: 600;
    color: #2c3e50;
    position: relative;
    min-height: 10px;
    max-height: 12px;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.port-square:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.port-square.occupied {
    background: #27ae60;
    border: 0.5px solid #1e8449;
    color: white;
}

.port-square.empty {
    background: #ecf0f1;
    border: 0.5px solid #bdc3c7;
    color: #7f8c8d;
}

.port-label {
    font-size: 3px;
    line-height: 1;
    text-align: center;
    word-break: break-all;
    padding: 0;
    transform: scale(0.8);
}

/* Modal Port Grid */
.switch-port-grid-detail {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 3px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
}

.switch-port-grid-detail .port-square-detail {
    aspect-ratio: 1;
    border: 1px solid #bdc3c7;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    color: #2c3e50;
    position: relative;
    min-height: 30px;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    background: #ecf0f1;
}

.switch-port-grid-detail .port-square-detail:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border-color: #3498db;
}

.switch-port-grid-detail .port-square-detail.occupied {
    background: #27ae60;
    border-color: #1e8449;
    color: white;
}

.switch-port-grid-detail .port-square-detail.empty {
    background: #ecf0f1;
    border-color: #bdc3c7;
    color: #7f8c8d;
}

.switch-port-grid-detail .port-label-detail {
    font-size: 7px;
    line-height: 1;
    text-align: center;
    word-break: break-all;
    padding: 2px;
}
</style>

<script>
let rackDevices = {};
let deviceCounter = 0;
let currentZoom = 1;
const minZoom = 0.5;
const maxZoom = 2;
const zoomStep = 0.1;

// Load switches from database
const databaseSwitches = @json($switches ?? []);

document.addEventListener('DOMContentLoaded', function() {
    initializeRack();
    setupDragAndDrop();
    loadRackConfiguration();
});

function initializeRack() {
    generateRackSVG();
    createRackOverlay();
}

function generateRackSVG() {
    const container = document.getElementById('rackSvgContainer');
    
    // Calculate dimensions
    const width = 600;
    const height = 1900;
    const startY = 50;
    const frameWidth = 440;
    const frameHeight = 1800;
    const frameX = 80;
    const rail1X = 160;
    const rail2X = 440;
    const railStartY = 120;
    const railEndY = 1780;
    
    let svg = `
        <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <!-- Pencil texture -->
                <filter id="pencilTexture">
                    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch" result="noise"/>
                    <feColorMatrix type="saturate" values="0" />
                    <feComponentTransfer>
                        <feFuncA type="table" tableValues="0 0.6"/>
                    </feComponentTransfer>
                    <feBlend in="SourceGraphic" mode="multiply"/>
                </filter>
                
                <!-- Hand-drawn wobble effect -->
                <filter id="wobble" x="-20%" y="-20%" width="140%" height="140%">
                    <feTurbulence baseFrequency="0.02" numOctaves="2" seed="3" result="turb"/>
                    <feDisplacementMap in="SourceGraphic" in2="turb" scale="4" xChannelSelector="R" yChannelSelector="G"/>
                </filter>
            </defs>
            
            <!-- Background -->
            <rect x="0" y="0" width="${width}" height="${height}" fill="#fbf9f5"/>
            
            <!-- Outer rack frame -->
            <g filter="url(#wobble)">
                <rect x="${frameX}" y="${startY}" width="${frameWidth}" height="${frameHeight}" 
                      fill="none" stroke="#2b2b2b" stroke-width="6" 
                      stroke-linecap="round" stroke-linejoin="round"/>
            </g>
            
            <!-- Inner rails -->
            <g filter="url(#wobble)" stroke="#2b2b2b" stroke-width="3" stroke-linecap="round">
                <line x1="${rail1X}" y1="${railStartY}" x2="${rail1X}" y2="${railEndY}"/>
                <line x1="${rail2X}" y1="${railStartY}" x2="${rail2X}" y2="${railEndY}"/>
            </g>
            
            <!-- U-hole markers -->
            <g filter="url(#wobble)" stroke="#2b2b2b" fill="#ffffff" stroke-width="2">
    `;
    
    // Generate holes for 42U (each U is ~40px, starting from top)
    let y = 150;
    for (let i = 0; i < 42; i++) {
        // Left rail holes
        svg += `<rect x="${rail1X - 18}" y="${y}" width="36" height="10" rx="2" ry="2"/>`;
        // Right rail holes
        svg += `<rect x="${rail2X - 18}" y="${y}" width="36" height="10" rx="2" ry="2"/>`;
        y += 40; // Each U is approximately 40px
    }
    
    svg += `
            </g>
            
            <!-- Top & bottom frame lines -->
            <g filter="url(#wobble)" stroke="#2b2b2b" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                <rect x="${frameX}" y="${startY}" width="${frameWidth}" height="28" fill="none"/>
                <rect x="${frameX}" y="${startY + frameHeight}" width="${frameWidth}" height="28" fill="none"/>
            </g>
            
            <!-- Pencil shading -->
            <g opacity="0.45" filter="url(#pencilTexture)">
                <rect x="${frameX + 10}" y="${startY + 30}" width="${frameWidth - 20}" height="${frameHeight - 60}" fill="#ffffff"/>
            </g>
        </svg>
    `;
    
    container.innerHTML = svg;
}

function createRackOverlay() {
    const overlay = document.getElementById('rackUnitsOverlay');
    overlay.innerHTML = '';
    
    // Create inner container
    const inner = document.createElement('div');
    inner.className = 'rack-units-overlay-inner';
    
    // Create 42U overlay slots (from top to bottom, U42 to U1)
    // Each U is approximately 40px, starting from y=150
    const startY = 150;
    const unitHeight = 40;
    
    for (let i = 42; i >= 1; i--) {
        const yPos = startY + (42 - i) * unitHeight;
        const unit = document.createElement('div');
        unit.className = 'rack-unit-overlay';
        unit.dataset.unitNumber = i;
        unit.style.top = `${yPos}px`;
        unit.style.height = `${unitHeight}px`;
        
        const content = document.createElement('div');
        content.className = 'rack-unit-content';
        content.innerHTML = `<span style="font-size: 11px; color: #7f8c8d; font-weight: bold;">U${i}</span>`;
        unit.appendChild(content);
        
        inner.appendChild(unit);
    }
    
    overlay.appendChild(inner);
}

function setupDragAndDrop() {
    // Make palette items draggable
    const paletteItems = document.querySelectorAll('.palette-item');
    paletteItems.forEach(item => {
        item.addEventListener('dragstart', handleDragStart);
        item.draggable = true;
    });

    // Make rack units droppable
    const rackUnits = document.querySelectorAll('.rack-unit-overlay');
    rackUnits.forEach(unit => {
        unit.addEventListener('dragover', handleDragOver);
        unit.addEventListener('drop', handleDrop);
        unit.addEventListener('click', handleUnitClick);
        unit.addEventListener('dragleave', handleDragLeave);
    });
}

function handleDragStart(e) {
    const deviceType = e.target.closest('.palette-item').dataset.deviceType;
    const deviceHeight = parseInt(e.target.closest('.palette-item').dataset.deviceHeight);
    e.dataTransfer.setData('deviceType', deviceType);
    e.dataTransfer.setData('deviceHeight', deviceHeight);
}

function handleDragOver(e) {
    e.preventDefault();
    e.currentTarget.style.background = 'rgba(52, 152, 219, 0.2)';
}

function handleDragLeave(e) {
    e.currentTarget.style.background = '';
}

function handleDrop(e) {
    e.preventDefault();
    e.currentTarget.style.background = '';
    
    const unitNumber = parseInt(e.currentTarget.dataset.unitNumber);
    const deviceType = e.dataTransfer.getData('deviceType');
    const deviceHeight = parseInt(e.dataTransfer.getData('deviceHeight'));
    
    // Check if unit is available
    if (isUnitAvailable(unitNumber, deviceHeight)) {
        addDeviceToRack(unitNumber, deviceType, deviceHeight);
    } else {
        Swal.fire({
            icon: 'warning',
            title: 'Slot Occupied',
            text: 'This slot or required slots are already occupied. Please choose another location.',
            confirmButtonText: 'OK'
        });
    }
}

function isUnitAvailable(startUnit, height) {
    for (let i = 0; i < height; i++) {
        const unitNum = startUnit - i;
        if (unitNum < 1 || unitNum > 42) {
            return false;
        }
        if (rackDevices[unitNum]) {
            return false;
        }
    }
    return true;
}

function addDeviceToRack(unitNumber, deviceType, deviceHeight, openConfig = true) {
    deviceCounter++;
    const deviceId = `device_${deviceCounter}`;
    
    // Mark units as occupied
    for (let i = 0; i < deviceHeight; i++) {
        const unitNum = unitNumber - i;
        rackDevices[unitNum] = {
            id: deviceId,
            type: deviceType,
            height: deviceHeight,
            startUnit: unitNumber,
            name: `${deviceType.charAt(0).toUpperCase() + deviceType.slice(1)} ${deviceCounter}`,
            model: '',
            ip: '',
            status: 'online',
            notes: ''
        };
    }
    
    renderRack();
    if (openConfig) {
        openDeviceConfig(deviceId);
    }
}

function renderRack() {
    // Clear all units
    document.querySelectorAll('.rack-unit-overlay').forEach(unit => {
        unit.classList.remove('occupied');
        unit.style.height = '40px';
        unit.style.display = 'block';
        const content = unit.querySelector('.rack-unit-content');
        const unitNum = unit.dataset.unitNumber;
        content.innerHTML = `<span style="font-size: 11px; color: #7f8c8d; font-weight: bold;">U${unitNum}</span>`;
    });
    
    // Render devices
    const deviceGroups = {};
    Object.keys(rackDevices).forEach(unitNum => {
        const device = rackDevices[unitNum];
        if (!deviceGroups[device.id]) {
            deviceGroups[device.id] = device;
        }
    });
    
    Object.values(deviceGroups).forEach(device => {
        const unit = document.querySelector(`[data-unit-number="${device.startUnit}"]`);
        if (unit) {
            unit.classList.add('occupied');
            const content = unit.querySelector('.rack-unit-content');
            
            // Calculate height for multi-U devices
            const unitHeight = 40; // Height of one U in pixels
            const deviceHeightPx = device.height * unitHeight;
            unit.style.height = `${deviceHeightPx}px`;
            
            // Merge with units below for multi-U devices
            for (let i = 1; i < device.height; i++) {
                const belowUnit = document.querySelector(`[data-unit-number="${device.startUnit - i}"]`);
                if (belowUnit) {
                    belowUnit.style.display = 'none';
                }
            }
            
            const statusClass = device.status || 'online';
            const statusColor = statusClass === 'online' ? '#27ae60' : 
                               statusClass === 'offline' ? '#e74c3c' : '#f39c12';
            
            // For switches, show port grid visualization
            if (device.type === 'switch') {
                const isBDCOM5828 = device.model === 'S5828' || device.name.includes('S5828');
                // Try to find matching switch in database by IP or name
                let switchDbId = null;
                if (device.ip || device.name) {
                    const dbSwitch = databaseSwitches.find(s => 
                        (device.ip && s.ip === device.ip) || 
                        (device.name && s.name === device.name) ||
                        (device.name && s.name && s.name.toLowerCase().includes(device.name.toLowerCase())) ||
                        (device.name && s.name && device.name.toLowerCase().includes(s.name.toLowerCase()))
                    );
                    if (dbSwitch) {
                        switchDbId = dbSwitch.id;
                    }
                }
                // Also check if device has a direct switch_db_id property
                if (!switchDbId && device.switch_db_id) {
                    switchDbId = device.switch_db_id;
                }
                // If still no ID found, try to match by partial name
                if (!switchDbId && device.name) {
                    const partialMatch = databaseSwitches.find(s => 
                        s.name && (s.name.toLowerCase().includes(device.name.toLowerCase()) || 
                                   device.name.toLowerCase().includes(s.name.toLowerCase()))
                    );
                    if (partialMatch) {
                        switchDbId = partialMatch.id;
                    }
                }
                let switchHtml = generateSwitchPortGrid(device, statusColor, switchDbId);
                content.innerHTML = switchHtml;
            } else {
                content.innerHTML = `
                    <div style="display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 10px;">
                        <span style="width: 8px; height: 8px; border-radius: 50%; background: ${statusColor}; display: inline-block;"></span>
                        <i class="fas ${getDeviceIcon(device.type)}" style="color: ${getDeviceColor(device.type)};"></i>
                        <span style="font-size: 12px; font-weight: 600; color: #2c3e50; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${device.name}</span>
                    </div>
                `;
            }
            
            content.style.pointerEvents = 'all';
            content.style.cursor = 'pointer';
            
            // For switches, handle click differently - check if clicking on the switch name link
            if (device.type === 'switch') {
                content.addEventListener('click', (e) => {
                    // If clicking on a link (switch name), let it navigate
                    const link = e.target.closest('a');
                    if (link) {
                        // Let the link handle navigation naturally
                        return true;
                    }
                    // Otherwise, open device config
                    e.stopPropagation();
                    openDeviceConfig(device.id);
                });
            } else {
                content.addEventListener('click', (e) => {
                    e.stopPropagation();
                    openDeviceConfig(device.id);
                });
            }
        }
    });
}

function getDeviceIcon(type) {
    const icons = {
        'router': 'fa-network-wired',
        'switch': 'fa-sitemap',
        'server': 'fa-server',
        'patch-panel': 'fa-plug'
    };
    return icons[type] || 'fa-server';
}

function getDeviceColor(type) {
    const colors = {
        'router': '#e74c3c',
        'switch': '#3498db',
        'server': '#27ae60',
        'patch-panel': '#f39c12'
    };
    return colors[type] || '#2c3e50';
}

function generateSwitchPortGrid(device, statusColor, deviceIdForModal = null) {
    // Check if this is BDCOM S5828 (24 SFP+ + 4 QSFP ports)
    const isBDCOM5828 = device.model === 'S5828' || device.name.includes('S5828');
    
    // Create device name - make it clickable for all switches
    let deviceNameHtml = device.name;
    
    // Try to find switch ID from database if not provided
    if (!deviceIdForModal && device.type === 'switch' && (device.ip || device.name)) {
        const dbSwitch = databaseSwitches.find(s => 
            (device.ip && s.ip === device.ip) || 
            (device.name && s.name === device.name) ||
            (device.name && s.name && s.name.toLowerCase().includes(device.name.toLowerCase())) ||
            (device.name && s.name && device.name.toLowerCase().includes(s.name.toLowerCase()))
        );
        if (dbSwitch && dbSwitch.id) {
            deviceIdForModal = dbSwitch.id;
        }
    }
    
    // Create link if we have a valid numeric database switch ID
    if (device.type === 'switch' && deviceIdForModal && /^\d+$/.test(String(deviceIdForModal))) {
        const detailUrl = '{{ route("mikrotik.switch.detail", ":id") }}'.replace(':id', deviceIdForModal);
        deviceNameHtml = `<a href="${detailUrl}" target="_blank"
            style="font-size: 6px; font-weight: 600; color: #3498db; text-decoration: underline; cursor: pointer; display: inline-block; z-index: 1000; position: relative; pointer-events: auto;"
            onmouseover="this.style.color='#2980b9'; this.style.textDecoration='underline';" 
            onmouseout="this.style.color='#3498db'; this.style.textDecoration='underline';"
            title="Click to view switch details">${device.name}</a>`;
    } else if (device.type === 'switch') {
        // For "Switch 1", always make it clickable to go to a page
        // Try to find a matching switch first
        const matchingSwitch = databaseSwitches.find(s => 
            s.name && (
                s.name.toLowerCase() === device.name.toLowerCase() ||
                s.name.toLowerCase().includes(device.name.toLowerCase()) ||
                device.name.toLowerCase().includes(s.name.toLowerCase())
            )
        );
        
        if (matchingSwitch && matchingSwitch.id) {
            // Found a match, link to it
            const detailUrl = '{{ route("mikrotik.switch.detail", ":id") }}'.replace(':id', matchingSwitch.id);
            deviceNameHtml = `<a href="${detailUrl}" target="_blank"
                style="font-size: 6px; font-weight: 600; color: #3498db; text-decoration: underline; cursor: pointer; display: inline-block; z-index: 1000; position: relative; pointer-events: auto;"
                onmouseover="this.style.color='#2980b9'; this.style.textDecoration='underline';" 
                onmouseout="this.style.color='#3498db'; this.style.textDecoration='underline';"
                title="Click to view switch details">${device.name}</a>`;
        } else {
            // No match found - for "Switch 1", create a direct link to switches index
            if (device.name && (device.name.toLowerCase() === 'switch 1' || device.name.toLowerCase().includes('switch 1'))) {
                // Link to switches index page - open in new tab
                const switchesUrl = '{{ route("switches.index") }}';
                deviceNameHtml = `<a href="${switchesUrl}" target="_blank"
                    style="font-size: 6px; font-weight: 600; color: #3498db; text-decoration: underline; cursor: pointer; display: inline-block; z-index: 1000; position: relative; pointer-events: auto;"
                    onmouseover="this.style.color='#2980b9'; this.style.textDecoration='underline';" 
                    onmouseout="this.style.color='#3498db'; this.style.textDecoration='underline';"
                    title="Click to view switches">${device.name}</a>`;
            } else {
                // For other switches, make it clickable to search/create
                deviceNameHtml = `<span 
                    onclick="event.stopPropagation(); searchSwitchByName('${device.name}');" 
                    style="font-size: 6px; font-weight: 600; color: #3498db; text-decoration: underline; cursor: pointer; display: inline-block; z-index: 1000; position: relative;"
                    onmouseover="this.style.color='#2980b9';" 
                    onmouseout="this.style.color='#3498db';"
                    title="Click to view switch">${device.name}</span>`;
            }
        }
    }
    
    let html = `
        <div style="width: 100%; padding: 1px; box-sizing: border-box; background: transparent; border: none; border-radius: 0;">
            <div style="display: flex; align-items: center; gap: 2px; margin-bottom: 2px; padding: 0 2px;">
                <span style="width: 3px; height: 3px; border-radius: 50%; background: ${statusColor}; display: inline-block; flex-shrink: 0;"></span>
                ${deviceIdForModal ? deviceNameHtml : `<span style="font-size: 6px; font-weight: 600; color: #2c3e50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${device.name}</span>`}
            </div>
            <div class="switch-port-grid" style="grid-template-columns: ${isBDCOM5828 ? 'repeat(14, 1fr)' : 'repeat(14, 1fr)'};">
    `;
    
    if (isBDCOM5828) {
        // BDCOM S5828: 24 x GE/10GE SFP+ Ports + 4 x 40GE/100GE QSFP Ports
        // Arrange in 2 rows: 14 SFP+ ports per row (28 total, but we have 24 SFP+ and 4 QSFP)
        // Row 1: 12 SFP+ ports + 2 QSFP ports
        const row1Ports = [];
        for (let i = 1; i <= 12; i++) {
            row1Ports.push({ label: `SFP+${i}`, occupied: i <= 2 || i === 6 || i === 10 });
        }
        row1Ports.push({ label: 'QSFP1', occupied: true });
        row1Ports.push({ label: 'QSFP2', occupied: false });
        
        // Row 2: 12 SFP+ ports + 2 QSFP ports
        const row2Ports = [];
        for (let i = 13; i <= 24; i++) {
            row2Ports.push({ label: `SFP+${i}`, occupied: i === 13 || i === 18 || i === 22 });
        }
        row2Ports.push({ label: 'QSFP3', occupied: true });
        row2Ports.push({ label: 'QSFP4', occupied: false });
        
        // Add all ports
        row1Ports.forEach(port => {
            const portClass = port.occupied ? 'occupied' : 'empty';
            html += `<div class="port-square ${portClass}" title="${port.label}"><div class="port-label">${port.label}</div></div>`;
        });
        
        row2Ports.forEach(port => {
            const portClass = port.occupied ? 'occupied' : 'empty';
            html += `<div class="port-square ${portClass}" title="${port.label}"><div class="port-label">${port.label}</div></div>`;
        });
    } else {
        // Default port layout for other switches
        const row1Ports = [
            { label: 'tg0/2', occupied: true }, { label: 'tg0/4', occupied: false }, 
            { label: 'tg0/6', occupied: false }, { label: 'tg0/8', occupied: false },
            { label: 'tg0/10', occupied: false }, { label: 'tg0/12', occupied: false }, 
            { label: 'tg0/14', occupied: true }, { label: 'tg0/16', occupied: false },
            { label: 'tg0/18', occupied: false }, { label: 'tg0/20', occupied: false }, 
            { label: 'tg0/22', occupied: true }, { label: 'tg0/24', occupied: false },
            { label: 'cg0/2', occupied: true }, { label: 'cg0/4', occupied: true }
        ];
        
        const row2Ports = [
            { label: 'tg0/1', occupied: true }, { label: 'tg0/3', occupied: false }, 
            { label: 'tg0/5', occupied: false }, { label: 'tg0/7', occupied: false },
            { label: 'tg0/9', occupied: false }, { label: 'tg0/11', occupied: false }, 
            { label: 'tg0/13', occupied: false }, { label: 'tg0/15', occupied: false },
            { label: 'tg0/17', occupied: false }, { label: 'tg0/19', occupied: false }, 
            { label: 'tg0/21', occupied: false }, { label: 'tg0/23', occupied: false },
            { label: 'cg0/1', occupied: false }, { label: 'cg0/3', occupied: true }
        ];
        
        row1Ports.forEach(port => {
            const portClass = port.occupied ? 'occupied' : 'empty';
            html += `<div class="port-square ${portClass}" title="${port.label}"><div class="port-label">${port.label}</div></div>`;
        });
        
        row2Ports.forEach(port => {
            const portClass = port.occupied ? 'occupied' : 'empty';
            html += `<div class="port-square ${portClass}" title="${port.label}"><div class="port-label">${port.label}</div></div>`;
        });
    }
    
    html += `
            </div>
        </div>
    `;
    
    return html;
}

function handleUnitClick(e) {
    const unit = e.currentTarget;
    const deviceId = unit.querySelector('[data-device-id]')?.dataset.deviceId;
    if (deviceId) {
        openDeviceConfig(deviceId);
    }
}

function openDeviceConfig(deviceId) {
    const device = Object.values(rackDevices).find(d => d.id === deviceId);
    if (!device) return;
    
    document.getElementById('configDeviceId').value = deviceId;
    document.getElementById('deviceName').value = device.name || '';
    document.getElementById('deviceModel').value = device.model || '';
    document.getElementById('deviceIP').value = device.ip || '';
    document.getElementById('deviceStatus').value = device.status || 'online';
    document.getElementById('deviceNotes').value = device.notes || '';
    
    document.getElementById('configPanel').style.display = 'block';
    document.getElementById('configPanel').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function saveDeviceConfig() {
    const deviceId = document.getElementById('configDeviceId').value;
    if (!deviceId) return;
    
    const device = Object.values(rackDevices).find(d => d.id === deviceId);
    if (!device) return;
    
    device.name = document.getElementById('deviceName').value || device.name;
    device.model = document.getElementById('deviceModel').value;
    device.ip = document.getElementById('deviceIP').value;
    device.status = document.getElementById('deviceStatus').value;
    device.notes = document.getElementById('deviceNotes').value;
    
    // Update all units with this device
    Object.keys(rackDevices).forEach(unitNum => {
        if (rackDevices[unitNum].id === deviceId) {
            rackDevices[unitNum] = { ...device };
        }
    });
    
    renderRack();
    
    Swal.fire({
        icon: 'success',
        title: 'Saved!',
        text: 'Device configuration saved successfully.',
        timer: 1500,
        showConfirmButton: false
    });
}

function removeDevice() {
    const deviceId = document.getElementById('configDeviceId').value;
    if (!deviceId) return;
    
    Swal.fire({
        title: 'Remove Device?',
        text: 'Are you sure you want to remove this device from the rack?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, remove it!'
    }).then((result) => {
        if (result.isConfirmed) {
            // Get device info before removing
            const device = Object.values(rackDevices).find(d => d.id === deviceId);
            
            // Remove device from all units
            Object.keys(rackDevices).forEach(unitNum => {
                if (rackDevices[unitNum].id === deviceId) {
                    delete rackDevices[unitNum];
                }
            });
            
            // Show hidden units if it was a multi-U device
            if (device && device.height > 1) {
                for (let i = 1; i < device.height; i++) {
                    const belowUnit = document.querySelector(`[data-unit-number="${device.startUnit - i}"]`);
                    if (belowUnit) {
                        belowUnit.style.display = 'block';
                    }
                }
            }
            
            renderRack();
            document.getElementById('configPanel').style.display = 'none';
            
            Swal.fire({
                icon: 'success',
                title: 'Removed!',
                text: 'Device has been removed from the rack.',
                timer: 1500,
                showConfirmButton: false
            });
        }
    });
}

function clearRack() {
    Swal.fire({
        title: 'Clear Entire Rack?',
        text: 'This will remove all devices from the rack. This action cannot be undone!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, clear it!'
    }).then((result) => {
        if (result.isConfirmed) {
            rackDevices = {};
            
            // Show all units
            document.querySelectorAll('.rack-unit-overlay').forEach(unit => {
                unit.style.display = 'block';
                unit.style.height = '40px';
            });
            
            renderRack();
            document.getElementById('configPanel').style.display = 'none';
            
            Swal.fire({
                icon: 'success',
                title: 'Cleared!',
                text: 'Rack has been cleared.',
                timer: 1500,
                showConfirmButton: false
            });
        }
    });
}

function saveRack() {
    const config = {
        devices: Object.values(rackDevices).filter((device, index, self) => 
            index === self.findIndex(d => d.id === device.id)
        ),
        timestamp: new Date().toISOString()
    };
    
    // Save to localStorage
    localStorage.setItem('rackConfiguration', JSON.stringify(config));
    
    // Optionally save to server via AJAX
    fetch('{{ route("mikrotik.rack") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(config)
    }).then(response => {
        if (response.ok) {
            Swal.fire({
                icon: 'success',
                title: 'Saved!',
                text: 'Rack configuration saved successfully.',
                timer: 2000,
                showConfirmButton: false
            });
        }
    }).catch(error => {
        console.error('Error saving rack:', error);
        Swal.fire({
            icon: 'success',
            title: 'Saved Locally!',
            text: 'Configuration saved to browser storage.',
            timer: 2000,
            showConfirmButton: false
        });
    });
}

function loadRackConfiguration() {
    // Load from localStorage
    const saved = localStorage.getItem('rackConfiguration');
    if (saved) {
        try {
            const config = JSON.parse(saved);
            if (config.devices && config.devices.length > 0) {
                rackDevices = {};
                config.devices.forEach(device => {
                    for (let i = 0; i < device.height; i++) {
                        const unitNum = device.startUnit - i;
                        rackDevices[unitNum] = { ...device };
                    }
                });
                renderRack();
                return;
            }
        } catch (e) {
            console.error('Error loading rack configuration:', e);
        }
    }
    
    // If no saved configuration or empty, add default switches
    // BDCOM S5828 at U41 and another switch at U42
    if (Object.keys(rackDevices).length === 0) {
        // Add BDCOM S5828 at U41
        deviceCounter = 0; // Will be incremented to 1 in addDeviceToRack
        addDeviceToRack(41, 'switch', 1, false);
        const bdcomSwitch = rackDevices[41];
        if (bdcomSwitch) {
            bdcomSwitch.name = 'BDCOM S5828';
            bdcomSwitch.model = 'S5828';
            bdcomSwitch.status = 'online';
            Object.keys(rackDevices).forEach(unitNum => {
                if (rackDevices[unitNum].id === bdcomSwitch.id) {
                    rackDevices[unitNum] = { ...bdcomSwitch };
                }
            });
        }
        
        // Add another switch at U42
        // deviceCounter is now 1, will be incremented to 2 in addDeviceToRack
        addDeviceToRack(42, 'switch', 1, false);
        const switchDevice = rackDevices[42];
        if (switchDevice) {
            switchDevice.name = 'Switch 1';
            switchDevice.model = 'CRS326';
            switchDevice.status = 'online';
            // Try to find matching switch in database
            const dbSwitch = databaseSwitches.find(s => 
                s.name && (s.name.toLowerCase() === 'switch 1' || s.name.toLowerCase().includes('switch 1') || 'switch 1'.includes(s.name.toLowerCase()))
            );
            if (dbSwitch && dbSwitch.id) {
                switchDevice.switch_db_id = dbSwitch.id;
            }
            Object.keys(rackDevices).forEach(unitNum => {
                if (rackDevices[unitNum].id === switchDevice.id) {
                    rackDevices[unitNum] = { ...switchDevice };
                }
            });
        }
        
        renderRack();
    }
}

function zoomIn() {
    if (currentZoom < maxZoom) {
        currentZoom = Math.min(currentZoom + zoomStep, maxZoom);
        applyZoom();
    }
}

function zoomOut() {
    if (currentZoom > minZoom) {
        currentZoom = Math.max(currentZoom - zoomStep, minZoom);
        applyZoom();
    }
}

function resetZoom() {
    currentZoom = 1;
    applyZoom();
}

function applyZoom() {
    const container = document.getElementById('rackContainer');
    if (container) {
        container.style.transform = `scale(${currentZoom})`;
    }
}

function openBDCOM5828Modal(deviceId) {
    const device = Object.values(rackDevices).find(d => d.id === deviceId);
    if (!device) return;
    
    // Generate port grid for modal
    generateModalPortGrid(device);
    
    // Show modal (Bootstrap 4)
    $('#bdcomS5828Modal').modal('show');
}

function generateModalPortGrid(device) {
    const container = document.getElementById('switchPortGridDetail');
    let html = '';
    
    // Row 1: 12 SFP+ ports + 2 QSFP ports
    const row1Ports = [];
    for (let i = 1; i <= 12; i++) {
        row1Ports.push({ label: `SFP+${i}`, occupied: i <= 2 || i === 6 || i === 10, type: 'SFP+' });
    }
    row1Ports.push({ label: 'QSFP1', occupied: true, type: 'QSFP' });
    row1Ports.push({ label: 'QSFP2', occupied: false, type: 'QSFP' });
    
    // Row 2: 12 SFP+ ports + 2 QSFP ports
    const row2Ports = [];
    for (let i = 13; i <= 24; i++) {
        row2Ports.push({ label: `SFP+${i}`, occupied: i === 13 || i === 18 || i === 22, type: 'SFP+' });
    }
    row2Ports.push({ label: 'QSFP3', occupied: true, type: 'QSFP' });
    row2Ports.push({ label: 'QSFP4', occupied: false, type: 'QSFP' });
    
    // Add all ports
    row1Ports.forEach(port => {
        const portClass = port.occupied ? 'occupied' : 'empty';
        html += `<div class="port-square-detail ${portClass}" onclick="showConnectionDiagram('${port.label}', '${port.type}', ${port.occupied})" title="Click to view connection">
            <div class="port-label-detail">${port.label}</div>
        </div>`;
    });
    
    row2Ports.forEach(port => {
        const portClass = port.occupied ? 'occupied' : 'empty';
        html += `<div class="port-square-detail ${portClass}" onclick="showConnectionDiagram('${port.label}', '${port.type}', ${port.occupied})" title="Click to view connection">
            <div class="port-label-detail">${port.label}</div>
        </div>`;
    });
    
    container.innerHTML = html;
}

function searchSwitchByName(switchName) {
    // Try to find switch in database
    const dbSwitch = databaseSwitches.find(s => 
        (s.name && s.name.toLowerCase().includes(switchName.toLowerCase())) ||
        (switchName.toLowerCase().includes(s.name && s.name.toLowerCase()))
    );
    
    if (dbSwitch && dbSwitch.id) {
        const detailUrl = '{{ route("mikrotik.switch.detail", ":id") }}'.replace(':id', dbSwitch.id);
        window.location.href = detailUrl;
    } else {
        // For "Switch 1", try to find by exact name match or create a link anyway
        if (switchName.toLowerCase() === 'switch 1' || switchName.toLowerCase().includes('switch 1')) {
            // Try to find any switch with "switch" in the name
            const anySwitch = databaseSwitches.find(s => 
                s.name && s.name.toLowerCase().includes('switch')
            );
            if (anySwitch && anySwitch.id) {
                const detailUrl = '{{ route("mikrotik.switch.detail", ":id") }}'.replace(':id', anySwitch.id);
                window.location.href = detailUrl;
                return;
            }
        }
        
        // If still not found, show message with option to create
        Swal.fire({
            icon: 'info',
            title: 'Switch Not Found',
            text: `Switch "${switchName}" not found in database. Would you like to create it?`,
            showCancelButton: true,
            confirmButtonText: 'Create Switch',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // Redirect to switch create page
                window.location.href = '{{ route("switches.create") }}?name=' + encodeURIComponent(switchName);
            }
        });
    }
}

function showConnectionDiagram(portLabel, portType, isOccupied) {
    const diagramDiv = document.getElementById('connectionDiagram');
    const diagramContent = document.getElementById('connectionDiagramContent');
    
    if (!isOccupied) {
        diagramContent.innerHTML = `
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                <strong>${portLabel}</strong> is not connected. This port is available for connection.
            </div>
        `;
        diagramDiv.style.display = 'block';
        return;
    }
    
    // Generate connection diagram
    const connectionType = portType === 'QSFP' ? '100G' : '10G';
    const connectedDevice = portLabel.includes('1') || portLabel.includes('6') || portLabel.includes('10') || portLabel.includes('13') || portLabel.includes('18') || portLabel.includes('22') || portLabel === 'QSFP1' || portLabel === 'QSFP3' 
        ? 'Server-01' 
        : 'Router-01';
    
    diagramContent.innerHTML = `
        <div class="connection-diagram">
            <div class="row">
                <div class="col-md-5 text-center">
                    <div class="device-box" style="background: #3498db; color: white; padding: 15px; border-radius: 8px; margin-bottom: 10px;">
                        <i class="fas fa-server fa-2x mb-2"></i>
                        <div><strong>${connectedDevice}</strong></div>
                        <small>IP: 192.168.1.${Math.floor(Math.random() * 254) + 1}</small>
                    </div>
                </div>
                <div class="col-md-2 text-center d-flex align-items-center justify-content-center">
                    <div style="width: 100%; height: 3px; background: #27ae60; position: relative;">
                        <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: white; padding: 5px; border-radius: 50%; border: 2px solid #27ae60;">
                            <i class="fas fa-link" style="color: #27ae60; font-size: 12px;"></i>
                        </div>
                    </div>
                    <div style="position: absolute; top: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: #27ae60; font-weight: bold;">
                        ${connectionType} Link
                    </div>
                </div>
                <div class="col-md-5 text-center">
                    <div class="device-box" style="background: #2c3e50; color: white; padding: 15px; border-radius: 8px; margin-bottom: 10px;">
                        <i class="fas fa-sitemap fa-2x mb-2"></i>
                        <div><strong>BDCOM S5828</strong></div>
                        <small>Port: ${portLabel}</small>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <table class="table table-sm table-bordered">
                    <tr>
                        <td><strong>Port</strong></td>
                        <td>${portLabel}</td>
                    </tr>
                    <tr>
                        <td><strong>Type</strong></td>
                        <td>${portType === 'QSFP' ? '40GE/100GE QSFP' : 'GE/10GE SFP+'}</td>
                    </tr>
                    <tr>
                        <td><strong>Status</strong></td>
                        <td><span class="badge bg-success">Connected</span></td>
                    </tr>
                    <tr>
                        <td><strong>Connected To</strong></td>
                        <td>${connectedDevice}</td>
                    </tr>
                    <tr>
                        <td><strong>Link Speed</strong></td>
                        <td>${connectionType}</td>
                    </tr>
                    <tr>
                        <td><strong>Link Status</strong></td>
                        <td><span class="badge bg-success">Up</span></td>
                    </tr>
                </table>
            </div>
        </div>
    `;
    
    diagramDiv.style.display = 'block';
    diagramDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
</script>
@endsection