<style>

    @media print {
        body {
            visibility: hidden;
            
        }
        .section-to-print {          
            font-size:12px;  
            visibility: visible;
            position:absolute;
            left: 0;
            top: 0;
        }
        
        .page {
            
            /* width: 8in; */
            /* height: 1in; */
            /* padding: 0em;
            margin-top: 0in;
            margin-left: 0in;
            margin-right: 0in;
            margin-bottom: 0.25in; */
        }
    }

    .inactive{
        text-decoration: strikethrough;
    }

    .mouse-cursor{}
    .redish >td {
      background-color: #da786c;  
      color:#fff;
    }
    .left {
        font-size:14px;
        float: left;
        text-decoration: underline;
        /* font-weight: 600; */
        color: #5c6d55;
        transition-duration: .3s;
    }
    .arrow {
        display: inline-block;
        position: relative;
        height: 2px;
        width: 20px;
        background: #874524;
        vertical-align: top;
        margin: 10px 20px 0 15px;
        border: 0px solid #874524;
        transition-duration: .3s;
        &:after {
            position: absolute;
            top: -4px;
            left: 100%;
            height: 0;
            width: 0;
            border: inherit;
            border-width: 7px;
            border-style: solid;
            content: '';
            border-right: 0;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-top-width: 5px;
            border-bottom-width: 5px;
        }
    }
    .right {
            font-size:14px;
            float: right;
            color: #5c6d55 ;
    }

    .modal-content {
        width:100%;
    }

    .modal-dialog-centered {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        min-height:calc(100% - (.5rem * 2));
    }

    @media (min-width: 576px) {
        .modal-dialog-centered {
            min-height:calc(100% - (1.75rem * 2));
        }
    }
               
