@extends('layouts.app')

@section('title', 'Add New Vehicle')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Add New Showroom Vehicle</h1>
        <div class="page-subtitle">Fill in the specification details to list a new luxury vehicle in inventory.</div>
    </div>
    <div>
        <a href="{{ route('admin.vehicles.index') }}" class="btn btn-luxury-outline">
            <i class="bi bi-arrow-left"></i>
            <span>Back to All Vehicles</span>
        </a>
    </div>
</div>

<div class="content-card">
    <div class="content-card-header">
        <h5 class="content-card-title">
            <i class="bi bi-car-front-fill"></i>
            Vehicle Information Specification Sheet
        </h5>
    </div>
    <div class="content-card-body">
        <form action="{{ route('admin.vehicles.store') }}" method="POST">
            @csrf
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label font-weight-bold">Vehicle Name / Model Title</label>
                    <input type="text" name="name" class="form-control" placeholder="e.g. Porsche 911 GT3 RS" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label font-weight-bold">Brand</label>
                    <input type="text" name="brand" class="form-control" placeholder="e.g. Porsche" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label font-weight-bold">Category</label>
                    <input type="text" name="category" class="form-control" placeholder="e.g. Supercar / Coupe" required>
                </div>

                <div class="col-md-3">
                    <label class="form-label font-weight-bold">Price ($ USD)</label>
                    <input type="number" step="0.01" name="price" class="form-control" placeholder="241300" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label font-weight-bold">Year</label>
                    <input type="number" name="year" class="form-control" value="2024" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label font-weight-bold">VIN Number</label>
                    <input type="text" name="vin" class="form-control" placeholder="WP0ZZZ99ZPS2941">
                </div>
                <div class="col-md-3">
                    <label class="form-label font-weight-bold">Status</label>
                    <select name="status" class="form-select" required>
                        <option value="Available" selected>Available</option>
                        <option value="Reserved">Reserved</option>
                        <option value="Sold">Sold</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label font-weight-bold">Mileage</label>
                    <input type="text" name="mileage" class="form-control" placeholder="650 mi">
                </div>
                <div class="col-md-4">
                    <label class="form-label font-weight-bold">Engine Drivetrain</label>
                    <input type="text" name="engine" class="form-control" placeholder="4.0L Flat-6">
                </div>
                <div class="col-md-4">
                    <label class="form-label font-weight-bold">Horsepower / Power Output</label>
                    <input type="text" name="power" class="form-control" placeholder="518 HP">
                </div>

                <div class="col-md-12">
                    <label class="form-label font-weight-bold">Vehicle Image URL</label>
                    <input type="text" name="image" class="form-control" placeholder="https://images.unsplash.com/photo-...">
                </div>

                <div class="col-md-12">
                    <label class="form-label font-weight-bold">Full Description / Spec Notes</label>
                    <textarea name="description" class="form-control" rows="4" placeholder="Enter detailed vehicle highlights, package options, CarFax condition..."></textarea>
                </div>

                <div class="col-md-12">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_featured" id="is_featured" value="1" checked>
                        <label class="form-check-label font-weight-bold" for="is_featured">
                            Feature this vehicle on Homepage Showroom Gallery
                        </label>
                    </div>
                </div>

                <div class="col-12 mt-4 text-end">
                    <button type="submit" class="btn btn-luxury-red px-4 py-2">
                        <i class="bi bi-check-circle-fill me-1"></i> Save & List Vehicle
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection