@extends('layouts.web')

@section('content')

    <nav class="navbar navbar-default navbar-fixed-top stuck">
        <div class="container">
            @include('include.navbar')
        </div>
    </nav>
	<div class="navbar-fixed-padding-top">
    @include('include.subnavbar')
    <div class="container">
    	<div class="breadcrumb-block text-center">
   			<h3><strong>Edit Profile</strong></h3>
        </div>
            @include('partials.alerts')
			<div class="row">
            <div class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
            @foreach($userInfo as $user)
					<div class="white-box white-box-shadow">
                    {{ Form::open(['url' => route('edit',[$user['id']]), 'id'=>'editprofileform', 'method'=>'post', 'enctype' => 'multipart/form-data']) }} 
                    	<div class="row">
                            <div class="col-sm-3">
                                <div class="form-group profile-pic mb-0">
                                    @if($user['profile_pic'] != '')
                                	<img src="{{ URL::asset($user['profile_pic']) }}" />
                                    @endif
                                    <input type="hidden" value="{{ $user['profile_pic'] }}"  name="current_pic" />
                                </div>
                                <p class="text-center"><a href="javascript:void(0);" id="changepic">Change</a></p>
                            </div>
                            <div class="col-sm-9">
                            	<div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group mb-3">
                                            <label>First Name<em class="text-danger">*</em></label>
                                            <input type="text" name="firstname" class="form-control inputTextSpace form-control-rounded input-lg" placeholder="First Name" value="{{ $user['firstname'] }}" maxlength="50" autocomplete="off" />
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group mb-3">
                                            <label>Last Name<em class="text-danger">*</em></label>
                                            <input type="text" name="lastname" class="form-control inputTextSpace form-control-rounded input-lg" placeholder="Last Name" value="{{ $user['lastname'] }}" maxlength="50" autocomplete="off" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group mb-3">
                                            <label>Address<em class="text-danger">*</em></label>
                                            <input type="text" name="address" class="form-control inputTextNumberSpace form-control-rounded input-lg" placeholder="Address" value="{{ $user['address'] }}" maxlength="200" autocomplete="off" />
                                        </div>
                                	</div>
                                    <div class="col-sm-6">
                                        <div class="form-group mb-3">
                                            <label>City<em class="text-danger">*</em></label>
                                            <input type="text" name="city" class="form-control inputTextSpace form-control-rounded input-lg" placeholder="City" value="{{ $user['city'] }}" maxlength="200" autocomplete="off" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group mb-3 font-size-18">
                                            <label>Mobile<em class="text-danger">*</em></label>
                                            <div>
                                            <input type="text" name="mobile" id="mobile" class="form-control form-control-rounded input-lg" value="{{ $user['mobile'] }}" maxlength="12" autocomplete="off" />
                                            </div>
                                            <label id="mobile-error" class="error" for="mobile"></label>
                                            <div class="text-muted"><small>We will send a verification code to your mobile number.</small></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group mb-3">
                                            <label>Date Of Birth</label>
                                            <div class='input-group date' id='datetimepicker1'>
                                                <input type='text' class="form-control form-control-rounded input-lg inputNoEnter" name="dob" value="{{ $user['dob'] }}"/>
                                                <span class="input-group-addon" style="background:#e9e9ec; border-color:#e9e9ec;border-radius:0 100px 100px 0;">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-3">
                                    <label>Bio</label>
                                    <textarea name="bio" id="bio" class="form-control form-control-rounded input-lg" maxlength="200" autocomplete="off" placeholder="We would love to know something about you." style="background:#e9e9ec; border-color:#e9e9ec;font-size:15px;height:150px;" />{{ $user['short_bio'] }}</textarea>
                                    
                                </div>
                                <div class="form-group mb-3">
                                    <label>Facebook URL</label>
                                    <input type="text"  name="fb" id="fb" value="{{ $user['facebook_profile'] }}" class="form-control form-control-rounded input-lg"/>
                                </div>
                                <div class="form-group mb-3">    
                                    <label>LinkedIn URL</label>
                                    <input type="text"  name="lin" id="lin" value="{{ $user['linkedin_profile'] }}" class="form-control form-control-rounded input-lg"/>
                                </div>
                                
                                <hr/>
                                
                                <div class="form-group" id="changepicblk">
                                	<div class="form-group">
                                    	<label>Profile Picture<br/><small class="text-muted">If you wish to add or change your profile picture, please upload here</small></label>
                                    </div>
                                    <div class="inputfilebox mb-0">
                                    	<a class="previewlink" href="javascript:void(0);" target="_blank" style="display:none;">Preview</a>
                                        <input type="file" name="profile_pic" id="profile_pic" class="inputfile inputfilepreview inputfile-1" />
                                        <label for="profile_pic"><span>Upload Picture</span></label>
                                        <label id="profile_pic-error" class="error" for="profile_pic"></label>
                                    </div>
                                    <p class="text-muted text-center"><small>File size: 1 MB - File type: jpg, jpeg</small></p>
                                </div>
                                
                                <hr/>
                                
                                <div class="form-group">
                                	<div class="form-group">
                                    <label>Emirates ID Copy<br/><small class="text-muted">If you wish to add or change your emirates id copy, please upload here</small></label>
                                    </div>
                                    <div class="inputfilebox mb-0">
                                    	<a class="previewlink" href="javascript:void(0);" target="_blank" style="display:none;">Preview</a>
                                        <input type="file" name="document" id="emiratesdocument" class="inputfile inputfilepreview inputfile-1" />
                                        <label for="emiratesdocument"><span>Upload Emirates ID</span></label>
                                        <label id="emiratesdocument-error" class="error" for="emiratesdocument"></label>
                                    </div>
                                    <p class="text-muted text-center"><small>File size: 1 MB - File type: jpg, jpeg, pdf</small></p>
                                </div>
                                
                                <div class="form-group">
                                    <label>Expiry Date</label>
                                    <div class='input-group date' id='datetimepicker2'>
                                        <input type='text' class="form-control form-control-rounded input-lg inputNoEnter" name="emirates_id_expiration_date" value="{{ $user['emirates_id_expiration_date'] }} " autocomplete="off" />
                                        <span class="input-group-addon" style="background:#e9e9ec; border-color:#e9e9ec;border-radius:0 100px 100px 0;">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                    <label id="emirates_id_expiration_date-error" class="error" for="emirates_id_expiration_date"></label>
                                </div>
                                <p><a href="javascript:void(0);" data-toggle="modal" data-target="#myModal"><i class="fa fa-file-text"></i> Current Emirates ID Copy</a></p>

                                <hr/>
                                @if(Auth::user()->user_type_id == env('USER_TYPE_LANDLORD'))
                                <div class="form-group">
                                	<div class="form-group">
                                    <label>Passport Copy<br/><small class="text-muted">If you wish to add or change your passport copy, please upload here</small></label>
                                    </div>
                                    <div class="inputfilebox mb-0">
                                    	<a class="previewlink" href="javascript:void(0);" target="_blank" style="display:none;">Preview</a>
                                        <input type="file" name="document2" id="passportdocument" class="inputfile inputfilepreview inputfile-1" />
                                        <label for="passportdocument"><span>Upload Passport</span></label>
                                        <label id="passportdocument-error" class="error" for="passportdocument"></label>
                                    </div>
                                    <p class="text-muted text-center"><small>File size: 1 MB - File type: jpg, jpeg, pdf</small></p>
                                </div>
                                <p><a href="javascript:void(0);" data-toggle="modal" data-target="#myPassportModal"><i class="fa fa-file-text"></i> Current Passport Copy</a></p>
                                <hr/>    
                                <p>&nbsp;</p> 
                                @endif
                                
                                <div class="form-group text-center">
                                    <a href="{{ route('profile',[$user['id']]) }}" class="btn btn-lg btn-rounded btn-default">Cancel</a>
                                    <button type="submit" class="btn btn-lg btn-rounded btn-purple">Update</button>
                                </div>
                            </div>
                    {{ Form::close() }}
                	</div>
            @endforeach
			</div>
            </div>
    </div>
    </div>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Current Document</h4>
          </div>
          <div class="modal-body">
            <embed src="{{ URL::asset($user['document']) }}" width="100%" height="400px" />
            <input type="hidden" value="{{ $user['document'] }}"  name="current_doc">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myPassportModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Current Passport Copy</h4>
          </div>
          <div class="modal-body">
            <embed src="{{ URL::asset($user['passport']) }}" width="100%" height="400px" />
            <input type="hidden" value="{{ $user['passport'] }}"  name="current_doc">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    @include('include.footer')
    @include('include.scripts')

    <script type="text/javascript" src="{{ asset('js/moment.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/bootstrap-datetimepicker.js') }}"></script>
    <script type="text/javascript">
    
        $(window).load(function() {
            $('#datetimepicker1').datetimepicker({
                format: 'YYYY-MM-DD',
				maxDate: moment(),
				useCurrent: false
            });
        });
        $(window).load(function() {
            $('#datetimepicker2').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: false
            });
        });
	</script>

    <script>
        // Upon click this should should trigger click on the #file-to-upload file input element
        // This is better than showing the not-good-looking file input element
        $("#profile-button").on('click', function() {
            $("#profile-upload").trigger('click');
        });

        // When user chooses a PDF file
        $("#profile-upload").on('change', function() {
                var fileName = $(this).val();
                fileExt = fileName.substr(fileName.lastIndexOf('.')); //Getting file extension
                if(fileExt=='.jpg' || fileExt=='.JPG' || fileExt=='.jpeg' || fileExt=='.JPEG'){
                    var input = document.getElementById("profile-upload");
                    var fReader = new FileReader();
                    fReader.readAsDataURL(input.files[0]);
                    fReader.onloadend = function(event){
                        var img = document.getElementById("profile");
                        img.src = event.target.result;
                    } 
                }
                else{
                    alert('Not a valid file !');
                    $('#profile-upload').val('');
                    return false;
                }
        });
		$("#changepic").click(function(e) {
			e.preventDefault();
			$('html, body').animate({
				scrollTop: $("#changepicblk").offset().top - 90
			}, 1000);
		});
        </script>  
