@extends('client.viewers.index')

@push('styles')
    <style>
        #showBtn {
            cursor: pointer;
            position: absolute;
            right: 12px;
            top: 48px;
            font-size: 13px;
            font-weight: 400;
            text-transform: uppercase;
        }
    </style>
@endpush

@section('account-content')
    <div class="card">
        <div class="card-body p-4">
            <h4 class="mb-4">Change Password</h4>
            <form action="{{ route('update_password') }}" method="POST">
                @csrf
                <div class="row g-4">
                    <div class="col-xl-12">
                        <div class="form-group">
                            <label for="current-password" class="form-label">Enter Current Password</label>
                            <input type="password" name="current_password" id="current-password" class="form-control @error('current_password') is-invalid @enderror" placeholder="********" required>
                            
                            @error('current_password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <div class="form-group">
                            <label for="new-password" class="form-label">Enter New Password</label>
                            <input type="password" name="new_password" id="new-password" class="form-control @error('new_password') is-invalid @enderror" placeholder="********" required>

                            @error('new_password')
                                <span class="invalid-feedback" role="alert">
                                    <strong class="text-danger">{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <div class="form-group position-relative">
                            <label for="confirm-password" class="form-label">Confirm New Password</label>
                            <input type="password" name="new_password_confirmation" id="new-password-confirm" class="form-control" placeholder="********" required>
                            <span id="showBtn">{{ __('Show') }}</span>
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <button type="submit" class="btn btn-dark float-end">Update Password</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('snackbar')
    <x-alert></x-alert>
    <x-alert-danger></x-alert-danger>
@endpush

@push('scripts')
    <script type="text/javascript">    
        document.getElementById("showBtn").addEventListener("click", () => {
            let password = document.getElementById("current-password");
            let newPassword = document.getElementById("new-password");
            let newPasswordConfirm = document.getElementById("new-password-confirm");
            if (password.type === "password" && newPassword.type === "password" && newPasswordConfirm.type === "password") {
                password.type = "text";
                newPassword.type = "text";
                newPasswordConfirm.type = "text";
                showBtn.textContent = "Hide";
            } else {
                password.type = "password";
                newPassword.type = "password";
                newPasswordConfirm.type = "password";
                showBtn.textContent = "Show";
            }
        })
    </script>
@endpush