@extends('layouts.app')
@section('title', __('طلب جديد'))
@section('content')
<h1 class="text-2xl font-bold mb-6">{{ __('طلب جديد') }}</h1>
<form method="post" action="{{ route('orders.store') }}" class="bg-white border rounded-2xl p-6 max-w-xl space-y-4" x-data="{services:[], selected:null}">@csrf
    <select name="category_id" class="w-full border rounded-lg p-2" @change="fetch('/orders/services?category_id='+$event.target.value).then(r=>r.json()).then(d=>{services=d; selected=null})">
        <option value="">{{ __('التصنيف') }}</option>
        @foreach($categories as $c)<option value="{{ $c->id }}">{{ $c->localizedName() }}</option>@endforeach
    </select>
    <select name="service_id" class="w-full border rounded-lg p-2" @change="selected = services.find(s=>s.id==$event.target.value)">
        <option value="">{{ __('الخدمة') }}</option>
        <template x-for="s in services" :key="s.id"><option :value="s.id" x-text="s.name_ar"></option></template>
    </select>
    <div class="text-sm text-slate-500" x-show="selected">
        <p x-text="selected?.description_ar"></p>
        <p>{{ __('السعر') }}: <span x-text="selected?.price"></span> · min <span x-text="selected?.min_quantity"></span> · max <span x-text="selected?.max_quantity"></span></p>
    </div>
    <input name="link" type="url" required class="w-full border rounded-lg p-2" placeholder="https://">
    <input name="quantity" type="number" min="1" required class="w-full border rounded-lg p-2" placeholder="{{ __('الكمية') }}">
    <textarea name="notes" class="w-full border rounded-lg p-2" placeholder="{{ __('متطلبات إضافية') }}"></textarea>
    <button class="bg-brand-600 text-white rounded-lg px-4 py-2">{{ __('تأكيد الطلب') }}</button>
</form>
@endsection