@extends('admin.layouts.home.main')
@section('title')
    Create Reports
@endsection
@section('main')
    <main class="add_reportPage container-fluid mt-2">
        <div class="pages bg-transparent">
            <h3 class="d-none d-lg-block"><img src="./imgs/home-2.svg" alt="Home"> / Report / <span>Add Report</span></h3>
        </div>
        <section class="profile_information pb-5 rounded-4">
            <header>
                <h3 class="m-0 w-bold mb-3 p-2">Form</h3>
            </header>
            <div class="details row mt-2 p-2 row-gap-3">
                <h3>Create/Update Report</h3>
                <div class="tilte col-12 col-sm-6 col-lg-3 mb-2">
                    <label for="title" class="fw-medium">Report Title</label><br />
                    <input type="text" name="" id="name" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                        placeholder="Select Vehicle" />
                </div>
                <div class="content col-12 col-sm-6 col-lg-3 mb-2">
                    <label for="content" class="fw-medium">Report Content</label><br />
                    <input type="file" id="fileInput" accept="image/*" style="display: none" />
                    <button class="position-relative border-0 bg-transparent w-100">
                        <input type="email" name="" id="email" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                            placeholder="Lorem" />
                        <img role="button" class="downloadReportContent position-absolute end-0 top-0 me-2 mt-2"
                            src="./imgs/DownloadOutlined.svg" alt="DownLoad">
                    </button>
                </div>
                <div class="author col-12 col-sm-6 col-lg-3 mb-2">
                    <label for="author" class="fw-medium">Author</label><br />
                    <input type="text" name="" id="email" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                        placeholder="Select staff " />
                </div>
                <div class="date col-12 col-sm-6 col-lg-3 mb-2">
                    <label for="date" class="fw-medium">Report Date</label><br />
                    <input type="date" name="" id="pass" class="p-2 w-100 rounded-3 mt-1 bg-transparent"
                        placeholder="Lorem" />
                </div>
            </div>
            <footer class="row justify-content-center justify-content-md-evenly mt-3 gap-2">
                <a href="#" type="btn" class="add btn rounded-3 fw-medium col-7 col-md-3">Add a new report</a>
                <a href="#" type="btn" class="edit btn rounded-3 fw-medium col-7 col-md-3">Edit report</a>
            </footer>
        </section>
    </main>
@endsection