<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>js/jquery-1.10.2.js" />
<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>js/jquery-ui.js" />
<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/expense.css"/>

<style>
.switch-container{
    margin-left: 140px !important;
}
.switch{
    width: 50px !important;
}
input[type="submit"] {
    background: #0757a4;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 7px 15px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border: none;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover{
	background: #104374;
}
.loginBox label, .regBox label {
    display: inline-block;
    padding-top: 5px;
    vertical-align: top;
    width: 120px;
    padding-right: 5px;
    font-weight: normal;
}
.comments input[type="text"], .comments textarea, .loginBox input[type="text"], .loginBox textarea, .loginBox input[type="password"] {
    width: 320px;
    padding: 5px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #b6b6b6;
    margin-bottom: 8px;
}
</style>
<div class="bodyContent shadow">

            <h1><?php echo __("LBL_CREATE_GROUP_EXPENSE"); ?></h1>
            <p><?php echo __("LBL_FILLUP_THE_FORM_AND_CLICK"); ?>  </p>
            
            <div class="pageDivider"></div>
 
            
                      
      <?php  echo $this->Form->create(null, array('class'=>'loginBox','url' => array('controller' => 'Home', 'action' => 'createGroupExpense'))); ?>
 
             
                <div>
                    <label for="loginTitle"><span>*</span><?php echo __("LBL_TITLE"); ?></label>
                    <?php echo $this->Form->input('title',array('Placeholder'=>'Tour to Niagara Falls','div'=>false,'title' => __("TITLE_NOT_EMPTY_MAX_CHAR"),'label'=>false, 'required'=>'false'));?>
                </div>

				<p id="error_title" class="formError"></p>
                <div>
                    <label for="loginName"><span>*</span><?php echo __("LBL_YOUR_NAME"); ?></label>
                  <?php echo $this->Form->input('YourName',array('Placeholder'=>'Jhon','YourName' => __("LBL_PLEASE_PROVIDE_EMAIL"), 'id' => 'YourName','label'=>false,'div'=>false,'required'=>'false')); ?>
                </div>
                <p id="error_YourName" class="formError"></p>
                 <p>
                   <label for="loginParticipants"><?php echo __("LBL_PARTICIPANTS"); ?></label>
                   <?php echo $this->Form->input('participants',array('Placeholder'=>'David,Sophia,Frank,Nigel','title' => __("LBL_PLEASE_PROVIDE_COMMA_SEPARATOR_VALUE"),'label'=>false,'div'=>false,'required'=>'false'));?> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="<?php echo __("LBL_COMMA_SEPARATOR_NAME_OF_MEMBERS_INVOLVED"); ?>">?</button>
                </p>
                <p  id="error_participants" class="formError"></p>
                
                
                   
                 <p>
                   <label for="loginEmail"><?php echo __("LBL_EMAIL"); ?></label>
                   <?php echo $this->Form->input('emails',array('Placeholder'=>'youremail@gmail.com','title' => __("LBL_PLEASE_PROVIDE_EMAIL"),'label'=>false,'div'=>false,'required'=>'false'));?> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="<?php echo __("LBL_EXPENSECOUNT_LINK_SENT_EMAIL"); ?>">?</button>
                </p>
                <p  id="error_emails" class="formError"></p>


                <div>
                    <label for="loginName"><span>*</span><?php echo __("LBL_CURRENCY"); ?></label>
                    <?php echo $this->Form->input('currency',array('label'=>false,'div'=>false,'value'=>'USD')) ;?>  (USD,AUD,EUR etc.)
                </div>
                <p id="error_currency" class="formError"></p>

                 <p>
                   <label><?php echo __("LBL_DESCRIPTION"); ?></label>
                    <?php echo $this->Form->textarea('description',array('div'=>false));?> 
                    <?php echo $this->Form->input('captcha',array('label'=>false,'div'=>false,'type' => 'hidden','value'=>$captcha));?>
                    
                </p>

                  <p  id="error_captcha" class="formError"></p>

            <?php if(RESTRICTION_MODE_HIDE){ ?>
                 <div class="row">
                    <div class="switch-container">
                        <label class="switch">
                            <?php echo $this->Form->checkbox('restrictedMode', array('div' => false, 'onchange' => 'toggleRestrictedMode(this)')); ?>
                            <span class="slider"></span>
                        </label>
                        <span id="restrictedLabel">Restricted Mode: OFF</span>
                    </div>
                 </div>

            <?php } ?>

  
                <p class="captcha"  >
                 <label> </label>
 					<input type="submit"   name="data[Expense][loginBoxSubmit]" id="loginBoxSubmit" value="<?php echo __('LBL_CREATE');?>" />
                    <img id="loadingGif" style="display: none;" src="<?php echo CDN_URL; ?>images/loading.gif" alt="">
                </p>
                <input type=hidden name="data[Expense][createDate]" id="expense_create_date" >

            </form>

        </div>

<script src="<?php echo CDN_URL; ?>js/expense.js?v=1.0.1"></script>
        
<script type="text/javascript">
    var nameLength = "<?php echo PARTICIPENT_NAME_LENGTH?>";
    var nameErrorMessage = "<?php echo __("YOUR_NAME_NOT_EMPTY_MAX_CHAR"); ?>";
    var participantNameErrorMessage = "<?php echo __("LBL_PARTICIPENT_NAME_ERROR"); ?>";
 $(document).ready(function () {

	 $("#ExpenseTitle").val("");
     $("#ExpenseYourName").val("");
     $("#ExpenseParticipants").val("");
     $("#ExpenseEmails").val("");
     $("#ExpenseDescription").val("");

     $('#ExpenseCreateGroupExpenseForm').submit(function(){
     
     
     $("#error_title").text("");
     $("#error_participants").text("");
     $("#error_emails").text("");
     $("#error_currency").text("");
     $("#error_captcha").text("");
     
      
     
     //set javascript  date
     document.getElementById("expense_create_date").value = getFormattedDate();
     
        //serialize form data
        var formData = $(this).serialize();
        //get form action
        var formUrl = $(this).attr('action');

      $('#error_title').text("");
      $('#error_participants').text("");
     $('#ExpenseCreateGroupExpenseForm').find('error_').text("");
     $('[id^=error_]').text("");
         $("#loadingGif").css("display","inline-block");
        $.ajax({
            type: 'POST',
            url: formUrl,
            data: formData,
            success: function(data,textStatus,xhr){
               
                    if(data.trim() == "+000"){     
                    	                  
                    	document.getElementById("ExpenseCreateGroupExpenseForm").submit();
                    } else{
                    		data  = 	data.trim() ;
 						var lineArray = data.split("#"); 
						var totalLine = lineArray.length-1;
						for(var i=0;i<totalLine;i++){
							var msgArray = lineArray[i].split("|"); 		
							 
							$('#error_'+msgArray[0]).text(msgArray[1]);
							 
						}
                    }
                $("#loadingGif").css("display","none");
            },
            error: function(xhr,textStatus,error){
                  //  alert(error);
            }
        });	
            
        return false;
    });
});

    $('#YourName').on('keyup', function(){
        var forbiddenChars = /[,\|]/;
        var name = $(this).val();
        var length = name.length;
        if (forbiddenChars.test(name)) {
            $('#error_YourName').text(participantNameErrorMessage).show();
        }else if(length>nameLength){
            $('#error_YourName').text(nameErrorMessage).show();
        } else {
            $('#error_YourName').hide();
        }
    });


</script>

 
        