@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3">Create Device</h1>
            <a href="{{ route('reseller.isp.devices.index') }}" class="btn btn-secondary">Back</a>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <form action="{{ route('reseller.isp.devices.store') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Site <span class="text-danger">*</span></label>
                                <select name="site_id" class="form-control" required>
                                    <option value="">Select Site</option>
                                    @foreach($sites as $site)
                                        <option value="{{ $site->site_id }}">{{ $site->site_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Device Name</label>
                                <input type="text" name="device_name" class="form-control" maxlength="100">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Device Type</label>
                                <select name="device_type" class="form-control">
                                    <option value="">Select Type</option>
                                    <option value="Router">Router</option>
                                    <option value="Switch">Switch</option>
                                    <option value="OLT">OLT</option>
                                    <option value="ONT">ONT</option>
                                    <option value="Reseller Router">Reseller Router</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">IP Address</label>
                                <input type="text" name="ip_address" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">MAC Address</label>
                                <input type="text" name="mac_address" class="form-control" placeholder="XX:XX:XX:XX:XX:XX">
                            </div>
                        </div>

                        <!-- Ports Section -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="card shadow">
                                    <div class="card-header bg-success text-white">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h6 class="m-0 font-weight-bold">Ports</h6>
                                            <div>
                                                <button type="button" class="btn btn-sm btn-light" id="addPortRangeBtn">
                                                    <i class="fas fa-layer-group mr-1"></i>Add Port Range
                                                </button>
                                                <button type="button" class="btn btn-sm btn-light ml-2" id="addPortBtn">
                                                    <i class="fas fa-plus mr-1"></i>Add Single Port
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <!-- Port Range Input -->
                                        <div class="card bg-light mb-3">
                                            <div class="card-body">
                                                <h6 class="mb-3">Add Port Range</h6>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group mb-0">
                                                            <label for="port_range">Port Range <small class="text-muted">(e.g., 1-24 or 1,2,3,5)</small></label>
                                                            <input type="text" id="port_range" class="form-control" 
                                                                   placeholder="Enter port range (e.g., 1-24)">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group mb-0">
                                                            <label for="port_range_type">Port Type</label>
                                                            <select id="port_range_type" class="form-control">
                                                                <option value="">Select Type</option>
                                                                <option value="GigabitEthernet">GigabitEthernet</option>
                                                                <option value="FastEthernet">FastEthernet</option>
                                                                <option value="SFP">SFP</option>
                                                                <option value="SFP+">SFP+</option>
                                                                <option value="QSFP">QSFP</option>
                                                                <option value="QSFP+">QSFP+</option>
                                                                <option value="XFP">XFP</option>
                                                                <option value="Combo Ports">Combo Ports</option>
                                                                <option value="1G/10G">1G/10G</option>
                                                                <option value="40G/100G">40G/100G</option>
                                                                <option value="1G/10G/25G">1G/10G/25G</option>
                                                                <option value="400G">400G</option>
                                                                <option value="Other">Other</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group mb-0">
                                                            <label for="port_range_capacity">Port Capacity</label>
                                                            <select id="port_range_capacity" class="form-control">
                                                                <option value="">Select Capacity</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <div class="form-group mb-0">
                                                            <label>&nbsp;</label>
                                                            <button type="button" class="btn btn-primary btn-block" id="processPortRangeBtn">
                                                                <i class="fas fa-check mr-1"></i>Process Range
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <small class="form-text text-muted">Enter range like 1-24 or comma-separated values like 1,2,3,5. Port Type and Capacity will be applied to all ports.</small>
                                            </div>
                                        </div>

                                        <div id="portsContainer">
                                            <!-- Port fields will be added here dynamically -->
                                        </div>
                                        @error('ports.*')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save mr-2"></i>Save Device
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    let portIndex = 0;

    // Function to add a port row
    function addPortRow(portName = '', portNumber = '', portType = '', portCapacity = '', status = 'available', description = '') {
        const container = document.getElementById('portsContainer');
        const portRow = document.createElement('div');
        portRow.className = 'port-row border rounded p-3 mb-2';
        portRow.setAttribute('data-index', portIndex);
        
        portRow.innerHTML = `
            <div class="row align-items-center">
                <div class="col-md-1">
                    <label class="mb-0 font-weight-bold text-primary">Port ${portIndex + 1}</label>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="mb-0">Port Name</label>
                        <input type="text" name="ports[${portIndex}][port_name]" 
                               class="form-control form-control-sm" value="${portName}" placeholder="e.g., GigabitEthernet0/1">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="mb-0">Port Number</label>
                        <input type="text" name="ports[${portIndex}][port_number]" 
                               class="form-control form-control-sm" value="${portNumber}" placeholder="e.g., 1">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="mb-0">Port Type</label>
                        <select name="ports[${portIndex}][port_type]" class="form-control form-control-sm">
                            <option value="">Select Type</option>
                            <option value="GigabitEthernet" ${portType === 'GigabitEthernet' ? 'selected' : ''}>GigabitEthernet</option>
                            <option value="FastEthernet" ${portType === 'FastEthernet' ? 'selected' : ''}>FastEthernet</option>
                            <option value="SFP" ${portType === 'SFP' ? 'selected' : ''}>SFP</option>
                            <option value="SFP+" ${portType === 'SFP+' ? 'selected' : ''}>SFP+</option>
                            <option value="QSFP" ${portType === 'QSFP' ? 'selected' : ''}>QSFP</option>
                            <option value="QSFP+" ${portType === 'QSFP+' ? 'selected' : ''}>QSFP+</option>
                            <option value="XFP" ${portType === 'XFP' ? 'selected' : ''}>XFP</option>
                            <option value="Combo Ports" ${portType === 'Combo Ports' ? 'selected' : ''}>Combo Ports</option>
                            <option value="1G/10G" ${portType === '1G/10G' ? 'selected' : ''}>1G/10G</option>
                            <option value="40G/100G" ${portType === '40G/100G' ? 'selected' : ''}>40G/100G</option>
                            <option value="1G/10G/25G" ${portType === '1G/10G/25G' ? 'selected' : ''}>1G/10G/25G</option>
                            <option value="400G" ${portType === '400G' ? 'selected' : ''}>400G</option>
                            <option value="Other" ${portType === 'Other' ? 'selected' : ''}>Other</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="mb-0">Port Capacity</label>
                        <select name="ports[${portIndex}][port_capacity]" class="form-control form-control-sm port-capacity-select" data-port-type="${portType}">
                            <option value="">Select Capacity</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="mb-0">Status</label>
                        <select name="ports[${portIndex}][status]" class="form-control form-control-sm">
                            <option value="available" ${status === 'available' ? 'selected' : ''}>Available</option>
                            <option value="active" ${status === 'active' ? 'selected' : ''}>Active</option>
                            <option value="used" ${status === 'used' ? 'selected' : ''}>Used</option>
                            <option value="inactive" ${status === 'inactive' ? 'selected' : ''}>Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-1 text-right">
                    <button type="button" class="btn btn-sm btn-danger remove-port-btn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-12">
                    <div class="form-group mb-0">
                        <label class="mb-0">Description</label>
                        <input type="text" name="ports[${portIndex}][description]" 
                               class="form-control form-control-sm" value="${description}" placeholder="Optional description">
                    </div>
                </div>
            </div>
        `;
        
        container.appendChild(portRow);
        portIndex++;
        
        // Update Port Capacity options based on Port Type
        const portTypeSelect = portRow.querySelector('select[name*="[port_type]"]');
        const capacitySelect = portRow.querySelector('.port-capacity-select');
        if (portTypeSelect && capacitySelect) {
            updatePortCapacityOptions(capacitySelect, portType, portCapacity);
            
            // Add change event listener to Port Type select
            portTypeSelect.addEventListener('change', function() {
                updatePortCapacityOptions(capacitySelect, this.value);
            });
        }
        
        // Add remove event listener
        portRow.querySelector('.remove-port-btn').addEventListener('click', function() {
            portRow.remove();
        });
    }

    // Function to update Port Capacity options based on Port Type
    function updatePortCapacityOptions(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);
            });
        }
    }

    // Add single port row button
    document.getElementById('addPortBtn').addEventListener('click', function() {
        addPortRow();
    });

    // Process Port Range
    document.getElementById('processPortRangeBtn').addEventListener('click', function() {
        const rangeInput = document.getElementById('port_range').value.trim();
        const portType = document.getElementById('port_range_type').value;
        const portCapacity = document.getElementById('port_range_capacity').value.trim();
        
        if (!rangeInput) {
            alert('Please enter a port range');
            return;
        }

        let portNumbers = [];

        // Check if it's a range (e.g., 1-24)
        if (rangeInput.includes('-')) {
            const parts = rangeInput.split('-').map(p => p.trim());
            if (parts.length === 2) {
                const start = parseInt(parts[0]);
                const end = parseInt(parts[1]);
                
                if (isNaN(start) || isNaN(end)) {
                    alert('Invalid range format. Please use numbers like 1-24');
                    return;
                }
                
                if (start > end) {
                    alert('Start value must be less than or equal to end value');
                    return;
                }
                
                // Limit range to prevent too many ports
                if ((end - start + 1) > 1000) {
                    alert('Range too large. Maximum 1000 ports allowed at once.');
                    return;
                }
                
                for (let i = start; i <= end; i++) {
                    portNumbers.push(i.toString());
                }
            } else {
                alert('Invalid range format. Please use format like 1-24');
                return;
            }
        } 
        // Check if it's comma-separated values (e.g., 1,2,3,5)
        else if (rangeInput.includes(',')) {
            portNumbers = rangeInput.split(',').map(p => p.trim()).filter(p => p);
            
            if (portNumbers.length > 1000) {
                alert('Too many ports. Maximum 1000 ports allowed at once.');
                return;
            }
        }
        // Single value
        else {
            portNumbers = [rangeInput];
        }

        // Add port rows for each port number with Port Type and Capacity
        portNumbers.forEach(portNumber => {
            if (portNumber) {
                addPortRow('', portNumber, portType, portCapacity);
            }
        });

        // Clear the range inputs
        document.getElementById('port_range').value = '';
        document.getElementById('port_range_type').value = '';
        document.getElementById('port_range_capacity').value = '';
    });

    // Allow Enter key to process range
    document.getElementById('port_range').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            document.getElementById('processPortRangeBtn').click();
        }
    });

    // Remove port row
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-port-btn')) {
            e.target.closest('.port-row').remove();
        }
    });

    // Function to update Port Capacity options based on Port Type
    function updatePortCapacityOptions(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);
            });
        }
    }

    // Handle Port Type change in Port Range section
    document.getElementById('port_range_type').addEventListener('change', function() {
        const portType = this.value;
        const capacitySelect = document.getElementById('port_range_capacity');
        updatePortCapacityOptions(capacitySelect, portType);
    });
</script>
@endpush
@endsection