@extends('garage.layouts.app')

@section('title', 'Create Invoice')

@push('styles')
<style>
    .item-row {
        border-bottom: 1px solid #e9ecef;
        padding: 0.75rem 0;
    }
</style>
@endpush

@push('scripts')
<script>
let invoiceItems = [];

const parts = @json($parts);
const labors = @json($labors);
const serviceGroups = @json($serviceGroups);

function addItem() {
    const itemType = document.getElementById('itemType').value;
    const partId = document.getElementById('partId').value;
    const laborId = document.getElementById('laborId').value;
    const serviceGroupId = document.getElementById('serviceGroupId').value;
    const quantity = parseFloat(document.getElementById('quantity').value) || 1;
    const unitPrice = parseFloat(document.getElementById('unitPrice').value) || 0;
    const discountAmount = parseFloat(document.getElementById('discountAmount').value) || 0;
    const discountType = document.getElementById('discountType').value;
    const taxRate = parseFloat(document.getElementById('taxRate').value) || 0;
    const description = document.getElementById('itemDescription').value;

    if (itemType === 'part' && !partId) {
        alert('Please select a part');
        return;
    }
    if (itemType === 'labor' && !laborId) {
        alert('Please select a labor');
        return;
    }
    if (itemType === 'service_group' && !serviceGroupId) {
        alert('Please select a service group');
        return;
    }

    let itemName = '';
    if (itemType === 'part') {
        const part = parts.find(p => p.id == partId);
        itemName = part ? part.name : '';
    } else if (itemType === 'labor') {
        const labor = labors.find(l => l.id == laborId);
        itemName = labor ? labor.name : '';
    } else if (itemType === 'service_group') {
        const sg = serviceGroups.find(s => s.id == serviceGroupId);
        itemName = sg ? sg.name : '';
    }

    const item = {
        item_type: itemType,
        part_id: itemType === 'part' ? partId : null,
        labor_id: itemType === 'labor' ? laborId : null,
        service_group_id: itemType === 'service_group' ? serviceGroupId : null,
        description: description,
        quantity: quantity,
        unit_price: unitPrice,
        discount_amount: discountAmount,
        discount_type: discountType,
        tax_rate: taxRate
    };

    invoiceItems.push(item);
    updateItemsTable();
    resetItemForm();
}

function removeItem(index) {
    invoiceItems.splice(index, 1);
    updateItemsTable();
}

function updateItemsTable() {
    const tbody = document.getElementById('itemsTableBody');
    tbody.innerHTML = '';
    let subtotal = 0;
    let totalTax = 0;

    invoiceItems.forEach((item, index) => {
        const row = document.createElement('tr');
        row.className = 'item-row';
        
        let itemName = '';
        if (item.item_type === 'part') {
            const part = parts.find(p => p.id == item.part_id);
            itemName = part ? part.name : '';
        } else if (item.item_type === 'labor') {
            const labor = labors.find(l => l.id == item.labor_id);
            itemName = labor ? labor.name : '';
        } else if (item.item_type === 'service_group') {
            const sg = serviceGroups.find(s => s.id == item.service_group_id);
            itemName = sg ? sg.name : '';
        }

        const itemTotal = item.quantity * item.unit_price;
        let itemDiscount = item.discount_amount || 0;
        if (item.discount_type === 'percentage') {
            itemDiscount = (itemTotal * itemDiscount / 100);
        }
        const itemSubtotal = itemTotal - itemDiscount;
        const itemTax = (itemSubtotal * (item.tax_rate || 0) / 100);
        const itemTotalPrice = itemSubtotal + itemTax;

        subtotal += itemSubtotal;
        totalTax += itemTax;

        row.innerHTML = `
            <td>${itemName}</td>
            <td>${item.item_type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}</td>
            <td>${item.quantity}</td>
            <td>PKR ${item.unit_price.toFixed(2)}</td>
            <td>PKR ${itemDiscount.toFixed(2)}</td>
            <td>${item.tax_rate || 0}%</td>
            <td>PKR ${itemTotalPrice.toFixed(2)}</td>
            <td>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeItem(${index})">
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        `;
        tbody.appendChild(row);
    });

    // Update totals
    const overallDiscount = parseFloat(document.getElementById('overallDiscount').value) || 0;
    const overallDiscountType = document.getElementById('overallDiscountType').value;
    let finalDiscount = overallDiscount;
    if (overallDiscountType === 'percentage') {
        finalDiscount = (subtotal * overallDiscount / 100);
    }
    const finalSubtotal = subtotal - finalDiscount;
    const shippingCharges = parseFloat(document.getElementById('shippingCharges').value) || 0;
    const finalTotal = finalSubtotal + totalTax + shippingCharges;

    document.getElementById('subtotalDisplay').textContent = 'PKR ' + subtotal.toFixed(2);
    document.getElementById('taxDisplay').textContent = 'PKR ' + totalTax.toFixed(2);
    document.getElementById('discountDisplay').textContent = 'PKR ' + finalDiscount.toFixed(2);
    document.getElementById('shippingDisplay').textContent = 'PKR ' + shippingCharges.toFixed(2);
    document.getElementById('totalDisplay').textContent = 'PKR ' + finalTotal.toFixed(2);
}

