@extends('admin.layouts.home.main')

@section('main')
    <main class="create_updatePage container-fluid mt-2">
        <section class="pages gap-2 p-2 rounded-3 mb-1 mt-2 d-none d-lg-block bg-transparent">
            <h3><img src="./imgs/home-2.svg" alt="Home"> / Driver / <span>Create/Update Vehicle</span></h3>
        </section>
        <section class="profile_information rounded-4">
            <header class="header-form p-3">
                <h3 class="fw-bold mb-2">Create/Update Vehicle</h3>
            </header>
            <div class="details row-gap-4 p-3 row">
                <h3 class="fw-bold mb-4">Information</h3>
                <div class="v_number col-12 col-sm-6 col-lg-3">
                    <label for="v_number" class="fw-medium">Vehicle Number</label><br />
                    <input type="text" name="" id="v_number" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                        placeholder="Select Vehicle" />
                </div>
                <div class="type col-12 col-sm-6 col-lg-3">
                    <label for="type" class="fw-medium">Type</label><br />
                    <select name="" id="type" class="p-2 w-100 rounded-3 mt-1 bg-transparent">
                        <option value="" disabled hidden selected>Name</option>
                    </select>
                </div>
                <div class="assoc col-12 col-sm-6 col-lg-3">
                    <label for="assoc" class="fw-medium">associated Driver</label><br />
                    <select name="" id="type" class="p-2 w-100 rounded-3 mt-1 bg-transparent">
                        <option value="" disabled hidden selected>Name</option>
                    </select>
                </div>
                <div class="capacity col-12 col-sm-6 col-lg-3">
                    <label for="capacity" class="fw-medium">Capacity</label><br />
                    <input type="text" name="" id="capacity" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                        placeholder="Select Staff" />
                </div>
                <div class="c_location col-12 col-sm-6 col-lg-3">
                    <label for="c_location" class="fw-medium">Current Location</label><br />
                    <input type="text" name="" id="c_location" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                        placeholder="Select Vehicle" />
                </div>
                <div class="status col-12 col-sm-6 col-lg-3">
                    <label for="status" class="fw-medium">Status</label><br />
                    <input type="email" name="" id="status" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                        placeholder="Select Staff" />
                </div>
                <footer class="row justify-content-center justify-content-md-evenly mt-4">
                    <div class="col-7 col-md-3 px-2 my-2"><a href="#"
                            class="add w-100 btn text-decoration-none fw-medium rounded-4 py-2" type="btn">Add a new
                            vehicle</a></div>
                    <div class="col-7 col-md-3 px-2 my-2"><a href="#"
                            class="edit w-100 btn text-decoration-none fw-medium rounded-4 py-2" type="btn">Edit a
                            vehicle</a></div>
                </footer>
        </section>
    </main>
@endsection