@extends('layouts.vendor')

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

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Add New Vehicle</h1>
            <p class="text-gray-600">List a new vehicle for sale</p>
        </div>
        <a href="{{ route('vendor.vehicles.index') }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition duration-300">
            <i class="fas fa-arrow-left mr-2"></i>Back to Vehicles
        </a>
    </div>

    <!-- Form -->
    <form action="{{ route('vendor.vehicles.store') }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-lg shadow-md">
        @csrf
        
        <div class="p-6">
            @include('vendor.vehicles.form')
        </div>

        <!-- Form Actions -->
        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end space-x-3">
            <a href="{{ route('vendor.vehicles.index') }}" class="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400 transition duration-300">
                Cancel
            </a>
            <button type="submit" class="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition duration-300">
                <i class="fas fa-save mr-2"></i>Save Vehicle
            </button>
        </div>
    </form>
</div>
@endsection