@extends('layouts.app')

@section('title', 'NTTN 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>NTTN Link Details
                    </h1>
                    <p class="text-muted">View NTTN link information</p>
                </div>
                <div>
                    <a href="{{ route('reseller.nttn-links.edit', $nttnLink->id) }}" class="btn btn-warning">
                        <i class="fas fa-edit mr-2"></i>Edit
                    </a>
                    <a href="#" onclick="history.back(); return false;" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i>Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Link Overview -->
    <div class="row mb-4">
        <div class="col-md-6">
            <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>#{{ $nttnLink->id }}</strong></td>
                        </tr>
                        <tr>
                            <th>Link Name:</th>
                            <td><strong>{{ $nttnLink->link_name }}</strong></td>
                        </tr>
                        <tr>
                            <th>Customer:</th>
                            <td>{{ $nttnLink->customer->name ?? $nttnLink->customer->company_name ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>NTTN Item:</th>
                            <td>{{ $nttnLink->item->name ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Description:</th>
                            <td>{{ $nttnLink->description ?? '-' }}</td>
                        </tr>
                        <tr>
                            <th>Quantity:</th>
                            <td><strong>{{ number_format($nttnLink->quantity, 2) }}</strong></td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>
                                @if($nttnLink->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>{{ $nttnLink->createdBy->name ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Created At:</th>
                            <td>{{ $nttnLink->created_at->format('d M Y, h:i A') }}</td>
                        </tr>
                        @if($nttnLink->updatedBy)
                        <tr>
                            <th>Updated By:</th>
                            <td>{{ $nttnLink->updatedBy->name }}</td>
                        </tr>
                        <tr>
                            <th>Updated At:</th>
                            <td>{{ $nttnLink->updated_at->format('d M Y, h:i A') }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <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">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <th width="50%">Sell Rate:</th>
                            <td class="text-right"><strong class="text-primary">৳ {{ number_format($nttnLink->sell_rate, 2) }}</strong></td>
                        </tr>
                        <tr>
                            <th>Sell VAT:</th>
                            <td class="text-right"><strong class="text-primary">{{ number_format($nttnLink->sell_vat, 2) }}%</strong></td>
                        </tr>
                        <tr>
                            <th>Total Sell Amount:</th>
                            <td class="text-right">
                                <strong class="text-success">
                                    ৳ {{ number_format(($nttnLink->sell_rate + ($nttnLink->sell_rate * $nttnLink->sell_vat / 100)) * $nttnLink->quantity, 2) }}
                                </strong>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card shadow mt-3">
                <div class="card-header bg-warning text-dark">
                    <h6 class="m-0 font-weight-bold">Cast Rates</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <th width="50%">Cast Rate:</th>
                            <td class="text-right"><strong class="text-danger">৳ {{ number_format($nttnLink->cast_rate, 2) }}</strong></td>
                        </tr>
                        <tr>
                            <th>Cast VAT:</th>
                            <td class="text-right"><strong class="text-danger">{{ number_format($nttnLink->cast_vat, 2) }}%</strong></td>
                        </tr>
                        <tr>
                            <th>Total Cast Amount:</th>
                            <td class="text-right">
                                <strong class="text-danger">
                                    ৳ {{ number_format(($nttnLink->cast_rate + ($nttnLink->cast_rate * $nttnLink->cast_vat / 100)) * $nttnLink->quantity, 2) }}
                                </strong>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- VLANs Section -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-network-wired mr-2"></i>VLANs ({{ $nttnLink->vlans->count() }})
                    </h6>
                </div>
                <div class="card-body">
                    @if($nttnLink->vlans->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead class="thead-light">
                                    <tr>
                                        <th width="5%">#</th>
                                        <th width="15%">VLAN Name</th>
                                        <th width="15%">VLAN ID</th>
                                        <th width="35%">Description</th>
                                        <th width="10%">Status</th>
                                        <th width="15%">Created At</th>
                                        <th width="5%" class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($nttnLink->vlans as $index => $vlan)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td><strong>{{ $vlan->vlan_name }}</strong></td>
                                            <td>{{ $vlan->vlan_id ?? '-' }}</td>
                                            <td id="vlan-description-{{ $vlan->id }}">{{ $vlan->description ?? '-' }}</td>
                                            <td id="vlan-status-{{ $vlan->id }}">
                                                @if($vlan->status == 'active')
                                                    <span class="badge badge-success">Active</span>
                                                @else
                                                    <span class="badge badge-secondary">Inactive</span>
                                                @endif
                                            </td>
                                            <td>{{ $vlan->created_at->format('d M Y, h:i A') }}</td>
                                            <td 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>
                    @else
                        <div class="alert alert-info mb-0">
                            <i class="fas fa-info-circle mr-2"></i>No VLANs found for this link.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</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 linkId = {{ $nttnLink->id }};
            const formAction = '/reseller/nttn-links/' + linkId + '/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 + '&_method=PUT',
                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">Active</span>';
                        } else {
                            statusBadge = '<span class="badge badge-secondary">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