<script src="<?php echo base_url();?>assets/plugins/jSignature/jSignature.min.js" ></script>
<style>
    #customer_signature {
    padding: 0 0 0 0; 
    margin: 0 0 0 0;
    border: 2px dotted #000;
    width: 75%;
    }
</style>
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-xm-12"></div>
        </div>        
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="card-box">
                    <!-- Title -->
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <h2 class="text-center formtitle">CONSENT FORM (<?php echo strtoupper($formstruction[0]['concent_form']);?>)</h2>
                            <input type="hidden" id="visit_id" value="<?php echo $customerdetails->id_customer_visits;?> ">
                            <input type="hidden" id="customer_id" value="<?php echo $customerdetails->id_customers;?> ">
                            <input type="hidden" id="id_concent_form" value="<?php echo $formstruction[0]['id_concent_forms'];?> ">
                            <input type="hidden" id="id_concent_category" value="<?php echo $formstruction[0]['id_concent_category'];?> ">

                        </div>
                    </div>

                    <!--Customer Details-->
                    <div class="row m-t-20">
                        <div class="col-md-12 col-sm-12 col-xs-12">   
                            <div class="row">
                                <div class="col-md-2 col-sm-2 col-xs-2">
                                    <h5 style="font-weight:500">Client Name:</h5>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4" style="border-bottom:1px solid #000;">
                                    <p style="font-size:14px;" id="customer_name" name="customer_name" ><?php echo $customerdetails->customer_name; ?></p>
                                </div>
                                <div class="col-md-2 col-sm-2 col-xs-2">
                                    <h5 style="font-weight:500">Date of Visit:</h5>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4" style="border-bottom:1px solid #000;">
                                    <p style="font-size:14px;" id="visit_date" name="visit_date"><?php echo $customerdetails->customer_visit_date; ?></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2 col-sm-2 col-xs-2">
                                    <h5 style="font-weight:500">Client Cell:</h5>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4" style="border-bottom:1px solid #000;">
                                    <p style="font-size:14px;" id="customer_cell" name="customer_cell"><?php echo $customerdetails->customer_cell; ?></p>
                                </div>
                                <div class="col-md-2 col-sm-2 col-xs-2">
                                    <h5 style="font-weight:500">Area of Residence:</h5>
                                </div>
                                <div class="col-md-4 col-sm-2 col-xs-2" style="border-bottom:1px solid #000;">
                                    <p style="font-size:14px;" id="customer_area" name="customer_area"><?php echo $customerdetails->customer_area=='' ? '-' :  $customerdetails->customer_area; ?></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2 col-sm-2 col-xs-2">
                                    <h5 style="font-weight:500">Tech Consultant:</h5>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4" style="border-bottom:1px solid #000;">
                                    <p>
                                    <select style="font-size:14px; border:none" id="tech_consultant" name="tech_consultant">
                                        <option></option>
                                    </select>
                                    </p>
                                </div>
                                <div class="col-md-2 col-sm-2 col-xs-2">
                                    <h5 style="font-weight:500">Event Date:</h5>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4" style="border-bottom:1px solid #000;">
                                    <p>
                                    <input placeholder="Optional" style="font-size:14px; border:none" id="event_date" name="event_date">
                                    </p>
                                </div>
                            </div>
                            
                        </div>
                        
                        
                    </div>

                    <!-- Structure Data -->
                    <div  class="row m-t-20">
                        <div class="col-md-12 col-sm-12 col-xs-12" id="structuredata">                            
                            <?php $lastsection=''; $lastsectionheading='';?>
                            <?php foreach($formstruction as $fs){?>
                                <?php if($lastsection != $fs['section'] && $fs['section']!='Default'){ ?>
                                    <div class="row me">
                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                            <h5 class="section" section = "<?php echo $fs['section']; ?>" style="font-weight:700 "><?php echo $fs['section']; ?>:</h5>
                                        
                                    <?php $lastsection=$fs['section'];?>                               
                                <?php } else { ?>
                                    <div class="row me">
                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                            <span class="section" section = "<?php echo $fs['section']; ?>"></span>                                            
                                        
                                <?php } ?>
                                <?php if($lastsectionheading != $fs['section_heading']){ ?> 
                                    <div class="row" section_heading="<?php echo $fs['section_heading']; ?>">
                                        <?php if($fs['section_heading']!="-"){?>
                                        <div class="col-md-2 col-sm-2 col-xs-2">                                            
                                            <h5 style="font-weight:500"><span class="section_heading"><?php echo $fs['section_heading']; ?></span>:</h5>
                                        </div>    
                                        <?php } ?>                                        
                                        <?php if($fs['section_heading']!="-"){?>
                                        <div class="col-md-10 col-sm-10 col-xs-10 form">
                                        <?php }else {?> 
                                        <div class="col-md-12 col-sm-12 col-xs-12 form m-l-15">
                                        <?php } ?>
                                            <div class="form-horizontal m-t-5">
                                            <?php $shJson = json_decode($fs['section_options']); 
                                                foreach($shJson as $key1=>$value1){?>            
                                            <?php if($key1=='checkbox'){?>                                            
                                                <div class="form-group ">
                                                    <?php $options = $value1; ?>
                                                    <?php foreach($options as $key=>$value){?>
                                                    <input type="checkbox" value="off" class="jsonelem eradio input-checkbox m-l-15" section="<?php echo $fs['section']; ?>" key="<?php echo $key;?>" id="<?php echo str_replace(' ','', $fs['section_heading']."_".$key); ?>"  name="<?php echo $fs['section_heading']; ?>">
                                                    <label style="font-size: 14px;" class="m-r-15" for="<?php echo str_replace(' ','',$fs['section_heading']."_".$key); ?>"> <?php echo $key; ?></label>
                                                    <?php } ?>
                                                </div>
                                            <?php }elseif($key1=='radio'){?>
                                                <div class="form-group ">
                                                    <?php $options = $value1; ?>
                                                    <?php foreach($options as $key=>$value){?>
                                                    <input type="radio" value="off" class="jsonelem eradio input-checkbox m-l-15" section="<?php echo $fs['section']; ?>" key="<?php echo $key;?>" id="<?php echo str_replace(' ','', $fs['section_heading']."_".$key); ?>"  name="<?php echo $fs['section_heading']; ?>">
                                                    <label style="font-size: 14px;" class="m-r-15" for="<?php echo str_replace(' ','',$fs['section_heading']."_".$key); ?>"> <?php echo $key; ?></label>
                                                    <?php } ?>
                                                </div>
                                            <?php }?>
                                            <?php if($key1=='textarea'){?>
                                                <div class="form-group">
                                                    <?php $options = $value1; ?>
                                                    <?php foreach($options as $key=>$value){?>
                                                        <label style="font-size: 14px;" class="col-sm-2 col-xs-2 m-l-15" for="<?php echo $key; ?>"> <?php echo $key; ?></label>    
                                                        <textarea class="jsonelem etextarea col-sm-8 col-xs-8"  type="text" rows="1" cols="120" style="font-size: 14px; border:none; border-bottom:1px solid #000;" key="<?php echo $key;?>" section="<?php echo $fs['section']; ?>" id="<?php echo $key; ?>" name="<?php echo $fs['section_heading']; ?>"></textarea>
                                                    <?php } ?>
                                                </div>
                                            <?php }?>
                                            <?php if($key1=='text'){?>
                                                <div class="form-group">
                                                    <?php $options = $value1; ?>
                                                    <?php foreach($options as $key=>$value){?>                                                        
                                                        <p class="jsonelem epara" style="font-size: 14px;" section="<?php echo $fs['section']; ?>"  key="<?php echo $key;?>" id="<?php echo $key; ?>" name="<?php echo $fs['section_heading']; ?>"><?php echo $value;?></p>
                                                    <?php } ?>
                                                </div>   
                                            <?php }?>
                                            <?php } ?>
                                            </div>
                                        </div>
                                    </div>
                                    <?php $lastsection=$fs['section'];?>    
                                <?php }  ?>                                    
                                    </div> <!--close section-->
                                </div>                                
                            <?php } ?>                            
                        </div>
                    </div>

                    
                    <!-- Client Signature -->
                    <div id="signaturedata" class="row m-t-20">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="row">
                                <div class="col-md-2 col-sm-2 col-xs-2">                            
                                    <label style="font-size:14px;">Client Signature: </label>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4">
                                    <div id="container" >
                                        <div id="customer_signature"></div>
                                    </div>                   
                                </div>
                                <div class="col-md-2 col-sm-2 col-xs-2">                            
                                    <label style="font-size:14px;">Consultant Signature: </label>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4">
                                    <div id="container" >
                                        <div id="consultant_signature"></div>
                                    </div>                     
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Save -->
                    <div class="row">
                        <div class="col-md-12">
                            <button class="btn btn-sm btn-primary pull-right" onclick="saveform();">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $("#event_date").datepicker({ format: 'dd-mm-yyyy'}).datepicker('setDate', new Date());

	       $("#signature").jSignature();
           var $sigdiv = $("#customer_signature");
                $sigdiv.jSignature(); // inits the jSignature widget.
                // after some doodling...
                $sigdiv.jSignature("reset") ;// clears the canvas and rerenders the decor on it.


            var $sigdiv1 = $("#consultant_signature");
                $sigdiv1.jSignature(); // inits the jSignature widget.
                // after some doodling...
                $sigdiv1.jSignature("reset") ;// clears the canvas and rerenders the decor on it.    
	    });

        function formjson(){
            console.log('here');
            var sJson=""; var shJson='{'; var y=0;; var section=''; var lastsection='';
            $('#structuredata').children('.me').each(function () {
                console.log(this); // "this" is the current element in the loop

                if(section !== $(this).find('.section').attr('section') && y!=0){
                    shJson += "},";
                }    
                section = $(this).find('.section').attr('section')
                if(typeof $(this).find('.section').attr('section') != undefined){
                    if(lastsection != $(this).find('.section').attr('section')){
                        shJson += '"'+ $(this).find('.section').attr('section')+ '":';
                        lastsection=$(this).find('.section').attr('section');
                        y=0;
                    }
                }
                

                var section_heading = $(this).find('.section_heading').html();
                if(typeof($(this).find('.section_heading').html()) !=undefined && $(this).find('.section_heading').html()!='undefined'){

                
                    //section heading
                    if(y!=0){
                        shJson += ",";
                    }else{
                        shJson += '{';    
                    }
                    shJson += '"'+$(this).find('.section_heading').html() +'":';    
                    //value selected
                    var oJson = '{'; var x=0;
                    $(this).find('.jsonelem').each(function () { 
                        //  console.log($(this).attr('key'));
                        //  console.log($(this).attr('name'));    
                        //  console.log($(this).prop('checked'))
                        console.log($(this).hasClass('etextarea'));

                        if($(this).hasClass('eradio')){
                            var key=$(this).attr('key')+'||radio';
                            var value=$(this).prop('checked');                    
                        } else if($(this).hasClass('etextarea')){
                            var key=$(this).attr('key')+'||para';
                            var value = $(this).val();
                        } else if($(this).hasClass('epara')){
                            var key=$(this).attr('key')+'||para';
                            var value = $(this).html();
                        }


                        if(x==0 && typeof(key) != 'undefined'){
                            oJson+= '"'+ key +'":"' + value + '"';                       
                        } else if(typeof(key) != 'undefined') {
                            oJson+= ',"'+ key +'":"' + value + '"';                       
                        }
                        
                        x++;
                    });
                    oJson += '}';                     
                    shJson+=oJson;   
                    y++;
                }

            });
            shJson+="}}";
            console.log(shJson);
            console.log(sJson);
            return shJson;
        }


        function saveform(){

            var formdata = formjson();
            var $customersigdiv = $("#customer_signature");
            var datapair = $customersigdiv.jSignature("getData", "svgbase64") ;

            var $consultantsigdiv = $("#consultant_signature");
            var datapair1 = $consultantsigdiv.jSignature("getData", "svgbase64") ;

            $.ajax({
            type: 'POST',
            url: '<?php echo base_url();?>concent_controller/save_data',
            data: {
                form_title: json_encode($(".formtitle").html()),                
                customer_id: $("#customer_id").val(),
                visit_id: $("#visit_id").val(),
                customer_name: json_encode($("#customer_name").html()),
                customer_cell: json_encode($("#customer_cell").html()),
                customer_area: json_encode($("#customer_area").html()),
                customer_email: json_encode($("#customer_email").html()),
                consultant_name: json_encode($("#tech_consultant").val()),
                event_date: $("#event_date").val(),
                staff_id: 0,
                concent_data: json_encode(formdata),
                customer_signature: datapair[0]+','+datapair[1],
                consultant_signature: datapair1[0]+','+datapair1[1]
            },
            success: function(data) {
                
            }
            });
        }

    </script>