@extends('layouts.admin')
@section('title', 'New Order')
@section('page-title', 'New Order')
@section('content')
<div class="max-w-4xl">
    <form action="{{ route('orders.store') }}" method="POST" class="space-y-6">
        @csrf
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-800 mb-4">Order details</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="branch_id" class="block text-sm font-medium text-slate-700">Branch *</label>
                    <select name="branch_id" id="branch_id" required class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">@foreach($branches as $b)<option value="{{ $b->id }}">{{ $b->name }}</option>@endforeach</select>
                </div>
                <div>
                    <label for="customer_id" class="block text-sm font-medium text-slate-700">Customer *</label>
                    <select name="customer_id" id="customer_id" required class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">@foreach($customers as $c)<option value="{{ $c->id }}">{{ $c->full_name }} ({{ $c->customer_code }})</option>@endforeach</select>
                </div>
                <div>
                    <label for="order_date" class="block text-sm font-medium text-slate-700">Order date *</label>
                    <input type="date" name="order_date" id="order_date" value="{{ date('Y-m-d') }}" required class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                </div>
                <div>
                    <label for="priority" class="block text-sm font-medium text-slate-700">Priority</label>
                    <select name="priority" id="priority" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">@foreach(config('order.priorities') as $k => $v)<option value="{{ $k }}">{{ $v }}</option>@endforeach</select>
                </div>
                <div>
                    <label for="expected_trial_date" class="block text-sm font-medium text-slate-700">Expected trial date</label>
                    <input type="date" name="expected_trial_date" id="expected_trial_date" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                </div>
                <div>
                    <label for="expected_delivery_date" class="block text-sm font-medium text-slate-700">Expected delivery date</label>
                    <input type="date" name="expected_delivery_date" id="expected_delivery_date" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">
                </div>
                <div>
                    <label for="assigned_tailor_id" class="block text-sm font-medium text-slate-700">Assigned tailor</label>
                    <select name="assigned_tailor_id" id="assigned_tailor_id" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm"><option value="">None</option>@foreach($tailors as $t)<option value="{{ $t->id }}">{{ $t->name }}</option>@endforeach</select>
                </div>
                <div>
                    <label for="measurement_profile_id" class="block text-sm font-medium text-slate-700">Measurement profile</label>
                    <select name="measurement_profile_id" id="measurement_profile_id" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm"><option value="">None</option>@foreach($measurementProfiles as $mp)<option value="{{ $mp->id }}">{{ $mp->customer->full_name ?? 'N/A' }} — v{{ $mp->version }}</option>@endforeach</select>
                </div>
                <div>
                    <label for="fabric_source" class="block text-sm font-medium text-slate-700">Fabric source</label>
                    <select name="fabric_source" id="fabric_source" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm">@foreach(config('order.fabric_sources') as $k => $v)<option value="{{ $k }}">{{ $v }}</option>@endforeach</select>
                </div>
                <div class="sm:col-span-2"><label class="flex items-center gap-2"><input type="checkbox" name="trial_required" value="1" checked> Trial required</label></div>
                <div class="sm:col-span-2"><label for="fabric_details" class="block text-sm font-medium text-slate-700">Fabric details</label><textarea name="fabric_details" id="fabric_details" rows="2" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm"></textarea></div>
                <div class="sm:col-span-2"><label for="design_instructions" class="block text-sm font-medium text-slate-700">Design instructions</label><textarea name="design_instructions" id="design_instructions" rows="2" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm"></textarea></div>
                <div class="sm:col-span-2"><label for="special_notes" class="block text-sm font-medium text-slate-700">Special notes</label><textarea name="special_notes" id="special_notes" rows="2" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm"></textarea></div>
                <div><label for="discount" class="block text-sm font-medium text-slate-700">Discount</label><input type="number" name="discount" id="discount" value="0" step="0.01" min="0" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm"></div>
                <div><label for="advance_paid" class="block text-sm font-medium text-slate-700">Advance paid</label><input type="number" name="advance_paid" id="advance_paid" value="0" step="0.01" min="0" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm sm:text-sm"></div>
            </div>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm" x-data="orderItemsForm()">
            <h2 class="text-lg font-semibold text-slate-800 mb-4">Order items (add at least one; select garment or service per row)</h2>
            <template x-for="(row, idx) in rows" :key="idx">
                <div class="mb-3 flex flex-wrap items-end gap-3 rounded-lg border border-slate-100 bg-slate-50 p-3">
                    <div class="min-w-[160px] flex-1">
                        <label class="block text-xs text-slate-500">Garment</label>
                        <select :name="'items[' + idx + '][garment_type_id]'" class="item-garment mt-1 block w-full rounded border border-slate-300 text-sm" x-ref="garmentSelect">
                            <option value="">—</option>
                            @foreach($garmentTypes as $gt)<option value="{{ $gt->id }}" data-price="{{ $gt->base_price }}">{{ $gt->name }} ({{ $gt->base_price }})</option>@endforeach
                        </select>
                    </div>
                    <div class="min-w-[160px] flex-1">
                        <label class="block text-xs text-slate-500">Or Service</label>
                        <select :name="'items[' + idx + '][service_id]'" class="item-service mt-1 block w-full rounded border border-slate-300 text-sm" x-ref="serviceSelect">
                            <option value="">—</option>
                            @foreach($services as $s)<option value="{{ $s->id }}" data-price="{{ $s->base_price }}">{{ $s->name }} ({{ $s->base_price }})</option>@endforeach
                        </select>
                    </div>
                    <div class="w-20"><label class="block text-xs text-slate-500">Qty</label><input type="number" :name="'items[' + idx + '][quantity]'" value="1" min="1" class="mt-1 block w-full rounded border border-slate-300 text-sm"></div>
                    <div class="w-28"><label class="block text-xs text-slate-500">Unit price</label><input type="number" :name="'items[' + idx + '][unit_price]'" value="0" step="0.01" min="0" class="item-price mt-1 block w-full rounded border border-slate-300 text-sm"></div>
                    <div class="w-36"><label class="block text-xs text-slate-500">Notes</label><input type="text" :name="'items[' + idx + '][item_notes]'" class="mt-1 block w-full rounded border border-slate-300 text-sm"></div>
                    <div class="w-10"><button type="button" @click="removeRow(idx)" x-show="rows.length > 1" class="rounded border border-red-200 bg-red-50 p-2 text-red-600 hover:bg-red-100" title="Remove row">&times;</button></div>
                </div>
            </template>
            <button type="button" @click="addRow()" class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">+ Add item</button>
        </div>
        <div class="flex gap-3">
            <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Create order</button>
            <a href="{{ route('orders.index') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
        </div>
    </form>
</div>
@push('scripts')
<script>
function orderItemsForm() {
    return {
        rows: [{}],
        addRow() { this.rows.push({}); },
        removeRow(idx) { this.rows.splice(idx, 1); }
    };
}
</script>
@endpush
@endsection