</style>  
<div class="wrapper" style="overflow:hidden !important;">
    <div class="container" style="width: 100% !important; position:relative; overflow: auto;">
        <div class="row">
            <div class="col-md-12">
                
                
                <div class="row">
                    <div class="col-md-6">
                    <h3 class="page-title">Add Fresh Consultation Notes:</h3>                           
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="clearfix">
                                    
                                    <div class="row">
                                        <div class="col-lg-12">
                                            
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <h3 class="page-title">Customer Details: <span id="customer_color"> <i style="color:" class="<?php // echo $flag;?>"></i></span></h3>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-2 form-group">
                                                    <label class="form-label">Name:</label>
                                                    <input type="hidden" name="customer_id" id="customer_id">
                                                    <input class="form-control" name="customer_name" id="customer_name">
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label class="form-label">Age:</label>
                                                    <input class="form-control decimal" name="customer_age" id="customer_age">
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label class="form-label">Height:</label>      
                                                    <input class="form-control decimal" name="customer_height" id="customer_height">                                      
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label class="form-label">Gender:</label>      
                                                    <input class="form-control decimal" name="customer_gender" id="customer_gender">                                      
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label class="form-label">Weight:</label>       
                                                    <input class="form-control decimal" name="customer_weight" id="customer_weight">                                     
                                                </div>
                                                <div class="col-md-2 form-group">
                                                    <label class="form-label text-pink">BP:</label> 
                                                    <input class="form-control text-pink" name="customer_bp" id="customer_bp">                                           
                                                </div> 
                                                <div class="col-md-2 form-group">
                                                    <label class="form-label">This will Add a new Note:</label> 
                                                    <button class="btn btn-warning btn-small" onclick="addnewnote();">Add New</button>
                                                </div>                                 
                                            </div>
                                            <div class="row>">
                                                <div class="col-md-12">
                                                    <textarea id="notedetail" class="form-control"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6" >
                        <h3 class="page-title">Consultation Notes (History):</h3>
                        <div id="history">
                        
                        </div>                                                                                        
                    </div>

                </div>

            </div> <!--END COl-->
        </div> <!--END ROW-->
    </div> <!--END CONTAINER-->


    <div id="detailtextmodal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="detailtextmodal" aria-hidden="true" style="display: none;">
        <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="custom-width-modalLabel">Add Details to Note <span id="modalnoteid"></span></h4>
                </div>
                <div class="modal-body"  >
                    <div class="row">
                        <div class="col-md-2 form-group">
                            <label class="form-label">Name:</label>
                            <input type="hidden" name="customer_id" id="customer_id">
                            <input class="form-control" readonly="readonly" name="modal_customer_name" id="modal_customer_name">
                        </div>
                        <div class="col-md-2 form-group">
                            <label class="form-label">Age:</label>
                            <input class="form-control decimal" name="modal_customer_age" id="modal_customer_age">
                        </div>
                        <div class="col-md-2 form-group">
                            <label class="form-label">Height:</label>      
                            <input class="form-control decimal" name="modal_customer_height" id="modal_customer_height">                                      
                        </div>
                        <div class="col-md-2 form-group">
                            <label class="form-label">Weight:</label>       
                            <input class="form-control decimal" name="modal_customer_weight" id="modal_customer_weight">                                     
                        </div>
                        <div class="col-md-2 form-group">
                            <label class="form-label">BP:</label> 
                            <input class="form-control" name="modal_customer_bp" id="modal_customer_bp">                                           
                        </div> 

                    </div>

                    <div class='row'>
                        <input type="hidden" name="modal_noteid" id="modal_noteid">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-4">
                                    <label class="form-label">Enter the Note details here and click the save button:</label>
                                </div>
                                <div class="col-md-8">
                                    <textarea rows=6 col=10 class="form-control text-area" id="txt_detail"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-md-12">
                            <button type="button" onclick="addnotedetail();"  class="btn btn-custom waves-effect waves-light pull-right">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js"></script>
    <script>
       
        $("document").ready(function(){

            $(".decimal").keypress(function(e) {
                //if the letter is not digit then display error and don't type anything
                if (e.which != 13 && e.which != 8 && e.which != 0  && e.which != 46 && (e.which < 48 || e.which > 57) ) {
                    
                    return false;
                }
            });
            
            //$('.ip_address').mask('099.099.099.099');
            $('#customer_bp').mask('999/999', {autoclear: false});
            $('#modal_customer_bp').mask('999/999', {autoclear: false});
            
            gethistory();           

        });

        function gethistory(){

            $.ajax({
                url: "<?php echo base_url();?>customernotes_controller/get_customer_notes",
                type: "POST",
                data: {customer_id: <?php echo $customer_id;?>},
                dataType: "json",
                cache: false,
                async: true,
                success: function(data) {
                    console.log(data);
                    if (data != "error"){
                        $("#customer_id").val(data[0]['id_customers']);
                        $("#customer_name").val(data[0]['customer_name']);
                        $("#customer_age").val(data[0]['age']);
                        $("#customer_gender").val(data[0]['customer_gender']);
                        $("#customer_height").val(data[0]['height']);
                        $("#customer_weight").val(data[0]['weight']);
                        $("#customer_bp").val(data[0]['blood_pressure']);

                        $("#modal_customer_id").val(data[0]['id_customers']);
                        $("#modal_customer_name").val(data[0]['customer_name']);
                        $("#modal_customer_age").val(data[0]['age']);
                        $("#modal_customer_height").val(data[0]['height']);                        
                        $("#modal_customer_weight").val(data[0]['weight']);
                        $("#modal_customer_bp").val(data[0]['blood_pressure']);



                        mhtml=""; lastnoteid=0;
                        for(x=0; x<data.length; x++){    
                            console.log(data[x]);    
                            if(data[x]['id_customer_notes']!=lastnoteid){
                                if(lastnoteid>0){mhtml+="</div></div></div> <!--END NOTE-->";}
                                var newid = "panel_"+x;
                                mhtml+='<div class="panel panel-default" id="'+newid+'"><div class="panel-body" >';
                                mhtml+='<div class="col-md-12" id="'+ data[x]['note_type'] +'">';

                                mhtml+='<div class="col-md-6"><h5><strong>Note ID: ' + data[x]['id_customer_notes'] + '</strong></h5></div>';
                                mhtml+='<div class="col-md-6" style="text-align:left"><button  onclick="opendetailmodal(' + data[x]['id_customer_notes'] + ')" class="hidden-print btn btn-sm btn-pink" ><i class="fa fa-plus"></i> Add Additional Info To Note '+ data[x]['id_customer_notes'] +'</button><button onclick="printDiv('+x+');" class="hidden-print btn btn-sm btn-inverse"><i class="fa fa-print"></i></button></div>';

                                mhtml+='<div class="col-md-12"><h4 class="text-purple">Primary Consultant: <strong>'+ data[x]['note_owner'] + '</strong></h4>';   
                                mhtml+='<p style="font-size:16px;"> Customer: <strong>' +  data[x]['customer_name'] +'</strong></p>';
                                mhtml+='<p> Age: <strong>' +  data[x]['age'] +'</strong></p>';
                                mhtml+='<p style="margin:2px;">Height: <strong>' +  data[x]['height'] +'</strong></p>';
                                mhtml+='<p style="margin:2px;">Weight: <strong>' +  data[x]['weight'] +'</strong></p>';
                                mhtml+='<p style="margin:2px;" class="text-pink">BP: <strong class="text-pink">' +  data[x]['blood_pressure'] +'</strong></p>';
                                mhtml+='<p style="margin:2px;">Created On: <strong>' +  data[x]['note_date'] +'</strong></p><br><hr></div>';                                    
                                
                                                       
                                lastnoteid = data[x]['id_customer_notes'];
                            }                            
                            mhtml += "<hr>";                            
                            mhtml += '<div class="left">'+ data[x]['detail_added_by'] +'<div class="arrow"></div>'+data[x]['detail_date']+'</div>';
                            mhtml +='<div class="row"><div class="col-md-12">';                            
                            mhtml +='<p style="font-size:18px; font-style:italic;">'+ data[x]['detail_text'] +'</p><br/>';
                            mhtml +='</div></div>';
                            
                           
                        }
                        mhtml+="</div></div></div> <!--END NOTE-->";
                        $("#history").html(mhtml);
                       // console.log(mhtml);    

                    }
                }
            });
        }

        function addnewnote(){
            var data="";

            if($("#customer_age").val()==""){
                swal(
                    'Please Enter AGE to continue!',
                    'Age can be entered in decimals, the leading digits being the months of the year.',
                    'info'
                );
                return false;
            }

            $.ajax({
                url: "<?php echo base_url();?>customernotes_controller/add_new_note",
                type: "POST",
                data: {customer_id: $("#customer_id").val(), detail_text: encodeURI($("#notedetail").val()),  customer_age: $("#customer_age").val(), customer_height: $("#customer_height").val(), customer_weight: $("#customer_weight").val(), customer_bp: encodeURI($("#customer_bp").val()) },
                dataType: "text",
                cache: false,
                async: true,
                success: function(data) {
                    location.reload();
                }
            });
        }

        function opendetailmodal(noteid){

            $("#modalnoteid").html(noteid);
            $("#modal_noteid").val(noteid);           
            

            $('#detailtextmodal').modal({
                backdrop: 'static',
                keyboard: false,
                show: true
            });

        }

        function addnotedetail(){
            var note_id =  $("#modal_noteid").val();       
           

            if(note_id != "" && note_id >0){
                $.ajax({
                    url: "<?php echo base_url();?>customernotes_controller/add_note_detail",
                    type: "POST",
                    data: {note_id: note_id, detail_text: encodeURI($("#txt_detail").val()) , customer_age: $("#modal_customer_age").val(), customer_height: $("#modal_customer_height").val(), customer_weight: $("#modal_customer_weight").val(), customer_bp: encodeURI($("#modal_customer_bp").val())  },
                    dataType: "text",
                    cache: false,
                    async: true,
                    success: function(data) {
                        result= data.slice(0, 7);
                        if(result =="success"){
                            location.reload();
                        }
                    }
                });
            }

        }



        function updateCustomer(){
            var customer_id = $("#customer_id").val();
            if(null!=customer_id && customer_id > 0){
                $.ajax({
                    url: "<?php echo base_url();?>customernotes_controller/update_customer",
                    type: "POST",
                    data: {id_customers: customer_id, customer_age: $("#customer_age").val(), customer_height: $("#customer_height").val(), customer_weight: $("#customer_weight").val(), customer_bp: $("#customer_bp").val()  },
                    dataType: "json",
                    cache: false,
                    async: true,
                    success: function(data) {
                        alert(data);
                    }
                });
            }
        }

        function sendprint(x){

            var y=0;
            $(".panel-default").each(function(){
                var el = "#panel_"+y;
                $(el).removeClass('section-to-print');
                $(el).addClass('hidden-print');    
                //$(el).removeClass('page');
                y++;
            });

            var elem = "#panel_"+x;

            $(elem).removeClass('hidden-print');
            $(elem).addClass('section-to-print');
           // $(elem).addClass('page');

            window.print();

        }

        function printDiv(elem) {

            var divName = "panel_"+elem;

            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
        }
        shortcut.add("ctrl+p", function() {
            printDiv(0);
        });
    </script>