@extends('admin.layout')

@section('page-title', 'Create Order')

@section('content')
<div class="max-w-6xl">
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-6">Create New Order</h1>
            
            <form action="{{ route('admin.orders.store') }}" method="POST" id="orderForm">
                @csrf
                
                <div class="space-y-6">
                    <!-- Customer Selection -->
                    <div>
                        <label for="customer_id" class="block text-sm font-medium text-gray-700">Customer *</label>
                        <select name="customer_id" id="customer_id" required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select Customer</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->display_name }}</option>
                            @endforeach
                        </select>
                        @error('customer_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Order Items -->
                    <div>
                        <div class="flex justify-between items-center mb-4">
                            <label class="block text-sm font-medium text-gray-700">Order Items *</label>
                            <button type="button" onclick="addItem()" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
                                Add Item
                            </button>
                        </div>
                        <div id="items-container" class="space-y-3">
                            <!-- Items will be added here dynamically -->
                        </div>
                        @error('items')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Payment Section -->
                    <div class="border-t pt-4">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Payment (Optional)</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label for="payment_amount" class="block text-sm font-medium text-gray-700">Payment Amount</label>
                                <input type="number" name="payment_amount" id="payment_amount" step="0.01" min="0" value="{{ old('payment_amount') }}"
                                       onchange="updatePaymentSummary()"
                                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            </div>
                            <div>
                                <label for="payment_discount" class="block text-sm font-medium text-gray-700">Discount</label>
                                <input type="number" name="payment_discount" id="payment_discount" step="0.01" min="0" value="{{ old('payment_discount', '0.00') }}"
                                       onchange="updatePaymentSummary()"
                                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            </div>
                            <div>
                                <label for="payment_method" class="block text-sm font-medium text-gray-700">Payment Method</label>
                                <select name="payment_method" id="payment_method"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">Select Method</option>
                                    @foreach($paymentMethods as $method)
                                        <option value="{{ $method->name }}" {{ old('payment_method') == $method->name ? 'selected' : '' }}>{{ $method->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <!-- Payment Summary -->
                        <div class="mt-4 bg-blue-50 rounded-lg p-4 border border-blue-200" id="payment-summary" style="display: none;">
                            <h4 class="text-sm font-semibold text-gray-700 mb-2">Payment Summary</h4>
                            <div class="space-y-1 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Payment Amount:</span>
                                    <span class="font-medium text-gray-900" id="summary-payment">$0.00</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Discount:</span>
                                    <span class="font-medium text-red-600" id="summary-discount">-$0.00</span>
                                </div>
                                <div class="flex justify-between pt-2 border-t border-blue-200">
                                    <span class="font-semibold text-gray-700">Amount Applied:</span>
                                    <span class="font-bold text-lg text-blue-600" id="summary-applied">$0.00</span>
                                </div>
                            </div>
                        </div>
                        
                        <p class="mt-2 text-sm text-gray-500">Leave empty if customer will pay later</p>
                    </div>

                    <!-- Notes -->
                    <div>
                        <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-blue-500 focus:ring-blue-500">{{ old('notes') }}</textarea>
                    </div>

                    <!-- Total Display -->
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-medium text-gray-900">Total Amount:</span>
                            <span class="text-2xl font-bold text-gray-900" id="total-display">$0.00</span>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 flex justify-end space-x-3">
                    <a href="{{ route('admin.orders.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium">
                        Cancel
                    </a>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
                        Create Order
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let itemCount = 0;
const pricing = @json($pricing->keyBy(function($p) { return $p->cloth_type_id . '_' . $p->service_type_id; }));

function addItem() {
    itemCount++;
    const container = document.getElementById('items-container');
    const itemDiv = document.createElement('div');
    itemDiv.className = 'border rounded-lg p-4 bg-gray-50';
    itemDiv.id = `item-${itemCount}`;
    
    itemDiv.innerHTML = `
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700">Cloth Type *</label>
                <select name="items[${itemCount}][cloth_type_id]" required onchange="updatePrice(${itemCount})"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">Select</option>
                    @foreach($clothTypes as $clothType)
                        <option value="{{ $clothType->id }}">{{ $clothType->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Service Type *</label>
                <select name="items[${itemCount}][service_type_id]" required onchange="updatePrice(${itemCount})"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">Select</option>
                    @foreach($serviceTypes as $serviceType)
                        <option value="{{ $serviceType->id }}">{{ $serviceType->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Quantity *</label>
                <input type="number" name="items[${itemCount}][quantity]" min="1" value="1" required onchange="calculateTotal()"
                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
            </div>
            <div class="flex items-end">
                <button type="button" onclick="removeItem(${itemCount})" class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm">
                    Remove
                </button>
            </div>
        </div>
        <div class="mt-2 text-sm text-gray-600">
            <span id="price-display-${itemCount}">Price: $0.00</span>
        </div>
    `;
    
    container.appendChild(itemDiv);
}

function removeItem(id) {
    document.getElementById(`item-${id}`).remove();
    calculateTotal();
}

function updatePrice(itemId) {
    const itemDiv = document.getElementById(`item-${itemId}`);
    const clothTypeId = itemDiv.querySelector(`select[name="items[${itemId}][cloth_type_id]"]`).value;
    const serviceTypeId = itemDiv.querySelector(`select[name="items[${itemId}][service_type_id]"]`).value;
    const priceDisplay = document.getElementById(`price-display-${itemId}`);
    
    if (clothTypeId && serviceTypeId) {
        const key = `${clothTypeId}_${serviceTypeId}`;
        const price = pricing[key]?.price || 0;
        priceDisplay.textContent = `Price: $${parseFloat(price).toFixed(2)}`;
    } else {
        priceDisplay.textContent = 'Price: $0.00';
    }
    calculateTotal();
}

function calculateTotal() {
    let total = 0;
    for (let i = 1; i <= itemCount; i++) {
        const itemDiv = document.getElementById(`item-${i}`);
        if (!itemDiv) continue;
        
        const clothTypeId = itemDiv.querySelector(`select[name="items[${i}][cloth_type_id]"]`)?.value;
        const serviceTypeId = itemDiv.querySelector(`select[name="items[${i}][service_type_id]"]`)?.value;
        const quantity = parseInt(itemDiv.querySelector(`input[name="items[${i}][quantity]"]`)?.value || 0);
        
        if (clothTypeId && serviceTypeId) {
            const key = `${clothTypeId}_${serviceTypeId}`;
            const price = pricing[key]?.price || 0;
            total += price * quantity;
        }
    }
    
    document.getElementById('total-display').textContent = `$${total.toFixed(2)}`;
    updatePaymentSummary();
}

function updatePaymentSummary() {
    const paymentAmount = parseFloat(document.getElementById('payment_amount')?.value || 0);
    const discount = parseFloat(document.getElementById('payment_discount')?.value || 0);
    const applied = Math.max(0, paymentAmount - discount);
    const paymentSummary = document.getElementById('payment-summary');

    if (paymentAmount > 0) {
        paymentSummary.style.display = 'block';
        document.getElementById('summary-payment').textContent = `$${paymentAmount.toFixed(2)}`;
        document.getElementById('summary-discount').textContent = `-$${discount.toFixed(2)}`;
        document.getElementById('summary-applied').textContent = `$${applied.toFixed(2)}`;
    } else {
        paymentSummary.style.display = 'none';
    }
}

// Add first item on page load
document.addEventListener('DOMContentLoaded', function() {
    addItem();
});
</script>
@endsection