<div class="card container">
    <div class="card-body">
        <form wire:submit.prevent="submit" class="needs-validation custom-validation" novalidate autocomplete="off" enctype="multipart/form-data">
            <div class="row">
                <div class="col-12 mb-4">
                    <div class="form-group row mb-0 mb-md-3">
                        <label for="feature_image" class="col-md-2 col-form-label">Profile<sup class="text-danger">*</sup></label>
                        <div class="col-md-10 text-center">
                            @empty($old_image) <!-- None avatar -->
                            <label for="feature_image" class="hover-avatar">
                                <img src="{{ $feature_image?$feature_image->temporaryUrl():asset('backend/images/avatar.jpg') }}" alt="feature_image" class="img-thumbnail rounded-circle avatar-xl img-clickable feature-img @error('feature_image') border-danger @enderror" data-holder-rendered="true">
                            </label>
                            <input type="file" id="feature_image" wire:model="feature_image" class="custom-file-input d-none"/>
                            @else <!-- Have avatar -->
                            <label for="feature_image" class="hover-avatar">
                                <img src="{{ $feature_image?$feature_image->temporaryUrl():asset($old_image) }}" alt="feature_image" class="img-thumbnail rounded-circle avatar-xl img-clickable feature-img @error('feature_image') border-danger @enderror" data-holder-rendered="true">
                            </label>
                            <input type="file" id="feature_image" wire:model="feature_image" class="custom-file-input d-none" accept="image/*" />
                            @endempty

                            @error('feature_image')    
                            <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">
                                <li class="parsley-required text-center">{{$message}}</li>
                            </ul>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row mb-0 mb-md-1">
                        <label for="name" class="col-md-2 col-form-label">Name<sup class="text-danger">*</sup></label>
                        <div class="col-md-10">
                            <input class="form-control" wire:model="user.name" type="text" id="name" required>
                        </div>
                    </div>
                    
                    <div class="form-group row mb-0 mb-md-1">
                        <label for="gender" class="col-md-2 col-form-label">Gender<sup class="text-danger">*</sup></label>
                        <div class="col-md-10">
                            <select wire:model="user.gender" id="gender" class="form-control" required>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row mb-0 mb-md-1">
                        <label for="email" class="col-md-2 col-form-label">Email<sup class="text-danger">*</sup></label>
                        <div class="col-md-10">
                            <input class="form-control" type="email" wire:model="user.email" id="email" required>
                        </div>
                    </div>
                    <div class="form-group row mb-0 mb-md-1">
                        <label for="phone" class="col-md-2 col-form-label">Phone</label>
                        <div class="col-md-10">
                            <input class="form-control" wire:model="user.phone" type="text" id="phone">
                        </div>
                    </div>
                    <div class="form-group row mb-0 mb-md-1">
                        <label for="desc" class="col-md-2 col-form-label">Description</label>
                        <div class="col-md-10">
                            <textarea wire:model="user.desc" class="form-control" id="desc" rows="5" placeholder="Enter description..."></textarea>
                        </div>
                    </div>
                    <div class="form-group row mb-0 mb-md-1">
                        <label for="password" class="col-md-2 col-form-label">New Password</label>
                        <div class="col-md-10">
                            <input type="password" id="password" wire:model="password" class="form-control" placeholder="Enter new password" @if (strlen($password) > 0) required @endif />
                            @if (strlen($this->password))
                            @error('password')    
                            <ul class="parsley-errors-list filled" id="parsley-id-5" aria-hidden="false">
                                <li class="parsley-required">{{$message}}</li>
                            </ul>
                            @enderror
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn btn-sm btn-success btn-rounded" type="submit"><i class="bx bx-check-shield mr-2"></i> Update</button>
            <a href="{{route('admin.home')}}" class="btn btn-sm btn-warning btn-rounded float-left mr-2" ><i class="bx bx-left-arrow-alt mr-2"></i> Dashboard</a>
        </form>
    </div>
</div>