@extends('site.zbase::layout')
@section('content')
<div class="conteudo">
	<div class="topo-cont">
		<h2 class=" tit-pagina font-5">Minha conta</h2>
	</div>
	<div class="inner-conteudo">
		<div class="wrapper-perfil">
			<div class="tb-perfil-ext">
                @include('site.zbase::partials.menuConta')
				<div class="tb-perfil">
					<p class="txt-perfil font-3">Mantenha seus dados sempre atualizados, <span class="font-5">{{ $usuario->nome }}.</span></p>
                    @if($totalPedidos)
                    <p class="txt-perfil2 font-3">{{ $totalPedidos }} Compra{{ $totalPedidos>1?'s':'' }} feita{{ $totalPedidos>1?'s':'' }}</p>
                    @else
                    <p class="txt-perfil2 font-3">Nenhuma compra feita</p>
                    @endif
                    {!! Form::model($usuario, ['route'=>'perfil.salvar', 'class'=>'form-perfil']) !!}
						<div class="coluna-1">
							<div class="grupo">
								<div class="cell">
									<label for="nome" class="label-perfil font-3">Nome:</label>
                                    {!! Form::text('nome', null, ['maxlength'=>'255', 'disabled', 'id'=>'nome', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="email" class="label-perfil font-3">E-mail:</label>
                                    {!! Form::email('email', null, ['maxlength'=>'255', 'disabled', 'id'=>'email', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="cpf" class="label-perfil font-3">CPF:</label>
                                    {!! Form::text('cpf', null, ['maxlength'=>'14', 'disabled', 'id'=>'cpf', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
                            <div class="grupo">
								<div class="cell">
									<label for="data" class="label-perfil font-3">Data nasc.:</label>
                                    {!! Form::text('data_nascimento', $usuario->data_nascimento->format('d/m/Y'), ['maxlength'=>'10', 'disabled', 'id'=>'data', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
						</div>
						<div class="coluna-2">
							<div class="grupo">
								<div class="cell">
									<label for="sexo" class="label-perfil font-3">Sexo:</label>
									<div class="wrapper-select wrap-disabled">
										<div class="select-1">
                                            {!! Form::select('sexo', StringHelper::$sexos, null, ['id'=>'sexo', 'class'=>'font-3 sel-desk', 'disabled']) !!}
										</div>
										<div class="select-2">
											<span class="font-4">{{ head(StringHelper::$sexos) }}</span>
                                            {!! Form::select('sexo', StringHelper::$sexos, null, ['class'=>'font-3 sel-mob', 'disabled']) !!}
										</div>
									</div>
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="fone" class="label-perfil font-3">Fone:</label>
                                    {!! Form::text('telefone', null, ['maxlength'=>'15', 'disabled', 'id'=>'fone', 'class'=>'input-perfil font-3']) !!}
								</div>
							</div>
							<div class="grupo">
								<div class="cell">
									<label for="senha" class="label-perfil font-3">Senha:</label>
									<div class="senha-perfil"> <!-- senha-ativa -->
                                        {!! Form::password('senha', ['minlength'=>'6', 'maxlength'=>'255', 'disabled', 'id'=>'senha', 'class'=>'input-perfil font-3', 'placeholder'=>'Deixe em branco para manter...']) !!}
										<button class="bt-senha bt-ver" title="Visualizar caracteres"></button>
									</div>
									<p class="aviso-senha font-2">*A senha deve conter no mínimo 6 caracteres.</p>
								</div>
							</div>
						</div>
						<div class="coluna-3">
		                     <button class="bt-editar font-5 js-edit">Editar Perfil</button>
                             {!! Form::submit('Salvar', ['class'=>'envia-perfil font-5', 'style'=>'display:none;']) !!}
						</div>
                    {!! Form::close() !!}
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
    function changeSelect () {
        var select = $('.sel-desk')[0].selectize;

        if ($(window).width() > 1024 - scrollbarWidth()) {
            $('.sel-mob').prop('disabled', true);
            select.enable();
        } else {
            $('.sel-mob').prop('disabled', false);
            select.disable();
        }
    }

	$(document).ready(function () {
		$('input[name="telefone"]').mask('(99) 9999-9999?9', {placeholder:''});
		$('input[name="cpf"]').mask('999.999.999-99', {placeholder:''});
		$('input[name="data_nascimento"]').mask('99/99/9999', {placeholder:''});

		$('.bt-ver').mousedown(function () {
			var campo = $(this).prev('#senha');
			campo.attr('type', 'text');
		}).mouseup(function () {
			var campo = $(this).prev('#senha');
			campo.attr('type', 'password');
		}).click(function () {
			return false;
		});

        var editable = false;
        $('.js-edit').click(function () {
            var form = $('.form-perfil');

            form.find('input').prop('disabled', false).prop('required', true);
            form.find('input[type="password"]').prop('required', false);
            $('.selectize-input input').prop('required', false);
            $('.senha-perfil').addClass('senha-ativa');

            form.find('input[type="submit"]').show();
            $(this).hide();

            editable = true;
            changeSelect();

            return false;
        });

        $('.sel-mob').change(function(){
            var este = $(this);
            este.parent().find('span').html(este.find('option[value="'+este.val()+'"]').html());
        });

        $(window).resize(function () {
            if (editable) {
                changeSelect();
            }
        });
	});
</script>
@endsection