@include('backend.header')
<div class="content-body">
    <!-- <div class="page-titles">
        <h5 class="dashboard_bar">Staff Information</h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">
                    Dashboard </a>
            </li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Add Staff</a></li>
        </ul>
    </div> -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Profile</h4>
                    </div>
                    <div class="card-body">
                        <div class="form-validation">
                            @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                            @endif

                            <form class="needs-validation" id="staff" method="POST"
                                action="{{ route('profile.update') }}">

                                @csrf
                                @method('POST')

                                <div class="row">
                                    <div class="col-xl-6">
                                        <!-- Name Field -->
                                        <div class="mb-3 row d-flex align-items-center">
                                            <label class="col-lg-4 col-form-label" for="name">Name <span
                                                    class="text-danger">*</span></label>
                                            <div class="col-lg-8">
                                                <input type="text" class="form-control" id="name" name="name"
                                                    placeholder="Enter a username.."
                                                    value="{{ Auth::user()->name ?? session('user_name') }}" readonly>
                                            </div>
                                        </div>

                                        <!-- Change Password Checkbox -->
                                        <div class="mb-3 row d-flex align-items-center">
                                            <label class="col-lg-4 col-form-label">Change Password</label>
                                            <div class="col-lg-8">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input"
                                                        id="changePasswordCheck">
                                                    <label class="form-check-label" for="changePasswordCheck">Yes, I
                                                        want to change it</label>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Password Field (Initially Hidden) -->
                                        <div class="mb-3 row d-flex align-items-center" id="passwordField"
                                            style="visibility: hidden; opacity: 0; transition: opacity 0.3s ease;">
                                            <label class="col-lg-4 col-form-label" for="password">
                                                New Password <span class="text-danger">*</span>
                                            </label>
                                            <div class="col-lg-8 position-relative">
                                                <input type="password" class="form-control" id="password"
                                                    name="password" placeholder="Enter new password" minlength="6">

                                                <!-- Eye Icon -->
                                                <span
                                                    class="position-absolute top-50 end-0 translate-middle-y me-4 c-pointer"
                                                    onclick="togglePassword()">
                                                    <i id="toggleIcon" class="fa fa-eye"></i>
                                                </span>

                                                <div class="invalid-feedback">Please enter a new password.</div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <div class="mb-3 row">
                                    <div class="col-lg-8 ms-auto">
                                        <button type="submit" class="btn btn-primary">Update</button>
                                    </div>
                                </div>
                            </form>




                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@include('backend.footer')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkbox = document.getElementById('changePasswordCheck');
    const passwordField = document.getElementById('passwordField');
    const passwordInput = document.getElementById('password');
    const icon = document.getElementById('toggleIcon');

    // Initially hide the password field
    passwordField.style.visibility = 'hidden';
    passwordField.style.opacity = 0;

    // Handle checkbox toggle
    checkbox.addEventListener('change', function() {
        if (this.checked) {
            passwordField.style.visibility = 'visible';
            passwordField.style.opacity = 1;
            passwordInput.required = true;

            // Set icon to hidden state
            //     icon.classList.remove('fa-eye');
            //     icon.classList.add('fa-eye-slash');
            //     passwordInput.type = 'text';
        } else {
            passwordField.style.visibility = 'hidden';
            passwordField.style.opacity = 0;
            passwordInput.required = false;
            passwordInput.value = '';

            // Reset icon and type
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
            passwordInput.type = 'password';
        }
    });
});

// Toggle password visibility on eye icon click
function togglePassword() {
    const passwordInput = document.getElementById('password');
    const icon = document.getElementById('toggleIcon');

    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}
</script>
<style>
/* Force labels and inputs to stay on the same line */
.row.d-flex {
    display: flex;
    align-items: center;
}

.row.d-flex label {
    margin-bottom: 0;
    /* Ensure no extra margin at the bottom of labels */
}
</style>