@extends('hr-management.layouts.master')
@section('title')
    Admin Dashboard
@endSection
@section('main-data')
    <section class="users-edit">
        <div class="card">
            <div class="card-content">
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="account" aria-labelledby="account-tab" role="tabpanel">
                            <div class="media mb-2">
                                <a class="mr-2 my-25" href="#">
                                    <img id="avatar-preview"
                                        src="{{ Auth::user()->image ? asset('images/' . Auth::user()->image) : asset('app-assets/images/portrait/small/user-default.png') }}"
                                        alt="User Avatar" class="users-avatar-shadow rounded" height="90" width="90">
                                </a>
                                <div class="media-body mt-50">
                                    <h4 class="media-heading">{{ Auth::user()->name }}</h4>
                                    <div class="col-12 d-flex mt-1 px-0">
                                        <label for="profile-image-upload"
                                            class="btn btn-primary d-none d-sm-block mr-75">Change</label>
                                    </div>
                                </div>
                            </div>

                            <form method="post" action="{{ route('profile.update') }}" enctype="multipart/form-data"
                                novalidate>
                                @csrf
                                @method('patch')
                                <input type="file" id="profile-image-upload" name="image" class="d-none"
                                    accept="image/*" onchange="previewImage(event)">
                                <div class="row">
                                    <div class="col-12 col-sm-6">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label>Name</label>
                                                <input type="text" name="name" class="form-control" placeholder="Name"
                                                    value="{{ old('name', Auth::user()->name) }}" required>
                                                @error('name')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-6">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label>Email</label>
                                                <input type="email" name="email" class="form-control"
                                                    placeholder="Email" value="{{ old('email', Auth::user()->email) }}"
                                                    required>
                                                @error('email')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12">
                                        <h6>Change Password</h6>
                                    </div>
                                    <div class="col-12 col-sm-6">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label for="update_password_current_password">Current Password</label>
                                                <div class="input-group">
                                                    <input type="password" name="current_password"
                                                        id="update_password_current_password" class="form-control"
                                                        placeholder="Current Password" required>
                                                    <div class="input-group-append">
                                                        <button type="button" class="btn btn-outline-secondary"
                                                            id="toggle_current_password"
                                                            onclick="togglePasswordVisibility('update_password_current_password', 'toggle_current_password')">
                                                            <i class="fa fa-eye" id="eye_icon_current_password"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                @error('current_password')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-sm-6">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label for="update_password_password">New Password</label>
                                                <div class="input-group">
                                                    <input type="password" name="password" id="update_password_password"
                                                        class="form-control" placeholder="New Password" required>
                                                    <div class="input-group-append">
                                                        <button type="button" class="btn btn-outline-secondary"
                                                            id="toggle_new_password"
                                                            onclick="togglePasswordVisibility('update_password_password', 'toggle_new_password')">
                                                            <i class="fa fa-eye" id="eye_icon_new_password"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                @error('password')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-sm-6">
                                        <div class="form-group">
                                            <div class="controls">
                                                <label for="update_password_password_confirmation">Confirm Password</label>
                                                <div class="input-group">
                                                    <input type="password" name="password_confirmation"
                                                        id="update_password_password_confirmation" class="form-control"
                                                        placeholder="Confirm New Password" required>
                                                    <div class="input-group-append">
                                                        <button type="button" class="btn btn-outline-secondary"
                                                            id="toggle_password_confirmation"
                                                            onclick="togglePasswordVisibility('update_password_password_confirmation', 'toggle_password_confirmation')">
                                                            <i class="fa fa-eye" id="eye_icon_password_confirmation"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                @error('password_confirmation')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
                                        <button type="submit" class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1">Save
                                            Changes</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endSection