
<?php require_once("inc/init.php"); ?>
<?php require 'controller/profileCode.php'; ?>

<!-- row -->
<div class="row">

	<!-- col -->
	<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
		<h1 class="page-title txt-color-blueDark"><!-- PAGE HEADER --><i class="fa-fw fa fa-file-o"></i> Other Pages <span>>
			Profile </span></h1>
	</div>
	<!-- end col -->


	<!-- col -->
	<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">

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

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

<!-- row -->

<div class="row">

	<div class="col-sm-12">


			<div class="well well-sm">

				<div class="row">

					<div class="col-sm-12 col-md-12 col-lg-6">
						<div class="well well-light well-sm no-margin no-padding">

							<div class="row">

								<div class="col-sm-12">
									<div id="myCarousel" class="carousel fade profile-carousel">
										<div class="air air-bottom-right padding-10">
											<!-- <a href="javascript:void(0);" class="btn txt-color-white bg-color-teal btn-sm"><i class="fa fa-check"></i> Follow</a>&nbsp; <a href="javascript:void(0);" class="btn txt-color-white bg-color-pinkDark btn-sm"><i class="fa fa-link"></i> Connect</a>
 -->										</div>
										<div class="air air-top-left padding-10">
											<h4 class="txt-color-white font-md"></h4>
										</div>
										<ol class="carousel-indicators">
											<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
										<!-- 	<li data-target="#myCarousel" data-slide-to="1" class=""></li>
											<li data-target="#myCarousel" data-slide-to="2" class=""></li> -->
										</ol>
										<div class="carousel-inner">
											<!-- Slide 1 -->
											<div class="item active">
												<img src="img/demo/s1.jpg" alt="">
											</div>
											<!-- Slide 2 -->
											<!-- <div class="item">
												<img src="img/demo/s2.jpg" alt="">
											</div> -->
											<!-- Slide 3 -->
											<!-- <div class="item">
												<img src="img/demo/m3.jpg" alt="">
											</div> -->
										</div>
									</div>
								</div>

								<div class="col-sm-12">

									<div class="row">
													<?php 
								if ($get_staff_detail) {
									foreach ($get_staff_detail as $key) {
									$role = $profile->get_role($key['role']);
								?>
										<div class="col-sm-3 profile-pic">
											<img src="userImage/<?php echo $key['picture']; ?>" id="image_preview">
											<div class="padding-10">
												<!-- <h4 class="font-md"><strong>1,543</strong>
												<br>
												<small>Followers</small></h4>
												<br>
												<h4 class="font-md"><strong>419</strong>
												<br>
												<small>Connections</small></h4> -->
											</div>
										</div>
										<div class="col-sm-6">
								
											<h1><?php echo $key['first_name']; ?> <span class="semi-bold"><?php echo $key['last_name']; ?></span>
											<br>
											<small> <?php echo $role[0]['role_name']; ?></small></h1>

											<ul class="list-unstyled">
												<?php
								if($key['phone']  != "" )  {
								  $phoneArray = explode(",",$key['phone']);
								  $countPhone = count($phoneArray);
								  $phoneArray3 = array_slice($phoneArray, 0,3);
								  if($phoneArray3){
								  	foreach($phoneArray3 as $phoneArray3=>$value){
								  		if ($value!='') {
								  			
								  		
								 ?>
								
								 	<li>
													<p class="text-muted">
														<i class="fa fa-phone"></i>&nbsp;&nbsp;(<span class="txt-color-darken"><?php echo $value; ?></span>) 
													</p>
												</li>
												

												<?php }} }}?>
												<li>
													<p class="text-muted">
														<i class="fa fa-envelope"></i>&nbsp;&nbsp;<a href="mailto:simmons@smartadmin"><?php echo $key['email']; ?></a>
													</p>
												</li>
										
											<br>
											<br>
										
										</div>
											<?php
										}
									}
											?>
										<div class="col-sm-3">
											<h1><small>Class</small></h1>
											<ul class="list-inline friends-list">
												
												</li>
												<!-- <li>
													<a href="javascript:void(0);">413 more</a>
												</li> -->
											</ul>

											
										</div>

									</div>

								</div>

							</div>

							<div class="row">

								<div class="col-sm-12">

									<hr>

									<!-- <div class="padding-10">

										
							
									</div> -->

								</div>

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

						</div>

					</div>
					<div class="col-sm-12 col-md-12 col-lg-6">

						<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false">
				<!-- widget options:
				usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-collapsed="true"
				data-widget-sortable="false"

				-->
				<header>
					<span class="widget-icon"> <i class="fa fa-edit"></i> </span>
					<h2>Update Profile </h2>

				</header>

				<!-- widget div-->
				<div>

					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->

					</div>
					<!-- end widget edit box -->

					<!-- widget content -->
					<div class="widget-body">
						<div class="widget-body-toolbar">
							
							<div class="row">
								
								<div class="col-sm-6">
									<button id="enable" class="btn btn btn-default">
										enable / disable 
									</button>
								</div>
								<div class="col-sm-6 text-right">
									
									<div class="onoffswitch-container">
										<span class="onoffswitch-title">Auto Open Next</span> 
										<span class="onoffswitch">
											<input type="checkbox" class="onoffswitch-checkbox" id="autoopen">
											<label class="onoffswitch-label" for="autoopen"> 
												<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span> 
												<span class="onoffswitch-switch"></span>
											</label> 
										</span> 
										
										
									</div>
									
								<!-- 	<div class="onoffswitch-container">
										<span class="onoffswitch-title">Open Inline</span> 
										<span class="onoffswitch">
											<input type="checkbox" class="onoffswitch-checkbox" id="inline">
											<label class="onoffswitch-label" for="inline"> 
												<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span> 
												<span class="onoffswitch-switch"></span>
											</label> 
										</span>
									</div> -->	
									
								</div>
								
							</div>
								

						</div>

						<table id="user" class="table table-bordered table-striped" style="clear: both;color: #fff !important;">
							<tbody >
								<?php 
								if ($get_staff_detail) {
									foreach ($get_staff_detail as $key) {
									$role = $profile->get_role($key['role']);
								?>
								<tr>
									<td>Staff Id</td>
									<td><a href="index.php#ajax/profile.php#" id="staff_id" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-original-title="Enter your firstname"><?php echo $key['staff_id']; ?></a></td>
								</tr>
								<tr>
									<td >First Name</td>
									<td><a style="clear: both;color: #fff !important;" href="index.php#ajax/profile.php#" id="firstname" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-original-title="Enter your first name"><?php echo $key['first_name']; ?></a></td>
								</tr>

								<tr>
									<td>Last Name</td>
									<td><a style="clear: both;color: #fff !important;" href="index.php#ajax/profile.php#" id="lastname" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-original-title="Enter your last name"><?php echo $key['last_name']; ?></a></td>
								</tr>
								
								<tr>
									<td style="width:35%;color: #fff !important;">Email</td>
									<td style="width:65%"><a href="index.php#ajax/profile.php#" id="username" data-type="text" data-pk="1" data-original-title="Your Id"><?php echo $key['email']; ?></a></td>
								</tr>
								<tr>
									<td>Sex</td>
									<td><a style="clear: both;color: #fff !important;" href="index.php#ajax/profile.php#" id="sex" data-type="select" data-pk="1" data-value="1" data-original-title="Select sex"></a></td>
								</tr>
								<tr>
									<td>Role</td>
									<td><a style="clear: both;color: #fff !important;" href="index.php#ajax/profile.php" id="group" data-type="select" data-pk="1" data-value="0" data-source="/groups" data-original-title="Select Role"><?php echo $role[0]['role_name']; ?></a></td>
								</tr>
								
								<tr>
									<td>Date Of Birth</td>
									<td><a style="clear: both;color: #fff !important;" href="index.php#ajax/profile.php#" id="dob" data-type="combodate" data-value="<?php echo $key['dob']; ?>" data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1" data-original-title="Select Date of birth"></a></td>
								</tr>
								

								<tr>
									<td>Phone</td>
									<td><a style="clear: both;color: #fff !important;" href="index.php#ajax/profile.php#" id="address" data-type="address" data-pk="1" data-original-title="Please, add Phone(s)"></a></td>
								</tr>
								<tr>
									<td>Picture</td>
									<td><form action='ajax/profile.php' method="POST"  enctype="multipart/form-data">
										<input type="file" name="pic" id="pic"> <span style="font-size: 10px;color: #8B2328" id="message"></span><!--  <button class="btn btn-xs btn-primary pull-right">save</button> -->
									</form></td>
								</tr>

								<?php
								if($key['phone']  != "" )  {
								  $phoneArray = explode(",",$key['phone']);
								  $countPhone = count($phoneArray);
								  $phoneArray3 = array_slice($phoneArray, 0,3);
								 
								  if ($countPhone!=0) {
								  	
								 foreach ($phoneArray3 as $phoneArray) {
								 	?>
								 	<input type="hidden" id="phone1" value="<?php echo $phoneArray3[0] ?>">
								 	<?php 
								 	if ($countPhone!=1) {
								 	
								 	
								 	 ?>
								 	<input type="hidden" id="phone2" value="<?php echo $phoneArray3[1] ?>">
								 	<input type="hidden" id="phone3" value="<?php echo $phoneArray3[2] ?>">
								 	<?php
								 }
								 }
								}
								 }
								}	
							}
								 ?>
									
							</tbody>
						</table>

					</div>
					<!-- end widget content -->

				</div>
				<!-- end widget div -->

			</div>
			<!-- end widget -->

					</div>
				</div>

			</div>


	</div>

