@extends('layouts.app')

@section('title', 'Edit 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-edit mr-2"></i>Edit NTTN Data Link
                    </h1>
                    <p class="text-muted">Update NTTN data link details</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.update', $nttnDataLink->id) }}" method="POST">
        @csrf
        @method('PUT')

        <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', $nttnDataLink->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>
                            <input type="text" name="link_name" id="link_name" class="form-control @error('link_name') is-invalid @enderror" 
                                   value="{{ old('link_name', $nttnDataLink->link_name) }}" required>
                            @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', $nttnDataLink->from_pop_name) == $pop->site_name ? 'selected' : '' }}>
                                                        {{ $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', $nttnDataLink->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', $nttnDataLink->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', $nttnDataLink->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', $nttnDataLink->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', $nttnDataLink->to_pop_name) == $pop->site_name ? 'selected' : '' }}>
                                                        {{ $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', $nttnDataLink->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', $nttnDataLink->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', $nttnDataLink->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', $nttnDataLink->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', $nttnDataLink->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', $nttnDataLink->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', $nttnDataLink->quantity) }}" 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', $nttnDataLink->status) == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status', $nttnDataLink->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', $nttnDataLink->sell_rate) }}" 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', $nttnDataLink->sell_vat) }}" 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-body">
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-2"></i>Update NTTN Data Link
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
    // 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');
    });

    // Load devices on page load if POP names are already selected
    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", $nttnDataLink->from_switch_or_router) }}';
        const toSwitchRouter = '{{ old("to_switch_or_router", $nttnDataLink->to_switch_or_router) }}';
        
        if (fromPopName) {
            loadDevicesForPop(fromPopName, 'from_switch_or_router', fromSwitchRouter);
        }
        
        if (toPopName) {
            loadDevicesForPop(toPopName, 'to_switch_or_router', toSwitchRouter);
        }
    });
</script>
@endpush
@endsection