@extends('layouts.app')

@section('title', 'Device Details')
@section('page-title', 'Device Details')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3">{{ $ispDevice->device_name ?? 'Device #' . $ispDevice->device_id }}</h1>
            <a href="{{ route('reseller.isp.devices.edit', $ispDevice->device_id) }}" class="btn btn-warning">Edit</a>
            <a href="{{ route('reseller.isp.devices.index') }}" class="btn btn-secondary">Back</a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-body">
                    <h5>Device Information</h5>
                    <table class="table">
                        <tr><th>ID:</th><td>{{ $ispDevice->device_id }}</td></tr>
                        <tr><th>Name:</th><td>{{ $ispDevice->device_name ?? '-' }}</td></tr>
                        <tr><th>Type:</th><td><span class="badge badge-info">{{ $ispDevice->device_type ?? '-' }}</span></td></tr>
                        <tr><th>Site:</th><td>{{ $ispDevice->site->site_name ?? '-' }}</td></tr>
                        <tr><th>IP:</th><td>{{ $ispDevice->ip_address ?? '-' }}</td></tr>
                        <tr><th>MAC:</th><td>{{ $ispDevice->mac_address ?? '-' }}</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-body">
                    <h5>Interfaces ({{ $ispDevice->interfaces->count() }})</h5>
                    @if($ispDevice->interfaces->count() > 0)
                        <table class="table table-sm">
                            <thead><tr><th>Name</th><th>Type</th><th>Status</th></tr></thead>
                            <tbody>
                                @foreach($ispDevice->interfaces as $interface)
                                <tr>
                                    <td>{{ $interface->interface_name }}</td>
                                    <td>{{ $interface->interface_type }}</td>
                                    <td><span class="badge badge-{{ $interface->status == 'up' ? 'success' : ($interface->status == 'down' ? 'danger' : 'secondary') }}">{{ $interface->status }}</span></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <p class="text-muted">No interfaces</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <h5 class="m-0">Ports ({{ $ispDevice->ports->count() }})</h5>
                </div>
                <div class="card-body">
                    <!-- Switch Image -->
                    @if($ispDevice->device_type == 'Switch' || $ispDevice->ports->count() > 0)
                    <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="width: 100%; margin: 0 auto;">
                                <div style="background: linear-gradient(to bottom, #2c2c2c 0%, #1a1a1a 100%); border: 2px solid #000; border-radius: 4px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.3);">
                                    <div style="background: #1a1a1a; padding: 15px; border-bottom: 2px solid #000; position: relative;">
                                        <div style="height: 5px; background: #8b4513; width: 60%; margin: 0 auto; border-radius: 2px;"></div>
                                        <div style="position: absolute; right: 10px; top: 10px; color: white; font-size: 14px; font-weight: bold;">{{ strtoupper(substr($ispDevice->device_name ?? 'SWITCH', 0, 5)) }}</div>
                                    </div>
                                    <div style="background: linear-gradient(to bottom, #e8e8e8 0%, #d0d0d0 100%); padding: 20px;">
                                        @php
                                            // Port type colors - more vibrant and distinct
                                            $portTypeColors = [
                                                'GigabitEthernet' => '#0066ff',
                                                'FastEthernet' => '#9933ff',
                                                'SFP' => '#ff3333',
                                                'SFP+' => '#ff6600',
                                                'QSFP' => '#ffcc00',
                                                'QSFP+' => '#00cccc',
                                                'XFP' => '#666666',
                                                'Combo Ports' => '#00cc99',
                                                '1G/10G' => '#00ff66',
                                                '40G/100G' => '#cc0000',
                                                '1G/10G/25G' => '#cc00cc',
                                                '400G' => '#ff3300',
                                                'Other' => '#999999',
                                            ];
                                            
                                            // Port type sizes - larger for higher capacity ports
                                            $portTypeSizes = [
                                                'GigabitEthernet' => ['padding' => '6px', 'minHeight' => '18px', 'borderWidth' => '2px'],
                                                'FastEthernet' => ['padding' => '5px', 'minHeight' => '16px', 'borderWidth' => '2px'],
                                                'SFP' => ['padding' => '7px', 'minHeight' => '20px', 'borderWidth' => '2.5px'],
                                                'SFP+' => ['padding' => '8px', 'minHeight' => '22px', 'borderWidth' => '3px'],
                                                'QSFP' => ['padding' => '9px', 'minHeight' => '24px', 'borderWidth' => '3px'],
                                                'QSFP+' => ['padding' => '10px', 'minHeight' => '26px', 'borderWidth' => '3.5px'],
                                                'XFP' => ['padding' => '7px', 'minHeight' => '20px', 'borderWidth' => '2.5px'],
                                                'Combo Ports' => ['padding' => '8px', 'minHeight' => '22px', 'borderWidth' => '3px'],
                                                '1G/10G' => ['padding' => '7px', 'minHeight' => '20px', 'borderWidth' => '2.5px'],
                                                '40G/100G' => ['padding' => '10px', 'minHeight' => '26px', 'borderWidth' => '3.5px'],
                                                '1G/10G/25G' => ['padding' => '8px', 'minHeight' => '22px', 'borderWidth' => '3px'],
                                                '400G' => ['padding' => '12px', 'minHeight' => '30px', 'borderWidth' => '4px'],
                                                'Other' => ['padding' => '6px', 'minHeight' => '18px', 'borderWidth' => '2px'],
                                            ];
                                            
                                            // Group ports by port_type
                                            $portsByType = $ispDevice->ports->groupBy('port_type');
                                        @endphp
                                        
                                        <!-- All Port Type Blocks in One Line -->
                                        @php
                                            $totalBlocks = $portsByType->count();
                                        @endphp
                                        <div style="display: grid; grid-template-columns: repeat({{ $totalBlocks }}, 1fr); gap: 15px; width: 100%;">
                                            @foreach($portsByType as $portType => $typePorts)
                                                @php
                                                    $typeLabel = $portType ?: 'Unspecified';
                                                    $typeColor = $portTypeColors[$portType] ?? '#999999';
                                                    $portSize = $portTypeSizes[$portType] ?? ['padding' => '6px', 'minHeight' => '18px', 'borderWidth' => '2px'];
                                                    $typePortsArray = $typePorts->values()->all();
                                                    $portsPerRowForType = ceil(count($typePortsArray) / 2);
                                                    $row1TypePorts = array_slice($typePortsArray, 0, $portsPerRowForType);
                                                    $row2TypePorts = array_slice($typePortsArray, $portsPerRowForType);
                                                @endphp
                                                
                                                <!-- Port Type Block: {{ $typeLabel }} -->
                                                <div style="width: 100%; padding: 12px; background: rgba(255,255,255,0.5); border-left: 5px solid {{ $typeColor }}; border-radius: 5px;">
                                                    <div style="font-size: 12px; font-weight: bold; color: #333; margin-bottom: 10px; text-transform: uppercase; display: flex; align-items: center;">
                                                        <span style="display: inline-block; width: 12px; height: 12px; background: {{ $typeColor }}; border-radius: 2px; margin-right: 8px;"></span>
                                                        {{ $typeLabel }} ({{ count($typePortsArray) }})
                                                    </div>
                                                    
                                                    <!-- Row 1 for this type -->
                                                    <div style="display: grid; grid-template-columns: repeat({{ $portsPerRowForType }}, 1fr); gap: 8px; margin-bottom: 8px;">
                                                        @foreach($row1TypePorts as $port)
                                                            <div style="background: #1a1a1a; border: {{ $portSize['borderWidth'] }} solid {{ $typeColor }}; border-radius: 3px; padding: {{ $portSize['padding'] }}; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.3);">
                                                                @if($port->status == 'active' || $port->status == 'used')
                                                                    <div style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 10px; height: 8px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 8px #00ff00;"></div>
                                                                @endif
                                                                <div style="background: {{ $port->status == 'active' || $port->status == 'used' ? '#27ae60' : '#2c2c2c' }}; border: 0.5px solid {{ $port->status == 'active' || $port->status == 'used' ? '#1e8449' : '#000' }}; min-height: {{ $portSize['minHeight'] }}; border-radius: 3px;" title="{{ $port->port_name ?? $port->port_number ?? 'Port' }} - {{ $typeLabel }} - {{ ucfirst($port->status) }}"></div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                    
                                                    <!-- Row 2 for this type -->
                                                    @if(count($row2TypePorts) > 0)
                                                    <div style="display: grid; grid-template-columns: repeat({{ $portsPerRowForType }}, 1fr); gap: 8px;">
                                                        @foreach($row2TypePorts as $port)
                                                            <div style="background: #1a1a1a; border: {{ $portSize['borderWidth'] }} solid {{ $typeColor }}; border-radius: 3px; padding: {{ $portSize['padding'] }}; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.3);">
                                                                @if($port->status == 'active' || $port->status == 'used')
                                                                    <div style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 10px; height: 8px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 8px #00ff00;"></div>
                                                                @endif
                                                                <div style="background: {{ $port->status == 'active' || $port->status == 'used' ? '#27ae60' : '#2c2c2c' }}; border: 0.5px solid {{ $port->status == 'active' || $port->status == 'used' ? '#1e8449' : '#000' }}; min-height: {{ $portSize['minHeight'] }}; border-radius: 3px;" title="{{ $port->port_name ?? $port->port_number ?? 'Port' }} - {{ $typeLabel }} - {{ ucfirst($port->status) }}"></div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div style="background: #f0f0f0; border: 1px solid #ccc; border-radius: 2px; padding: 10px; margin-top: 10px; text-align: center; font-size: 14px; font-weight: bold; color: #333;">
                                        {{ $ispDevice->device_name ?? 'Switch' }} - {{ $ispDevice->ports->count() }} Ports
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @if($ispDevice->ports->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Port Name</th>
                                        <th>Port Number</th>
                                        <th>Port Type</th>
                                        <th>Port Capacity</th>
                                        <th>Status</th>
                                        <th>Description</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($ispDevice->ports as $port)
                                    <tr>
                                        <td>{{ $port->port_name ?? '-' }}</td>
                                        <td>{{ $port->port_number ?? '-' }}</td>
                                        <td><span class="badge badge-info">{{ $port->port_type ?? '-' }}</span></td>
                                        <td>{{ $port->port_capacity ?? '-' }}</td>
                                        <td>
                                            <span class="badge badge-{{ $port->status == 'active' ? 'success' : ($port->status == 'used' ? 'warning' : ($port->status == 'inactive' ? 'danger' : 'secondary')) }}">
                                                {{ ucfirst($port->status) }}
                                            </span>
                                        </td>
                                        <td>{{ $port->description ?? '-' }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editPortModal{{ $port->port_id }}" title="Edit Port">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-muted">No ports configured</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Function to update Port Capacity options based on Port Type
    function updatePortCapacityOptionsModal(selectElement, portType, selectedValue = '') {
        const capacityOptions = {
            '1G/10G': ['1G', '10G'],
            '40G/100G': ['40G', '100G'],
            '1G/10G/25G': ['1G', '10G', '25G'],
            '400G': ['400G']
        };

        // Clear existing options
        selectElement.innerHTML = '<option value="">Select Capacity</option>';

        if (portType && capacityOptions[portType]) {
            capacityOptions[portType].forEach(capacity => {
                const option = document.createElement('option');
                option.value = capacity;
                option.textContent = capacity;
                if (selectedValue && capacity === selectedValue) {
                    option.selected = true;
                }
                selectElement.appendChild(option);
            });
        } else if (selectedValue) {
            // If port type doesn't have predefined options but has a value, add it
            const option = document.createElement('option');
            option.value = selectedValue;
            option.textContent = selectedValue;
            option.selected = true;
            selectElement.appendChild(option);
        }
    }

    // Initialize Port Capacity for modals on page load
    document.addEventListener('DOMContentLoaded', function() {
        @foreach($ispDevice->ports as $port)
            const portTypeSelect{{ $port->port_id }} = document.getElementById('port_type{{ $port->port_id }}');
            const capacitySelect{{ $port->port_id }} = document.getElementById('port_capacity{{ $port->port_id }}');
            const currentCapacity{{ $port->port_id }} = '{{ $port->port_capacity }}';
            
            if (portTypeSelect{{ $port->port_id }} && capacitySelect{{ $port->port_id }}) {
                // Initialize with current values
                updatePortCapacityOptionsModal(capacitySelect{{ $port->port_id }}, portTypeSelect{{ $port->port_id }}.value, currentCapacity{{ $port->port_id }});
                
                // Add change event listener
                portTypeSelect{{ $port->port_id }}.addEventListener('change', function() {
                    updatePortCapacityOptionsModal(capacitySelect{{ $port->port_id }}, this.value);
                });
            }
        @endforeach
    });
</script>
@endpush

<!-- Edit Port Modals -->
@foreach($ispDevice->ports as $port)
<div class="modal fade" id="editPortModal{{ $port->port_id }}" tabindex="-1" role="dialog" aria-labelledby="editPortModalLabel{{ $port->port_id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="editPortModalLabel{{ $port->port_id }}">
                    <i class="fas fa-edit mr-2"></i>Edit Port
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('reseller.isp.devices.ports.update', $port->port_id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="port_name{{ $port->port_id }}" class="form-label">Port Name</label>
                            <input type="text" class="form-control" id="port_name{{ $port->port_id }}" name="port_name" 
                                   value="{{ $port->port_name }}" placeholder="e.g., GigabitEthernet0/1">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="port_number{{ $port->port_id }}" class="form-label">Port Number</label>
                            <input type="text" class="form-control" id="port_number{{ $port->port_id }}" name="port_number" 
                                   value="{{ $port->port_number }}" placeholder="e.g., 1">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="port_type{{ $port->port_id }}" class="form-label">Port Type</label>
                            <select class="form-control" id="port_type{{ $port->port_id }}" name="port_type">
                                <option value="">Select Type</option>
                                <option value="GigabitEthernet" {{ $port->port_type == 'GigabitEthernet' ? 'selected' : '' }}>GigabitEthernet</option>
                                <option value="FastEthernet" {{ $port->port_type == 'FastEthernet' ? 'selected' : '' }}>FastEthernet</option>
                                <option value="SFP" {{ $port->port_type == 'SFP' ? 'selected' : '' }}>SFP</option>
                                <option value="SFP+" {{ $port->port_type == 'SFP+' ? 'selected' : '' }}>SFP+</option>
                                <option value="QSFP" {{ $port->port_type == 'QSFP' ? 'selected' : '' }}>QSFP</option>
                                <option value="QSFP+" {{ $port->port_type == 'QSFP+' ? 'selected' : '' }}>QSFP+</option>
                                <option value="XFP" {{ $port->port_type == 'XFP' ? 'selected' : '' }}>XFP</option>
                                <option value="Combo Ports" {{ $port->port_type == 'Combo Ports' ? 'selected' : '' }}>Combo Ports</option>
                                <option value="1G/10G" {{ $port->port_type == '1G/10G' ? 'selected' : '' }}>1G/10G</option>
                                <option value="40G/100G" {{ $port->port_type == '40G/100G' ? 'selected' : '' }}>40G/100G</option>
                                <option value="1G/10G/25G" {{ $port->port_type == '1G/10G/25G' ? 'selected' : '' }}>1G/10G/25G</option>
                                <option value="400G" {{ $port->port_type == '400G' ? 'selected' : '' }}>400G</option>
                                <option value="Other" {{ $port->port_type == 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="port_capacity{{ $port->port_id }}" class="form-label">Port Capacity</label>
                            <select class="form-control port-capacity-select-modal" id="port_capacity{{ $port->port_id }}" name="port_capacity" data-port-type-id="{{ $port->port_id }}">
                                <option value="">Select Capacity</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="status{{ $port->port_id }}" class="form-label">Status</label>
                            <select class="form-control" id="status{{ $port->port_id }}" name="status">
                                <option value="available" {{ $port->status == 'available' ? 'selected' : '' }}>Available</option>
                                <option value="active" {{ $port->status == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="used" {{ $port->status == 'used' ? 'selected' : '' }}>Used</option>
                                <option value="inactive" {{ $port->status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="description{{ $port->port_id }}" class="form-label">Description</label>
                            <textarea class="form-control" id="description{{ $port->port_id }}" name="description" rows="3" 
                                      placeholder="Optional description">{{ $port->description }}</textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-1"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i>Update Port
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach
@endsection