@extends('layouts.pmar.theme')

@section('content')
<x-portal.page-with-structure-sidebar structure-id="0d516e21-12f6-4295-a5dc-129c3a0214b0">
    <div id="conteudo" class="content nopadding single-article post type-post espaco_conteudo">
                <div>
                    <h1 class="mb-5 fw-bold">{{ __('Serviço de Acolhimento em Família Acolhedora') }}</h1>
                </div>

                <div class="row mb-4 align-items-center">
                    <div class="col-12 col-md-4 mb-4 mb-md-0 text-center">
                        <img src="{{ asset('pmar/assets/img/familia_acolhedora/Logo-Familia-Acolhedora.png') }}" class="img-familia-acolhedora img-fluid w-100" style="max-width: 250px;" alt="{{ __('Família Acolhedora logo') }}">
                    </div>

                    <div class="col-12 col-md-8">
                        <h2 class="mb-4 fw-bold">{{ __('Você sabe o que é Família Acolhedora?') }}</h2>

                        <p class="mb-3">{{ __('O Serviço de Acolhimento em Família Acolhedora é uma das modalidades de acolhimento que está previsto na Tipificação Nacional de Serviços Socioassistenciais, ') }}
                            <a href="https://www.mds.gov.br/webarquivos/public/resolucao_CNAS_N109_%202009.pdf" target="_blank">{{ __('Resolução 109 de 11 de Novembro de 2009.') }}</a>
                        </p>
                        <p class="mb-3">{{ __('O Serviço organiza e acompanha o acolhimento temporário de crianças e adolescentes afastados de sua família de origem por medida protetiva, em residências de famílias acolhedoras, previamente selecionadas e preparadas pela equipe técnica.') }}</p>
                        <p class="mb-3">{{ __('As Famílias Acolhedora são devidamente cadastradas após o processo de capacitação para a função de proteção e cuidado em suas residências, de crianças e adolescentes que precisam de acolhimento provisório, até que possa retornar para sua família de origem, extensa, ou encaminhadas para adoção. Durante o processo de acolhimento essas famílias são acompanhadas por assistentes sociais e psicólogos.') }}</p>
                    </div>
                </div>
                    
                <div class="mb-4">
                    <h2 class="mb-4 fw-bold">{{ __('Objetivos do Serviço') }}</h2>
                    <p>{{ __('Garantir proteção integral às crianças e adolescentes acolhidos neste serviço, até que seja possível a reintegração familiar segura.') }}</p>
                </div>
                
                <div class="mb-4">
                    <div class="row align-items-center">
                        <div class="col-12 col-md-10 order-2 order-md-1 mb-4">
                            <h2 class="mb-4 fw-bold">{{ __('Como é a preparação?') }}</h2>
                            <p>{{ __('A Família Acolhedora passará por um processo de seleção e capacitação, sendo assim habilitada pela equipe técnica do Serviço para exercer a função de proteção e cuidado dos acolhidos.') }}</p>
                        </div>
                        <div class="col-12 col-md-2 order-1 order-md-2 mb-4 mb-md-0 text-center">
                            <img src="{{ asset('pmar/assets/img/familia_acolhedora/img01.png') }}" class="img-familia-acolhedora img-fluid w-100" style="max-width: 150px;" alt="{{ __('Imagem de Família Acolhedora') }}">
                        </div>

                    </div>
                </div>

                <div class="mb-4">
                    <div class="row">
                        <div class="col-12">
                            <h2 class="mb-4 fw-bold">{{ __('Critérios exigidos') }}</h2>
                            <ul class="ul">
                                <li class="ul-li">{{ __('Maioridade legal, sem restrição quanto ao estado civil;') }}</li>
                                <li class="ul-li">{{ __('Residir no Município de Angra dos Reis há mais de um ano;') }}</li>
                                <li class="ul-li">{{ __('Não estar interessado em adoção;') }}</li>
                                <li class="ul-li">{{ __('Comprovar idoneidade moral;') }}</li>
                                <li class="ul-li">{{ __('Apresentar certidão de antecedentes criminais;') }}</li>
                                <li class="ul-li">{{ __('Entre outros critérios que dependerão da análise e parecer da equipe técnica para inserção no Serviço de Acolhimento em Família Acolhedora;') }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mb-4">
                    <div class="card text-center mb-4">
                        <div class="card-body bg-primary">
                            <p class="text-white mb-0">{!! __('"Ser <span class="text-warning">FAMÍLIA ACOLHEDORA</span> é como oferecer um guarda-chuva no momento da tempestade."') !!}</p>
                        </div>
                    </div>
                    <div>
                        <img src="{{asset ('pmar/assets/img/familia_acolhedora/a-tempestade-passa-a-vida-continua.png') }}" alt="{{ __('Imagem do \'A tempestade passa, a vida continua\'') }}" class="img-familia-acolhedora img-fluid w-100" style="max-width: 500px;">
                    </div>
                </div>

                <div class="mb-4">
                    <div class="row align-items-center">
                        <div class="col-12 col-md-9 order-2 order-md-1">
                        <h2 class="mb-4">{{ __('Como participar?') }}</h2>
                        <p class="mb-2">{{ __('O cadastro para o Serviço de Família Acolhedora pode ser realizado de 3 formas:') }}</p>
                        <ul class="ul">
                            <li class="ul-li">{{ __('Por telefone: (24) 3368-7334 e (24) 992943982 - Whatsapp') }}</li>
                            <li class="ul-li">{{ __('Presencialmente na sede do SAFA, Praça Guarda Marinha Greenhalg, 59. Centro, Angra dos Reis;') }}</li>
                            <li class="ul-li">{{ __('Ou, através do formulário abaixo.') }}</li>
                        </ul>
                        </div>
                        <div class="col-12 col-md-3 order-1 order-md-2 mb-4 mb-md-0 text-center">
                            <img src="{{asset ('pmar/assets/img/familia_acolhedora/img02.png') }}" alt="{{ __('Imagem ilustrativa de como participar') }}" class="img-familia-acolhedora img-fluid w-75" style="max-width: 200px;">
                        </div>
                    </div>
                </div>

                

                @if(session('success'))
                    <div class="alert alert-success" role="alert">
                        {{ session('success') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form id="form1" name="form1" method="post" action="{{ route('paginas.familiaacolhedora.store') }}" data-toggle="validator" role="form" class="contactForm">	
                    @csrf
                    <div class="row">
                        <div class="form-group col-12 col-md-9 mb-3">
                            <label for="nome"><span class="text-danger">*</span> {{ __('Nome do candidato') }}: </label>
                            <input name="nome" id="nome" type="text" value="{{ old('nome') }}" class="form-control @error('nome') is-invalid @enderror" maxlength="150" required />
                            @error('nome') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group col-12 col-md-3 mb-3">
                            <label for="data_nascimento"><span class="text-danger">*</span> {{ __('Data de Nascimento') }}: </label>
                            <input name="data_nascimento" id="data_nascimento" type="date" value="{{ old('data_nascimento') }}" class="form-control @error('data_nascimento') is-invalid @enderror" required />
                            @error('data_nascimento') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-12 mb-3">
                            <label for="endereco"><span class="text-danger">*</span> {{ __('Endereço') }}: </label>
                            <input name="endereco" id="endereco" type="text" value="{{ old('endereco') }}" class="form-control @error('endereco') is-invalid @enderror" maxlength="150" required />
                            @error('endereco') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-12 col-md-6 mb-3">
                            <label for="bairro"><span class="text-danger">*</span> {{ __('Bairro') }}: </label>
                            <input name="bairro" id="bairro" type="text" value="{{ old('bairro') }}" class="form-control @error('bairro') is-invalid @enderror" maxlength="150" required />
                            @error('bairro') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="form-group col-12 col-md-6 mb-3">
                            <label for="municipio"><span class="text-danger">*</span> {{ __('Município') }}: </label>
                            <input name="municipio" id="municipio" type="text" value="{{ old('municipio') }}" class="form-control @error('municipio') is-invalid @enderror" maxlength="150" required />
                            @error('municipio') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-12 mb-3">
                            <label for="referencia"><span class="text-danger">*</span> {{ __('Ponto de referência') }}: </label>
                            <input name="referencia" id="referencia" type="text" value="{{ old('referencia') }}" class="form-control @error('referencia') is-invalid @enderror" maxlength="150" required />
                            @error('referencia') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-12 col-md-6 mb-3">
                            <label for="telefone_1"><span class="text-danger">*</span> {{ __('Telefone 1') }}:</label>
                            <input name="telefone_1" id="telefone_1" type="text" value="{{ old('telefone_1') }}" placeholder="(XX) 99999-9999" class="form-control @error('telefone_1') is-invalid @enderror" required />
                            @error('telefone_1') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="form-group col-12 col-md-6 mb-3">
                            <label for="telefone_2">{{ __('Telefone 2') }}: </label>
                            <input name="telefone_2" id="telefone_2" type="text" value="{{ old('telefone_2') }}" placeholder="(XX) 99999-9999" class="form-control @error('telefone_2') is-invalid @enderror" />
                            @error('telefone_2') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-12 col-md-6 mb-3">
                            <label for="email"><span class="text-danger">*</span> {{ __('E-mail') }}: </label>
                            <input name="email" id="email" type="email" value="{{ old('email') }}" maxlength="150" class="form-control @error('email') is-invalid @enderror" required />
                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-12 mb-3">
                            <label><span class="text-danger">*</span> {{ __('Disponibilidade de horário') }}:</label>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="disponibilidade" id="manha" value="Manhã" {{ old('disponibilidade') == 'Manhã' ? 'checked' : '' }} required>
                                <label class="form-check-label" for="manha">{{ __('Manhã') }}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="disponibilidade" id="tarde" value="Tarde" {{ old('disponibilidade') == 'Tarde' ? 'checked' : '' }} required>
                                <label class="form-check-label" for="tarde">{{ __('Tarde') }}</label>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-12 mb-3">
                            <label><span class="text-danger">*</span> {{ __('Como soube do serviço') }}:</label>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="como_soube" id="onibus" value="Propaganda em ônibus" {{ old('como_soube') == 'Propaganda em ônibus' ? 'checked' : '' }} required>
                                <label class="form-check-label" for="onibus">{{ __('Propaganda em ônibus') }}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="como_soube" id="tvjornal" value="TV/Jornal" {{ old('como_soube') == 'TV/Jornal' ? 'checked' : '' }} required>
                                <label class="form-check-label" for="tvjornal">{{ __('TV/Jornal') }}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="como_soube" id="radio" value="Rádio" {{ old('como_soube') == 'Rádio' ? 'checked' : '' }} required>
                                <label class="form-check-label" for="radio">{{ __('Rádio') }}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="como_soube" id="cartazpanfletagem" value="Cartaz/Panfletagem" {{ old('como_soube') == 'Cartaz/Panfletagem' ? 'checked' : '' }} required>
                                <label class="form-check-label" for="cartazpanfletagem">{{ __('Cartaz/Panfletagem') }}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="como_soube" id="indicacao_radio" value="Indicação de alguém" {{ old('como_soube') == 'Indicação de alguém' ? 'checked' : '' }} required>
                                <label class="form-check-label" for="indicacao_radio">{{ __('Indicação de alguém') }}</label>
                                <input name="indicacao" id="indicacao" type="text" value="{{ old('indicacao') }}" class="form-control mt-2" maxlength="150" placeholder="{{ __('Quem o(a) indicou?') }}" />
                            </div>
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="radio" name="como_soube" id="outros_radio" value="Outros" {{ old('como_soube') == 'Outros' ? 'checked' : '' }} required>
                                <label class="form-check-label" for="outros_radio">{{ __('Outros') }}</label>
                                <input name="outros" id="outros" type="text" value="{{ old('outros') }}" class="form-control mt-2" maxlength="150" placeholder="{{ __('Informe como soube do Serviço') }}" />
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-12 mb-3">
                            <label for="motivo"><span class="text-danger">*</span> {{ __('Qual a sua motivação para ser família acolhedora?') }} </label>
                            <input name="motivo" id="motivo" type="text" value="{{ old('motivo') }}" maxlength="250" class="form-control @error('motivo') is-invalid @enderror" required/>
                            @error('motivo') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        
                        <div class="form-group col-12 mb-3">
                            <p class="mt-2">
                                <strong>{{ __('Lei Geral de Proteção de Dados') }}</strong><br>
                            </p>
                            <div class="form-check">
                                <input class="form-check-input @error('termo_lgpd') is-invalid @enderror" type="checkbox" name="termo_lgpd" id="termo_lgpd" value="1" {{ old('termo_lgpd') ? 'checked' : '' }} required>
                                <label class="form-check-label fw-normal small" for="termo_lgpd">
                                    {{ __('Aceito os termos de responsabilidade da LGPD e autorizo a utilização dos dados preenchidos para análise do cadastro.') }}
                                </label>
                                @error('termo_lgpd') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    
                        <div class="form-group col-12 mt-4">
                            @if (config('recaptcha.enabled'))
                                <div class="mb-3">
                                    <div class="g-recaptcha"
                                         data-sitekey="{{ config('recaptcha.site_key') }}"
                                         data-callback="recaptchaCallback"></div>
                                    @error('g-recaptcha-response')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            @endif
                            <button type="submit" id="btnEnviar" class="btn btn-primary btn-lg mb-5" @if (config('recaptcha.enabled')) disabled @endif>{{ __('Enviar Formulário') }}</button>
                        </div>
                    </div>
                </form>
    </div>
</x-portal.page-with-structure-sidebar>
@endsection

@push('scripts')
    @if (config('recaptcha.enabled'))
        <script src="https://www.google.com/recaptcha/api.js?hl={{ str_replace('_', '-', app()->getLocale()) }}" async defer></script>
    @endif
<script>
    window.recaptchaCallback = function () {
        const btn = document.getElementById('btnEnviar');
        if (btn) {
            btn.disabled = false;
        }
    };

    document.addEventListener("DOMContentLoaded", function() {
        const indicacaoRadio = document.getElementById('indicacao_radio');
        const outrosRadio = document.getElementById('outros_radio');
        const indicacaoInput = document.getElementById('indicacao');
        const outrosInput = document.getElementById('outros');
        const radios = document.querySelectorAll('input[name="como_soube"]');

        function toggleInputs() {
            indicacaoInput.style.display = indicacaoRadio.checked ? 'block' : 'none';
            if(!indicacaoRadio.checked) indicacaoInput.value = '';
            
            outrosInput.style.display = outrosRadio.checked ? 'block' : 'none';
            if(!outrosRadio.checked) outrosInput.value = '';
        }

        radios.forEach(radio => radio.addEventListener('change', toggleInputs));
        toggleInputs(); // estado inicial
    });
</script>
@endpush