@extends('layouts.main')

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

@section('content')
<div class="mb-6">
    <a href="{{ route('quotations.index') }}" class="text-gray-500 hover:text-gray-700 flex items-center">
        <i class="fas fa-arrow-left mr-2"></i> Back to Quotations
    </a>
</div>

<div class="bg-white rounded-xl shadow-md p-8">
    <h2 class="text-2xl font-bold text-gray-800 mb-6">Create New Quotation</h2>
    
    <form action="{{ route('quotations.store') }}" method="POST" id="quotationForm">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div>
                <label class="block text-gray-700 text-sm font-semibold mb-2">Customer *</label>
                <select name="customer_id" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200" 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')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label class="block text-gray-700 text-sm font-semibold mb-2">Quotation Date *</label>
                <input type="date" name="quotation_date" value="{{ old('quotation_date', date('Y-m-d')) }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200" required>
                @error('quotation_date')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label class="block text-gray-700 text-sm font-semibold mb-2">Valid Until *</label>
                <input type="date" name="valid_until" value="{{ old('valid_until') }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200" required>
                @error('valid_until')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Quotation Items</h3>
            <div class="overflow-x-auto">
                <table class="w-full" id="itemsTable">
                    <thead class="bg-gray-50">
                        <tr class="text-left text-gray-500 text-sm">
                            <th class="px-4 py-3 font-semibold">Product</th>
                            <th class="px-4 py-3 font-semibold w-32">Quantity</th>
                            <th class="px-4 py-3 font-semibold w-40">Unit Price</th>
                            <th class="px-4 py-3 font-semibold w-40 text-right">Total</th>
                            <th class="px-4 py-3 font-semibold w-20"></th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody">
                    </tbody>
                </table>
            </div>
            <button type="button" onclick="addItem()" class="mt-4 text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
                <i class="fas fa-plus mr-2"></i> Add Item
            </button>
        </div>

        <div class="border-t border-gray-200 pt-6">
            <div class="flex justify-end">
                <div class="w-64">
                    <div class="flex justify-between mb-2">
                        <span class="text-gray-600">Subtotal:</span>
                        <span class="font-medium text-gray-800" id="subtotal">0.00</span>
                    </div>
                    <div class="flex justify-between mb-2">
                        <span class="text-gray-600">Tax (10%):</span>
                        <span class="font-medium text-gray-800" id="tax">0.00</span>
                    </div>
                    <div class="flex justify-between pt-2 border-t border-gray-200">
                        <span class="font-bold text-gray-800">Total:</span>
                        <span class="font-bold text-indigo-600 text-xl" id="total">0.00</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end mt-6">
            <a href="{{ route('quotations.index') }}" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium mr-3">Cancel</a>
            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium">
                <i class="fas fa-save mr-2"></i> Create Quotation
            </button>
        </div>
    </form>
</div>

<script>
let itemCount = 0;
const products = @json($products);

function addItem() {
    const tbody = document.getElementById('itemsBody');
    const row = document.createElement('tr');
    row.className = 'item-row';
    row.id = 'item-row-' + itemCount;
    
    let productOptions = '<option value="">Select Product</option>';
    products.forEach(p => {
        productOptions += `<option value="${p.id}" data-price="${p.price || 0}">${p.name}</option>`;
    });
    
    row.innerHTML = `
        <td class="px-4 py-2">
            <select name="items[${itemCount}][product_id]" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500 product-select" onchange="updatePrice(${itemCount})" required>
                ${productOptions}
            </select>
        </td>
        <td class="px-4 py-2">
            <input type="number" name="items[${itemCount}][quantity]" value="1" min="1" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500 quantity-input" onchange="calculateTotal()" required>
        </td>
        <td class="px-4 py-2">
            <input type="number" name="items[${itemCount}][price]" value="0" min="0" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500 price-input" onchange="calculateTotal()" required>
        </td>
        <td class="px-4 py-2 text-right font-medium item-total">0.00</td>
        <td class="px-4 py-2">
            <button type="button" onclick="removeItem(${itemCount})" class="text-red-600 hover:text-red-800">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    `;
    
    tbody.appendChild(row);
    itemCount++;
}

function updatePrice(rowId) {
    const row = document.getElementById('item-row-' + rowId);
    const select = row.querySelector('.product-select');
    const priceInput = row.querySelector('.price-input');
    const selectedOption = select.options[select.selectedIndex];
    const price = selectedOption.dataset.price || 0;
    priceInput.value = price;
    calculateTotal();
}

function removeItem(rowId) {
    const row = document.getElementById('item-row-' + rowId);
    row.remove();
    calculateTotal();
}

function calculateTotal() {
    let subtotal = 0;
    document.querySelectorAll('.item-row').forEach(row => {
        const quantity = parseFloat(row.querySelector('.quantity-input').value) || 0;
        const price = parseFloat(row.querySelector('.price-input').value) || 0;
        const itemTotal = quantity * price;
        row.querySelector('.item-total').textContent = itemTotal.toFixed(2);
        subtotal += itemTotal;
    });
    
    const tax = subtotal * 0.10;
    const total = subtotal + tax;
    
    document.getElementById('subtotal').textContent = subtotal.toFixed(2);
    document.getElementById('tax').textContent = tax.toFixed(2);
    document.getElementById('total').textContent = total.toFixed(2);
}

addItem();
</script>
@endsection