@extends('layouts.arte-sacra.theme')
@section('title', env('APP_NAME') . ' :: Cadastro de Usuários')
@section('content')
    <div class="container d-flex justify-content-center align-items-center my-5 py-5">
        <form id="registerForm" action="{{ route('paginas.cultura.arteSacra.register.store') }}" method="post"
            enctype="multipart/form-data" class="w-100 w-md-75 w-lg-50">
            <div class="card shadow-lg">
                <div class="card-body p-5">
                    <h1 class="my-4 text-center">Cadastro de Novo Usuário</h1>

                    @csrf

                    @include('errors.messageFlash')

                    <div class="mb-4">
                        <label for="firstName" class="form-label text-bold">Nome: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('firstName') is-invalid @enderror" name="firstName"
                            id="firstName" autocomplete="off" value="{{ old('firstName') }}">
                        @error('firstName')
                            <small class="text-danger text-bold">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="mb-4">
                        <label for="lastName" class="form-label text-bold">Sobrenome: <span
                                class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('lastName') is-invalid @enderror" name="lastName"
                            id="lastName" autocomplete="off" value="{{ old('lastName') }}">
                        @error('lastName')
                            <small class="text-danger text-bold">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="cpf" class="form-label text-bold">CPF: <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('cpf') is-invalid @enderror" name="cpf"
                            id="cpf" autocomplete="off" value="{{ old('cpf') }}"
                            oninput="javascript:aplicarMascaraCPF(this)" required>
                        @error('cpf')
                            <small class="text-danger text-bold">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="mb-4">
                        <label for="phoneNumber" class="form-label text-bold">Telefone: <span
                                class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('phoneNumber') is-invalid @enderror"
                            name="phoneNumber" id="phoneNumber" autocomplete="off" value="{{ old('phoneNumber') }}">
                        @error('phoneNumber')
                            <small class="text-danger text-bold">{{ $message }}</small>
                        @enderror
                    </div>

                    <hr />
                    <div class="mb-4">
                        <label for="email" class="form-label text-bold">Email: <span class="text-danger">*</span></label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                            id="email" autocomplete="off" value="{{ old('email') }}">
                        @error('email')
                            <small class="text-danger text-bold">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="password" class="form-label text-bold">Senha: <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                name="password" id="password" minlength="8" required>
                            <!-- <span class="input-group-text" onclick="togglePassword('password')">
                                <i class="bi bi-eye text-dark" id="eye_password" style="height: 10px; width: 10px;"></i>
                            </span> -->
                        </div>
                        @error('password')
                            <small class="text-danger text-bold">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="password_confirmation" class="form-label text-bold">Confirmar Senha: <span
                                class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="password_confirmation"
                                id="password_confirmation" minlength="8" required>
                            <!-- <span class="input-group-text" onclick="togglePassword('password_confirmation')">
                                <i class="bi bi-eye text-dark" id="eye_password_confirmation" style="height: 10px; width: 10px;"></i>
                            </span> -->
                        </div>
                        <div class="invalid-feedback d-none" id="passwordMismatch">As senhas não coincidem.</div>
                    </div>

                    <hr />

                    <div class="mb-4">
                        <label for="photo" class="form-label text-bold">Foto:</label>
                        <input type="file" class="form-control" name="photo" id="photo"
                            accept="image/jpeg,image/jpg,image/png,image/gif" />
                    </div>

                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-lg btn-secondary" onclick="window.location.href='{{ url()->previous() }}'"
                            type="button">
                            {{ __('Voltar') }}
                        </button>
                        <button class="primary-btn" type="submit">{{ __('Cadastrar') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script>
        function togglePassword(fieldId) {
            const field = document.getElementById(fieldId);
            const icon = document.getElementById('eye_' + fieldId);
            if (field.type === 'password') {
                field.type = 'text';
                icon.classList.remove('bi-eye text-dark');
                icon.classList.add('bi-eye-slash text-dark');
            } else {
                field.type = 'password';
                icon.classList.remove('bi-eye-slash text-dark');
                icon.classList.add('bi-eye text-dark');
            }
        }

        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('password_confirmation');
        const mismatchWarning = document.getElementById('passwordMismatch');

        function checkPasswordsMatch() {
            if (password.value !== confirmPassword.value) {
                mismatchWarning.classList.remove('d-none');
                confirmPassword.classList.add('is-invalid');
            } else {
                mismatchWarning.classList.add('d-none');
                confirmPassword.classList.remove('is-invalid');
            }
        }

        password.addEventListener('input', checkPasswordsMatch);
        confirmPassword.addEventListener('input', checkPasswordsMatch);

        document.getElementById('registerForm').addEventListener('submit', function(event) {
            if (password.value !== confirmPassword.value) {
                mismatchWarning.classList.remove('d-none');
                confirmPassword.classList.add('is-invalid');
                event.preventDefault();
                return false;
            }
        });
    </script>

@endsection