<link href="<?php echo base_url('assets/css/chosen.css')?>" rel="stylesheet" type="text/css" />
<!-- Content Header (Page header) -->
<style>
.row{
	margin-bottom:10px;
}
#month-chart > svg {width: 100% !important;}
</style>
 <!-- Content Header (Page header) -->
<section class="content-header">
    <h1><?php echo lang('reports');?>
    </h1>
    <ol class="breadcrumb">
        <li><a href="<?php echo site_url('admin')?>"><i class="fa fa-dashboard"></i> <?php echo lang('dashboard');?></a></li>
      
        <li class="active"><?php echo lang('reports');?></li>
    </ol>
</section>


<section class="content"><div class="box box-default" style="margin-bottom:15px">
    <div class="box-body">
        <form method="get" class="form-inline">
            <label style="margin-right:8px"><i class="fa fa-user"></i> Cliente:</label>
            <select name="client_id" class="form-control" style="margin-right:8px;min-width:200px">
                <option value="">Todos os clientes</option>
                <?php foreach($all_clients??[] as $cl): ?>
                <option value="<?php echo $cl->id?>" <?php echo ($client_id==$cl->id)?"selected":""?>><?php echo htmlspecialchars($cl->name)?></option>
                <?php endforeach; ?>
            </select>
            <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Filtrar</button>
            <a href="<?php echo site_url('admin/reports')?>" class="btn btn-default btn-sm">Limpar</a>
        </form>
    </div>
</div>

    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="box box-primary">
                <div class="box-header">
                   
                </div><!-- /.box-header -->
                <!-- form start -->
			       <div class="box-body">
                       
			          <div class="row">
                        <div class="col-md-10">
                            <!-- Custom Tabs -->
                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true"><?php echo lang('by') ." ". lang('month');?></a></li>
                                    <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false"><?php echo lang('by') ." ". lang('week');?></a></li>
									 <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false"><?php echo lang('by') ." ". lang('year');?></a></li>
									  <li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="false"><?php echo lang('by') ." ". lang('client');?></a></li>
                                   
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tab_1">
                                    	<!--graph code start  -->
										
                            <!-- solid sales graph -->
                            <div class="box box-solid bg-teal-gradient">
                                <div class="box-header">
                                    <i class="fa fa-th"></i>
                                    <h3 class="box-title">Earning Graph</h3>
                                    <div class="box-tools pull-right">
                                        <button class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                                        <button class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
                                    </div>
                                </div>
                                <div class="box-body border-radius-none">
                                    <div class="chart" id="line-chart" style="height: 250px;"></div>
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->


										<!--graph code end -->
									</div><!-- /.tab-pane -->
                                    <div class="tab-pane" id="tab_2">
                                         <div class="box box-solid bg-teal-gradient">
                                <div class="box-header">
                                    <i class="fa fa-th"></i>
                                    <h3 class="box-title">Earning Graph</h3>
                                    <div class="box-tools pull-right">
                                        <button class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                                        <button class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
                                    </div>
                                </div>
                                <div class="box-body border-radius-none">
                                    <div class="chart" id="month-chart" style="height: 250px;"></div>
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->
                                    </div><!-- /.tab-pane -->
									
									 <div class="tab-pane" id="tab_3">
                                       <!-- solid sales graph -->
                            <div class="box box-solid bg-teal-gradient">
                                <div class="box-header">
                                    <i class="fa fa-th"></i>
                                    <h3 class="box-title">Earning Graph</h3>
                                    <div class="box-tools pull-right">
                                        <button class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
                                        <button class="btn bg-teal btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
                                    </div>
                                </div>
                                <div class="box-body border-radius-none">
                                    <div class="chart" id="year-chart" style="height: 250px;"></div>
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->
                                    </div><!-- /.tab-pane -->
									
									 <div class="tab-pane" id="tab_4">
                                       <div class="box box-success">
                                <div class="box-header">
                                    <h3 class="box-title">Bar Chart</h3>
                                </div>
                                <div class="box-body chart-responsive">
                                    <div class="chart" id="bar-chart" style="height: 300px;"></div>
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->
                                    </div><!-- /.tab-pane -->
                                </div><!-- /.tab-content -->
                            </div><!-- nav-tabs-custom -->
                        </div><!-- /.col -->

                  </div>
					  
					  
						
                    </div><!-- /.box-body -->
    
             </form>
            </div><!-- /.box -->
        </div>
     </div>

<!-- ── GRÁFICO FINANCEIRO ─────────────────────────────────────────────── -->
<div class="row" style="margin-top:20px">
    <div class="col-md-8">
        <div class="box box-primary">
            <div class="box-header with-border" style="background:#1F4E79;color:#fff">
                <h3 class="box-title" style="color:#fff"><i class="fa fa-bar-chart"></i> Receitas x Despesas — Últimos 12 Meses</h3>
            </div>
            <div class="box-body">
                <canvas id="chart-fin-mensal" height="300"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="box box-success">
            <div class="box-header with-border" style="background:#1D6B3B;color:#fff">
                <h3 class="box-title" style="color:#fff"><i class="fa fa-users"></i> Receitas por Cliente (Top 10)</h3>
            </div>
            <div class="box-body no-padding">
                <table class="table table-striped table-hover">
                    <thead><tr><th>Cliente</th><th class="text-right">Recebido</th><th class="text-right">Pendente</th></tr></thead>
                    <tbody>
                    <?php if(!empty($fin_clients)) foreach($fin_clients as $fc): ?>
                    <tr>
                        <td><?php echo htmlspecialchars($fc->name??"-")?></td>
                        <td class="text-right text-success">R$ <?php echo number_format($fc->recebido??0,2,",",".")?></td>
                        <td class="text-right text-warning">R$ <?php echo number_format($fc->pendente??0,2,",",".")?></td>
                    </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
