@extends('layouts.app')

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

@section('content')
    <div class="px-4 py-6 sm:px-0">
        <div class="mb-6">
            <h1 class="text-3xl font-bold text-gray-900">Create New Quotation</h1>
            <p class="text-gray-600">Fill in the details below to create a new quotation</p>
        </div>

        <form action="{{ route('quotations.store') }}" method="POST" id="quotationForm">
            @csrf

            <div class="bg-white shadow rounded-lg overflow-hidden">
                <!-- Basic Information -->
                <div class="p-6 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="client_id" class="block text-sm font-medium text-gray-700">Client *</label>
                            <select name="client_id" id="client_id" required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">Select Client</option>
                                @foreach ($clients as $client)
                                    <option value="{{ $client->id }}"
                                        {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                        {{ $client->company_name }} - {{ $client->contact_person_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('client_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="company_id" class="block text-sm font-medium text-gray-700">Company *</label>
                            <select name="company_id" id="company_id" required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">Select Company</option>
                                @foreach ($companies as $company)
                                    <option value="{{ $company->id }}"
                                        {{ old('company_id') == $company->id ? 'selected' : '' }}>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('company_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="quotation_date" class="block text-sm font-medium text-gray-700">Quotation Date
                                *</label>
                            <input type="date" name="quotation_date" id="quotation_date" required
                                value="{{ old('quotation_date', date('Y-m-d')) }}"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @error('quotation_date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="valid_until_date" class="block text-sm font-medium text-gray-700">Valid Until
                                *</label>
                            <input type="date" name="valid_until_date" id="valid_until_date" required
                                value="{{ old('valid_until_date', date('Y-m-d', strtotime('+30 days'))) }}"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @error('valid_until_date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700">Status *</label>
                            <select name="status" id="status" required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="sent" {{ old('status') == 'sent' ? 'selected' : '' }}>Sent</option>
                                <option value="approved" {{ old('status') == 'approved' ? 'selected' : '' }}>Approved
                                </option>
                                <option value="rejected" {{ old('status') == 'rejected' ? 'selected' : '' }}>Rejected
                                </option>
                                <option value="revised" {{ old('status') == 'revised' ? 'selected' : '' }}>Revised</option>
                            </select>
                            @error('status')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="md:col-span-2">
                            <label for="terms_conditions" class="block text-sm font-medium text-gray-700">Terms &
                                Conditions</label>
                            <textarea name="terms_conditions" id="terms_conditions" rows="3"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('terms_conditions') }}</textarea>
                            @error('terms_conditions')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="md:col-span-2">
                            <label for="notes" class="block text-sm font-medium text-gray-700">Notes</label>
                            <textarea name="notes" id="notes" rows="3"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('notes') }}</textarea>
                            @error('notes')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Line Items -->
                <div class="p-6 border-b border-gray-200">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-medium text-gray-900">Line Items</h2>
                        <button type="button" id="addItem"
                            class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">
                            <i class="fas fa-plus mr-1"></i> Add Item
                        </button>
                    </div>

                    <div id="lineItems">
                        <!-- Line items will be added here dynamically -->
                        <div class="line-item grid grid-cols-12 gap-4 mb-4 items-end">
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700">Item Name *</label>
                                <input type="text" name="items[0][item_name]" required
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700">Description</label>
                                <input type="text" name="items[0][description]"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700">Price *</label>
                                <input type="number" name="items[0][price_per_unit]" required step="0.01" min="0"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 item-price">
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700">UOM *</label>
                                <input type="text" name="items[0][uom]" required
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            </div>
                            <div class="col-span-1">
                                <label class="block text-sm font-medium text-gray-700">Qty *</label>
                                <input type="number" name="items[0][quantity]" required step="0.01" min="0.01"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 item-quantity">
                            </div>
                            <div class="col-span-1">
                                <button type="button" class="remove-item text-red-600 hover:text-red-900" disabled>
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 text-right">
                        <strong>Grand Total: $<span id="grandTotal">0.00</span></strong>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="p-6 bg-gray-50 flex justify-end space-x-3">
                    <a href="{{ route('quotations.index') }}"
                        class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400">
                        Cancel
                    </a>
                    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
                        Create Quotation
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script>
        let itemCount = 1;

        document.getElementById('addItem').addEventListener('click', function() {
            const lineItems = document.getElementById('lineItems');
            const newItem = document.createElement('div');
            newItem.className = 'line-item grid grid-cols-12 gap-4 mb-4 items-end';
            newItem.innerHTML = `
        <div class="col-span-3">
            <input type="text" name="items[${itemCount}][item_name]" required
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        </div>
        <div class="col-span-3">
            <textarea name="items[${itemCount}][description]" rows="2"
                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
        </div>
        <div class="col-span-2">
            <input type="number" name="items[${itemCount}][price_per_unit]" required step="0.01" min="0"
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 item-price">
        </div>
        <div class="col-span-2">
            <input type="text" name="items[${itemCount}][uom]" required
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
        </div>
        <div class="col-span-1">
            <input type="number" name="items[${itemCount}][quantity]" required step="0.01" min="0.01"
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 item-quantity">
        </div>
        <div class="col-span-1">
            <button type="button" class="remove-item text-red-600 hover:text-red-900">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    `;
            lineItems.appendChild(newItem);
            itemCount++;

            updateRemoveButtons();
            attachEventListeners();
        });

        function updateRemoveButtons() {
            const removeButtons = document.querySelectorAll('.remove-item');
            removeButtons.forEach((button, index) => {
                if (index === 0) {
                    button.disabled = true;
                    button.classList.add('text-gray-400');
                    button.classList.remove('text-red-600', 'hover:text-red-900');
                } else {
                    button.disabled = false;
                    button.classList.remove('text-gray-400');
                    button.classList.add('text-red-600', 'hover:text-red-900');
                }
            });
        }

        function attachEventListeners() {
            document.querySelectorAll('.remove-item').forEach(button => {
                button.addEventListener('click', function() {
                    if (!this.disabled) {
                        this.closest('.line-item').remove();
                        calculateGrandTotal();
                    }
                });
            });

            document.querySelectorAll('.item-price, .item-quantity').forEach(input => {
                input.addEventListener('input', calculateGrandTotal);
            });
        }

        function calculateGrandTotal() {
            let grandTotal = 0;
            document.querySelectorAll('.line-item').forEach(item => {
                const price = parseFloat(item.querySelector('.item-price').value) || 0;
                const quantity = parseFloat(item.querySelector('.item-quantity').value) || 0;
                grandTotal += price * quantity;
            });
            document.getElementById('grandTotal').textContent = grandTotal.toFixed(2);
        }

        updateRemoveButtons();
        attachEventListeners();
        calculateGrandTotal();
    </script>
@endsection