<!DOCTYPE html>
<html lang="id">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Admin Dashboard</title>
	<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'>
	
	<!-- Fonts and icons -->
	<script src="{{ asset('admin/js/plugin/webfont/webfont.min.js') }}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

	<script>
		WebFont.load({
			google: {"families":["Lato:300,400,700,900"]},
			custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['../assets/css/fonts.min.css']},
			active: function() {
				sessionStorage.fonts = true;
			}
		});
	</script>

	<!-- CSS Files -->
	<link rel="stylesheet" href="{{ asset('admin/css/bootstrap.min.css') }}">
	<link rel="stylesheet" href="{{ asset('admin/css/atlantis.css') }}">
</head>

<body>
    <div class="wrapper">
    <div class="content">

    <!-- Header Section -->
    <div class="panel-header bg-primary-gradient">
    <div class="page-inner py-5">
    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">

    </div>
    </div>
    </div>
    <!-- Header Section End-->

    <!-- Content Section -->
    <div class="page-inner mt--5">
    <div class="row mt--2">
    <div class="col-12">
    <div class="card">

    <!-- Breadcrumb -->
    <div class="card-header pb-2 pt-3">
    <div class="card-head-row">
        <nav aria-label="breadcrumb" class="mb-0">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Pengaturan</li>
            </ol>
        </nav>
    </div>
    </div>
    <!-- Breadcrumb End -->
                            
    <!-- Card Content -->
    <div class="card-body">
        <div class="card-title">Informasi Pengguna</div>
        <div class="card-category text-muted">Kelola informasi pribadi dan pengaturan akun Anda di sini.</div>
    </div>


    <!-- Form Section -->
    <div class="card-body">
    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
    
    @if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
    @endif
    
    <form role="form" action="{{ route('profilesaya.update') }}" method="POST">
        @csrf
        @method('PUT')
        
        <div class="form-group row">
            <label for="nama" class="col-sm-2 col-form-label">Nama</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan nama lengkap" value="{{ $user->name }}">
                @error('nama')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="form-group row">
            <label for="email" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="email" name="email" placeholder="Masukkan alamat email" value="{{ $user->email }}">
                @error('email')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="form-group row">
            <label for="passwordLama" class="col-sm-2 col-form-label">Kata Sandi Saat Ini</label>
            <div class="col-sm-10 input-group">
                <input type="password" class="form-control" id="passwordLama" name="password_current" placeholder="Masukkan kata sandi saat ini">
                <div class="input-group-append">
                    <span class="input-group-text" id="togglePasswordLama" style="cursor: pointer;"><i class="fa fa-eye" id="eyeIconLama"></i></span>
                </div>
                @error('password_current')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="form-group row">
            <label for="passwordBaru" class="col-sm-2 col-form-label">Kata Sandi Baru</label>
            <div class="col-sm-10 input-group">
                <input type="password" class="form-control" id="passwordBaru" name="password" placeholder="Masukkan kata sandi baru">
                <div class="input-group-append">
                    <span class="input-group-text" id="togglePasswordBaru" style="cursor: pointer;"><i class="fa fa-eye" id="eyeIconBaru"></i></span>
                </div>
                @error('password')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="d-flex justify-content-between mt-4">
            <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
            <button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteAccountModal">Hapus Akun</button>
        </div>
    </form>
    </div>
    <!-- Form Section End -->
    </div>
    </div>
    </div>
    </div>

    <!-- Delete Account Modal -->
    <div class="modal fade" id="deleteAccountModal" tabindex="-1" role="dialog" aria-labelledby="deleteAccountModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteAccountModalLabel">Konfirmasi Hapus Akun</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Apakah Anda yakin ingin menghapus akun Anda? Tindakan ini tidak dapat dibatalkan.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <form action="{{ route('profilesaya.delete') }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Hapus Akun</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    </div>
    </div>

<!-- Script Files -->
@include('admin.script')
<!-- End Script Files -->

    <!-- Script untuk Toggle Password -->
    <script>
        document.getElementById('togglePasswordLama').addEventListener('click', function (e) {
            var passwordField = document.getElementById('passwordLama');
            var icon = document.getElementById('eyeIconLama');
            if (passwordField.type === "password") {
                passwordField.type = "text";
                icon.classList.remove("fa-eye");
                icon.classList.add("fa-eye-slash");
            } else {
                passwordField.type = "password";
                icon.classList.remove("fa-eye-slash");
                icon.classList.add("fa-eye");
            }
        });

        document.getElementById('togglePasswordBaru').addEventListener('click', function (e) {
            var passwordField = document.getElementById('passwordBaru');
            var icon = document.getElementById('eyeIconBaru');
            if (passwordField.type === "password") {
                passwordField.type = "text";
                icon.classList.remove("fa-eye");
                icon.classList.add("fa-eye-slash");
            } else {
                passwordField.type = "password";
                icon.classList.remove("fa-eye-slash");
                icon.classList.add("fa-eye");
            }
        });
    </script>

</body>
</html>