@extends('layouts.app')
@section('title', 'New Order')
@section('content')
<h1 class="text-2xl font-bold mb-6">নতুন অর্ডার</h1>

<form method="POST" action="{{ route('user.orders.store') }}" class="bg-white p-6 rounded-lg shadow max-w-xl space-y-4">
    @csrf
    <div>
        <label class="block text-sm font-medium mb-1">সার্ভিস নির্বাচন করুন</label>
        <select name="service_id" id="service_id" class="w-full border rounded px-3 py-2" required>
            <option value="">-- সার্ভিস বাছাই করুন --</option>
            @foreach($categories as $category)
                <optgroup label="{{ $category->name }}">
                    @foreach($category->services as $service)
                        <option value="{{ $service->id }}" data-rate="{{ $service->rate_per_1000 }}" data-min="{{ $service->min }}" data-max="{{ $service->max }}">
                            {{ $service->id }} - {{ $service->name }} - ৳{{ $service->rate_per_1000 }}/1000
                        </option>
                    @endforeach
                </optgroup>
            @endforeach
        </select>
    </div>

    <div>
        <label class="block text-sm font-medium mb-1">লিংক</label>
        <input type="url" name="link" class="w-full border rounded px-3 py-2" placeholder="https://..." required>
    </div>

    <div>
        <label class="block text-sm font-medium mb-1">কোয়ান্টিটি</label>
        <input type="number" name="quantity" id="quantity" class="w-full border rounded px-3 py-2" required>
        <p class="text-xs text-gray-400 mt-1" id="minmax-hint"></p>
    </div>

    <div class="text-lg font-semibold">আনুমানিক চার্জ: ৳<span id="charge-preview">0.00</span></div>

    <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded hover:bg-indigo-700">অর্ডার প্লেস করুন</button>
</form>

<script>
    const select = document.getElementById('service_id');
    const qty = document.getElementById('quantity');
    const preview = document.getElementById('charge-preview');
    const hint = document.getElementById('minmax-hint');

    function updatePreview() {
        const opt = select.options[select.selectedIndex];
        const rate = parseFloat(opt.dataset.rate || 0);
        const q = parseInt(qty.value || 0);
        preview.textContent = ((rate / 1000) * q).toFixed(2);
        if (opt.dataset.min) hint.textContent = `Min: ${opt.dataset.min} | Max: ${opt.dataset.max}`;
    }
    select.addEventListener('change', updatePreview);
    qty.addEventListener('input', updatePreview);
</script>
@endsection