<aside class="right-side">
    <!-- Main content -->
    <section class="content-header">
        <div class="title_bar">
            <h1 class="major_txt_color">Dashboard</h1>
            <div class="breadcrumb_container"><?php echo breadcrumb_links();?></div>
        </div>
    </section>
    <?php $general = get_general_setting();?>
    <section class="content">
        <div class="row" style="margin-bottom: 60px;">
            <div class="col-xs-12">
                <div id="plot">
                    
                </div>
            </div>
        </div>
        
        <!--
        <?php //$general = get_general_setting();?>
        <div class="row">
            <div class="col-xs-12">
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box-header">
                            <h3 class="box-title major_txt_color">Daily Summary Report</h3>
                                <div class="pull-right box-tools">
                                    <!--<a href="<?php //echo $service_man_view_all;?>">
                                        <button class="pull-right btn btn-default">View All <i class="fa fa-arrow-circle-right"></i></button>
                                    </a>-->
                                </div>
                        </div><!-- /.box-header //
                        <div class="box-body">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th width="5%" class="align-center">S.No</th>
                                        <th width="14%" class="align-center">Receipt No</th>
                                        <th width="22%" class="align-center">Name</th>
                                        <th width="10%" class="align-center">Quantity</th>
                                        <th width="12%" class="align-center">Unit Price</th>
                                        <?php //if($general->gst > 0) { ?>
                                            <th width="13%" class="align-center">Before GST</th>
                                            <th width="13%" class="align-center">GST Amount</th>
                                        <?php //} ?>
                                        <th width="15%" class="align-center">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                     <?php /*$total_amt = 0; $search_date = (!empty($search_date)) ? $search_date : date('d-m-Y');
                                        if(count($results) > 0) { ?>
                                        <?php $i = 0;
                                        foreach( $results as $key => $row) :
                                            //Refund Amount
                                            $Refund = $this->daily_summary_model->get_refund_amt_by_ids($row['type_id'],$row['service_id'],$row['id'],$search_date);
                                          
                                            if(!empty($Refund)) {
                                                $recentAmt = $row['amount'] - $Refund;
                                            }
                                            else {
                                               $recentAmt = $row['amount'];
                                            }
                                            
                                            $total_amt += $recentAmt;
                                            if(!empty($row['gst'])) {
                                                $AmtwithGst = $recentAmt * ($row['gst'] / 100);
                                            } else {
                                                $AmtwithGst = 0;
                                            }
                                           */ 
                                        ?>
                                        <?php /*$mem_card_id = (!empty($row['mem_card_id'])) ? $row['mem_card_id'] : '';
                                                  $auto_id = (empty($row['mem_card_id'])) ? $row['id'] : '';
                                                  $emp_id = ''; // not necessary to send auto id
                                            $paymentType = $this->daily_summary_model->get_payment_details($row['type_id'],$emp_id,$search_date,$mem_card_id);
											*/
											?>
                                            
                                            <?php /*if((!empty($row['amount_type'])) && $row['amount_type'] == 2) {
                                                $payType = '-';
                                            } elseif((!empty($row['amount_type'])) && $row['amount_type'] != 2){
                                                $payType = $paymentType[0]['payment'];
                                            } else { $payType = $paymentType[0]['payment']; }*/
											?>
                                            
                                        <tr>
                                            <td class="align-center"><?php //echo ++$i;?></td>
                                            <td><?php //echo $row['rec_no']; ?></td>
                                            <td width="25%"><?php //echo $row['name']; ?></td>
                                            <td class="align-center"><?php //echo $row['qty'];?></td>
                                            <td class="align-center"><?php //echo $row['price'];?></td>
                                            <?php //if($general->gst > 0) { ?>
                                                <td class="align-right"><?php //echo (!empty($recentAmt)) ? number_format($recentAmt - $AmtwithGst,2,'.','') : '0.00';?></td>
                                                <td class="align-right"><?php //echo (!empty($row['gst'])) ? number_format($AmtwithGst,2,'.','') : '0.00';?></td>
                                            <?php //} ?>
                                            <td class="align-right"><?php //echo number_format($recentAmt,2,'.','');?></td>
                                        </tr>
                                    <?php //endforeach;?>
                                    <?php //} else {?>
                                        <tr>
                                            <td colspan="<?php //echo ($general->gst > 0) ? 8 : 6;?>" style="color: #0B6CCB;"><center>No Records Found!</center></td>
                                        </tr>
                                    <?php //} ?>
                                </tbody>
                            </table>
                        </div><!-- /.box-body //
                        
                        <div class="box-body table-responsive">
                            <div class="row">
                                <div class="right-col action-right-col">
                                    <table class="table table-bordered table-striped">
                                    <tbody>
                                        <tr>
                                            <td align="left">Total <?php //echo ($general->gst > 0) ? '(with GST)' : '';?></td>
                                            <td><?php //echo number_format($total_amt,2,'.','');?></td>
                                        </tr>
                                        <!--<tr>
                                            <td align="left">Refund Amount</td>
                                            <?php #$refundAmount = $this->daily_summary_model->get_refund_amount($search_date);?>
                                            <td><?php #echo $refundAmount;?></td>
                                        </tr>//
                                        <?php //foreach($mode as $key=>$value) { ?>
                                            <?php //$paidAmount = $this->daily_summary_model->get_total_paid_amt_by_type($value->id,$search_date);?>
                                            <?php /*if($value->payment_mode == 'cash') { 
                                                    $refundAmt = $this->daily_summary_model->get_refund_amount($search_date);
                                                } else { 
                                                    $refundAmt = '0.00';
                                                }*/
                                            ?>
                                            <tr>
                                                <td align="left"><?php //echo ucfirst($value->name);?></td>
                                                <td><?php //echo (!empty($paidAmount->amount)) ? (($value->payment_mode == 'cash') ? number_format($paidAmount->amount - $refundAmt,2,'.','') :  $paidAmount->amount ) : '0.00';?></td>
                                            </tr>
                                        <?php //} ?>
                                    </tbody>
                                </table>
                                </div>
                            </div>
                        </div>
                        <div class="float-clear"></div>
                    </div><!-- /.box //
                </div>
            </div>
        </div>-->
    </section>
