@extends('layouts.app')

@section('title', 'Create NTTN Data Link')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-plus-circle mr-2"></i>Create NTTN Data Link
                    </h1>
                    <p class="text-muted">Create new NTTN data link</p>
                </div>
                <div>
                    <a href="{{ route('reseller.nttn-data-links.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i>Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('reseller.nttn-data-links.store') }}" method="POST">
        @csrf

        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h6 class="m-0 font-weight-bold">Link Information</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="customer_id">Customer</label>
                            <select name="customer_id" id="customer_id" class="form-control @error('customer_id') is-invalid @enderror">
                                <option value="">-- Select Customer --</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                                        {{ $customer->company_name ?? $customer->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('customer_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="link_name">Link Name <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="text" name="link_name" id="link_name" class="form-control @error('link_name') is-invalid @enderror" 
                                       value="{{ old('link_name') }}" required readonly>
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-secondary" id="generateLinkNameBtn" title="Auto Generate Link Name">
                                        <i class="fas fa-magic"></i> Auto Generate
                                    </button>
                                </div>
                            </div>
                            <small class="form-text text-muted">Link name will be auto-generated when customer is selected. Format: First 3 chars of company name + Date (YYYYMMDD) + Sequential number (0001, 0002, etc.)</small>
                            @error('link_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- POP Details Side by Side -->
                        <div class="row">
                            <!-- From POP Details -->
                            <div class="col-md-6">
                                <div class="card bg-light mb-3">
                                    <div class="card-header bg-secondary text-white">
                                        <h6 class="m-0 font-weight-bold">From POP Details</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="from_pop_name">POP Name</label>
                                            <select name="from_pop_name" id="from_pop_name" class="form-control @error('from_pop_name') is-invalid @enderror">
                                                <option value="">-- Select POP Name --</option>
                                                @foreach($popNames as $pop)
                                                    <option value="{{ $pop->site_name }}" {{ old('from_pop_name') == $pop->site_name ? 'selected' : '' }} data-site-id="{{ $pop->site_id }}">
                                                        {{ $pop->site_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('from_pop_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="from_switch_or_router">Switch/Router</label>
                                            <select name="from_switch_or_router" id="from_switch_or_router" class="form-control @error('from_switch_or_router') is-invalid @enderror">
                                                <option value="">-- Select Switch/Router --</option>
                                            </select>
                                            @error('from_switch_or_router')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="from_port_number">Port Number</label>
                                            <input type="text" name="from_port_number" id="from_port_number" class="form-control @error('from_port_number') is-invalid @enderror" 
                                                   value="{{ old('from_port_number') }}">
                                            @error('from_port_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="from_port_capacity">Port Capacity</label>
                                            <input type="text" name="from_port_capacity" id="from_port_capacity" class="form-control @error('from_port_capacity') is-invalid @enderror" 
                                                   value="{{ old('from_port_capacity') }}">
                                            @error('from_port_capacity')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="from_sfp_serial">SFP Serial</label>
                                            <input type="text" name="from_sfp_serial" id="from_sfp_serial" class="form-control @error('from_sfp_serial') is-invalid @enderror" 
                                                   value="{{ old('from_sfp_serial') }}">
                                            @error('from_sfp_serial')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="from_sfp_owner">SFP Owner</label>
                                            <input type="text" name="from_sfp_owner" id="from_sfp_owner" class="form-control @error('from_sfp_owner') is-invalid @enderror" 
                                                   value="{{ old('from_sfp_owner') }}">
                                            @error('from_sfp_owner')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- To POP Details -->
                            <div class="col-md-6">
                                <div class="card bg-light mb-3">
                                    <div class="card-header bg-secondary text-white">
                                        <h6 class="m-0 font-weight-bold">To POP Details</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="to_pop_name">POP Name</label>
                                            <select name="to_pop_name" id="to_pop_name" class="form-control @error('to_pop_name') is-invalid @enderror">
                                                <option value="">-- Select POP Name --</option>
                                                @foreach($popNames as $pop)
                                                    <option value="{{ $pop->site_name }}" {{ old('to_pop_name') == $pop->site_name ? 'selected' : '' }} data-site-id="{{ $pop->site_id }}">
                                                        {{ $pop->site_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('to_pop_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="to_switch_or_router">Switch/Router</label>
                                            <select name="to_switch_or_router" id="to_switch_or_router" class="form-control @error('to_switch_or_router') is-invalid @enderror">
                                                <option value="">-- Select Switch/Router --</option>
                                            </select>
                                            @error('to_switch_or_router')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="to_port_number">Port Number</label>
                                            <input type="text" name="to_port_number" id="to_port_number" class="form-control @error('to_port_number') is-invalid @enderror" 
                                                   value="{{ old('to_port_number') }}">
                                            @error('to_port_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="to_port_capacity">Port Capacity</label>
                                            <input type="text" name="to_port_capacity" id="to_port_capacity" class="form-control @error('to_port_capacity') is-invalid @enderror" 
                                                   value="{{ old('to_port_capacity') }}">
                                            @error('to_port_capacity')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="to_port_traffic_usage">Port Traffic Usage</label>
                                            <input type="text" name="to_port_traffic_usage" id="to_port_traffic_usage" class="form-control @error('to_port_traffic_usage') is-invalid @enderror" 
                                                   value="{{ old('to_port_traffic_usage') }}">
                                            @error('to_port_traffic_usage')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="to_sfp_serial">SFP Serial</label>
                                            <input type="text" name="to_sfp_serial" id="to_sfp_serial" class="form-control @error('to_sfp_serial') is-invalid @enderror" 
                                                   value="{{ old('to_sfp_serial') }}">
                                            @error('to_sfp_serial')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label for="to_sfp_owner">SFP Owner</label>
                                            <input type="text" name="to_sfp_owner" id="to_sfp_owner" class="form-control @error('to_sfp_owner') is-invalid @enderror" 
                                                   value="{{ old('to_sfp_owner') }}">
                                            @error('to_sfp_owner')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror" 
                                      rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="quantity">Quantity <span class="text-danger">*</span></label>
                                    <input type="number" name="quantity" id="quantity" 
                                           class="form-control @error('quantity') is-invalid @enderror" 
                                           value="{{ old('quantity', 0) }}" step="0.01" min="0" required>
                                    @error('quantity')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status">Status <span class="text-danger">*</span></label>
                                    <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required>
                                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header bg-info text-white">
                        <h6 class="m-0 font-weight-bold">Sell Rates</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="sell_rate">Sell Rate <span class="text-danger">*</span></label>
                                    <input type="number" name="sell_rate" id="sell_rate" 
                                           class="form-control @error('sell_rate') is-invalid @enderror" 
                                           value="{{ old('sell_rate', 0) }}" step="0.01" min="0" required>
                                    @error('sell_rate')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="sell_vat">Sell VAT (%) <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="number" name="sell_vat" id="sell_vat" 
                                               class="form-control @error('sell_vat') is-invalid @enderror" 
                                               value="{{ old('sell_vat', 0) }}" step="0.01" min="0" max="100" required>
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                    @error('sell_vat')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <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">VLANs</h6>
                            <div>
                                <button type="button" class="btn btn-sm btn-light" id="addVlanRangeBtn">
                                    <i class="fas fa-layer-group mr-1"></i>Add VLAN Range
                                </button>
                                <button type="button" class="btn btn-sm btn-light ml-2" id="addVlanBtn">
                                    <i class="fas fa-plus mr-1"></i>Add Single VLAN
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- VLAN Range Input -->
                        <div class="form-group mb-3">
                            <label for="vlan_range">VLAN Range (e.g., 100-200 or 100,101,102)</label>
                            <div class="input-group">
                                <input type="text" id="vlan_range" class="form-control" 
                                       placeholder="Enter VLAN range (e.g., 100-200)">
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-primary" id="processVlanRangeBtn">
                                        <i class="fas fa-check mr-1"></i>Process Range
                                    </button>
                                </div>
                            </div>
                            <small class="form-text text-muted">Enter range like 100-200 or comma-separated values like 100,101,102</small>
                        </div>

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

        <div class="row mt-3">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-2"></i>Create NTTN Data Link
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

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

    // Function to add a single VLAN row
    function addVlanRow(vlanId = '', status = 'active', description = '') {
        const container = document.getElementById('vlansContainer');
        const vlanRow = document.createElement('div');
        vlanRow.className = 'vlan-row border rounded p-2 mb-2';
        vlanRow.setAttribute('data-index', vlanIndex);
        
        vlanRow.innerHTML = `
            <div class="row align-items-center">
                <div class="col-md-2">
                    <label class="mb-0 font-weight-bold text-primary">VLAN ${vlanIndex + 1}</label>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-0">
                        <label class="mb-0">VLAN ID</label>
                        <input type="text" name="vlans[${vlanIndex}][vlan_id]" 
                               class="form-control form-control-sm" value="${vlanId}">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-0">
                        <label class="mb-0">Status</label>
                        <select name="vlans[${vlanIndex}][status]" class="form-control form-control-sm">
                            <option value="active" ${status === 'active' ? 'selected' : ''}>Active</option>
                            <option value="inactive" ${status === 'inactive' ? 'selected' : ''}>Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-0">
                        <label class="mb-0">Description</label>
                        <input type="text" name="vlans[${vlanIndex}][description]" 
                               class="form-control form-control-sm" value="${description}">
                    </div>
                </div>
                <div class="col-md-1 text-right">
                    <button type="button" class="btn btn-sm btn-danger remove-vlan-btn">
                        <i class="fas fa-times"></i> Remove
                    </button>
                </div>
            </div>
        `;
        
        container.appendChild(vlanRow);
        vlanIndex++;
        
        // Add remove event listener
        vlanRow.querySelector('.remove-vlan-btn').addEventListener('click', function() {
            vlanRow.remove();
        });
    }

    // Add single VLAN row
    document.getElementById('addVlanBtn').addEventListener('click', function() {
        addVlanRow();
    });

    // Process VLAN Range
    document.getElementById('processVlanRangeBtn').addEventListener('click', function() {
        const rangeInput = document.getElementById('vlan_range').value.trim();
        
        if (!rangeInput) {
            alert('Please enter a VLAN range');
            return;
        }

        let vlanIds = [];

        // Check if it's a range (e.g., 100-200)
        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 100-200');
                    return;
                }
                
                if (start > end) {
                    alert('Start value must be less than or equal to end value');
                    return;
                }
                
                // Limit range to prevent too many VLANs
                if ((end - start + 1) > 1000) {
                    alert('Range too large. Maximum 1000 VLANs allowed at once.');
                    return;
                }
                
                for (let i = start; i <= end; i++) {
                    vlanIds.push(i.toString());
                }
            } else {
                alert('Invalid range format. Please use format like 100-200');
                return;
            }
        } 
        // Check if it's comma-separated values (e.g., 100,101,102)
        else if (rangeInput.includes(',')) {
            vlanIds = rangeInput.split(',').map(v => v.trim()).filter(v => v);
            
            if (vlanIds.length > 1000) {
                alert('Too many VLANs. Maximum 1000 VLANs allowed at once.');
                return;
            }
        }
        // Single value
        else {
            vlanIds = [rangeInput];
        }

        // Add VLAN rows for each VLAN ID
        vlanIds.forEach(vlanId => {
            if (vlanId) {
                addVlanRow(vlanId);
            }
        });

        // Clear the range input
        document.getElementById('vlan_range').value = '';
    });

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

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

    // Function to load devices for a POP
    function loadDevicesForPop(popName, targetSelectId, selectedValue = '') {
        const targetSelect = document.getElementById(targetSelectId);
        
        // Clear existing options except the first one
        targetSelect.innerHTML = '<option value="">-- Select Switch/Router --</option>';
        
        if (!popName) {
            return;
        }

        // Show loading state
        const loadingOption = document.createElement('option');
        loadingOption.value = '';
        loadingOption.textContent = 'Loading devices...';
        loadingOption.disabled = true;
        targetSelect.appendChild(loadingOption);

        // Fetch devices from API
        fetch(`/api/sites/${encodeURIComponent(popName)}/devices`)
            .then(response => response.json())
            .then(data => {
                // Remove loading option
                targetSelect.innerHTML = '<option value="">-- Select Switch/Router --</option>';
                
                if (data.success && data.devices && data.devices.length > 0) {
                    data.devices.forEach(device => {
                        const option = document.createElement('option');
                        option.value = device.device_name;
                        option.textContent = `${device.device_name} (${device.device_type})`;
                        option.setAttribute('data-device-id', device.device_id);
                        
                        // Select the option if it matches the existing value
                        if (selectedValue && device.device_name === selectedValue) {
                            option.selected = true;
                        }
                        
                        targetSelect.appendChild(option);
                    });
                } else {
                    const noDeviceOption = document.createElement('option');
                    noDeviceOption.value = '';
                    noDeviceOption.textContent = 'No devices found';
                    noDeviceOption.disabled = true;
                    targetSelect.appendChild(noDeviceOption);
                }
            })
            .catch(error => {
                console.error('Error loading devices:', error);
                targetSelect.innerHTML = '<option value="">-- Select Switch/Router --</option>';
                const errorOption = document.createElement('option');
                errorOption.value = '';
                errorOption.textContent = 'Error loading devices';
                errorOption.disabled = true;
                targetSelect.appendChild(errorOption);
            });
    }

    // Handle From POP Name change
    document.getElementById('from_pop_name').addEventListener('change', function() {
        const popName = this.value;
        loadDevicesForPop(popName, 'from_switch_or_router');
    });

    // Handle To POP Name change
    document.getElementById('to_pop_name').addEventListener('change', function() {
        const popName = this.value;
        loadDevicesForPop(popName, 'to_switch_or_router');
    });

    // Function to generate link name
    function generateLinkName() {
        const customerSelect = document.getElementById('customer_id');
        const linkNameInput = document.getElementById('link_name');
        
        if (!customerSelect.value) {
            alert('Please select a customer first');
            return;
        }
        
        const customerId = customerSelect.value;
        
        // Get current date in YYYYMMDD format
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const day = String(today.getDate()).padStart(2, '0');
        const dateStr = year + month + day;
        
        // Show loading state
        linkNameInput.value = 'Generating...';
        
        // Fetch existing links for this customer today to get the next number
        fetch(`/api/nttn-data-links/get-next-link-number?customer_id=${customerId}&date=${dateStr}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const prefix = data.prefix;
                    const nextNumber = String(data.next_number).padStart(4, '0');
                    const generatedLinkName = prefix + dateStr + nextNumber;
                    linkNameInput.value = generatedLinkName;
                } else {
                    // Fallback: use customer name from dropdown
                    const selectedOption = customerSelect.options[customerSelect.selectedIndex];
                    const customerName = selectedOption.textContent.trim();
                    let prefix = customerName.substring(0, 3).toUpperCase().replace(/\s/g, '');
                    if (prefix.length < 3) {
                        prefix = (prefix + 'XXX').substring(0, 3);
                    }
                    const generatedLinkName = prefix + dateStr + '0001';
                    linkNameInput.value = generatedLinkName;
                }
            })
            .catch(error => {
                console.error('Error generating link name:', error);
                // Fallback: use customer name from dropdown
                const selectedOption = customerSelect.options[customerSelect.selectedIndex];
                const customerName = selectedOption.textContent.trim();
                let prefix = customerName.substring(0, 3).toUpperCase().replace(/\s/g, '');
                if (prefix.length < 3) {
                    prefix = (prefix + 'XXX').substring(0, 3);
                }
                const generatedLinkName = prefix + dateStr + '0001';
                linkNameInput.value = generatedLinkName;
            });
    }
    
    // Auto-generate link name when customer is selected
    document.getElementById('customer_id').addEventListener('change', function() {
        if (this.value) {
            generateLinkName();
        } else {
            document.getElementById('link_name').value = '';
        }
    });
    
    // Manual generate button
    document.getElementById('generateLinkNameBtn').addEventListener('click', function() {
        generateLinkName();
    });
    
    // Make link name editable (remove readonly on focus)
    document.getElementById('link_name').addEventListener('focus', function() {
        this.removeAttribute('readonly');
    });
    
    // Load devices on page load if POP names are already selected (for old form values)
    document.addEventListener('DOMContentLoaded', function() {
        const fromPopName = document.getElementById('from_pop_name').value;
        const toPopName = document.getElementById('to_pop_name').value;
        const fromSwitchRouter = '{{ old("from_switch_or_router") }}';
        const toSwitchRouter = '{{ old("to_switch_or_router") }}';
        
        // Auto-generate link name if customer is already selected
        const customerId = document.getElementById('customer_id').value;
        if (customerId && !document.getElementById('link_name').value) {
            generateLinkName();
        }
        
        if (fromPopName) {
            loadDevicesForPop(fromPopName, 'from_switch_or_router', fromSwitchRouter);
        }
        
        if (toPopName) {
            loadDevicesForPop(toPopName, 'to_switch_or_router', toSwitchRouter);
        }
    });
</script>
@endpush
@endsection