@extends('layouts.app')

@section('title', 'Create Bandwidth Request - ISP ERP System')

@section('page-title', 'Create Bandwidth Request')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card-header-section">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="mb-0 text-white">
                            <i class="fas fa-plus me-2"></i>
                            Create New Bandwidth Request
                        </h3>
                        <p class="mb-0 text-white-50">Request bandwidth upgrade, downgrade, or discontinue</p>
                    </div>
                    <div>
                        <a href="{{ route('bandwidth-updown-requests.index') }}" class="btn btn-back-custom">
                            <i class="fas fa-arrow-left me-2"></i>Back to Requests
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Form -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-exchange-alt me-2"></i>
                        Request Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <form action="{{ route('bandwidth-updown-requests.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <!-- Left Column -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="user_id" class="form-label">
                                        Customer <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control @error('user_id') is-invalid @enderror" 
                                            id="user_id" name="user_id" required>
                                        <option value="">Select Customer</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user['id'] }}" {{ old('user_id') == $user['id'] ? 'selected' : '' }}>
                                                {{ $user['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('user_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="effective_date" class="form-label">
                                        Effective Date <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" class="form-control @error('effective_date') is-invalid @enderror" 
                                           id="effective_date" name="effective_date" 
                                           value="{{ old('effective_date') }}" 
                                           min="{{ date('Y-m-d') }}" required>
                                    @error('effective_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="request_type_display" class="form-label">
                                        Request Type <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control @error('request_type') is-invalid @enderror" 
                                            id="request_type" name="request_type" required>
                                        <option value="">Select Request Type</option>
                                        <option value="upgrade" {{ old('request_type') == 'upgrade' ? 'selected' : '' }}>Upgrade</option>
                                        <option value="downgrade" {{ old('request_type') == 'downgrade' ? 'selected' : '' }}>Downgrade</option>
                                        <option value="discontinue" {{ old('request_type') == 'discontinue' ? 'selected' : '' }}>Discontinue</option>
                                    </select>
                                    @error('request_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>

                            <!-- Right Column -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sales_invoice_item_id" class="form-label">
                                        Sales Invoice Item <span class="text-danger">*</span>
                                        <small class="text-muted">(Multiple select allowed)</small>
                                    </label>
                                    <div id="invoice-items-checkbox-container" class="border rounded" style="max-height: 150px; overflow-y: auto; background-color: #f8f9fa; font-size: 0.875rem; padding: 0.5rem;">
                                        <div class="text-center text-muted py-2" style="font-size: 0.875rem;">
                                            <i class="fas fa-info-circle me-2"></i>
                                            Please select a customer first
                                        </div>
                                    </div>
                                    @error('current_sales_invoice_item_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Select items by clicking checkboxes</small>
                                </div>

                            </div>
                        </div>

                        <!-- Selected Invoice Items Table -->
                        <div id="selected_items_table_container" class="mt-4" style="display: none;">
                            <div class="custom-card">
                                <div class="custom-card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped mb-0" id="selected_items_table">
                                            <thead>
                                                <tr>
                                                    <th>Invoice Item</th>
                                                    <th>Existing Bandwidth</th>
                                                    <th>Requested Bandwidth (Mbps) <span class="text-danger" id="bandwidth_required_header">*</span></th>
                                                </tr>
                                            </thead>
                                            <tbody id="selected_items_table_body">
                                                <!-- Dynamic rows will be inserted here by JavaScript -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Notes Section -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="notes" class="form-label">
                                        Notes
                                    </label>
                                    <textarea class="form-control @error('notes') is-invalid @enderror" 
                                              id="notes" name="notes" rows="3" 
                                              maxlength="2000">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary btn-custom">
                                <i class="fas fa-save me-2"></i>Save Bandwidth Request
                            </button>
                            <a href="{{ route('bandwidth-updown-requests.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.custom-card-header-section {
    background-color: #2F4255;
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.btn-back-custom {
    background-color: #6b7280;
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-back-custom:hover {
    background-color: #4b5563;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.8);
}

.btn-custom {
    border-radius: 0.375rem;
}

.custom-card {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
}

.custom-card-header {
    background-color: #2F4255;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.custom-card-body {
    padding: 1.5rem;
}

.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#invoice-items-checkbox-container {
    font-size: 0.875rem;
    color: #212529;
}

#invoice-items-checkbox-container .form-check {
    padding: .25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
    margin-bottom: 0.25rem;
    min-height: auto;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

#invoice-items-checkbox-container .form-check:hover {
    background-color: #e9ecef;
}

#invoice-items-checkbox-container .form-check-input {
    margin: 0;
    margin-left: .5rem;
    margin-right: 0.5rem;
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    align-self: center;
    vertical-align: middle;
}

#invoice-items-checkbox-container .form-check-label {
    cursor: pointer;
    margin: 0;
    margin-left: 0.5rem;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    line-height: 1.5;
    flex: 1;
    min-width: 0;
    color: #212529;
    vertical-align: middle;
}

#invoice-items-checkbox-container .form-check-label span {
    color: #212529;
}

#invoice-items-checkbox-container .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
}

#selected_items_table thead th {
    background-color: #2F4255;
    color: #fff;
    border-color: #3a4e63;
    font-weight: 600;
    padding: 0.75rem;
    vertical-align: middle;
}

