@extends('layouts.admin')
@section('title', 'New Order')

@section('content')

<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem">

</div>

<div style="max-width:700px">
    <div class="card" style="padding:1.75rem">
        <div style="margin-bottom:1.5rem">
            <h2 style="font-size:1.1rem;font-weight:800;color:var(--foreground)">Create Manual Order</h2>
            <p style="font-size:0.8rem;color:var(--muted-foreground);margin-top:0.25rem">Manually create an order and generate licenses.</p>
        </div>

        <form method="POST" action="{{ route('admin.orders.store') }}" style="display:flex;flex-direction:column;gap:1rem" id="order-form">
            @csrf

            <div>
                <label>Customer</label>
                <select name="user_id" required class="select">
                    <option value="">Select customer...</option>
                    @foreach($customers as $customer)
                    <option value="{{ $customer->id }}" @selected(old('user_id')==$customer->id)>{{ $customer->name }} ({{ $customer->email }})</option>
                    @endforeach
                </select>
            </div>

            <div id="items-container" style="display:flex;flex-direction:column;gap:0.75rem">
                <div style="font-size:0.875rem;font-weight:700;color:var(--foreground)">Order Items</div>
                <div class="order-item" style="padding:1rem;border-radius:0.75rem;background:var(--muted);border:1px solid var(--border)">
                    <div style="display:grid;grid-template-columns:2fr 1fr 1fr 80px;gap:0.75rem;align-items:end">
                        <div>
                            <label>Product</label>
                            <select name="items[0][product_id]" required class="select" onchange="updatePrice(this,0)">
                                <option value="">Select product...</option>
                                @foreach($products as $product)
                                <option value="{{ $product->id }}" data-price="{{ $product->price }}">{{ $product->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label>License Type</label>
                            <select name="items[0][license_type]" required class="select">
                                <option value="single">Regular — Single domain</option>
                                <option value="unlimited">Extended — Unlimited activations</option>
                            </select>
                        </div>
                        <div>
                            <label>Price ({{ $defaultCurrency }})</label>
                            <input type="number" name="items[0][price]" id="price-0" step="0.01" min="0" required class="input" placeholder="0.00">
                        </div>
                        <div>
                            <label>Qty</label>
                            <input type="number" name="items[0][quantity]" value="1" min="1" required class="input">
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary" style="justify-content:center;padding:0.75rem">
                Create Order
            </button>
        </form>
    </div>
</div>

<script>
function updatePrice(select, idx) {
    const opt = select.options[select.selectedIndex];
    const price = opt.getAttribute('data-price');
    if (price) document.getElementById('price-'+idx).value = parseFloat(price).toFixed(2);
}
</script>

@endsection