@extends('layouts.admin.theme')
@section("title", env("APP_NAME") . " :: Alterar Senha")
@section('content')

    <div class="container-fluid px-1">
        <div class="row">
            <div class="col-12">
                <div class="card shadow mx-0">

                    @php $headLine = "<i class='fa-solid fa-key'></i> Alterar Senha"; @endphp

                    @include('components.buttons._headLineButtonsBackAdd', [
                                'headLine' => __($headLine),
                                "permission" => "GUEST",
                            ])

                    <div class="card-body">
                        <form action="{{ route('admin.password') }}" method="post" enctype="multipart/form-data">

                            @csrf
                            @method('post')

                            @include("errors.messageFlash")
                            @include('components.modal._modelProfile')

                            <hr>

                            <div class="row">
                                <div class="col-sm-12 col-md-4">
                                <!-- Campo Senha atual -->
                                    @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Senha atual",
                                        "name" => "current_password",
                                        "id" => null,
                                        "required" => true,
                                        "type" => 'password',
                                        "old" => old('current_password'),
                                        "oninput" => null,
                                        "readonly" => false,
                                        "small" => null,
                                        "toggleButton" => true,
                                        "toggleButtonId" => 'togglePasswordCurrent',
                                        "toggleButtonFontawesome" => '<i class="fas fa-eye"></i>',
                                        "inputGroup" => true,
                                    ])
                                </div>
                                <div class="col-sm-12 col-md-4">
                                <!-- Campo Nova senha -->
                                    @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Nova senha",
                                        "name" => "password",
                                        "id" => null,
                                        "required" => true,
                                        "type" => 'password',
                                        "old" => old('password'),
                                        "oninput" => null,
                                        "readonly" => false,
                                        "small" => null,
                                        "toggleButton" => true,
                                        "toggleButtonId" => 'togglePassword',
                                        "toggleButtonFontawesome" => '<i class="fas fa-eye"></i>',
                                        "inputGroup" => true,
                                    ])
                                </div>
                                <div class="col-sm-12 col-md-4">
                                <!-- Campo Repetir Senha -->
                                    @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Repetir senha",
                                        "name" => "password_repeat",
                                        "id" => null,
                                        "required" => true,
                                        "type" => 'password',
                                        "old" => old('password_repeat'),
                                        "oninput" => null,
                                        "readonly" => false,
                                        "small" => null,
                                        "toggleButton" => true,
                                        "toggleButtonId" => 'togglePasswordRepeat',
                                        "toggleButtonFontawesome" => '<i class="fas fa-eye"></i>',
                                        "inputGroup" => true,
                                    ])
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    @include('components.buttons._backAndSend', [
                                    'textSend' => 'Atualizar', 
                                ])
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    document.addEventListener("DOMContentLoaded", function () {
        
        let togglePasswordCurrent = document.getElementById('togglePasswordCurrent');
        let passwordFieldCurrent = document.getElementById('current_password');
        
        let togglePassword = document.getElementById('togglePassword');
        let passwordField = document.getElementById('password');
        
        let togglePasswordRepeat = document.getElementById('togglePasswordRepeat');
        let passwordFieldRepeat = document.getElementById('password_repeat');

        togglePasswordCurrent.addEventListener('click', function() {
            let icon = this.querySelector('i');
            if (passwordFieldCurrent.type === 'password') {
                passwordFieldCurrent.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                passwordFieldCurrent.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
        
        togglePassword.addEventListener('click', function() {
            let icon = this.querySelector('i');
            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');
            }
        });
            
        togglePasswordRepeat.addEventListener('click', function() {
            let icon = this.querySelector('i');
            if (passwordFieldRepeat.type === 'password') {
                passwordFieldRepeat.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                passwordFieldRepeat.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
</script>