@section('css')


@endsection


@section('scripts')

<script>
    document.getElementById('foto').addEventListener('change', function (event) {
        const file = event.target.files[0];
        const preview = document.getElementById('preview');

        if (file) {
            const reader = new FileReader();

            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'inline';
            }

            reader.readAsDataURL(file);
        } else {
            preview.src = '{{ asset('storage/users/fotos/UserExampleQuad.png') }}';
        }
    });
</script>


@endsection



<x-appadminlte-layout>

    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">EDITAR USUÁRIO</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url('/principal') }}">Principal</a></li>
                        <li class="breadcrumb-item active">Editar usuário</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <form method="post" action="{{ route('users.update',$user->id) }}" class=""  enctype="multipart/form-data">
        @csrf
        @method('PATCH')   
                           <div class="card card-primary my-1 mx-2 mb-2">
                                <div class="card-header">
                                    <h3 class="card-title">Editar dados do usuário.</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                          <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
                                          <i class="fas fa-times"></i>
                                        </button>
                                      </div>                                    
                                </div>
                                <!-- /.card-header -->
                                    <div class="card-body">
                                     
                                    <div class="row">
                                        
                                        @php
                                            $nomefoto = is_null($user->foto) ? 'UserExampleQuad.png' : $user->foto;
                                        @endphp
                                        
                                        {{-- Foto --}}
                                        <div class="form-group col-sm-2">
                                            <label for="foto">Foto</label>
                                            <div class="text-center">
                                                <img class="profile-user-img img-fluid img-circle my-3" id="preview" 
                                                style="width:150px;height: 150px;object-fit: cover;"
                                                 src="{{ asset('storage/users/fotos/'. $nomefoto) }}" alt="User profile picture">
                                            </div>                    
                                            <input type="file" name="foto" id="foto" class="form-control" accept="image/*">
                                            <x-input-error class="mt-2" :messages="$errors->get('foto')" />
                                        </div>           


                                        <div class="form-group col-sm-10">
                                            <div class="row">
                                                {{-- name --}}
                                                <div class="form-group col-sm-3">
                                                    <label for="name">Nome</label>
                                                    <input type="text"    
                                                        class="form-control @error('name') is-invalid @enderror" name="name"
                                                        id="name" value="{{ old('name', $user->name) }}" required autofocus
                                                        autocomplete class="mt-1 block w-full"
                                                        placeholder="Digite o nome">
                                                    <x-input-error class="mt-2" :messages="$errors->get('name')" />
                                                </div>

                                                {{-- Email --}}
                                                <div class="form-group col-sm-3">
                                                    <label for="email">Email</label>
                                                    <input type="text"
                                                        class="form-control @error('email') is-invalid @enderror" name="email"
                                                        id="email" value="{{ old('email',$user->email) }}" required autofocus
                                                        autocomplete class="mt-1 block w-full"
                                                        placeholder="Digite o email.">
                                                    <x-input-error class="mt-2" :messages="$errors->get('email')" />

                                                </div> 
                                                
                                                
                                                {{-- role --}}
                                                <div class="form-group col-sm-2">
                                                    <label for="role">Papel</label>
                                                    <select class="form-control @error('role') is-invalid @enderror"
                                                        name="role" placeholder="Selecione o papel." id="role">
                                                        
                                                        @foreach ($roles as $role)
                                                            <option value="{{ $role->id }}"
                                                                @selected(old('role',$user->role_id) == $role->id)>
                                                                {{ $role->name }}</option>                                                
                                                        @endforeach
                                                    </select>
                                                    <x-input-error class="mt-2" :messages="$errors->get('role')" />
                                                </div> 


                                                {{-- Whatsapp --}}
                                                <div class="form-group col-sm-2">
                                                    <label for="whatsapp">Whatsapp</label>
                                                    <input type="text"    
                                                        class="form-control @error('whatsapp') is-invalid @enderror" name="whatsapp"
                                                        id="whatsapp" value="{{ old('whatsapp', $user->whatsapp) }}" required autofocus
                                                        autocomplete class="mt-1 block w-full"
                                                        placeholder="Whatsapp">
                                                    <x-input-error class="mt-2" :messages="$errors->get('whatsapp')" />
                                                </div>

                                                {{-- date_of_birth --}}
                                                <div class="form-group col-sm-2">
                                                    <label>Data de aniversário</label>
                                                    <input 
                                                        type="text" 
                                                        name="date_of_birth" 
                                                        id="date_of_birth"
                                                        {{-- class="datepicker mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring focus:ring-indigo-200 focus:ring-opacity-50" --}}
                                                        class="datepicker form-control"
                                                        x-data 
                                                        x-init="initDatepicker()" 
                                                        placeholder="dd/mm/aaaa"
                                                        value="{{ old('date_of_birth', $user->DateOfBirth_formatted ) }}"
                                                        required>
                                                
                                                        <x-input-error :messages="$errors->get('date_of_birth')" class="mt-2" />    
                                                </div>    


                                            </div> {{-- div.row  --}}
                                            <div class="row">
                                                    <!-- is_baptized -->
                                                    <div class="form-group col-sm-2">
                                                        <label for="is_baptized" class="form-label d-block mb-0">É batizado?</label>
                                                        <div class="form-check">
                                                            <input id="is_baptized_yes" type="radio" value="sim" class="form-check-input" name="is_baptized"
                                                                @checked(old('is_baptized', $user->is_baptized ) === 1)>
                                                            <label for="is_baptized_yes" class="form-check-label">Sim</label>
                                                        </div>
                                                        <div class="form-check">
                                                            <input id="is_baptized_no" type="radio" value="nao" class="form-check-input" name="is_baptized"
                                                                @checked(old('is_baptized', $user->is_baptized ) === 0)>
                                                            <label for="is_baptized_no" class="form-check-label">Não</label>
                                                        </div>
                                                        <x-input-error :messages="$errors->get('is_baptized')" class="mt-2" />
                                                    </div> 

                                                <!-- communion_group -->
                                                <div class="form-group col-sm-4">
                                                    <label for="communion_group">Pertence a algum grupo de comunhão? Qual?</label>
                                                    <input type="text"    
                                                        class="form-control @error('communion_group') is-invalid @enderror" name="communion_group"
                                                        id="communion_group" value="{{ old('communion_group', $user->communion_group) }}" required autofocus
                                                        autocomplete class="mt-1 block w-full"
                                                        placeholder="Grupo de comunhão">
                                                    <x-input-error class="mt-2" :messages="$errors->get('communion_group')" />
                                                </div>                                                
                                                
                                             

                                            </div>
                                         </div>                                        


                                    </div> {{-- div.row  --}}
                                    
                                    </div><!-- /.card-body -->


                                    <div class="card-footer">
                                        <div class="flex items-center gap-4">
                                            <button type="submit" class="btn btn-primary">SALVAR</button>

                                            <a href="{{ route('users.index')}}">
                                                <button type="button" class="btn btn-secondary">VOLTAR</button>
                                            </a>                                            
                                        </div>
                                    </div>
                            </div>
                        </form>
            

    </div>
</x-appadminlte-layout>