@extends('layouts.admin')

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

@section('content')
<div class="max-w-4xl">
    <form action="{{ route('admin.proposals.store') }}" method="POST">
        @csrf
        
        <div class="bg-white rounded-lg shadow p-6">
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Client *</label>
                <select name="client_id" required class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                    <option value="">Select Client</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>{{ $client->name }} - {{ $client->location }}</option>
                    @endforeach
                </select>
                @error('client_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Lift Product *</label>
                <select name="lift_product_id" id="lift_product_id" required class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                    <option value="">Select Lift Product</option>
                    @foreach($liftProducts as $product)
                        <option value="{{ $product->id }}" 
                                data-price="{{ $product->price }}" 
                                data-name="{{ $product->name }}"
                                data-type="{{ $product->type }}"
                                data-capacity="{{ $product->capacity }}"
                                data-speed="{{ $product->speed }}"
                                data-floors="{{ $product->floors }}"
                                {{ old('lift_product_id') == $product->id ? 'selected' : '' }}>
                            {{ $product->name }} - Rs.{{ number_format($product->price, 0, ',', ',') }}
                        </option>
                    @endforeach
                </select>
                @error('lift_product_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <!-- Product Details Display -->
            <div id="product-details" class="mb-4 p-4 bg-gray-50 rounded-lg border hidden">
                <h4 class="font-semibold text-gray-800 mb-2">Selected Product Details</h4>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="font-medium">Product Name:</span> <span id="detail-name"></span>
                    </div>
                    <div>
                        <span class="font-medium">Type:</span> <span id="detail-type"></span>
                    </div>
                    <div>
                        <span class="font-medium">Capacity:</span> <span id="detail-capacity"></span> kg
                    </div>
                    <div>
                        <span class="font-medium">Speed:</span> <span id="detail-speed"></span> m/s
                    </div>
                    <div>
                        <span class="font-medium">Floors:</span> <span id="detail-floors"></span>
                    </div>
                    <div>
                        <span class="font-medium">Base Price:</span> Rs.<span id="detail-price"></span>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Reference Number</label>
                <input type="text" name="reference_number" value="{{ old('reference_number') }}" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                @error('reference_number') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Total Price ($) *</label>
                <input type="number" step="0.01" name="total_price" value="{{ old('total_price') }}" required class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                @error('total_price') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2">Tax Rate (%)</label>
                    <input type="number" step="0.01" name="tax_rate" value="{{ old('tax_rate') }}" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                    @error('tax_rate') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2">Tax Amount ($)</label>
                    <input type="number" step="0.01" name="tax_amount" value="{{ old('tax_amount') }}" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                    @error('tax_amount') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2">Discount Percentage (%)</label>
                    <input type="number" step="0.01" name="discount_percentage" value="{{ old('discount_percentage') }}" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                    @error('discount_percentage') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2">Discount Amount ($)</label>
                    <input type="number" step="0.01" name="discount_amount" value="{{ old('discount_amount') }}" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                    @error('discount_amount') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Grand Total ($)</label>
                <input type="number" step="0.01" name="grand_total" value="{{ old('grand_total') }}" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                @error('grand_total') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Notes</label>
                <textarea name="notes" rows="4" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">{{ old('notes') }}</textarea>
                @error('notes') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Terms & Conditions</label>
                <textarea name="terms" rows="4" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">{{ old('terms') }}</textarea>
                @error('terms') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Valid Until</label>
                <input type="date" name="valid_until" value="{{ old('valid_until') }}" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                @error('valid_until') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Payment Terms</label>
                <input type="text" name="payment_terms" value="{{ old('payment_terms') }}" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="e.g., Net 30, 50% Advance, etc.">
                @error('payment_terms') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Delivery Address</label>
                <input type="text" name="delivery_address" value="{{ old('delivery_address') }}" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                @error('delivery_address') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Installation Notes</label>
                <textarea name="installation_notes" rows="3" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-purple-500">{{ old('installation_notes') }}</textarea>
                @error('installation_notes') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>

            <div class="flex gap-4">
                <button type="submit" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">Create Proposal</button>
                <a href="{{ route('admin.proposals.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">Cancel</a>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const liftProductSelect = document.querySelector('#lift_product_id');
    const totalPrice = document.querySelector('input[name="total_price"]');
    const taxRate = document.querySelector('input[name="tax_rate"]');
    const taxAmount = document.querySelector('input[name="tax_amount"]');
    const discountPercentage = document.querySelector('input[name="discount_percentage"]');
    const discountAmount = document.querySelector('input[name="discount_amount"]');
    const grandTotal = document.querySelector('input[name="grand_total"]');

    function calculateTotals() {
        const total = parseFloat(totalPrice.value) || 0;
        const taxRateVal = parseFloat(taxRate.value) || 0;
        const discountPercentVal = parseFloat(discountPercentage.value) || 0;

        // Calculate tax amount
        const taxAmt = total * (taxRateVal / 100);
        taxAmount.value = taxAmt.toFixed(2);

        // Calculate discount amount
        const discountAmt = total * (discountPercentVal / 100);
        discountAmount.value = discountAmt.toFixed(2);

        // Calculate grand total
        const grandTot = total + taxAmt - discountAmt;
        grandTotal.value = grandTot.toFixed(2);
    }

    // Auto-populate total price when lift product is selected
    liftProductSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const price = selectedOption.getAttribute('data-price');
        const name = selectedOption.getAttribute('data-name');
        const type = selectedOption.getAttribute('data-type');
        const capacity = selectedOption.getAttribute('data-capacity');
        const speed = selectedOption.getAttribute('data-speed');
        const floors = selectedOption.getAttribute('data-floors');
        
        const productDetailsDiv = document.getElementById('product-details');
        
        if (price && price !== '' && name) {
            // Auto-populate total price
            totalPrice.value = price;
            calculateTotals();
            
            // Show product details
            document.getElementById('detail-name').textContent = name;
            document.getElementById('detail-type').textContent = type ? type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()) : 'N/A';
            document.getElementById('detail-capacity').textContent = capacity || 'N/A';
            document.getElementById('detail-speed').textContent = speed || 'N/A';
            document.getElementById('detail-floors').textContent = floors || 'N/A';
            document.getElementById('detail-price').textContent = parseFloat(price).toLocaleString('en-IN');
            
            // Show the details section
            productDetailsDiv.classList.remove('hidden');
        } else {
            // Clear fields and hide details
            totalPrice.value = '';
            calculateTotals();
            productDetailsDiv.classList.add('hidden');
        }
    });

    // Add event listeners for calculations
    totalPrice.addEventListener('input', calculateTotals);
    taxRate.addEventListener('input', calculateTotals);
    discountPercentage.addEventListener('input', calculateTotals);
});
</script>
@endsection