@extends('layouts.admin')

@section('content')
    <section>
        <div class="container-fluid">
            <!-- Start: Breadcrumb -->
            <nav class="breadcrumb-nav" aria-label="breadcrumb">
                <h4 class="breadcrumb-heading">Change Your Password</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('settings') }}">Settings</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Account Security</li>
                </ol>
            </nav>
            <!-- End: Breadcrumb -->

            <div class="row justify-content-center g-4">
                <div class="col-xl-8">
                    <div class="tf-section-heading text-center">
                        <h4 class="tf-section-title">Set your new password</h4>
                        <p>Ensure your account is using a long, random password to stay secure. Configure user passwords to expire periodically. Users will need warning that their passwords are going to expire, or they might inadvertently get locked out of the system!</p>
                    </div>
                </div>
                <div class="col-xl-8">
                    <x-alert></x-alert>
                </div>
                <div class="col-xl-8">
                    <x-alert-danger></x-alert-danger>
                </div>
                <div class="col-xl-6 col-lg-9 col-md-10 col-12">
                    <div class="card">
                        <div class="card-body">
                            <form method="POST" action="{{ route('update_password') }}">
                                @csrf
                                <div class="row row-cols-1 g-4">
                                    <div class="col">
                                        <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">
                                        <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">
                                        <div class="form-group">
                                            <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">
                                        <button type="submit" class="button primary md block">Update Password</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@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