function resetItemForm() {
    document.getElementById('itemType').value = 'part';
    document.getElementById('partId').value = '';
    document.getElementById('laborId').value = '';
    document.getElementById('serviceGroupId').value = '';
    document.getElementById('quantity').value = '1';
    document.getElementById('unitPrice').value = '';
    document.getElementById('discountAmount').value = '';
    document.getElementById('discountType').value = 'fixed';
    document.getElementById('taxRate').value = '0';
    document.getElementById('itemDescription').value = '';
    updateItemTypeFields();
}

function updateItemTypeFields() {
    const itemType = document.getElementById('itemType').value;
    document.getElementById('partField').style.display = itemType === 'part' ? 'block' : 'none';
    document.getElementById('laborField').style.display = itemType === 'labor' ? 'block' : 'none';
    document.getElementById('serviceGroupField').style.display = itemType === 'service_group' ? 'block' : 'none';
}

function updateOverallTotals() {
    updateItemsTable();
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('itemType').addEventListener('change', updateItemTypeFields);
    document.getElementById('overallDiscount').addEventListener('input', updateOverallTotals);
    document.getElementById('overallDiscountType').addEventListener('change', updateOverallTotals);
    document.getElementById('shippingCharges').addEventListener('input', updateOverallTotals);
    updateItemTypeFields();
    
    // Form submission
    document.getElementById('invoiceForm').addEventListener('submit', function(e) {
        if (invoiceItems.length === 0) {
            e.preventDefault();
            alert('Please add at least one item to the invoice.');
            return false;
        }
        
        // Add hidden input with items JSON
        const itemsInput = document.createElement('input');
        itemsInput.type = 'hidden';
        itemsInput.name = 'items';
        itemsInput.value = JSON.stringify(invoiceItems);
        this.appendChild(itemsInput);
    });
});
</script>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">
                    <i class="bi bi-file-earmark-plus me-2"></i>Create Invoice
                </h5>
                <a href="{{ route('garage.invoices.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Back to List
                </a>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('garage.invoices.store') }}" id="invoiceForm">
                    @csrf

                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label class="form-label">Invoice Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('invoice_number') is-invalid @enderror" name="invoice_number" value="{{ old('invoice_number', $invoiceNumber) }}" required readonly>
                            @error('invoice_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Invoice Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('invoice_date') is-invalid @enderror" name="invoice_date" value="{{ old('invoice_date', date('Y-m-d')) }}" required>
                            @error('invoice_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Due Date</label>
                            <input type="date" class="form-control @error('due_date') is-invalid @enderror" name="due_date" value="{{ old('due_date') }}">
                            @error('due_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Status</label>
                            <select class="form-select @error('status') is-invalid @enderror" name="status">
                                <option value="draft" {{ old('status', 'draft') === 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="sent" {{ old('status') === 'sent' ? 'selected' : '' }}>Sent</option>
                            </select>
                            @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label">Customer</label>
                            <select class="form-select @error('customer_ledger_id') is-invalid @enderror" name="customer_ledger_id" id="customerSelect">
                                <option value="">Select Customer</option>
                                @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" {{ old('customer_ledger_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                                @endforeach
                            </select>
                            @error('customer_ledger_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Vehicle</label>
                            <select class="form-select @error('vehicle_id') is-invalid @enderror" name="vehicle_id" id="vehicleSelect">
                                <option value="">Select Vehicle</option>
                            </select>
                            @error('vehicle_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Work Order (Optional)</label>
                            <select class="form-select @error('work_order_id') is-invalid @enderror" name="work_order_id">
                                <option value="">Select Work Order</option>
                                @foreach($workOrders as $workOrder)
                                <option value="{{ $workOrder->id }}" {{ old('work_order_id') == $workOrder->id ? 'selected' : '' }}>{{ $workOrder->work_order_number }}</option>
                                @endforeach
                            </select>
                            @error('work_order_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label">Estimate (Optional)</label>
                            <select class="form-select @error('estimate_id') is-invalid @enderror" name="estimate_id">
                                <option value="">Select Estimate</option>
                                @foreach($estimates as $estimate)
                                <option value="{{ $estimate->id }}" {{ old('estimate_id') == $estimate->id ? 'selected' : '' }}>{{ $estimate->estimate_number }}</option>
                                @endforeach
                            </select>
                            @error('estimate_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Reference Number</label>
                            <input type="text" class="form-control @error('reference_number') is-invalid @enderror" name="reference_number" value="{{ old('reference_number') }}">
                            @error('reference_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Overall Discount</label>
                            <input type="number" step="0.01" class="form-control" id="overallDiscount" name="discount_amount" value="{{ old('discount_amount', 0) }}" min="0" oninput="updateOverallTotals()">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Discount Type</label>
                            <select class="form-select" id="overallDiscountType" name="discount_type" onchange="updateOverallTotals()">
                                <option value="fixed" {{ old('discount_type', 'fixed') === 'fixed' ? 'selected' : '' }}>Fixed</option>
                                <option value="percentage" {{ old('discount_type') === 'percentage' ? 'selected' : '' }}>Percentage</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Customer Notes</label>
                            <textarea class="form-control @error('customer_notes') is-invalid @enderror" name="customer_notes" rows="3">{{ old('customer_notes') }}</textarea>
                            @error('customer_notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Internal Notes</label>
                            <textarea class="form-control @error('internal_notes') is-invalid @enderror" name="internal_notes" rows="3">{{ old('internal_notes') }}</textarea>
                            @error('internal_notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-4">
                        <div class="col-12">
                            <label class="form-label">Terms & Conditions</label>
                            <textarea class="form-control @error('terms_conditions') is-invalid @enderror" name="terms_conditions" rows="2">{{ old('terms_conditions') }}</textarea>
                            @error('terms_conditions')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Add Items Section -->
                    <div class="mb-4">
                        <h6 class="mb-3">Add Items</h6>
                        <div class="row mb-3">
                            <div class="col-md-2">
                                <label class="form-label">Item Type</label>
                                <select class="form-select" id="itemType">
                                    <option value="part">Part</option>
                                    <option value="labor">Labor</option>
                                    <option value="service_group">Service Group</option>
                                </select>
                            </div>
                            <div class="col-md-3" id="partField">
                                <label class="form-label">Part</label>
                                <select class="form-select" id="partId">
                                    <option value="">Select Part</option>
                                    @foreach($parts as $part)
                                    <option value="{{ $part->id }}" data-price="{{ $part->selling_price }}">{{ $part->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3" id="laborField" style="display: none;">
                                <label class="form-label">Labor</label>
                                <select class="form-select" id="laborId">
                                    <option value="">Select Labor</option>
                                    @foreach($labors as $labor)
                                    <option value="{{ $labor->id }}" data-price="{{ $labor->rate }}">{{ $labor->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3" id="serviceGroupField" style="display: none;">
                                <label class="form-label">Service Group</label>
                                <select class="form-select" id="serviceGroupId">
                                    <option value="">Select Service Group</option>
                                    @foreach($serviceGroups as $sg)
                                    <option value="{{ $sg->id }}" data-price="{{ $sg->total_price }}">{{ $sg->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Quantity</label>
                                <input type="number" step="1" class="form-control" id="quantity" value="1" min="1">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Unit Price</label>
                                <input type="number" step="0.01" class="form-control" id="unitPrice" min="0">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label">Description</label>
                                <input type="text" class="form-control" id="itemDescription">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Discount Amount</label>
                                <input type="number" step="0.01" class="form-control" id="discountAmount" value="0" min="0">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Discount Type</label>
                                <select class="form-select" id="discountType">
                                    <option value="fixed">Fixed</option>
                                    <option value="percentage">Percentage</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Tax Rate (%)</label>
                                <input type="number" step="0.01" class="form-control" id="taxRate" value="0" min="0" max="100">
                            </div>
                            <div class="col-md-3 d-flex align-items-end">
                                <button type="button" class="btn btn-primary" onclick="addItem()">
                                    <i class="bi bi-plus-lg me-1"></i>Add Item
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Items Table -->
                    <div class="mb-4">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>Item</th>
                                        <th>Type</th>
                                        <th>Qty</th>
                                        <th>Unit Price</th>
                                        <th>Discount</th>
                                        <th>Tax %</th>
                                        <th>Total</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="itemsTableBody">
                                    <!-- Items will be added here dynamically -->
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <td colspan="6" class="text-end fw-bold">Subtotal:</td>
                                        <td class="text-end fw-bold" id="subtotalDisplay">PKR 0.00</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="text-end fw-bold">Tax:</td>
                                        <td class="text-end fw-bold" id="taxDisplay">PKR 0.00</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="text-end fw-bold">Discount:</td>
                                        <td class="text-end fw-bold" id="discountDisplay">PKR 0.00</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="text-end fw-bold">Shipping Charges:</td>
                                        <td class="text-end fw-bold">
                                            <input type="number" step="0.01" class="form-control form-control-sm text-end" id="shippingCharges" name="shipping_charges" value="{{ old('shipping_charges', 0) }}" min="0" oninput="updateOverallTotals()" style="width: 120px; display: inline-block;">
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="6" class="text-end fw-bold">Total:</td>
                                        <td class="text-end fw-bold fs-5" id="totalDisplay">PKR 0.00</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('garage.invoices.index') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i>Save Invoice
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Load vehicles when customer changes
document.getElementById('customerSelect').addEventListener('change', function() {
    const customerId = this.value;
    const vehicleSelect = document.getElementById('vehicleSelect');
    
    if (!customerId) {
        vehicleSelect.innerHTML = '<option value="">Select Vehicle</option>';
        return;
    }
    
    fetch(`/garage/api/vehicles?customer_id=${customerId}`)
        .then(response => response.json())
        .then(data => {
            vehicleSelect.innerHTML = '<option value="">Select Vehicle</option>';
            data.forEach(vehicle => {
                const option = document.createElement('option');
                option.value = vehicle.id;
                let text = vehicle.registration_number;
                if (vehicle.make && vehicle.model) {
                    text += ` - ${vehicle.make} ${vehicle.model}`;
                }
                option.textContent = text;
                vehicleSelect.appendChild(option);
            });
        })
        .catch(error => {
            console.error('Error loading vehicles:', error);
        });
});

// Auto-fill price when item is selected
document.getElementById('partId').addEventListener('change', function() {
    if (this.value) {
        const option = this.options[this.selectedIndex];
        const price = option.getAttribute('data-price');
        if (price) {
            document.getElementById('unitPrice').value = price;
        }
    }
});

document.getElementById('laborId').addEventListener('change', function() {
    if (this.value) {
        const option = this.options[this.selectedIndex];
        const price = option.getAttribute('data-price');
        if (price) {
            document.getElementById('unitPrice').value = price;
        }
    }
});

document.getElementById('serviceGroupId').addEventListener('change', function() {
    if (this.value) {
        const option = this.options[this.selectedIndex];
        const price = option.getAttribute('data-price');
        if (price) {
            document.getElementById('unitPrice').value = price;
        }
    }
});
</script>
@endpush
@endsection