@extends('layouts.app')

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

@section('page-title', 'Edit 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-edit me-2"></i>
                                Edit Bandwidth Log
                            </h3>
                            <p class="mb-0 opacity-75">Update bandwidth log information</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>
                            <a href="{{ route('bandwidth-logs.show', $bandwidthLog) }}" class="btn btn-info btn-custom">
                                <i class="fas fa-eye me-2"></i>View Log
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit 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.update', $bandwidthLog) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <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', $bandwidthLog->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>
                                    </label>
                                    <select class="form-control @error('sales_invoice_item_id') is-invalid @enderror" 
                                            id="sales_invoice_item_id" name="sales_invoice_item_id" required>
                                        <option value="">Select Invoice Item</option>
                                        @foreach($salesInvoiceItems as $item)
                                            <option value="{{ $item['id'] }}" {{ old('sales_invoice_item_id', $bandwidthLog->sales_invoice_item_id) == $item['id'] ? 'selected' : '' }}>
                                                {{ $item['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('sales_invoice_item_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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', $bandwidthLog->log_date ? $bandwidthLog->log_date->format('Y-m-d\\TH:i') : 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', $bandwidthLog->end_date ? $bandwidthLog->end_date->format('Y-m-d\\TH:i') : date('Y-m-d\\TH:i')) }}" required>
                                    @error('end_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="download_speed_mbps" class="form-label">
                                        <i class="fas fa-download text-primary me-1"></i>
                                        Download Speed (Mbps)
                                    </label>
                                    <input type="number" step="0.01" class="form-control @error('download_speed_mbps') is-invalid @enderror" 
                                           id="download_speed_mbps" name="download_speed_mbps" value="{{ old('download_speed_mbps', $bandwidthLog->download_speed_mbps) }}">
                                    @error('download_speed_mbps')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <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', $bandwidthLog->status) == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status', $bandwidthLog->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                        <option value="suspended" {{ old('status', $bandwidthLog->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>
                                    @php $employees = \App\Models\Employee::orderBy('name')->get(['id','name']); @endphp
                                    @php $currentEmpName = optional($employees->firstWhere('id', old('reference_id', $bandwidthLog->reference_id)))->name; @endphp
                                    <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="{{ $currentEmpName }}" autocomplete="off" required>
                                    <input type="hidden" id="reference_id" name="reference_id" value="{{ old('reference_id', $bandwidthLog->reference_id) }}">
                                    <datalist id="employees_datalist">
                                        @foreach($employees as $emp)
                                            <option data-id="{{ $emp->id }}" value="{{ $emp->name }}"></option>
                                        @endforeach
                                    </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', $bandwidthLog->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>Update 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;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
    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