@extends('layouts.site')

@section('title', 'Gens - Alterar Senha')

@section('content')

<section class="page-header">
</section>

<section class="section-header">
    <div class="container container-header">
        <h2>Alterar Senha</h2>
        @component('components.site.breadbrumb', ["itens" => ["Minha Conta" => "minha-conta", "Alterar Senha" => ""]])
        @endcomponent
</section>

<section class="contact-info-one pricing-one pricing-one__home-two">
    <div class="container">
        <div class="row checkout-form">
            <div class="col-lg-4 col-md-4">
                @component('components.site.menu-minha-conta', ['representante' => $representante])
                @endcomponent
            </div>
            <div class="col-lg-8 col-md-8">
                <div class="comment-form dados-form">
                    <h3 class="comment-form__title">Alterar senha</h3>
                    <form method="POST" action="{{route('salvar-nova-senha', $representante->id)}}" class="comment-form__wrap" id="alterar-senha-form">

                        @if ($errors->any())
                            <div class="col-md-12">
                                <div class="alert alert-danger col-lg-12 col-md-12">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    @foreach ($errors->all() as $error)
                                    <p style="margin:auto;"><strong class="msg-info">Atenção! </strong>{!! $error !!}</p>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if(session('mensagem'))
                            <div class="col-md-12">
                                <div class="alert alert-success col-lg-12 col-md-12">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                        <p style="margin:auto;"><strong class="msg-info">Feito!</strong>{!!session('mensagem')!!}</p>
                                </div>
                            </div>
                        @endif

                        @csrf

                        <div class="row white-form">
                            <div class="col-lg-6 col-md-6">
                                <label>Nova Senha <span class="required">*</span></label>
                                <input type="password" class="form-control" placeholder="Mínimo de 8 caracteres" id="password" name="password" required disabled>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <label>Repetir Senha <span class="required">*</span></label>
                                <input type="password" class="form-control" placeholder="Repita a senha" id="repetir_password" name="repetir_password" required disabled>
                            </div>
                            <div class="col-lg-12 col-md-12 text-right">
                                <button id="btn-editar" type="button" class="thm-btn comment-form__btn btn-gensino-01">Editar</button>
                                <button id="btn-salvar" type="submit" class="thm-btn comment-form__btn btn-gensino-01" style="display: none;">Salvar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@component('components.site.fale-conosco')
@endcomponent

@endsection

@push('js')
<script type="text/javascript">

    //gerando TOKEN automaticamente
    $.ajaxSetup({
        headers:{
            'X-CSRF-TOKEN':"{{ csrf_token()}}"
        }
    });

    $('#btn-editar').click(function() {
        $("#btn-editar").css('display','none');
        $("#btn-salvar").css('display','initial');
        $("#alterar-senha-form").each(function(){
            $(this).find(':input').prop("disabled",false);
            $(this).find(':input').css("border","1px solid #ececec");
        });
    });

</script>
@endpush