@extends('layouts.index')
@section('title')
Pengaturan Akun
@endsection
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection
@section('content')
<div class="page-titles">
    <div class="row">
        <div class="col-lg-8 col-md-6 col-12 align-self-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 d-flex align-items-center">
                    <li class="breadcrumb-item">
                        <a href="{{url('/dashboard')}}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{url('/pengaturan-akun')}}" class="link">Account</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Password
                    </li>
                </ol>
            </nav>
            <h1 class="mb-0 fw-bold">Change Password</h1>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="col-12">
        <div class="card">
          
            <div class="card-body">
                <form action="{{ url('simpan-password') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="form-group mb-3">
                        <label for="passwordLama">Old Password<span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="password" name="password_lama" parsley-trigger="change"
                                placeholder="Input Old Password"
                                class="form-control @error('password_lama') is-invalid @enderror" id="password_lama"
                                value="{{ old('password_lama') }}">
                            <div class="input-group-append">
                                <button
                                    class="btn btn-secondary fas fa-eye @error('password_lama') btn-danger @enderror toggle-password-lama"
                                    type="button"></button>
                            </div>
                        </div>
                        @error('password_lama')
                        <div class="mt-1">
                            <span class="text-danger">{{ $message }}</span>
                        </div>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label for="passwordBaru">New Password<span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="password" name="password_baru" parsley-trigger="change"
                                placeholder="Input New Password"
                                class="form-control @error('password_baru') is-invalid @enderror" id="password_baru"
                                value="{{ old('password_baru') }}">
                            <div class="input-group-append">
                                <button
                                    class="btn btn-secondary fa fa-eye @error('password_baru') btn-danger @enderror toggle-password-baru"
                                    type="button"></button>
                            </div>
                        </div>

                        @error('password_baru')
                        <div class="mt-1">
                            <span class="text-danger">{{ $message }}</span>
                        </div>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label for="konfirmasiPasswordBaru">Confirmation New Password<span
                                class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="password" name="konfirmasi_password_baru" parsley-trigger="change"
                                placeholder="Input Confirmation New Password"
                                class="form-control @error('konfirmasi_password_baru') is-invalid @enderror"
                                id="konfirmasi_password_baru" value="{{ old('konfirmasi_password_baru') }}">
                            <div class="input-group-append">
                                <button
                                    class="btn btn-secondary fa fa-eye @error('konfirmasi_password_baru') btn-danger @enderror toggle-konfirmasi-password-baru"
                                    type="button"></button>
                            </div>
                        </div>

                        @error('konfirmasi_password_baru')
                        <div class="mt-1">
                            <span class="text-danger">{{ $message }}</span>
                        </div>
                        @enderror
                    </div>

                    <div class="mt-4 d-flex justify-content-end">
                        <button class="btn btn-primary rounded-pill px-4 ms-2" type="submit">Save</button>
                        <a href="{{ url('pengaturan-akun') }}"
                            class="btn btn-outline-secondary rounded-pill px-4 ms-2">
                            Back <span href="{{redirect()->back()}}"></span>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<!-- Toggle Show/Hide Password -->
<script>
    $(".toggle-password-lama").click(function() {
        $(this).toggleClass("far fa-eye-slash");
        var passwordLama = document.getElementById("password_lama");

        if (passwordLama.type === "password") {
            passwordLama.type = "text";
        } else {
            passwordLama.type = "password";
        }

       
    });
    $(".toggle-password-baru").click(function() {
        $(this).toggleClass("far fa-eye-slash");
        var password = document.getElementById("password_baru");

        if (password.type === "password") {
            password.type = "text";
        } else {
            password.type = "password";
        }
    });
    
    $(".toggle-konfirmasi-password-baru").click(function() {
        $(this).toggleClass("far fa-eye-slash");
        var konfirmasiPassword = document.getElementById("konfirmasi_password_baru");

        if (konfirmasiPassword.type === "password") {
            konfirmasiPassword.type = "text";
        } else {
            konfirmasiPassword.type = "password";
        }
    });

</script>
@endsection