@extends('admin.sidebar')
@section('content')
    <section class="section">
        @include('message')

        <div class="row">
            <div class="col-12 col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-center align-items-center flex-column">
                            <div class="avatar avatar-2xl">
                                <img style="height: 150px;width:150px; object-fit:cover;"
                                    src="{{ asset('images/operator') . '/' . $admin->photo }}" alt="Avatar">
                            </div>

                            <h3 class="mt-3">{{ $admin->username }}</h3>
                            <p class="text-small">Admin</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('admin.update', Crypt::encryptString($admin->id)) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('put')
                            <div class="form-group">
                                <label for="name" class="form-label">Ubah Foto</label>
                                <input type="file" name="photo" class="form-control" placeholder="Your Name">
                            </div>
                            <div class="form-group">
                                <label for="name" class="form-label">Name</label>
                                <input type="text" name="username" value="{{ $admin->username }}" class="form-control"
                                    placeholder="Your Name">
                            </div>

                            <div class="form-group">
                                <label for="email" class="form-label">Email</label>
                                <input type="text" name="email" class="form-control"
                                    placeholder="Your Email"value={{ $admin->email }}>
                            </div>
                            <div class="form-group">
                                <label for="password" class="form-label">Ganti Password</label>
                                <div class="d-flex">
                                    <input type="password" class="form-control" id="password"
                                        name="password"placeholder="*******">
                                    <span toggle="#password" class=" mx-2 eye p-1"
                                        style="width: 40px!important; height:40px!important;"><i
                                            class="bi bi-eye-fill"></i></span>
                                </div>
                                <i>*Minimal 6 karakter!</i>

                            </div>
                            <div class="form-group">
                                <label for="password" class="form-label">Konfirmasi Password Baru</label>
                                <div class="d-flex">
                                    <input type="password_confirm" class="form-control" id="password_confirm"
                                        name="password_confirm"placeholder="*******">
                                    <span toggle="#password_confirm" id="eyes" class=" mx-2 eye p-1"
                                        style="width: 40px!important; height:40px!important;"><i
                                            class="bi bi-eye-fill"></i></span>
                                </div>

                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- script --}}
    <script>
        var clicked = false;
        const togglePassword = document.querySelector('.eye');
        const password = document.querySelector('#password');

        togglePassword.addEventListener('click', function() {
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            if (clicked) {
                togglePassword.style.cssText =
                    'width: 40px!important; height:40px!important;color:#333!important;';
            } else {
                togglePassword.style.cssText =
                    'width: 40px!important; height:40px!important;color:#5C7CB4!important;';

            }
            clicked = !clicked;
        });
    </script>
    <script>
        var clicked2 = false;
        const togglepassword_confirm = document.querySelector('#eyes');
        const password_confirm = document.querySelector('#password_confirm');

        togglepassword_confirm.addEventListener('click', function() {
            const type = password_confirm.getAttribute('type') === 'password' ? 'text' : 'password';
            password_confirm.setAttribute('type', type);
            if (clicked2) {
                togglepassword_confirm.style.cssText =
                    'width: 40px!important; height:40px!important;color:#333!important;';
            } else {
                togglepassword_confirm.style.cssText =
                    'width: 40px!important; height:40px!important;color:#5C7CB4!important;';

            }
            clicked2 = !clicked2;
        });
    </script>

    {{-- script --}}
@endsection