@extends('public.layout')
@section('title', 'Place Your Order')
@section('body')
<div class="card shadow-sm mx-auto" style="max-width: 640px;">
    <div class="card-body p-4">
        <h4 class="card-title mb-4">Place Your Repair Order</h4>
        <p class="text-muted small">Enter your details and vehicle information below.</p>

        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        @endif

        <form action="{{ route('public.order.store') }}" method="post">
            @csrf
            <h6 class="mb-2 mt-3">Your details</h6>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Phone <span class="text-danger">*</span></label>
                    <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" required>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email') }}">
                </div>
                <div class="col-12 mb-3">
                    <label class="form-label">Address</label>
                    <textarea name="address" class="form-control" rows="2">{{ old('address') }}</textarea>
                </div>
            </div>

            <h6 class="mb-2 mt-4">Vehicle information</h6>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Make <span class="text-danger">*</span></label>
                    <input type="text" name="vehicle_make" class="form-control" value="{{ old('vehicle_make') }}" placeholder="e.g. Honda" required>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Model <span class="text-danger">*</span></label>
                    <input type="text" name="vehicle_model" class="form-control" value="{{ old('vehicle_model') }}" placeholder="e.g. Civic" required>
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Year</label>
                    <input type="text" name="vehicle_year" class="form-control" value="{{ old('vehicle_year') }}" placeholder="e.g. 2022">
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">VIN</label>
                    <input type="text" name="vehicle_vin" class="form-control" value="{{ old('vehicle_vin') }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Color</label>
                    <input type="text" name="vehicle_color" class="form-control" value="{{ old('vehicle_color') }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Mileage</label>
                    <input type="text" name="vehicle_mileage" class="form-control" value="{{ old('vehicle_mileage') }}">
                </div>
                <div class="col-12 mb-3">
                    <label class="form-label">Items / services requested</label>
                    <textarea name="order_items" class="form-control" rows="3" placeholder="What do you need?">{{ old('order_items') }}</textarea>
                </div>
                <div class="col-12 mb-3">
                    <label class="form-label">Additional notes</label>
                    <textarea name="vehicle_notes" class="form-control" rows="2">{{ old('vehicle_notes') }}</textarea>
                </div>
            </div>

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