<div class="row">
	<div class="panel blank-panel">
		<div class="panel-body">
			<div class="row">
				<div class="col-md-12">
					<p>
						<label>Proveedor: </label><span> <?php echo $deuda->nombre_proveedor." - ".$deuda->razonsocial_proveedor;?></span>
					</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4">
					<p>
						<label>Final: </label><span> <?php echo $deuda->finalizacion_deuda;?></span>
					</p>
				</div>
				<div class="col-md-4">
					<p>
						<label>Monto: </label><span id="monto-deuda"> <?php echo $deuda->monto_deuda;?></span>
					</p>
				</div>
				<div class="col-md-4">
					<p>
						<label>Saldo: </label><span id="saldo-deuda"> <?php echo $deuda->saldo_deuda;?></span>
					</p>
				</div>
			</div>
			
			<div class="row">
				<form autocomplete="off" class="form-horizontal" name='formSaveTrans' id='formSaveTrans' method='post' action='<?php echo base_url('proveedores/guardar_transaccion');?>' onsubmit="deudas.guardarTrans(event);">
					<input type="hidden" id="id_proveedor" name="id_proveedor" value="<?php echo $deuda->id_proveedor;?>">
					<input type="hidden" id="id_deuda" name="id_deuda" value="<?php echo $deuda->id_deuda;?>">
					<input type="hidden" id="saldo_deuda" name="saldo_deuda" value="<?php echo $deuda->saldo_deuda;?>">
					<input type="hidden" id="monto_deuda" name="monto_deuda" value="<?php echo $deuda->monto_deuda;?>">
					<input type="hidden" id="nuevo_monto_deuda" name="nuevo_monto_deuda" value="<?php echo $deuda->monto_deuda;?>">
					<input type="hidden" id="estado_deuda" name="estado_deuda" value="<?php echo $deuda->estado_deuda;?>">
					<div class="form-group">
						<div class="col-md-3"><!--Transaccion-->
							<label class="control-label">Transaccion:</label>
							<select  name="tipo_transaccionxd" id="tipo_transaccionxd" class="form-control" required>
								<option value="" disabled selected>Seleccione una...</option>
								<option value="0">Cargo</option>
								<option value="1">Abono</option>
							</select>
						</div>
					
						<div class="col-md-4"><!--Concepto-->
							<label class="control-label">Concepto:</label>
							<input type="text" class="form-control" name="ref_transaccionxd" id="ref_transaccionxd" required>
						</div>

						<div class="col-md-2"><!--Cantidad-->
							<label class="control-label">Cantidad:</label>
							<input type="number" step="0.01" min="0.01" class="form-control" name="monto_transaccionxd" id="monto_transaccionxd" onkeydown='return isNumberDecimalKey(event);' required>
						</div>
						
						<div class="col-md-2">
							<button class="btn btn-info btn-sm m-t-md" id="guardar-transaccion" type="submit">Realizar transacci&oacute;n</button>
						</div>
					</div>
				</form>
			</div>
			
			<div class="hr-line-dashed"></div>
			<!--tabla-->
			<div id="detalles-deuda-transacciones-wrapper" style="height:340px; overflow:hidden;">
				<div class="table-responsive">
					 <table id="detalles-deuda-transacciones-table" class="table table-striped table-hover">
						<thead>
							<tr>
								<th>ID</th>
								<th>Fecha</th>
								<th>Tipo</th>
								<th>Transaccion</th>
								<th>Cargos</th>
								<th>Abonos</th>
								<th>Saldo</th>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					 </table>
				</div>
			</div>
			
			
			
		</div>
	</div>
</div>
<script>
 $(document).ready(function() {
	 if($("#estado_deuda").val() == 1){
		$("#guardar-transaccion").attr('disabled','disabled');					
	}
	 
	/*scroll*/
	$('#detalles-deuda-transacciones-wrapper').slimScroll({
        height: '340px'
	});
	$("#detalles-deuda-transacciones-table").dataTable({
		"dom": '<"export">lftip',
		"columns": [
			{ "data": "id_transaccionxd"},
			{ "data": "fecha_transaccionxd","width":"30%"},
			{ "data": "tipo_transaccionxd","orderable":false},
			{ "data": "ref_transaccionxd","width":"25%","orderable":false},
			{ "data": "cargo_transaccion","width":"15%","orderable":false},
			{ "data": "abono_transaccion","width":"15%","orderable":false},
			{ "data": "saldo_transaccionxd","width":"15%","orderable":false},
		],
		"columnDefs": [
			{ "targets": 0, 'visible' : false, 'searchable' : false},
			{ "targets": 2, 'visible' : false, 'searchable' : false},
		],
		"iDisplayLength": 5,
		"aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "Todas"]],
		"bLengthChange": true,
		"processing": true,
		"order": [ 1, 'asc' ],
		"serverSide": true,
		"ajax": {
			"url": "<?php echo base_url();?>proveedores/cargar_transacciones",
			"type": "POST",
			"data": function ( d ) {
				d.idDeuda = "<?php echo $deuda->id_deuda;?>";
			}
		},
		"language": {
			"emptyTable":     "",
			"lengthMenu": "Mostrar _MENU_ registros por pagina",
			"zeroRecords": "",
			"info": "Pagina _PAGE_ de _PAGES_",
			"infoEmpty": "No hay registros",
			"infoFiltered": "",
			"search":         "Buscar:",
			"processing":     "<div class='overlay'><i class='fa fa-refresh fa-spin'></i></div>",
			"loadingRecords": "<div class='overlay'><i class='fa fa-refresh fa-spin'></i></div>",
			"paginate": {
				"first":      "Primero",
				"last":       "Ultimo",
				"next":       "Siguiente",
				"previous":   "Anterior"
			}
		},
		"bAutoWidth": false
	}); 
	 $("div.export").html("<a class='btn btn-white pull-right m-l-xs' title='Exportar estado de cuenta' style='padding:4px 12px;' <?php if($permiso_exportarxpagar):?>href='<?php echo base_url("reportes/reporte_deuda_proveedor");?>?iddeuda=<?php echo $deuda->id_deuda;?>&idproveedor=<?php echo $deuda->id_proveedor;?>' target='_blank'<?php else:?>  onclick='error_noacces()'<?php endif;?>><i class='fa fa-file-pdf-o'></i></a>");
 });
</script>