<script src="<?php echo base_url();?>assets/plugins/jSignature/jSignature.min.js" ></script>
<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->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->id_concent_forms;?> ">
                        </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=='' ? '-' :  $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;">
                                <select style="font-size:14px; border:none" id="tech_consultant" name="tech_consultant">
                                    <?php foreach($staff as $consultant){?>
                                        <option value="<?php echo $consultant['id_staff'];?>"><?php echo $consultant['staff_fullname'];?></option>
                                    <?php } ?>
                                    </select>
                                </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;">
                                <input placeholder="Optional" style="font-size:14px; border:none" id="event_date" name="event_date">
                                </div>
                            </div>
                        </div>
                    </div>

                    <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->concent_data as $fd){?>
                                <?php $sJson = json_decode($formstruction->form_structure);?>
                                <?php  foreach($sJson  as $section => $sectionheading) {?>                                    
                                    <div class="row me">
                                        <div class="col-md-12 col-sm-12 col-xs-12">  
                                            <?php if(strpos($section,"-")==0){?>                                          
                                                <h5 class="section" section = "<?php  print_r($section); ?>" style="font-weight:700 "><?php print_r($section); ?>:</h5>
                                            <?php } else {?>
                                                <span class="section" section = "<?php  print_r($section); ?>" style="font-weight:700 "></span>
                                            <?php } ?>
                                            <?php foreach($sectionheading as $s => $elems){?>                                            
                                                
                                                <?php if(strpos($s,"-")==0){?>
                                                    <div class="row elemdiv">
                                                        <div class="col-md-2 col-sm-2 col-xs-2 " >     
                                                            <?php if($s != $section){?>                                       
                                                            <h5 style="font-weight:500;"><span class="section_heading" key="<?php print_r($s); ?>"><?php print_r($s); ?></span>:</h5>
                                                            <?php } ?>
                                                        </div>                                                                                              
                                                        <div class="col-md-10 col-sm-10 col-xs-10">    
                                                        <span class="section_heading" key="<?php print_r($s); ?>"></span>                                       
                                                <?php } else {?>                                            
                                                <div class="row elemdiv">    
                                                    <div class="col-md-12 col-sm-12 col-xs-12">                                                                                                    
                                                    <span class="section_heading" key="<?php print_r($s); ?>"></span>
                                                <?php } ?>
                                                        <div class="form-horizontal ">                                 
                                                            <?php foreach($elems as $key => $elemtype){?>
                                                                     
                                                                <?php if($elemtype=='checkbox'){ ?>   
                                                                    <?php if(strpos($key,"-")==0){?>
                                                                    <div class="form-group checkbox " style="display:inline-table; margin-right:25px; ">                                                             
                                                                        <input type="checkbox" class="radio-inline radio-primary m-l-15 jsonelem echeckbox" key="<?php echo $key;?>" name="<?php echo $s;?>" id="<?php echo str_replace(' ','',$s."_".$key); ?>">
                                                                        <label style="font-size: 14px; " class="radio-label " for="<?php echo str_replace(' ','',$s."_".$key); ?>"> <?php echo $key; ?></label>                                                                
                                                                    </div>     
                                                                    <?php } ?>                                                           
                                                                <?php } elseif($elemtype=='radio'){ ?>   
                                                                    <?php if(strpos($key,"-")==0){?>
                                                                    <div class="form-group radio " style="display:inline-table; margin-right:25px; ">                                                             
                                                                        <input type="radio" class="radio-inline radio-primary m-l-15 jsonelem eradio" key="<?php echo $key;?>" name="<?php echo $s;?>" id="<?php echo str_replace(' ','',$s."_".$key); ?>">
                                                                        <label style="font-size: 14px; " class="radio-label " for="<?php echo str_replace(' ','',$s."_".$key); ?>"> <?php echo $key; ?></label>                                                                
                                                                    </div>
                                                                    <?php } ?>
                                                                <?php } elseif ($elemtype=='para'){?>
                                                                    <?php if(strpos($key,"-")==0){?>
                                                                    <div class="row m-t-15">
                                                                        <div class="col-md-12">
                                                                            <p class="jsonelem epara" style="font-size: 14px; <?php if(strpos($s,"-")==0){?>text-decoration:underline<?php } ?>" key="<?php echo $s;?>" name="<?php echo $s;?>" ><?php echo $key;?></p>
                                                                        </div>
                                                                    </div>
                                                                    <?php } ?>
                                                                <?php } elseif ($elemtype=='list'){?>
                                                                    <div class="row m-t-15">
                                                                        <?php if(strpos($key,"-")==0){?>
                                                                        <div class="jsonelem col-md-12 elist" key="<?php echo $s;?>" style="font-size:14px !important; line-height:22px !important;">
                                                                            <?php echo $key;?>
                                                                        </div>
                                                                        <?php } ?>
                                                                    </div>    
                                                                <?php } elseif($elemtype=='textarea'){?>
                                                                    <div class="row m-t-15">
                                                                        <div class="col-md-12">
                                                                            <?php if(strpos($key,"-")==0){?>
                                                                            <label style="font-size: 14px;" class="col-sm-2 col-xs-2 m-l-15" for="<?php echo $s; ?>"> <?php echo $key; ?></label>    
                                                                            <?php } ?>
                                                                            <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 $s; ?>" id="<?php echo $s; ?>" name="<?php echo $key; ?>"></textarea>
                                                                        </div>
                                                                    </div>                                                                                                                                   
                                                                <?php } elseif($elemtype=='img'){?>
                                                                    <div class="row m-t-15">
                                                                        <div class="col-md-12">
                                                                            <?php if(strpos($key,"-")==0){?>
                                                                            <label style="font-size: 14px;" class="col-sm-2 col-xs-2 m-l-15" for="<?php echo $s; ?>"> <?php echo $key; ?></label>    
                                                                            <?php } ?>
                                                                            <img class="jsonelem eimage" src="<?php echo base_url('assets/images/').$key;?>"  alt="<?php echo $key;?>" key="<?php echo $key;?>" section="<?php echo $s; ?>" name="<?php echo $key; ?>">
                                                                        </div>
                                                                    </div>
                                                                <?php } elseif($elemtype=='imghalf'){?>
                                                                    <div class="row m-t-15 jsonelem eimghalf">
                                                                        <div class="col-md-4">
                                                                            <?php if(strpos($key,"-")==0){?>
                                                                            <label style="font-size: 14px;" class="col-sm-2 col-xs-2 m-l-15" for="<?php echo $s; ?>"> <?php echo $key; ?></label>    
                                                                            <?php } ?>
                                                                            <img class="eimghalf" style="max-height: 250px;" src="<?php echo base_url('assets/images/').$key;?>"  alt="<?php echo $key;?>" key="<?php echo $key;?>" section="<?php echo $s; ?>" name="<?php echo $key; ?>">
                                                                        </div>
                                                                        <div class="col-md-8">
                                                                            <?php if(strpos($key,"-")==0){?>
                                                                            <label style="font-size: 14px;" class="col-sm-2 col-xs-2 m-l-15" for="<?php echo $s; ?>"> <?php echo $key; ?></label>    
                                                                            <?php } ?>
                                                                            <textarea class="etexthalf col-sm-8 col-xs-8"  type="text" rows="8" cols="120" style="font-size: 14px; border:none; border-bottom:1px solid #000;" key="<?php echo $key;?>" section="<?php echo $s; ?>" id="<?php echo $s; ?>" name="<?php echo $key; ?>"></textarea>
                                                                        </div>
                                                                    </div>
                                                                <?php } ?>
                                                            <?php } ?>
                                                        </div>
                                                    </div>
                                                </div>                                                
                                            <?php } ?>
                                        </div>    
                                    </div>
                                <?php } ?>
                            <?php //} ?>
                        </div>
                    </div>

                    <!-- Client Signature -->
                    <div id="signaturedata" class="row m-t-20 m-b-20" style="margin-top: 50px !important; margin-bottom: 20px !important;">
                        <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: 'yyyy-mm-dd'}).datepicker('setDate', new Date());
            $("#tech_consultant").select2();

	       $("#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 saveform(){

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

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


            $.ajax({
                type: 'POST',
                url: '<?php echo base_url();?>concent_controller/save_data',
                data: { 
                    form_title: encodeURI($(".formtitle").html()),      
                    concent_form_id: $("#id_concent_form").val(),
                    customer_id: $("#customer_id").val(),
                    visit_id: $("#visit_id").val(),
                    customer_name: encodeURI($("#customer_name").html()),
                    customer_cell: encodeURI($("#customer_cell").html()),
                    customer_area: encodeURI($("#customer_area").html()),
                    customer_email: encodeURI($("#customer_email").html()),
                    consultant_name: encodeURI($("#tech_consultant option:selected").text()),
                    event_date: $("#event_date").val(),
                    visit_date: $("#visit_date").html(),
                    staff_id: $("#tech_consultant option:selected").val(),
                    concent_data: formdata,
                    customer_signature: datapair[0]+','+datapair[1],
                    consultant_signature: datapair1[0]+','+datapair1[1]
                },
                success: function(data) {
                    var response = data.split("|");
                    
                    if(response[0]=='success'){
                        window.location.assign('<?php echo base_url();?>signedconcent/'+response[1]+'/0');
                    }else{
                        alert(response[1]);
                    }
                }
            });
        }

        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;
                    }
                }
                
                $(this).find('.elemdiv').each(function(){
                

                    var section_heading = $(this).find('.section_heading').attr('key');
                    if(typeof($(this).find('.section_heading').attr('key')) !=undefined && $(this).find('.section_heading').attr('key')!='undefined'){
                        //section heading
                        if(y!=0){
                            shJson += ",";
                        }else{
                            shJson += '{';    
                        }
                        shJson += '"'+$(this).find('.section_heading').attr('key') +'":';    
                            //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('echeckbox')){
                                    var key=$(this).attr('key')+'||checkbox';
                                    var value=$(this).prop('checked');
                                } else 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 = encodeURI($(this).val());
                                } else if($(this).hasClass('epara')){
                                    var key=$(this).attr('key')+'||para';
                                    var value = $(this).html();
                                } else if($(this).hasClass('elist')){
                                    var key=$(this).attr('key')+'||list';
                                    var value = $(this).html().trim();
                                } else if($(this).hasClass('eimage')){
                                    var key=$(this).attr('key')+'||img';
                                    var value = $(this).html().trim();
                                } else if($(this).hasClass('eimghalf')){
                                    var mtext = $(this).find('.etexthalf').val();
                                    var mimg= $(this).find('.eimghalf').attr('key');
                                    var key=mimg+'||imghalf';
                                    var value = mtext.trim();                                    
                                }


                                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;
        }
    </script>
