<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('./partials/head'); -%>
</head>

<body onload="startTime()">
    <%- include('./partials/header_sidebar'); -%>

    <div class="page-body">
        <div class="container-fluid">
            <div class="page-title">
                <div class="row">
                    <div class="col-sm-6">
                        <h3>Add Vehicle Listing</h3>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/index"><i data-feather="home"></i></a></li>
                            <li class="breadcrumb-item"><a href="/vehicle_listing/list">Vehicle Listings</a></li>
                            <li class="breadcrumb-item active">Add Vehicle</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <form class="needs-validation" novalidate="" action="/vehicle_listing/add" method="post" enctype="multipart/form-data">
                                <div class="row">

                                    <!-- Customer / Owner -->
                                    <div class="col-sm-12 col-md-6 form-group">
                                        <label class="col-form-label">Owner (Customer)</label>
                                        <select class="form-control select2" name="c_id" required>
                                            <option value="">-- Select Customer --</option>
                                            <% if (customers && customers.length > 0) { %>
                                                <% customers.forEach((c) => { %>
                                                    <option value="<%= c.id %>"><%= c.name %> (<%= c.phone %>)</option>
                                                <% }); %>
                                            <% } %>
                                        </select>
                                    </div>

                                    <!-- Expected Price -->
                                    <div class="col-sm-12 col-md-6 form-group">
                                        <label class="col-form-label f-w-600">Expected Price (<%= general.site_currency || '' %>) <span class="text-danger">*</span></label>
                                        <input class="form-control" type="number" step="any" min="0" name="expected_price" placeholder="e.g. 450000" required>
                                    </div>

                                    <!-- Make -->
                                    <div class="col-sm-12 col-md-6 form-group">
                                        <label class="col-form-label f-w-600">Make (Brand) <span class="text-danger">*</span></label>
                                        <input class="form-control" type="text" name="make" placeholder="e.g. Maruti Suzuki, Hyundai, Honda" required>
                                    </div>

                                    <!-- Model -->
                                    <div class="col-sm-12 col-md-6 form-group">
                                        <label class="col-form-label f-w-600">Model <span class="text-danger">*</span></label>
                                        <input class="form-control" type="text" name="model" placeholder="e.g. Swift, i20, City, Creta" required>
                                    </div>

                                    <!-- Year -->
                                    <div class="col-sm-12 col-md-4 form-group">
                                        <label class="col-form-label f-w-600">Manufacturing Year <span class="text-danger">*</span></label>
                                        <input class="form-control" type="number" name="year" min="1990" max="2035" placeholder="e.g. 2021" required>
                                    </div>

                                    <!-- Fuel Type -->
                                    <div class="col-sm-12 col-md-4 form-group">
                                        <label class="col-form-label f-w-600">Fuel Type <span class="text-danger">*</span></label>
                                        <select class="form-control" name="fuel_type" required>
                                            <option value="Petrol">Petrol</option>
                                            <option value="Diesel">Diesel</option>
                                            <option value="CNG">CNG</option>
                                            <option value="Electric">Electric</option>
                                            <option value="Hybrid">Hybrid</option>
                                        </select>
                                    </div>

                                    <!-- Transmission -->
                                    <div class="col-sm-12 col-md-4 form-group">
                                        <label class="col-form-label f-w-600">Transmission <span class="text-danger">*</span></label>
                                        <select class="form-control" name="transmission" required>
                                            <option value="Manual">Manual</option>
                                            <option value="Automatic">Automatic</option>
                                        </select>
                                    </div>

                                    <!-- Status & Sold Switch -->
                                    <div class="col-sm-12 col-md-6 form-group">
                                        <label class="col-form-label f-w-600 d-block">Listing Status</label>
                                        <div class="d-flex align-items-center mt-2">
                                            <div class="icon-state switch-outline me-2">
                                                <label class="switch m-0">
                                                    <input type="checkbox" name="status" checked><span class="switch-state bg-success"></span>
                                                </label>
                                            </div>
                                            <span class="text-muted f-14">Active (Visible to users)</span>
                                        </div>
                                    </div>

                                    <div class="col-sm-12 col-md-6 form-group">
                                        <label class="col-form-label f-w-600 d-block">Sold Out Status</label>
                                        <div class="d-flex align-items-center mt-2">
                                            <div class="icon-state switch-outline me-2">
                                                <label class="switch m-0">
                                                    <input type="checkbox" name="is_sold"><span class="switch-state bg-danger"></span>
                                                </label>
                                            </div>
                                            <span class="text-muted f-14">Mark as Sold Out</span>
                                        </div>
                                    </div>

                                    <!-- Upload Photos -->
                                    <div class="col-12 form-group mt-3">
                                        <label class="col-form-label f-w-600">Vehicle Photos (Up to 9 images)</label>
                                        <input class="form-control" type="file" name="images" accept="image/*" multiple style="height: 48px;">
                                        <small class="text-muted">You can select multiple photos at once (JPG, PNG, WEBP).</small>
                                    </div>

                                </div>

                                <div class="text-end mt-4 pt-3 border-top">
                                    <a href="/vehicle_listing/list" class="btn btn-square btn-light b-r-10 me-2">Cancel</a>
                                    <button class="btn btn-square btn-primary b-r-10" type="submit">Submit Vehicle</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->
    </div>

    <%- include('./partials/footer'); -%>
    <%- include('./partials/script'); -%>
</body>

</html>
