@extends('admin::layouts.master')
@section('pagetitle','Dashboard')
@section('content')



<div class="tab-pane fade active show px-10" id="kt_ecommerce_settings_general" role="tabpanel">

        <div class="d-flex align-items-center justify-content-between flex-lg-grow-1">
            <!--begin::Header title-->
            <div class="d-flex align-items-center" id="kt_docs_header_title">
                <!--begin::Page title-->
                <div class="docs-page-title d-flex flex-column flex-lg-row align-items-lg-center py-5 mb-lg-0" data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_docs_content_container', 'lg': '#kt_docs_header_title'}">
                    <!--begin::Title-->
                    <h1 class="d-flex align-items-center text-dark my-1 fs-2x">Engineer Management</h1>
                    <!--end::Title-->
                    <!--begin::Separator-->
                    <span class="text-muted fs-5 pt-2 px-2 sub_header fw-bolder">
                        /Add New Engineer</span>
                    <!--end::Separator-->
                </div>
                <!--end::Page title-->
            </div>
            <!--end::Header title-->
            <!--begin::Toolbar-->
            <div class="d-flex align-items-center">
                <!--begin::Purchase link-->
                <a class="btn bdr-primary btn-light-primary btn-flex h-40px fw-bolder px-4 px-lg-6" href="/admin/engineer"><span class="p-5">< Back</span></a>
                <!--end::Purchase link-->
            </div>
            <!--end::Toolbar-->
        </div>

        <div class="card card-flush">
            <!--begin::Card body-->
            <div class="card-body p-0">
                <form id="kt_add_engineer_form" method="post" class="form" enctype="multipart/form-data"  action="{{ route('add-engineer') }}">
                    @csrf
                    <div class="row">
                        <div class="col-3" style="border-right: 2px solid #e4e6ef;">
                            <div class="card card-flush">
                                <div class="card-body d-flex flex-center flex-column ">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-125px symbol-circle mb-2">
                                        <img id="uploadedImage" src="/logo/no-image.jpg" alt="image">
                                    </div>
                                    <!--end::Avatar-->
                                    <!--begin::Uploadphoto-->
                                    <span id="uploadButton" class="btn btn-sm mt-3 bdr-primary btn-light-primary"><svg height="20px" viewBox="0 0 1792 1792" width="20px" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M1344 1472q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h427q21 56 70.5 92t110.5 36h256q61 0 110.5-36t70.5-92h427q40 0 68 28t28 68zm-325-648q-17 40-59 40h-256v448q0 26-19 45t-45 19h-256q-26 0-45-19t-19-45v-448h-256q-42 0-59-40-17-39 14-69l448-448q18-19 45-19t45 19l448 448q31 30 14 69z"/></svg><span class="px-2 fw-bold"> Upload Photo</span></span>
                                    <input type="file" id="fileInput" name="uploadimg" accept="image/*"  style="display:none;">
                                    <!--end::Uploadphoto-->
                                </div>
                            </div>
                        </div>

                        <div class="col-9 pt-5 px-8">
                            <span class="fs-5 fw-boldest">Basic information</span>
                            <div class="d-flex flex-column flex-md-row gap-5 mt-3">
                                <div class="flex-row-fluid fixed-width">
                                    <!-- Input-->
                                    <input class="form-control" name="engineername" placeholder="Engineer Name" value="">
                                    <!--end::Input-->
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                                <div class="flex-row-fluid fixed-width">
                                    <!-- Input-->
                                    <input class="form-control" name="location" placeholder="Location" value="">
                                    <!--end::Input-->
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                                <div class="flex-row-fluid fixed-width">
                                    <!-- Input-->
                                    <input class="form-control" name="email" placeholder="Email Address" value="">
                                    <!--end::Input-->
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="d-flex flex-column flex-md-row gap-5 mt-5 mb-5">
                                <div class="flex-row-fluid fixed-width">
                                    <!-- Input-->
                                    <input class="form-control" name="contactno" placeholder="Contact No." value="">
                                    <!--end::Input-->
                                </div>
                            </div>
                            <hr>
                            <div class="text-center">
                                <button type="submit" class="btn btn-sm  btn-primary m-5">Add Engineer</button>
                                <a href="/admin/engineer" class="btn btn-sm btn-secondary">Cancel</a>
                            </div>
                        </div>
                        
                    </div>
                </form>
            </div>
            <!--end::Card body-->
        </div>

</div>



@endsection
@section('scripts')
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="{{asset('js/admin/engineer/addengineer.js')}}"></script>
@endsection