@extends('layouts.app')

@section('title', 'Create order')

@section('content')
<h1>Create order</h1>
<div class="card">
    <form method="post" action="{{ route('orders.store') }}">
        @csrf
        <label style="display:block; margin-bottom:8px; font-weight:500;">Product</label>
        <select name="product_id" required style="width:100%; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">
            <option value="">Select product</option>
            @foreach($products as $p)
                <option value="{{ $p->id }}" {{ old('product_id') === $p->id ? 'selected' : '' }}>{{ $p->title }} ({{ number_format($p->price, 2) }})</option>
            @endforeach
        </select>
        @error('product_id')<span style="color:#c62828;font-size:0.875rem;">{{ $message }}</span>@enderror

        <label style="display:block; margin-bottom:8px; font-weight:500;">Customer (optional)</label>
        <select name="user_id" style="width:100%; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">
            <option value="">Current user</option>
            @foreach($users as $u)
                <option value="{{ $u->id }}" {{ old('user_id') == $u->id ? 'selected' : '' }}>{{ $u->name }} ({{ $u->email }})</option>
            @endforeach
        </select>
        @error('user_id')<span style="color:#c62828;font-size:0.875rem;">{{ $message }}</span>@enderror

        <label style="display:block; margin-bottom:8px; font-weight:500;">Transaction ID (optional)</label>
        <input type="text" name="transaction_id" value="{{ old('transaction_id') }}" maxlength="255" style="width:100%; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">

        <label style="display:block; margin-bottom:8px; font-weight:500;">Status</label>
        <select name="status" style="width:100%; padding:8px 12px; margin-bottom:16px; border:1px solid var(--m3-outline); border-radius:8px;">
            <option value="pending" {{ old('status', 'pending') === 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="completed" {{ old('status') === 'completed' ? 'selected' : '' }}>Completed</option>
            <option value="refunded" {{ old('status') === 'refunded' ? 'selected' : '' }}>Refunded</option>
            <option value="cancelled" {{ old('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
        </select>

        <div style="display:flex; gap:12px; margin-top:16px;">
            <a href="{{ route('orders.index') }}" style="padding:10px 20px; border-radius:8px; background:var(--m3-surface-variant); color:var(--m3-on-surface); text-decoration:none;">Cancel</a>
            <button type="submit" style="padding:10px 20px; border-radius:8px; background:var(--m3-primary); color:var(--m3-on-primary); border:none; cursor:pointer;">Create order</button>
        </div>
    </form>
</div>
@endsection