<div>
    @section('title')
    Create Drive
    @endsection
    @section('extra-link')
    <link href="{{asset('public/theme/html/demo1/dist/assets/css/pages/wizard/wizard-41894.css?v=7.1.9')}}" rel="stylesheet" type="text/css" />
    @endsection

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class="container">
                <!--begin::Card-->
                <div class="card card-custom card-transparent">
                    <div class="card-body p-0">
                        <!--begin::Wizard-->
                        <div class="wizard wizard-4" id="kt_wizard" data-wizard-state="step-first" data-wizard-clickable="true">
                            <!--begin::Wizard Nav-->
                            <div class="wizard-nav">
                                <div class="wizard-steps">
                                    <div class="wizard-step" data-wizard-type="step" data-wizard-state="current">
                                        <div class="wizard-wrapper">
                                            <div class="wizard-number">1</div>
                                            <div class="wizard-label">
                                                <div class="wizard-title">Profile</div>
                                                <div class="wizard-desc">User's Personal Information</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wizard-step" data-wizard-type="step">
                                        <div class="wizard-wrapper">
                                            <div class="wizard-number">2</div>
                                            <div class="wizard-label">
                                                <div class="wizard-title">Drive Registration</div>
                                                <div class="wizard-desc">User's Drive Details</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wizard-step" data-wizard-type="step">
                                        <div class="wizard-wrapper">
                                            <div class="wizard-number">3</div>
                                            <div class="wizard-label">
                                                <div class="wizard-title">Submission</div>
                                                <div class="wizard-desc">Review and Submit</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Wizard Nav-->
                            <!--begin::Card-->
                            <div class="card card-custom card-shadowless rounded-top-0">
                                <!--begin::Body-->
                                <div class="card-body p-0">
                                    <div class="row justify-content-center py-8 px-8 py-lg-15 px-lg-10">
                                        <div class="col-xl-12 col-xxl-10">
                                            <!--begin::Wizard Form-->
                                            <form class="form" id="kt_form" method="post" enctype="multipart/form-data" @if(auth()->user()->currentTeam->id==1) action="{{url('engineers/drives/create')}}" @else action="{{url('frontdesk/drives/create')}}" @endif>
                                                @csrf
                                                <div class="row justify-content-center">
                                                    <div class="col-xl-9">
                                                        @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                        @endforeach
                                                    </div>
                                                    <div class="col-xl-9">

                                                        <!--begin::Wizard Step 1-->
                                                        <div class="my-5 step" data-wizard-type="step-content" data-wizard-state="current" wire:ignore.self>

                                                            <div class="form-group row">

                                                                <label class="col-xl-12 col-lg-12 col-form-label">Select a User </label>
                                                                <div class="col-lg-12 col-xl-12">

                                                                    <select class="form-control form-control-solid form-control-lg" wire:model.lazy="new_user" name="new_user">
                                                                        <option>[New User]</option>
                                                                        @foreach ($users as $user)
                                                                        <option value="{{$user->id}}">{{$user->first_name}} {{$user->last_name}} ({{$user->email}})</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>


                                                            </div>
                                                            <div wire:loading class="">Loading ...</div>


                                                            <div>
                                                                <h5 class="text-dark font-weight-bold mb-10">User's Profile Details:</h5>
                                                                <!--begin::Group-->
                                                                <div class="form-group row">
                                                                    <label class="col-xl-3 col-lg-3 col-form-label">First Name </label>
                                                                    <div class="col-lg-9 col-xl-9">
                                                                        <input class="form-control form-control-solid form-control-lg" wire:model.lazy="firstname" name="fname" type="text" />
                                                                    </div>
                                                                </div>
                                                                <!--end::Group-->
                                                                <!--begin::Group-->
                                                                <div class="form-group row">
                                                                    <label class="col-xl-3 col-lg-3 col-form-label">Last Name</label>
                                                                    <div class="col-lg-9 col-xl-9">
                                                                        <input class="form-control form-control-solid form-control-lg" wire:model.lazy="lastname" name="lname" type="text" />
                                                                    </div>
                                                                </div>
                                                                <!--end::Group-->
                                                                <!--begin::Group-->
                                                                
                                                                {{-- <div class="form-group row">
                                                                    <label class="col-xl-3 col-lg-3 col-form-label">Company Name</label>
                                                                    <div class="col-lg-9 col-xl-9">
                                                                        <input class="form-control form-control-solid form-control-lg" wire:model.lazy="companyname" name="cname" type="text" placeholder="(optional)">
                                                                    </div>
                                                                </div> --}}

                                                                <!--begin::Group-->
                                                                <div class="form-group row">
                                                                    <label class="col-xl-3 col-lg-3 col-form-label">Contact Phone</label>
                                                                    <div class="col-lg-9 col-xl-9">
                                                                        <div class="input-group input-group-solid input-group-lg">
                                                                            <input type="text" class="form-control form-control-solid form-control-lg" wire:model.lazy="phone" name="phone" />
                                                                        </div>
                                                                        <span class="form-text text-muted">Enter valid phone number(e.g: 0814*******).</span>
                                                                    </div>
                                                                </div>
                                                                <!--end::Group-->
                                                                <!--begin::Group-->
                                                                <div class="form-group row">
                                                                    <label class="col-xl-3 col-lg-3 col-form-label">Email Address</label>
                                                                    <div class="col-lg-9 col-xl-9">
                                                                        <div class="input-group input-group-solid input-group-lg">

                                                                            <input type="email" class="form-control form-control-solid form-control-lg" wire:model.lazy="email" name="email" />

                                                                        </div>
                                                                        @error('email')<span class="form-text text-danger">{{$message}}.</span>@enderror
                                                                    </div>
                                                                </div>
                                                                <!--end::Group-->
                                                                <!--begin::Group-->
                                                                <div class="form-group row">
                                                                    <label class="col-xl-3 col-lg-3 col-form-label">Reason for Recovery</label>
                                                                    <div class="col-lg-9 col-xl-9">
                                                                        <input class="form-control form-control-solid form-control-lg" wire:model.lazy="reason" type="text" name="reason" />
                                                                        <span class="form-text text-muted">Describe what Happened.</span>
                                                                    </div>
                                                                </div>
                                                                <!--end::Group-->
                                                                <!--begin::Group-->
                                                                <div class="form-group row">
                                                                    <label class="col-xl-3 col-lg-3 col-form-label">Amount Paid</label>
                                                                    <div class="col-lg-9 col-xl-9">
                                                                        <div class="input-group input-group-solid input-group-lg">
                                                                            <input type="number" class="form-control form-control-solid form-control-lg" wire:model.lazy="amount_paid" name="amount" placeholder="Enter Amount" />
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!--end::Group-->
                                                            </div>

                                                        </div>

                                                        <!--end::Wizard Step 1-->




                                                        <!--begin::Wizard Step 2-->
                                                        <div class="my-5 step" data-wizard-type="step-content" wire:ignore.self>
                                                            <h5 class="text-dark font-weight-bold mb-10 mt-5">User's Drive Details</h5>
                                                            <!--begin::Group-->
                                                            <div class="form-group row">
                                                                <label class="col-xl-3 col-lg-3 col-form-label">Drive Name</label>
                                                                <div class="col-lg-9 col-xl-9">
                                                                    <input class="form-control form-control-solid form-control-lg" wire:model.lazy="drive_name" name="drive_name" type="text" />
                                                                </div>
                                                            </div>
                                                            <!--end::Group-->
                                                            <!--begin::Group-->
                                                            <div class="form-group row">
                                                                <label class="col-xl-3 col-lg-3 col-form-label">Serial No</label>
                                                                <div class="col-lg-9 col-xl-9">
                                                                    <input class="form-control form-control-solid form-control-lg" wire:model.lazy="serial_no" name="serial_no" type="text" />
                                                                    @error('serial_no')<span class="text-danger">{{$message}}@enderror
                                                                </div>
                                                            </div>
                                                            <!--end::Group-->
                                                            <!--begin::Group-->
                                                            <div class="form-group row">
                                                                <label class="col-xl-3 col-lg-3 col-form-label">Model No</label>
                                                                <div class="col-lg-9 col-xl-9">
                                                                    <input class="form-control form-control-solid form-control-lg" wire:model.lazy="model_no" name="model_no" type="text" />
                                                                </div>
                                                            </div>

                                                            {{-- <div class="form-group row">
                                                                <label class="col-xl-3 col-lg-3 col-form-label">Image</label>
                                                                <div class="col-lg-9 col-xl-9">
                                                                    <input class="form-control form-control-solid form-control-lg" wire:model.lazy="image" name="image" type="file" />
                                                                </div>
                                                                @error('image')<span class="form-text text-danger">{{$message}}</span>@enderror
                                                            </div> --}}

                                                            <!--end::Group-->
                                                            <!--begin::Group-->
                                                            <div class="form-group row">
                                                                <label class="col-form-label col-xl-3 col-lg-3">Status</label>
                                                                <div class="col-xl-9 col-lg-9 col-form-label">
                                                                    <div class="checkbox-inline">
                                                                        <label class="checkbox">
                                                                            <select class="form-control form-control-solid form-control-lg" wire:model.lazy="status" name="status">

                                                                                <option>Yet to assess</option>
                                                                                <option>Assessed</option>
                                                                                <option>Recovered</option>
                                                                                <option>Unable to recover</option>
                                                                            </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!--end::Group-->
                                                        </div>
                                                        <!--end::Wizard Step 2-->





                                                        <!--begin::Wizard Step 3-->
                                                        <div class="my-5 step" data-wizard-type="step-content" wire:ignore.self>
                                                            <h5 class="mb-10 font-weight-bold text-dark">Review your Details and Submit</h5>
                                                            <!--begin::Item-->
                                                            <div class="border-bottom mb-5 pb-5">
                                                                <div class="font-weight-bolder mb-3">User's Personal Information:</div>
                                                                <div class="line-height-xl">Name: {{$firstname}} {{$lastname}}
                                                                    <br />Phone: {{$phone}}
                                                                    <br />Email: {{$email}}</div>
                                                            </div>
                                                            <!--end::Item-->
                                                            <!--begin::Item-->
                                                            <div class="border-bottom mb-5 pb-5">
                                                                <div class="font-weight-bolder mb-3">User's Drive Details:</div>
                                                                <div class="line-height-xl">Drive Name: {{$drive_name}}
                                                                    <br />Serial No: {{$serial_no}}
                                                                    <br />Model No: {{$model_no}}</div>
                                                            </div>
                                                            <!--end::Item-->
                                                            <!--begin::Item-->
                                                            <div>
                                                                <div class="font-weight-bolder">Login Details:</div>
                                                                <div class="line-height-xl">Use Phone Number ({{$phone}})</div>
                                                            </div>
                                                            <!--end::Item-->
                                                        </div>
                                                        <!--end::Wizard Step 3-->




                                                        <!--begin::Wizard Actions-->
                                                        <div class="d-flex justify-content-between border-top pt-10 mt-15">
                                                            <div class="mr-2">
                                                                <button type="button" id="prev-step" class="btn btn-light-primary font-weight-bolder px-9 py-4" data-wizard-type="action-prev">Previous</button>
                                                            </div>
                                                            <div>

                                                                <button type="submit" class="btn btn-success font-weight-bolder px-9 py-4" data-wizard-type="action-submit">Submit</button>

                                                                <button type="button" id="next-step" class="btn btn-primary font-weight-bolder px-9 py-4" data-wizard-type="action-next">Next</button>
                                                            </div>
                                                        </div>
                                                        <!--end::Wizard Actions-->
                                                    </div>
                                                </div>
                                            </form>
                                            <!--end::Wizard Form-->
                                        </div>
                                    </div>
                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::Card-->
                        </div>
                        <!--end::Wizard-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Entry-->
    </div>
    @section('extra-script')
    <script>
        "use strict";
        var KTWizard2 = (function() {
            var t
                , e
                , i
                , r = [];
            return {
                init: function() {
                    (t = KTUtil.getById("kt_wizard"))
                    , (e = KTUtil.getById("kt_form"))
                    , (i = new KTWizard(t, {
                        startStep: 1
                        , clickableSteps: !1
                    })).on(
                            "change"
                            , function(t) {
                                if (!(t.getStep() > t.getNewStep())) {
                                    var e = r[t.getStep() - 1];
                                    return (
                                        e &&
                                        e.validate().then(function(e) {
                                            "Valid" == e
                                                ?
                                                (t.goTo(t.getNewStep())
                                                    , KTUtil.scrollTop()) :
                                                Swal.fire({
                                                    text: "Sorry, looks like there are some errors detected, please try again."
                                                    , icon: "error"
                                                    , buttonsStyling: !1
                                                    , confirmButtonText: "Ok, got it!"
                                                    , customClass: {
                                                        confirmButton: "btn font-weight-bold btn-light"
                                                    , }
                                                , }).then(function() {
                                                    KTUtil.scrollTop();
                                                });
                                        }), !1
                                    );
                                }
                            }
                        )
                        , i.on("changed", function(t) {
                            KTUtil.scrollTop();
                        })
                        , i.on("submit", function(t) {
                            Swal.fire({
                                text: "All is good! Please confirm the form submission."
                                , icon: "success"
                                , showCancelButton: !0
                                , buttonsStyling: !1
                                , confirmButtonText: "Yes, submit!"
                                , cancelButtonText: "No, cancel"
                                , customClass: {
                                    confirmButton: "btn font-weight-bold btn-primary"
                                    , cancelButton: "btn font-weight-bold btn-default"
                                , }
                            , }).then(function(t) {
                                t.value ?
                                    e.submit() :
                                    "cancel" === t.dismiss &&
                                    Swal.fire({
                                        text: "Your form has not been submitted!."
                                        , icon: "error"
                                        , buttonsStyling: !1
                                        , confirmButtonText: "Ok, got it!"
                                        , customClass: {
                                            confirmButton: "btn font-weight-bold btn-primary"
                                        , }
                                    , });
                            });
                        })
                        , r.push(
                            FormValidation.formValidation(e, {
                                fields: {
                                    new_user: {
                                        validators: {
                                            notEmpty: {
                                                message: "This field is required"
                                            , }
                                        , }
                                    , }

                                    , fname: {
                                        validators: {
                                            notEmpty: {
                                                message: "First name is required"
                                            , }
                                        , }
                                    , }
                                    , lname: {
                                        validators: {
                                            notEmpty: {
                                                message: "Last Name is required"
                                            , }
                                        , }
                                    , }
                                    
                                    , phone: {
                                        validators: {
                                            notEmpty: {
                                                message: "Phone is required"
                                            }
                                        , }
                                    , }
                                    , reason: {
                                        validators: {
                                            notEmpty: {
                                                message: "Reason for recovery is required"
                                            }
                                        , }
                                    , }
                                    , amount: {
                                        validators: {
                                            notEmpty: {
                                                message: "Amount is required"
                                            }
                                        , }
                                    , }
                                    , cname: {
                                        validators: {
                                            callback: {
                                                callback: function(input) {
                                                    return true;
                                                }
                                            }
                                        }
                                    , }
                                    , email: {
                                        validators: {
                                            notEmpty: {
                                                message: "Email is required"
                                            }
                                            , emailAddress: {
                                                message: "The value is not a valid email address"
                                            , }
                                        , }
                                    , }
                                , }
                                , plugins: {
                                    trigger: new FormValidation.plugins.Trigger()
                                    , bootstrap: new FormValidation.plugins.Bootstrap({
                                        eleValidClass: ""
                                    , })
                                , }
                            , })
                        )
                        , r.push(
                            FormValidation.formValidation(e, {
                                fields: {
                                    drive_name: {
                                        validators: {
                                            notEmpty: {
                                                message: "Drive name is required"
                                            , }
                                        , }
                                    , }
                                    , serial_no: {
                                        validators: {
                                            notEmpty: {
                                                message: "Serial No is required"
                                            , }
                                        , }
                                    , }
                                  

                                    , model_no: {
                                        validators: {
                                            notEmpty: {
                                                message: "Model No is required"
                                            }
                                        , }
                                    , }
                                    , status: {
                                        validators: {
                                            notEmpty: {
                                                message: "Status is required"
                                            }
                                        , }
                                    , }

                                , }
                                , plugins: {
                                    trigger: new FormValidation.plugins.Trigger()
                                    , bootstrap: new FormValidation.plugins.Bootstrap({
                                        eleValidClass: ""
                                    , })
                                , }
                            , })
                        )



                }
            , };
        })();
        jQuery(document).ready(function() {
            KTWizard2.init();
        });

    </script>
    @endsection

</div>
