<!doctype html>
<?
$fi=$_GET["fechaini"];
$ff=$_GET["fechafin"];
//require("../conectar.php");
//require("funciones.php");
?>

<table class="ocupacion">
  <tr>
    <td>Concepto </td>
    <td>No. de Clientes</td>
    <td>Cantidad en dolares</td>
	
    <td>Cantidad en pesos</td>
  </tr>
  <?
  
  
  $sql="SELECT concepto, count(DISTINCT id_concepto) as con from pagos  where(fecha between '$fi' and '$ff') group by concepto ";  
	$query=mysql_query($sql);
	$mayor=0;
		while($pago=mysql_fetch_array($query))
		{$x++;
		$concepto=$pago["concepto"];
		 $rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
    $color = '#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
    
 ?><tr>
    <td>
    <input name="concepto<?echo$x?>" type="hidden" id="concepto<?echo$x?>" value="<?echo$concepto;?>" ><?echo$concepto;?></td>
	
	<input name="color<?echo$x?>" type="hidden" id="color<?echo$x?>" value="<?echo$color;?>" >
    <td><? $totalclientes=$totalclientes+$pago["con"]; if($mayor<$pago["con"])$mayor=$pago["con"];?>
    <input name="cliente<?echo$x?>" type="text" id="cliente<?echo$x?>" value="<?echo$pago["con"];?>" readonly></td>
    <td>
	<?$sql="SELECT sum(monto) as monto from pagos  where (fecha between '$fi' and '$ff') and tipo_moneda='USD' and concepto='$concepto' group by concepto ";  
	$query1=mysql_query($sql); 
	$montous=mysql_fetch_array($query1);
	echo moneda($montous["monto"]);
	$totaldolar=$totaldolar+$montous["monto"];?></td>
    <td><?$sql="SELECT sum(monto) as monto from pagos  where (fecha between '$fi' and '$ff') and tipo_moneda='MXN' and concepto='$concepto' group by concepto ";  
	$query1=mysql_query($sql); 
	$montopes=mysql_fetch_array($query1);
	echo moneda($montopes["monto"]);
	
	$totalpesos=$totalpesos+$montopes["monto"];?></td>
  </tr>
  <?}?>
  <tr>
    <td>Total</td>
    <td><?$mayor=$mayor+5;?>
    <input name="total" type="text" id="total" value="<?echo $mayor;?>" readonly></td>
    <td><?echo moneda($totaldolar);?></td>
    <td><?echo moneda($totalpesos);?></td>
    <input name="ancho" type="hidden" id="ancho" value="<?echo$x;?>" >
	
  </tr>
</table>
<br>
<p>
  <canvas id="grafica" width="<?echo$x*90+50?>" height="<?echo$mayor*20+50?>" style="border:1px solid #c3c3c3; background:white;" ></canvas>
  <canvas id="referencia" width="<?echo$x*20+50?>" height="<?echo$x*40?>" style="border:1px solid #c3c3c3; background:white; margin-bottom:50px; margin-left:30px;" ></canvas>
</p>
<script>

window.onload = function () { 
grady=20;
grdx=90;
iniciox=30;
inicioy=10;
alto=parseInt(document.getElementById("total").value)*grady;
total=document.getElementById("total").value;
ancho=document.getElementById("ancho").value*grdx;
anchos=document.getElementById("ancho").value;
ancho=ancho+(grdx/3);
var c=document.getElementById("grafica");
var ctx=c.getContext("2d");
ctx.font="10px Arial";

//para x
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.moveTo(iniciox,alto);
ctx.lineTo(ancho,alto);
ctx.stroke();

for(x=grdx/3;x<=ancho;x=x+grdx){
ctx.moveTo(x,alto-5);
ctx.lineTo(x,alto+5);
ctx.stroke();
}

//para y


ctx.strokeStyle="#d7d7d7";
ctx.beginPath();
for(x=1;x<=total;x++){
ctx.moveTo(iniciox-5,x*grady);
ctx.lineTo(ancho,x*grady);

ctx.fillText(total-x,13,(x*grady)+3);
ctx.stroke();
} 
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.moveTo(iniciox,inicioy);
ctx.lineTo(iniciox,alto);
ctx.stroke();


//parala barra
coorx=grdx;coory=alto;
for(x=1;x<=anchos;x++)
{
cliente=document.getElementById("cliente"+x).value*grady;
concepto=document.getElementById("concepto"+x).value;
color=document.getElementById("color"+x).value;
ctx.fillStyle=color;
ctx.fillRect(coorx-(grdx/3),coory-cliente,(grdx/2),cliente);
ctx.fillStyle="#000";
ctx.fillText(concepto,coorx-(grdx/2),coory+grady);
ctx.fillText(cliente/grady,coorx-15,coory-cliente-2);
coorx=coorx+grdx;
}
//para referancia

var d=document.getElementById("referencia");
var dtx=d.getContext("2d");
dtx.font="10px Arial";
for(x=1;x<=anchos;x++)
{
cliente=document.getElementById("cliente"+x).value*grady;
concepto=document.getElementById("concepto"+x).value;
color=document.getElementById("color"+x).value;
dtx.fillStyle=color;
dtx.fillRect(5,(x*30)-10,10,10);
dtx.fillStyle="#000";
dtx.fillText(concepto,20,(x*30));
}

 }
</script>