<script>
$.validator.addMethod('filesize1', function (value, element, param) {
    return this.optional(element) || (element.files[0].size <= param)
}, 'Invalid File Size');

$("#editprofileform").validate({
	ignore: [],
	rules: {
		firstname: {
			required: true
		},
		lastname: {
			required: true
		},
		address: {
			required: true
		},
		city: {
			required: true
		},
		mobile: {
			required: true,
			val_mob_num_demo: true
		},
		profile_pic: {
			required: false,
			extension: "jpg,jpeg",
            filesize1 : 1048576
		},
		document: {
			required: false,
			extension: "jpg,jpeg,pdf",
            filesize1 : 1048576
		},
		document2: {
			required: false,
			extension: "jpg,jpeg,pdf",
            filesize1 : 1048576
		},
		emirates_id_expiration_date:{
			required: true
		}
	},
	messages: {
		firstname: {
			required: "Required"
		},
		lastname: {
			required: "Required"
		},
		address: {
			required: "Required"
		},
		city: {
			required: "Required"
		},
		mobile: {
			required: "Required"
		},
		profile_pic: {
			required: "",
			extension: "Invalid File Type"
		},
		document: {
			required: "",
			extension: "Invalid File Type"
		},
		document2: {
			required: "",
			extension: "Invalid File Type"
		},
		emirates_id_expiration_date:{
			required: "Required"
		}
	},
	invalidHandler: function(form, validator) {	
		if (!validator.numberOfInvalids())
			return;
		$('html, body').animate({
			scrollTop: $(validator.errorList[0].element).offset().top - 100
		}, 300);
	}
});
</script>
@endsection