#selected_items_table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
}

#selected_items_table .form-control-plaintext {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    width: 100%;
    cursor: not-allowed;
}

#selected_items_table .form-control {
    width: 100%;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const userId = document.getElementById('user_id');
    const requestType = document.getElementById('request_type');
    const invoiceItemsContainer = document.getElementById('invoice-items-checkbox-container');
    const selectedItemsTableContainer = document.getElementById('selected_items_table_container');
    const selectedItemsTableBody = document.getElementById('selected_items_table_body');
    const bandwidthRequiredHeader = document.getElementById('bandwidth_required_header');

    let invoiceItemsData = {};
    let selectedItemIds = [];

    // Handle request type change
    requestType.addEventListener('change', function() {
        if (this.value === 'discontinue') {
            bandwidthRequiredHeader.style.display = 'none';
            // Hide requested bandwidth column header
            const requestedBandwidthHeader = document.querySelector('#selected_items_table thead th:last-child');
            if (requestedBandwidthHeader) {
                requestedBandwidthHeader.innerHTML = 'Requested Bandwidth (Mbps)';
            }
            // Remove required from all bandwidth inputs
            document.querySelectorAll('#selected_items_table input[type="number"]').forEach(input => {
                input.removeAttribute('required');
            });
        } else {
            bandwidthRequiredHeader.style.display = 'inline';
            // Show required in header
            const requestedBandwidthHeader = document.querySelector('#selected_items_table thead th:last-child');
            if (requestedBandwidthHeader) {
                requestedBandwidthHeader.innerHTML = 'Requested Bandwidth (Mbps) <span class="text-danger">*</span>';
            }
            // Add required to all bandwidth inputs
            document.querySelectorAll('#selected_items_table input[type="number"]').forEach(input => {
                input.setAttribute('required', 'required');
            });
        }
    });

    // Trigger on page load if there's an old value
    if (requestType.value) {
        requestType.dispatchEvent(new Event('change'));
    }

    // Load invoice items when user is selected
    userId.addEventListener('change', function() {
        const customerId = this.value;
        
        // Clear previous data
        invoiceItemsContainer.innerHTML = '<div class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin me-2"></i>Loading...</div>';
        selectedItemsTableBody.innerHTML = '';
        selectedItemsTableContainer.style.display = 'none';
        invoiceItemsData = {};
        selectedItemIds = [];
        
        if (!customerId) {
            invoiceItemsContainer.innerHTML = '<div class="text-center text-muted py-3"><i class="fas fa-info-circle me-2"></i>Please select a customer first</div>';
            return;
        }
        
        // Fetch invoice items for the selected customer
        fetch(`/bandwidth-updown-requests/get-invoice-items/${customerId}`)
            .then(response => response.json())
            .then(data => {
                invoiceItemsContainer.innerHTML = '';
                
                if (data.length === 0) {
                    invoiceItemsContainer.innerHTML = '<div class="text-center text-muted py-3"><i class="fas fa-info-circle me-2"></i>No invoice items found for this customer</div>';
                    return;
                }
                
                // Store invoice items data
                data.forEach(item => {
                    invoiceItemsData[item.id] = item;
                });
                
                // Create checkboxes for all invoice items
                data.forEach((item, index) => {
                    const checkboxDiv = document.createElement('div');
                    checkboxDiv.className = 'form-check';
                    checkboxDiv.style.display = 'flex';
                    checkboxDiv.style.alignItems = 'center';
                    checkboxDiv.style.flexWrap = 'nowrap';
                    checkboxDiv.innerHTML = `
                        <input class="form-check-input invoice-item-checkbox" 
                               type="checkbox" 
                               value="${item.id}" 
                               id="invoice_item_${item.id}"
                               style="margin: 0; margin-left: .25rem; margin-right: .5rem; flex-shrink: 0; width: 1rem; height: 1rem; vertical-align: middle;">
                        <label class="form-check-label" for="invoice_item_${item.id}" style="flex: 1; margin: 0; margin-left: 1.75rem; color: #212529; display: flex; align-items: center; min-width: 0; line-height: 1.5;">
                            <span style="color: #212529;">${item.name}</span>
                            ${item.bandwidth && item.bandwidth !== 'N/A' ? 
                                `<span class="badge bg-info ms-2">${item.bandwidth}</span>` : ''}
                        </label>
                    `;
                    invoiceItemsContainer.appendChild(checkboxDiv);
                });
                
                // Add event listeners to checkboxes
                document.querySelectorAll('.invoice-item-checkbox').forEach(checkbox => {
                    checkbox.addEventListener('change', function() {
                        const itemId = parseInt(this.value);
                        
                        if (this.checked) {
                            if (!selectedItemIds.includes(itemId)) {
                                selectedItemIds.push(itemId);
                            }
                        } else {
                            selectedItemIds = selectedItemIds.filter(id => id !== itemId);
                        }
                        updateSelectedItemsTable();
                    });
                });
            })
            .catch(error => {
                console.error('Error fetching invoice items:', error);
                invoiceItemsContainer.innerHTML = '<div class="text-center text-danger py-3"><i class="fas fa-exclamation-circle me-2"></i>Error loading invoice items</div>';
            });
    });

    function updateSelectedItemsTable() {
        if (selectedItemIds.length === 0) {
            selectedItemsTableBody.innerHTML = '';
            selectedItemsTableContainer.style.display = 'none';
            return;
        }
        
        selectedItemsTableContainer.style.display = 'block';
        selectedItemsTableBody.innerHTML = '';
        
        selectedItemIds.forEach((itemId, index) => {
            const item = invoiceItemsData[itemId];
            if (!item) return;
            
            const existingBandwidth = item.bandwidth && item.bandwidth !== 'N/A' ? item.bandwidth : '-';
            const isRequired = requestType.value !== 'discontinue' ? 'required' : '';
            
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.name}</td>
                <td>
                    <input type="text" class="form-control-plaintext" 
                           value="${existingBandwidth}" 
                           readonly>
                </td>
                <td>
                    <input type="number" 
                           step="0.01" 
                           min="0" 
                           class="form-control" 
                           name="items[${itemId}][new_bandwidth_mbps]" 
                           placeholder="Enter requested bandwidth"
                           ${isRequired}>
                    <input type="hidden" name="items[${itemId}][sales_invoice_item_id]" value="${itemId}">
                    <input type="hidden" name="items[${itemId}][sales_invoice_id]" value="${item.invoice_id || ''}">
                </td>
            `;
            selectedItemsTableBody.appendChild(row);
        });
        
        // Update required attribute based on request type
        if (requestType.value === 'discontinue') {
            document.querySelectorAll('#selected_items_table input[type="number"]').forEach(input => {
                input.removeAttribute('required');
            });
        } else {
            document.querySelectorAll('#selected_items_table input[type="number"]').forEach(input => {
                input.setAttribute('required', 'required');
            });
        }
    }

    // Trigger change event if user is pre-selected (from old form data)
    if (userId.value) {
        userId.dispatchEvent(new Event('change'));
    }
});
</script>
@endsection