@extends('layouts.user')

@section('content')
<div class="card">
<div class="card-title">Place New Order</div>
<p style="font-size:13px; color:var(--muted); margin-top:-8px;">Balance: {{ format_money($user->balance) }}</p>

<form method="POST" action="/order/new">
@csrf
<input type="hidden" name="service_id" id="serviceIdInput">
<input type="hidden" name="service_name" id="serviceNameInput">
<input type="hidden" name="rate" id="rateInput">

<label>Service</label>
<select id="serviceSelect" onchange="document.getElementById('serviceIdInput').value = this.value;">
<option value="">-- Select a service --</option>
@foreach ($services as $s)
<option
value="{{ (string) ($s['service'] ?? '') }}"
data-rate="{{ (string) $s['final_rate'] }}"
data-min="{{ (string) ($s['min'] ?? '') }}"
data-max="{{ (string) ($s['max'] ?? '') }}"
data-name="{{ $s['name'] ?? '' }}"
{{ ($selectedService !== null && (string) $selectedService === (string) ($s['service'] ?? '')) ? 'selected' : '' }}
>
#{{ (string) ($s['service'] ?? '') }} - {{ $s['name'] ?? '' }} ({{ format_money($s['final_rate']) }}/1000)
</option>
@endforeach
</select>
<p id="minMaxHint" style="font-size:12px; color:var(--muted); margin-top:-10px;"></p>

<label>Link / Username</label>
<input type="text" name="link" required>

<label>Quantity</label>
<input type="number" id="quantityInput" name="quantity" required min="1">

<label>Estimated Charge</label>
<input type="text" id="chargeInput" readonly>

<button type="submit" class="btn btn-primary">Submit Order</button>
</form>
</div>

<script>document.getElementById('serviceIdInput').value = document.getElementById('serviceSelect').value;</script>
@endsection