</aside><!-- /.right-side -->
<script type="text/javascript" src="<?php echo BASE_URL; ?>assets/js/library/chart/d3.min.js"></script>
<script type="text/javascript" src="<?php echo BASE_URL; ?>assets/js/library/chart/Donut3D.js"></script>
<style type="text/css">
    path.slice{
	stroke-width:2px;
    }
    polyline{
            opacity: .3;
            stroke: black;
            stroke-width: 2px;
            fill: none;
    } 
    svg text.percent{
            fill:white;
            text-anchor:middle;
            font-size:12px;
    }
    
    .plot {
        width: 100%;
        min-height: 400px;
        
        margin: 1px 0px;
    }
    
    #plot {
        background: #fff;
        border-top: 5px solid #f33;
    }
    
    /*#plot svg {
        width: 100%;
        min-height: 450px;
        padding: 50px 35%;
        box-shadow: 3px 3px 3px #eee, -3px -3px 3px #eee;
    }*/
	
	#plot svg {
		width: 100%;
		min-height: 450px;
		padding: 50px 0px 25px 34%;
		box-shadow: 3px 3px 3px #eee, -3px -3px 3px #eee;
		overflow: visible;
	}
    
    
    .plot-details {
        position: absolute;
        min-height: 100px;
        right: 30px;
        padding: 10px;
        box-shadow: 1px 1px 3px #ccc;
        background: #fff;
        width: 270px;
        margin-top: 20px;
        z-index: 99;
    }
    
    /*
     * Customize vertical scroll bar - Start
     */
     
    .plot_no_cat {
        max-height: 410px;
        overflow: auto;
    }
    
    .plot_no_cat::-webkit-scrollbar {
        width: 1px;
    } 
    
    .plot_no_cat::-webkit-scrollbar-thumb:vertical {
      background-color: black;
      background-clip: padding-box;
      border: solid transparent;
      border-width: 2px 2px 2px 6px;
      min-height: 28px;
      padding: 100px 0 0;
      box-shadow: inset 1px 1px 0 rgb(220, 172, 0), inset 0 -1px 0 rgb(220, 172, 0);
    }
	
	#plot .plot-details {
		left:auto !important;
		right: 30px !important;
		top: 20px !important;
	}
    
    /*
     * Customize vertical scroll bar - End
     */
    
    .plot-details .cell{
        margin: 5px;
        display: none;
        
    }
    
    .plot-details .preview-box {
        width: 35px;
        height: 35px;
        border-radius: 35px;
        line-height: 45px;
    }
    
    .plot-details .preview-text {
        padding: 5px;
        color: #999;
        width: 85%;
    }
    
    .plot-details .cell > div {
        display: inline-block;
    }
    
    .plot-details .cell-title {
        text-align: center;
        font-weight: bold;
        color: #fff;
        background: #f33;
        line-height: 35px;
        width: 109%;
        box-shadow: 1px 1px 3px #666;
        letter-spacing: 2px;
        margin: -10px -10px 10px -11px;
    }
    
    .plot-details .cell-title > .cnt {
        color: #efefef;
        position: absolute; 
        right: 35px;
        
        background: #f33;
        padding: 0px 6px;
        border-radius: 25px;

    }
    
    #details-plot-cat .cell-title > .cnt {
        margin-top: -35px;
    }
    
    .plot-details .cell.active .preview-text {
        color: #f33;
    }
    
    /** Items **/
    
    .labelValue
    {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 60%;
        opacity: .5;

    }

    label {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: normal;
    }

    .toolTip {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        display: none;
        width: auto;
        height: auto;
        background: none repeat scroll 0 0 white;
        border: 0 none;
        border-radius: 8px 8px 8px 8px;
        box-shadow: -3px 3px 15px #888888;
        color: black;
        font: 12px sans-serif;
        padding: 5px;
        text-align: center;
    }


    .legend {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 60%;
    }
    rect {
        stroke-width: 2;
    }

    text {
        font: 10px sans-serif;
    }


    text.value{
        font-size: 200%;
        fill: white;
    }

    text.label{
        font-size: 100%;
    }

    .axis text {
        font: 10px sans-serif;
    }

    .axis path{
        fill: none;
        stroke: #000;
    }

    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .axis .tick line {
        stroke-width: 1;
        stroke: rgba(0, 0, 0, 0.2);
    }

    .axisHorizontal path{
        fill: none;
    }

    .axisHorizontal line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .axisHorizontal .tick line {
        stroke-width: 1;
        stroke: rgba(0, 0, 0, 0.2);
    }

    .bar {
        fill: steelblue;
        fill-opacity: .9;
    }

    .x.axis path {
        display: none;
    }
    
    #search-inp:focus {
        outline: none;
    }
    
    #search-inp {
        background: #f33;
        border: none;
        text-align: center;
        width: 85%;
    }
    
    
    
