@extends('layouts.app')

@section('title', 'Add Bandwidth Log - ISP ERP System')

@section('page-title', 'Add Bandwidth Log')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-plus me-2"></i>
                                Add New Bandwidth Log
                            </h3>
                            <p class="mb-0 opacity-75">Create a new bandwidth upload/download log</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('bandwidth-logs.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Logs
                            </a>
                        </div>
                    </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-chart-line me-2"></i>
                        Bandwidth Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <form action="{{ route('bandwidth-logs.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="customer_id" class="form-label">
                                        <i class="fas fa-user text-primary me-1"></i>
                                        Customer <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control @error('customer_id') is-invalid @enderror" 
                                            id="customer_id" name="customer_id" required>
                                        <option value="">Select Customer</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer['id'] }}" {{ old('customer_id') == $customer['id'] ? 'selected' : '' }}>
                                                {{ $customer['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('customer_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sales_invoice_item_id" class="form-label">
                                        <i class="fas fa-file-invoice text-primary me-1"></i>
                                        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 p-3" style="max-height: 150px; overflow-y: auto; background-color: #f8f9fa;">
                                        <div class="text-center text-muted py-3">
                                            <i class="fas fa-info-circle me-2"></i>
                                            Please select a customer first
                                        </div>
                                    </div>
                                    <input type="hidden" name="sales_invoice_item_id_dummy" value="">
                                    @error('sales_invoice_item_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    @error('items')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    @error('items.*')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Select items by clicking checkboxes</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="log_date" class="form-label">
                                        <i class="fas fa-calendar text-primary me-1"></i>
                                        Log Date <span class="text-danger">*</span>
                                    </label>
                                    <input type="datetime-local" class="form-control @error('log_date') is-invalid @enderror" 
                                           id="log_date" name="log_date" value="{{ old('log_date', date('Y-m-d\\TH:i')) }}" required>
                                    @error('log_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="end_date" class="form-label">
                                        <i class="fas fa-calendar-check text-primary me-1"></i>
                                        End Date <span class="text-danger">*</span>
                                    </label>
                                    <input type="datetime-local" class="form-control @error('end_date') is-invalid @enderror" 
                                           id="end_date" name="end_date" value="{{ old('end_date', date('Y-m-d\\TH:i')) }}" required>
                                    @error('end_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Dynamic Bandwidth Input Fields for Each Selected Item -->
                        <div id="bandwidth-inputs-container">
                            <div class="text-center text-muted py-4">
                                <i class="fas fa-info-circle me-2"></i>
                                Please select Sales Invoice Items to add bandwidth data for each item
                            </div>
                        </div>

                        <!-- Common Fields -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="status" class="form-label">
                                        <i class="fas fa-check-circle text-primary me-1"></i>
                                        Status <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status" required>
                                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                        <option value="suspended" {{ old('status') == 'suspended' ? 'selected' : '' }}>Suspended</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="reference_id" class="form-label">
                                        <i class="fas fa-user-tie text-primary me-1"></i>
                                        Reference <span class="text-danger">*</span>
                                    </label>
                                    <input class="form-control @error('reference_id') is-invalid @enderror"
                                           list="employees_datalist" id="reference_name" name="reference_name"
                                           placeholder="Search employee by name" value="" autocomplete="off" required>
                                    <input type="hidden" id="reference_id" name="reference_id" value="{{ old('reference_id') }}">
                                    <datalist id="employees_datalist">
                                        @if(isset($employees))
                                            @foreach($employees as $emp)
                                                <option data-id="{{ $emp->id }}" value="{{ $emp->name }}"></option>
                                            @endforeach
                                        @endif
                                    </datalist>
                                    <small class="text-muted">Start typing a name; pick from suggestions. We will save the employee ID.</small>
                                    @error('reference_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="notes" class="form-label">
                                        <i class="fas fa-sticky-note text-primary me-1"></i>
                                        Notes
                                    </label>
                                    <textarea class="form-control @error('notes') is-invalid @enderror" 
                                              id="notes" name="notes" rows="3">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary btn-custom">
                                <i class="fas fa-save me-2"></i>Save Bandwidth Log
                            </button>
                            <a href="{{ route('bandwidth-logs.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>
.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);
}

.custom-card-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

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

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

#bandwidth-inputs-container .custom-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

#bandwidth-inputs-container .custom-card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

#bandwidth-inputs-container .custom-card-body {
    padding: 1rem;
}

#bandwidth-inputs-container .custom-card:last-child {
    margin-bottom: 0;
}

#invoice-items-checkbox-container .form-check {
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

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

#invoice-items-checkbox-container .form-check-input {
    margin-top: 0.4rem;
    cursor: pointer;
}

#invoice-items-checkbox-container .form-check-label {
    cursor: pointer;
    margin-left: 0.5rem;
    user-select: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const customerSelect = document.getElementById('customer_id');
    const invoiceItemsCheckboxContainer = document.getElementById('invoice-items-checkbox-container');
    const bandwidthInputsContainer = document.getElementById('bandwidth-inputs-container');
    let invoiceItemsData = {}; // Store invoice items data
    let selectedItemIds = []; // Store selected item IDs
    
    customerSelect.addEventListener('change', function() {
        const customerId = this.value;
        
        // Clear previous checkboxes and inputs
        invoiceItemsCheckboxContainer.innerHTML = '<div class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin me-2"></i>Loading...</div>';
        bandwidthInputsContainer.innerHTML = '<div class="text-center text-muted py-4"><i class="fas fa-info-circle me-2"></i>Please select Sales Invoice Items to add bandwidth data for each item</div>';
        invoiceItemsData = {};
        selectedItemIds = [];
        
        if (!customerId) {
            invoiceItemsCheckboxContainer.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(`{{ url('/') }}/bandwidth-logs/get-invoice-items/${customerId}`)
            .then(response => response.json())
            .then(data => {
                invoiceItemsCheckboxContainer.innerHTML = '';
                
                if (data.length === 0) {
                    invoiceItemsCheckboxContainer.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 mb-2';
                    checkboxDiv.innerHTML = `
                        <input class="form-check-input invoice-item-checkbox" 
                               type="checkbox" 
                               value="${item.id}" 
                               id="invoice_item_${item.id}"
                               ${index === 0 ? 'checked' : ''}>
                        <label class="form-check-label" for="invoice_item_${item.id}">
                            ${item.name}
                            ${item.bandwidth && item.bandwidth !== 'N/A' ? 
                                `<span class="badge bg-info ms-2">${item.bandwidth}</span>` : ''}
                        </label>
                    `;
                    invoiceItemsCheckboxContainer.appendChild(checkboxDiv);
                    
                    // Auto-select the first item (latest)
                    if (index === 0) {
                        selectedItemIds.push(item.id);
                    }
                });
                
                // 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);
                        }
                        updateBandwidthInputs();
                    });
                });
                
                // Update bandwidth inputs after loading
                updateBandwidthInputs();
            })
            .catch(error => {
                console.error('Error fetching invoice items:', error);
                invoiceItemsCheckboxContainer.innerHTML = '<div class="text-center text-danger py-3"><i class="fas fa-exclamation-circle me-2"></i>Error loading invoice items</div>';
            });
    });
    
    function updateBandwidthInputs() {
        if (selectedItemIds.length === 0) {
            bandwidthInputsContainer.innerHTML = '<div class="text-center text-muted py-4"><i class="fas fa-info-circle me-2"></i>Please select Sales Invoice Items to add bandwidth data for each item</div>';
            return;
        }
        
        let html = `
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 40%;">
                                <i class="fas fa-file-invoice text-primary me-1"></i>
                                Invoice Item
                            </th>
                            <th style="width: 30%;">
                                <i class="fas fa-info-circle text-info me-1"></i>
                                Existing Bandwidth
                            </th>
                            <th style="width: 30%;">
                                <i class="fas fa-download text-primary me-1"></i>
                                Requested Bandwidth (Mbps)
                            </th>
                        </tr>
                    </thead>
                    <tbody>
        `;
        
        selectedItemIds.forEach((itemId, index) => {
            const itemName = invoiceItemsData[itemId] ? invoiceItemsData[itemId].name : `Item ${itemId}`;
            const existingBandwidth = invoiceItemsData[itemId] && invoiceItemsData[itemId].bandwidth && invoiceItemsData[itemId].bandwidth !== 'N/A' ? invoiceItemsData[itemId].bandwidth : '-';
            
            html += `
                <tr>
                    <td>
                        <input type="hidden" name="items[${itemId}][sales_invoice_item_id]" value="${itemId}">
                        <strong>${itemName}</strong>
                    </td>
                    <td>
                        <input type="text" class="form-control form-control-sm" 
                               value="${existingBandwidth}" 
                               readonly 
                               style="background-color: #e9ecef; cursor: not-allowed;">
                    </td>
                    <td>
                        <input type="number" step="0.01" class="form-control form-control-sm" 
                               name="items[${itemId}][download_speed_mbps]" 
                               placeholder="Enter requested bandwidth">
                    </td>
                </tr>
            `;
        });
        
        html += `
                    </tbody>
                </table>
            </div>
        `;
        
        bandwidthInputsContainer.innerHTML = html;
    }
    
    // Trigger change event if customer is pre-selected (from old form data)
    if (customerSelect.value) {
        customerSelect.dispatchEvent(new Event('change'));
    }

    // Validate datalist selection (ensure value is an existing employee id)
    // Map selected name to hidden id
    const refNameInput = document.getElementById('reference_name');
    const refHiddenId = document.getElementById('reference_id');
    const refData = document.getElementById('employees_datalist');
    if (refNameInput && refHiddenId && refData) {
        function syncRefId() {
            const name = refNameInput.value;
            const match = Array.from(refData.options).find(opt => opt.value === name);
            if (match) {
                refHiddenId.value = match.dataset.id;
            } else {
                refHiddenId.value = '';
            }
        }
        refNameInput.addEventListener('change', syncRefId);
        refNameInput.addEventListener('input', syncRefId);
    }
});
</script>
@endsection