<div>
    @section('title')
    Edit 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">
                                        <div class="wizard-wrapper">
                                            <div class="wizard-number">1</div>
                                            <div class="wizard-label">
                                                <div class="wizard-title"> Update Drive Info</div>
                                                <div class="wizard-desc">User's Drive Details</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" wire:submit.prevent="save">
                                                @csrf
                                                <div class="row justify-content-center">
                                                    <div class="col-xl-9">
                                                        @if($exists)
                                                        <span class="text-danger">A drive with this serial number already exists</span> <a href="{{url('engineers/drives?q='.$drive->serial_no)}}" style="text-decoration:underline;">here</a>
                                                        @endif



                                                        <div class="my-5 step" data-wizard-type="step-content" data-wizard-state="current" wire:ignore.self>
                                                            <h5 class="text-dark font-weight-bold mb-10 mt-5">User's Drive Details</h5>
                                                            <!--begin::Group-->
                                                            <input type="hidden" name="drive_id" value="{{$drive->id}}">
                                                            <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" />
                                                                </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">Reason</label>
                                                                <div class="col-lg-9 col-xl-9">
                                                                    <input class="form-control form-control-solid form-control-lg" wire:model.lazy="reason" name="reason" type="text" />
                                                                </div>
                                                            </div>
                                                            <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">
                                                                    <input class="form-control form-control-solid form-control-lg" wire:model.lazy="amount_paid" name="amount_paid" type="number" />
                                                                </div>
                                                            </div>
                                                            <div class="form-group row" x-data="{photoName: null, photoPreview: null}">
                                                                <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  hidden" wire:model.lazy="image" name="image" type="file" x-ref="image" x-on:change="
                                                                            photoName = $refs.image.files[0].name;
                                                                            const reader = new FileReader();
                                                                            reader.onload = (e) => {
                                                                                photoPreview = e.target.result;
                                                                            };
                                                                            reader.readAsDataURL($refs.image.files[0]);
                                                                    " />
                                                                </div>
                                                                @error('image')<span class="form-text text-red">{{$message}}</span>@enderror
                                                                <label class="col-xl-3 col-lg-3 col-form-label"></label>
                                                                <div class="col-lg-9 col-xl-9 ">
                                                                    <div class="mt-2" x-show="photoPreview">
                                                                        Preview:
                                                                        <img class="block rounded-full w-20 h-20" x-bind:src=" photoPreview" style="width:100px; margin-left:auto; margin-right:auto;">
                                                                    </div>
                                                                    <img src="{{asset('public/'.$this->oldimage)}}" style="width:100px; margin-left:auto; margin-right:auto;" x-show="! photoPreview" />
                                                                </div>

                                                            </div>





                                                            <div class="form-group row" x-data="{photoName: null, photoPreview: null}">
                                                                <label class="col-xl-3 col-lg-3 col-form-label">Screenshots</label>
                                                                <div class="col-lg-9 col-xl-9">

                                                                    <input class="form-control form-control-solid form-control-lg  hidden" wire:model.lazy="screenshots" name="screenshots" type="file" multiple />
                                                                </div>
                                                                @error('screenshots.*')<span class="form-text text-red">{{$message}}</span>@enderror
                                                                <label class="col-xl-3 col-lg-3 col-form-label"></label>
                                                                <div class="col-lg-9 col-xl-9">

                                                                    @foreach ($screensho as $screenshot)
                                                                    <div class="mb-6 mt-2 ">
                                                                        <div class="flex ">
                                                                            <img src="{{asset('public/'.$screenshot->image)}}" style="width:100px; margin-left:auto; margin-right:auto;" />
                                                                            <button class="btn btn-danger font-weight-bolder px-2 py-1" wire:click="delshot({{$screenshot->id}})">Delete</button>
                                                                        </div>
                                                                    </div>
                                                                    @endforeach

                                                                </div>

                                                            </div>
                                                            <!--end::Group-->
                                                            <!--begin::Group-->
                                                            <div class="form-group row">
                                                                <label class="col-xl-3 col-lg-3 col-form-label">Progress</label>
                                                                <div class="col-lg-9 col-xl-9">
                                                                    <input class="form-control form-control-solid form-control-lg" wire:model.lazy="progress" name="progress" type="number" min="0" max="100" />
                                                                    @error('progress')<span class="form-text text-danger">{{$message}}</span>@enderror
                                                                </div>
                                                            </div>

                                                            <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 @if($this->status=='Yet to assess') selected @endif>Yet to assess</option>
                                                                                <option @if($this->status=='Assessed') selected @endif>Assessed</option>
                                                                                <option @if($this->status=='Recovered') selected @endif>Recovered</option>
                                                                                <option @if($this->status=='Unable to recover') selected @endif>Unable to recover</option>
                                                                            </select>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <!--end::Group-->
                                                        </div>
                                                        <!--end::Wizard Step 2-->





                                                        <!--begin::Wizard Step 3-->

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




                                                        <!--begin::Wizard Actions-->
                                                        <div class="d-flex justify-content-between border-top pt-10 mt-15">
                                                            <div class="mr-2">
                                                                <a href="{{url('engineers/drives/'.$drive->id)}}" id="prev-step" class="btn btn-light-primary font-weight-bolder px-9 py-4">View Drive</a>
                                                            </div>
                                                            <div>
                                                                <div x-data="{ shown: false, timeout: null }" x-init="@this.on('saved', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })" x-show.transition.opacity.out.duration.1500ms="shown" style="display: none;" class='text-sm text-gray-600'>
                                                                    {{ 'Saved.' }}
                                                                </div>
                                                                <button type="submit" class="btn btn-success font-weight-bolder px-9 py-4">Save</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>


</div>
