@extends('layouts.app')

@section('title', 'Data Link Details')

@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-link mr-2"></i>Data Link Details
                    </h1>
                    <p class="text-muted">View detailed information about this data link</p>
                </div>
                <div>
                    <a href="{{ route('reseller.users.show', $user->id) }}#data-links" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i>Back to User Profile
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Link Overview -->
    <div class="row mb-4">
        <div class="col-md-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">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <th width="40%">Link ID:</th>
                            <td><strong>#{{ $nttnDataLink->id }}</strong></td>
                        </tr>
                        <tr>
                            <th>Link Name:</th>
                            <td><strong>{{ $nttnDataLink->link_name }}</strong></td>
                        </tr>
                        <tr>
                            <th>Customer:</th>
                            <td>{{ $nttnDataLink->customer->company_name ?? $nttnDataLink->customer->name ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Description:</th>
                            <td>{{ $nttnDataLink->description ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Quantity:</th>
                            <td><strong>{{ number_format($nttnDataLink->quantity, 2) }}</strong></td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>
                                @if($nttnDataLink->status == 'active')
                                    <span class="badge badge-success">Active</span>
                                @else
                                    <span class="badge badge-secondary">Inactive</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Created By:</th>
                            <td>{{ $nttnDataLink->createdBy->name ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Created At:</th>
                            <td>{{ $nttnDataLink->created_at->format('d M Y, h:i A') }}</td>
                        </tr>
                        @if($nttnDataLink->updatedBy)
                        <tr>
                            <th>Updated By:</th>
                            <td>{{ $nttnDataLink->updatedBy->name }}</td>
                        </tr>
                        <tr>
                            <th>Updated At:</th>
                            <td>{{ $nttnDataLink->updated_at->format('d M Y, h:i A') }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- POP Details -->
    <div class="row mb-4">
        <!-- From POP Details -->
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-secondary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-arrow-right mr-2"></i>From POP Details
                    </h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <th width="40%">POP Name:</th>
                            <td>{{ $nttnDataLink->from_pop_name ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Switch/Router:</th>
                            <td>{{ $nttnDataLink->from_switch_or_router ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Port Number:</th>
                            <td>{{ $nttnDataLink->from_port_number ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Port Capacity:</th>
                            <td>{{ $nttnDataLink->from_port_capacity ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>SFP Serial:</th>
                            <td>{{ $nttnDataLink->from_sfp_serial ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>SFP Owner:</th>
                            <td>{{ $nttnDataLink->from_sfp_owner ?? '-' }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- To POP Details -->
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-arrow-left mr-2"></i>To POP Details
                    </h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <th width="40%">POP Name:</th>
                            <td>{{ $nttnDataLink->to_pop_name ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Switch/Router:</th>
                            <td>{{ $nttnDataLink->to_switch_or_router ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Port Number:</th>
                            <td>{{ $nttnDataLink->to_port_number ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Port Capacity:</th>
                            <td>{{ $nttnDataLink->to_port_capacity ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Port Traffic Usage:</th>
                            <td><strong class="text-info">{{ $nttnDataLink->to_port_traffic_usage ?? '-' }}</strong></td>
                        </tr>
                        <tr>
                            <th>SFP Serial:</th>
                            <td>{{ $nttnDataLink->to_sfp_serial ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>SFP Owner:</th>
                            <td>{{ $nttnDataLink->to_sfp_owner ?? '-' }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- VLAN Details Section -->
    @if($nttnDataLink->vlans->count() > 0)
        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header bg-warning text-dark">
                        <h6 class="m-0 font-weight-bold">
                            <i class="fas fa-network-wired mr-2"></i>VLAN Details ({{ $nttnDataLink->vlans->count() }})
                        </h6>
                    </div>
                    <div class="card-body p-2">
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table table-bordered table-hover table-sm mb-0">
                                <thead class="thead-light" style="position: sticky; top: 0; z-index: 10; background-color: #f8f9fa;">
                                    <tr>
                                        <th width="5%" style="padding: 8px 10px; font-size: 13px;">#</th>
                                        <th width="25%" style="padding: 8px 10px; font-size: 13px;">VLAN Name</th>
                                        <th width="18%" style="padding: 8px 10px; font-size: 13px;">VLAN ID</th>
                                        <th width="15%" style="padding: 8px 10px; font-size: 13px;">Description</th>
                                        <th width="10%" style="padding: 8px 10px; font-size: 13px;">Status</th>
                                        <th width="15%" style="padding: 8px 10px; font-size: 13px;">Created At</th>
                                        <th width="7%" style="padding: 8px 10px; font-size: 13px;" class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($nttnDataLink->vlans as $index => $vlan)
                                        <tr>
                                            <td style="padding: 6px 10px; font-size: 13px;">{{ $index + 1 }}</td>
                                            <td style="padding: 6px 10px; font-size: 13px;"><strong>{{ $vlan->vlan_name }}</strong></td>
                                            <td style="padding: 6px 10px; font-size: 13px;">{{ $vlan->vlan_id ?? '-' }}</td>
                                            <td style="padding: 6px 10px; font-size: 13px;" id="vlan-description-{{ $vlan->id }}">{{ $vlan->description ?? '-' }}</td>
                                            <td style="padding: 6px 10px; font-size: 13px;" id="vlan-status-{{ $vlan->id }}">
                                                @if($vlan->status == 'active')
                                                    <span class="badge badge-success" style="font-size: 11px;">Active</span>
                                                @else
                                                    <span class="badge badge-secondary" style="font-size: 11px;">Inactive</span>
                                                @endif
                                            </td>
                                            <td style="padding: 6px 10px; font-size: 13px;">{{ $vlan->created_at->format('d M Y, h:i A') }}</td>
                                            <td style="padding: 6px 10px; font-size: 13px;" class="text-center">
                                                <button type="button" class="btn btn-sm btn-warning edit-vlan-btn" 
                                                        data-vlan-id="{{ $vlan->id }}"
                                                        data-vlan-description="{{ $vlan->description ?? '' }}"
                                                        data-vlan-status="{{ $vlan->status }}"
                                                        title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Edit VLAN Modal -->
<div class="modal fade" id="editVlanModal" tabindex="-1" role="dialog" aria-labelledby="editVlanModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="editVlanModalLabel">
                    <i class="fas fa-edit mr-2"></i>Edit VLAN Details
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editVlanForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" id="edit_vlan_id" name="vlan_id">
                    
                    <div class="form-group">
                        <label for="edit_vlan_description">Description</label>
                        <textarea name="description" id="edit_vlan_description" class="form-control" rows="3" placeholder="Enter VLAN description" style="resize: vertical;"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="edit_vlan_status">Status</label>
                        <select name="status" id="edit_vlan_status" class="form-control" required>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-save mr-2"></i>Update VLAN
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        // Focus on description field when modal is shown
        $('#editVlanModal').on('shown.bs.modal', function() {
            // Ensure textarea is enabled and editable using both jQuery and native methods
            const textarea = $('#edit_vlan_description')[0];
            if (textarea) {
                textarea.readOnly = false;
                textarea.disabled = false;
                textarea.removeAttribute('readonly');
                textarea.removeAttribute('disabled');
                setTimeout(function() {
                    textarea.focus();
                }, 100);
            }
            $('#edit_vlan_description').prop('readonly', false).prop('disabled', false);
        });
        
        // Handle edit button click
        $('.edit-vlan-btn').on('click', function() {
            const vlanId = $(this).data('vlan-id');
            const vlanDescription = $(this).data('vlan-description') || '';
            const vlanStatus = $(this).data('vlan-status');
            
            // Set form action URL
            const userId = {{ $user->id }};
            const dataLinkId = {{ $nttnDataLink->id }};
            const formAction = '/reseller/users/' + userId + '/nttn-data-links/' + dataLinkId + '/vlans/' + vlanId;
            $('#editVlanForm').attr('action', formAction);
            
            // Populate form fields
            $('#edit_vlan_id').val(vlanId);
            $('#edit_vlan_status').val(vlanStatus);
            
            // Set textarea value and ensure it's editable
            const textarea = $('#edit_vlan_description')[0];
            if (textarea) {
                textarea.value = vlanDescription;
                textarea.readOnly = false;
                textarea.disabled = false;
                textarea.removeAttribute('readonly');
                textarea.removeAttribute('disabled');
            }
            $('#edit_vlan_description').val(vlanDescription).prop('readonly', false).prop('disabled', false);
            
            // Show modal
            $('#editVlanModal').modal('show');
        });
        
        // Handle form submission
        $('#editVlanForm').on('submit', function(e) {
            e.preventDefault();
            
            const form = $(this);
            const formData = form.serialize();
            const formAction = form.attr('action');
            
            // Show loading state
            const submitBtn = form.find('button[type="submit"]');
            const originalText = submitBtn.html();
            submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Updating...');
            
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            
            $.ajax({
                url: formAction,
                type: 'POST',
                data: formData,
                success: function(response) {
                    if (response.success) {
                        // Update table row
                        const vlanId = response.vlan.id;
                        const description = response.vlan.description || '-';
                        const status = response.vlan.status;
                        
                        // Update description
                        $('#vlan-description-' + vlanId).text(description);
                        
                        // Update status badge
                        let statusBadge = '';
                        if (status === 'active') {
                            statusBadge = '<span class="badge badge-success" style="font-size: 11px;">Active</span>';
                        } else {
                            statusBadge = '<span class="badge badge-secondary" style="font-size: 11px;">Inactive</span>';
                        }
                        $('#vlan-status-' + vlanId).html(statusBadge);
                        
                        // Update button data attributes
                        const editBtn = $('.edit-vlan-btn[data-vlan-id="' + vlanId + '"]');
                        editBtn.data('vlan-description', description);
                        editBtn.data('vlan-status', status);
                        
                        // Close modal
                        $('#editVlanModal').modal('hide');
                        
                        // Show success message
                        alert('VLAN updated successfully!');
                    } else {
                        alert('Error: ' + (response.message || 'Failed to update VLAN'));
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'Failed to update VLAN';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                        errorMessage = Object.values(xhr.responseJSON.errors).flat().join(', ');
                    }
                    alert('Error: ' + errorMessage);
                },
                complete: function() {
                    // Restore button state
                    submitBtn.prop('disabled', false).html(originalText);
                }
            });
        });
    });
</script>
@endpush
@endsection