</style>
<?php $general = get_general_setting();?> 
<script type="text/javascript">
    var isCategory = '<?php echo $general->is_category;?>';
    var max     = 0
    ,   data    = [
        {label:"", value: 10, color:"#ccc"},
       
    ];
    
    function plot(isItm){
        var id      = isItm ? 'plot-itm' : 'plot-cat'
        
        if( typeof isItm == 'undefined' ) {
            graph(id);
            setTimeout(function(){
                plot(false);
            }, 1000);
            
        }else {
            // Get Records
            // 
            // 
            //$('#'+id).html('Loading ...');
            var args = {
                'catID' : isItm ? $('#details-plot-cat .cell.active').attr('data-id') : '',
                'date'  : $('#search-inp').attr('data-date') || ""
            }
            
            if( !isItm ) {
                $('#plot-itm, #details-plot-itm').fadeOut(300, function(){
                    $(this).remove();
                });
            }
            
            $('#details-'+id+" .cell").fadeOut('slow');
            $.post( baseURL + controller + '/ajax/', args, function( results ){
                results = JSON.parse( results ) || "";
                
                var html = '<div class="cell-title">'+ ( isItm ? $('#details-plot-cat .cell.active .preview-text > div:first').text() : '<input type="text" value="Archanai" id="search-inp" data-date="'+ args.date +'" readonly placeholder="dd/mm/YYYY"><i class="fa fa-search" id="search-icon" style="float: right; font-size: 20px; cursor: pointer; padding: 8px;"></i>' ) +' <span class="cnt"></span></div>';
                data = [];
                max = count = 0;
                
                if( results != '' ) {
                    
                    Object.keys(results).map(function(k, v){
                        var rw = results[k]
                        ,   clr = 'rgb('+ rand(255) +',' + rand(255) +',' + rand(255) +')'
                        ,   val = parseFloat(rw['total_amt']);
                        
                        max = val > max ? val : max;
                        
                        data.push({id: rw['id'], label: rw['name'], value: val, color: clr}); 
                        
                        html += '<div class="cell" data-id="'+ rw['id'] +'"><div class="preview-box" style="background: '+ clr +';">&nbsp;</div><div class="preview-text" style="border-bottom: 1px dotted '+ clr +';"><div style="display: block; ">'+ rw['name'] +'</div><div style="display: block; color: #999; font-size: 10px;">Qty: '+ rw['total_qty'] +' &nbsp; <span style="float: right; font-size: 10px;">S$: '+ rw['total_amt'] +'</span></div></div></div>';
                        
                        ++count;
                    });
                    
                    
                    graph(id);
                }else {
                    // No Data
                    html += '<div class="cell no-results">Sorry, No results found! '+ (!isItm && args.date != '' ? '<br><div style="color: #f33; font-size: 12px; font-weight: bold; margin-top: 20px;text-shadow: 1px 2px 2px #ccc; letter-spacing: 2px;">'+ args.date +'</div>' : '') +'</div>';
                    
                    // Clear Graph
                    if( args.date != '' ) {
                        $('#plot-itm, #details-plot-itm').fadeOut(300, function(){
                            $(this).remove();
                        });
                        
                        data.push({label:"", value: 10, color:"#ccc"});
                        graph('plot-cat');
                    }
                }
                
                if( $('#details-'+id).length == 0 ) {
                    var t = 0;
                    /*$('.plot-details').each(function(){
                        t += $(this).height()+5;
                    })*/
                    $('#'+id).before('<div class="plot-details" id="details-'+id+'"></div>');
                }
                
                $('#details-'+id).html(html);
                
                // Add Class to plot-details for Dynamic Scroll bar (i.e. Customize Vertical Scrollbar )
                if(isCategory == 0) {
                    $('#details-'+id).addClass('plot_no_cat');
                }
                
                $('#details-'+id+" .cell").each(function(i){
                    $(this).fadeIn(i*200, function(){
                        $('#details-'+id+' .cell-title span').html('('+ (i+1) +')');
                        /*if( i > 5 ) {
                            scrollTo($('#details-'+id+" .cell:last"));
                        }*/
                    });
                });

                if( count > 0 ) {
                    if( isItm ) {
                        if( count >= 6 ) {
                            setTimeout(function(){
                                $('#details-'+id+' .cell-title span').html('('+ count +')');
                                scrollTo($('#details-'+id+" .cell:last"));
                            }, count*200);
                        }else {
                            scrollTo($('#details-plot-cat .cell.active'));
                        }
                    }else {
                        scrollTo($('body'));
                    }
                }else {
                    $('#details-'+id+' .cell-title span').html('');
                    if( isItm ) {
                        scrollTo($('#details-'+id));
                        $('#'+id).fadeOut('slow', function(){
                            $(this).remove();
                        });
                    }
                }
                
            });
            
            
            
        }    
        
    }
    
    function scrollTo($this) {
        $('html, body').stop().animate({scrollTop: $this.offset().top+"px"}, 1000);
    }
    
    function rand(end, start) {
        start = typeof start == 'undefined' ? 0 : start;
        return Math.floor((Math.random()*end)+start);
    }
    
    function graph(id){
        var isCat = id == "plot-cat" ? true : false;
       
        if( $('#'+id).length == 0 ) {
           $('#plot').append('<div id="'+ id+'" class="plot"></div>');
        }
        
        $('#'+id).fadeOut('slow', function(){
            $(this).remove();
            
            if( isCat ) {
               
                var svg = d3.select('#plot').append('svg'); 
                svg.attr('id', id).attr('class', 'plot').attr('style', 'display: none;').append('g');
               
                //Donut3D.draw(id, setData(), 150, 150, 130, 100, 30, 0.4);
                Donut3D.draw(id, setData(), 150, 150, 200, 170, 40, 0.4);
                
                $('#'+id).fadeIn('slow', function(){
                    //Donut3D.transition(id, setData(), 130, 100, 30, 0.4);
                    Donut3D.transition(id, setData(), 200, 170, 40, 0.4);
                });

            }else {
                /*
                 * Items
                 */
                var offset = $('#plot').offset() 
                ,   left   = -300 //offset.left + 200
                ,   top    = 0 
                ,   height = 300//$('#plot-cat').height()
                ,   width  = $('#plot').width()-($('#details-'+id).width()+250);
                
                width   = max > width ? Math.floor(max/2) : width;
                if( height < $('#details-'+id).height() ) {
                    // More Height
                    height = ($('#details-'+id).height()+height);
                    $('body').append('<div id="styles"><style type="text/css">#plot-itm {min-height: '+ (height+130) +'px !important;}</style></div>');
                }else {
                    $('#styles').remove();
                }
                
                var dataset = data
                ,   formatPercent = d3.format("")
                ,   y = d3.scale.ordinal()
                        .rangeRoundBands([height, 0], .2, 0.5)
                ,   x = d3.scale.linear()
                        .range([0, width]);

                var xAxis = d3.svg.axis()
                        .scale(x)
                        .tickSize(-height)
                        .orient("bottom");

                var yAxis = d3.svg.axis()
                        .scale(y)
                        .orient("left");
        
        
                var svg = d3.select("#plot").append("svg")
                        .attr("id", id)
                        .attr("width", width)
                        .attr("height", height)
                        .append("g")
                        .attr("transform", "translate("+ left +","+ top +")");

                svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(xAxis);
                
                var div = d3.select("#plot").append("div").attr("class", "toolTip");
               
                y.domain(dataset.map(function(d) { return d.label; }));
                x.domain([0, d3.max(dataset, function(d) { return d.value; })]);

                svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(xAxis);

                svg.select(".y.axis").remove();
                svg.select(".x.axis").remove();

                svg.append("g")
                        .attr("class", "y axis")
                        .call(yAxis)
                        .append("text")
                        .attr("transform", "rotate(0)")
                        .attr("x", 100)
                        .attr("dx", ".1em")
                        .style("text-anchor", "end")
                        .text("Amount " + ( max > 0 ? " (Max: "+max+")" : '' ));


                var bar = svg.selectAll(".bar")
                        .data(dataset, function(d) { return d.label; });
                // new data:
                bar.enter().append("rect")
                        .attr("class", "bar")
                        .attr("x", function(d) { return x(d.value); })
                        .attr("y", function(d) { return y(d.label); })
                        .attr("width", function(d) { return width-x(d.value); })
                        .attr("height", y.rangeBand());

                bar
                        .on("mousemove", function(d){
                            div.style("left", d3.event.pageX+10+"px");
                            div.style("top", d3.event.pageY-25+"px");
                            div.style("display", "inline-block");
                            div.html((d.label)+"<br>"+(d.value)+"");
                        });
                bar
                        .on("mouseout", function(d){
                            div.style("display", "none");
                        });


                // removed data:
                bar.exit().remove();

                // updated data:
                bar.transition()
                        .duration(750)
                        .attr("x", function(d) { return 1; })
                        .attr("y", function(d) { return y(d.label); })
                        .attr("width", function(d) { return x(d.value); })
                        .attr("height", y.rangeBand())
                        .style("fill", function(d) { return d.color; });

                $("#"+id).fadeIn('slow', function(){});
        
            }
        
        })
            
         
    }
    
    
    
    
    
    
    
    /*** Item End ***/
    
    function setData(){
        return data.map(function(d){
            //return {label:d.label, value:1000*Math.random(), color:d.color};
            return {id: d.id, label:d.label, value:d.value, color:d.color};
        });
    }
    
    function setPos($this, isLeave){
        var $parent = $this.parent().closest('svg')
        ,   svgId   = $parent.attr('id')
        ,   $detail = $('#details-'+svgId);
        
        if( $detail.find('.cell.no-results').length == 0 && !$('#search-inp').hasClass('date-picker') ) {
        
            if( isLeave ) {
                var offset = $parent.offset()
                ,   top    =  20 //offset.top
                ,   left    =  offset.left+(2*$parent.width());//-$detail.width();

                $detail.stop().animate({'left': left+"px", 'top': top+"px", 'right': "30px"}, 'swing');
            }else {
                var offset = $this.offset()
                ,   top    =  offset.top-($detail.height()/4)
                ,   left    =  $parent.offset().left+$parent.width()+140;//offset.left-($detail.width()/4);
                
                //console.log(left);

                $detail.stop().animate({'left': left+"px", 'top': top+"px"}, 300);
            }
        }
    }
    
    
    $(document).on('ready', function(){
        
        $(document).on('mouseenter', 'rect.bar', function(){
            
            console.log(this);
            
        })
        
        $(document).on('change', '#search-inp', function(){
            
            $('#search-icon').removeClass('fa-times').addClass('fa-search');
        })
        
        $(document).on('click', '#search-icon', function(){
            var $inp = $('#search-inp');
            
            if( $(this).hasClass('fa-times') ) {
                $inp.attr('readonly', 'readonly').val("Archanai").removeClass('date-picker');
                $(this).removeClass('fa-times').addClass('fa-search');
                
            }else if( $inp.val() != '' && !$inp.prop('readonly')) {
                // Search
                $inp.attr('data-date', $inp.val());
                plot(false);
            }else if( $(this).hasClass('fa-search') ) {
                // Show Datepicker
                
                $inp.removeAttr('readonly').val('').addClass('date-picker');
                $(this).removeClass('fa-search').addClass('fa-times');
                
                $('.date-picker').datepicker({
                    format: 'dd/mm/yyyy',
                    //autoclose: true,
                    todayHighlight: true,
                    startView: 0,
                });
                $inp.focus();
                
            }
            
            
            
        })
        
        if(isCategory == 1) { 
            $(document).on('click', '.topSlice', function(){
                //console.log(this);
                var $this   = $(this)
                ,   clss    = $this.attr('class')
                ,   $parent = $this.parent().closest('svg')
                ,   indx    = $parent.find('g.slices .topSlice').index(this)
                ,   $row    = $('#details-'+$parent.attr('id')+' .cell').eq(indx)
                ,   Id      = $row.attr('data-id') || "";
             
                $('#details-'+$parent.attr('id')+' .cell.active').removeClass('active');
                $row.addClass('active');
                
                //$row.find('.preview-text').css({color: '#f33'});
                
                //console.log( indx + ", "+ Id );
                if( Id != '' ) {
                    
                    plot(true);
                    
                }
                
                
            })
        }
        $(document).on('mouseenter','.topSlice', function(){
            setPos($(this));
        });
        
        $(document).on('mouseleave','#plot-cat g', function(){
            setPos($(this), true);
        });
        
        
        
        /*d3.select('svg').on('mouseover', function(d){
            console.log(this);
        
        })*/
        
         plot();
    })
    

</script>