@extends('layouts.Home.app')

@section('content')
    <div class="container">

        <div class="page-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card-service wow fadeInUp" style="max-width: none">
                            <div class="header">
                                <h1>
                                    Change Password
                                </h1>
                            </div>
                            <div class="body">
                                <div class="alert alert-danger print-error-msg" style="display:none">
                                    <ul></ul>
                                </div>
                                <form id="contactForm1" method="POST" action="{{ url('/Update/Data/user', Auth::guard()->user()->id) }}">
                                    @csrf
                                    <div class="form-group first">
                                        <label for="kata sandi">Kata Sandi</label>
                                        <div class="input-group mb-3">
                                            <input id="Password" type="password"
                                                class="form-control @error('password') is-invalid @enderror" name="password"
                                                autocomplete="new-password" placeholder="contoh (sumsel12)">
                                            <div class="input-group-append">
                                                <span id="eyeSlash1">
                                                    <button class="btn btn-default reveal" onclick="visibilitypassword()"
                                                        type="button"><i class="fa fa-eye-slash"
                                                            aria-hidden="true"></i></button>
                                                </span>
                                                <span id="eyeShow1" style="display: none;">
                                                    <button class="btn btn-default reveal" onclick="visibilitypassword()"
                                                        type="button"><i class="fa fa-eye"
                                                            aria-hidden="true"></i></button>
                                                </span>
                                            </div>
                                            @error('password')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>


                                    <div class="form-group first">
                                        <label for="username">Konfirmasi Kata Sandi</label>
                                        <div class="input-group mb-3">
                                            <input id="PasswordConfrim" type="password" class="form-control"
                                                name="password_confirmation" autocomplete="new-password"
                                                placeholder="contoh (sumsel12)">
                                            <div class="input-group-append">
                                                <span id="eyeSlash2">
                                                    <button class="btn btn-default reveal"
                                                        onclick="visibilitypasswordconfirm()" type="button"><i
                                                            class="fa fa-eye-slash" aria-hidden="true"></i></button>
                                                </span>
                                                <span id="eyeShow2" style="display: none;">
                                                    <button class="btn btn-default reveal"
                                                        onclick="visibilitypasswordconfirm()" type="button"><i
                                                            class="fa fa-eye" aria-hidden="true"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <div class="col-md-6 offset-md-4 mx-auto">
                                            <button type="submit" class="btn btn-primary submit">
                                                Simpan
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div> <!-- row -->
            </div> <!-- .container -->
        </div>
    </div>
@endsection
@section('footer')
    <script>
        function visibilitypassword() {
            var x = document.getElementById('Password');
            if (x.type === 'password') {
                x.type = "text";
                $('#eyeShow1').show();
                $('#eyeSlash1').hide();
            } else {
                x.type = "password";
                $('#eyeShow1').hide();
                $('#eyeSlash1').show();
            }
        }

        function visibilitypasswordconfirm() {
            var x = document.getElementById('PasswordConfrim');
            if (x.type === 'password') {
                x.type = "text";
                $('#eyeShow2').show();
                $('#eyeSlash2').hide();
            } else {
                x.type = "password";
                $('#eyeShow2').hide();
                $('#eyeSlash2').show();
            }
        }
    </script>

@endsection