<?php
$fin_labels   = [];
$fin_recebido = [];
$fin_pago     = [];
$fin_a_receber= [];
if(!empty($fin_months)) foreach($fin_months as $row) {
    $fin_labels[]    = $row->mes_label;
    $fin_recebido[]  = (float)$row->recebido;
    $fin_pago[]      = (float)$row->pago;
    $fin_a_receber[] = (float)$row->a_receber;
}
?>
var ctx = document.getElementById("chart-fin-mensal");
if(ctx && <?php echo json_encode($fin_labels)?>.length > 0) {
    new Chart(ctx, {
        type: "bar",
        data: {
            labels: <?php echo json_encode($fin_labels)?>,
            datasets: [
                {
                    label: "Recebido",
                    data: <?php echo json_encode($fin_recebido)?>,
                    backgroundColor: "rgba(29,107,59,0.8)",
                    borderColor: "#1D6B3B",
                    borderWidth:1, borderRadius:4
                },
                {
                    label: "Pago (Despesas)",
                    data: <?php echo json_encode($fin_pago)?>,
                    backgroundColor: "rgba(197,90,17,0.7)",
                    borderColor: "#C55A11",
                    borderWidth:1, borderRadius:4
                },
                {
                    label: "A Receber",
                    data: <?php echo json_encode($fin_a_receber)?>,
                    backgroundColor: "rgba(46,117,182,0.5)",
                    borderColor: "#2E75B6",
                    borderWidth:1, borderRadius:4,
                    type: "line"
                }
            ]
        },
        options: {
            responsive:true,
            maintainAspectRatio:false,
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(ctx) {
                            return ctx.dataset.label+": R$ "+ctx.parsed.y.toLocaleString("pt-BR",{minimumFractionDigits:2});
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero:true,
                    ticks: {
                        callback: function(v) { return "R$ "+v.toLocaleString("pt-BR",{minimumFractionDigits:0}); }
                    }
                }
            }
        }
    });
}
</script>

</section>  


<?php 
	
	$graph_arr = array();
	foreach($months as $ind => $month) {
		$graph_arr[$ind]['date'] = $month->date;
		$graph_arr[$ind]['amount'] = $month->amount;
	}
	$week_arr = array();
	foreach($weeks as $ind => $week) {
		$week_arr[$ind]['date'] = $week->date;
		$week_arr[$ind]['amount'] = $week->amount;
	}
	
	$year_arr = array();
	foreach($years as $ind => $year) {
		$year_arr[$ind]['date'] = date('Y',strtotime($year->date));
		$year_arr[$ind]['amount'] =$year->amount;
	}
	
	$client_arr = array();
	foreach($clients as $ind => $client) {
		$client_arr[$ind]['name'] = $client->name;
		$client_arr[$ind]['amount'] =$client->amount;
	}
?>	

<script src="<?php echo base_url('assets/js/chosen.jquery.min.js')?>" type="text/javascript"></script>
<script src="<?php echo base_url('assets/js/raphael-min.js')?>" type="text/javascript"></script>
<script src="<?php echo base_url('assets/js/morris.min.js')?>" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	
	$('.chzn').chosen();
	/* Morris.js Charts */
    // Sales chart
   
    var line = new Morris.Line({
        element: 'line-chart',
        resize: true,
        data: <?php echo json_encode($graph_arr); ?>,
        xkey: 'date',
        ykeys: ['amount'],
        labels: ['Amount'],
        lineColors: ['#efefef'],
        lineWidth: 2,
        hideHover: 'auto',
        gridTextColor: "#fff",
        gridStrokeWidth: 0.4,
        pointSize: 4,
        pointStrokeColors: ["#efefef"],
        gridLineColor: "#efefef",
        gridTextFamily: "Open Sans",
        gridTextSize: 10
    });
	
	
	 var month_line = new Morris.Line({
        element: 'month-chart',
        resize: true,
       data: <?php echo json_encode($week_arr); ?>,
         xkey: 'date',
        ykeys: ['amount'],
        labels: ['Amount'],
        lineColors: ['#efefef'],
        lineWidth: 2,
        hideHover: 'auto',
        gridTextColor: "#fff",
        gridStrokeWidth: 0.4,
        pointSize: 4,
        pointStrokeColors: ["#efefef"],
        gridLineColor: "#efefef",
        gridTextFamily: "Open Sans",
        gridTextSize: 10
    });
	
	$(document).on('click','a[href=#tab_2]',function(){
		
		month_line.redraw();
	});
	
	
	$(document).on('click','a[href=#tab_3]',function(){
		
		year_line.redraw();
	});
	 var year_line = new Morris.Line({
        element: 'year-chart',
        resize: true,
         data: <?php echo json_encode($year_arr); ?>,
         xkey: 'date',
        ykeys: ['amount'],
        labels: ['Amount'],
        lineColors: ['#efefef'],
        lineWidth: 2,
        hideHover: 'auto',
        gridTextColor: "#fff",
        gridStrokeWidth: 0.4,
        pointSize: 4,
        pointStrokeColors: ["#efefef"],
        gridLineColor: "#efefef",
        gridTextFamily: "Open Sans",
        gridTextSize: 10
    });
	
	
    var bar = new Morris.Bar({
        element: 'bar-chart',
        resize: true,
        data: <?php echo json_encode($client_arr); ?>,
        barColors: ['#00a65a'],
        xkey: 'name',
        ykeys: ['amount'],
        labels: ['Amount'],
        hideHover: 'auto'
    });
	
});



</script>