<!DOCTYPE html>
<html lang="cs-cz" dir="ltr">
  <head>
  <meta charset="UTF-8">
  <title>Add person</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="smart-forms.css" type="text/css" rel="stylesheet">
  <link href="style.css" rel="stylesheet"> 
  <!--[if lte IE 9]>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>    
    <script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
  <![endif]-->
  <!--[if lte IE 8]>
    <link type="text/css" rel="stylesheet" href="smart-forms-ie8.css">
  <![endif]-->
  <script src="js/jquery.js"></script>
  <script src="js/form.js"></script>
  <script src="js/jquery.validate.min.js"></script>
  <script src="js/additional-methods.min.js"></script>
  <script src="js/jquery-ui-1.10.4.custom.min.js"></script>
  <script src="js/jquery-ui-touch-punch.min.js"></script>   
  </head>
  <body>
    <?php include_once 'db.php'; ?>
    <div class="page">
      <div class="smart-wrap">
        <div class="smart-forms smart-container wrap-3">
          <div class="form-header header-primary">
            <h4><div id="created">Add person</div></h4>
          </div>
          <form id="mainform" action="upload.php" method="post">
            <div class="form-body">
              <div class="section">
                <label class="field">
                  <input type="text" name="Name" class="gui-input" placeholder="First name...">
                </label>
              </div>
              <div class="section">
                <label class="field">
                  <input type="text" name="Surname" class="gui-input" placeholder="Last name...">
                </label>
              </div>
              <div class="section">
                <label class="field">
                  <input type="text" name="City" class="gui-input" placeholder="City...">
                </label>
              </div>
              <div class="section">
                <?php echo Select("traits", "State", "state"); ?>
              </div>
              <div class="frm-row">
                <div class="section colm colm3">
                  <div class="spacer-b15">
                    <label>Height:</label>
                    <input type="text" id="height" class="slider-input" value="50 cm" readonly>
                    <label class="field">
                      <input type="text" id="heightInput" name="Height" class="gui-input">
                    <label for="Height"></label>
                  </label>
                  </div>            
                  <div class="sliderv-wrapper green-slider">
                    <div id="heightSlider"></div>
                  </div> 
                </div>
                <div class="section colm colm9">
                  <div class="spacer-b15 spacer-t40">
                    <label>Year of birth:</label>
                    <input type="text" id="year" class="slider-input" value="1920" readonly>
                    <label class="field">
                      <input type="text" id="yearInput" name="YearOfBirth" class="gui-input">
                    <label for="YearOfBirth"></label>
                  </label>
                  </div>                 
                  <div class="slider-wrapper green-slider">
                    <div id="yearSlider"></div>
                  </div>
                  <span class="small-text block spacer-t20 fine-grey">Tip: click on slider and slide with arrow keys</span>
                  <div class="spacer-t30">
                    <?php echo RadioButton("traits", "Gender"); ?>
                  </div> 
                  <div class="spacer-t30">
                    <?php echo RadioButton("traits", "SkinColor"); ?> 
                  </div> 
                </div>
              </div>
              <div class="frm-row">
                <div class="section colm colm6">
                  
                </div>
                <div class="section colm colm6">
                  
                </div>
              </div>
              <div class="section">
                <label class="field-label" for="EyeColor">Eye Color</label>
                <?php echo Select("traits", "EyeColor", ""); ?>
              </div>
              <div class="section">
                <label class="field-label" for="HairColor">Hair Color</label>
                <?php echo Select("traits", "HairColor", ""); ?>
              </div>
              <div class="frm-row">
                <div class="section colm colm4 bdr">
                  <label class="switch switch-round">
                    <input type="checkbox" name="Beard" id="Beard" value="1">
                    <label for="Beard" data-on="Yes" data-off="No"></label>
                    <span> Beard </span>
                  </label>
                </div>
                <div class="section colm colm4 bdr">
                  <label class="switch switch-round">
                    <input type="checkbox" name="Scar" id="Scar" value="1">
                    <label for="Scar" data-on="Yes" data-off="No"></label>
                    <span> Scar </span>
                  </label>
                </div>
                <div class="section colm colm4">
                  <label class="switch switch-round">
                    <input type="checkbox" name="Tattoo" id="Tattoo" value="1">
                    <label for="Tattoo" data-on="Yes" data-off="No"></label>
                    <span> Tattoo </span>
                  </label>
                </div>
              </div>
              <div class="section">
                <label class="field-label" for="ClothesUpperHalf">Clothes upper half <a href="exampleclothes.php" target="_blank">(example)</a></label>
                <?php echo Select("traits", "ClothesUpperHalf", ""); ?>
              </div>
              <div class="section">
                <label class="field-label" for="ColorUpperHalf">Color of upper half clothes <a href="exampleclothes.php" target="_blank">(example)</a></label>
                <?php echo CheckBox("traits", "ColorUpperHalf", 1); ?>
              </div>
              <div class="section">
                <label class="field-label" for="ClothesLowerHalf">Clothes lower half <a href="exampleclothes.php" target="_blank">(example)</a></label>
                <?php echo Select("traits", "ClothesLowerHalf", ""); ?>
              </div>
              <div class="section">
                <label class="field-label" for="ColorLowerHalf">Color of lower half clothes <a href="exampleclothes.php" target="_blank">(example)</a></label>
                <?php echo CheckBox("traits", "ColorLowerHalf", 2); ?>
              </div>
              <div class="section">
                <label class="field-label">Choose photo of this person <a href="example.php" target="_blank">For example</a></label>
                <label class="field file">
                  <span class="button"> Choose File </span>
                  <input type="file" class="gui-file" name="fileToUpload" id="fileToUpload" onChange="document.getElementById('uploader1').value = this.value;">
                  <input type="text" class="gui-input" id="uploader1" placeholder="no file selected" readonly>
                  <label class="field-icon"></label>
                </label>
                <div id="progress">
                  <div id="bar"></div>
                  <div id="percent">0%</div >
                </div>
                <div id="message"></div>  
              </div>
              By filling in the data and sending the form you agree to the processing and storage for study purposes.<br><br>
              <input type="submit" value="Add Person" name="submit" class="button btn-primary">
              <input type="hidden" value="sended" name="sended"> 
            </div>
          </form> 
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        var n = $(".color input[type='checkbox']").length;
        var colors = {
            "Red": "#ED1B24",                                             
            "Pink": "#FEAEC9",
            "Purple": "#A349A3",
            "Blue": "#3F47CC",
            "Turquoise": "#00A3E8",
            "Green": "#23B14D",
            "Yellow": "#FEF200",
            "Black": "#000000",
            "White": "#FFFFFF",
            "Brown": "#B97A57",
            "Orange": "#FF7F26",
            "Grey": "#7F7F7F"
        };
        
        for ( var i = 0; i < n; i++ ) {
          neco = $(".color input[type='checkbox']:eq("+i+")").attr("value");
          $(".color input[type='checkbox']:eq("+i+") + span").css("background-color",colors[neco]);    
        }
        
        $('#fileToUpload').bind('change', function() {
          if(this.files[0].size > 31457280) {$("#message").html("<font color='red'>Sorry, your file is too large (Max 30MB)</font>"); }
        });

      
      $( "#heightSlider" ).slider({
          orientation: "vertical",
					range: "min",
					value: 50,
					min: 0,
					max: 250,
					slide: function(event, ui) {
						$("#height").val(ui.value + " cm");
            $("#heightInput").val(ui.value);
					}
				});
        
        
        
      $( "#yearSlider" ).slider({
					range: "min",
					value: 1920,
					min: 1900,
					max: 2015,
					slide: function(event, ui) {
						$("#year").val(ui.value);
            $("#yearInput").val(ui.value);
					}
				});
        
        $("#height").val($("#heightSlider").slider("value") + " cm");
        $("#year").val($("#yearSlider").slider("value"));
        $("#heightInput").val("");
        $("#yearInput").val("");
    
      $.validator.addMethod("onlyAlpha", function(value, element) {
      return this.optional(element) || /^[a-zA-ZĚŠČŘŽÝÁÍÉÚŮŤĎŇěščřžýáíéúůďťň]+$/.test(value);}, "Permitted only letters");
      $.validator.addMethod("alphaAndSpaces", function(value, element) {
      return this.optional(element) || /^[a-zA-ZĚŠČŘŽÝÁÍÉÚŮŤĎŇěščřžýáíéúůďťň ]+$/.test(value);}, "permitted only letters and spaces");
       $("#mainform").validate({
            errorClass: "state-error",
            validClass: "state-success",
            errorElement: "em",
            rules: {
                Name: {required: true, onlyAlpha: true},
                Surname: {required: true, onlyAlpha: true},
                City: {required: true, alphaAndSpaces: true},
                State : {required: true},
                YearOfBirth: {required: true},
                Height: {required: true},
                Gender: {required: true},
                SkinColor: {required: true},
                EyeColor: {required: true},
                HairColor: {required: true},
                ClothesUpperHalf: {required: true},
                ClothesLowerHalf: {required: true},
                "ColorUpperHalf[]": {required: true},
                "ColorLowerHalf[]": {required: true},
                fileToUpload: {required: true,extension:"jpeg|jpg|png"}
            },
            
            messages: {					
 
                Name: {required: 'Enter first name'},
                Surname: {required: 'Enter second name'},
                City: {required: 'Enter city name'},
                State : {required: 'Choose state'},
                YearOfBirth: {required: 'Select Year of birth'},
                Height: {required: 'Select height'},
                Gender: {required: 'Choose gender'},
                SkinColor: {required: 'Choose skin color'},
                EyeColor: {required: 'Choose eye color'},
                HairColor: {required: 'Choose hair color'},
                ClothesUpperHalf: {required: 'Choose clothes upper half'},
                ClothesLowerHalf: {required: 'Choose clothes lower half'},
                "ColorUpperHalf[]": {required: 'Choose some color'},
                "ColorLowerHalf[]": {required: 'Choose some color'}, 
                fileToUpload: {required: 'Choose photo of this person',extension:'Supported formats are JPG, JPEG, PNG'}               																	
                                        
            }, 
            
            highlight: function(element, errorClass, validClass) {
                $(element).closest('.field').addClass(errorClass).removeClass(validClass);
            },
                                    
            unhighlight: function(element, errorClass, validClass) {
                $(element).closest('.field').removeClass(errorClass).addClass(validClass);
            },
 
            errorPlacement: function(error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    element.closest('.option-group').after(error);
                } else {
                    error.insertAfter(element.parent());
                }
            }                                
        });    
    });				
  </script>
  <script>
    $(document).ready(function()  
    { 
    
    	var options = { 
        beforeSend: function() 
        {
        	$("#progress").show();
        	$("#bar").width('0%');
        	$("#message").html("");
    		  $("#percent").html("0%");
        },
        uploadProgress: function(event, position, total, percentComplete) 
        {
        	$("#bar").width(percentComplete+'%');
        	$("#percent").html(percentComplete+'%');
    
        
        },
        success: function(response) 
        {
          $("#bar").width('100%');
        	$("#percent").html('100%');
          if (response == ""){$("#mainform").hide(); $("#created").html("Person was created. Thank you!");}
          else {$("#message").html("<font color='red'>"+response+"</font>");
            $("#bar").width('0%');
        		$("#percent").html("0%");
          }
        },

    	error: function()
    	{
    		$("#message").html("<font color='red'> Error: Please try again later</font>");
    
    	}
         
    }; 
        $("#mainform").ajaxForm(options); 
    
    });
    
    </script>
    <?php  mysqli_close($mysqli); ?>
  </body>
</html>