@extends('layouts.admin')
@section('title', 'Record Alteration')
@section('page-title', 'Record Alteration')
@section('content')
<div class="max-w-2xl">
    <form method="POST" action="{{ route('alterations.store') }}" class="space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        @csrf
        <div>
            <label for="order_id" class="block text-sm font-medium text-slate-700">Order *</label>
            <select name="order_id" id="order_id" required class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm">
                <option value="">Select order</option>
                @foreach($orders as $o)
                <option value="{{ $o->id }}" {{ old('order_id') == $o->id ? 'selected' : '' }}>{{ $o->order_number }}</option>
                @endforeach
            </select>
            @error('order_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        </div>
        @if($order)
        <div>
            <label for="order_item_id" class="block text-sm font-medium text-slate-700">Order item</label>
            <select name="order_item_id" id="order_item_id" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm">
                <option value="">None</option>
                @foreach($order->items as $item)
                <option value="{{ $item->id }}" {{ old('order_item_id') == $item->id ? 'selected' : '' }}>Item {{ $item->id }}</option>
                @endforeach
            </select>
        </div>
        @endif
        <div>
            <label for="tailor_id" class="block text-sm font-medium text-slate-700">Tailor</label>
            <select name="tailor_id" id="tailor_id" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm">
                <option value="">None</option>
                @foreach($tailors as $t)<option value="{{ $t->id }}" {{ old('tailor_id') == $t->id ? 'selected' : '' }}>{{ $t->name }}</option>@endforeach
            </select>
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div><label for="requested_on" class="block text-sm font-medium text-slate-700">Requested on</label><input type="date" name="requested_on" id="requested_on" value="{{ old('requested_on') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm"></div>
            <div><label for="revised_delivery_date" class="block text-sm font-medium text-slate-700">Revised delivery</label><input type="date" name="revised_delivery_date" id="revised_delivery_date" value="{{ old('revised_delivery_date') }}" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm"></div>
        </div>
        <div>
            <label for="status" class="block text-sm font-medium text-slate-700">Status *</label>
            <select name="status" id="status" required class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm">
                <option value="pending" {{ old('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="in_progress">In progress</option>
                <option value="completed">Completed</option>
                <option value="cancelled">Cancelled</option>
            </select>
        </div>
        <div><label for="sequence" class="block text-sm font-medium text-slate-700">Sequence</label><input type="number" name="sequence" id="sequence" value="{{ old('sequence', 1) }}" min="1" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm"></div>
        <div><label for="notes" class="block text-sm font-medium text-slate-700">Notes</label><textarea name="notes" id="notes" rows="3" class="mt-1 block w-full rounded-lg border border-slate-300 shadow-sm">{{ old('notes') }}</textarea></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">Save Alteration</button>
            <a href="{{ route('alterations.index') }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700">Cancel</a>
        </div>
    </form>
</div>
@endsection