@extends('layouts.app')

@section('title', 'Create NTTN 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 Link
                    </h1>
                    <p class="text-muted">Create new NTTN link</p>
                </div>
                <div>
                    <a href="{{ route('reseller.nttn-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-links.store') }}" method="POST">
        @csrf

        <div class="row">
            <div class="col-md-8">
                <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>
                            <input type="text" name="link_name" id="link_name" class="form-control @error('link_name') is-invalid @enderror" 
                                   value="{{ old('link_name') }}" required>
                            @error('link_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="item_id">NTTN Item</label>
                            <div class="input-group">
                                <select name="item_id" id="item_id" class="form-control @error('item_id') is-invalid @enderror">
                                    <option value="">-- Select Item --</option>
                                    @foreach($nttnItems as $item)
                                        <option value="{{ $item->id }}" {{ old('item_id') == $item->id ? 'selected' : '' }}>
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addNttnItemModal">
                                        <i class="fas fa-plus"></i> Add
                                    </button>
                                </div>
                            </div>
                            @error('item_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </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 class="col-md-4">
                <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="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 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 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">
                        <div class="form-group">
                            <label for="cast_rate">Cast Rate <span class="text-danger">*</span></label>
                            <input type="number" name="cast_rate" id="cast_rate" 
                                   class="form-control @error('cast_rate') is-invalid @enderror" 
                                   value="{{ old('cast_rate', 0) }}" step="0.01" min="0" required>
                            @error('cast_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="cast_vat">Cast VAT (%) <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" name="cast_vat" id="cast_vat" 
                                       class="form-control @error('cast_vat') is-invalid @enderror" 
                                       value="{{ old('cast_vat', 5) }}" step="0.01" min="0" max="100" required>
                                <div class="input-group-append">
                                    <span class="input-group-text">%</span>
                                </div>
                            </div>
                            @error('cast_vat')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </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 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();
        }
    });

    // Add NTTN Item via AJAX
    $('#addNttnItemForm').on('submit', function(e) {
        e.preventDefault();
        
        var formData = $(this).serialize();
        var submitBtn = $(this).find('button[type="submit"]');
        var originalText = submitBtn.html();
        
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-2"></i>Creating...');
        
        $.ajax({
            url: '{{ route("reseller.nttn-items.store") }}',
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                // Add new option to dropdown
                var newOption = $('<option>', {
                    value: response.item.id,
                    text: response.item.name,
                    selected: true
                });
                $('#item_id').append(newOption);
                
                // Close modal and reset form
                $('#addNttnItemModal').modal('hide');
                $('#addNttnItemForm')[0].reset();
                
                // Show success message
                alert('NTTN Item created successfully!');
            },
            error: function(xhr) {
                var errors = xhr.responseJSON?.errors || {};
                var errorMessage = 'Error creating NTTN Item. ';
                
                if (xhr.responseJSON?.message) {
                    errorMessage += xhr.responseJSON.message;
                } else {
                    errorMessage += 'Please check the form and try again.';
                }
                
                alert(errorMessage);
            },
            complete: function() {
                submitBtn.prop('disabled', false).html(originalText);
            }
        });
    });
</script>
@endpush

<!-- Add NTTN Item Modal -->
<div class="modal fade" id="addNttnItemModal" tabindex="-1" role="dialog" aria-labelledby="addNttnItemModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="addNttnItemModalLabel">
                    <i class="fas fa-plus-circle mr-2"></i>Add New NTTN Item
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="addNttnItemForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="modal_item_name">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="modal_item_name" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="modal_item_description">Description</label>
                        <textarea name="description" id="modal_item_description" class="form-control" rows="3"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="modal_item_status">Status <span class="text-danger">*</span></label>
                        <select name="status" id="modal_item_status" class="form-control" required>
                            <option value="active" selected>Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-2"></i>Create Item
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection