@extends('layouts.backend.app')
@section("content")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="page page-profile">
	<div class="pageheader">
        <h2>Mon compte <span></span></h2>
		<div class="page-bar">

			<ul class="page-breadcrumb">
				<li>
					<a href="{{route('spaceDashboard')}}"><i class="fa fa-home"></i> MONASSURANCE.CI</a>
				</li>
				<li>
				<a href="#.">Mon compte</a>
				</li>
				<li>
				<a href="{{route('profilepage')}}">Mon profil</a>
				</li>
			</ul>

		</div>
	</div>
	<!-- page content -->
	<div class="pagecontent">
		@if(Session::has('success'))
			<div class="text-center container w-420">
	            <div class="alert alert-success alert-dismissable">
	                	<h4><p align="center">{{Session::get('success')}}</p></h4>
	            </div>
	        </div>
	    @endif

	    @if(Session::has('error'))
			<div class="text-center container w-420">
	            <div class="alert alert-danger alert-dismissable">
	                <h4><p align="center">{{Session::get('error')}}</p></h4>
	            </div>
	        </div>
	    @endif
		<!-- row -->
		<div class="row">

			<!-- col -->
			<div class="col-md-4">

				<!-- tile -->
				<section class="tile tile-simple">

					<!-- tile widget -->
					<div class="tile-widget p-30 text-center">

						<div class="thumb thumb-xl">
							<img class="img-circle" src="/back/assets/uploads/avatar/{{Auth::user()->avatar}}" alt="">
						</div>
						<h4 class="mb-0"><strong>{{Auth::user()->firstname}} </strong> {{Auth::user()->lastname}}</h4>
						<span class="text-muted">Administrateur</span>
						<!--
						<div class="mt-10">
							<button class="btn btn-rounded-20 btn-sm btn-greensea">Follow</button>
							<button class="btn btn-rounded-20 btn-sm btn-lightred">Message</button>
						</div>
						-->
					</div>
					<!-- /tile widget -->

					<!-- tile body 
					<div class="tile-body text-center bg-blue p-0">

						<ul class="list-inline tbox m-0">
							<li class="tcol p-10">
								<h2 class="m-0">56</h2>
								<span class="text-transparent-white">Dévis</span>
							</li>
							<li class="tcol bg-blue dker p-10">
								<h2 class="m-0">14</h2>
								<span class="text-transparent-white">Polices</span>
							</li>
							<li class="tcol p-10">
								<h2 class="m-0">2</h2>
								<span class="text-transparent-white">Sinistres</span>
							</li>
						</ul>

					</div>-->
					<!-- /tile body -->

				</section>
				<!-- /tile -->


				


			</div>
			<!-- /col -->

			<!-- col -->
			<div class="col-md-8">

				<!-- tile -->
				<section class="tile tile-simple">

					<!-- tile body -->
					<div class="tile-body p-0">

						<div role="tabpanel">

							<!-- Nav tabs -->
							<ul class="nav nav-tabs tabs-dark" role="tablist">
								<li role="presentation" class="active"><a href="#PersoTab" aria-controls="settingsTab" role="tab" data-toggle="tab">Information personnel</a></li>
								<li role="presentation"><a href="#PasswordTab" aria-controls="settingsTab" role="tab" data-toggle="tab">Mot de passe</a></li>
							</ul>

							<!-- Tab panes -->
							<div class="tab-content">

								<div role="tabpanel" class="tab-pane active" id="PersoTab">

									<div class="wrap-reset">

										<form class="profile-settings" enctype="multipart/form-data" action="{{route('editProfile')}}" method="post">
											{{csrf_field()}}
											<div class="row">
												<div class="form-group col-md-12 legend">
													<h4><strong>Paramètres</strong> de profil</h4>
													<p>Configuration de mes information de profil</p>
												</div>
											</div>
											<div class="row">    
										        <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">  
										            <!-- image-preview-filename input [CUT FROM HERE]-->
										            <div class="input-group image-preview">
										                <input type="text" value="{{Auth::user()->avatar}}" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
										                <span class="input-group-btn">
										                    <!-- image-preview-clear button -->
										                    <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
										                        <span class="glyphicon glyphicon-remove"></span> Clear
										                    </button>
										                    <!-- image-preview-input -->
										                    <div class="btn btn-default image-preview-input">
										                        <span class="glyphicon glyphicon-folder-open"></span>
										                        <span class="image-preview-input-title">Browse</span>
										                        <input type="file" accept="image/png, image/jpeg, image/gif" name="avatar"/> <!-- rename it -->
										                    </div>
										                </span>
										            </div><!-- /input-group image-preview [TO HERE]--> 
										        </div>
										    </div>

											<div class="row">

												<div class="form-group{{ $errors->has('lastname') ? ' has-error' : '' }} col-sm-6">
													<label for="first-name">Nom</label>
													<input type="text" class="form-control" id="lastname"  name="lastname" value="{{Auth::user()->lastname}}">
													@if ($errors->has('lastname'))
						                                <span class="help-block">
						                                    <strong>{{ $errors->first('lastname') }}</strong>
						                                </span>
						                            @endif
												</div>

												<div class="form-group{{ $errors->has('firstname') ? ' has-error' : '' }} col-sm-6">
													<label for="last-name">Prénoms</label>
													<input type="text" class="form-control" id="firstname" name="firstname" value="{{Auth::user()->firstname}}">
													@if ($errors->has('firstname'))
						                                <span class="help-block">
						                                    <strong>{{ $errors->first('firstname') }}</strong>
						                                </span>
						                            @endif
												</div>

											</div>
											<div class="row">

												<div class="form-group{{ $errors->has('gender') ? ' has-error' : '' }} col-sm-6">
                                                    <label for="gender">Sexe</label><br/>
                                                    <label class="checkbox-inline checkbox-custom">
                                                        <input name="gender" value="M" type="radio" @if(Auth::user()->gender=='M') checked @endif><i></i> Masculin
                                                    </label>
                                                    <label class="checkbox-inline checkbox-custom">
                                                        <input name="gender" value="F" @if(Auth::user()->gender=='F') checked @endif type="radio"><i></i> Féminin
                                                    </label>
                                                    @if ($errors->has('gender'))
						                                <span class="help-block">
						                                    <strong>{{ $errors->first('gender') }}</strong>
						                                </span>
						                            @endif
                                                </div>
												<div class="form-group{{ $errors->has('dob') ? ' has-error' : '' }} col-sm-6">
		                                            <label>Date de naissance</label>
		                                                <div class="input-group datepicker w-330 mt-8" >
		                                                    <input type="text"  name="dob" value="
		                                                    {{date('d/m/Y', strtotime(Auth::user()->dob))}}" class="form-control">
		                                                    <span class="input-group-addon">
		                                                        <span class="fa fa-calendar"></span>
		                                                    </span>

		                                                </div>
		                                                @if ($errors->has('dob'))
						                                <span class="help-block">
						                                    <strong>{{ $errors->first('dob') }}</strong>
						                                </span>
						                            	@endif
		                                        </div>

											</div>
											

											<div class="row">

												<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }} col-sm-6">
													<label for="email">E-mail</label>
													<input type="email" class="form-control" id="email" name="email" value="{{Auth::user()->email}}" readonly>
													@if ($errors->has('email'))
						                                <span class="help-block">
						                                    <strong>{{ $errors->first('email') }}</strong>
						                                </span>
						                            @endif
												</div>

												<div class="form-group{{ $errors->has('phone') ? ' has-error' : '' }} col-sm-6">
													<label for="phone">Contact</label>
													<input type="text" class="form-control" id="phone" name="phone" value="{{Auth::user()->contact}}">
													@if ($errors->has('phone'))
						                                <span class="help-block">
						                                    <strong>{{ $errors->first('phone') }}</strong>
						                                </span>
						                            @endif
												</div>

											</div>

											<div class="row">
												<div class="form-group">
		                                            <div class="col-sm-offset-2 col-sm-10">
		                                                <button type="submit" class="btn btn-rounded btn-primary btn-sm">Modifier</button>
		                                                <button type="reset" class="btn btn-rounded btn-danger btn-sm">Annuler</button>
		                                            </div>
		                                        </div>
	                                        </div>

										</form>

									</div>

								</div>
								<div role="tabpanel" class="tab-pane" id="PasswordTab">

									<div class="wrap-reset">

										<form class="profile-settings" method="post" action="{{route('editPassword')}}">
										<input type="hidden" class="form-control" value="{{csrf_token()}}" name="_token" id="_token">
											<div class="row">
												<div class="form-group col-md-12 legend">
													<h4><strong>Paramètres</strong> de sécurité</h4>
													<p>Proteger votre compte</p>
												</div>
											</div>

											<div class="row">

												<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }} col-sm-6">
													<label for="email">E-mail</label>
													<input type="email" class="form-control" id="email" name="email" value="{{Auth::user()->email}}" required readonly>
													@if ($errors->has('email'))
						                                <span class="help-block">
						                                    <strong>{{ $errors->first('email') }}</strong>
						                                </span>
						                            @endif
												</div>


												<div class="form-group col-sm-6">
													<label for="password">Mot de passe actuel</label>
													<input type="password" class="form-control" id="currentpassword" required name="currentpassword" value="" >
													<span id="pass-result" class="passcheck"></span>
												</div>
												
											</div>

											<div class="row">

												<div class="form-group col-sm-6">
													<label for="new-password">Nouveau mot de passe</label>
													<input type="password" class="form-control" id="newpassword" required name="newpassword">
												</div>

												<div class="form-group col-sm-6">
													<label for="new-password-repeat">Retaper nouveau mot de passe</label>
													<input type="password" class="form-control" id="newpasswordrepeat" name="newpasswordrepeat">
													<span id="newpass-result" required class="passcheck"></span>
												</div>

											</div>
											<div class="row">
												<div class="form-group">
		                                            <div class="col-sm-offset-2 col-sm-10">
		                                                <button  id="btnUpdPwd" disabled type="submit" class="btn btn-rounded btn-primary btn-sm">Modifier</button>
		                                                <button type="submit" class="btn btn-rounded btn-danger btn-sm">Annuler</button>
		                                            </div>
		                                        </div>
	                                        </div>

										</form>

									</div>

								</div>
							</div>

						</div>

					</div>
					<!-- /tile body -->

				</section>
				<!-- /tile -->

			</div>
			<!-- /col -->











		</div>
		<!-- /row -->



	</div>
	<!-- /page content -->

</div>

@endsection

@section('header-script')
<link rel="stylesheet" href="{{asset('back/assets/js/vendor/datetimepicker/css/bootstrap-datetimepicker.min.css')}}">
<style type="text/css">

.image-preview-input {
    position: relative;
	overflow: hidden;
	margin: 0px;    
    color: #333;
    background-color: #fff;
    border-color: #ccc;    
}
.image-preview-input input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}
.image-preview-input-title {
    margin-left:2px;
}
</style>
@endsection

@section('footer-script')
<script src="{{asset('back/assets/js/vendor/daterangepicker/moment.js')}}"></script>
<script src="{{asset('back/assets/js/vendor/datetimepicker/js/bootstrap-datetimepicker.min.js')}}"></script>
@endsection

@section('custom-script')
<script>
$(document).on('click', '#close-preview', function(){ 
    $('.image-preview').popover('hide');
    // Hover befor close the preview
    $('.image-preview').hover(
        function () {
           $('.image-preview').popover('show');
        }, 
         function () {
           $('.image-preview').popover('hide');
        }
    );    
});

$(function() {
    // Create the close button
    var closebtn = $('<button/>', {
        type:"button",
        text: 'x',
        id: 'close-preview',
        style: 'font-size: initial;',
    });
    closebtn.attr("class","close pull-right");
    // Set the popover default content
    $('.image-preview').popover({
        trigger:'manual',
        html:true,
        title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
        content: "There's no image",
        placement:'bottom'
    });
    // Clear event
    $('.image-preview-clear').click(function(){
        $('.image-preview').attr("data-content","").popover('hide');
        $('.image-preview-filename').val("");
        $('.image-preview-clear').hide();
        $('.image-preview-input input:file').val("");
        $(".image-preview-input-title").text("Browse"); 
    }); 
    // Create the preview image
    $(".image-preview-input input:file").change(function (){     
        var img = $('<img/>', {
            id: 'dynamic',
            width:120,
            height:120
        });      
        var file = this.files[0];
        var reader = new FileReader();
        // Set preview image into the popover data-content
        reader.onload = function (e) {
            $(".image-preview-input-title").text("Change");
            $(".image-preview-clear").show();
            $(".image-preview-filename").val(file.name);            
            img.attr('src', e.target.result);
            $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
        }        
        reader.readAsDataURL(file);
    });  
});
$(document).ready(function() {

	    var x_timer;    
	    var y_timer;    
	    $("#currentpassword").keyup(function (e){
	        clearTimeout(x_timer);
	        var currentpassword = $(this).val();
	        x_timer = setTimeout(function(){
	            check_password_ajax(currentpassword);
	        }, 1000);
	    }); 

	    $("#newpasswordrepeat").keyup(function (e){
	        clearTimeout(y_timer);
	        var newpasswordrepeat = $(this).val();
	        y_timer = setTimeout(function(){
	            check_confirm_pwd(newpasswordrepeat);
	        }, 1000);
	    });

	function check_password_ajax(password){
	    $("#pass-result").html('<img src="/back/assets/images/ajaxloader.gif" />');
	    $.post("{{route('checkPwd')}}", {'password':password,'_token': $("#_token").val(), 'email':$("#email").val()}, function(data) {
	    	if(data==1){
	      		$("#pass-result").html("<img src='/back/assets/images/available.png' />");
	      		
	      		$( "#btnUpdPwd" ).prop( "disabled", false );
	    	}
	      	else{
	      		$("#pass-result").html("<img src='/back/assets/images/not-available.png' />");
	      		$( "#btnUpdPwd" ).prop( "disabled", true );
	      	}
	    
	    });
	}

	function check_confirm_pwd(newpasswordrepeat){
		$("#newpass-result").html('<img src="/back/assets/images/ajaxloader.gif" />');

		if(newpasswordrepeat===$("#newpassword").val()){
			$("#newpass-result").html("<img src='/back/assets/images/available.png' />");
			$( "#btnUpdPwd" ).prop( "disabled", false );
		}else{
			$("#newpass-result").html("<img src='/back/assets/images/not-available.png' />");
			$( "#btnUpdPwd" ).prop( "disabled", true );
		}

	}
	});
</script>
@endsection