</div>

<!-- end row -->

</section>
<!-- end widget grid -->
<!-- JQUERY SELECT2 INPUT -->
		<script src="js/plugin/select2/select2.min.js"></script>

<script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();
	
	/*
	 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
	 * eg alert("my home function");
	 * 
	 * var pagefunction = function() {
	 *   ...
	 * }
	 * loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
	 * 
	 * TO LOAD A SCRIPT:
	 * var pagefunction = function (){ 
	 *  loadScript(".../plugin.js", run_after_loaded);	
	 * }
	 * 
	 * OR
	 * 
	 * loadScript(".../plugin.js", run_after_loaded);
	 */

	// PAGE RELATED SCRIPTS

	// pagefunction
	
	var pagefunction = function() {
		/*
		 * X-Ediable
		 */
	
		loadScript("js/plugin/x-editable/moment.min.js", loadMockJax);
	
		function loadMockJax() {
		    loadScript("js/plugin/x-editable/jquery.mockjax.min.js", loadXeditable);
		}
	
		function loadXeditable() {
		    loadScript("js/plugin/x-editable/x-editable.min.js", loadTypeHead);
		}
	
		function loadTypeHead() {
		    loadScript("js/plugin/typeahead/typeahead.min.js", loadTypeaheadjs);
		}
	
		function loadTypeaheadjs() {
		    loadScript("js/plugin/typeahead/typeaheadjs.min.js", runXEditDemo);
		}
	
		function runXEditDemo() {
	
		    (function (e) {
		        "use strict";
		        var t = function (e) {
		            this.init("address", e, t.defaults)
		        };
		        e.fn.editableutils.inherit(t, e.fn.editabletypes.abstractinput);
		        e.extend(t.prototype, {
		            render: function () {
		                this.$input = this.$tpl.find("input")
		            },
		            value2html: function (t, n) {
		                if (!t) {
		                    e(n).empty();
		                    return
		                }
		                var r = e("<div>").text(t.phone1).html() + ", " + e("<div>").text(t.phone2).html() +
		                    " st., bld. " + e("<div>").text(t.phone3).html();
		                e(n).html(r)
		            },
		            html2value: function (e) {
		                return null
		            },
		            value2str: function (e) {
		                var t = "";
		                if (e)
		                    for (var n in e)
		                        t = t + n + ":" + e[n] + ";";
		                return t
		            },
		            str2value: function (e) {
		                return e
		            },
		            value2input: function (e) {
		                if (!e)
		                    return;
		                this.$input.filter('[name="phone1"]').val(e.phone1);
		                this.$input.filter('[name="phone2"]').val(e.phone2);
		                this.$input.filter('[name="phone3"]').val(e.phone3)
		            },
		            input2value: function () {
		                return {
		                    phone1: this.$input.filter('[name="phone1"]').val(),
		                    phone2: this.$input.filter('[name="phone2"]').val(),
		                    phone3: this.$input.filter('[name="phone3"]').val()
		                }
		            },
		            activate: function () {
		                this.$input.filter('[name="phone1"]').focus()
		            },
		            autosubmit: function () {
		                this.$input.keydown(function (t) {
		                    t.which === 13 && e(this).closest("form").submit()
		                })
		            }
		        });
		        t.defaults = e.extend({}, e.fn.editabletypes.abstractinput.defaults, {
		            tpl: '<div class="editable-address"><label><span>Phone1: </span><input type="text" name="phone1" class="form-control"></label></div><div class="editable-address"><label><span>Phone2: </span><input type="text" name="phone2" class="form-control"></label></div><div class="editable-address"><label><span>Phone3: </span><input type="text" name="phone3" class="form-control"></label></div>',
		            inputclass: ""
		        });
		        e.fn.editabletypes.address = t
		    })(window.jQuery);
	
		    //ajax mocks
		    $.mockjaxSettings.responseTime = 500;
	
		    $.mockjax({
		        url: '/post',
		        response: function (settings) {
		            log(settings, this);
		        }
		    });
	
		    $.mockjax({
		        url: '/error',
		        status: 400,
		        statusText: 'Bad Request',
		        response: function (settings) {
		            this.responseText = 'Please input correct value';
		            log(settings, this);
		        }
		    });
	
		    $.mockjax({
		        url: '/status',
		        status: 500,
		        response: function (settings) {
		            this.responseText = 'Internal Server Error';
		            log(settings, this);
		        }
		    });
	
		    $.mockjax({
		        url: '/groups',
		        response: function (settings) {
		            this.responseText = [{
		                value: 0,
		                text: 'Staff'
		             }//, {
		            //     value: 1,
		            //     text: 'Service'
		            // }, {
		            //     value: 2,
		            //     text: 'Customer'
		            // }, {
		            //     value: 3,
		            //     text: 'Operator'
		            // }, {
		            //     value: 4,
		            //     text: 'Support'
		            // }, {
		            //     value: 5,
		            //     text: 'Admin'
		            // }
		            ];
		            log(settings, this);
		        }
		    });
	
		    //TODO: add this div to page
		    function log(settings, response) {
		        var s = [],
		            str;
		        s.push(settings.type.toUpperCase() + ' url = "' + settings.url + '"');
		        for (var a in settings.data) {
		            if (settings.data[a] && typeof settings.data[a] === 'object') {
		                str = [];
		                for (var j in settings.data[a]) {
		                    str.push(j + ': "' + settings.data[a][j] + '"');
		                }
		                str = '{ ' + str.join(', ') + ' }';
		            } else {
		                str = '"' + settings.data[a] + '"';
		            }
		            s.push(a + ' = ' + str);
		        }
		        s.push('RESPONSE: status = ' + response.status);
	
		        if (response.responseText) {
		            if ($.isArray(response.responseText)) {
		                s.push('[');
		                $.each(response.responseText, function (i, v) {
		                    s.push('{value: ' + v.value + ', text: "' + v.text + '"}');
		                });
		                s.push(']');
		            } else {
		                s.push($.trim(response.responseText));
		            }
		        }
		        s.push('--------------------------------------\n');
		        $('#console').val(s.join('\n') + $('#console').val());
		    }
	
		    /*
		     * X-EDITABLES
		     */
	
		    $('#inline').on('change', function (e) {
		        if ($(this).prop('checked')) {
		            window.location.href = '?mode=inline#ajax/plugins.html';
		        } else {
		            window.location.href = '?#ajax/plugins.html';
		        }
		    });
	
		    if (window.location.href.indexOf("?mode=inline") > -1) {
		        $('#inline').prop('checked', true);
		        $.fn.editable.defaults.mode = 'inline';
		    } else {
		        $('#inline').prop('checked', false);
		        $.fn.editable.defaults.mode = 'popup';
		    }
	
		    //defaults
		    $.fn.editable.defaults.url = '/post';
		    //$.fn.editable.defaults.mode = 'inline'; use this to edit inline
	
		    //enable / disable
		    $('#enable').click(function () {
		        $('#user .editable').editable('toggleDisabled');
		    });
	
		    //editables
		    $('#username').editable({
		        url: '/post',
		        type: 'text',
		        pk: 1,
		        name: 'username',
		        title: 'Enter Email',
		         success: function(response, newValue) {
        if(response.status == 'error') return response.msg; //msg will be shown in editable form
       		var data = {
       			email:newValue
       		};
       		$.post('ajax/profile.php',data,function(res){
       			
       		});
    }
		    });
	
		    $('#firstname').editable({
		        validate: function (value) {
		            if ($.trim(value) == '')
		                return 'This field is required';
		        },         success: function(response, newValue) {
        if(response.status == 'error') return response.msg; //msg will be shown in editable form
       		var data = {
       			first_name:newValue
       		};
       		$.post('ajax/profile.php',data,function(res){
       			
       		});
    }
		    });

		       $('#lastname').editable({
		        validate: function (value) {
		            if ($.trim(value) == '')
		                return 'This field is required';
		        },         success: function(response, newValue) {
        if(response.status == 'error') return response.msg; //msg will be shown in editable form
       		var data = {
       			last_name:newValue
       		};
       		$.post('ajax/profile.php',data,function(res){
       			
       		});
    }
		    });
	
		    $('#sex').editable({
		        prepend: "not selected",
		        source: [{
		            value: 1,
		            text: 'Male'
		        }, {
		            value: 2,
		            text: 'Female'
		        }],success: function(response, newValue) {
        if(response.status == 'error') return response.msg; //msg will be shown in editable form
       		var data = {
       			sex:newValue
       		};
       		$.post('ajax/profile.php',data,function(res){
       			
       		});
    },
		        display: function (value, sourceData) {
		            var colors = {
		                "": "gray",
		                1: "green",
		                2: "blue"
		            }, elem = $.grep(sourceData, function (o) {
		                    return o.value == value;
		                });
	
		            if (elem.length) {
		                $(this).text(elem[0].text).css("color", colors[value]);
		            } else {
		                $(this).empty();
		            }
		        }
		    });
	
		    $('#status').editable();
	
		    $('#group').editable({
		        showbuttons: false
		    });
	
		    $('#vacation').editable({
		        datepicker: {
		            todayBtn: 'linked'
		        }
		    });
	
		    $('#dob').editable({
		    	type:'date',
		    	format: 'yyyy-mm-dd',
		    	viewformat: 'dd/mm/yyyy',
		    	success: function(response, newValue) {
		    		var da = newValue;
		    	$.post('ajax/profile.php?dob='+da+'',function(res){
		    		alert(res);
		    	});
		    }});
	
		    $('#event').editable({
		        placement: 'right',
		        combodate: {
		            firstItem: 'name'
		        }
		    });
	
		    $('#meeting_start').editable({
		        format: 'yyyy-mm-dd hh:ii',
		        viewformat: 'dd/mm/yyyy hh:ii',
		        validate: function (v) {
		            if (v && v.getDate() == 10)
		                return 'Day cant be 10!';
		        },
		        datetimepicker: {
		            todayBtn: 'linked',
		            weekStart: 1
		        }
		    });
	
		   
	
		    $('#note').editable();
		    $('#pencil').click(function (e) {
		        e.stopPropagation();
		        e.preventDefault();
		        $('#note').editable('toggle');
		    });
	
		
	
		   var phone1 = $('#phone1').val();
		   var phone2 = $('#phone2').val();
		   var phone3 = $('#phone3').val();
		    $('#address').editable({
		        url: '/post',
		        value: {
		            phone1: phone1,
		            phone2: phone2,
		            phone3: phone3
		        },
		        validate: function (value) {
		            if (value.phone1 == '')
		                return 'Phone is required!';
		        },success: function(response, newValue) {
        if(response.status == 'error') return response.msg; //msg will be shown in editable form
       		var data = {
       			phone:newValue
       		};
       		$.post('ajax/profile.php',data,function(res){
       			
       		});
    },
		        display: function (value) {
		            if (!value) {
		                $(this).empty();
		                return;
		            }
		            var html = '<b>' + $('<div>').text(value.phone1).html() + '</b>, ' + $('<div>').text(value.phone2)
		                .html() + ' ,  ' + $('<div>').text(value.phone3).html();
		            $(this).html(html);
		        }
		    });
	
		    $('#user .editable').on('hidden', function (e, reason) {
		        if (reason === 'save' || reason === 'nochange') {
		            var $next = $(this).closest('tr').next().find('.editable');
		            if ($('#autoopen').is(':checked')) {
		                setTimeout(function () {
		                    $next.editable('show');
		                }, 300);
		            } else {
		                $next.focus();
		            }
		        }
		    });
	
		}


	};
	
	// end pagefunction
	
	// run pagefunction on load

	pagefunction();

	$(document).ready(function(){
		$("#pic").change(function() {
           
           
        $("#message").empty(); // To remove the previous error message
        var file = this.files[0];
        var imagefile = file.type;
        var match= ["image/jpeg","image/png","image/jpg"];
        if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
        {
        
        $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"Note"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
        return false;
        }
        else
        {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
        }
        });
        
           function imageIsLoaded(e) {
        $("#pic").css("color","green");
        $('#image_preview').css("display", "block");
       
        $("#image_preview").attr('src',e.target.result);
        myimage = e.target.result;
 var myFormData = new FormData();
myFormData.append('pic', $('#pic').prop('files')[0]);

$.ajax({
  url: 'ajax/profile.php?dp=',
  type: 'POST',
  processData: false, // important
  contentType: false, // important
  dataType : 'json',
  data: myFormData,
  beforeSend:function(res){
  	// console.log(e);
  },
  complete:function(res){
  	console.log(res);
  },
  success:function(res){
  	console.log(res);
  },
  error:function(res){
 console.log(res);
  }
});
       // $("#image_preview").attr('src',e.target.result);
       //  $("#image_preview").attr('src',e.target.result);
        };
	});

</script>
